diff --git a/.gitignore b/.gitignore
index aa724b7..86f1fbc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@
 .externalNativeBuild
 .cxx
 local.properties
+/app/src/main/java/com/example/listifyjetapp/utils/constants/Constants.kt
\ No newline at end of file
diff --git a/.idea/deploymentTargetSelector.xml b/.idea/deploymentTargetSelector.xml
index 400f821..fe9873e 100644
--- a/.idea/deploymentTargetSelector.xml
+++ b/.idea/deploymentTargetSelector.xml
@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2025-07-18T02:23:47.291382700Z">
+        <DropdownSelection timestamp="2025-08-16T03:18:19.131716100Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="LocalEmulator" identifier="path=C:\Users\micha\.android\avd\Pixel_2_API_32.avd" />
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000..7061a0d
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,61 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="ComposePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="ComposePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewDimensionRespectsLimit" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewMustBeTopLevelFunction" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNeedsComposableAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="GlancePreviewNotSupportedInUnitTestFiles" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewAnnotationInFunctionWithParameters" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewApiLevelMustBeValid" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewDeviceShouldUseNewSpec" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewFontScaleMustBeGreaterThanZero" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewMultipleParameterProviders" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewParameterProviderOnFirstParameter" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+    <inspection_tool class="PreviewPickerAnnotation" enabled="true" level="ERROR" enabled_by_default="true">
+      <option name="composableFile" value="true" />
+      <option name="previewFile" value="true" />
+    </inspection_tool>
+  </profile>
+</component>
\ No newline at end of file
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
index 1689416..f0bebce 100644
--- a/app/build.gradle.kts
+++ b/app/build.gradle.kts
@@ -5,6 +5,9 @@ plugins {
 
     alias(libs.plugins.hilt)
     alias(libs.plugins.ksp)
+
+    // Kotlin serialization plugin for type safe routes and navigation arguments
+    kotlin("plugin.serialization") version "2.0.21"
 }
 
 android {
@@ -105,4 +108,26 @@ dependencies {
     // google font
     implementation(libs.androidx.ui.text.google.fonts)
 
+    // material icons
+    implementation (libs.androidx.material.icons.extended)
+
+    // ================= Kotlin serialization =======================
+    // Jetpack Compose integration
+    implementation(libs.androidx.navigation.compose)
+
+    // Views/Fragments integration
+    implementation(libs.androidx.navigation.fragment)
+    implementation(libs.androidx.navigation.ui)
+
+    // Feature module support for Fragments
+    implementation(libs.androidx.navigation.dynamic.features.fragment)
+
+    // Testing Navigation
+    androidTestImplementation(libs.androidx.navigation.testing)
+
+    // JSON serialization library, works with the Kotlin serialization plugin
+    implementation(libs.kotlinx.serialization.json)
+
+    // Typed DataStore (Typed API surface, such as Proto)
+    implementation(libs.androidx.datastore.preferences)
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/components/authButtons/AuthButtons.kt b/app/src/main/java/com/example/listifyjetapp/components/authButtons/AuthButtons.kt
new file mode 100644
index 0000000..dd85248
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/components/authButtons/AuthButtons.kt
@@ -0,0 +1,55 @@
+package com.example.listifyjetapp.components.authButtons
+
+import androidx.compose.foundation.BorderStroke
+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.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ExitToApp
+import androidx.compose.material.icons.filled.MailOutline
+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.unit.dp
+import com.example.listifyjetapp.ui.theme.ButtonPaddings
+import com.example.listifyjetapp.ui.theme.ButtonShape
+import com.example.listifyjetapp.ui.theme.ListifyColor
+import com.example.listifyjetapp.widgets.buttons.CustomOutlinedButton
+import com.example.listifyjetapp.widgets.buttons.FilledButton
+
+@Composable
+fun AuthButtons(onGoToLoginScreen: () -> Unit) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp),
+        verticalArrangement = Arrangement.Bottom,
+        horizontalAlignment = Alignment.CenterHorizontally
+    ) {
+        CustomOutlinedButton(
+            modifier = ButtonPaddings.fillMaxWidth(),
+            shape = ButtonShape,
+            border = BorderStroke(2.dp, color = Color.White),
+            text = "SIGN UP WITH EMAIL",
+            textColor = ListifyColor.TextDark,
+            buttonIcon = Icons.Default.MailOutline,
+            iconDescription = "Sign In Email",
+            onClick = {}
+        )
+
+        FilledButton(
+            modifier = ButtonPaddings.fillMaxWidth(),
+            shape = ButtonShape,
+            containerColor = Color.White,
+            contentColor = ListifyColor.TextDark,
+            text = "LOG IN",
+            buttonIcon = Icons.AutoMirrored.Filled.ExitToApp,
+            iconDescription = "Log In",
+            onClick = { onGoToLoginScreen() }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/components/bottomMenus/ListItemActionSheet.kt b/app/src/main/java/com/example/listifyjetapp/components/bottomMenus/ListItemActionSheet.kt
new file mode 100644
index 0000000..c6839db
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/components/bottomMenus/ListItemActionSheet.kt
@@ -0,0 +1,48 @@
+package com.example.listifyjetapp.components.bottomMenus
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Delete
+import androidx.compose.material.icons.filled.Edit
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.ListItem
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.ui.screens.listItem.ListItemViewModel
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun ListItemActionSheet(
+    onDismissSheet: () -> Unit,
+    viewModel: ListItemViewModel = hiltViewModel()
+) {
+    ModalBottomSheet(
+        onDismissRequest =  onDismissSheet,
+        modifier = Modifier.fillMaxWidth(),
+    ) {
+
+        Text(
+            modifier = Modifier.fillMaxWidth().padding(8.dp),
+            textAlign = TextAlign.Center,
+            text = viewModel.activeItemDescription,
+            fontSize = 20.sp
+        )
+
+        ListItem(
+            headlineContent = { Text(text = "Edit", fontSize = 20.sp) },
+            leadingContent = { Icon(Icons.Default.Edit, null) }
+        )
+        ListItem(
+            headlineContent = { Text(text = "Delete", fontSize = 20.sp) },
+            leadingContent = { Icon(Icons.Default.Delete, null) }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/components/formModals/EditItemForm.kt b/app/src/main/java/com/example/listifyjetapp/components/formModals/EditItemForm.kt
new file mode 100644
index 0000000..2e3cff1
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/components/formModals/EditItemForm.kt
@@ -0,0 +1,67 @@
+package com.example.listifyjetapp.components.formModals
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.ui.theme.ButtonBorderStroke
+import com.example.listifyjetapp.ui.theme.ButtonPaddings
+import com.example.listifyjetapp.ui.theme.ButtonShape
+import com.example.listifyjetapp.ui.theme.ListifyColor
+import com.example.listifyjetapp.widgets.buttons.CustomOutlinedButton
+import com.example.listifyjetapp.widgets.buttons.FilledButton
+import com.example.listifyjetapp.widgets.inputFields.FormInputField
+
+@Composable
+fun EditItemForm(
+    description: String,
+    units: String,
+    isError: Boolean,
+    onDescriptionChange: (String) -> Unit,
+    onUnitsChange: (String) -> Unit,
+    onEditFormSubmit: () -> Unit,
+    onDeleteItem: () -> Unit
+) {
+
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        FormInputField(
+            placerHolder = "e.g., grocery list",
+            textState = description,
+            isError = isError,
+            onValueChange = onDescriptionChange
+        )
+
+        FormInputField(
+            placerHolder = "e.g., 1 lbs",
+            textState = units,
+            onValueChange = onUnitsChange
+        )
+
+        FilledButton(
+            modifier = ButtonPaddings.fillMaxWidth(),
+            shape = ButtonShape,
+            containerColor = ListifyColor.SplashYellow,
+            contentColor = Color.White,
+            text = "Update",
+            buttonIcon = null,
+            iconDescription = null,
+            onClick = { onEditFormSubmit() }
+        )
+        CustomOutlinedButton(
+            modifier = ButtonPaddings.fillMaxWidth(),
+            shape = ButtonShape,
+            border = BorderStroke(ButtonBorderStroke, color = Color.Red),
+            text = "Delete",
+            textColor = Color.Red,
+            onClick = { onDeleteItem() }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/components/formModals/EditListForm.kt b/app/src/main/java/com/example/listifyjetapp/components/formModals/EditListForm.kt
new file mode 100644
index 0000000..c220c4e
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/components/formModals/EditListForm.kt
@@ -0,0 +1,58 @@
+package com.example.listifyjetapp.components.formModals
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.ui.theme.ButtonBorderStroke
+import com.example.listifyjetapp.ui.theme.ButtonPaddings
+import com.example.listifyjetapp.ui.theme.ButtonShape
+import com.example.listifyjetapp.ui.theme.ListifyColor
+import com.example.listifyjetapp.widgets.buttons.CustomOutlinedButton
+import com.example.listifyjetapp.widgets.buttons.FilledButton
+import com.example.listifyjetapp.widgets.inputFields.FormInputField
+
+@Composable
+fun EditListForm(
+    listName: String,
+    isError: Boolean,
+    onListNameChange: (String) -> Unit,
+    onEditFormSubmit: () -> Unit,
+    onDeleteItem: () -> Unit
+) {
+
+    Column(
+        modifier = Modifier.fillMaxWidth()
+    ) {
+        FormInputField(
+            placerHolder = "e.g., grocery list",
+            textState = listName,
+            isError = isError,
+            onValueChange = onListNameChange
+        )
+
+        FilledButton(
+            modifier = ButtonPaddings.fillMaxWidth(),
+            shape = ButtonShape,
+            containerColor = ListifyColor.SplashYellow,
+            contentColor = Color.White,
+            text = "Update",
+            buttonIcon = null,
+            iconDescription = null,
+            onClick = { onEditFormSubmit() }
+        )
+        CustomOutlinedButton(
+            modifier = ButtonPaddings.fillMaxWidth(),
+            shape = ButtonShape,
+            border = BorderStroke(ButtonBorderStroke, color = Color.Red),
+            text = "Delete",
+            textColor = Color.Red,
+            onClick = { onDeleteItem() }
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/components/inputFields/PasswordTextField.kt b/app/src/main/java/com/example/listifyjetapp/components/inputFields/PasswordTextField.kt
new file mode 100644
index 0000000..65e7b27
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/components/inputFields/PasswordTextField.kt
@@ -0,0 +1,70 @@
+package com.example.listifyjetapp.components.inputFields
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Visibility
+import androidx.compose.material.icons.filled.VisibilityOff
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+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.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.PasswordVisualTransformation
+import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.widgets.texts.InputLabelText
+
+@Composable
+fun PasswordTextField(
+    password: String,
+    onPasswordChange: (String) -> Unit
+) {
+    var isShowPassword by remember { mutableStateOf(false) }
+
+    OutlinedTextField(
+        modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp),
+        value = password,
+        onValueChange = onPasswordChange,
+        textStyle = MaterialTheme.typography.bodyMedium,
+        label = { InputLabelText(text="Password") },
+        visualTransformation = if (isShowPassword) {
+            VisualTransformation.None
+        } else {
+            PasswordVisualTransformation()
+        },
+        keyboardOptions = KeyboardOptions(
+            keyboardType = KeyboardType.Password,
+            imeAction = ImeAction.Done,
+        ),
+        keyboardActions = KeyboardActions(onDone = {
+            //TODO: Login request - submit login form
+        }),
+        trailingIcon = {
+            if (isShowPassword) {
+                IconButton(onClick = { isShowPassword = false }) {
+                    Icon(
+                        imageVector = Icons.Filled.Visibility,
+                        contentDescription = "show password"
+                    )
+                }
+            } else {
+                IconButton(onClick = { isShowPassword = true }) {
+                    Icon(
+                        imageVector = Icons.Filled.VisibilityOff,
+                        contentDescription = "hide password"
+                    )
+                }
+            }
+        }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/components/inputFields/ValidatingInputTextField.kt b/app/src/main/java/com/example/listifyjetapp/components/inputFields/ValidatingInputTextField.kt
new file mode 100644
index 0000000..7314dd5
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/components/inputFields/ValidatingInputTextField.kt
@@ -0,0 +1,38 @@
+package com.example.listifyjetapp.components.inputFields
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.widgets.texts.InputLabelText
+
+@Composable
+fun ValidatingInputTextField(
+    email: String,
+    onValueChange: (String) -> Unit,
+    validatorHasError: Boolean
+) {
+    OutlinedTextField(
+        modifier = Modifier.fillMaxWidth(),
+        value = email,
+        onValueChange = onValueChange,
+        textStyle = MaterialTheme.typography.bodyMedium,
+        label = { InputLabelText(text="Email") },
+        isError = validatorHasError,
+        supportingText = {
+            if (validatorHasError) {
+                InputLabelText("Incorrect email format.")
+            }
+        },
+        keyboardOptions = KeyboardOptions(
+            imeAction = ImeAction.Next, // ** Go to next **
+            keyboardType = KeyboardType.Email
+        ),
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/data/ListifyStorage.kt b/app/src/main/java/com/example/listifyjetapp/data/ListifyStorage.kt
new file mode 100644
index 0000000..bac3dbe
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/data/ListifyStorage.kt
@@ -0,0 +1,77 @@
+package com.example.listifyjetapp.data
+
+import android.content.Context
+import androidx.datastore.core.DataStore
+import androidx.datastore.preferences.core.Preferences
+import androidx.datastore.preferences.core.booleanPreferencesKey
+import androidx.datastore.preferences.core.edit
+import androidx.datastore.preferences.core.intPreferencesKey
+import androidx.datastore.preferences.core.stringPreferencesKey
+import androidx.datastore.preferences.preferencesDataStore
+import com.example.listifyjetapp.model.UserDataStore
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.map
+
+// Create a Preferences DataStore
+val USER_DATASTORE = "user_data"
+val Context.dataStore: DataStore<Preferences> by preferencesDataStore(name = USER_DATASTORE)
+
+class ListifyStorageManager(val context: Context) {
+
+     private companion object {
+        val USER_ID = intPreferencesKey("userId")
+        val EMAIL = stringPreferencesKey("email")
+        val ACCESS_TOKEN = stringPreferencesKey("accessToken")
+        val REFRESH_TOKEN = stringPreferencesKey("refreshToken")
+        val IS_LOGIN = booleanPreferencesKey("isLogin")
+    }
+
+    // write a preference dataStorage - after login
+    suspend fun saveToDataStore(userDataStore: UserDataStore) {
+        context.dataStore.edit {
+            it[USER_ID] = userDataStore.userId
+            it[EMAIL] = userDataStore.email
+            it[ACCESS_TOKEN] = userDataStore.accessToken
+            it[REFRESH_TOKEN] = userDataStore.refreshToken
+            it[IS_LOGIN] = userDataStore.isLogin
+        }
+    }
+
+    // retrieve data from dataStore
+    fun getUser(): Flow<UserDataStore> = context.dataStore.data.map {
+        UserDataStore(
+            userId= it[USER_ID] ?: 0,
+            email = it[EMAIL] ?: "",
+            accessToken =it[ACCESS_TOKEN] ?: "",
+            refreshToken =it[REFRESH_TOKEN] ?: "",
+            isLogin = it[IS_LOGIN] ?: false,
+        )
+    }
+
+    val userIdFlow: Flow<Int> = context.dataStore.data.map { it[USER_ID] ?: 0 }
+    val emailFlow: Flow<String> = context.dataStore.data.map { it[EMAIL] ?: "" }
+    val isLoggedInFlow: Flow<Boolean> = context.dataStore.data.map { it[IS_LOGIN] ?: false }
+
+    val accessTokenFlow: Flow<String> = context.dataStore.data.map { it[ACCESS_TOKEN] ?: "" }
+    val refreshTokenFlow: Flow<String> = context.dataStore.data.map { it[REFRESH_TOKEN] ?: "" }
+
+    suspend fun updateIsLoggedIn(isLoggedIn: Boolean) {
+        context.dataStore.edit { it[IS_LOGIN] = isLoggedIn }
+    }
+
+    suspend fun updateEmail(email: String) {
+        context.dataStore.edit { it[EMAIL] = email }
+    }
+
+    suspend fun updateTokens(accessToken: String, refreshToken: String) {
+        context.dataStore.edit {
+            it[ACCESS_TOKEN] = accessToken
+            it[REFRESH_TOKEN] = refreshToken
+        }
+    }
+
+    // clear data from dataStore - logout
+    suspend fun clearDataStore() = context.dataStore.edit {
+        it.clear()
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/data/LoginState.kt b/app/src/main/java/com/example/listifyjetapp/data/LoginState.kt
new file mode 100644
index 0000000..5ff6e08
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/data/LoginState.kt
@@ -0,0 +1,10 @@
+package com.example.listifyjetapp.data
+
+import com.example.listifyjetapp.model.LoginSuccess
+
+sealed class LoginState {
+    object Idle : LoginState()
+    object Loading : LoginState()
+    data class Success(val data: LoginSuccess) : LoginState()
+    data class Error(val message: String) : LoginState()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/di/AppModule.kt b/app/src/main/java/com/example/listifyjetapp/di/AppModule.kt
index 569c61b..54d643f 100644
--- a/app/src/main/java/com/example/listifyjetapp/di/AppModule.kt
+++ b/app/src/main/java/com/example/listifyjetapp/di/AppModule.kt
@@ -1,11 +1,20 @@
 package com.example.listifyjetapp.di
 
+import android.content.Context
+import com.example.listifyjetapp.data.ListifyStorageManager
 import com.example.listifyjetapp.network.ListifyAPI
 import com.example.listifyjetapp.utils.constants.Constants
+import dagger.Lazy
 import dagger.Module
 import dagger.Provides
 import dagger.hilt.InstallIn
+import dagger.hilt.android.qualifiers.ApplicationContext
 import dagger.hilt.components.SingletonComponent
+import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.runBlocking
+import okhttp3.Authenticator
+import okhttp3.Interceptor
+import okhttp3.OkHttpClient
 import retrofit2.Retrofit
 import retrofit2.converter.gson.GsonConverterFactory
 import javax.inject.Singleton
@@ -14,14 +23,92 @@ import javax.inject.Singleton
 @InstallIn(SingletonComponent::class)
 class AppModule {
 
-    // TODO: create a provider to build a Retrofit instance
+    // TODO: OkHttp with:
+    // - Interceptor: adds Authorization: Bearer <access_token>
+    // - Authenticator: on 401 -> POST /auth/refresh with x-Refresh-Token -> save new access -> retry
     @Provides
     @Singleton
-    fun provideListifyAPI():ListifyAPI {
+    fun provideOkHttpClient(
+        storageManager: ListifyStorageManager,
+        apiLazy: Lazy<ListifyAPI>
+    ): OkHttpClient {
+        val authInterceptor = Interceptor {chain ->
+            // Interceptor is not suspend; grab the latest value synchronously:
+            val accessToken = runBlocking { storageManager.accessTokenFlow.first() }
+            val request = chain.request().newBuilder().apply {
+                if (accessToken.isNotBlank()) {
+                    addHeader("Authorization", "Bearer $accessToken")
+                }
+            }.build()
+            chain.proceed(request)
+        }
+
+        val authenticator = Authenticator { route, response ->
+            // prevent infinite loops
+            if (response.request.header("Authenticator") == null) return@Authenticator null
+            // Do not try to refresh while calling refresh
+            if (response.request.url.encodedPath.endsWith("/refresh")) return@Authenticator null
+
+            try {
+                val refreshToken = runBlocking { storageManager.refreshTokenFlow.first() }
+                if (refreshToken.isBlank()) return@Authenticator null
+
+                //call refresh synchronously
+                val login = runBlocking {  apiLazy.get().refresh(refreshToken) }
+
+                // save new token
+                runBlocking { storageManager.updateTokens(login.accessToken, login.refreshToken) }
+
+                // rebuild the original request with new access token
+                val newAccessToken = login.accessToken
+                return@Authenticator response.request.newBuilder()
+                    .header("Authorization", "Bearer $newAccessToken")
+                    .build()
+
+            } catch (_: Exception) {
+                // refresh failed -> no retry
+                null
+            }
+        }
+
+        return OkHttpClient
+            .Builder()
+            .addInterceptor(authInterceptor)
+            .authenticator(authenticator)
+            .build()
+    }
+
+
+    // TODO: Retrofit  with OkHttpClient
+    @Provides
+    @Singleton
+    fun provideRetrofit(client: OkHttpClient): Retrofit {
         return Retrofit.Builder()
             .baseUrl(Constants.BASE_URL)
+            .client(client)
             .addConverterFactory(GsonConverterFactory.create())
             .build()
-            .create(ListifyAPI::class.java)
     }
+
+    // TODO: dataStore to read / write tokens
+    @Provides
+    @Singleton
+    fun provideDataStorageAPI(@ApplicationContext context: Context
+    ): ListifyStorageManager = ListifyStorageManager(context)
+
+    @Provides
+    @Singleton
+    fun provideListifyAPI(retrofit: Retrofit): ListifyAPI =
+        retrofit.create(ListifyAPI::class.java)
+
+//    // TODO: create a provider to build a Retrofit instance
+//    @Provides
+//    @Singleton
+//    fun provideListifyAPI():ListifyAPI {
+//        return Retrofit.Builder()
+//            .baseUrl(Constants.BASE_URL)
+//            .addConverterFactory(GsonConverterFactory.create())
+//            .build()
+//            .create(ListifyAPI::class.java)
+//    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/model/AuthUser.kt b/app/src/main/java/com/example/listifyjetapp/model/AuthUser.kt
new file mode 100644
index 0000000..95c39c0
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/model/AuthUser.kt
@@ -0,0 +1,31 @@
+package com.example.listifyjetapp.model
+
+import com.google.gson.annotations.SerializedName
+
+data class UserToken(
+    val id: Int,
+    @SerializedName("user_id") val userId: Int,
+    val token: String,
+    @SerializedName("expires_at") val expiresAt: String,
+    @SerializedName("created_at") val createdAt: String
+)
+
+data class UserDataStore(
+    val userId: Int,
+    val email: String,
+    val accessToken: String,
+    val refreshToken: String,
+    val isLogin: Boolean = false,
+)
+
+data class LoginInfo(
+    val email: String,
+    val password: String,
+)
+
+data class LoginSuccess(
+    val message: String,
+    val accessToken: String,
+    val refreshToken: String,
+    val user:  UserWithoutPassword
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/model/ListModel.kt b/app/src/main/java/com/example/listifyjetapp/model/ListModel.kt
index 09016c6..ff6688b 100644
--- a/app/src/main/java/com/example/listifyjetapp/model/ListModel.kt
+++ b/app/src/main/java/com/example/listifyjetapp/model/ListModel.kt
@@ -1,11 +1,44 @@
 package com.example.listifyjetapp.model
 
-import java.time.LocalDateTime
+import com.google.gson.annotations.SerializedName
+
+data class BaseList(
+    val id: Int,
+    val name: String,
+    val share: Boolean,
+    //val sharedCode: String,  // can be UUID or String
+    //val createdAt: LocalDateTime
+    @SerializedName("shared_code") val sharedCode: String,
+    @SerializedName("created_at") val createdAt: String,
+)
+
+data class ListName (
+    val name: String
+)
 
 data class ListModel(
     val id: Int,
     val name: String,
     val share: Boolean,
-    val shareCode: String,  // can be UUID or String
-    val createdAt: LocalDateTime
+    @SerializedName("shared_code") val sharedCode: String,
+    @SerializedName("created_at") val createdAt: String,
+    @SerializedName("item_count") val itemCount: Int,
+    @SerializedName("shared_with") val sharedWith: List<SharedUsers>
 )
+
+data class ListItem(
+    val id: Int,
+    val description: String,
+    val units: String,
+    val checked: Boolean,
+    @SerializedName("list_id") val listId: Int,
+)
+
+data class CheckedItem(
+    val checked: Boolean
+)
+
+data class BasicItemInfo(
+    val description: String,
+    val units: String
+)
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/model/User.kt b/app/src/main/java/com/example/listifyjetapp/model/User.kt
new file mode 100644
index 0000000..369769e
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/model/User.kt
@@ -0,0 +1,24 @@
+package com.example.listifyjetapp.model
+
+import com.google.gson.annotations.SerializedName
+
+data class User(
+    val id: Int,
+    val username: String,
+    val email: String,
+    val password: String,
+    @SerializedName("created_at") val createdAt: String
+)
+
+data class UserWithoutPassword(
+    val id: Int,
+    val username: String,
+    val email: String,
+    @SerializedName("created_at") val createdAt: String
+)
+
+data class SharedUsers(
+    @SerializedName("user_id") val userId: Int,
+    val username: String,
+)
+
diff --git a/app/src/main/java/com/example/listifyjetapp/network/ListsAPI.kt b/app/src/main/java/com/example/listifyjetapp/network/ListsAPI.kt
index c408725..922f71e 100644
--- a/app/src/main/java/com/example/listifyjetapp/network/ListsAPI.kt
+++ b/app/src/main/java/com/example/listifyjetapp/network/ListsAPI.kt
@@ -1,36 +1,53 @@
 package com.example.listifyjetapp.network
 
+import com.example.listifyjetapp.model.CheckedItem
+import com.example.listifyjetapp.model.ListItem
 import com.example.listifyjetapp.model.ListModel
+import com.example.listifyjetapp.model.ListName
+import com.example.listifyjetapp.model.LoginInfo
+import com.example.listifyjetapp.model.LoginSuccess
+import com.example.listifyjetapp.model.BasicItemInfo
+import com.example.listifyjetapp.model.User
+import retrofit2.http.Body
 import retrofit2.http.DELETE
 import retrofit2.http.GET
+import retrofit2.http.Header
+import retrofit2.http.PATCH
 import retrofit2.http.POST
 import retrofit2.http.Path
 import javax.inject.Singleton
 
 @Singleton
 interface ListifyAPI {
+    // =============================================== Auth ========================================
+    @POST("auth/login")
+    suspend fun login(@Body request: LoginInfo): LoginSuccess
+
+    @POST("refresh")
+    suspend fun refresh(@Header("x-refresh-token") refreshToken: String): LoginSuccess
+
     // =============================================== Users =======================================
-//    @PATCH("users/{user_id}")
-//    suspend fun patchUserById(@Path("user_id") userId: Int): User
-//
-//    @POST("users")
-//    suspend fun createUser(): User
-//
-//    @GET("users/check_username/{username}")
-//    suspend fun getUserByUsername(@Path("/username") username: String ): User
-//
-//    @GET("users/email/{email}")
-//    suspend fun getUserByUserEmail(@Path("/email") email: String ): User
-//
-//    @GET("users/users")
-//    suspend fun getAllUsers(): List<User>
+    @PATCH("users/{user_id}")
+    suspend fun patchUserById(@Path("user_id") userId: Int): User
+
+    @POST("users")
+    suspend fun createUser(): User
+
+    @GET("users/check_username/{username}")
+    suspend fun getUserByUsername(@Path("/username") username: String ): User
+
+    @GET("users/email/{email}")
+    suspend fun getUserByUserEmail(@Path("/email") email: String ): User
+
+    @GET("users/users")
+    suspend fun getAllUsers(): List<User>
 
     // =============================================== User Lists ==================================
-//    @GET("ul/shared-user/{list_id}/{user_id}")
-//    suspend fun getSharedUsers(
-//        @Path("user_id") userId: Int,
-//        @Path("list_id") listId: Int
-//    ): List<User>
+    @GET("ul/shared-user/{list_id}/{user_id}")
+    suspend fun getSharedUsers(
+        @Path("user_id") userId: Int,
+        @Path("list_id") listId: Int
+    ): List<User>
 
     @GET("ul/{user_id}")
     suspend fun getListsByUser(@Path("user_id") userId: Int): List<ListModel>
@@ -40,7 +57,7 @@ interface ListifyAPI {
     suspend fun deleteListByUserId(
         @Path("user_id") userId: Int,
         @Path("list_id") listId: Int
-    ) {}
+    )
 
     @POST("ul/{list_id}/{share_with_id}")
     suspend fun shareAList(
@@ -56,31 +73,48 @@ interface ListifyAPI {
 
     // Post new list
     @POST("lists/{user_id}")
-    suspend fun createList(@Path("user_id") userId: Int) {}
+    suspend fun insertList(
+        @Path("user_id") userId: Int,
+        @Body request: ListName
+    ): ListModel
 
     // Get items by list id
     @GET("lists/{list_id}")
-    suspend fun getAList(@Path("list_id") listId: Int) {}
+    suspend fun getListItems(@Path("list_id") listId: Int): List<ListItem>
 
     // update a list
-    @POST("lists/{list_id}")
-    suspend fun updateList(@Path("list_id") listId: Int) {}
+    @PATCH("lists/{list_id}")
+    suspend fun updateListName(
+        @Path("list_id") listId: Int,
+        @Body request: ListName
+    ): ListModel
 
     // Post new item
     @POST("lists/{list_id}/add-item")
-    suspend fun createListItem(@Path("list_id") listId: Int) {}
+    suspend fun createListItem(
+        @Path("list_id") listId: Int,
+        @Body request: BasicItemInfo
+    ): ListItem
 
     // Patch list item
-    @POST("lists/{list_id}/{item_id}")
+    @PATCH("lists/{list_id}/{item_id}")
+    suspend fun checkListItem(
+        @Path("list_id") listId: Int,
+        @Path("item_id") itemId: Int,
+        @Body request: CheckedItem
+    ):ListItem
+
+    @PATCH("lists/{list_id}/{item_id}")
     suspend fun patchListItem(
         @Path("list_id") listId: Int,
-        @Path("item_id") itemId: Int
-    ) {}
+        @Path("item_id") itemId: Int,
+        @Body request: BasicItemInfo
+    ):ListItem
 
     // Delete list item
-    @DELETE("/lists//{item_id}")
+    @DELETE("lists/{list_id}/{item_id}")
     suspend fun deleteListItem(
         @Path("list_id") listId: Int,
         @Path("item_id") itemId: Int
-    ) {}
+    ): List<ListItem>
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/repository/AuthUserRepository.kt b/app/src/main/java/com/example/listifyjetapp/repository/AuthUserRepository.kt
new file mode 100644
index 0000000..64741a7
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/repository/AuthUserRepository.kt
@@ -0,0 +1,18 @@
+package com.example.listifyjetapp.repository
+
+import com.example.listifyjetapp.data.ListifyResult
+import com.example.listifyjetapp.model.LoginInfo
+import com.example.listifyjetapp.model.LoginSuccess
+import com.example.listifyjetapp.network.ListifyAPI
+import javax.inject.Inject
+
+class AuthUserRepository @Inject constructor(private val api: ListifyAPI){
+    suspend fun login(loginInfo: LoginInfo): ListifyResult<LoginSuccess> {
+        try {
+            val response = api.login(loginInfo)
+            return ListifyResult.Success(data = response)
+        } catch (e: Exception) {
+            return ListifyResult.Failure(e.message ?: "Error logging in")
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/repository/ListItemRepository.kt b/app/src/main/java/com/example/listifyjetapp/repository/ListItemRepository.kt
new file mode 100644
index 0000000..4028155
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/repository/ListItemRepository.kt
@@ -0,0 +1,69 @@
+package com.example.listifyjetapp.repository
+
+import com.example.listifyjetapp.data.ListifyResult
+import com.example.listifyjetapp.model.CheckedItem
+import com.example.listifyjetapp.model.ListItem
+import com.example.listifyjetapp.model.BasicItemInfo
+import com.example.listifyjetapp.network.ListifyAPI
+import javax.inject.Inject
+
+class ListItemRepository @Inject constructor(
+    private val api: ListifyAPI
+){
+    suspend fun getItemsByListId(listId: Int): ListifyResult<List<ListItem>> {
+        try {
+            val response = api.getListItems(listId)
+            return ListifyResult.Success(data = response)
+        } catch (e: Exception) {
+            return ListifyResult.Failure(e.message ?: "Error fetching items by list id")
+        }
+    }
+
+    suspend fun insertListItem(
+        listId: Int,
+        newItem: BasicItemInfo
+    ): ListifyResult<ListItem> {
+        try {
+            val response = api.createListItem(listId = listId, request = newItem)
+            return ListifyResult.Success(data = response)
+        } catch (e: Exception) {
+            return ListifyResult.Failure(e.message ?: "Error adding new item")
+        }
+    }
+
+    suspend fun checkListItem(
+        itemId: Int,
+        listId: Int,
+        updatedData: CheckedItem
+    ): ListifyResult<ListItem> {
+        try {
+            val response = api.checkListItem(listId = listId, itemId = itemId, request = updatedData)
+            return ListifyResult.Success(data = response)
+        } catch (e: Exception) {
+            return ListifyResult.Failure(e.message ?: "Error checking item")
+        }
+    }
+
+    suspend fun patchListItem(
+        itemId: Int,
+        listId: Int,
+        updatedInfo: BasicItemInfo
+    ): ListifyResult<ListItem> {
+        try {
+            val response = api.patchListItem(listId = listId, itemId = itemId, request = updatedInfo)
+            return ListifyResult.Success(data = response)
+        } catch (e: Exception) {
+            return ListifyResult.Failure(e.message ?: "Error checking item")
+        }
+    }
+
+    suspend fun deleteListItem( itemId: Int, listId: Int ): ListifyResult<List<ListItem>> {
+        try {
+            val response = api.deleteListItem(listId = listId, itemId = itemId)
+            return ListifyResult.Success(data = response)
+        } catch (e: Exception) {
+            return ListifyResult.Failure(e.message ?: "Error deleting item by item id")
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/repository/ListsRepository.kt b/app/src/main/java/com/example/listifyjetapp/repository/ListsRepository.kt
index 0130db4..467f15e 100644
--- a/app/src/main/java/com/example/listifyjetapp/repository/ListsRepository.kt
+++ b/app/src/main/java/com/example/listifyjetapp/repository/ListsRepository.kt
@@ -2,6 +2,7 @@ package com.example.listifyjetapp.repository
 
 import com.example.listifyjetapp.data.ListifyResult
 import com.example.listifyjetapp.model.ListModel
+import com.example.listifyjetapp.model.ListName
 import com.example.listifyjetapp.network.ListifyAPI
 import javax.inject.Inject
 
@@ -15,4 +16,50 @@ class ListsRepository @Inject constructor(private val api: ListifyAPI) {
             return ListifyResult.Failure(e.message ?: "Error fetching lists")
         }
     }
+
+    suspend fun insertListByUser(userId: Int, newListData: ListName): ListifyResult<ListModel> {
+        try {
+            val response = api.insertList(userId, newListData)
+            val formatedResponse = ListModel (
+                id = response.id,
+                name = response.name,
+                share = response.share,
+                sharedCode = response.sharedCode,
+                createdAt = response.createdAt,
+                itemCount = 0,
+                sharedWith= emptyList()
+            )
+            return ListifyResult.Success(data = formatedResponse)
+        } catch (e:Exception) {
+            return ListifyResult.Failure(e.message ?: "Error creating new list")
+        }
+    }
+
+    suspend fun updateListName(listId: Int, newListData: ListName): ListifyResult<ListModel> {
+        try {
+            val response = api.updateListName(listId, newListData)
+            val formatedResponse = ListModel (
+                id = response.id,
+                name = response.name,
+                share = response.share,
+                sharedCode = response.sharedCode,
+                createdAt = response.createdAt,
+                itemCount = 0,
+                sharedWith= emptyList()
+            )
+            return ListifyResult.Success(data = formatedResponse)
+        } catch (e:Exception) {
+            return ListifyResult.Failure(e.message ?: "Error updating list name")
+        }
+    }
+
+
+    suspend fun deleteListById(userId: Int, listId: Int): ListifyResult<Unit> {
+        try {
+            val response = api.deleteListByUserId(userId, listId)
+            return ListifyResult.Success(data = response)
+        } catch (e:Exception) {
+            return ListifyResult.Failure(e.message ?: "Error deleting list name")
+        }
+    }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyNavigation.kt b/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyNavigation.kt
index 039c9fa..af124e6 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyNavigation.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyNavigation.kt
@@ -4,7 +4,12 @@ import androidx.compose.runtime.Composable
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
+import androidx.navigation.toRoute
+import com.example.listifyjetapp.ui.screens.auth.ListifyLoginScreen
+import com.example.listifyjetapp.ui.screens.listItem.ListifyListItemScreen
+import com.example.listifyjetapp.ui.screens.listItem.ListifyNewItemScreen
 import com.example.listifyjetapp.ui.screens.lists.ListifyListsScreen
+import com.example.listifyjetapp.ui.screens.newList.ListifyNewListScreen
 import com.example.listifyjetapp.ui.screens.splash.ListifySplashScreen
 
 
@@ -16,36 +21,77 @@ fun ListifyNavigation() {
     // Build the navigation graph
     NavHost(
         navController = navController,
-        startDestination = ListifyScreens.SplashScreen.route
+        startDestination = ListifyScreens.SplashScreen
     ) {
 
         // TODO: Define a navigation route for SplashScreen
-        composable(ListifyScreens.SplashScreen.route) {
-            ListifySplashScreen(navController = navController)
+        composable<ListifyScreens.SplashScreen>() {
+            ListifySplashScreen(
+                onNavigateToListsScreen = {userId ->
+                    navController.navigate(ListifyScreens.ListsScreen(userId)) {
+                        // Remove Splash from the back stack when go to Lists Screen
+                        popUpTo(ListifyScreens.SplashScreen) { inclusive = true }
+                        launchSingleTop = true
+                    }
+                },
+                onGoToLoginScreen = { navController.navigate(ListifyScreens.LoginScreen) }
+
+            )
         }
 
         // TODO: Define a navigation route for ListsScreen
-        composable(ListifyScreens.ListsScreen.route) {
-            ListifyListsScreen()
+        composable<ListifyScreens.ListsScreen>() {
+            ListifyListsScreen(
+                onListRowClick = {listId, listName -> navController.navigate(ListifyScreens.ListItemScreen(listId, listName))},
+                onRightButtonClick = {navController.navigate(ListifyScreens.NewListScreen)}
+            )
+        }
+
+        // TODO: Define a navigation route for NewListScreen
+        composable<ListifyScreens.NewListScreen>() {
+            ListifyNewListScreen(
+                onPopBackStack = { navController.popBackStack() },
+            )
         }
 
         // TODO: Define a navigation route for DetailScreen
-        composable(ListifyScreens.DetailScreen.route) {
-            //ListifyDetailScreen(navController = navController)
+        composable<ListifyScreens.ListItemScreen> {backStackEntry ->
+            val args = backStackEntry.toRoute<ListifyScreens.ListItemScreen>()
+            val listId = args.listId
+            val listName = args.listName
+            ListifyListItemScreen(
+                listId = listId,
+                listName = listName,
+                onPopBackStack = { navController.popBackStack() },
+                onAddClick = { navController.navigate(ListifyScreens.AddNewItemScreen(listId))}
+            )
+        }
+
+        // TODO: Define a navigation route for NewItemScreen
+        composable<ListifyScreens.AddNewItemScreen> {backStackEntry ->
+            val args = backStackEntry.toRoute<ListifyScreens.AddNewItemScreen>()
+            val listId = args.listId
+            ListifyNewItemScreen(
+                listId = listId,
+                onPopBackStack = { navController.popBackStack() },
+            )
         }
 
         // TODO: Define a navigation route for ProfileScreen
-        composable(ListifyScreens.ProfileScreen.route) {
+        composable<ListifyScreens.ProfileScreen>() {
             //ListifyProfileScreen(navController = navController)
         }
 
         // TODO: Define a navigation route for LoginScreen
-        composable(ListifyScreens.LoginScreen.route) {
-            //ListifyLoginScreen(navController = navController)
+        composable<ListifyScreens.LoginScreen>() {
+            ListifyLoginScreen(
+                onPopBackStack = { navController.popBackStack() },
+                onNavigateToListsScreen = {userId -> navController.navigate(ListifyScreens.ListsScreen(userId))}
+            )
         }
 
         // TODO: Define a navigation route for SignupScreen
-        composable(ListifyScreens.SignupScreen.route) {
+        composable<ListifyScreens.SignupScreen>() {
             //ListifySignupScreen(navController = navController)
         }
     }
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyScreens.kt b/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyScreens.kt
index b1914cb..722d89a 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyScreens.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/navigation/ListifyScreens.kt
@@ -1,12 +1,16 @@
 package com.example.listifyjetapp.ui.navigation
 
-enum class ListifyScreens(val route: String) {
-    SplashScreen("splash"),
-    ListsScreen("lists"),
-    DetailScreen("detail"),
-    ProfileScreen("profile"),
-    LoginScreen("login"),
-    SignupScreen("signup")
-}
+import com.example.listifyjetapp.model.BasicItemInfo
+import kotlinx.serialization.Serializable
 
-// navController.navigate(ListifyScreens.LoginScreen.route)
\ No newline at end of file
+
+object ListifyScreens {
+    @Serializable object SplashScreen
+    @Serializable data class ListsScreen(val userId: Int)
+    @Serializable object NewListScreen
+    @Serializable data class ListItemScreen(val listId: Int, val listName: String)
+    @Serializable data class AddNewItemScreen(val listId: Int)
+    @Serializable object ProfileScreen
+    @Serializable object LoginScreen
+    @Serializable object SignupScreen
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/EmailViewModel.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/EmailViewModel.kt
new file mode 100644
index 0000000..f5c1fe7
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/EmailViewModel.kt
@@ -0,0 +1,25 @@
+package com.example.listifyjetapp.ui.screens.auth
+
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+
+class EmailViewModel: ViewModel() {
+    var email by mutableStateOf("")
+        private set  // private set ensures that the email can only be modified via updateEmail()
+
+    val emailHasErrors by derivedStateOf {
+        if (email.isNotEmpty()) {
+            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
+            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
+        } else {
+            false
+        }
+    }
+
+    fun updateEmail(input: String) {
+        email = input
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/ListifyLoginScreen.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/ListifyLoginScreen.kt
new file mode 100644
index 0000000..e40baa0
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/ListifyLoginScreen.kt
@@ -0,0 +1,102 @@
+package com.example.listifyjetapp.ui.screens.auth
+
+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.foundation.shape.RoundedCornerShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ExitToApp
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.components.inputFields.PasswordTextField
+import com.example.listifyjetapp.widgets.bars.ListifyTopBar
+import com.example.listifyjetapp.components.inputFields.ValidatingInputTextField
+import com.example.listifyjetapp.data.LoginState
+import com.example.listifyjetapp.ui.theme.ButtonPaddings
+import com.example.listifyjetapp.ui.theme.ButtonShape
+import com.example.listifyjetapp.ui.theme.ListifyColor
+import com.example.listifyjetapp.widgets.buttons.FilledButton
+
+@Composable
+fun ListifyLoginScreen(
+    loginViewModel: LoginViewModel = hiltViewModel(),
+    onPopBackStack: () -> Unit,
+    onNavigateToListsScreen: (userId: Int) -> Unit
+) {
+
+    val loginState = loginViewModel.loginState
+
+    fun onLoginClick() {
+        if (loginViewModel.email.isNotBlank() && loginViewModel.password.isNotBlank()) {
+            loginViewModel.login()
+        }
+    }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = { ListifyTopBar(
+            title = "LOG IN",
+            isListsScreen = false,
+            onGoBackButtonClicked = {onPopBackStack()},
+            leftText = "CANCEL",
+        ) }
+    ) { innerPadding ->
+        Surface(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding),
+        ) {
+
+            Column(
+                modifier = Modifier.fillMaxWidth().padding(16.dp)
+            ) {
+                ValidatingInputTextField(
+                    email = loginViewModel.email,
+                    onValueChange = { input -> loginViewModel.updateEmail(input) },
+                    validatorHasError = loginViewModel.emailHasErrors
+                )
+
+                PasswordTextField(
+                    password = loginViewModel.password,
+                    onPasswordChange = loginViewModel::updatePassword
+                )
+                FilledButton(
+                    modifier = ButtonPaddings.fillMaxWidth(),
+                    shape = RoundedCornerShape(3.dp),
+                    containerColor=ListifyColor.SplashYellow,
+                    contentColor = ListifyColor.TextDark,
+                    text="LOG IN ",
+                    buttonIcon=Icons.AutoMirrored.Filled.ExitToApp,
+                    iconDescription="Log In",
+                    onClick={ onLoginClick() }
+                )
+
+                // handle login state
+                when (loginState) {
+                    is LoginState.Loading -> { CircularProgressIndicator() }
+                    is LoginState.Success -> {
+                        LaunchedEffect(Unit) { onNavigateToListsScreen(loginState.data.user.id) }
+                    }
+                    is LoginState.Error -> {
+                        Text(
+                            text = loginState.message,
+                            color = Color.Red,
+                            modifier = Modifier.padding(16.dp)
+                        )
+                    }
+                    LoginState.Idle -> {} // Explicit idle state
+                }
+            }
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/LoginViewModel.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/LoginViewModel.kt
new file mode 100644
index 0000000..53a0699
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/auth/LoginViewModel.kt
@@ -0,0 +1,71 @@
+package com.example.listifyjetapp.ui.screens.auth
+
+import android.util.Patterns
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.example.listifyjetapp.data.ListifyResult
+import com.example.listifyjetapp.data.ListifyStorageManager
+import com.example.listifyjetapp.data.LoginState
+import com.example.listifyjetapp.model.LoginInfo
+import com.example.listifyjetapp.model.UserDataStore
+import com.example.listifyjetapp.repository.AuthUserRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class LoginViewModel @Inject constructor(
+    private val repository: AuthUserRepository,
+    private val storageManager: ListifyStorageManager
+): ViewModel() {
+
+    var email by mutableStateOf("")
+        private  set
+    var password by mutableStateOf("")
+        private set
+
+    var loginState by mutableStateOf<LoginState>(LoginState.Idle)
+
+
+    val emailHasErrors by derivedStateOf {
+        if (email.isNotEmpty()) {
+            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
+            !Patterns.EMAIL_ADDRESS.matcher(email).matches()
+        } else {
+            false
+        }
+    }
+
+    fun updateEmail(newEmail:String) { email = newEmail }
+    fun updatePassword(newPassword: String) { password = newPassword }
+
+    fun login()
+    = viewModelScope.launch {
+        loginState = LoginState.Loading
+        val result = repository.login( LoginInfo(email = email.trim(), password = password) )
+
+        loginState = when (result) {
+            is ListifyResult.Success -> {
+                storageManager.saveToDataStore(
+                    UserDataStore(
+                        userId = result.data.user.id,
+                        email = result.data.user.email,
+                        accessToken = result.data.accessToken,
+                        refreshToken = result.data.refreshToken,
+                        isLogin = true,
+                    )
+                )
+                // Save token securely
+                LoginState.Success(result.data)
+            }
+
+            is ListifyResult.Failure -> {
+                LoginState.Error(result.errorMessage)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListItemRow.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListItemRow.kt
new file mode 100644
index 0000000..eddab61
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListItemRow.kt
@@ -0,0 +1,160 @@
+package com.example.listifyjetapp.ui.screens.listItem
+
+import android.util.Log
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalMinimumInteractiveComponentSize
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+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.platform.LocalHapticFeedback
+import androidx.compose.ui.hapticfeedback.HapticFeedbackType
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.components.formModals.EditItemForm
+import com.example.listifyjetapp.model.CheckedItem
+import com.example.listifyjetapp.model.ListItem
+import com.example.listifyjetapp.model.BasicItemInfo
+import com.example.listifyjetapp.ui.theme.ListifyColor
+
+
+@Composable
+fun ListItemRow (
+    item: ListItem,
+    viewModel: ListItemViewModel = hiltViewModel()
+) {
+    val description = if (item.description.length >= 20) {
+        item.description.substring(0, 20) + "..."
+    } else {
+        item.description
+    }
+
+    val isChecked by remember(item) { mutableStateOf(item.checked) }
+    var isEditFormShown  by remember { mutableStateOf(false) }
+    var descriptionState by remember(item) { mutableStateOf(item.description) }
+    var unitsState by remember(item) { mutableStateOf(item.units) }
+    var isError by remember { mutableStateOf(false) }
+
+
+    fun onCheckBoxClick() {
+        viewModel.checkListItem(
+            listId = item.listId,
+            itemId = item.id,
+            updatedData = CheckedItem(checked = !isChecked),
+        )
+    }
+
+    fun onEditFormDismiss() {
+        isEditFormShown = !isEditFormShown
+        descriptionState = item.description
+        unitsState = item.units
+        isError = false
+    }
+
+    fun onEditFormSubmit() {
+        isError = false
+        if (descriptionState.isBlank()) {
+            isError = true
+        } else {
+            val updatedInfo = BasicItemInfo(description = descriptionState, units = unitsState)
+            viewModel.patchListItemInfo(itemId = item.id, listId = item.listId, updatedInfo = updatedInfo)
+            isEditFormShown = false
+        }
+    }
+
+    fun onDeleteItem() {
+        viewModel.deleteListItem(listId = item.listId, itemId = item.id)
+        isEditFormShown = false
+    }
+
+    Row(modifier = Modifier
+        .padding(vertical = 16.dp)
+        .fillMaxWidth()
+        .background(Color.Transparent),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth().combinedClickable(
+                    onClick = { isEditFormShown = !isEditFormShown },
+                    onLongClick = { viewModel.activeItemDescription = item.description },
+                    onLongClickLabel = item.description
+                ),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            Row(verticalAlignment = Alignment.CenterVertically){
+                // remove checkbox default paddings
+                CompositionLocalProvider(LocalMinimumInteractiveComponentSize provides Dp.Unspecified) {
+                    Checkbox(
+                        colors = CheckboxDefaults.colors(Color.Red),
+                        checked = isChecked,
+                        onCheckedChange = { onCheckBoxClick() }
+                    )
+                }
+
+                Column(modifier = Modifier.padding(horizontal = 16.dp)) {
+                    Text(
+                        text = description,
+                        color = if (isChecked) { ListifyColor.TextGrey } else { ListifyColor.TextBlack },
+                        style = MaterialTheme.typography.bodyMedium.copy(
+                            textDecoration = if (isChecked) { TextDecoration.LineThrough } else { null },
+                        ),
+                    )
+                    Text(
+                        text = if (item.units.isNotEmpty()) { "QTY ${item.units}" } else { "QTY 1" },
+                        textAlign = TextAlign.End,
+                        color = ListifyColor.TextGrey,
+                        style = MaterialTheme.typography.bodySmall
+                    )
+                }
+            }
+            Icon(
+                imageVector = Icons.Default.KeyboardArrowDown,
+                contentDescription = "Arrow down icon",
+                modifier = Modifier
+                    .size(24.dp)
+                    .clickable { onEditFormDismiss() }
+            )
+        }
+    }
+    
+    if (isEditFormShown) {
+        EditItemForm(
+            description = descriptionState,
+            units = unitsState,
+            isError = isError,
+            onDescriptionChange = { descriptionState = it },
+            onUnitsChange = { unitsState = it },
+            onEditFormSubmit = { onEditFormSubmit() },
+            onDeleteItem = { onDeleteItem() }
+        )
+    }
+
+    HorizontalDivider()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListItemViewModel.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListItemViewModel.kt
new file mode 100644
index 0000000..0957597
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListItemViewModel.kt
@@ -0,0 +1,125 @@
+package com.example.listifyjetapp.ui.screens.listItem
+
+import android.util.Log
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import com.example.listifyjetapp.data.ListifyResult
+import com.example.listifyjetapp.data.ListifyStorageManager
+import com.example.listifyjetapp.model.CheckedItem
+import com.example.listifyjetapp.model.ListItem
+import com.example.listifyjetapp.model.BasicItemInfo
+import com.example.listifyjetapp.repository.ListItemRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class ListItemViewModel @Inject constructor(
+    private val repository: ListItemRepository
+): ViewModel() {
+    val listItems = mutableStateListOf<ListItem>()
+    var isLoading  by mutableStateOf(false)
+    var errorMessage by mutableStateOf<String?>(null)
+    var activeItemDescription by mutableStateOf("")
+
+    fun getAllItems(listId: Int) {
+        viewModelScope.launch {
+            isLoading = true
+            errorMessage = null
+
+            try {
+                val result = repository.getItemsByListId(listId)
+                when (result) {
+                    is ListifyResult.Success -> {
+                        listItems.clear()
+                        listItems.addAll(result.data)
+                    }
+
+                    is ListifyResult.Failure -> {
+                        errorMessage = result.errorMessage
+                        Log.d("Fail to fetch list items by list id", result.toString())
+                    }
+                }
+            } finally {
+                isLoading = false
+            }
+        }
+    }
+
+    fun insertListItem(
+        listId: Int,
+        newItem: BasicItemInfo
+    ) = viewModelScope.launch {
+        isLoading = true
+        val result = repository.insertListItem(listId = listId, newItem = newItem)
+        when (result) {
+            is ListifyResult.Success -> {
+                val item =  result.data
+                listItems.add(item)
+            }
+
+            is ListifyResult.Failure -> {
+                errorMessage = result.errorMessage
+                Log.d("Fail to add a new item to list $listId", result.toString())
+            }
+        }
+        isLoading = false
+    }
+
+    fun checkListItem(
+        itemId: Int,
+        listId: Int,
+        updatedData: CheckedItem
+    ) = viewModelScope.launch {
+        val result = repository.checkListItem(listId = listId, itemId = itemId, updatedData = updatedData)
+        when (result) {
+            is ListifyResult.Success -> {
+                val updated =  result.data
+                listItems.replaceAll { if(it.id == updated.id) updated else it }
+            }
+
+            is ListifyResult.Failure -> {
+                errorMessage = result.errorMessage
+                Log.d("Fail to update item checked state", result.toString())
+            }
+        }
+    }
+
+    fun patchListItemInfo(
+        itemId: Int,
+        listId: Int,
+        updatedInfo: BasicItemInfo
+    ) = viewModelScope.launch {
+        val result = repository.patchListItem(listId = listId, itemId = itemId, updatedInfo = updatedInfo)
+        when (result) {
+            is ListifyResult.Success -> {
+                val updated =  result.data
+                listItems.replaceAll { if(it.id == updated.id) updated else it }
+            }
+
+            is ListifyResult.Failure -> {
+                errorMessage = result.errorMessage
+                Log.d("Fail to update item description and units", result.toString())
+            }
+        }
+    }
+
+    fun deleteListItem(listId: Int, itemId: Int) = viewModelScope.launch{
+        val result = repository.deleteListItem(listId = listId, itemId = itemId)
+        when (result) {
+            is ListifyResult.Success -> {
+                listItems.clear()
+                listItems.addAll(result.data)
+            }
+
+            is ListifyResult.Failure -> {
+                errorMessage = result.errorMessage
+                Log.d("Fail to delete item.", result.toString())
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListifyListItemScreen.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListifyListItemScreen.kt
new file mode 100644
index 0000000..aab2eee
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListifyListItemScreen.kt
@@ -0,0 +1,109 @@
+package com.example.listifyjetapp.ui.screens.listItem
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.R
+import com.example.listifyjetapp.widgets.texts.EmptyList
+import com.example.listifyjetapp.utils.filterListItems
+import com.example.listifyjetapp.widgets.bars.ListifySearchBar
+import com.example.listifyjetapp.widgets.bars.ListifyTopBar
+
+@Composable
+fun ListifyListItemScreen(
+    listId: Int,
+    listName: String,
+    viewModel: ListItemViewModel = hiltViewModel(),
+    onPopBackStack: () -> Unit,
+    onAddClick: () -> Unit
+) {
+    LaunchedEffect(Unit) { viewModel.getAllItems(listId) }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = { ListifyTopBar(
+            title = listName.replace("-", " "),
+            isListsScreen = false,
+            goBackIcon = Icons.AutoMirrored.Filled.ArrowBack,
+            onGoBackButtonClicked = { onPopBackStack() },
+            rightIcon = Icons.Default.Add,
+            onRightButtonClick = { onAddClick() }
+        ) }
+    ) { innerPadding ->
+
+        Surface(
+            modifier = Modifier.fillMaxSize().padding(innerPadding)
+        ) {
+            Column(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+
+                val searchTextState = remember { mutableStateOf("") }
+                val keyboardController = LocalSoftwareKeyboardController.current
+
+                ListifySearchBar(
+                    searchTextValue = searchTextState,
+                    onValueChange = {searchTextState.value = it},
+                    keyboardAction = KeyboardActions{
+                        searchTextState.value.trim()            // perform the search
+                        keyboardController?.hide()              // hide keyboard
+                    }
+                )
+
+                viewModel.errorMessage?.let { msg ->
+                    Text(msg,
+                        Modifier.padding(16.dp),
+                        color = MaterialTheme.colorScheme.error
+                    )
+                }
+
+                if (viewModel.isLoading) {
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        CircularProgressIndicator()
+                    }
+                } else if (viewModel.listItems.isEmpty()) {
+                    EmptyList(stringResource(R.string.no_items))
+                } else {
+                    LazyColumn(modifier = Modifier.padding(
+                        vertical = 16.dp,
+                        horizontal = 4.dp
+                    )){
+                        val results = filterListItems(searchTextState.value, viewModel.listItems)
+                        items(results) {item ->
+                            // TODO: ItemRow
+                            ListItemRow(item)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListifyNewItemScreen.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListifyNewItemScreen.kt
new file mode 100644
index 0000000..be315a0
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/listItem/ListifyNewItemScreen.kt
@@ -0,0 +1,82 @@
+package com.example.listifyjetapp.ui.screens.listItem
+
+import android.util.Log
+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.Scaffold
+import androidx.compose.material3.Surface
+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.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.model.BasicItemInfo
+import com.example.listifyjetapp.widgets.bars.ListifyTopBar
+import com.example.listifyjetapp.widgets.inputFields.FormInputField
+
+@Composable
+fun ListifyNewItemScreen(
+    listId: Int,
+    viewModel: ListItemViewModel = hiltViewModel (),
+    onPopBackStack: () -> Unit,
+) {
+
+    var description by remember { mutableStateOf("") }
+    var units by remember { mutableStateOf("") }
+    var isError by remember { mutableStateOf(false) }
+
+    fun onSaveClick() {
+        isError = false
+        if (description.isBlank()) {
+            isError = true
+        } else {
+            viewModel.insertListItem(listId, BasicItemInfo(description = description, units = units))
+            onPopBackStack()
+        }
+    }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = { ListifyTopBar(
+            title = "New List Item",
+            isListsScreen = false,
+            //goBackIcon = Icons.AutoMirrored.Filled.ArrowBack,
+            onGoBackButtonClicked = { onPopBackStack() },
+            leftText = "Cancel",
+            rightText = "Save",
+            onRightButtonClick = { onSaveClick() }
+        ) }
+    ) { innerPadding ->
+        Surface(
+            modifier = Modifier.fillMaxSize().padding(innerPadding)
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+                verticalArrangement = Arrangement.spacedBy(25.dp)
+            ) {
+
+                Column() {
+                    FormInputField(
+                        placerHolder = "name your new item here",
+                        isError = isError,
+                        textState = description,
+                        onValueChange={ description = it }
+                    )
+                    FormInputField(
+                        placerHolder = "e.g. QTY",
+                        textState = units,
+                        onValueChange={ units = it }
+                    )
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListRow.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListRow.kt
new file mode 100644
index 0000000..290f2b9
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListRow.kt
@@ -0,0 +1,149 @@
+package com.example.listifyjetapp.ui.screens.lists
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material.icons.filled.Share
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+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.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.components.formModals.EditListForm
+import com.example.listifyjetapp.model.ListModel
+import com.example.listifyjetapp.model.ListName
+import com.example.listifyjetapp.ui.theme.ListifyColor
+
+@Composable
+fun ListRow(
+    list: ListModel,
+    viewModel: ListsViewModel = hiltViewModel(),
+    onListRowClick: () -> Unit
+) {
+    val listName = if (list.name.length >= 30) list.name.substring(0, 20) + "..." else list.name
+    var isEditFormShown  by remember { mutableStateOf(false) }
+    var listNameState by remember(list) { mutableStateOf(list.name) }
+    var isError by remember { mutableStateOf(false) }
+
+    fun onEditFormDismiss() {
+        isEditFormShown = !isEditFormShown
+        listNameState = listName
+        isError = false
+    }
+
+    fun onEditFormSubmit() {
+        isError = false
+        if (listNameState.isBlank()) {
+            isError = true
+        } else {
+            //Log.d("new name", "$list.id, $listNameState")
+            val updatedInfo = ListName(name = listNameState)
+            viewModel.updateListName(listId = list.id, newListName = updatedInfo)
+            isEditFormShown = false
+        }
+    }
+
+    fun onDeleteItem() {
+        viewModel.deleteListById(listId = list.id)
+        isEditFormShown = false
+    }
+
+    Row(
+        modifier = Modifier
+            .padding(vertical = 16.dp)
+            .fillMaxWidth()
+            .background(Color.Transparent)
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth().padding(horizontal = 4.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween
+        ) {
+            // List info
+            Column(modifier = Modifier.fillMaxWidth(0.8f).clickable { onListRowClick() }) {
+                Text(
+                    text = listName,
+                    color = ListifyColor.TextBlack,
+                    style = MaterialTheme.typography.bodyMedium,
+                )
+
+                if (list.share) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Icon(
+                            modifier = Modifier.size(16.dp),
+                            tint = ListifyColor.IconGreen,
+                            imageVector = Icons.Default.Share,
+                            contentDescription = "Shared with"
+                        )
+                        Text(
+                            text = list.sharedWith.take(3).joinToString(", ") { it.username },
+                            maxLines = 1,
+                            overflow = TextOverflow.Ellipsis,
+                            color = ListifyColor.TextGrey,
+                            style = MaterialTheme.typography.bodySmall
+                        )
+                    }
+                }
+
+                Text(
+                    text = list.createdAt,
+                    color = ListifyColor.TextGrey,
+                    style = MaterialTheme.typography.bodySmall
+                )
+            }
+            // List setting menu
+
+            Row(
+                modifier = Modifier.clickable { onEditFormDismiss() },
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = list.itemCount.toString(),
+                    color = ListifyColor.TextGrey,
+                    style = MaterialTheme.typography.bodySmall,
+                    modifier = Modifier.padding(end = 16.dp)
+                )
+
+                Icon(
+                    imageVector = Icons.Default.KeyboardArrowDown,
+                    contentDescription = "More icon"
+                )
+
+            }
+
+        }
+
+    }
+
+    if (isEditFormShown) {
+        EditListForm(
+            listName = listNameState,
+            isError = isError,
+            onListNameChange = { listNameState = it },
+            onEditFormSubmit = { onEditFormSubmit() },
+            onDeleteItem = {
+                onDeleteItem()
+            }
+        )
+    }
+    HorizontalDivider()
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListifyListsScreen.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListifyListsScreen.kt
index 0bff383..92d62bc 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListifyListsScreen.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListifyListsScreen.kt
@@ -1,41 +1,110 @@
 package com.example.listifyjetapp.ui.screens.lists
 
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.example.listifyjetapp.R
+import com.example.listifyjetapp.widgets.texts.EmptyList
+import com.example.listifyjetapp.utils.filterLists
+import com.example.listifyjetapp.widgets.bars.ListifySearchBar
+import com.example.listifyjetapp.widgets.bars.ListifyTopBar
 
 @Composable
 fun ListifyListsScreen(
-    viewModel: ListsViewModel = hiltViewModel()
+    viewModel: ListsViewModel = hiltViewModel(),
+    onListRowClick: (listId: Int, listName: String) -> Unit,
+    onRightButtonClick: () -> Unit
 ) {
-    LaunchedEffect(Unit) { viewModel.getUserLists(4) }
+    LaunchedEffect(Unit) { viewModel.getUserLists() }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = { ListifyTopBar(
+            title = "Lists",
+            isListsScreen = true,
+            rightIcon = Icons.Default.Add,
+            onRightButtonClick = { onRightButtonClick() }
+        ) }
+    ) { innerPadding ->
 
-    Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
         Surface(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(innerPadding)
+            modifier = Modifier.fillMaxSize().padding(innerPadding)
         ) {
-            if (viewModel.lists.isEmpty()) {
-                Text(text = stringResource(R.string.no_lists))
-            } else {
-                LazyColumn {
-                    items(viewModel.lists) { list ->
-                        Text(text = list.name)
+            Column(
+                modifier = Modifier.padding(horizontal = 16.dp),
+                verticalArrangement = Arrangement.Top,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+
+                val searchTextState = remember { mutableStateOf("") }
+                val keyboardController = LocalSoftwareKeyboardController.current
+
+                ListifySearchBar(
+                    searchTextValue = searchTextState,
+                    onValueChange = {searchTextState.value = it},
+                    keyboardAction = KeyboardActions{
+                        // Trigger search logic or hide keyboard
+                        searchTextState.value.trim()            // perform the search
+                        keyboardController?.hide()              // hide keyboard
+                    }
+                )
+
+                viewModel.errorMessage?.let { msg ->
+                    Text(msg,
+                        Modifier.padding(16.dp),
+                        color = MaterialTheme.colorScheme.error
+                    )
+                }
+
+                if (viewModel.isLoading) {
+                    Box(
+                        modifier = Modifier.fillMaxSize(),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        CircularProgressIndicator()
+                    }
+                } else if (viewModel.lists.isEmpty()) {
+                    EmptyList(stringResource(R.string.no_lists))
+                } else {
+                    LazyColumn(modifier = Modifier.padding(
+                        vertical = 16.dp,
+                        horizontal = 8.dp
+                    )){
+                        // Filter lists by search input
+                        val results = filterLists(searchTextState.value, viewModel.lists)
+                        items(results) {list ->
+                            val listName = list.name.replace(" ", "-")
+                            ListRow(
+                                list = list,
+                                onListRowClick = { onListRowClick(list.id, listName) }
+                            )
+                        }
                     }
                 }
             }
+
         }
     }
-
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListsViewModel.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListsViewModel.kt
index 894316b..b22bcab 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListsViewModel.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/lists/ListsViewModel.kt
@@ -1,29 +1,116 @@
 package com.example.listifyjetapp.ui.screens.lists
 
+import android.util.Log
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateListOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import com.example.listifyjetapp.data.ListifyResult
+import com.example.listifyjetapp.data.ListifyStorageManager
 import com.example.listifyjetapp.model.ListModel
+import com.example.listifyjetapp.model.ListName
 import com.example.listifyjetapp.repository.ListsRepository
+import com.example.listifyjetapp.utils.filterLists
 import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.first
+import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.launch
 import javax.inject.Inject
 
 @HiltViewModel
-class ListsViewModel @Inject constructor(private val repository: ListsRepository): ViewModel() {
+class ListsViewModel @Inject constructor(
+    private val repository: ListsRepository,
+    private val storageManager: ListifyStorageManager
+): ViewModel() {
     val lists = mutableStateListOf<ListModel>()
+    var isLoading by mutableStateOf(false)
+    var errorMessage by mutableStateOf<String?>(null)
 
-    fun getUserLists(userId: Int) {
+    private val _navigateBack = MutableStateFlow(false)
+    val navigateBack = _navigateBack.asStateFlow()
+
+    // Convert Flow<Int> to StateFlow<Int>
+    private val _userId = storageManager.userIdFlow.stateIn(
+        scope = viewModelScope,
+        started = SharingStarted.WhileSubscribed(5000), // Keeps the flow alive while observed
+        initialValue = 0
+    )
+    val userId: StateFlow<Int> = _userId
+
+    fun getUserLists() {
         viewModelScope.launch {
-            val result = repository.getUserLists(userId = userId)
-            when(result) {
-                is ListifyResult.Success -> {
-                    lists.clear()
-                    lists.addAll(result.data)
+            val userId = storageManager.getUser().first().userId
+            isLoading = true
+            errorMessage = null
+
+            try {
+                val result = repository.getUserLists(userId = userId)
+                when (result) {
+                    is ListifyResult.Success -> {
+                        lists.clear()
+                        lists.addAll(result.data)
+                    }
+
+                    is ListifyResult.Failure -> {
+                        errorMessage = result.errorMessage
+                        Log.d("Fail to fetch lists by user id", result.toString())
+                    }
                 }
-                is ListifyResult.Failure -> Unit
+            } finally {
+                isLoading = false
+            }
+        }
+    }
+
+    fun insertListByUser(userId: Int, newListName: ListName)
+    = viewModelScope.launch {
+        isLoading = true
+        val result = repository.insertListByUser(userId, newListName)
+        when (result) {
+            is ListifyResult.Success -> {
+                _navigateBack.value = true
+            }
+            is ListifyResult.Failure -> Unit
+        }
+        isLoading = false
+    }
+
+    fun updateListName(listId: Int, newListName: ListName)
+    = viewModelScope.launch {
+        isLoading = true
+        val result = repository.updateListName(listId, newListName)
+        when (result) {
+            is ListifyResult.Success -> {
+                val updated = result.data
+                lists.replaceAll { if(it.id == updated.id) updated else it}
+                //_navigateBack.value = true
             }
+            is ListifyResult.Failure -> Unit
         }
+        isLoading = false
+    }
+
+    fun deleteListById(listId: Int)
+    = viewModelScope.launch {
+        isLoading = true
+        val userId = storageManager.getUser().first().userId
+        val result = repository.deleteListById(userId, listId)
+        when (result) {
+            is ListifyResult.Success -> {
+                lists.removeAll { it.id == listId }
+            }
+            is ListifyResult.Failure -> Unit
+        }
+        isLoading = false
+    }
+
+    fun navigationComplete() {
+        _navigateBack.value = false
     }
 }
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/newList/ListifyNewListScreen.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/newList/ListifyNewListScreen.kt
new file mode 100644
index 0000000..43d7641
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/newList/ListifyNewListScreen.kt
@@ -0,0 +1,94 @@
+package com.example.listifyjetapp.ui.screens.newList
+
+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.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+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.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.example.listifyjetapp.model.BasicItemInfo
+import com.example.listifyjetapp.model.ListName
+import com.example.listifyjetapp.ui.screens.lists.ListsViewModel
+import com.example.listifyjetapp.widgets.inputFields.FormInputField
+import com.example.listifyjetapp.widgets.bars.ListifyTopBar
+
+@Composable
+fun ListifyNewListScreen(
+    viewModel: ListsViewModel = hiltViewModel(),
+    onPopBackStack: () -> Unit,
+) {
+
+    var formTextState by remember { mutableStateOf("") }
+    val userId by viewModel.userId.collectAsState()
+    var isError by remember { mutableStateOf(false) }
+
+
+    LaunchedEffect(viewModel.navigateBack) {
+        viewModel.navigateBack.collect { navigateBack ->
+            if (navigateBack) {
+                onPopBackStack()
+                viewModel.navigationComplete()
+            }
+        }
+    }
+
+    fun onSaveClick() {
+        isError = false
+        if (formTextState.isBlank()) {
+            isError = true
+        } else {
+            val listName = ListName(name = formTextState)
+            viewModel.insertListByUser(userId, listName)
+        }
+    }
+
+    Scaffold(
+        modifier = Modifier.fillMaxSize(),
+        topBar = { ListifyTopBar(
+            title = "New List",
+            isListsScreen = false,
+            //goBackIcon = Icons.AutoMirrored.Filled.ArrowBack,
+            onGoBackButtonClicked = { onPopBackStack() },
+            leftText = "Cancel",
+            rightText = "Save",
+            onRightButtonClick = { onSaveClick() }
+        ) }
+    ) { innerPadding ->
+
+        Surface(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(innerPadding)
+        ) {
+
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(16.dp),
+                verticalArrangement = Arrangement.spacedBy(25.dp)
+            ) {
+
+                Column() {
+                    FormInputField(
+                        placerHolder = "e.g., grocery list",
+                        isError = isError,
+                        textState=formTextState,
+                        onValueChange={ formTextState = it }
+                    )
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/ListifySplashScreen.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/ListifySplashScreen.kt
index 928bbf2..f79fe7f 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/ListifySplashScreen.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/ListifySplashScreen.kt
@@ -6,10 +6,12 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -17,17 +19,22 @@ import androidx.compose.ui.draw.scale
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.sp
-import androidx.navigation.NavHostController
+import androidx.hilt.navigation.compose.hiltViewModel
 import com.example.listifyjetapp.R
-import com.example.listifyjetapp.ui.navigation.ListifyScreens
+import com.example.listifyjetapp.components.authButtons.AuthButtons
 import com.example.listifyjetapp.ui.theme.ListifyColor
 import com.example.listifyjetapp.ui.theme.barriecitoFont
 import kotlinx.coroutines.delay
 
 @Composable
-fun ListifySplashScreen(navController: NavHostController) {
+fun ListifySplashScreen(
+    splashViewModel: SplashViewModel = hiltViewModel(),
+    onNavigateToListsScreen: (usrId: Int) -> Unit,
+    onGoToLoginScreen: () -> Unit
+) {
     // TODO: Create an Animated object that holds a Float value starting at 0f
     val scale = remember { Animatable(initialValue = 0f) }
+    val isShowButtons = remember { mutableStateOf(false) }
 
     LaunchedEffect(key1 = true, block = { // key1 = true ensure it runs once only
         scale.animateTo(
@@ -40,8 +47,16 @@ fun ListifySplashScreen(navController: NavHostController) {
 
         // when the animation is over, delay 2s before going to next screen
         delay(2000L)
-        // TODO: Navigate to MainScreen
-        navController.navigate(ListifyScreens.ListsScreen.route)
+
+        val isLoggedIn = splashViewModel.isLoggedIn()
+        if (isLoggedIn && splashViewModel.checkAccessToken()) {
+            // TODO: Navigate to MainScreen
+            val userId = splashViewModel.getUserId()
+            onNavigateToListsScreen(userId)
+        } else {
+            // TODO: Show login + SignIn button at the bottom
+            isShowButtons.value = true
+        }
     })
 
     Surface(
@@ -62,8 +77,13 @@ fun ListifySplashScreen(navController: NavHostController) {
             )
             Text(
                 text = stringResource(R.string.app_tagline),
-                color = ListifyColor.TextGrey
+                color = ListifyColor.TextGrey,
+                style = MaterialTheme.typography.titleMedium
             )
         }
+
+        if (isShowButtons.value) {
+            AuthButtons(onGoToLoginScreen = { onGoToLoginScreen() })
+        }
     }
 }
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/SplashViewModel.kt b/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/SplashViewModel.kt
new file mode 100644
index 0000000..80fbbcf
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/screens/splash/SplashViewModel.kt
@@ -0,0 +1,56 @@
+package com.example.listifyjetapp.ui.screens.splash
+
+import androidx.lifecycle.ViewModel
+import com.example.listifyjetapp.data.ListifyStorageManager
+import com.example.listifyjetapp.network.ListifyAPI
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.first
+import javax.inject.Inject
+
+@HiltViewModel
+class SplashViewModel @Inject constructor(
+    private val storageManager: ListifyStorageManager,
+    private val api: ListifyAPI
+) : ViewModel() {
+
+    suspend fun isLoggedIn(): Boolean = storageManager.isLoggedInFlow.first()
+    suspend fun getUserId(): Int = storageManager.userIdFlow.first()
+
+    // Optional: decode JWT exp; if you don't want to parse JWT, just try refresh and ignore errors.
+    private fun isExpired(jwt: String): Boolean {
+        return try {
+            val token = jwt.split(".")
+            if (token.size < 2) return true     // treat as expired/invalid
+            val payload = android.util.Base64.decode(
+                token[1],
+                android.util.Base64.URL_SAFE or android.util.Base64.NO_WRAP
+            )
+            val json = org.json.JSONObject(String(payload))
+            val exp = json.optLong("exp", 0L)
+            val nowSec = System.currentTimeMillis() / 1000
+            exp != 0L && exp <= nowSec
+        } catch (_: Exception) { false }
+    }
+
+    suspend fun accessToken(): String {
+        return storageManager.accessTokenFlow.first()
+    }
+    // Make sure access toke nis valid before navigating
+    // returns true if we are good to proceed, false if we must show login
+    suspend fun checkAccessToken(): Boolean {
+        val accessToken = storageManager.accessTokenFlow.first()
+        if (accessToken.isNotBlank() && !isExpired(accessToken)) return true
+
+        // try refresh
+        return try {
+            val refreshed = api.refresh(storageManager.refreshTokenFlow.first())
+            storageManager.updateTokens(
+                refreshed.accessToken, refreshed.refreshToken
+            )
+            true
+        } catch (_: Exception) {
+            storageManager.clearDataStore()
+            false
+        }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/theme/ButtonStyle.kt b/app/src/main/java/com/example/listifyjetapp/ui/theme/ButtonStyle.kt
new file mode 100644
index 0000000..2a4d810
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/ui/theme/ButtonStyle.kt
@@ -0,0 +1,10 @@
+package com.example.listifyjetapp.ui.theme
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+val ButtonShape = RoundedCornerShape(10.dp)
+val ButtonPaddings = Modifier.padding(vertical = 6.dp)
+val ButtonBorderStroke = 2.dp
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/theme/Color.kt b/app/src/main/java/com/example/listifyjetapp/ui/theme/Color.kt
index 6b65d4a..d525909 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/theme/Color.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/theme/Color.kt
@@ -12,6 +12,8 @@ val Pink40 = Color(0xFF7D5260)
 
 object ListifyColor {
     val SplashYellow = Color(0xFFFFCA3A)
+    val TextBlack = Color(0xff000000)
     val TextDark = Color(0xff3e4e50)
     val TextGrey = Color(0xff858585)
+    val IconGreen = Color(0xff0cc25f)
 }
diff --git a/app/src/main/java/com/example/listifyjetapp/ui/theme/Type.kt b/app/src/main/java/com/example/listifyjetapp/ui/theme/Type.kt
index a3a8723..d596844 100644
--- a/app/src/main/java/com/example/listifyjetapp/ui/theme/Type.kt
+++ b/app/src/main/java/com/example/listifyjetapp/ui/theme/Type.kt
@@ -9,26 +9,56 @@ import androidx.compose.ui.unit.sp
 // Set of Material typography styles to start with
 val Typography = Typography(
     bodyLarge = TextStyle(
+        // Main content
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 24.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    ),
+
+    bodyMedium = TextStyle(
+        //
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 20.sp,
+        lineHeight = 24.sp,
+        letterSpacing = 0.5.sp
+    ),
+
+    bodySmall= TextStyle(
+        //
         fontFamily = FontFamily.Default,
         fontWeight = FontWeight.Normal,
         fontSize = 16.sp,
         lineHeight = 24.sp,
         letterSpacing = 0.5.sp
-    )
-    /* Other default text styles to override
+    ),
+
     titleLarge = TextStyle(
+        // topBar tittles
         fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Normal,
-        fontSize = 22.sp,
+        fontWeight = FontWeight.ExtraBold,
+        fontSize = 28.sp,
         lineHeight = 28.sp,
         letterSpacing = 0.sp
     ),
-    labelSmall = TextStyle(
+
+    titleMedium= TextStyle(
+        // topBar text buttons
         fontFamily = FontFamily.Default,
-        fontWeight = FontWeight.Medium,
-        fontSize = 11.sp,
+        fontWeight = FontWeight.Bold,
+        fontSize = 20.sp,
+        lineHeight = 28.sp,
+        letterSpacing = 0.sp
+    ),
+
+    labelLarge = TextStyle(
+        // searchBar text,
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 18.sp,
         lineHeight = 16.sp,
         letterSpacing = 0.5.sp
     )
-    */
 )
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/utils/filters.kt b/app/src/main/java/com/example/listifyjetapp/utils/filters.kt
new file mode 100644
index 0000000..7ca5e8a
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/utils/filters.kt
@@ -0,0 +1,22 @@
+package com.example.listifyjetapp.utils
+
+import com.example.listifyjetapp.model.ListItem
+import com.example.listifyjetapp.model.ListModel
+
+fun filterLists(input: String, lists: List<ListModel>): List<ListModel> {
+
+    return if (input.isEmpty()) {
+        lists
+    } else {
+        lists.filter { it.name.contains(input, ignoreCase = true) }
+    }
+
+}
+
+fun filterListItems(input: String, items: List<ListItem>): List<ListItem> {
+    return if (input.isEmpty()) {
+        items
+    } else {
+        items.filter { it.description.contains(input, ignoreCase = true) }
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/bars/ListifySearchBar.kt b/app/src/main/java/com/example/listifyjetapp/widgets/bars/ListifySearchBar.kt
new file mode 100644
index 0000000..7d83746
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/bars/ListifySearchBar.kt
@@ -0,0 +1,60 @@
+package com.example.listifyjetapp.widgets.bars
+
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.ImeAction
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.ui.theme.ListifyColor
+
+
+@Composable
+fun ListifySearchBar(
+    searchTextValue: MutableState<String>,
+    onValueChange: (String) -> Unit,
+    imeAction: ImeAction = ImeAction.Next,              // what happen when you press "Next"
+    keyboardAction: KeyboardActions = KeyboardActions.Default // what to do when an action is triggered
+) {
+    TextField(
+        modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
+        shape = RoundedCornerShape(12.dp),
+        colors = TextFieldDefaults.colors(
+            unfocusedIndicatorColor = Color.Transparent,
+            focusedIndicatorColor = Color.Transparent,
+            disabledIndicatorColor = Color.Transparent,
+
+            unfocusedLabelColor = ListifyColor.TextDark.copy(0.1f),
+            focusedContainerColor = ListifyColor.TextDark.copy(0.1f),
+            cursorColor = ListifyColor.TextDark,
+        ),
+        singleLine = true,
+        maxLines = 1,
+        leadingIcon = {
+            Icon(
+                imageVector = Icons.Default.Search,
+                contentDescription = "Search icon",
+            )
+        },
+
+        value = searchTextValue.value,
+        onValueChange = onValueChange,
+        placeholder = { Text(text="Search", style = MaterialTheme.typography.labelLarge) },
+        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),  // Sets the keyboard to normal text input.
+        keyboardActions = keyboardAction,
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/bars/ListifyTopBar.kt b/app/src/main/java/com/example/listifyjetapp/widgets/bars/ListifyTopBar.kt
new file mode 100644
index 0000000..fb5dabd
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/bars/ListifyTopBar.kt
@@ -0,0 +1,88 @@
+package com.example.listifyjetapp.widgets.bars
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults.topAppBarColors
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.ui.theme.ListifyColor
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Preview
+@Composable
+fun ListifyTopBar(
+    title: String = "Screen Tittle",
+    isListsScreen: Boolean = true,
+    goBackIcon: ImageVector? = null,
+    leftText: String? = "",
+    rightIcon: ImageVector? = null,
+    rightText: String? = "",
+    onGoBackButtonClicked: () -> Unit = {},
+    onRightButtonClick: () -> Unit = {}
+) {
+
+    CenterAlignedTopAppBar(
+        //modifier = Modifier.shadow(elevation = 5.dp),
+        colors = topAppBarColors(containerColor = ListifyColor.SplashYellow),
+        title = {
+            Text(
+                text = title,
+                style = MaterialTheme.typography.titleLarge,
+            )
+        },
+
+        actions = {
+            if (rightIcon != null) {
+                IconButton(onClick = { onRightButtonClick() }) {
+                    Icon(
+                        modifier = Modifier.size(24.dp),
+                        imageVector = rightIcon, //Icons.Default.Add,
+                        contentDescription = "Add icon"
+                    )
+                }
+            }
+
+            if (rightText.toString().isNotEmpty() && rightText != null) {
+                Text(
+                    text = rightText,
+                    modifier = Modifier.padding(horizontal = 16.dp).clickable { onRightButtonClick() },
+                    style = MaterialTheme.typography.titleMedium,
+                    color = ListifyColor.TextDark
+                )
+            }
+        },
+
+        navigationIcon = {
+            if (goBackIcon != null) {
+                Icon(
+                    imageVector = goBackIcon,
+                    contentDescription = "GO back icon",
+                    modifier = Modifier.size(24.dp).clickable { onGoBackButtonClicked() }
+                )
+            }
+            if (leftText.toString().isNotEmpty() && leftText != null) {
+                Text(
+                    text = leftText,
+                    modifier = Modifier
+                        .padding(horizontal = 16.dp)
+                        .clickable { onGoBackButtonClicked() },
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Normal,
+                    color = ListifyColor.TextDark
+                )
+            }
+
+        }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/buttons/CustomOutlinedButton.kt b/app/src/main/java/com/example/listifyjetapp/widgets/buttons/CustomOutlinedButton.kt
new file mode 100644
index 0000000..b6d9ac1
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/buttons/CustomOutlinedButton.kt
@@ -0,0 +1,50 @@
+package com.example.listifyjetapp.widgets.buttons
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Icon
+import androidx.compose.material3.OutlinedButton
+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.graphics.Shape
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun CustomOutlinedButton(
+    modifier: Modifier,
+    shape: Shape,
+    border: BorderStroke,
+    text: String,
+    textColor: Color,
+    buttonIcon: ImageVector? = null,
+    iconDescription: String? = null,
+    onClick: () -> Unit,
+) {
+    OutlinedButton(
+        modifier = modifier,
+        shape = shape,
+        border = border,
+        onClick = { onClick() }
+    ) {
+        if (buttonIcon != null) {
+            Icon(
+                imageVector = buttonIcon,
+                modifier = Modifier.size(20.dp),
+                contentDescription = iconDescription,
+            )
+        }
+        Text(
+            text = text,
+            color = textColor,
+            modifier = Modifier.padding(8.dp),
+            fontWeight = FontWeight.Bold,
+            fontSize = 18.sp,
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/buttons/FilledButton.kt b/app/src/main/java/com/example/listifyjetapp/widgets/buttons/FilledButton.kt
new file mode 100644
index 0000000..83d5c8d
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/buttons/FilledButton.kt
@@ -0,0 +1,53 @@
+package com.example.listifyjetapp.widgets.buttons
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Icon
+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.graphics.Shape
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun FilledButton(
+    modifier: Modifier,
+    shape: Shape,
+    containerColor: Color,
+    contentColor: Color,
+    text: String,
+    buttonIcon: ImageVector? = null,
+    iconDescription: String?,
+    onClick: () -> Unit,
+) {
+    Button(
+        modifier = modifier,
+        shape = shape,
+        colors = ButtonDefaults.buttonColors(
+            containerColor = containerColor,
+            contentColor = contentColor
+        ),
+        onClick = { onClick() }
+    ) {
+        if (buttonIcon != null) {
+            Icon(
+                imageVector = buttonIcon,
+                modifier = Modifier.size(20.dp),
+                contentDescription = iconDescription
+            )
+        }
+
+        Text(
+            text = text,
+            fontWeight = FontWeight.ExtraBold,
+            fontSize = 18.sp,
+            modifier = Modifier.padding(8.dp)
+        )
+    }
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/inputFields/FormInputField.kt b/app/src/main/java/com/example/listifyjetapp/widgets/inputFields/FormInputField.kt
new file mode 100644
index 0000000..0d96469
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/inputFields/FormInputField.kt
@@ -0,0 +1,58 @@
+package com.example.listifyjetapp.widgets.inputFields
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.TextField
+import androidx.compose.material3.TextFieldDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.unit.dp
+import com.example.listifyjetapp.ui.theme.ButtonShape
+import com.example.listifyjetapp.widgets.texts.InputLabelText
+import com.example.listifyjetapp.ui.theme.ListifyColor
+import java.lang.Error
+
+@Composable
+fun FormInputField(
+    placerHolder: String,
+    textState: String,
+    isError: Boolean = false,
+    onValueChange: (String) -> Unit,
+) {
+
+    TextField(
+        modifier = Modifier.fillMaxWidth(),
+        textStyle = MaterialTheme.typography.bodyMedium,
+        shape = ButtonShape,
+        colors = TextFieldDefaults.colors(
+            unfocusedIndicatorColor = Color.White,
+            focusedIndicatorColor = Color.White,
+            disabledIndicatorColor = Color.Transparent,
+
+            unfocusedLabelColor = ListifyColor.TextDark,
+            unfocusedContainerColor = ListifyColor.TextDark.copy(0.1f),
+            focusedContainerColor = ListifyColor.TextDark.copy(0.1f),
+            cursorColor = ListifyColor.TextDark,
+        ),
+        singleLine = true,
+        maxLines = 1,
+
+        value = textState,
+        onValueChange = onValueChange,
+        placeholder = { InputLabelText(text=placerHolder) },
+        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),  // Sets the keyboard to normal text input.
+        isError = isError,
+        supportingText = {
+            if (isError) {
+                InputLabelText("Cannot be empty.")
+            }
+        }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/texts/EmptyList.kt b/app/src/main/java/com/example/listifyjetapp/widgets/texts/EmptyList.kt
new file mode 100644
index 0000000..ddbb895
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/texts/EmptyList.kt
@@ -0,0 +1,18 @@
+package com.example.listifyjetapp.widgets.texts
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun EmptyList(string: String) {
+
+    Text(
+        text = string,
+        modifier = Modifier.padding(vertical = 16.dp),
+        style = MaterialTheme.typography.bodyMedium
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/example/listifyjetapp/widgets/texts/InputLabelText.kt b/app/src/main/java/com/example/listifyjetapp/widgets/texts/InputLabelText.kt
new file mode 100644
index 0000000..63269a7
--- /dev/null
+++ b/app/src/main/java/com/example/listifyjetapp/widgets/texts/InputLabelText.kt
@@ -0,0 +1,13 @@
+package com.example.listifyjetapp.widgets.texts
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+
+@Composable
+fun InputLabelText(text: String) {
+    Text(
+        text = text,
+        style = MaterialTheme.typography.labelLarge
+    )
+}
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 3e022e0..5d8cb30 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -3,4 +3,5 @@
 	<string name="app_title">Listify</string>
 	<string name="app_tagline">From To-Dos to Ta-Das!</string>
 	<string name="no_lists">You don\'t have any lists yet.</string>
+	<string name="no_items">This list is empty.</string>
 </resources>
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 96b3b79..5561f9b 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -1,5 +1,6 @@
 [versions]
 agp = "8.10.1"
+datastore = "1.1.7"
 kotlin = "2.1.20"
 coreKtx = "1.16.0"
 junit = "4.13.2"
@@ -7,10 +8,12 @@ junitVersion = "1.2.1"
 espressoCore = "3.6.1"
 lifecycleRuntimeKtx = "2.9.1"
 activityCompose = "1.10.1"
-composeBom = "2024.09.00"
+composeBom = "2025.07.00"
 
 coilCompose = "1.4.0"
 converterGson = "2.9.0"
+materialIconsExtended = "1.7.8"
+navigationCompose = "2.9.3"
 roomKtx = "2.7.2"
 roomRuntime = "2.7.2"
 hiltCompiler = "2.56.2"
@@ -23,10 +26,13 @@ kotlinxCoroutinesCore = "1.10.1"
 kotlinxCoroutinesPlayServices = "1.10.1"
 lifecycleRuntimeKtxVersion = "2.9.1"
 okhttp = "5.0.0-alpha.2"
+kotlinxSerializationJson = "1.7.3"
 
 
 [libraries]
 androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
+androidx-datastore-preferences = { module = "androidx.datastore:datastore-preferences", version.ref = "datastore" }
+androidx-material-icons-extended = { module = "androidx.compose.material:material-icons-extended", version.ref = "materialIconsExtended" }
 junit = { group = "junit", name = "junit", version.ref = "junit" }
 androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
 androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
@@ -59,6 +65,13 @@ kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-c
 kotlinx-coroutines-play-services = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-play-services", version.ref = "kotlinxCoroutinesPlayServices" }
 retrofit = { module = "com.squareup.retrofit2:retrofit", version.ref = "retrofit" }
 
+kotlinx-serialization-json = { module = "org.jetbrains.kotlinx:kotlinx-serialization-json", version.ref = "kotlinxSerializationJson" }
+androidx-navigation-compose = { module = "androidx.navigation:navigation-compose", version.ref = "navigationCompose" }
+androidx-navigation-dynamic-features-fragment = { module = "androidx.navigation:navigation-dynamic-features-fragment", version.ref = "navigationCompose" }
+androidx-navigation-fragment = { module = "androidx.navigation:navigation-fragment", version.ref = "navigationCompose" }
+androidx-navigation-testing = { module = "androidx.navigation:navigation-testing", version.ref = "navigationCompose" }
+androidx-navigation-ui = { module = "androidx.navigation:navigation-ui", version.ref = "navigationCompose" }
+
 #font
 androidx-ui-text-google-fonts = { group = "androidx.compose.ui", name = "ui-text-google-fonts", version = "1.8.3" } # or match your Compose BOM