diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index 26d3352..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
diff --git a/.idea/.name b/.idea/.name
deleted file mode 100644
index 3302ccf..0000000
--- a/.idea/.name
+++ /dev/null
@@ -1 +0,0 @@
-SaccoRide
\ No newline at end of file
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
index c3f9420..61a9130 100644
--- a/.idea/compiler.xml
+++ b/.idea/compiler.xml
@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="CompilerConfiguration">
-    <bytecodeTargetLevel target="1.8">
-      <module name="SaccoRide.app" target="17" />
-      <module name="SaccoRide.data" target="17" />
-      <module name="SaccoRide.presentation" target="17" />
-    </bytecodeTargetLevel>
+    <bytecodeTargetLevel target="1.8" />
   </component>
 </project>
\ No newline at end of file
diff --git a/.idea/emulatorDisplays.xml b/.idea/emulatorDisplays.xml
deleted file mode 100644
index e6cc36d..0000000
--- a/.idea/emulatorDisplays.xml
+++ /dev/null
@@ -1,47 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EmulatorDisplays">
-    <option name="displayStateByAvdFolder">
-      <map>
-        <entry key="C:\Users\steve\.android\avd\Pixel_5_API_33.avd">
-          <value>
-            <MultiDisplayState>
-              <option name="displayDescriptors">
-                <list>
-                  <DisplayDescriptor>
-                    <option name="height" value="2474" />
-                    <option name="width" value="1211" />
-                  </DisplayDescriptor>
-                  <DisplayDescriptor>
-                    <option name="displayId" value="1" />
-                    <option name="height" value="1280" />
-                    <option name="width" value="720" />
-                  </DisplayDescriptor>
-                </list>
-              </option>
-              <option name="emulatorPanelState">
-                <EmulatorPanelState>
-                  <option name="splitPanel">
-                    <SplitPanelState>
-                      <option name="proportion" value="0.7775330543518066" />
-                      <option name="firstComponent">
-                        <EmulatorPanelState>
-                          <option name="displayId" value="0" />
-                        </EmulatorPanelState>
-                      </option>
-                      <option name="secondComponent">
-                        <EmulatorPanelState>
-                          <option name="displayId" value="1" />
-                        </EmulatorPanelState>
-                      </option>
-                    </SplitPanelState>
-                  </option>
-                </EmulatorPanelState>
-              </option>
-            </MultiDisplayState>
-          </value>
-        </entry>
-      </map>
-    </option>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
index f23db70..c376366 100644
--- a/.idea/gradle.xml
+++ b/.idea/gradle.xml
@@ -7,7 +7,6 @@
         <option name="testRunner" value="GRADLE" />
         <option name="distributionType" value="DEFAULT_WRAPPED" />
         <option name="externalProjectPath" value="$PROJECT_DIR$" />
-        <option name="gradleJvm" value="Embedded JDK" />
         <option name="modules">
           <set>
             <option value="$PROJECT_DIR$" />
diff --git a/.idea/misc.xml b/.idea/misc.xml
index 02a0ebc..8978d23 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -1,10 +1,6 @@
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
-<<<<<<< HEAD
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_8" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
-=======
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="jbr-17" project-jdk-type="JavaSDK">
->>>>>>> 610da6802956fd3cd89217e677e0d9fc6b85e7f3
     <output url="file://$PROJECT_DIR$/build/classes" />
   </component>
   <component name="ProjectType">
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
index 94a25f7..35eb1dd 100644
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+    <mapping directory="" vcs="Git" />
   </component>
 </project>
\ No newline at end of file
diff --git a/data/src/main/java/com/dev/chacha/data/util/Constants.kt b/data/src/main/java/com/dev/chacha/data/util/Constants.kt
index 7a9173c..4ae0517 100644
--- a/data/src/main/java/com/dev/chacha/data/util/Constants.kt
+++ b/data/src/main/java/com/dev/chacha/data/util/Constants.kt
@@ -4,6 +4,7 @@ import androidx.datastore.preferences.core.intPreferencesKey
 
 object Constants {
      val THEME_OPTIONS = intPreferencesKey(name = "theme_option")
+     val THEME_NAME = intPreferencesKey(name = "theme_name")
      const val THEME_PREFERENCES = "THEME_PREFERENCES"
 
 }
\ No newline at end of file
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 0ac2d83..f7d5b4f 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -10,6 +10,8 @@ lifecycle = "2.5.1"
 room = "2.4.2"
 ktor = "2.0.3"
 splash = "1.0.0-rc01"
+compose_window = "1.1.1"
+
 
 [libraries]
 android-appCompat = "androidx.appcompat:appcompat:1.4.2"
@@ -53,6 +55,8 @@ accompanist-permission= "com.google.accompanist:accompanist-permissions:0.21.1-b
 date = "com.maxkeppeler.sheets-compose-dialogs:core:1.0.2"
 datee = "com.maxkeppeler.sheets-compose-dialogs:calendar:1.0.2"
 
+
+
 gson-gson = "com.google.code.gson:gson:2.9.0"
 kotlinx-coroutines-core = "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.9"
 kotlin-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "coroutines" }
diff --git a/presentation/build.gradle.kts b/presentation/build.gradle.kts
index e9c3cf3..5e79e60 100644
--- a/presentation/build.gradle.kts
+++ b/presentation/build.gradle.kts
@@ -86,12 +86,6 @@ dependencies {
     implementation(libs.coil.compose)
     implementation(libs.coil.gf)
     implementation(libs.accompanist.swiperefresh)
-   /* implementation(libs.accompanist.permission)
-    implementation(libs.accompanist.indicator)
-    implementation(libs.accompanist.systemui)
-    implementation(libs.accompanist.pager)
-    implementation(libs.accompanist.animation)
-    implementation(libs.accompanist.navigation)*/
     implementation(libs.kotlin.coroutines.datetime)
     implementation(libs.zeko.query.builder)
     kapt(libs.android.hilt.compiler)
diff --git a/presentation/src/main/AndroidManifest.xml b/presentation/src/main/AndroidManifest.xml
index 640e7f9..913abde 100644
--- a/presentation/src/main/AndroidManifest.xml
+++ b/presentation/src/main/AndroidManifest.xml
@@ -3,5 +3,6 @@
 
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
     <uses-permission android:name="android.permission.USE_BIOMETRIC" />
 </manifest>
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/account/component/AccountsCard.kt b/presentation/src/main/java/com/dev/chacha/presentation/account/component/AccountsCard.kt
index 539b6b3..ba9dc04 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/account/component/AccountsCard.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/account/component/AccountsCard.kt
@@ -26,7 +26,57 @@ import com.dev.chacha.presentation.common.theme.Brutalista
 fun AccountCard(
     onClick: (String) -> Unit,
     title: String,
-    icon: Int
+    icon: Int,
+
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .clickable { onClick(title) },
+        shape = RoundedCornerShape(8.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6F),
+        )
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(id = icon),
+                    contentDescription = null,
+                    modifier = Modifier.size(25.dp)
+                )
+                Text(
+                    text = title,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    fontSize = 14.sp,
+                    fontFamily = Brutalista,
+                )
+            }
+            Icon(
+                painter = painterResource(id = R.drawable.chevron_right),
+                contentDescription = null
+            )
+        }
+    }
+}
+
+@Composable
+fun AccountCards(
+    onClick: (String) -> Unit,
+    title: String,
+    icon: Int,
+    onSelectTheme: (Int) -> Unit,
+    selectedTheme: Int,
 ) {
     Card(
         modifier = Modifier
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/activity/MainActivity.kt b/presentation/src/main/java/com/dev/chacha/presentation/activity/MainActivity.kt
index bcf062e..ba4c241 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/activity/MainActivity.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/activity/MainActivity.kt
@@ -5,27 +5,17 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.annotation.RequiresApi
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Surface
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
-import androidx.compose.ui.Modifier
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
-import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.lifecycleScope
 import androidx.navigation.compose.rememberNavController
-import com.dev.chacha.presentation.common.theme.SaccoRideTheme
-import com.dev.chacha.presentation.common.theme.Theme
 import com.dev.chacha.presentation.fingerprint.Biometric
-import com.dev.chacha.presentation.theme.ThemeViewModel
 import com.google.accompanist.navigation.material.ExperimentalMaterialNavigationApi
 import dagger.hilt.android.AndroidEntryPoint
-import kotlinx.coroutines.Dispatchers
-import timber.log.Timber
 
+@RequiresApi(Build.VERSION_CODES.P)
 @AndroidEntryPoint
-class MainActivity : ComponentActivity(),Biometric.AuthListener {
+class MainActivity : ComponentActivity(), Biometric.AuthListener {
     @OptIn(ExperimentalMaterialNavigationApi::class)
     @RequiresApi(Build.VERSION_CODES.P)
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -36,12 +26,17 @@ class MainActivity : ComponentActivity(),Biometric.AuthListener {
             val bottomSheetNavigator = rememberBottomSheetNavigator()
             val navController = rememberNavController(bottomSheetNavigator)
             lifecycleScope.launchWhenStarted {
-                Biometric(
-                    this@MainActivity,
-                    navController,
-                    this@MainActivity,
-                ).authenticate()
+                Biometric(this@MainActivity, navController, this@MainActivity).authenticate()
             }
+            lifecycleScope.launchWhenResumed {
+                Biometric(this@MainActivity, navController, this@MainActivity).authenticate()
+
+            }.isCancelled
+            lifecycleScope.launchWhenCreated {
+                Biometric(this@MainActivity, navController, this@MainActivity).authenticate()
+            }
+
+
         }
 
     }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/activity/MainScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/activity/MainScreen.kt
index faaed71..8187378 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/activity/MainScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/activity/MainScreen.kt
@@ -45,12 +45,16 @@ fun MainScreen(
         initial = Theme.FOLLOW_SYSTEM.themeValue,
         context = Dispatchers.Main.immediate
     )
+    val themeName by viewModel.theme.collectAsState(
+        initial = Theme.FOLLOW_SYSTEM.themeName,
+        context = Dispatchers.Main.immediate
+    )
+
     SaccoRideTheme(theme = themeValue) {
         Surface(
             modifier = Modifier.fillMaxSize(),
             color = MaterialTheme.colorScheme.background
         ) {
-            ModalBottomSheetLayout(bottomSheetNavigator = bottomSheetNavigator) {
                 Scaffold(
                     modifier = Modifier.fillMaxSize(),
                     bottomBar = { BottomNavigationBar(navController = navController) }
@@ -67,7 +71,7 @@ fun MainScreen(
 
             }
 
-        }
+
 
     }
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/AppViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/AppViewModel.kt
new file mode 100644
index 0000000..7c1c0a4
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/AppViewModel.kt
@@ -0,0 +1,38 @@
+package com.dev.chacha.presentation.base
+
+import androidx.compose.ui.graphics.Color
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.SavedStateHandle
+import androidx.lifecycle.ViewModel
+import dagger.hilt.android.HiltAndroidApp
+import javax.inject.Inject
+
+data class SystemBarState (
+    val statusBarColor: Color,
+    val statusBarDarkIcons: Boolean,
+    val navigationBarDarkIcons: Boolean,
+    val navigationBarColor: Color,
+)
+
+data class PathState (
+    val name: String,
+    val args: Map<String, Any?> = emptyMap(),
+    val callback: (result: Map<String, Any?>) -> Unit = {},
+)
+
+@HiltAndroidApp
+class AppViewModel @Inject constructor(
+    private val savedStateHandle: SavedStateHandle,
+) : ViewModel() {
+
+    var sheetStates: MutableLiveData<Map<String, PathState>> = MutableLiveData(emptyMap())
+
+    fun openSheet(state: PathState) {
+        sheetStates.value = sheetStates.value!!.plus(Pair(state.name, state))
+    }
+
+    fun closeSheet(name: String) {
+        sheetStates.value = sheetStates.value!!.minus(name)
+    }
+
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/BottomSheetWrapper.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/BottomSheetWrapper.kt
new file mode 100644
index 0000000..08780cb
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/BottomSheetWrapper.kt
@@ -0,0 +1,142 @@
+package com.dev.chacha.presentation.base
+
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.CornerSize
+import androidx.compose.material.*
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.max
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.dev.chacha.presentation.util.observeLiveData
+import kotlinx.coroutines.launch
+import kotlin.math.roundToInt
+
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun BottomSheetWrapper(
+    name: String,
+    appViewModel: AppViewModel = hiltViewModel(),
+    cancelable: Boolean = true,
+    state: ModalBottomSheetState = rememberModalBottomSheetState(
+        ModalBottomSheetValue.Hidden
+    ),
+    content: @Composable (state: ModalBottomSheetState) -> Unit
+) {
+    val coroutineScope = rememberCoroutineScope()
+
+    observeLiveData(appViewModel.sheetStates) { sheets ->
+        if (sheets.containsKey(name)) {
+            state.bindCallback(sheets[name]!!.callback)
+            coroutineScope.launch { state.show(sheets[name]!!.args) }
+        } else if (state.targetValue !== ModalBottomSheetValue.Hidden) {
+            coroutineScope.launch { state.hide() }
+        }
+    }
+
+    DisposableEffect(state.render) {
+        if (state.render) coroutineScope.launch { state.realShow() }
+
+        onDispose {  }
+    }
+
+    DisposableEffect(state.currentValue) {
+        if (state.currentValue === ModalBottomSheetValue.Hidden) {
+            state.render = false
+            appViewModel.closeSheet(name)
+        }
+
+        onDispose {  }
+    }
+
+    if (!state.render) return
+    
+    val localDensity = LocalDensity.current
+
+    val statusBarHeight = WindowInsets.systemBars.asPaddingValues().calculateTopPadding()
+
+    /*setSystemStyle(
+        style = {
+            SystemBarState(
+                statusBarColor = Color.Transparent,
+                statusBarDarkIcons = false,
+                navigationBarDarkIcons = !isNightModeNow,
+                navigationBarColor = Color.Transparent,
+            )
+        },
+        key = state.targetValue,
+        confirmChange = { state.targetValue !== ModalBottomSheetValue.Hidden },
+    )*/
+
+    val statusBarFillProgress = if (statusBarHeight == 0.dp) {
+        0F
+    } else {
+        with(localDensity) { max(
+            statusBarHeight - state.offset.value.roundToInt().toDp(),
+            0.toDp(),
+        ) } / statusBarHeight
+    }.coerceIn(0f, 1f)
+
+    val focusManager = LocalFocusManager.current
+
+    LaunchedEffect(Unit) {
+        focusManager.clearFocus()
+    }
+
+    ModalBottomSheetLayout(
+        cancelable = cancelable,
+        sheetBackgroundColor = MaterialTheme.colorScheme.surface,
+        sheetState = state,
+        sheetShape = MaterialTheme.shapes.extraLarge.copy(
+            bottomStart = CornerSize(0.dp),
+            bottomEnd = CornerSize(0.dp),
+            topStart = CornerSize(28.dp * (1F - statusBarFillProgress)),
+            topEnd = CornerSize(28.dp * (1F - statusBarFillProgress)),
+        ),
+        sheetContent = {
+            Box(
+                modifier = Modifier
+                    .padding(
+                        top = statusBarHeight * statusBarFillProgress
+                    )
+            ) {
+                content(state)
+            }
+
+            if (cancelable) {
+                Box(
+                    Modifier
+                        .padding(8.dp)
+                        .fillMaxWidth()
+                ) {
+                    Box(
+                        Modifier
+                            .height(4.dp)
+                            .width(30.dp)
+                            .background(
+                                color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.2f),
+                                shape = CircleShape
+                            )
+                            .align(Alignment.Center)
+                    )
+                }
+            }
+        }
+    ) {}
+
+    BackHandler(state.isVisible) {
+        if (cancelable) {
+            coroutineScope.launch {
+                appViewModel.closeSheet(name = name)
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/BottomSheets.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/BottomSheets.kt
new file mode 100644
index 0000000..36e2770
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/BottomSheets.kt
@@ -0,0 +1,93 @@
+package com.dev.chacha.presentation.base
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Modifier
+import androidx.hilt.navigation.compose.hiltViewModel
+import androidx.lifecycle.viewmodel.compose.viewModel
+import kotlinx.coroutines.launch
+import java.util.*
+
+@RequiresApi(Build.VERSION_CODES.O)
+@OptIn(ExperimentalMaterialApi::class)
+@Composable
+fun BottomSheets(
+    appViewModel: AppViewModel = hiltViewModel(),
+) {
+    val coroutineScope = rememberCoroutineScope()
+
+    BottomSheetWrapper(
+        name = CURRENCY_EDITOR,
+    ) { state ->
+        CurrencyEditor(
+            onClose = {
+                coroutineScope.launch {
+                    state.hide()
+                }
+            }
+        )
+    }
+
+
+
+    BottomSheetWrapper(
+        name = FINISH_DATE_SELECTOR_SHEET,
+    ) { state ->
+        FinishDateSelector(
+            selectDate = state.args["initialDate"] as Date?,
+            onBackPressed = {
+                coroutineScope.launch {
+                    state.hide()
+                }
+            },
+            onApply = {
+                coroutineScope.launch {
+                    state.hide(mapOf("finishDate" to it))
+                }
+            },
+        )
+    }
+
+
+    /* BottomSheetWrapper(
+         name = SETTINGS_CHANGE_THEME_SHEET,
+         windowSizeClass = windowSizeClass,
+     ) { state ->
+         ThemeSwitcherDialog(
+             onClose = {
+                 coroutineScope.launch { state.hide() }
+             }
+         )
+     }*/
+
+
+}
+
+@Composable
+fun CurrencyEditor( onClose: () -> Unit) {
+    Column(modifier = Modifier.fillMaxSize()) {
+        Text(text = "Strings")
+
+    }
+
+}
+
+const val WALLET_SHEET = "wallet_sheet"
+const val DEFAULT_RECALC_BUDGET_CHOOSER = "default_recalc_budget_chooser"
+const val CURRENCY_EDITOR = "currency_editor"
+const val FINISH_DATE_SELECTOR_SHEET = "finish_date_selector_sheet"
+const val SETTINGS_SHEET = "settings_sheet"
+const val RECALCULATE_DAILY_BUDGET_SHEET = "recalculate_daily_budget_sheet"
+const val FINISH_PERIOD_SHEET = "finish_period_sheet"
+const val ON_BOARDING_SHEET = "on_boarding_sheet"
+const val NEW_DAY_BUDGET_DESCRIPTION_SHEET = "new_day_budget_description_sheet"
+const val BUDGET_IS_OVER_DESCRIPTION_SHEET = "budget_is_over_description_sheet"
+const val DEBUG_MENU_SHEET = "debug_menu_sheet"
+const val BUG_REPORTER_SHEET = "bug_reporter_sheet"
+const val SETTINGS_CHANGE_THEME_SHEET = "settings_change_theme_sheet"
+const val SETTINGS_CHANGE_LOCALE_SHEET = "settings_change_locale_sheet"
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/FinishDateSelector.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/FinishDateSelector.kt
new file mode 100644
index 0000000..cd057ad
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/FinishDateSelector.kt
@@ -0,0 +1,143 @@
+package com.dev.chacha.presentation.base
+
+import android.content.res.Configuration.UI_MODE_NIGHT_YES
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Surface
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.Check
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.calendar.model.CalendarState
+import com.dev.chacha.presentation.calendar.model.selectedDatesFormatted
+import com.dev.chacha.presentation.util.toDate
+import com.dev.chacha.presentation.util.toLocalDate
+import com.dev.chacha.presentation.R
+import com.dev.chacha.presentation.calendar.Calendar
+import java.time.LocalDate
+import java.util.*
+
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun FinishDateSelector(
+    selectDate: Date? = null,
+    onBackPressed: () -> Unit,
+    onApply: (finishDate: Date) -> Unit,
+) {
+    Surface(modifier = Modifier.fillMaxSize()) {
+        val calendarState = remember { CalendarState(selectDate) }
+
+        LaunchedEffect(Unit) {
+            if (selectDate !== null) calendarState.setSelectedDay(selectDate.toLocalDate())
+        }
+
+        FinishDateSelectorContent(
+            calendarState = calendarState,
+            onDayClicked = { calendarState.setSelectedDay(it) },
+            onBackPressed = onBackPressed,
+            onApply = { onApply(calendarState.calendarUiState.value.selectedEndDate!!.toDate()) }
+        )
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+private fun FinishDateSelectorContent(
+    calendarState: CalendarState,
+    onDayClicked: (LocalDate) -> Unit,
+    onBackPressed: () -> Unit,
+    onApply: () -> Unit,
+) {
+    Column {
+        FinishDateSelectorTopAppBar(calendarState, onBackPressed, onApply)
+        Calendar(
+            calendarState = calendarState,
+            onDayClicked = onDayClicked,
+        )
+    }
+}
+@RequiresApi(Build.VERSION_CODES.O)
+
+@Composable
+private fun FinishDateSelectorTopAppBar(
+    calendarState: CalendarState,
+    onBackPressed: () -> Unit,
+    onApply: () -> Unit,
+) {
+    Surface {
+        Column() {
+            Row(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp)) {
+                IconButton(
+                    onClick = { onBackPressed() }
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.ArrowBack,
+                        contentDescription = null,
+                    )
+                }
+                Spacer(Modifier.weight(1F))
+                Button(
+                    onClick = { onApply() },
+                    contentPadding = ButtonDefaults.ContentPadding,
+                    enabled = calendarState.calendarUiState.value.hasSelectedDates,
+                ) {
+                    Icon(
+                        imageVector = Icons.Filled.Check,
+                        contentDescription = null,
+                        modifier = Modifier.size(ButtonDefaults.IconSize)
+
+                    )
+                    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
+                    Text(text = stringResource(R.string.apply))
+                }
+            }
+            Row(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(
+                        start = 16.dp,
+                        end = 16.dp,
+                        top = 8.dp,
+                        bottom = 24.dp,
+                    )
+            ) {
+                Text(
+                    text = if (!calendarState.calendarUiState.value.hasSelectedDates) {
+                        stringResource(R.string.select_finish_date_title)
+                    } else {
+                        selectedDatesFormatted(calendarState)
+                    },
+                    style = MaterialTheme.typography.titleLarge,
+                )
+            }
+        }
+    }
+}
+
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Preview(name = "Default")
+@Composable
+private fun PreviewDefault(){
+        FinishDateSelector(onBackPressed = {}, onApply = {})
+}
+
+@Preview(name = "Night mode", uiMode = UI_MODE_NIGHT_YES)
+@Composable
+@RequiresApi(Build.VERSION_CODES.O)
+private fun PreviewNightMode(){
+        FinishDateSelector(onBackPressed = {}, onApply = {})
+
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/ModalBottomSheet.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/ModalBottomSheet.kt
new file mode 100644
index 0000000..d941588
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/ModalBottomSheet.kt
@@ -0,0 +1,333 @@
+package com.dev.chacha.presentation.base
+
+
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.TweenSpec
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.*
+import androidx.compose.material.*
+import androidx.compose.runtime.*
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.semantics.*
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.dp
+import kotlinx.coroutines.launch
+import kotlin.math.max
+import kotlin.math.roundToInt
+import androidx.compose.foundation.Canvas
+import androidx.compose.ui.Alignment
+import com.chacha.presentation.util.SwipeableDefaults
+import com.chacha.presentation.util.SwipeableState
+import com.chacha.presentation.util.PreUpPostDownNestedScrollConnection
+import com.chacha.presentation.util.swipeable
+
+
+
+@ExperimentalMaterialApi
+enum class ModalBottomSheetValue { Hidden, Expanded, HalfExpanded }
+
+@ExperimentalMaterialApi
+class ModalBottomSheetState(
+    initialValue: ModalBottomSheetValue,
+    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
+    internal val isSkipHalfExpanded: Boolean,
+    confirmStateChange: (ModalBottomSheetValue) -> Boolean = { true },
+    render: Boolean,
+) : SwipeableState<ModalBottomSheetValue>(
+    initialValue = initialValue,
+    animationSpec = animationSpec,
+    confirmStateChange = confirmStateChange
+) {
+    var render: Boolean by mutableStateOf(render)
+    var args: Map<String, Any?> by mutableStateOf(emptyMap())
+    var callback: (result: Map<String, Any?>) -> Unit by mutableStateOf({})
+
+    val isVisible: Boolean
+        get() = currentValue != ModalBottomSheetValue.Hidden
+
+    private val hasHalfExpandedState: Boolean
+        get() = anchors.values.contains(ModalBottomSheetValue.HalfExpanded)
+
+    constructor(
+        initialValue: ModalBottomSheetValue,
+        animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
+        confirmStateChange: (ModalBottomSheetValue) -> Boolean = { true },
+        render: MutableState<Boolean>,
+    ) : this(initialValue, animationSpec, isSkipHalfExpanded = false, confirmStateChange, render.value)
+
+    init {
+        if (isSkipHalfExpanded) {
+            require(initialValue != ModalBottomSheetValue.HalfExpanded) {
+                "The initial value must not be set to HalfExpanded if skipHalfExpanded is set to" +
+                        " true."
+            }
+        }
+    }
+
+    suspend fun realShow() {
+        val targetValue = when {
+            //hasHalfExpandedState -> ModalBottomSheetValue.HalfExpanded
+            else -> ModalBottomSheetValue.Expanded
+        }
+        animateTo(targetValue = targetValue)
+    }
+
+    suspend fun show(args: Map<String, Any?>) {
+        this.args = args
+        this.render = true
+    }
+
+    suspend fun show() {
+        show(emptyMap())
+    }
+
+    fun bindCallback(callback: (result: Map<String, Any?>) -> Unit) {
+        this.callback = callback
+    }
+
+    internal suspend fun halfExpand() {
+        if (!hasHalfExpandedState) {
+            return
+        }
+        animateTo(ModalBottomSheetValue.HalfExpanded)
+    }
+
+    internal suspend fun expand() = animateTo(ModalBottomSheetValue.Expanded)
+
+    suspend fun hide(result: Map<String, Any?>) {
+        callback(result)
+        animateTo(ModalBottomSheetValue.Hidden)
+    }
+
+    suspend fun hide() {
+        hide(emptyMap())
+    }
+
+    internal val nestedScrollConnection = this.PreUpPostDownNestedScrollConnection
+
+    companion object {
+        fun Saver(
+            animationSpec: AnimationSpec<Float>,
+            skipHalfExpanded: Boolean,
+            confirmStateChange: (ModalBottomSheetValue) -> Boolean,
+        ): Saver<ModalBottomSheetState, *> = Saver(
+            save = { Pair(it.currentValue, it.render) },
+            restore = { (value, render) ->
+                ModalBottomSheetState(
+                    initialValue = value,
+                    animationSpec = animationSpec,
+                    isSkipHalfExpanded = skipHalfExpanded,
+                    confirmStateChange = confirmStateChange,
+                    render = render,
+                )
+            }
+        )
+    }
+}
+
+@Composable
+@ExperimentalMaterialApi
+fun rememberModalBottomSheetState(
+    initialValue: ModalBottomSheetValue,
+    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
+    skipHalfExpanded: Boolean,
+    confirmStateChange: (ModalBottomSheetValue) -> Boolean = { true },
+    render: Boolean = initialValue !== ModalBottomSheetValue.Hidden,
+): ModalBottomSheetState {
+    return rememberSaveable(
+        initialValue,
+        animationSpec,
+        skipHalfExpanded,
+        confirmStateChange,
+        render,
+        saver = ModalBottomSheetState.Saver(
+            animationSpec = animationSpec,
+            skipHalfExpanded = skipHalfExpanded,
+            confirmStateChange = confirmStateChange,
+        )
+    ) {
+        ModalBottomSheetState(
+            initialValue = initialValue,
+            animationSpec = animationSpec,
+            isSkipHalfExpanded = skipHalfExpanded,
+            confirmStateChange = confirmStateChange,
+            render = render,
+        )
+    }
+}
+
+@Composable
+@ExperimentalMaterialApi
+fun rememberModalBottomSheetState(
+    initialValue: ModalBottomSheetValue,
+    animationSpec: AnimationSpec<Float> = SwipeableDefaults.AnimationSpec,
+    confirmStateChange: (ModalBottomSheetValue) -> Boolean = { true },
+): ModalBottomSheetState = rememberModalBottomSheetState(
+    initialValue = initialValue,
+    animationSpec = animationSpec,
+    skipHalfExpanded = true,
+    confirmStateChange = confirmStateChange,
+    render = initialValue !== ModalBottomSheetValue.Hidden
+)
+
+@Composable
+@ExperimentalMaterialApi
+fun ModalBottomSheetLayout(
+    sheetContent: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+    sheetState: ModalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden),
+    sheetShape: Shape = MaterialTheme.shapes.large,
+    sheetElevation: Dp = ModalBottomSheetDefaults.Elevation,
+    sheetBackgroundColor: Color = MaterialTheme.colors.surface,
+    sheetContentColor: Color = contentColorFor(sheetBackgroundColor),
+    scrimColor: Color = ModalBottomSheetDefaults.scrimColor,
+    cancelable: Boolean = true,
+    content: @Composable () -> Unit
+) {
+    val scope = rememberCoroutineScope()
+    BoxWithConstraints(modifier, contentAlignment = Alignment.TopEnd) {
+        val fullHeight = constraints.maxHeight.toFloat()
+        val sheetHeightState = remember { mutableStateOf<Float?>(null) }
+        Box(Modifier.fillMaxSize()) {
+            content()
+            Scrim(
+                color = scrimColor,
+                onDismiss = {
+                    if (cancelable && sheetState.confirmStateChange(ModalBottomSheetValue.Hidden)) {
+                        scope.launch { sheetState.hide() }
+                    }
+                },
+                visible = sheetState.targetValue != ModalBottomSheetValue.Hidden
+            )
+        }
+
+        RenderAdaptivePane(
+            contentAlignment = Alignment.TopCenter,
+        ) {
+            Surface(
+                Modifier
+                    .fillMaxWidth()
+                    .then(
+                        if (cancelable) {
+                            Modifier.nestedScroll(sheetState.nestedScrollConnection)
+                        } else {
+                            Modifier
+                        }
+                    )
+                    .offset {
+                        val y = if (sheetState.anchors.isEmpty()) {
+                            // if we don't know our anchors yet, render the sheet as hidden
+                            fullHeight.roundToInt()
+                        } else {
+                            // if we do know our anchors, respect them
+                            sheetState.offset.value.roundToInt()
+                        }
+                        IntOffset(0, y)
+                    }
+                    .bottomSheetSwipeable(sheetState, fullHeight, sheetHeightState, cancelable),
+                shape = sheetShape,
+                elevation = sheetElevation,
+                color = sheetBackgroundColor,
+                contentColor = sheetContentColor
+            ) {
+                Box(
+                    modifier = Modifier
+                        .onGloballyPositioned {
+                            sheetHeightState.value = it.size.height.toFloat()
+                        }
+                ) {
+                    sheetContent()
+                }
+            }
+        }
+    }
+}
+
+@Suppress("ModifierInspectorInfo")
+@OptIn(ExperimentalMaterialApi::class)
+private fun Modifier.bottomSheetSwipeable(
+    sheetState: ModalBottomSheetState,
+    fullHeight: Float,
+    sheetHeightState: State<Float?>,
+    cancelable: Boolean = true,
+): Modifier {
+    val sheetHeight = sheetHeightState.value
+
+    val modifier = if (sheetHeight != null) {
+        val anchors = if (sheetHeight < fullHeight / 2 || sheetState.isSkipHalfExpanded) {
+            mapOf(
+                fullHeight to ModalBottomSheetValue.Hidden,
+                fullHeight - sheetHeight to ModalBottomSheetValue.Expanded
+            )
+        } else {
+            mapOf(
+                fullHeight to ModalBottomSheetValue.Hidden,
+                fullHeight / 2 to ModalBottomSheetValue.HalfExpanded,
+                max(0f, fullHeight - sheetHeight) to ModalBottomSheetValue.Expanded
+            )
+        }
+        Modifier.swipeable(
+            state = sheetState,
+            anchors = anchors,
+            orientation = Orientation.Vertical,
+            enabled = cancelable && (sheetState.currentValue != ModalBottomSheetValue.Hidden),
+            resistance = null
+        )
+    } else {
+        Modifier
+    }
+
+    return this.then(modifier)
+}
+
+@Composable
+private fun Scrim(
+    color: Color,
+    onDismiss: () -> Unit,
+    visible: Boolean
+) {
+    if (color.isSpecified) {
+        val alpha by animateFloatAsState(
+            targetValue = if (visible) 1f else 0f,
+            animationSpec = TweenSpec()
+        )
+
+        val dismissModifier = if (visible) {
+            Modifier
+                .pointerInput(onDismiss) { detectTapGestures { onDismiss() } }
+                .semantics(mergeDescendants = true) {
+                    contentDescription = null.toString()
+                    onClick { onDismiss(); true }
+                }
+        } else {
+            Modifier
+        }
+
+        Canvas(
+            Modifier
+                .fillMaxSize()
+                .then(dismissModifier)
+        ) {
+            drawRect(color = color, alpha = alpha)
+        }
+    }
+}
+
+
+object ModalBottomSheetDefaults {
+    val Elevation = 16.dp
+    val scrimColor: Color
+        @Composable
+        get() = MaterialTheme.colors.onSurface.copy(alpha = 0.32f)
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/RenderAdaptivePane.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/RenderAdaptivePane.kt
new file mode 100644
index 0000000..1bfcfca
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/RenderAdaptivePane.kt
@@ -0,0 +1,31 @@
+package com.dev.chacha.presentation.base
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun RenderAdaptivePane(
+    contentAlignment: Alignment = Alignment.Center,
+    content: @Composable () -> Unit,
+) {
+    Row {
+        Box(
+            Modifier
+                .fillMaxSize()
+                .weight(1f)
+        )
+        Spacer(Modifier.width(16.dp))
+        Box(
+            Modifier
+                .fillMaxSize()
+                .weight(1f),
+            contentAlignment = contentAlignment,
+        ) {
+            content()
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/base/TopSheet.kt b/presentation/src/main/java/com/dev/chacha/presentation/base/TopSheet.kt
new file mode 100644
index 0000000..7399c02
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/base/TopSheet.kt
@@ -0,0 +1,278 @@
+package com.dev.chacha.presentation.base
+
+import android.view.MotionEvent
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.*
+import androidx.compose.material.rememberSwipeableState
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.*
+import androidx.compose.material3.Card
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.isSpecified
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.input.nestedscroll.nestedScroll
+import androidx.compose.ui.input.pointer.pointerInteropFilter
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.IntOffset
+import androidx.compose.ui.unit.Velocity
+import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.common.theme.colorEditor
+import com.dev.chacha.presentation.common.theme.colorOnEditor
+import kotlinx.coroutines.launch
+import java.lang.Float.max
+import kotlin.math.roundToInt
+
+@ExperimentalMaterialApi
+enum class TopSheetValue {
+    Expanded,
+    HalfExpanded
+}
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+@ExperimentalMaterialApi
+fun TopSheetLayout(
+    modifier: Modifier = Modifier,
+    swipeableState: SwipeableState<TopSheetValue> = rememberSwipeableState(TopSheetValue.HalfExpanded),
+    customHalfHeight: Float? = null,
+    lockSwipeable: MutableState<Boolean>,
+    sheetContentHalfExpand: @Composable () -> Unit,
+    sheetContentExpand: @Composable () -> Unit,
+) {
+    val localDensity = LocalDensity.current
+    val coroutineScope = rememberCoroutineScope()
+
+    var lock by remember { mutableStateOf(false) }
+    var scroll by remember { mutableStateOf(false) }
+
+    val navigationBarHeight = WindowInsets.systemBars
+        .asPaddingValues()
+        .calculateBottomPadding()
+        .coerceAtLeast(16.dp)
+
+    BoxWithConstraints(
+        modifier = modifier,
+        contentAlignment = Alignment.TopCenter,
+    ) {
+        val fullHeight = constraints.maxHeight.toFloat()
+        val halfHeight = customHalfHeight ?: (fullHeight / 2)
+        val expandHeight =
+            with(localDensity) { (fullHeight - navigationBarHeight.toPx() - 16.dp.toPx()) }
+        val currOffset = swipeableState.offset.value
+        val maxOffset = (-(expandHeight - halfHeight)).coerceAtMost(0f)
+
+        val prevHalfHeight = remember { mutableStateOf(halfHeight) }
+        val isLockProgress = remember(swipeableState.isAnimationRunning) {
+            mutableStateOf(prevHalfHeight.value != halfHeight && swipeableState.isAnimationRunning)
+        }
+
+        val progress = if (isLockProgress.value) {
+            if (swipeableState.currentValue === TopSheetValue.HalfExpanded) 0f else 1f
+        } else {
+            (1f - (currOffset / maxOffset)).coerceIn(0f, 1f)
+        }
+
+        prevHalfHeight.value = halfHeight
+
+        val connection = remember {
+            object : NestedScrollConnection {
+
+                override fun onPreScroll(
+                    available: Offset,
+                    source: NestedScrollSource
+                ): Offset {
+                    val delta = available.y
+
+                    if (!scroll && !lockSwipeable.value) {
+                        lock = false
+                    }
+
+                    scroll = true
+
+                    if (lockSwipeable.value) lock = true
+
+                    return if (lock || lockSwipeable.value) {
+                        super.onPreScroll(available, source)
+                    } else {
+                        swipeableState.performDrag(delta).toOffset()
+                    }
+                }
+
+                override suspend fun onPreFling(available: Velocity): Velocity {
+                    lock = lockSwipeable.value
+                    scroll = false
+
+                    return if (!lockSwipeable.value) {
+                        swipeableState.performFling(available.y)
+                        available
+                    } else {
+                        super.onPreFling(available)
+                    }
+                }
+
+                override suspend fun onPostFling(
+                    consumed: Velocity,
+                    available: Velocity
+                ): Velocity {
+                    scroll = false
+                    swipeableState.performFling(velocity = available.y)
+                    return super.onPostFling(consumed, available)
+                }
+
+                private fun Float.toOffset() = Offset(0f, this)
+            }
+        }
+
+
+        Box(Modifier.fillMaxSize()) {
+            Scrim(
+                color = ModalBottomSheetDefaults.scrimColor,
+                targetValue = (progress * 5).coerceIn(0f, 1f),
+            )
+        }
+
+        Card(
+            shape = RoundedCornerShape(bottomStart = 48.dp, bottomEnd = 48.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = colorEditor,
+                contentColor = colorOnEditor,
+            ),
+            modifier = modifier
+                .fillMaxWidth()
+                .height(with(localDensity) {
+                    (fullHeight - navigationBarHeight.toPx() - 16.dp.toPx()).toDp()
+                })
+                .nestedScroll(connection)
+                .offset {
+                    IntOffset(
+                        x = 0,
+                        y = swipeableState.offset.value
+                            .coerceIn(
+                                (-(expandHeight - halfHeight)).coerceAtMost(0f),
+                                0f,
+                            )
+                            .roundToInt(),
+                    )
+                }
+                .swipeable(
+                    state = swipeableState,
+                    orientation = Orientation.Vertical,
+                    anchors = mapOf(
+                        (-(expandHeight - halfHeight)).coerceAtMost(0f) to TopSheetValue.HalfExpanded,
+                        0f to TopSheetValue.Expanded
+                    ),
+                )
+
+        ) {
+            Box(modifier = modifier.fillMaxSize()) {
+                if (progress != 0f) {
+                    Box(
+                        Modifier
+                            .fillMaxSize()
+                            .alpha(max(progress * 2f - 1f, 0f))
+                    ) {
+                        sheetContentExpand()
+                    }
+                }
+
+                if (progress != 1f) {
+                    Column(
+                        Modifier
+                            .fillMaxSize()
+                            .alpha(max(1f - progress * 2, 0f)),
+                    ) {
+                        Box(
+                            Modifier
+                                .fillMaxWidth()
+                                .weight(1F)
+                                .background(colorEditor)
+                        )
+                        sheetContentHalfExpand()
+                    }
+                }
+
+                Box(
+                    Modifier
+                        .background(
+                            brush = Brush.verticalGradient(
+                                colors = listOf(
+                                    colorEditor.copy(alpha = 0f),
+                                    colorEditor.copy(
+                                        alpha = progress
+                                            .roundToInt()
+                                            .toFloat()
+                                    ),
+                                ),
+                                startY = 20f,
+                                endY = 80f,
+                            )
+                        )
+                        .pointerInteropFilter {
+                            when (it.action) {
+                                MotionEvent.ACTION_DOWN -> {
+                                    if (swipeableState.currentValue === TopSheetValue.Expanded) {
+                                        lock = false
+
+                                        true
+                                    } else {
+                                        false
+                                    }
+                                }
+                                else -> false
+                            }
+                        }
+                        .padding(bottom = 10.dp, top = 32.dp)
+                        .fillMaxWidth()
+                        .align(Alignment.BottomCenter)
+                ) {
+                    Box(
+                        Modifier
+                            .height(4.dp)
+                            .width(30.dp)
+                            .background(
+                                color = MaterialTheme.colorScheme.onPrimaryContainer
+                                    .copy(alpha = 0.3f),
+                                shape = CircleShape
+                            )
+                            .align(Alignment.Center)
+                    )
+                }
+            }
+        }
+    }
+
+    BackHandler(swipeableState.currentValue === TopSheetValue.Expanded) {
+        coroutineScope.launch {
+            swipeableState.animateTo(TopSheetValue.HalfExpanded)
+        }
+    }
+}
+
+@Composable
+fun Scrim(
+    color: Color,
+    targetValue: Float
+) {
+    if (color.isSpecified) {
+
+        Canvas(
+            Modifier.fillMaxSize()
+        ) {
+            drawRect(color = color, alpha = targetValue)
+        }
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillConfirm.kt b/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillConfirm.kt
index 2ef37be..b07af8f 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillConfirm.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillConfirm.kt
@@ -2,26 +2,35 @@ package com.dev.chacha.presentation.baybill.components
 
 import android.util.Log
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.R
+import com.dev.chacha.presentation.common.components.AppToolbar
+import com.dev.chacha.presentation.extensions.formatDateTime
 import com.dev.chacha.presentation.paybill.PayBill
 import timber.log.Timber
 import java.text.SimpleDateFormat
@@ -37,133 +46,138 @@ fun BillConfirmationScreen(
     val dateTimeFormat = SimpleDateFormat("MMM dd yyyy, h:mm a", Locale.getDefault())
     val currentDateTime = dateTimeFormat.format(Date())
 
-    Column(
-        modifier = Modifier.fillMaxSize()
-            .padding(horizontal = 16.dp, vertical = 16.dp)
-    ) {
-        Card(
+    Scaffold(
+        topBar = {
+            AppToolbar(
+                title = "Pay Bill",
+                navigateBack = {}
+            )
+
+        }
+    ) { paddingValues ->
+        Column(
             modifier = Modifier
-                .fillMaxWidth()
-                .wrapContentHeight()
+                .fillMaxSize()
+                .padding(paddingValues)
+                .padding(horizontal = 16.dp, vertical = 16.dp)
         ) {
-            Column(
+            Card(
                 modifier = Modifier
                     .fillMaxWidth()
-                    .padding(start = 12.dp, end = 12.dp, top = 16.dp, bottom = 10.dp)
+                    .wrapContentHeight()
             ) {
-
                 Column(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(start = 12.dp, end = 12.dp, top = 16.dp, bottom = 10.dp),
+                    horizontalAlignment = Alignment.CenterHorizontally
                 ) {
+                    Box(
+                        modifier = Modifier.size(40.dp)){
+                        Icon(
+                            painter = painterResource(id = R.drawable.ic_home),
+                            contentDescription = "show error / success icon depending"
+                        )
+                    }
+                    Text(text = "Message Show or Success")
 
-
-                    Row(
+                    Column(
                         modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.SpaceBetween
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.Center
                     ) {
-
-                        Column(
-                            horizontalAlignment = Alignment.Start,
-                            verticalArrangement = Arrangement.Center,
-                            modifier = Modifier.width(100.dp)
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalArrangement = Arrangement.SpaceBetween
                         ) {
-
-                            Text(
-                                text = "Pay to:",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-
-                            Text(
-                                text = "Business No",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-
-                            Text(
-                                text = "Account No",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-
-                            Text(
-                                text = "Amount",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-
-                            Text(
-                                text = "Date/Time",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
+                            Column(
+                                horizontalAlignment = Alignment.Start,
+                                verticalArrangement = Arrangement.Center,
+                                modifier = Modifier.width(100.dp)
+                            ) {
+
+                                Text(
+                                    text = "Pay to:",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = "Business No",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = "Account No",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+
+                                Text(
+                                    text = "Amount",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+
+                                Text(
+                                    text = "Date/Time",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                            }
+                            Spacer(modifier = Modifier.weight(1f))
+                            Column(
+                                horizontalAlignment = Alignment.End,
+                                verticalArrangement = Arrangement.Center
+                            ) {
+                                Text(
+                                    text = payBill.name,
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = payBill.businessNumber.toString(),
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = payBill.accountNumber.toString(),
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = payBill.amount.toString(),
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = currentDateTime.toString(),
+                                    maxLines = 5,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+
+                            }
                         }
-                        Spacer(modifier = Modifier.weight(1f))
-                        Column(
-                            horizontalAlignment = Alignment.End,
-                            verticalArrangement = Arrangement.Center
+
+                        Button(
+                            onClick = { /*TODO*/ },
+                            modifier = Modifier.fillMaxWidth()
                         ) {
-                            Text(
-                                text = payBill.name,
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = payBill.businessNumber.toString(),
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = payBill.accountNumber.toString(),
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = payBill.amount.toString(),
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = currentDateTime.toString(),
-                                maxLines = 5,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            val payDate = payBill.date.toString()
-
-                            Text(
-                                text = payBill.date.toString(),
-                                maxLines = 5,
-                                overflow = TextOverflow.Ellipsis
-                            )
+                            Text(text = "Done")
                         }
                     }
 
-                    Button(
-                        onClick = { /*TODO*/ },
-                        modifier = Modifier.fillMaxWidth()
-                    ) {
-                        Text(text = "Done")
-                    }
                 }
 
-
-
-
             }
 
         }
 
     }
-
-
-
 }
 
 @Composable
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillDialog.kt b/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillDialog.kt
index cd4fa8a..1e1de60 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillDialog.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/BillDialog.kt
@@ -1,13 +1,11 @@
 package com.dev.chacha.presentation.baybill.components
 
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.ContentAlpha
@@ -24,7 +22,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.DialogProperties
-import androidx.navigation.compose.rememberNavController
 import com.dev.chacha.presentation.R
 import com.dev.chacha.presentation.common.theme.PrimaryColor
 import com.dev.chacha.presentation.paybill.PayBill
@@ -35,122 +32,116 @@ fun BillDialog(
     onClickSend: (PayBill) -> Unit,
     payBill: PayBill
 ) {
-    Box(
-        modifier = Modifier.fillMaxWidth().padding(12.dp),
-        contentAlignment = Alignment.Center
-    ){
-        AlertDialog(
-            containerColor = MaterialTheme.colorScheme.background,
-            onDismissRequest = { onDismiss() },
-            shape = RoundedCornerShape(5.dp),
-            properties = DialogProperties(
-                usePlatformDefaultWidth = false
-            ),
-            title = {},
-            text = {
+
+    AlertDialog(
+        containerColor = MaterialTheme.colorScheme.background,
+        onDismissRequest = { onDismiss() },
+        shape = RoundedCornerShape(5.dp),
+        properties = DialogProperties(
+            usePlatformDefaultWidth = true
+        ),
+        title = {},
+        text = {
+            Column(
+                modifier = Modifier.fillMaxWidth(),
+                verticalArrangement = Arrangement.Center
+            ) {
                 Column(
                     modifier = Modifier.fillMaxWidth(),
                     verticalArrangement = Arrangement.Center
                 ) {
-                    Column(
-                        modifier = Modifier.fillMaxWidth(),
-                        verticalArrangement = Arrangement.Center
-                    ) {
-                        Text(
-                            text = "Pay to",
-                            style = MaterialTheme.typography.labelMedium,
-                            color = PrimaryColor
-                        )
-                        Text(
-                            text = payBill.name,
-                            style = MaterialTheme.typography.labelMedium,
-                            fontWeight = FontWeight.Bold
-                        )
-                        Spacer(modifier = Modifier.height(10.dp))
-
-                        Text(
-                            text = "Paybill No",
-                            style = MaterialTheme.typography.labelMedium,
-                            color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
-                        )
-                        Text(
-                            text = payBill.businessNumber,
-                            style = MaterialTheme.typography.labelMedium,
-                            fontWeight = FontWeight.Bold
-
-                        )
-                        Spacer(modifier = Modifier.height(10.dp))
-
-                        Text(
-                            text = "Account Number",
-                            style = MaterialTheme.typography.labelMedium,
-                            color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
-
-                        )
-                        Text(
-                            text = payBill.accountNumber.toString(),
-                            style = MaterialTheme.typography.labelMedium,
-                            fontWeight = FontWeight.Bold
-
-                        )
-                        Spacer(modifier = Modifier.height(10.dp))
+                    Text(
+                        text = "Pay to",
+                        style = MaterialTheme.typography.labelMedium,
+                        color = PrimaryColor
+                    )
+                    Text(
+                        text = payBill.name,
+                        style = MaterialTheme.typography.labelMedium,
+                        fontWeight = FontWeight.Bold
+                    )
+                    Spacer(modifier = Modifier.height(10.dp))
+
+                    Text(
+                        text = "Paybill No",
+                        style = MaterialTheme.typography.labelMedium,
+                        color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
+                    )
+                    Text(
+                        text = payBill.businessNumber,
+                        style = MaterialTheme.typography.labelMedium,
+                        fontWeight = FontWeight.Bold
+
+                    )
+                    Spacer(modifier = Modifier.height(10.dp))
+
+                    Text(
+                        text = "Account Number",
+                        style = MaterialTheme.typography.labelMedium,
+                        color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
+
+                    )
+                    Text(
+                        text = payBill.accountNumber.toString(),
+                        style = MaterialTheme.typography.labelMedium,
+                        fontWeight = FontWeight.Bold
+
+                    )
+                    Spacer(modifier = Modifier.height(10.dp))
+
+                    Text(
+                        text = "Amount",
+                        style = MaterialTheme.typography.labelMedium,
+                        color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
+
+                    )
+                    Text(
+                        text = "Ksh${payBill.amount}",
+                        style = MaterialTheme.typography.labelMedium,
+                        fontWeight = FontWeight.Bold
+
+                    )
 
-                        Text(
-                            text = "Amount",
-                            style = MaterialTheme.typography.labelMedium,
-                            color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
+                }
 
-                        )
-                        Text(
-                            text = "Ksh${payBill.amount}",
-                            style = MaterialTheme.typography.labelMedium,
-                            fontWeight = FontWeight.Bold
+                Spacer(modifier = Modifier.height(16.dp))
 
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    verticalAlignment = Alignment.CenterVertically,
+                ) {
+                    Button(
+                        onClick = { onDismiss() },
+                        modifier = Modifier.width(120.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            containerColor = LocalContentColor.current.copy(alpha = ContentAlpha.medium),
+                            contentColor = MaterialTheme.colorScheme.onBackground
                         )
+                    ) {
+                        Text(text = "CANCEL")
 
                     }
-
-                    Spacer(modifier = Modifier.height(16.dp))
-
-                    Row(
-                        modifier = Modifier.fillMaxWidth(),
-                        verticalAlignment = Alignment.CenterVertically,
+                    Spacer(modifier = Modifier.weight(1f))
+                    Button(
+                        onClick = {
+                            onClickSend(payBill)
+                        },
+                        modifier = Modifier.width(120.dp),
+                        colors = ButtonDefaults.buttonColors(
+                            containerColor = PrimaryColor,
+                            contentColor = MaterialTheme.colorScheme.onBackground
+                        )
                     ) {
-                        Button(
-                            onClick = { onDismiss() },
-                            modifier = Modifier.width(120.dp),
-                            colors = ButtonDefaults.buttonColors(
-                                containerColor = LocalContentColor.current.copy(alpha = ContentAlpha.medium),
-                                contentColor = MaterialTheme.colorScheme.onBackground
-                            )
-                        ) {
-                            Text(text = "CANCEL")
-
-                        }
-                        Spacer(modifier = Modifier.weight(1f))
-                        Button(
-                            onClick = {
-                                onClickSend(payBill)
-                            },
-                            modifier = Modifier.width(120.dp),
-                            colors = ButtonDefaults.buttonColors(
-                                containerColor = PrimaryColor,
-                                contentColor = MaterialTheme.colorScheme.onBackground
-                            )
-                        ) {
-                            Text(text = "PAY")
-                        }
+                        Text(text = "PAY")
                     }
-
                 }
-            },
-            confirmButton = {},
-            modifier = Modifier.fillMaxWidth()
-
-        )
 
-    }
+            }
+        },
+        confirmButton = {},
+        modifier = Modifier.fillMaxWidth()
 
+    )
 
 }
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/PayBillConfirmScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/PayBillConfirmScreen.kt
index f3f5480..9897981 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/PayBillConfirmScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/baybill/components/PayBillConfirmScreen.kt
@@ -1,22 +1,30 @@
 package com.dev.chacha.presentation.baybill.components
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
+import com.dev.chacha.presentation.R
 import com.dev.chacha.presentation.common.navigation.HomeAction
 import timber.log.Timber
 import java.text.SimpleDateFormat
@@ -33,37 +41,52 @@ fun BillConfirm(
     date: String
 
 ) {
-    Card(
+    val dateTimeFormat = SimpleDateFormat("MMM dd yyyy, h:mm a", Locale.getDefault())
+    val currentDateTime = dateTimeFormat.format(Date())
+    ConstraintLayout(
         modifier = Modifier
-            .fillMaxWidth()
-            .wrapContentHeight()
+            .fillMaxSize()
+            .padding(horizontal = 16.dp, vertical = 16.dp)
     ) {
-        Column(
+        val (card, button) = createRefs()
+
+        Card(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(start = 12.dp, end = 12.dp, top = 16.dp, bottom = 10.dp)
+                .wrapContentHeight()
+                .constrainAs(card) {
+                    top.linkTo(parent.top)
+                    start.linkTo(parent.start)
+                    end.linkTo(parent.end)
+                }
         ) {
-
             Column(
-                modifier = Modifier.fillMaxWidth(),
-                horizontalAlignment = Alignment.CenterHorizontally,
-                verticalArrangement = Arrangement.Center
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(start = 12.dp, end = 12.dp, top = 16.dp, bottom = 10.dp),
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
+                Box(modifier = Modifier.size(46.dp)) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.ic_home),
+                        contentDescription = "show error / success icon depending"
+                    )
+                }
+                Text(text = "Message Show or Success")
 
-                val dateTimeFormat = SimpleDateFormat("MMM dd yyyy, h:mm a", Locale.getDefault())
-                val currentDateTime = dateTimeFormat.format(Date())
-
-                Row(
+                ConstraintLayout(
                     modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween
                 ) {
+                    val (payToColumn, infoColumn) = createRefs()
 
                     Column(
+                        modifier = Modifier.constrainAs(payToColumn) {
+                            top.linkTo(parent.top)
+                            start.linkTo(parent.start)
+                        },
                         horizontalAlignment = Alignment.Start,
                         verticalArrangement = Arrangement.Center,
-                        modifier = Modifier.width(100.dp)
                     ) {
-
                         Text(
                             text = "Pay to:",
                             maxLines = 1,
@@ -99,28 +122,34 @@ fun BillConfirm(
                             overflow = TextOverflow.Ellipsis
                         )
                     }
-                    Spacer(modifier = Modifier.weight(1f))
+
                     Column(
                         horizontalAlignment = Alignment.End,
-                        verticalArrangement = Arrangement.Center
+                        verticalArrangement = Arrangement.Center,
+                        modifier = Modifier
+                            .constrainAs(infoColumn) {
+                                top.linkTo(parent.top)
+                                start.linkTo(payToColumn.end, margin = 8.dp)
+                                end.linkTo(button.start, margin = 8.dp)
+                            }
                     ) {
                         Text(
-                            text = accountName,
+                            text = payBill.name,
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis
                         )
                         Text(
-                            text = businessNumber.toString(),
+                            text = payBill.businessNumber.toString(),
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis
                         )
                         Text(
-                            text = accountNumber.toString(),
+                            text = payBill.accountNumber.toString(),
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis
                         )
                         Text(
-                            text = amount.toString(),
+                            text = payBill.amount.toString(),
                             maxLines = 1,
                             overflow = TextOverflow.Ellipsis
                         )
@@ -129,31 +158,32 @@ fun BillConfirm(
                             maxLines = 5,
                             overflow = TextOverflow.Ellipsis
                         )
-                        Text(
-                            text = date.toString(),
-                            maxLines = 5,
-                            overflow = TextOverflow.Ellipsis
-                        )
                     }
 
-                }
-
-                Button(
-                    onClick = { /*TODO*/ },
-                    modifier = Modifier.fillMaxWidth()
-                ) {
-                    Text(text = "Done")
+                    Button(
+                        onClick = { /*TODO*/ },
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .constrainAs(button) {
+                                bottom.linkTo(parent.bottom)
+                                start.linkTo(parent.start)
+                                end.linkTo(parent.end)
+                            }
+                    ) {
+                        Text(text = "Done")
+                    }
                 }
             }
-
         }
-
     }
-
 }
 
 
+
+
+
 @Composable
+@Preview
 fun PayBillConfirmScreen() {
     Column {
         payBill.apply {
@@ -162,8 +192,8 @@ fun PayBillConfirmScreen() {
                     accountName = name,
                     accountNumber = payBill.accountNumber.toString(),
                     amount = payBill.amount!!.toDouble(),
-                    date = "",
-                    businessNumber = payBill.businessNumber.toString()
+                    date = "nnnnn",
+                    businessNumber = payBill.businessNumber
                 )
             }
         }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BayAirtime.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BayAirtime.kt
index d8c1891..bf67ac3 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BayAirtime.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BayAirtime.kt
@@ -1,6 +1,10 @@
 package com.dev.chacha.presentation.buy_artime
 
+import java.util.Date
+
 data class BayAirtime(
     val phoneNumber: String,
     val amount: String,
+    val date: String,
+    val time: String
 )
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeScreen.kt
index 98941f7..acbc83f 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeScreen.kt
@@ -73,15 +73,20 @@ fun BuyAirtimeScreen(
     navigateBack: () -> Unit
 ) {
     val buyAirtimeViewModel: BuyAirtimeViewModel = viewModel()
+    val buyAirtimeState by buyAirtimeViewModel.buyAirtimeState.collectAsState()
+    val viewModel = viewModel<ContactListViewModel>()
     val coroutineScope = rememberCoroutineScope()
+
+
     var targetRadio by rememberSaveable { mutableStateOf(buyAirtimeViewModel.targetRadio) }
     var selectedAccount by rememberSaveable { mutableStateOf(AccountType.AccountA) }
-    val buyAirtimeState by buyAirtimeViewModel.buyAirtimeState.collectAsState()
-    val viewModel = viewModel<ContactListViewModel>()
+
     val context = LocalContext.current
     val sheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)
-    val navController = rememberNavController()
     val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState)
+
+    val navController = rememberNavController()
+
     var textfieldSize by remember { mutableStateOf(Size.Zero) }
     var expanded by remember { mutableStateOf(false) }
 
@@ -94,9 +99,7 @@ fun BuyAirtimeScreen(
                         buyAirtimeViewModel.handleBuyAirtimeEvent(BuyAirtimeEvent.PhoneNumberChanged(contact.phoneNumber))
                         sheetState.collapse()
                     }
-
                 }, navController = navController,
-                viewModel = viewModel
             )
         },
         sheetPeekHeight = 0.dp,
@@ -190,7 +193,7 @@ fun BuyAirtimeScreen(
                             )
                         },
                         maxLength = 5,
-                        keyboardType = KeyboardType.Phone,
+                        keyboardType = KeyboardType.Number,
                         hint = stringResource(id = R.string.amount),
                         supportText = stringResource(id = R.string.amount_support_text),
                         modifier = Modifier
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeViewModel.kt
index db76978..ba1bd36 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeViewModel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuyAirtimeViewModel.kt
@@ -8,7 +8,6 @@ import kotlinx.coroutines.flow.update
 class BuyAirtimeViewModel : ViewModel(){
 
     val buyAirtimeState = MutableStateFlow(BuyAirtimeState())
-
     private val _targetRadio = MutableStateFlow("myself")
     var targetRadio =_targetRadio.asStateFlow().value
 
@@ -16,7 +15,6 @@ class BuyAirtimeViewModel : ViewModel(){
         validateInput()
     }
 
-
     fun handleBuyAirtimeEvent(buyAirtimeEvent: BuyAirtimeEvent) {
         when(buyAirtimeEvent){
             is BuyAirtimeEvent.AmountChanged -> {
@@ -35,8 +33,6 @@ class BuyAirtimeViewModel : ViewModel(){
         }
     }
 
-
-
     private fun validateInput() {
         val amount = buyAirtimeState.value.amount
         val phoneNumber = buyAirtimeState.value.phoneNumber
@@ -57,6 +53,4 @@ class BuyAirtimeViewModel : ViewModel(){
     }
 
 
-
-
 }
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuysAitimeScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuysAitimeScreen.kt
index c5e00bf..e2f28b4 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuysAitimeScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/BuysAitimeScreen.kt
@@ -133,7 +133,7 @@ fun BuyAirtimeContentScreen(
                     }
 
                 }, navController = navController,
-                viewModel = contactViewModel
+//       contactViewModel = ContactListViewModel()
             )
         },
         sheetPeekHeight = 0.dp,
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Artel.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Artel.kt
index 52fbbbf..c94f51a 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Artel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Artel.kt
@@ -75,7 +75,7 @@ fun Artel() {
                         modalBottomSheetState.hide()
                     }
                 }, navController = navController,
-                viewModel = ContactListViewModel()
+//                viewModel = ContactListViewModel()
             )
         }
     ) {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeDialog.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeDialog.kt
index c4d6604..ea4898c 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeDialog.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeDialog.kt
@@ -20,14 +20,15 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.buy_artime.BayAirtime
 import com.dev.chacha.presentation.common.theme.PrimaryColor
 import com.dev.chacha.presentation.paybill.PayBill
 
 @Composable
 fun BuyAirtimeDialog(
     onDismiss: () -> Unit,
-    onClickSend: (PayBill) -> Unit,
-    payBill: PayBill,
+    onClickSend: (BayAirtime) -> Unit,
+    bayAirtime: BayAirtime
 ) {
     AlertDialog(
         containerColor = MaterialTheme.colorScheme.background,
@@ -52,7 +53,7 @@ fun BuyAirtimeDialog(
                         color = PrimaryColor
                     )
                     Text(
-                        text = payBill.name,
+                        text = bayAirtime.phoneNumber,
                         style = MaterialTheme.typography.labelMedium,
                         fontWeight = FontWeight.Bold
                     )
@@ -63,7 +64,7 @@ fun BuyAirtimeDialog(
                         color = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
                     )
                     Text(
-                        text = payBill.businessNumber,
+                        text = bayAirtime.amount,
                         style = MaterialTheme.typography.labelMedium,
                         fontWeight = FontWeight.Bold
 
@@ -77,7 +78,7 @@ fun BuyAirtimeDialog(
 
                     )
                     Text(
-                        text = "${payBill.accountNumber}",
+                        text = bayAirtime.date,
                         style = MaterialTheme.typography.labelMedium,
                         fontWeight = FontWeight.Bold
 
@@ -91,7 +92,7 @@ fun BuyAirtimeDialog(
 
                     )
                     Text(
-                        text = "Ksh${payBill.amount}",
+                        text = "Ksh${bayAirtime.amount}",
                         style = MaterialTheme.typography.labelMedium,
                         fontWeight = FontWeight.Bold
 
@@ -119,7 +120,7 @@ fun BuyAirtimeDialog(
                     Spacer(modifier = Modifier.weight(1f))
                     Button(
                         onClick = {
-                            onClickSend(payBill)
+                            onClickSend(bayAirtime)
                         },
                         modifier = Modifier.width(120.dp),
                         colors = ButtonDefaults.buttonColors(
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeScreenTabs.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeScreenTabs.kt
index 35bda33..6422a2c 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeScreenTabs.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyAirtimeScreenTabs.kt
@@ -63,7 +63,7 @@ fun BuyAirtimeTabScreens() {
                         modalBottomSheetState.hide()
                     }
                 }, navController = navController,
-                viewModel = ContactListViewModel()
+//       contactViewModel = ContactListViewModel()
             )
 
         }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyArtimeScreenContent.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyArtimeScreenContent.kt
index 6a8216f..428b4cf 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyArtimeScreenContent.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/BuyArtimeScreenContent.kt
@@ -71,7 +71,7 @@ fun BuyAirtimeScreeContent() {
                         modalBottomSheetState.hide()
                     }
                 }, navController = navController,
-                viewModel = ContactListViewModel()
+//       contactViewModel = ContactListViewModel()
             )
         },
     ) {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Safaricom.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Safaricom.kt
index d9418dc..e34d8dc 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Safaricom.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Safaricom.kt
@@ -57,7 +57,7 @@ fun Safaricom() {
                         modalBottomSheetState.hide()
                     }
                 } , navController = navController,
-                viewModel = ContactListViewModel()
+//       contactViewModel = ContactListViewModel()
             )
         }
     ) {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Telkom.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Telkom.kt
index db2aa3f..166427f 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Telkom.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_artime/component/Telkom.kt
@@ -78,7 +78,7 @@ fun Telkom() {
                         sheetState.collapse()
                     }
                 }, navController = navController,
-                viewModel = ContactListViewModel()
+//       contactViewModel = ContactListViewModel()
             )
         },
         sheetPeekHeight = 0.dp,
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsScreen.kt
index 71df0d4..9fe268d 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsScreen.kt
@@ -67,6 +67,7 @@ import androidx.navigation.NavController
 import androidx.navigation.compose.rememberNavController
 import com.dev.chacha.presentation.R
 import com.dev.chacha.presentation.buy_goods.components.BuyGoodsDialog
+import com.dev.chacha.presentation.buy_goods.components.TillNumberDropDown
 import com.dev.chacha.presentation.common.components.ContinueButton
 import com.dev.chacha.presentation.common.components.RideOutlinedTextField
 import com.dev.chacha.presentation.common.navigation.HomeAction
@@ -105,15 +106,9 @@ fun BuyGoodsScreen(
     viewModel: BuyGoodsViewModel = viewModel(),
     navController: NavController,
     sheetState: BottomSheetState,
-
     ) {
 
-    val buyGoods = getTillNumber()
     val state by viewModel.state.collectAsState()
-    var textfieldSize by remember { mutableStateOf(Size.Zero) }
-    var expanded by remember { mutableStateOf(false) }
-    val icon = if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown
-    val scope = rememberCoroutineScope()
     val currentPage by viewModel.settledPage.collectAsState()
     val focusRequester = remember { FocusRequester() }
 
@@ -123,13 +118,11 @@ fun BuyGoodsScreen(
         }
     }
 
-
-
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(start = 16.dp, end = 16.dp, top = 20.dp),
-        verticalArrangement = Arrangement.Top,
+            .padding(horizontal = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(10.dp),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
 
@@ -158,96 +151,25 @@ fun BuyGoodsScreen(
             )
         }
 
-        Column(modifier = Modifier.fillMaxWidth()) {
-            RideOutlinedTextField(
-                value = state.tillNumber,
-                onValueChange = { viewModel.onTillNumberChanged(it) },
-                hint = stringResource(id = R.string.tillNumber),
-                keyboardType = KeyboardType.Phone,
-                trailingIcon = {
-                    Icon(
-                        icon,
-                        "contentDescription",
-                        Modifier.clickable { expanded = !expanded }
-                    )
-                },
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .focusRequester(focusRequester)
-                    .onGloballyPositioned { coordinates ->
-                        textfieldSize = coordinates.size.toSize()
-                    },
-                supportText = state.tillName,
-                error = if ( state.tillNumber.isEmpty() ) "Enter PhoneNumber" else "",
-                isError =  state.tillNumber.isEmpty()
-            )
-
-            Button(onClick = {
-                scope.launch {
-                    if (sheetState.isCollapsed) {
-                        sheetState.expand()
-                    } else {
-                        sheetState.collapse()
-                    }
-                }
-            }) {
-                Text(text = "BottomSheet")
-
-            }
-
-            DropdownMenu(
-                expanded = expanded,
-                onDismissRequest = { expanded = false },
-                modifier = Modifier
-                    .width(with(LocalDensity.current) { textfieldSize.width.toDp() }),
-            ) {
-                buyGoods.forEach { item ->
-                    DropdownMenuItem(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(8.dp)
-                            .align(Alignment.CenterHorizontally),
-                        text = { Text(text = item.tillName) },
-                        onClick = {
-                            viewModel.onTillNumberChanged(item.tillNumber)
-                            item.tillName.let { viewModel.onTillNameChanged(it) }
-                            expanded = false
-                        },
-                        leadingIcon = {
-                            val buyGoodsInitials = item.tillName
-                            Box(
-                                modifier = Modifier
-                                    .size(40.dp)
-                                    .clip(CircleShape),
-                                contentAlignment = Alignment.Center
-                            ) {
-                                Text(
-                                    text = getInitials(buyGoodsInitials),
-                                    fontWeight = FontWeight.Normal,
-                                    textAlign = TextAlign.Center,
-                                    fontSize = 26.sp
-                                )
-
-                            }
-
-                        }
-                    )
-                }
-
-            }
-
-        }
-        Spacer(modifier = Modifier.height(5.dp))
+        TillNumberDropDown(
+            state = state,
+            onTillNumberChanged = {
+                viewModel.onTillNumberChanged(it)
+            },
+            onTillNameChanged = {
+                viewModel.onTillNameChanged(it)
+            },
+        )
 
         RideOutlinedTextField(
             value = state.amount,
             onValueChange = { viewModel.onAmountChanged(it) },
-            keyboardType = KeyboardType.Phone,
             hint = stringResource(id = R.string.amount),
-            maxLength = 6
-        )
+            maxLength = 7,
+            keyboardType = KeyboardType.Number,
+            )
 
-        Spacer(modifier = Modifier.height(24.dp))
+        Spacer(modifier = Modifier.height(12.dp))
 
         ContinueButton(
             text = stringResource(id = R.string.continuee),
@@ -256,7 +178,6 @@ fun BuyGoodsScreen(
             },
             enable = viewModel.isInputValid()
         )
-
     }
 }
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsViewModel.kt
index 2eebd8a..1c6dc4e 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsViewModel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/BuyGoodsViewModel.kt
@@ -39,7 +39,7 @@ class BuyGoodsViewModel : ViewModel() {
 
         val isValidTillNumber = tillNumber.isNotEmpty() && tillNumber.length > 5
         val isValidAmount =
-            amount.isNotEmpty() && amount.toDouble() > 0 && amount.toDouble() < 300000
+            amount.isNotEmpty() && amount.toDouble() > 0
 
         return isValidTillNumber && isValidAmount
     }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/BuyGoodsConfirm.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/BuyGoodsConfirm.kt
index 193c65c..cfb64ce 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/BuyGoodsConfirm.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/BuyGoodsConfirm.kt
@@ -12,114 +12,134 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
 import androidx.compose.material3.Icon
+import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.dev.chacha.presentation.buy_goods.BuyGoods
+import com.dev.chacha.presentation.common.components.AppToolbar
+
+@Composable
+fun BuyGoodsTopBar(title: String, icon: Painter, onIconClick: () -> Unit) {
+
+
+}
 
 @Composable
 fun BuyGoodsConfirms(buyGoods: BuyGoods) {
-    Column(
-        modifier = Modifier.fillMaxSize()
-            .padding(horizontal = 16.dp, vertical = 16.dp)
-    ) {
-        Card(
-            modifier = Modifier.fillMaxWidth()
+    Scaffold(
+        topBar = {
+            AppToolbar(
+                title = "Confirm Payment",
+                navigateBack = {}
+            )
+        },
+
+        ) { paddingValues ->
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(paddingValues)
+                .padding(horizontal = 16.dp, vertical = 16.dp)
         ) {
-            Column(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(start = 12.dp, end = 12.dp, top = 16.dp, bottom = 10.dp)
+            Card(
+                modifier = Modifier.fillMaxWidth()
             ) {
                 Column(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Center
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(start = 12.dp, end = 12.dp, top = 16.dp, bottom = 10.dp)
                 ) {
-
-                    Row(
+                    Column(
                         modifier = Modifier.fillMaxWidth(),
-                        horizontalArrangement = Arrangement.SpaceBetween
+                        horizontalAlignment = Alignment.CenterHorizontally,
+                        verticalArrangement = Arrangement.Center
                     ) {
-                        Column(
-                            horizontalAlignment = Alignment.Start,
-                            verticalArrangement = Arrangement.Center,
-                            modifier = Modifier.width(100.dp)
-                        ) {
-                            Text(
-                                text = "Pay to:",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = "Till No",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = "Amount",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = "Date/Time",
-                                maxLines = 1,
-                                textAlign = TextAlign.Start,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                        }
-                        Spacer(modifier = Modifier.weight(1f))
-                        Column(
-                            horizontalAlignment = Alignment.End,
-                            verticalArrangement = Arrangement.Center
+
+                        Row(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalArrangement = Arrangement.SpaceBetween
                         ) {
-                            Text(
-                                text = buyGoods.tillName,
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
+                            Column(
+                                horizontalAlignment = Alignment.Start,
+                                verticalArrangement = Arrangement.Center,
+                                modifier = Modifier.width(100.dp)
+                            ) {
+                                Text(
+                                    text = "Pay to:",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = "Till No",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = "Amount",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = "Date/Time",
+                                    maxLines = 1,
+                                    textAlign = TextAlign.Start,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                            }
+                            Spacer(modifier = Modifier.weight(1f))
+                            Column(
+                                horizontalAlignment = Alignment.End,
+                                verticalArrangement = Arrangement.Center
+                            ) {
+                                Text(
+                                    text = buyGoods.tillName,
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+
+                                Text(
+                                    text = buyGoods.tillNumber,
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = buyGoods.amount.toString(),
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                                Text(
+                                    text = buyGoods.date.toString(),
+                                    maxLines = 1,
+                                    overflow = TextOverflow.Ellipsis
+                                )
+                            }
 
-                            Text(
-                                text = buyGoods.tillNumber,
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = buyGoods.amount.toString(),
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
-                            Text(
-                                text = buyGoods.date.toString(),
-                                maxLines = 1,
-                                overflow = TextOverflow.Ellipsis
-                            )
                         }
 
+                        Button(
+                            onClick = { /*TODO*/ },
+                            modifier = Modifier.fillMaxWidth()
+                        ) {
+                            Text(text = "Deone")
+                        }
                     }
 
-                    Button(
-                        onClick = { /*TODO*/ },
-                        modifier = Modifier.fillMaxWidth()
-                    ) {
-                        Text(text = "Deone")
-                    }
-                }
 
+                }
 
             }
 
         }
 
     }
-
-
-}
\ No newline at end of file
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/TillNumberDropDown.kt b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/TillNumberDropDown.kt
new file mode 100644
index 0000000..f1c1508
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/buy_goods/components/TillNumberDropDown.kt
@@ -0,0 +1,127 @@
+package com.dev.chacha.presentation.buy_goods.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.KeyboardArrowDown
+import androidx.compose.material.icons.filled.KeyboardArrowUp
+import androidx.compose.material3.Button
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.compose.ui.unit.toSize
+import com.dev.chacha.presentation.R
+import com.dev.chacha.presentation.buy_goods.BuyGoodsEvent
+import com.dev.chacha.presentation.buy_goods.BuyGoodsState
+import com.dev.chacha.presentation.buy_goods.getTillNumber
+import com.dev.chacha.presentation.common.components.RideOutlinedTextField
+import com.dev.chacha.presentation.extensions.getInitials
+import kotlinx.coroutines.launch
+
+@Composable
+fun TillNumberDropDown(
+    state: BuyGoodsState,
+    onTillNumberChanged: (String) -> Unit,
+    onTillNameChanged: (String) -> Unit
+) {
+    val buyGoods = getTillNumber()
+    var textfieldSize by remember { mutableStateOf(Size.Zero) }
+    var expanded by remember { mutableStateOf(false) }
+    val icon = if (expanded) Icons.Filled.KeyboardArrowUp else Icons.Filled.KeyboardArrowDown
+    val focusRequester = remember { FocusRequester() }
+
+    Column(modifier = Modifier.fillMaxWidth()) {
+        RideOutlinedTextField(
+            value = state.tillNumber,
+            onValueChange = { onTillNumberChanged(it) },
+            hint = stringResource(id = R.string.tillNumber),
+            keyboardType = KeyboardType.Phone,
+            trailingIcon = {
+                Icon(
+                    icon,
+                    "contentDescription",
+                    Modifier.clickable { expanded = !expanded }
+                )
+            },
+            modifier = Modifier
+                .fillMaxWidth()
+                .focusRequester(focusRequester)
+                .onGloballyPositioned { coordinates ->
+                    textfieldSize = coordinates.size.toSize()
+                },
+            supportText = state.tillName,
+            error = if ( state.tillNumber.isEmpty() ) "Enter PhoneNumber" else "",
+            isError =  state.tillNumber.isEmpty()
+        )
+        DropdownMenu(
+            expanded = expanded,
+            onDismissRequest = { expanded = false },
+            modifier = androidx.compose.ui.Modifier
+                .width(with(LocalDensity.current) { textfieldSize.width.toDp() }),
+        ) {
+            buyGoods.forEach { item ->
+                DropdownMenuItem(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(8.dp)
+                        .align(Alignment.CenterHorizontally),
+                    text = { Text(text = item.tillName) },
+                    onClick = {
+                        onTillNumberChanged(item.tillNumber)
+                        item.tillName.let { onTillNameChanged(it) }
+                        expanded = false
+                    },
+                    leadingIcon = {
+                        val buyGoodsInitials = item.tillName
+                        Box(
+                            modifier = Modifier
+                                .size(40.dp)
+                                .clip(CircleShape),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Text(
+                                text = getInitials(buyGoodsInitials),
+                                fontWeight = FontWeight.Normal,
+                                textAlign = TextAlign.Center,
+                                fontSize = 26.sp
+                            )
+
+                        }
+
+                    }
+                )
+            }
+
+        }
+
+    }
+
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/Calendar.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Calendar.kt
new file mode 100644
index 0000000..c503e4d
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Calendar.kt
@@ -0,0 +1,127 @@
+package com.dev.chacha.presentation.calendar
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import com.dev.chacha.presentation.calendar.model.CalendarState
+import com.dev.chacha.presentation.calendar.model.CalendarUiState
+import com.dev.chacha.presentation.calendar.model.Month
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import java.time.DayOfWeek
+import java.time.LocalDate
+import java.time.temporal.TemporalAdjusters
+import java.time.temporal.WeekFields
+@RequiresApi(Build.VERSION_CODES.O)
+
+@Composable
+fun Calendar(
+    calendarState: CalendarState,
+    onDayClicked: (date: LocalDate) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val calendarUiState = calendarState.calendarUiState.value
+    val dayWidth = remember { mutableStateOf(CELL_SIZE) }
+
+    val localDensity = LocalDensity.current
+
+    LazyColumn(
+        modifier = modifier
+            .onGloballyPositioned {
+                dayWidth.value = with(localDensity) { it.size.width.toDp() / 7 }
+            },
+    ) {
+        calendarState.listMonths.forEach { month ->
+            itemsCalendarMonth(calendarUiState, onDayClicked, month, dayWidth.value)
+        }
+
+        item(key = "bottomSpacer") {
+            Spacer(
+                modifier = Modifier.windowInsetsBottomHeight(
+                    WindowInsets.navigationBars
+                )
+            )
+        }
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+private fun LazyListScope.itemsCalendarMonth(
+    calendarUiState: CalendarUiState,
+    onDayClicked: (LocalDate) -> Unit,
+    month: Month,
+    dayWidth: Dp,
+) {
+    item(month.yearMonth.month.name + month.yearMonth.year + "header") {
+        MonthHeader(
+            modifier = Modifier.padding(top = 32.dp),
+            yearMonth = month.yearMonth
+        )
+    }
+
+    // Expanding width and centering horizontally
+    val contentModifier = Modifier.fillMaxWidth()
+
+    item(month.yearMonth.month.name + month.yearMonth.year + "daysOfWeek") {
+        DaysOfWeek(modifier = contentModifier)
+    }
+
+    // A custom key needs to be given to these items so that they can be found in tests that
+    // need scrolling. The format of the key is ${year/month/weekNumber}. Thus,
+    // the key for the fourth week of December 2020 is "2020/12/4"
+    itemsIndexed(month.weeks, key = { index, _ ->
+        month.yearMonth.year.toString() + "/" + month.yearMonth.month.value + "/" + (index + 1).toString()
+    }) { _, week ->
+        val beginningWeek = week.yearMonth.atDay(1).plusWeeks(week.number.toLong())
+        val currentDay = beginningWeek.with(TemporalAdjusters.previousOrSame(DayOfWeek.MONDAY))
+
+        if (calendarUiState.hasSelectedPeriodOverlap(currentDay, currentDay.plusDays(6))) {
+            WeekSelectionPill(
+                state = calendarUiState,
+                currentWeekStart = currentDay,
+                widthPerDay = dayWidth,
+                heightPerDay = CELL_SIZE,
+                week = week,
+            )
+        }
+        Week(
+            calendarUiState = calendarUiState,
+            modifier = contentModifier,
+            week = week,
+            onDayClicked = onDayClicked
+        )
+        Spacer(Modifier.height(8.dp))
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+internal val CALENDAR_STARTS_ON = WeekFields.ISO
+
+@Preview
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun DayPreview() {
+    val state = remember { mutableStateOf(CalendarState()) }
+
+        Calendar(
+            state.value,
+            onDayClicked = { state.value.setSelectedDay(it) },
+        )
+
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/Day.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Day.kt
new file mode 100644
index 0000000..0779e03
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Day.kt
@@ -0,0 +1,118 @@
+package com.dev.chacha.presentation.calendar
+
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.ripple.rememberRipple
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import com.dev.chacha.presentation.calendar.model.CalendarUiState
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import java.time.LocalDate
+
+@Composable
+internal fun DayOfWeekHeading(day: String, modifier: Modifier = Modifier) {
+    DayContainer(modifier = modifier) {
+        Text(
+            modifier = Modifier
+                .fillMaxSize()
+                .wrapContentHeight(Alignment.CenterVertically),
+            textAlign = TextAlign.Center,
+            text = day,
+            style = MaterialTheme.typography.labelSmall.copy(fontWeight = FontWeight.W700),
+            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5F),
+        )
+    }
+}
+
+@Composable
+private fun DayContainer(
+    modifier: Modifier = Modifier,
+    current: Boolean = false,
+    disabled: Boolean = false,
+    onSelect: () -> Unit = { },
+    content: @Composable () -> Unit
+) {
+    Box(
+        modifier = modifier
+            .height(CELL_SIZE)
+            .widthIn(min = CELL_SIZE)
+            .fillMaxWidth()
+            .background(Color.Transparent)
+            .clickable(
+                onClick = { onSelect() },
+                enabled = !disabled,
+                role = Role.Button,
+                interactionSource = remember { MutableInteractionSource() },
+                indication = rememberRipple(
+                    bounded = false,
+                    radius = CELL_SIZE / 2,
+                )
+            ),
+        contentAlignment = Alignment.Center
+    ) {
+        if (current) {
+            Box(
+                modifier = modifier
+                    .height(CELL_SIZE - 8.dp)
+                    .width(CELL_SIZE - 8.dp)
+                    .background(
+                        color = MaterialTheme.colorScheme.primaryContainer,
+                        shape = CircleShape,
+                    )
+            ) {
+                content()
+            }
+        } else {
+            content()
+        }
+
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+internal fun Day(
+    day: LocalDate,
+    calendarState: CalendarUiState,
+    onDayClicked: (LocalDate) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val disabled = calendarState.isBeforeCurrentDay(day)
+    val selected = calendarState.isDateInSelectedPeriod(day)
+    val current = calendarState.isCurrentDay(day)
+
+    DayContainer(
+        modifier = modifier,
+        current = current,
+        disabled = disabled,
+        onSelect = { onDayClicked(day) },
+    ) {
+
+        Text(
+            modifier = Modifier
+                .fillMaxSize()
+                .wrapContentSize(Alignment.Center),
+            text = day.dayOfMonth.toString(),
+            style = MaterialTheme.typography.bodyMedium.copy(fontWeight = FontWeight.W800),
+            color = when (true) {
+                current -> MaterialTheme.colorScheme.onPrimaryContainer
+                selected -> MaterialTheme.colorScheme.onPrimary
+                else -> MaterialTheme.colorScheme.onSurface.copy(alpha = if (disabled) 0.3F else 1F)
+            },
+        )
+    }
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/Month.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Month.kt
new file mode 100644
index 0000000..71caf90
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Month.kt
@@ -0,0 +1,37 @@
+package com.dev.chacha.presentation.calendar
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.Row
+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.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.util.prettyYearMonth
+import java.time.LocalDate
+import java.time.YearMonth
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+internal fun MonthHeader(modifier: Modifier = Modifier, yearMonth: YearMonth) {
+    Row(modifier = modifier) {
+        Text(
+            modifier = Modifier.padding(start = 24.dp).weight(1f),
+            text = prettyYearMonth(yearMonth),
+            style = MaterialTheme.typography.titleMedium
+        )
+    }
+}
+
+@Preview
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun PreviewMonthHeader() {
+        MonthHeader(
+            yearMonth = YearMonth.from(LocalDate.now().withDayOfMonth(1)),
+        )
+
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/Week.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Week.kt
new file mode 100644
index 0000000..80b6267
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/Week.kt
@@ -0,0 +1,58 @@
+package com.dev.chacha.presentation.calendar
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.layout.*
+import androidx.compose.runtime.Composable
+import com.dev.chacha.presentation.calendar.model.CalendarUiState
+import com.dev.chacha.presentation.calendar.model.Week
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import java.time.DayOfWeek
+import java.time.LocalDate
+import java.time.temporal.TemporalAdjusters
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+internal fun DaysOfWeek(modifier: Modifier = Modifier) {
+    Row(modifier = modifier) {
+        for (day in DayOfWeek.values()) {
+            DayOfWeekHeading(
+                day = day.name.take(1),
+                modifier = Modifier.weight(1f)
+            )
+        }
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+internal fun Week(
+    calendarUiState: CalendarUiState,
+    week: Week,
+    onDayClicked: (LocalDate) -> Unit,
+    modifier: Modifier = Modifier
+) {
+    val beginningWeek = week.yearMonth.atDay(1).plusWeeks(week.number.toLong())
+    var currentDay = beginningWeek.with(TemporalAdjusters.previousOrSame(DayOfWeek.MONDAY))
+
+    Box(Modifier.fillMaxWidth()) {
+        Row(modifier = modifier) {
+            for (i in 0..6) {
+                if (currentDay.month == week.yearMonth.month) {
+                    Day(
+                        modifier = Modifier.weight(1f),
+                        calendarState = calendarUiState,
+                        day = currentDay,
+                        onDayClicked = onDayClicked,
+                    )
+                } else {
+                    Box(modifier = Modifier.size(CELL_SIZE).weight(1f))
+                }
+                currentDay = currentDay.plusDays(1)
+            }
+        }
+    }
+}
+
+internal val CELL_SIZE = 48.dp
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/WeekSelectionPill.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/WeekSelectionPill.kt
new file mode 100644
index 0000000..65737f9
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/WeekSelectionPill.kt
@@ -0,0 +1,96 @@
+package com.dev.chacha.presentation.calendar
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import com.dev.chacha.presentation.calendar.model.CalendarState
+import com.dev.chacha.presentation.calendar.model.CalendarUiState
+import com.dev.chacha.presentation.calendar.model.Week
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import java.time.LocalDate
+
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun WeekSelectionPill(
+    week: Week,
+    currentWeekStart: LocalDate,
+    state: CalendarUiState,
+    modifier: Modifier = Modifier,
+    widthPerDay: Dp = 48.dp,
+    heightPerDay: Dp = 48.dp,
+    pillColor: Color = MaterialTheme.colorScheme.primary
+) {
+    val widthPerDayPx = with(LocalDensity.current) { widthPerDay.toPx() }
+    val heightPerDayPx = with(LocalDensity.current) { heightPerDay.toPx() }
+    val cornerRadiusPx = with(LocalDensity.current) { 24.dp.toPx() }
+
+    Canvas(
+        modifier = modifier.fillMaxWidth(),
+        onDraw = {
+            val (offset, size) = getOffsetAndSize(
+                this.size.width,
+                state,
+                currentWeekStart,
+                week,
+                widthPerDayPx,
+                heightPerDayPx,
+                cornerRadiusPx,
+            )
+
+            drawRoundRect(
+                color = pillColor,
+                topLeft = offset,
+                size = Size(size, heightPerDayPx),
+                cornerRadius = CornerRadius(cornerRadiusPx)
+            )
+        }
+    )
+}
+
+
+@RequiresApi(Build.VERSION_CODES.O)
+private fun getOffsetAndSize(
+    width: Float,
+    state: CalendarUiState,
+    currentWeekStart: LocalDate,
+    week: Week,
+    widthPerDayPx: Float,
+    heightPerDayPx: Float,
+    cornerRadiusPx: Float,
+): Pair<Offset, Float> {
+    val numberDaysSelected = state.getNumberSelectedDaysInWeek(currentWeekStart, week.yearMonth)
+    val monthOverlapDelay = state.monthOverlapSelectionDelay(currentWeekStart, week)
+    val dayDelay = state.dayDelay(currentWeekStart)
+    val edgePadding = (width - widthPerDayPx * CalendarState.DAYS_IN_WEEK + ((widthPerDayPx - heightPerDayPx)) / 2F) + 1
+
+    val sideSize = edgePadding + cornerRadiusPx
+
+    val leftSize =
+        if (state.isLeftHighlighted(currentWeekStart, week.yearMonth)) sideSize else 0f
+    val rightSize =
+        if (state.isRightHighlighted(currentWeekStart, week.yearMonth)) sideSize else 0f
+
+    var totalSize = (numberDaysSelected * widthPerDayPx) + (leftSize + rightSize) - ((widthPerDayPx - heightPerDayPx))
+    if (dayDelay + monthOverlapDelay == 0 && numberDaysSelected >= 1) {
+        totalSize = totalSize.coerceAtLeast(heightPerDayPx)
+    }
+
+    totalSize = totalSize.coerceAtLeast(0F)
+
+    val startOffset = state.selectedStartOffset(currentWeekStart, week.yearMonth) * widthPerDayPx
+
+    val offset = Offset(startOffset + edgePadding - leftSize, 0f)
+
+    return offset to totalSize
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/CalendarState.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/CalendarState.kt
new file mode 100644
index 0000000..be9ee4d
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/CalendarState.kt
@@ -0,0 +1,58 @@
+package com.dev.chacha.presentation.calendar.model
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.runtime.mutableStateOf
+import com.chacha.presentation.util.getNumberWeeks
+import com.dev.chacha.presentation.util.toLocalDate
+import java.time.LocalDate
+import java.time.Period
+import java.time.YearMonth
+import java.util.*
+
+@RequiresApi(Build.VERSION_CODES.O)
+class CalendarState(selectDate: Date? = null) {
+
+    val calendarUiState = mutableStateOf(CalendarUiState())
+    val listMonths: List<Month>
+
+    private val calendarStartDate: LocalDate = LocalDate.now().withDayOfMonth(1)
+    private val calendarEndDate: LocalDate = LocalDate.now().plusYears(2)
+        .withMonth(12).withDayOfMonth(31)
+
+    private val periodBetweenCalendarStartEnd: Period = Period.between(
+        calendarStartDate,
+        calendarEndDate
+    )
+
+    init {
+        val tempListMonths = mutableListOf<Month>()
+        var startYearMonth = YearMonth.from(calendarStartDate)
+        for (numberMonth in 0..periodBetweenCalendarStartEnd.toTotalMonths()) {
+            val numberWeeks = startYearMonth.getNumberWeeks()
+            val listWeekItems = mutableListOf<Week>()
+            for (week in 0 until numberWeeks) {
+                listWeekItems.add(
+                    Week(
+                        number = week,
+                        yearMonth = startYearMonth
+                    )
+                )
+            }
+            val month = Month(startYearMonth, listWeekItems)
+            tempListMonths.add(month)
+            startYearMonth = startYearMonth.plusMonths(1)
+        }
+        listMonths = tempListMonths.toList()
+
+        if (selectDate != null) setSelectedDay(selectDate.toLocalDate())
+    }
+
+    fun setSelectedDay(newDate: LocalDate) {
+        calendarUiState.value = calendarUiState.value.setDates(LocalDate.now(), newDate)
+    }
+
+    companion object {
+        const val DAYS_IN_WEEK = 7
+    }
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/CalendarUiState.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/CalendarUiState.kt
new file mode 100644
index 0000000..3364eea
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/CalendarUiState.kt
@@ -0,0 +1,209 @@
+package com.dev.chacha.presentation.calendar.model
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.res.pluralStringResource
+import com.dev.chacha.presentation.util.countDays
+import com.dev.chacha.presentation.util.isSameDay
+import com.dev.chacha.presentation.util.prettyDate
+import com.dev.chacha.presentation.util.toDate
+import com.dev.chacha.presentation.R
+import java.time.LocalDate
+import java.time.YearMonth
+import java.time.format.DateTimeFormatter
+import java.time.temporal.ChronoUnit
+import java.util.*
+import kotlin.math.abs
+
+@RequiresApi(Build.VERSION_CODES.O)
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+fun selectedDatesFormatted(state: CalendarState): String {
+    val uiState = state.calendarUiState.value
+
+    if (uiState.selectedStartDate == null) return ""
+
+    var output = prettyDate(uiState.selectedStartDate.toDate(), showTime = false, forceShowDate = true)
+
+    output += if (uiState.selectedEndDate != null) {
+        val days = countDays(uiState.selectedEndDate.toDate(), uiState.selectedStartDate.toDate())
+
+        " - ${String.format(
+            pluralStringResource(
+                id = R.plurals.finish_date,
+                count = days,
+            ),
+            prettyDate(uiState.selectedEndDate.toDate(), showTime = false, forceShowDate = true),
+            days,
+        )}"
+    } else {
+        " - ?"
+    }
+
+    return output
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+data class CalendarUiState(
+    val selectedStartDate: LocalDate? = null,
+    val selectedEndDate: LocalDate? = null,
+) {
+
+    val numberSelectedDays: Float
+        @RequiresApi(Build.VERSION_CODES.O)
+        get() {
+            if (selectedStartDate == null) return 0f
+            if (selectedEndDate == null) return 1f
+            return ChronoUnit.DAYS.between(selectedStartDate, selectedEndDate.plusDays(1)).toFloat()
+        }
+
+    val hasSelectedDates: Boolean
+        get() {
+            return selectedEndDate != null
+        }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    fun hasSelectedPeriodOverlap(start: LocalDate, end: LocalDate): Boolean {
+        if (!hasSelectedDates) return false
+        if (selectedStartDate == null && selectedEndDate == null) return false
+        if (selectedStartDate == start || selectedStartDate == end) return true
+        if (selectedEndDate == null) {
+            return !selectedStartDate!!.isBefore(start) && !selectedStartDate.isAfter(end)
+        }
+        return !end.isBefore(selectedStartDate) && !start.isAfter(selectedEndDate)
+    }
+
+    fun isDateInSelectedPeriod(date: LocalDate): Boolean {
+        if (selectedStartDate == null) return false
+        if (selectedStartDate == date) return true
+        if (selectedEndDate == null) return false
+        if (date.isBefore(selectedStartDate) ||
+            date.isAfter(selectedEndDate)
+        ) return false
+        return true
+    }
+
+    fun isCurrentDay(date: LocalDate): Boolean {
+        return isSameDay(
+            date.toDate().time,
+            Date().time,
+        )
+    }
+
+    fun isBeforeCurrentDay(date: LocalDate): Boolean {
+        return date.isBefore(LocalDate.now())
+    }
+
+    fun getNumberSelectedDaysInWeek(currentWeekStartDate: LocalDate, month: YearMonth): Int {
+        var countSelected = 0
+        var currentDate = currentWeekStartDate
+        for (i in 0 until CalendarState.DAYS_IN_WEEK) {
+            if (isDateInSelectedPeriod(currentDate) && currentDate.month == month.month) {
+                countSelected++
+            }
+            currentDate = currentDate.plusDays(1)
+        }
+        return countSelected
+    }
+
+    /**
+     * Returns the number of selected days from the start or end of the week, depending on direction.
+     */
+    fun selectedStartOffset(currentWeekStartDate: LocalDate, yearMonth: YearMonth): Int {
+        var startDate = currentWeekStartDate
+        var startOffset = 0
+        for (i in 0 until CalendarState.DAYS_IN_WEEK) {
+            if (!isDateInSelectedPeriod(startDate) || startDate.month != yearMonth.month) {
+                startOffset++
+            } else {
+                break
+            }
+            startDate = startDate.plusDays(1)
+        }
+
+        return startOffset
+    }
+
+    fun isLeftHighlighted(beginningWeek: LocalDate?, month: YearMonth): Boolean {
+        return if (beginningWeek != null) {
+            if (month.month.value != beginningWeek.month.value) {
+                false
+            } else {
+                val beginningWeekSelected = isDateInSelectedPeriod(beginningWeek)
+                val lastDayPreviousWeek = beginningWeek.minusDays(1)
+                isDateInSelectedPeriod(lastDayPreviousWeek) && beginningWeekSelected
+            }
+        } else {
+            false
+        }
+    }
+
+    fun isRightHighlighted(
+        beginningWeek: LocalDate?,
+        month: YearMonth
+    ): Boolean {
+        val lastDayOfTheWeek = beginningWeek?.plusDays(6)
+        return if (lastDayOfTheWeek != null) {
+            if (month.month.value != lastDayOfTheWeek.month.value) {
+                false
+            } else {
+                val lastDayOfTheWeekSelected = isDateInSelectedPeriod(lastDayOfTheWeek)
+                val firstDayNextWeek = lastDayOfTheWeek.plusDays(1)
+                isDateInSelectedPeriod(firstDayNextWeek) && lastDayOfTheWeekSelected
+            }
+        } else {
+            false
+        }
+    }
+
+    fun dayDelay(currentWeekStartDate: LocalDate): Int {
+        if (selectedStartDate == null && selectedEndDate == null) return 0
+        // if selected week contains start date, don't have any delay
+        val endWeek = currentWeekStartDate.plusDays(6)
+        return if (selectedStartDate?.isBefore(currentWeekStartDate) == true ||
+            selectedStartDate?.isAfter(endWeek) == true
+        ) {
+            // selected start date is not in current week
+            abs(ChronoUnit.DAYS.between(currentWeekStartDate, selectedStartDate)).toInt()
+        } else {
+            0
+        }
+    }
+
+    fun monthOverlapSelectionDelay(
+        currentWeekStartDate: LocalDate,
+        week: Week
+    ): Int {
+        val isStartInADifferentMonth = currentWeekStartDate.month != week.yearMonth.month
+
+        return if (isStartInADifferentMonth) {
+            var currentDate = currentWeekStartDate
+            var offset = 0
+            for (i in 0 until CalendarState.DAYS_IN_WEEK) {
+                if (currentDate.month.value != week.yearMonth.month.value &&
+                    isDateInSelectedPeriod(currentDate)
+                ) {
+                    offset++
+                }
+                currentDate = currentDate.plusDays(1)
+            }
+            offset
+        } else {
+            0
+        }
+    }
+
+    fun setDates(newFrom: LocalDate?, newTo: LocalDate?): CalendarUiState {
+        return if (newTo == null) {
+            copy(selectedStartDate = newFrom)
+        } else {
+            copy(selectedStartDate = newFrom, selectedEndDate = newTo)
+        }
+    }
+
+    companion object {
+        private val SHORT_DATE_FORMAT = DateTimeFormatter.ofPattern("MMM dd")
+    }
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/Month.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/Month.kt
new file mode 100644
index 0000000..6b24745
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/Month.kt
@@ -0,0 +1,8 @@
+package com.dev.chacha.presentation.calendar.model
+
+import java.time.YearMonth
+
+data class Month(
+    val yearMonth: YearMonth,
+    val weeks: List<Week>
+)
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/Week.kt b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/Week.kt
new file mode 100644
index 0000000..d71b2bd
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/calendar/model/Week.kt
@@ -0,0 +1,8 @@
+package com.dev.chacha.presentation.calendar.model
+
+import java.time.YearMonth
+
+data class Week(
+    val number: Int,
+    val yearMonth: YearMonth
+)
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/common/navigation/HomeNavigation.kt b/presentation/src/main/java/com/dev/chacha/presentation/common/navigation/HomeNavigation.kt
index f0318ad..d9357e6 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/common/navigation/HomeNavigation.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/common/navigation/HomeNavigation.kt
@@ -25,7 +25,7 @@ import com.dev.chacha.presentation.home.HomeScreen
 import com.dev.chacha.presentation.pay_with_sacco.PayWithSacco
 import com.dev.chacha.presentation.paybill.PayBill
 import com.dev.chacha.presentation.savings.SavingsScreen
-import com.dev.chacha.presentation.send_money.SendMoneyScreen
+import com.dev.chacha.presentation.send_money.SendsMoneyScreen
 import com.dev.chacha.presentation.statement.StatementScreen
 import com.dev.chacha.presentation.transactions_all.AllTransactionsScreen
 import com.dev.chacha.presentation.withdraw.WithdrawScreen
@@ -58,10 +58,8 @@ fun NavGraphBuilder.homeNavGraph(navController: NavHostController) {
     }
 
     composable(HomeAction.SendMoney.route) {
-        SendMoneyScreen(
-            navigateBack = { navController.navigateUp() },
-            navController = navController
-        )
+        SendsMoneyScreen(navigateBack = {navController.navigateUp()})
+//        SendMoneyScreen()
 
     }
     composable(HomeAction.BuyAirtime.route) {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Color.kt b/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Color.kt
index 4a39e4b..0a13b81 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Color.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Color.kt
@@ -1,5 +1,8 @@
 package com.dev.chacha.presentation.common.theme
 
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.ui.graphics.Color
 
 val Purple200 = Color(0xFFBB86FC)
@@ -49,4 +52,40 @@ val ErrorColor = Color(0xFFFF8989)
 val OnErrorColor = Color(0xFF000000)
 
 val mainBackground = Color(0xFF1E2329)
-val Border = Color(0xFF535457)
\ No newline at end of file
+val Border = Color(0xFF535457)
+
+
+
+
+val colorBackground
+    @Composable
+    @ReadOnlyComposable
+    get() = MaterialTheme.colorScheme.surface
+
+val colorOnBackground
+    @Composable
+    @ReadOnlyComposable
+    get() = MaterialTheme.colorScheme.onSurface
+
+val colorButton
+    @Composable
+    @ReadOnlyComposable
+    get() =
+        MaterialTheme.colorScheme.secondaryContainer
+
+val colorOnButton
+    @Composable
+    @ReadOnlyComposable
+    get() =
+        MaterialTheme.colorScheme.onSurfaceVariant
+
+val colorEditor
+    @Composable
+    @ReadOnlyComposable
+    get() =
+        MaterialTheme.colorScheme.surface
+
+val colorOnEditor
+    @Composable
+    @ReadOnlyComposable
+    get() = MaterialTheme.colorScheme.onSurface
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Theme.kt b/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Theme.kt
index 93582c2..20a79ad 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Theme.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/common/theme/Theme.kt
@@ -107,11 +107,11 @@ fun SaccoRideTheme(
 @ChecksSdkIntAtLeast(api = Build.VERSION_CODES.S)
 private fun supportDynamicTheme() = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
 
-enum class Theme(val themeValue: Int) {
-    MATERIAL_YOU(themeValue = 12),
-    FOLLOW_SYSTEM(themeValue = AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM),
-    LIGHT_THEME(themeValue = AppCompatDelegate.MODE_NIGHT_NO),
-    DARK_THEME(themeValue = AppCompatDelegate.MODE_NIGHT_YES)
+enum class Theme(val themeValue: Int,val themeName: String?= null) {
+    MATERIAL_YOU(themeValue = 12,themeName = "Material You"),
+    FOLLOW_SYSTEM(themeValue = AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM,themeName = "Follow System"),
+    LIGHT_THEME(themeValue = AppCompatDelegate.MODE_NIGHT_NO,themeName = "Light Theme"),
+    DARK_THEME(themeValue = AppCompatDelegate.MODE_NIGHT_YES,themeName = "Dark Theme")
 }
 
 private fun Context.findActivity(): Activity {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactListViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactListViewModel.kt
index 82cb0f1..6abe85f 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactListViewModel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactListViewModel.kt
@@ -51,7 +51,7 @@ class ContactListViewModel : ViewModel() {
                         // Delay for 500ms to avoid frequent searches and showing loading icon
                         delay(500L)
                         val filteredContacts = initialContact.filter {
-                            it.name.contains(state.value.searchParams, ignoreCase = true) ||
+                            it.name.contains(state.value.searchParams, ignoreCase = true,) ||
                                     it.phoneNumber.contains(state.value.searchParams)
                         }
                         _state.value = state.value.copy(contact = filteredContacts, isLoading = false)
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactSelectionScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactSelectionScreen.kt
index 9d2e3a1..062420b 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactSelectionScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/contactList/ContactSelectionScreen.kt
@@ -10,6 +10,7 @@ import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -18,6 +19,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
+import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.NavController
 import com.dev.chacha.presentation.R
 import com.dev.chacha.presentation.common.components.AppTopBar
@@ -31,12 +33,12 @@ import kotlinx.coroutines.ExperimentalCoroutinesApi
 @OptIn(ExperimentalPermissionsApi::class, ExperimentalCoroutinesApi::class)
 @Composable
 fun ContactSelectionScreen(
-    viewModel: ContactListViewModel,
+    contactViewModel: ContactListViewModel = viewModel(),
     navController: NavController,
     onContactSelected: (Contact) -> Unit,
 ) {
     val context = LocalContext.current
-    val contactState by viewModel.state.collectAsState()
+    val contactState by contactViewModel.state.collectAsState()
     val lazyState = rememberLazyListState()
 
     // Check for permission to read contacts
@@ -44,7 +46,7 @@ fun ContactSelectionScreen(
 
     LaunchedEffect(permissionState) {
         if (permissionState.hasPermission) {
-            viewModel.send(ContactUiEvent.GetContacts, context)
+            contactViewModel.send(ContactUiEvent.GetContacts, context)
         } else {
             permissionState.launchPermissionRequest()
         }
@@ -56,7 +58,7 @@ fun ContactSelectionScreen(
                 title = "Search Contact",
                 initialValue = contactState.searchParams,
                 onSearchParamChange = { searchParams ->
-                    viewModel.send(ContactUiEvent.SearchContact(searchParams), context)
+                    contactViewModel.send(ContactUiEvent.SearchContact(searchParams), context)
                 },
                 showBackArrow = true,
                 showSearchBar = true,
@@ -69,6 +71,7 @@ fun ContactSelectionScreen(
                 CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
             }
         } else if (contactState.contact.isNotEmpty()) {
+            Text(text = contactState.contact.size.toString())
             LazyColumn(
                 modifier = Modifier
                     .padding(paddingValues)
@@ -79,11 +82,23 @@ fun ContactSelectionScreen(
                 val contacts = contactState.contact
                 items(contacts) { contact ->
                     ContactItem(contact = contact) {
-                        // Call the onContactSelected function to update the phone number
-                        // viewModel.send(ContactUiEvent.SearchContact(""),context) // clear search field
-                        viewModel.send(ContactUiEvent.GetContacts, context) // refresh the contact list
+                        val updatedPhoneNumber = contact.phoneNumber
+                        if (updatedPhoneNumber.length > 10 && updatedPhoneNumber.startsWith("+")) {
+                            val formattedPhoneNumber = "0${updatedPhoneNumber.substring(4)}"
+                            val updatedContacts = contact.copy(phoneNumber = formattedPhoneNumber)
+                            onContactSelected(updatedContacts)
+
+                            if (formattedPhoneNumber.length<10){
+                                val secondUpdate = "0${formattedPhoneNumber}"
+                                val secondUpdatedContacts = contact.copy(phoneNumber = secondUpdate)
+                                onContactSelected(secondUpdatedContacts)
+                            }
+                        } else {
+                            onContactSelected(contact)
+                        }
+                        // Refresh the contact list
+                        contactViewModel.send(ContactUiEvent.GetContacts, context)
                         navController.previousBackStackEntry?.savedStateHandle?.set("selectedContact", contact)
-                        onContactSelected(contact)
                         navController.popBackStack()
                     }
                 }
@@ -92,7 +107,7 @@ fun ContactSelectionScreen(
             RetryButton(
                 error = contactState.error,
                 onRetryEvent = {
-                    viewModel.send(ContactUiEvent.GetContacts, context)
+                    contactViewModel.send(ContactUiEvent.GetContacts, context)
                 }
             )
         } else {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contactList/component/ContactItem.kt b/presentation/src/main/java/com/dev/chacha/presentation/contactList/component/ContactItem.kt
index 8a74f3b..956fc08 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/contactList/component/ContactItem.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/contactList/component/ContactItem.kt
@@ -70,7 +70,7 @@ fun ContactItem(contact: Contact, onItemClick: () -> Unit) {
         }
 
         Divider(
-            modifier = Modifier.fillMaxWidth().padding(start = 12.dp, top = 5.dp),
+            modifier = Modifier.fillMaxWidth().padding(start = 8.dp, top = 5.dp),
             thickness = 1.dp,
             color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08F)
         )
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contacts/ContactScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/contacts/ContactScreen.kt
deleted file mode 100644
index befaa8c..0000000
--- a/presentation/src/main/java/com/dev/chacha/presentation/contacts/ContactScreen.kt
+++ /dev/null
@@ -1,78 +0,0 @@
-package com.dev.chacha.presentation.contacts
-
-
-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.material.icons.Icons
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.Button
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-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.navigation.NavController
-
-@Composable
-fun ContactsScreen(navController: NavController) {
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(16.dp)
-    ) {
-        Text(
-            text = "Contact",
-            modifier = Modifier.padding(bottom = 16.dp)
-        )
-        var name by remember { mutableStateOf("") }
-        TextField(
-            value = name,
-            onValueChange = { name = it },
-            label = { Text("Name") },
-            modifier = Modifier.fillMaxWidth()
-        )
-        var phoneNumber by remember { mutableStateOf("") }
-        TextField(
-            value = phoneNumber,
-            onValueChange = { phoneNumber = it },
-            label = { Text("Phone Number") },
-            trailingIcon = {
-                IconButton(onClick = {
-                    // Navigate to the screen to select a contact to import
-
-                }) {
-                    Icon(
-                        imageVector = Icons.Default.Search,
-                        contentDescription = "Search"
-                    )
-                }
-            },
-            modifier = Modifier.fillMaxWidth()
-        )
-        Button(
-            onClick = { /* Save contact information */ },
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(top = 16.dp)
-        ) {
-            Text("Save")
-        }
-    }
-
-}
-
-
-
-
-
-
-
-
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contacts/ContactsViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/contacts/ContactsViewModel.kt
deleted file mode 100644
index 6702f80..0000000
--- a/presentation/src/main/java/com/dev/chacha/presentation/contacts/ContactsViewModel.kt
+++ /dev/null
@@ -1,15 +0,0 @@
-package com.dev.chacha.presentation.contacts
-
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
-import androidx.lifecycle.ViewModel
-import com.dev.chacha.presentation.contactList.ContactState
-
-class ContactsViewModel(
-) : ViewModel() {
-    var state by mutableStateOf(ContactState())
-
-
-
-}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/ContactSelect.kt b/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/ContactSelect.kt
deleted file mode 100644
index 521c16f..0000000
--- a/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/ContactSelect.kt
+++ /dev/null
@@ -1,89 +0,0 @@
-package com.dev.chacha.presentation.contacts.component
-
-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.material.icons.Icons
-import androidx.compose.material.icons.filled.Search
-import androidx.compose.material3.Button
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-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.navigation.NavController
-import com.dev.chacha.presentation.contactList.ContactListViewModel
-import com.dev.chacha.presentation.contactList.ContactSelectionScreen
-
-/*
-@Composable
-fun ContactSelect(
-    navController: NavController
-) {
-    var phoneNumber by remember { mutableStateOf("") }
-    // Call the ContactSelectionScreen composable outside of the Column
-    ContactSelectionScreen(onContactSelected = { contact ->
-        phoneNumber = contact.phoneNumber
-    }, navController = navController)
-}*/
-
-@Composable
-fun ContactSelect(navController: NavController) {
-    var phoneNumber by remember { mutableStateOf("") }
-    ContactSelectionScreen(
-        onContactSelected = { contact ->
-            phoneNumber = contact.phoneNumber
-        },
-        navController = navController,
-        viewModel = ContactListViewModel()
-    )
-    Column(
-        modifier = Modifier
-            .fillMaxSize()
-            .padding(16.dp)
-    ) {
-        Text(
-            text = "Contact",
-            modifier = Modifier.padding(bottom = 16.dp)
-        )
-        var name by remember { mutableStateOf("") }
-        TextField(
-            value = name,
-            onValueChange = { name = it },
-            label = { Text("Name") },
-            modifier = Modifier.fillMaxWidth()
-        )
-        TextField(
-            value = phoneNumber,
-            onValueChange = { phoneNumber = it },
-            label = { Text("Phone Number") },
-            trailingIcon = {
-                IconButton(onClick = {
-                    // Navigate to the screen to select a contact to import
-
-                }) {
-                    Icon(
-                        imageVector = Icons.Default.Search,
-                        contentDescription = "Search"
-                    )
-                }
-            },
-            modifier = Modifier.fillMaxWidth()
-        )
-        Button(
-            onClick = { /* Save contact information */ },
-            modifier = Modifier
-                .fillMaxWidth()
-                .padding(top = 16.dp)
-        ) {
-            Text("Save")
-        }
-    }
-}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/ContactsSelectionScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/ContactsSelectionScreen.kt
deleted file mode 100644
index 31a3030..0000000
--- a/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/ContactsSelectionScreen.kt
+++ /dev/null
@@ -1,137 +0,0 @@
-package com.dev.chacha.presentation.contacts.component
-
-import android.Manifest
-import android.content.Context
-import android.provider.ContactsContract
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
-import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.material3.Scaffold
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateListOf
-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.LocalContext
-import androidx.compose.ui.unit.dp
-import androidx.navigation.NavController
-import com.dev.chacha.presentation.common.components.AppTopBar
-import com.dev.chacha.presentation.contactList.ContactListViewModel
-import com.dev.chacha.presentation.contactList.component.ContactItem
-import com.dev.chacha.presentation.contactList.Contact
-import com.google.accompanist.permissions.ExperimentalPermissionsApi
-import com.google.accompanist.permissions.rememberPermissionState
-
-@OptIn(ExperimentalPermissionsApi::class)
-@Composable
-fun ContactsSelectionScreen(
-    onContactSelected: (Contact) -> Unit,
-    navController: NavController,
-    viewModel: ContactListViewModel,
-
-    ) {
-    val context = LocalContext.current
-    // Check for permission to read contacts
-    val permissionState = rememberPermissionState(Manifest.permission.READ_CONTACTS)
-    val contacts = remember { mutableStateListOf<Contact>() }
-    val listState = rememberLazyListState()
-    val selectedContactIndex by remember { mutableStateOf(-1) }
-
-    LaunchedEffect(permissionState) {
-        if (permissionState.hasPermission) {
-            val rawContacts = getContactsList(context)
-            val uniqueContacts = rawContacts
-                .distinctBy { it.phoneNumber }
-                .sortedBy { it.name }
-            contacts.addAll(uniqueContacts)
-            // Scroll to the previously selected contact, if any
-            if (selectedContactIndex != -1) {
-                listState.animateScrollToItem(selectedContactIndex)
-            }
-        } else {
-            permissionState.launchPermissionRequest()
-        }
-    }
-
-
-    Scaffold(
-        topBar = {
-            AppTopBar(
-                title = "Search Contact",
-                initialValue = "",
-                onSearchParamChange = {},
-                showBackArrow = true,
-                showSearchBar = true
-            )
-        }
-    ) { paddingValues ->
-
-        Box(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(horizontal = 16.dp),
-            contentAlignment = Alignment.TopCenter
-        ) {
-
-            LazyColumn(
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .fillMaxHeight(),
-                state = listState,
-                contentPadding = paddingValues
-            ) {
-                items(contacts) { contact ->
-                    ContactItem(
-                        contact = contact,
-                        onItemClick = {
-                            // Call the onContactSelected function to update the phone number
-                            onContactSelected(contact)
-                            // Navigate back to the previous screen
-                            navController.popBackStack()
-                        }
-                    )
-                }
-            }
-        }
-    }
-}
-
-private fun getContactsList(context: Context): List<Contact> {
-    val contacts = mutableListOf<Contact>()
-    val cursor = context.contentResolver.query(
-        ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, null, null
-    )
-
-    cursor?.use {
-        while (it.moveToNext()) {
-            val contactName = it.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)
-            val contactPhoneNumber = it.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)
-            val contactEmail = it.getColumnIndexOrThrow(ContactsContract.CommonDataKinds.Email.ADDRESS)
-            val contactId = it.getColumnIndex(ContactsContract.Contacts._ID)
-
-            val name = it.getString(contactName)
-            val phoneNumber = it.getString(contactPhoneNumber)
-            val email = it.getString(contactEmail)
-            val numberId = it.getString(contactId)
-            contacts.add(Contact(name, phoneNumber, email, numberId))
-        }
-    }
-    cursor?.close()
-
-    // Remove duplicates and sort by name
-    return contacts
-        .distinctBy { it.phoneNumber }
-        .sortedBy { it.name }
-}
-
-
-
-
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/SearchBar.kt b/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/SearchBar.kt
deleted file mode 100644
index 28a6dbe..0000000
--- a/presentation/src/main/java/com/dev/chacha/presentation/contacts/component/SearchBar.kt
+++ /dev/null
@@ -1,116 +0,0 @@
-package com.dev.chacha.presentation.contacts.component
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.text.KeyboardActions
-import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Clear
-import androidx.compose.material3.ExposedDropdownMenuDefaults
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
-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.draw.clip
-import androidx.compose.ui.focus.FocusRequester
-import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalFocusManager
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.input.ImeAction
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.unit.dp
-import com.dev.chacha.presentation.R
-
-@Composable
-fun SearchBar(
-    initialValue: String,
-    onSearchParamChange: (searchParam: String) -> Unit,
-) {
-    Box(
-        modifier = Modifier
-            .padding(start = 20.dp, end = 20.dp, bottom = 4.dp)
-            .clip(CircleShape)
-            .background(MaterialTheme.colorScheme.onSurface.copy(alpha = .08F))
-            .fillMaxWidth()
-            .height(54.dp)
-    ) {
-        var searchParam: String by remember { mutableStateOf(initialValue) }
-        val focusRequester = remember { FocusRequester() }
-        val focusManager = LocalFocusManager.current
-
-        TextField(
-            value = searchParam,
-            onValueChange = { newValue ->
-                searchParam = if (newValue.trim().isNotEmpty()) newValue else ""
-                onSearchParamChange(newValue)
-            },
-            modifier = Modifier
-                .fillMaxSize()
-                .focusRequester(focusRequester = focusRequester),
-            singleLine = true,
-            placeholder = {
-                Text(
-                    text = "Search...",
-                    color = MaterialTheme.colorScheme.onSurface.copy(alpha = .32F)
-                )
-            },
-            colors = ExposedDropdownMenuDefaults.textFieldColors(
-                containerColor = Color.Transparent,
-                focusedIndicatorColor = Color.Transparent,
-                unfocusedIndicatorColor = Color.Transparent
-            ), keyboardOptions = KeyboardOptions(
-                autoCorrect = true,
-                keyboardType = KeyboardType.Text,
-                imeAction = ImeAction.Search
-            ),
-            keyboardActions = KeyboardActions(
-                onSearch = {
-                    onSearchParamChange(searchParam)
-                }
-            ),
-            trailingIcon = {
-                Row {
-                    AnimatedVisibility(visible = searchParam.trim().isNotEmpty()) {
-                        IconButton(onClick = {
-                            focusManager.clearFocus()
-                            searchParam = ""
-                            onSearchParamChange(searchParam)
-                        }) {
-                            Icon(
-                                imageVector = Icons.Default.Clear,
-                                contentDescription = null
-                            )
-                        }
-
-
-                    }
-
-                    IconButton(onClick = {
-                        onSearchParamChange(searchParam)
-                    }) {
-                        Icon(
-                            painter = painterResource(id = R.drawable.ic_search),
-                            contentDescription = null
-                        )
-                    }
-                }
-            }
-        )
-    }
-
-}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/custom_keyboard/CustomKeyboardScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/custom_keyboard/CustomKeyboardScreen.kt
index b40115d..7a3fa08 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/custom_keyboard/CustomKeyboardScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/custom_keyboard/CustomKeyboardScreen.kt
@@ -69,7 +69,7 @@ fun CustomKeyboard(
     Column(
         modifier = Modifier
             .fillMaxSize()
-            .padding(start=8.dp, end = 8.dp, bottom = 30.dp)
+            .padding(start=8.dp, end = 8.dp, bottom = 80.dp)
     ) {
         Spacer(modifier = Modifier.height(50.dp))
 
@@ -129,8 +129,8 @@ private fun NumberButton(
             onClick(number.digitToChar())
         },
         modifier = modifier
-            .aspectRatio(2f)
-            .padding(5.dp),
+            .aspectRatio(1f)
+            .padding(12.dp),
         border = ButtonDefaults.outlinedButtonBorder.copy(
             brush = SolidColor(MaterialTheme.colorScheme.primary)
         )
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/extensions/Extensions.kt b/presentation/src/main/java/com/dev/chacha/presentation/extensions/Extensions.kt
index 3a04c75..ca4bc67 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/extensions/Extensions.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/extensions/Extensions.kt
@@ -1,12 +1,27 @@
 package com.dev.chacha.presentation.extensions
 
+import android.content.Context
+import android.content.pm.ApplicationInfo
+import android.net.Uri
 import android.os.Build
+import android.os.Parcelable
+import android.provider.CallLog
+import android.provider.ContactsContract
+import android.provider.Telephony
+import android.util.Log
 import androidx.annotation.RequiresApi
+import androidx.compose.runtime.mutableStateListOf
+import com.dev.chacha.presentation.contactList.Contact
 import kotlinx.datetime.Clock
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toJavaLocalDateTime
 import kotlinx.datetime.toLocalDateTime
+import kotlinx.parcelize.Parcelize
+import timber.log.Timber
+import java.text.SimpleDateFormat
 import java.time.format.DateTimeFormatter
+import java.util.Date
+import java.util.Locale
 
 fun getInitials(name: String): String {
     val names = name.split(" ")
@@ -19,10 +34,328 @@ fun getInitials(name: String): String {
 }
 
 
-
 @RequiresApi(Build.VERSION_CODES.O)
 fun getCurrentDateTime(): String {
     val currentDateTime = Clock.System.now().toLocalDateTime(TimeZone.currentSystemDefault())
     val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss:a")
     return currentDateTime.toJavaLocalDateTime().format(formatter)
-}
\ No newline at end of file
+}
+
+fun formatDateTime(date: String, time: String): String {
+    val inputFormat = SimpleDateFormat("yyyy-MM-dd HH:mm:ss", Locale.getDefault())
+    val outputFormat = SimpleDateFormat("dd MMM, hh:mm a", Locale.getDefault())
+    val dateTimeString = "$date $time"
+    val parsedDate = inputFormat.parse(dateTimeString)
+    return parsedDate?.let { outputFormat.format(it) } ?: ""
+}
+
+
+fun formatContact(contact: String): String {
+    val formattedContact: String =when {
+        contact.startsWith("254") -> {
+            val prefix = contact.substring(0, 6)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+        contact.startsWith("07") -> {
+            val prefix = contact.substring(0, 4)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+        contact.startsWith("+254") -> {
+            val prefix = contact.substring(0, 7)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+        contact.startsWith("01") -> {
+            val prefix = contact.substring(0, 4)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+
+        else -> contact
+    }
+    return formattedContact
+}
+
+
+
+fun formatDate(date: String): String? {
+    val inputFormat = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
+    val outputFormat = SimpleDateFormat("dd MMM", Locale.getDefault())
+    val parsedDate = inputFormat.parse(date)
+    return parsedDate?.let { outputFormat.format(it) }
+}
+
+
+fun getContactsList(context: Context): List<Contact> {
+    val contacts = mutableStateListOf<Contact>()
+    val cursor = context.contentResolver.query(
+        ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, null, null
+    )
+
+    cursor?.use {
+        while (it.moveToNext()) {
+            val contactName =
+                it.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)
+            val contactPhoneNumber =
+                it.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)
+            val contactEmail =
+                it.getColumnIndexOrThrow(ContactsContract.CommonDataKinds.Email.ADDRESS)
+            val contactId = it.getColumnIndex(ContactsContract.Contacts._ID)
+
+            val name = it.getString(contactName)
+            val phoneNumber = it.getString(contactPhoneNumber)
+            val email = it.getString(contactEmail)
+            val numberId = it.getString(contactId)
+
+            // Remove spaces, hyphens, and parentheses from the phone number
+            val cleanedPhoneNumber = phoneNumber.replace("[\\s-()]".toRegex(), "")
+
+            // Check if the phone number has more than 10 digits
+            if (cleanedPhoneNumber.length > 10 && cleanedPhoneNumber.startsWith("+")) {
+                val formattedPhoneNumber = "0${cleanedPhoneNumber.substring(4)}"
+                contacts.add(Contact(name, formattedPhoneNumber, email, numberId))
+                if (formattedPhoneNumber.length<10) {
+                    val secondFormatted = "0${formattedPhoneNumber}"
+                    contacts.add(Contact(name, secondFormatted, email, numberId))
+                    if (secondFormatted.length<10) {
+                        val thirdFormatted = "0${secondFormatted}"
+                        contacts.add(Contact(name, thirdFormatted, email, numberId))
+                    }
+                }
+            } else {
+                contacts.add(Contact(name, cleanedPhoneNumber, email, numberId))
+            }
+        }
+    }
+    cursor?.close()
+
+    // Remove duplicates and sort by name
+    return contacts.sortedBy { it.name }
+}
+
+@Parcelize
+data class Message(
+    val address: String?,
+    val body: String,
+    val date: String,
+    val time: String,
+    val id: String,
+): Parcelable
+
+fun getMessageList(context: Context){
+    val messageList = arrayListOf<Message>()
+    val cursor3 = context.contentResolver.query(
+        Telephony.Sms.CONTENT_URI,
+        null, null, null, null
+    )
+
+    while (cursor3 != null && cursor3.moveToNext()) {
+        //Date
+        val smsDate =
+            cursor3.getString(cursor3.getColumnIndexOrThrow(Telephony.Sms.DATE)).toLong()
+        val date = Date()
+        date.time = smsDate
+        val simpleDateFormat = SimpleDateFormat("dd/MM/yyyy")
+        val dateString = simpleDateFormat.format(date)
+        // Time
+        val smsTime =
+            cursor3.getString(cursor3.getColumnIndexOrThrow(Telephony.Sms.DATE)).toLong()
+        val time = Date()
+        time.time = smsTime
+        val simpleTimeFormat = SimpleDateFormat("HH:mm:ss")
+        val timeString = simpleTimeFormat.format(time)
+        // Sender address
+        val address = cursor3.getString(cursor3.getColumnIndexOrThrow(Telephony.Sms.ADDRESS))
+        // Message Body
+        val body =
+            cursor3.getString(cursor3.getColumnIndexOrThrow(Telephony.Sms.BODY)).toString()
+        // Message Id
+        val id = cursor3.getString(cursor3.getColumnIndexOrThrow(Telephony.Sms._ID))
+
+        messageList.add(Message(address, body, dateString, timeString, id))
+    }
+    cursor3?.close()
+
+}
+
+
+@Parcelize
+
+data class MobileApps(
+    val appName: String
+): Parcelable
+fun getMobileApps(context: Context){
+    //apps
+    val appList = arrayListOf<MobileApps>()
+    val packageManager = context.packageManager
+    val applicationList = packageManager.getInstalledApplications(0)
+    val it: Iterator<ApplicationInfo> = applicationList.iterator()
+    while (it.hasNext()) {
+        val appname = packageManager.getApplicationLabel(it.next()).toString()
+        appList.add(
+            MobileApps(
+                appname
+            )
+        )
+    }
+}
+
+@Parcelize
+data class CallLogs(
+    val callId: String,
+    val phoneId: String,
+    val phoNumber: String,
+    val callType: Int,
+    val callDuration: String,
+    val callDate: String,
+    val sim: String,
+    val callTime: String,
+): Parcelable
+
+fun getCallLogs(context: Context){
+    //calls
+    val callLogsList = arrayListOf<CallLogs>()
+    val cursor = context.contentResolver.query(CallLog.Calls.CONTENT_URI,
+        null, null, null, CallLog.Calls.DATE + " DESC"
+    )
+
+    while (cursor != null && cursor.moveToNext()) {
+        val id = cursor.getColumnIndex(CallLog.Calls._ID)
+        val callId = cursor.getString(id)
+
+        val phoneid = cursor.getColumnIndex(CallLog.Calls.PHONE_ACCOUNT_ID)
+        val phoneId = cursor.getString(phoneid)
+
+        val number = cursor.getColumnIndex(CallLog.Calls.NUMBER)
+        val phoneNumber = cursor.getString(number)
+
+        val type = cursor.getColumnIndex(CallLog.Calls.TYPE)
+        val callTypes = cursor.getString(type)
+        val callType = callTypes.toInt()
+
+        val date = cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.DATE))
+        val datee = Date(date.toLong())
+        val ft = SimpleDateFormat("dd-MM-yyyy", Locale.getDefault())
+
+        // Call time
+        val callTime = cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.DATE)).toLong()
+        val time = Date()
+        time.time = callTime
+        val simpleTimeFormat = SimpleDateFormat("HH:mm:ss")
+        val timeString = simpleTimeFormat.format(time)
+
+        val simwhat = cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.VIA_NUMBER))
+
+        val duration = cursor.getColumnIndex(CallLog.Calls.DURATION)
+        val callDuration = cursor.getString(duration)
+
+        var dir: String? = null
+        when (callType) {
+            CallLog.Calls.OUTGOING_TYPE ->                     // Log.d("type","OUTGOING");
+                dir = "OUTGOING"
+            CallLog.Calls.INCOMING_TYPE ->                     // System.out.println("INCOMING");
+                //  Log.d("type","INCOMING");
+                dir = "INCOMING"
+            CallLog.Calls.MISSED_TYPE ->
+                dir = "MISSED"
+            CallLog.Calls.BLOCKED_TYPE -> {
+                dir = "BLOCKED"
+            }
+            CallLog.Calls.ANSWERED_EXTERNALLY_TYPE -> {
+                dir = "ANSWERED EXTERNALLY"
+            }
+            CallLog.Calls.REJECTED_TYPE -> {
+                dir = "REJECTED"
+            }
+            CallLog.Calls.VOICEMAIL_TYPE -> {
+                dir = "VOICE"
+            }
+        }
+
+        callLogsList.add(CallLogs(callId, phoneId, phoneNumber, callType, callDuration, ft.format(datee), simwhat, timeString))
+    }
+    cursor?.close()
+
+}
+
+@Parcelize
+data class SMSList(
+    val id: String,
+    val address: String,
+    val body: String,
+    val date: String,
+    val readState: String,
+    val folderName: String,
+    val contactName: String,
+    val contactId: String
+): Parcelable
+
+private fun getSMSList(context: Context): List<SMSList> {
+    val smsList = mutableListOf<SMSList>()
+
+    val cursor = context.contentResolver.query(
+        Uri.parse("content://sms/inbox"), null, null, null, null
+    )
+
+    cursor?.use {
+        while (it.moveToNext()) {
+            val id = it.getString(it.getColumnIndexOrThrow("_id"))
+            val address = it.getString(it.getColumnIndexOrThrow("address"))
+            val body = it.getString(it.getColumnIndexOrThrow("body"))
+            val date = it.getString(it.getColumnIndexOrThrow("date"))
+            val readState = it.getString(it.getColumnIndexOrThrow("read"))
+            val folderName = it.getString(it.getColumnIndexOrThrow("type"))
+            val contactName = it.getString(it.getColumnIndexOrThrow("person"))
+            val contactId = it.getString(it.getColumnIndexOrThrow("contact_id"))
+
+            smsList.add(
+                SMSList(
+                    id,
+                    address,
+                    body,
+                    date,
+                    readState,
+                    folderName,
+                    contactName,
+                    contactId
+                )
+            )
+        }
+    }
+    cursor?.close()
+
+    Timber.tag("SMSList").d(smsList.toString())
+
+    return smsList
+
+}
+
+/*private fun formatContact(contact: String): String {
+    val formattedContact: String =when {
+        contact.startsWith("254") -> {
+            val prefix = contact.substring(0, 6)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+        contact.startsWith("07") -> {
+            val prefix = contact.substring(0, 4)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+        contact.startsWith("+254") -> {
+            val prefix = contact.substring(0, 7)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+        contact.startsWith("01") -> {
+            val prefix = contact.substring(0, 4)
+            val lastThreeDigits = contact.substring(contact.length - 3)
+            "$prefix***$lastThreeDigits"
+        }
+
+        else -> contact
+    }
+    return formattedContact
+}*/
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/home/HomeScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/home/HomeScreen.kt
index a7ac597..444d750 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/home/HomeScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/home/HomeScreen.kt
@@ -108,8 +108,7 @@ fun HomeScreen(
                     )
                 }
                 item {
-                    Spacer(modifier = Modifier.height(10.dp))
-                    Spacer(modifier = Modifier.height(20.dp))
+                    Spacer(modifier = Modifier.height(30.dp))
                     HomeServiceCard(
                         onLoanClicked = onLoanClicked,
                         onMarketClicked = onMarketClicked,
@@ -145,6 +144,7 @@ fun HomeScreen(
 
 
                 }
+
                 if (showAllTransactions) {
                     items(transactionsItem) { transaction ->
                         TransHistoryItem(
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/home/components/HomeServiceItem.kt b/presentation/src/main/java/com/dev/chacha/presentation/home/components/HomeServiceItem.kt
index add7563..130ae8c 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/home/components/HomeServiceItem.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/home/components/HomeServiceItem.kt
@@ -4,6 +4,7 @@ import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@@ -38,7 +39,9 @@ fun HomeServiceItem(
         modifier = Modifier
             .height(100.dp)
             .width(100.dp)
-            .clickable(onClick = onItemClick),
+            .clickable(MutableInteractionSource(),null) {
+                onItemClick()
+            },
         colors = CardDefaults.cardColors(
             containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6F),
         ),
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/home/components/TextImageItem.kt b/presentation/src/main/java/com/dev/chacha/presentation/home/components/TextImageItem.kt
index 7cadd5d..791c772 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/home/components/TextImageItem.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/home/components/TextImageItem.kt
@@ -4,6 +4,7 @@ import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -40,7 +41,9 @@ fun TextImageItem(
         modifier = Modifier
             .width(90.dp)
             .height(80.dp)
-            .clickable(onClick = onItemClick),
+            .clickable(MutableInteractionSource(), null) {
+                onItemClick()
+            },
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/loan/LoanScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/loan/LoanScreen.kt
index 62edc7c..49f8b9c 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/loan/LoanScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/loan/LoanScreen.kt
@@ -6,6 +6,7 @@ import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.spring
 import androidx.compose.animation.rememberSplineBasedDecay
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -114,7 +115,7 @@ fun LoanScreen(
         ) {
             LoanCard(
                 loan = Loan(
-                    balance = 10000000.0,
+                    balance = 100000.0,
                     limit = 100000.0,
                     dueDate = "12 June,2023"
                 )
@@ -160,7 +161,11 @@ fun PayLoans(
     )
 
     Card(
-        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
+        modifier = Modifier.fillMaxWidth()
+            .clickable(MutableInteractionSource(),null) {
+                onExpandToggle()
+            }
+            .padding(horizontal = 16.dp),
         elevation = CardDefaults.cardElevation(
             defaultElevation = 0.dp,
             pressedElevation = 0.dp,
@@ -174,13 +179,15 @@ fun PayLoans(
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(12.dp)
-                .clickable(onClick = onExpandToggle),
+                .padding(12.dp),
             contentAlignment = Alignment.Center
         ) {
             Column(
                 modifier = Modifier
                     .fillMaxWidth()
+                    .clickable(MutableInteractionSource(),null){
+                        onExpandToggle()
+                    }
                     .padding(bottom = extraPaddingValues.coerceAtLeast(0.dp)),
                 verticalArrangement = Arrangement.Center
             ) {
@@ -198,7 +205,7 @@ fun PayLoans(
                         Icon(
                             painter = painterResource(id = R.drawable.loan_icon),
                             contentDescription = null,
-                            modifier = Modifier.clickable {
+                            modifier = Modifier.clickable(MutableInteractionSource(),null) {
                                 onExpandToggle()
                             }
                         )
@@ -256,10 +263,11 @@ fun RequestLoans(
     )
 
     Card(
-        modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
-        onClick = {
-            onExpandToggle()
-        },
+        modifier = Modifier.fillMaxWidth()
+            .clickable(MutableInteractionSource(),null) {
+                onExpandToggle()
+            }
+            .padding(horizontal = 16.dp),
         colors = CardDefaults.cardColors(
             containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6F),
         )
@@ -267,8 +275,7 @@ fun RequestLoans(
         Box(
             modifier = Modifier
                 .fillMaxSize()
-                .padding(12.dp)
-                .clickable(onClick = onExpandToggle),
+                .padding(12.dp),
             contentAlignment = Alignment.Center
         ) {
             Column(
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/loan/LoansScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/loan/LoansScreen.kt
index 4fe8fd2..691934e 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/loan/LoansScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/loan/LoansScreen.kt
@@ -61,7 +61,7 @@ fun LoansScreen(
 
             LoanCard(
                 loan = Loan(
-                    balance = 10000000.0,
+                    balance = 100000.0,
                     limit = 100000.0,
                     dueDate = "12 June,2023"
                 )
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketScreen.kt
index 37ba7e2..5c524fa 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketScreen.kt
@@ -2,16 +2,21 @@ package com.dev.chacha.presentation.markets
 
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.windowInsetsBottomHeight
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Icon
@@ -47,111 +52,137 @@ fun MarketScreen(
 ) {
     Scaffold(
         topBar = {
-           MarketTopBar(
-               title = "Market"
-           )
+            MarketTopBar(
+                title = "Market"
+            )
         },
     ) { paddingValues ->
 
-        Column(
+        val cardsItems = getCardImages()
+
+
+
+        Box(
             modifier = Modifier
-                .fillMaxWidth()
+                .fillMaxSize()
                 .padding(paddingValues)
-                .padding(horizontal = 16.dp)
+                .padding(horizontal = 16.dp),
         ) {
-            val  cardsItems = getCardImages()
-            LazyColumn(
-                verticalArrangement = Arrangement.spacedBy(8.dp)
-            ){
-                item {
-                    Text(text = stringResource(id = R.string.our_market))
-                }
-                item {
-                    AnimatedCardPager(cards =   cardsItems)
-                }
 
-                item {
-                    AnimatedCardPagerIndicator(cards =   cardsItems)
-                }
-            }
-            Spacer(modifier = Modifier.height(16.dp))
 
             LazyVerticalGrid(
-                columns = GridCells.Fixed(2),
-                modifier = Modifier
-                    .fillMaxWidth(),
-                verticalArrangement = Arrangement.spacedBy(10.dp),
-                horizontalArrangement = Arrangement.spacedBy(10.dp),
-                userScrollEnabled = true
+                columns = GridCells.Adaptive(170.dp),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
             ) {
 
-                item {
-                    ShopCard(
-                        drawable = R.drawable.home_icon,
-                        title = R.string.electronics,
-                        subTitle = R.string.electronics,
-                        onClickCard = {}
-                    )
-                }
-                item {
-                    ShopCard(
-                        drawable = R.drawable.home_icon,
-                        title = R.string.electronics,
-                        subTitle = R.string.electronics,
-                        onClickCard = {}
-                    )
-                }
+                items(marketTypeOption.size) { index ->
+                    MarketTypeCard(
+                        title = marketTypeOption[index].title,
+                        subTitle = marketTypeOption[index].subTitle,
+                        imageResourceId = marketTypeOption[index].imageResourceId,
+                        containerColor = marketTypeOption[index].containerColor,
+                        onClick = { marketTypeOption ->
+                            when (marketTypeOption) {
+                                "title" -> {
 
-                item {
-                    ShopCard(
-                        drawable = R.drawable.home_icon,
-                        title = R.string.electronics,
-                        subTitle = R.string.electronics,
-                        onClickCard = {}
-                    )
-                }
+                                }
 
-                item {
-                    ShopCard(
-                        drawable = R.drawable.home_icon,
-                        title = R.string.electronics,
-                        subTitle = R.string.electronics,
-                        onClickCard = {}
-                    )
-                }
-                item {
-                    ShopCard(
-                        drawable = R.drawable.home_icon,
-                        title = R.string.electronics,
-                        subTitle = R.string.electronics,
-                        onClickCard = {}
-                    )
-                }
+                                "title" -> {
+
+                                }
+
+                                "title" -> {
+
+                                }
+
+                            }
 
-                item {
-                    ShopCard(
-                        drawable = R.drawable.home_icon,
-                        title = R.string.electronics,
-                        subTitle = R.string.electronics,
-                        onClickCard = {}
+                        },
                     )
                 }
 
-            }
 
-            Spacer(modifier = Modifier.weight(1f))
 
+            }
 
         }
+
     }
 }
 
-fun randommColor(): Color {
-    val red = Random.nextInt(256)
-    val green = Random.nextInt(256)
-    val blue = Random.nextInt(256)
-    return Color(red, green, blue)
-}
+
+
+private val marketTypeOption = listOf(
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(0, 48, 72)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(71, 126, 149)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(141, 103, 171)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(140, 25, 50)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(186, 93, 7)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(119, 119, 119)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(144, 168, 192)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(230, 30, 50)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(71, 125, 149)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(141, 103, 171)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(30, 50, 100)
+    ),
+
+    )
+
 
 
 @Composable
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketTypeCard.kt b/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketTypeCard.kt
new file mode 100644
index 0000000..a61988f
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketTypeCard.kt
@@ -0,0 +1,234 @@
+package com.dev.chacha.presentation.markets
+
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.R
+import com.dev.chacha.presentation.markets.components.AnimatedCardPager
+import com.dev.chacha.presentation.markets.components.AnimatedCardPagerIndicator
+import com.dev.chacha.presentation.markets.components.getCardImages
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.geometry.lerp
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.lerp
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import com.dev.chacha.presentation.util.HexagonShapeClipper
+import kotlin.math.cos
+import kotlin.math.sin
+
+
+
+@Composable
+fun MarketTypeCard(
+    title: String,
+    subTitle: String,
+    onClick: (String) -> Unit,
+    modifier: Modifier = Modifier,
+    @DrawableRes imageResourceId: Int,
+    containerColor: Color = MaterialTheme.colorScheme.surface
+) {
+    Card(
+        modifier = modifier
+            .height(110.dp)
+            .clickable { onClick(title) },
+        colors = CardDefaults.cardColors(
+            containerColor = containerColor
+        ),
+    ) {
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+
+        ) {
+            Image(
+                modifier = Modifier
+                    .size(40.dp)
+                    .offset(x = 110.dp, y = 30.dp)
+                    .rotate(30f),
+                painter = painterResource(id = imageResourceId),
+                contentDescription = null
+            )
+            Text(
+                modifier = Modifier
+                    .align(Alignment.TopStart)
+                    .padding(16.dp),
+                text = title,
+                fontWeight = FontWeight.Bold,
+            )
+        }
+    }
+
+}
+
+@Composable
+fun MarketScreensList() {
+    val  cardsItems = getCardImages()
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .padding(16.dp)
+    ) {
+        LazyVerticalGrid(
+            columns = GridCells.Adaptive(170.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
+        ) {
+
+            item(span = { GridItemSpan(this.maxCurrentLineSpan) }) {
+                AnimatedCardPagerIndicator(cards =   cardsItems)
+            }
+
+            items(marketTypeOption.size) { index ->
+                MarketTypeCard(
+                    title = marketTypeOption[index].title,
+                    subTitle = marketTypeOption[index].subTitle,
+                    imageResourceId = marketTypeOption[index].imageResourceId,
+                    containerColor = marketTypeOption[index].containerColor,
+                    onClick = { marketTypeOption ->
+                        when (marketTypeOption) {
+                            "title" -> {
+
+
+                            }
+                            "title" -> {
+
+                            }
+
+                            "title" -> {
+
+                            }
+
+                        }
+
+                    },
+                )
+            }
+        }
+
+    }
+
+}
+
+
+
+
+
+
+
+@Composable
+@Preview
+fun PreviewMarketType() {
+    MarketScreensList()
+}
+
+
+data class MarketType(
+    val title: String,
+    val subTitle: String,
+    val imageResourceId: Int,
+    val containerColor: Color,
+)
+
+private val marketTypeOption = listOf(
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(0, 48, 72)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(71, 126, 149)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(141, 103, 171)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(140, 25, 50)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(186, 93, 7)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(119, 119, 119)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(144, 168, 192)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(230, 30, 50)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(71, 125, 149)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(141, 103, 171)
+    ),
+    MarketType(
+        title = "title",
+        subTitle = "subTitle",
+        imageResourceId = R.drawable.home_icon,
+        containerColor = Color(30, 50, 100)
+    ),
+
+    )
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketViewModel.kt
new file mode 100644
index 0000000..6fece30
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/markets/MarketViewModel.kt
@@ -0,0 +1,33 @@
+package com.dev.chacha.presentation.markets
+
+import androidx.lifecycle.ViewModel
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.update
+
+class MarketViewModel : ViewModel() {
+
+    val marketState = MutableStateFlow(MarketState())
+
+    fun onTriggerEvent(event: MarketEvent) {
+        when (event) {
+            is MarketEvent.GetMarket -> {
+                getMarket()
+            }
+        }
+    }
+
+    private fun getMarket() {
+        marketState.update { it.copy(isLoading = true) }
+    }
+
+
+}
+
+
+data class MarketState(
+    val isLoading: Boolean = false,
+)
+
+sealed class MarketEvent {
+    object GetMarket : MarketEvent()
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/markets/components/ShopCard.kt b/presentation/src/main/java/com/dev/chacha/presentation/markets/components/ShopCard.kt
index 94bdbc9..e21d939 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/markets/components/ShopCard.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/markets/components/ShopCard.kt
@@ -5,13 +5,16 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Icon
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Shapes
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -19,6 +22,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import com.dev.chacha.presentation.R
+import com.dev.chacha.presentation.common.theme.Shapes
 import com.dev.chacha.presentation.paybill.component.randomColor
 
 @Composable
@@ -42,11 +46,17 @@ fun ShopCard(
                 .fillMaxSize(),
             verticalArrangement = Arrangement.Center
         ) {
-            Icon(
-                painter = painterResource(id = drawable) ,
-                contentDescription = null,
-                modifier = Modifier.size(25.dp),
-            )
+            Box(
+                modifier = Modifier.size(50.dp)
+            ){
+                Icon(
+                    painter = painterResource(id = drawable) ,
+                    contentDescription = null,
+                    modifier = Modifier.size(25.dp),
+                )
+
+            }
+
             Spacer(modifier = Modifier.height(10.dp))
             Text(
                 text = stringResource(id = title),
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/networks/NetworkConnectionState.kt b/presentation/src/main/java/com/dev/chacha/presentation/networks/NetworkConnectionState.kt
new file mode 100644
index 0000000..ee88122
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/networks/NetworkConnectionState.kt
@@ -0,0 +1,105 @@
+package com.dev.chacha.presentation.networks
+
+import android.content.Context
+import android.net.ConnectivityManager
+import android.net.Network
+import android.net.NetworkCapabilities
+import android.net.NetworkRequest
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.produceState
+import androidx.compose.ui.platform.LocalContext
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+import kotlinx.coroutines.channels.awaitClose
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.callbackFlow
+import androidx.compose.runtime.produceState
+import androidx.compose.ui.platform.LocalContext
+
+sealed interface NetworkConnectionState{
+    object Connected: NetworkConnectionState
+    object Disconnected: NetworkConnectionState
+    object Connecting: NetworkConnectionState
+    object Disconnecting: NetworkConnectionState
+    object Suspended: NetworkConnectionState
+    object Unknown: NetworkConnectionState
+    object Available : NetworkConnectionState
+    object Unavailable : NetworkConnectionState
+    object WifeAvailable : NetworkConnectionState
+    object CellularAvailable : NetworkConnectionState
+    object CellUnavailable : NetworkConnectionState
+    object WifeUnavailable : NetworkConnectionState
+
+
+}
+
+private fun networkCallback(callback: (NetworkConnectionState) -> Unit): ConnectivityManager.NetworkCallback {
+    return object : ConnectivityManager.NetworkCallback() {
+        override fun onAvailable(network: Network) {
+            callback(NetworkConnectionState.Available)
+            callback(NetworkConnectionState.Connected)
+            callback(NetworkConnectionState.WifeAvailable)
+            callback(NetworkConnectionState.CellularAvailable)
+
+        }
+
+        override fun onLost(network: Network) {
+            callback(NetworkConnectionState.Unavailable)
+            callback(NetworkConnectionState.Disconnected)
+            callback(NetworkConnectionState.CellUnavailable)
+            callback(NetworkConnectionState.WifeUnavailable)
+        }
+    }
+}
+
+private fun getCurrentConnectivityState(connectivityManager: ConnectivityManager): NetworkConnectionState {
+    val network = connectivityManager.activeNetwork
+
+    val connected = connectivityManager.getNetworkCapabilities(network)
+        ?.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET) ?: false
+
+    return if (connected) NetworkConnectionState.Available  else NetworkConnectionState.Unavailable
+}
+@ExperimentalCoroutinesApi
+private fun Context.observeConnectivityAsFlow(): Flow<NetworkConnectionState> = callbackFlow {
+    val connectivityManager = getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
+
+    val callback = networkCallback { connectionState ->
+        trySend(connectionState)
+    }
+
+    val networkRequest = NetworkRequest.Builder()
+        .addCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET)
+        .addTransportType(NetworkCapabilities.TRANSPORT_CELLULAR)
+        .addTransportType(NetworkCapabilities.TRANSPORT_WIFI)
+        .build()
+
+    connectivityManager.registerNetworkCallback(networkRequest, callback)
+
+    val currentState = getCurrentConnectivityState(connectivityManager)
+    trySend(currentState)
+
+    awaitClose {
+        connectivityManager.unregisterNetworkCallback(callback)
+    }
+}
+
+private val Context.currentConnectivityState: NetworkConnectionState
+    get() {
+        val connectivityManager =
+            getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager
+        return getCurrentConnectivityState(connectivityManager)
+    }
+
+
+@ExperimentalCoroutinesApi
+@Composable
+fun rememberConnectivityState(): State<NetworkConnectionState> {
+    val context = LocalContext.current
+    return produceState(initialValue = context.currentConnectivityState) {
+        context.observeConnectivityAsFlow().collect {
+            value = it
+        }
+    }
+}
+
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/networks/NetworkScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/networks/NetworkScreen.kt
new file mode 100644
index 0000000..81ad824
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/networks/NetworkScreen.kt
@@ -0,0 +1,38 @@
+package com.dev.chacha.presentation.networks
+
+import androidx.compose.compiler.plugins.kotlin.ComposeFqNames.remember
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.produceState
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import kotlinx.coroutines.ExperimentalCoroutinesApi
+
+@OptIn(ExperimentalCoroutinesApi::class)
+@Composable
+fun NetworkScreen() {
+    val connectionState by rememberConnectivityState()
+
+    val isConnected by remember(connectionState) {
+        derivedStateOf { connectionState === NetworkConnectionState.Available }
+    }
+
+    Box(
+        modifier = Modifier.fillMaxSize(),
+        contentAlignment = Alignment.Center
+    ) {
+        Text(text = if (isConnected) "Connected" else "Disconnected")
+    }
+
+
+
+}
+
+
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/paybill/PayBillScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/paybill/PayBillScreen.kt
index 45b292f..99b77a0 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/paybill/PayBillScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/paybill/PayBillScreen.kt
@@ -1,6 +1,7 @@
 import androidx.compose.foundation.ExperimentalFoundationApi
 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.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
@@ -122,7 +123,9 @@ fun PayBillScreen(
     Column(
         modifier = Modifier
             .padding(horizontal = 16.dp)
-            .background(MaterialTheme.colorScheme.background)
+            .background(MaterialTheme.colorScheme.background),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
 
     ) {
 
@@ -156,7 +159,7 @@ fun PayBillScreen(
             supportText = payBillState.accountName
 
         )
-        Spacer(modifier = Modifier.height(10.dp))
+        Spacer(modifier = Modifier.height(8.dp))
         val accountNumberLimit = 20
 
         RideOutlinedTextField(
@@ -169,7 +172,7 @@ fun PayBillScreen(
             accountNumberLength = "${payBillState.accountNumber.length}/${accountNumberLimit}"
 
         )
-        Spacer(modifier = Modifier.height(10.dp))
+        Spacer(modifier = Modifier.height(8.dp))
 
         RideOutlinedTextField(
             value = payBillState.amount.toString(),
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/permissions/PermissionsViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/permissions/PermissionsViewModel.kt
index d3d4195..72a41f2 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/permissions/PermissionsViewModel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/permissions/PermissionsViewModel.kt
@@ -23,4 +23,7 @@ class PermissionsViewModel : ViewModel() {
             PermissionState.Denied
         }
     }*/
+
+
+
 }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/permissions/RequestPermissions.kt b/presentation/src/main/java/com/dev/chacha/presentation/permissions/RequestPermissions.kt
index 22ef034..f115cbe 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/permissions/RequestPermissions.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/permissions/RequestPermissions.kt
@@ -1,10 +1,6 @@
 package com.dev.chacha.presentation.permissions
 
 import android.Manifest
-import android.provider.CallLog
-import android.provider.ContactsContract
-import android.provider.Telephony
-import android.widget.Toast
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
@@ -20,6 +16,9 @@ import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.viewModelScope
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.dev.chacha.presentation.extensions.getCallLogs
+import com.dev.chacha.presentation.extensions.getContactsList
+import com.dev.chacha.presentation.extensions.getMessageList
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.rememberMultiplePermissionsState
 import com.google.gson.GsonBuilder
@@ -27,9 +26,7 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import java.io.BufferedWriter
 import java.io.File
-import java.io.FileOutputStream
 import java.io.FileWriter
-import java.text.SimpleDateFormat
 import java.util.*
 
 @OptIn(ExperimentalPermissionsApi::class)
@@ -37,8 +34,7 @@ import java.util.*
 fun RequestPermissions(
     viewModel: PermissionsViewModel = viewModel(),
     onClick: () -> Unit,
-
-    ) {
+) {
 
     val permissionsState = rememberMultiplePermissionsState(
         permissions = listOf(
@@ -76,141 +72,37 @@ fun RequestPermissions(
                 Manifest.permission.READ_SMS -> {
                     when {
                         perms.hasPermission -> {
-                            val smsCursor = context.contentResolver.query(
-                                Telephony.Sms.Inbox.CONTENT_URI,
-                                null,
-                                null,
-                                null,
-                                null
-                            )
-
-                            if (smsCursor != null && smsCursor.moveToFirst()) {
-                                val file = File(context.filesDir, "sms_messages.txt")
-                                val outputStream = FileOutputStream(file)
-
-                                do {
-                                    val address = smsCursor.getString(
-                                        smsCursor.getColumnIndexOrThrow(Telephony.Sms.ADDRESS)
-                                    )
-                                    val body = smsCursor.getString(
-                                        smsCursor.getColumnIndexOrThrow(Telephony.Sms.BODY)
-                                    )
-                                    val line = "$address: $body\n"
-                                    outputStream.write(line.toByteArray())
-                                } while (smsCursor.moveToNext())
-
-                                outputStream.flush()
-                                outputStream.close()
-
-                                Toast.makeText(
-                                    context,
-                                    "SMS messages collected and saved to file",
-                                    Toast.LENGTH_SHORT
-                                ).show()
-                            } else {
-                                Toast.makeText(
-                                    context,
-                                    "No SMS messages found",
-                                    Toast.LENGTH_SHORT
-                                ).show()
-                            }
-
-                            smsCursor?.close()
-
+                            val smsCursor = getMessageList(context)
+                            val gson = GsonBuilder().setPrettyPrinting().create()
+                            val userSms = gson.toJson(smsCursor)
+                            val userSmsString: String = userSms.toString()
+                            val fileSms = File(context.filesDir, "SmsList.json")
+                            val fileWriterSms = FileWriter(fileSms)
+                            val bufferedWriterSms = BufferedWriter(fileWriterSms)
+                            bufferedWriterSms.write(userSmsString)
+                            bufferedWriterSms.close()
                         }
                         perms.shouldShowRationale -> {
                             Text(
-                                text = "Camera persmisson is needed " +
+                                text = "Sms persmisson is needed " +
                                         "to access the camera"
                             )
                         }
+
                         perms.isPermanentlyDenied() -> {
                             Text(
-                                text = "Camera persmisson is Permanantly Denied" +
+                                text = "Sms persmisson is Permanantly Denied" +
                                         "you can enable it into app setting"
                             )
                         }
                     }
                 }
+
                 Manifest.permission.READ_CALL_LOG -> {
                     when {
                         perms.hasPermission -> {
                             //calls
-                            val callLogsList = arrayListOf<CallLogs>()
-
-                            val cursor = context.contentResolver.query(
-                                CallLog.Calls.CONTENT_URI,
-                                null, null, null, CallLog.Calls.DATE + " DESC"
-                            )
-
-                            while (cursor != null && cursor.moveToNext()) {
-                                val id = cursor.getColumnIndex(CallLog.Calls._ID)
-                                val callId = cursor.getString(id)
-
-                                val phoneid = cursor.getColumnIndex(CallLog.Calls.PHONE_ACCOUNT_ID)
-                                val phoneId = cursor.getString(phoneid)
-
-                                val number = cursor.getColumnIndex(CallLog.Calls.NUMBER)
-                                val phoneNumber = cursor.getString(number)
-
-                                val type = cursor.getColumnIndex(CallLog.Calls.TYPE)
-                                val callTypes = cursor.getString(type)
-                                val callType = callTypes.toInt()
-
-                                val date =
-                                    cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.DATE))
-                                val datee = Date(date.toLong())
-                                val ft = SimpleDateFormat("dd-MM-yyyy", Locale.getDefault())
-
-                                // Call time
-
-                                val smsTime =
-                                    cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.DATE))
-                                        .toLong()
-                                val time = Date()
-                                time.time = smsTime
-                                val simpleTimeFormat = SimpleDateFormat("HH:mm:ss")
-                                val timeString = simpleTimeFormat.format(time)
-
-                                val simwhat =
-                                    cursor.getString(cursor.getColumnIndexOrThrow(CallLog.Calls.VIA_NUMBER))
-
-                                val duration = cursor.getColumnIndex(CallLog.Calls.DURATION)
-                                val callDuration = cursor.getString(duration)
-
-                                var dir: String? = null
-                                when (callType) {
-                                    CallLog.Calls.OUTGOING_TYPE ->                     // Log.d("type","OUTGOING");
-                                        dir = "OUTGOING"
-                                    CallLog.Calls.INCOMING_TYPE ->                     // System.out.println("INCOMING");
-                                        //  Log.d("type","INCOMING");
-                                        dir = "INCOMING"
-                                    CallLog.Calls.MISSED_TYPE ->
-                                        dir = "MISSED"
-                                    CallLog.Calls.BLOCKED_TYPE -> {
-                                        dir = "BLOCKED"
-                                    }
-                                    CallLog.Calls.ANSWERED_EXTERNALLY_TYPE -> {
-                                        dir = "ANSWERED EXTERNALLY"
-                                    }
-                                    CallLog.Calls.REJECTED_TYPE -> {
-                                        dir = "REJECTED"
-                                    }
-                                    CallLog.Calls.VOICEMAIL_TYPE -> {
-                                        dir = "VOICE"
-                                    }
-                                }
-
-                                callLogsList.add(
-                                    CallLogs(
-                                        callId, phoneId, phoneNumber, callType, callDuration,
-                                        ft.format(datee), simwhat, timeString
-                                    )
-                                )
-                            }
-
-                            cursor?.close()
-
+                            val callLogsList = getCallLogs(context)
                             viewModel.viewModelScope.launch(Dispatchers.IO) {
                                 val gson = GsonBuilder().setPrettyPrinting().create()
                                 val userCallLogs = gson.toJson(callLogsList)
@@ -220,20 +112,19 @@ fun RequestPermissions(
                                 val bufferedWriterCall = BufferedWriter(fileWriterCall)
                                 bufferedWriterCall.write(userCallLogsString)
                                 bufferedWriterCall.close()
-
                             }
-
-
                         }
+
                         perms.shouldShowRationale -> {
                             Text(
-                                text = "Audio persmisson is needed " +
+                                text = "Calls persmisson is needed " +
                                         "to access the microphone"
                             )
                         }
+
                         perms.isPermanentlyDenied() -> {
                             Text(
-                                text = "Audio persmisson is Permanantly Denied" +
+                                text = "Calls persmisson is Permanantly Denied" +
                                         "you can enable it into app setting"
                             )
                         }
@@ -244,34 +135,7 @@ fun RequestPermissions(
                     when {
                         perms.hasPermission -> {
                             //contacts
-                            val contactList = arrayListOf<Contacts>()
-                            val cursor2 = context.contentResolver.query(
-                                ContactsContract.CommonDataKinds.Phone.CONTENT_URI,
-                                null,
-                                null,
-                                null,
-                                null
-                            )
-                            while (cursor2 != null && cursor2.moveToNext()) {
-                                val userName =
-                                    cursor2.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)
-                                val userPhoneNumber =
-                                    cursor2.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)
-                                val userEmail =
-                                    cursor2.getColumnIndexOrThrow(ContactsContract.CommonDataKinds.Email.ADDRESS)
-                                val userNumber =
-                                    cursor2.getColumnIndex(ContactsContract.Contacts._ID)
-
-                                val name = cursor2.getString(userName)
-                                val phoneNumber = cursor2.getString(userPhoneNumber)
-                                val email = cursor2.getString(userEmail)
-                                val number = cursor2.getString(userNumber)
-
-                                contactList.add(Contacts(name, phoneNumber, email, number))
-                            }
-
-                            cursor2?.close()
-
+                            val contactList = getContactsList(context)
                             //contacts
                             val gson = GsonBuilder().setPrettyPrinting().create()
                             val userContact = gson.toJson(contactList)
@@ -282,15 +146,17 @@ fun RequestPermissions(
                             bufferedWriterContact.write(userContactString)
                             bufferedWriterContact.close()
                         }
+
                         perms.shouldShowRationale -> {
                             Text(
-                                text = "Audio persmisson is needed " +
+                                text = "Contact persmisson is needed " +
                                         "to access the microphone"
                             )
                         }
+
                         perms.isPermanentlyDenied() -> {
                             Text(
-                                text = "Audio persmisson is Permanantly Denied" +
+                                text = "Contact persmisson is Permanantly Denied" +
                                         "you can enable it into app setting"
                             )
                         }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/pin/AccountPinScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/pin/AccountPinScreen.kt
index 70efd74..c9f1d01 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/pin/AccountPinScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/pin/AccountPinScreen.kt
@@ -16,6 +16,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Backspace
+import androidx.compose.material.icons.outlined.Password
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
@@ -92,7 +93,7 @@ fun AccountPinScreen(
                         contentAlignment = Alignment.Center
                     ) {
                         Icon(
-                            painter =  painterResource(id = R.drawable.account_circle),
+                            imageVector = Icons.Outlined.Password,
                             contentDescription = null,
                             tint = PrimaryColor,
                             modifier = Modifier
@@ -120,7 +121,7 @@ fun AccountPinScreen(
                                 }
                             },
                             keyboardType = KeyboardType.NumberPassword,
-                            hint = stringResource(id = R.string.enter_pin),
+                            hint = stringResource(id = R.string.pin),
                             isPasswordVisible = pinInputsViewModel.showPin.value,
                             onPasswordToggleClick = {
                                 pinInputsViewModel.setShowPin(it)
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/pin/LoanPinScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/pin/LoanPinScreen.kt
index f949367..98cdbeb 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/pin/LoanPinScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/pin/LoanPinScreen.kt
@@ -180,12 +180,9 @@ fun LoanPinScreen(
                 horizontalAlignment = Alignment.CenterHorizontally,
                 verticalArrangement = Arrangement.Center
             ) {
+
                 Text(
-                    text = name.uppercase(),
-                    style = MaterialTheme.typography.labelSmall
-                )
-                Text(
-                    text = stringResource(id = R.string.enter_pin),
+                    text = stringResource(id = R.string.enter_your_loan),
                     style = MaterialTheme.typography.labelSmall
 
                 )
@@ -228,7 +225,7 @@ fun LoanPinScreen(
                             }
                         },
                         keyboardType = KeyboardType.NumberPassword,
-                        hint = stringResource(id = R.string.confirmPassword),
+                        hint = stringResource(id = R.string.pin),
                         isPasswordVisible = pinInputsViewModel.showPin.value,
                         onPasswordToggleClick = {
                             pinInputsViewModel.setShowPin(it)
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/pin/PinLockScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/pin/PinLockScreen.kt
index 70718fb..23a3f85 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/pin/PinLockScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/pin/PinLockScreen.kt
@@ -217,7 +217,8 @@ fun PinLockScreen(
                 }
 
                 Row(
-                    modifier = Modifier.fillMaxWidth()
+                    modifier = Modifier
+                        .fillMaxWidth()
                         .padding(start = 10.dp),
                     horizontalArrangement = Arrangement.SpaceEvenly,
                     verticalAlignment = Alignment.CenterVertically
@@ -322,13 +323,9 @@ fun PinKeyItem(
                 Box(
                     modifier = modifier
                         .defaultMinSize(minWidth = 64.dp, minHeight = 64.dp)
-                        .clickable(
-                            interactionSource = interactionSource,
-                            indication = rememberRipple(),
-                            enabled = enabled,
-                            role = Role.Button,
-                            onClick = onClick
-                        ),
+                        .clickable(MutableInteractionSource(), null, enabled, role = Role.Button) {
+                            onClick()
+                        },
                     contentAlignment = Alignment.Center
                 ) {
                     content()
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/report_pdf/PDFGenerator.kt b/presentation/src/main/java/com/dev/chacha/presentation/report_pdf/PDFGenerator.kt
new file mode 100644
index 0000000..0bc2d44
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/report_pdf/PDFGenerator.kt
@@ -0,0 +1,308 @@
+/*
+package com.dev.chacha.presentation.report_pdf
+
+import android.Manifest
+import android.app.PendingIntent
+import android.content.Context
+import android.content.Intent
+import android.content.pm.PackageManager
+import android.graphics.*
+import android.graphics.pdf.PdfDocument
+import android.net.Uri
+import android.os.Build
+import android.os.Environment
+import android.provider.Settings
+import android.widget.Toast
+import androidx.annotation.RequiresApi
+import androidx.core.app.ActivityCompat
+import androidx.core.app.NotificationCompat
+import androidx.core.app.NotificationManagerCompat
+import androidx.core.content.ContextCompat
+import androidx.core.content.FileProvider
+import com.dev.chacha.presentation.R
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.GlobalScope
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import java.io.File
+import java.io.FileOutputStream
+import java.io.IOException
+import java.text.SimpleDateFormat
+import java.time.LocalDateTime
+import java.time.format.DateTimeFormatter
+import java.util.*
+
+class PDFGenerator {
+
+    private val channelId = "PDF_DOWNLOAD_CHANNEL"
+    private val notificationId = 123
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    fun generatePDF(context: Context, transactionList: List<TransactionHistory>) {
+        GlobalScope.launch(Dispatchers.IO) {
+            // Create a new PDF document
+            val pdfDocument = PdfDocument()
+
+            try {
+                // Create a page info with A4 dimensions
+                val pageInfo = PdfDocument.PageInfo.Builder(A4_WIDTH, A4_HEIGHT, 1).create()
+
+                // Start the first page
+                val coverPage = pdfDocument.startPage(pageInfo)
+                val coverCanvas = coverPage.canvas
+
+                // Draw the cover image
+                drawCoverImage(context, coverCanvas)
+
+                // Draw the cover text
+                drawCoverText(context, coverCanvas)
+
+                // Finish the cover page
+                pdfDocument.finishPage(coverPage)
+
+                // Calculate the remaining height for the transaction pages
+                val remainingHeight = A4_HEIGHT - (2 * MARGIN_SIZE)
+
+                // Calculate the number of transactions that can fit on each page
+                val transactionsPerPage = calculateTransactionsPerPage(remainingHeight)
+
+                // Create a new page info for the transaction pages
+                val transactionPageInfo = PdfDocument.PageInfo.Builder(A4_WIDTH, A4_HEIGHT, 1).create()
+
+                // Iterate over the transaction list and create pages as needed
+                var startIndex = 0
+                while (startIndex < transactionList.size) {
+                    val endIndex = startIndex + transactionsPerPage.coerceAtMost(transactionList.size - startIndex)
+
+                    // Start a new transaction page
+                    val transactionPage = pdfDocument.startPage(transactionPageInfo)
+                    val transactionCanvas = transactionPage.canvas
+
+                    // Draw the transaction rows
+                    drawTransactionRows(context, transactionCanvas, transactionList.subList(startIndex, endIndex))
+
+                    // Finish the transaction page
+                    pdfDocument.finishPage(transactionPage)
+
+                    // Update the start index for the next page
+                    startIndex = endIndex
+                }
+
+                // Create a file to save the PDF
+                val directory = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS)
+                val fileName = "TransactionHistory_${SimpleDateFormat("yyyyMMdd_HHmmss", Locale.getDefault()).format(Date())}.pdf"
+                val file = File(directory, fileName)
+
+                // Write the PDF document to the file
+                val fileOutputStream = FileOutputStream(file)
+                pdfDocument.writeTo(fileOutputStream)
+                fileOutputStream.close()
+
+                // Show a download completed notification
+                showDownloadNotification(context, file)
+
+                // Show a toast message indicating successful PDF generation
+                withContext(Dispatchers.Main) {
+                    Toast.makeText(context, "PDF generated successfully", Toast.LENGTH_SHORT).show()
+                }
+            } catch (e: IOException) {
+                e.printStackTrace()
+
+                // Show a toast message indicating an error occurred during PDF generation
+                withContext(Dispatchers.Main) {
+                    Toast.makeText(context, "Failed to generate PDF", Toast.LENGTH_SHORT).show()
+                }
+            } finally {
+                // Close the PDF document
+                pdfDocument.close()
+            }
+        }
+    }
+
+    private fun calculateTransactionsPerPage(remainingHeight: Float): Any {
+        TODO("Not yet implemented")
+    }
+
+    private fun showDownloadNotification(context: Context, file: File) {
+        val notificationBuilder = NotificationCompat.Builder(context, channelId)
+            .setContentTitle("PDF Download")
+            .setContentText("PDF Download Complete")
+            .setSmallIcon(android.R.drawable.stat_sys_download_done)
+            .setAutoCancel(true)
+            .setColor(ContextCompat.getColor(context, R.color.cyan))
+            .setStyle(
+                NotificationCompat.BigTextStyle()
+                    .bigText("PDF downloaded successfully")
+            )
+            .setContentIntent(getPendingIntent(context, file))
+            .setPriority(NotificationCompat.PRIORITY_HIGH)
+
+        val notificationManagerCompat = NotificationManagerCompat.from(context)
+        if (ActivityCompat.checkSelfPermission(
+                context,
+                Manifest.permission.POST_NOTIFICATIONS
+            ) != PackageManager.PERMISSION_GRANTED
+        ) {
+            // TODO: Consider calling
+            //    ActivityCompat#requestPermissions
+            // here to request the missing permissions, and then overriding
+            //   public void onRequestPermissionsResult(int requestCode, String[] permissions,
+            //                                          int[] grantResults)
+            // to handle the case where the user grants the permission. See the documentation
+            // for ActivityCompat#requestPermissions for more details.
+            return
+        }
+        notificationManagerCompat.notify(notificationId, notificationBuilder.build())
+    }
+
+    private fun getPendingIntent(context: Context, file: File): PendingIntent {
+        val intent = Intent(Intent.ACTION_VIEW)
+        intent.flags = Intent.FLAG_GRANT_READ_URI_PERMISSION
+        val uri = FileProvider.getUriForFile(context, "${context.packageName}.provider", file)
+        intent.setDataAndType(uri, "application/pdf")
+
+        return PendingIntent.getActivity(context, 0, intent, PendingIntent.FLAG_UPDATE_CURRENT)
+    }
+
+
+
+    private fun drawCoverImage(context: Context, canvas: Canvas) {
+        val coverBitmap = BitmapFactory.decodeResource(context.resources, R.drawable.home)
+        val scaledCoverBitmap = Bitmap.createScaledBitmap(coverBitmap, A4_WIDTH, A4_HEIGHT, true)
+        canvas.drawBitmap(scaledCoverBitmap, 0f, 0f, null)
+    }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    private fun drawCoverText(context: Context, canvas: Canvas) {
+        val titlePaint = Paint()
+        titlePaint.typeface = Typeface.create(Typeface.DEFAULT, Typeface.NORMAL)
+        titlePaint.textSize = 40f
+        titlePaint.color = Color.WHITE
+        titlePaint.textAlign = Paint.Align.CENTER
+        canvas.drawText("Transaction History", (A4_WIDTH / 2).toFloat(), 300f, titlePaint)
+
+        val subtitlePaint = Paint()
+        subtitlePaint.typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
+        subtitlePaint.textSize = 30f
+        subtitlePaint.color = Color.WHITE
+        subtitlePaint.textAlign = Paint.Align.CENTER
+        canvas.drawText("Generated on ${getCurrentDateTime()}", (A4_WIDTH / 2).toFloat(), 400f, subtitlePaint)
+    }
+
+    private fun drawTransactionRows(context: Context, canvas: Canvas, transactionList: List<TransactionHistory>) {
+        val tableHeaderPaint = Paint()
+        tableHeaderPaint.typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
+        tableHeaderPaint.textSize = 18f
+        tableHeaderPaint.color = ContextCompat.getColor(context, R.color.black)
+        tableHeaderPaint.textAlign = Paint.Align.CENTER
+
+        val rowPaint = Paint()
+        rowPaint.textSize = 16f
+        rowPaint.color = ContextCompat.getColor(context, R.color.black)
+        rowPaint.textAlign = Paint.Align.CENTER
+
+        val columnWidths = calculateColumnWidths()
+
+        val xOffset = MARGIN_SIZE + columnWidths[0] / 2
+
+        // Draw table headers
+        canvas.drawText("Transaction Detail", xOffset, TABLE_HEADER_Y, tableHeaderPaint)
+        canvas.drawText("Recipient No", xOffset + columnWidths[0], TABLE_HEADER_Y, tableHeaderPaint)
+        canvas.drawText("Date", xOffset + columnWidths[0] + columnWidths[1], TABLE_HEADER_Y, tableHeaderPaint)
+        canvas.drawText("Money In", xOffset + columnWidths[0] + columnWidths[1] + columnWidths[2], TABLE_HEADER_Y, tableHeaderPaint)
+        canvas.drawText("Money Out", xOffset + columnWidths[0] + columnWidths[1] + columnWidths[2] + columnWidths[3], TABLE_HEADER_Y, tableHeaderPaint)
+        canvas.drawText("Money Balance", xOffset + columnWidths[0] + columnWidths[1] + columnWidths[2] + columnWidths[3] + columnWidths[4], TABLE_HEADER_Y, tableHeaderPaint)
+
+
+        var yOffset = TABLE_HEADER_Y + ROW_HEIGHT
+
+        for (transaction in transactionList) {
+            canvas.drawText(transaction.transactionDetail, xOffset, yOffset, rowPaint)
+            canvas.drawText(transaction.recipientNo, xOffset + columnWidths[0], yOffset, rowPaint)
+            canvas.drawText(transaction.date, xOffset + columnWidths[0] + columnWidths[1], yOffset, rowPaint)
+            canvas.drawText(transaction.moneyIn.toString(), xOffset + columnWidths[0] + columnWidths[1] + columnWidths[2], yOffset, rowPaint)
+            canvas.drawText(transaction.moneyOut.toString(), xOffset + columnWidths[0] + columnWidths[1] + columnWidths[2] + columnWidths[3], yOffset, rowPaint)
+            canvas.drawText(transaction.moneyBalance.toString(), xOffset + columnWidths[0] + columnWidths[1] + columnWidths[2] + columnWidths[3] + columnWidths[4], yOffset, rowPaint)
+
+            yOffset += ROW_HEIGHT
+        }
+    }
+
+    private fun calculateColumnWidths(): List<Float> {
+        val MARGIN_SIZE = 20f
+        val totalWidth = A4_WIDTH - (MARGIN_SIZE * 2)
+        val columnWidths = mutableListOf<Float>()
+
+        val transactionDetailWidth = totalWidth * 0.4f
+        val recipientNoWidth = totalWidth * 0.15f
+        val dateWidth = totalWidth * 0.15f
+        val moneyInWidth = totalWidth * 0.1f
+        val moneyOutWidth = totalWidth * 0.1f
+        val moneyBalanceWidth = totalWidth * 0.1f
+
+        columnWidths.add(transactionDetailWidth)
+        columnWidths.add(recipientNoWidth)
+        columnWidths.add(dateWidth)
+        columnWidths.add(moneyInWidth)
+        columnWidths.add(moneyOutWidth)
+        columnWidths.add(moneyBalanceWidth)
+
+        return columnWidths
+    }
+
+    @RequiresApi(Build.VERSION_CODES.O)
+    private fun getCurrentDateTime(): String {
+        val currentDateTime = LocalDateTime.now()
+        val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")
+        return currentDateTime.format(formatter)
+    }
+
+    companion object {
+        private const val A4_WIDTH = 595
+        private const val A4_HEIGHT = 842
+        private const val MARGIN_SIZE = 595f
+        private const val TABLE_HEADER_Y = 842f
+        private const val ROW_HEIGHT = 842f
+    }
+}
+
+data class TransactionHistory(
+    val transactionDetail: String,
+    val recipientNo: String,
+    val date: String,
+    val moneyIn: Double,
+    val moneyOut: Double,
+    val moneyBalance: Double
+)
+
+val transactionList = listOf(
+    TransactionHistory(
+        transactionDetail = "Payment for Mpesa no",
+        recipientNo = "REIUYOBHY",
+        date = "12/20/2023",
+        moneyIn = 200.0,
+        moneyOut = 300.0,
+        moneyBalance = 3000.0
+    ),
+    TransactionHistory("Payment received", "123456789", "2023-04-01", 100.0, 0.0, 100.0),
+    TransactionHistory("Transfer to savings", "987654321", "2023-04-02", 0.0, 50.0, 50.0),
+    TransactionHistory("Withdrawal", "555555555", "2023-04-03", 0.0, 20.0, 30.0),
+    TransactionHistory("Payment received", "123456789", "2023-04-04", 50.0, 0.0, 80.0),
+    TransactionHistory(
+        transactionDetail = "Payment for Mpesa no",
+        recipientNo = "REIUYOBHY",
+        date = "12/20/2023",
+        moneyIn = 200.0,
+        moneyOut = 300.0,
+        moneyBalance = 3000.0
+    ),
+    TransactionHistory(
+        transactionDetail = "Payment for Mpesa no",
+        recipientNo = "REIUYOBHY",
+        date = "12/20/2023",
+        moneyIn = 200.0,
+        moneyOut = 300.0,
+        moneyBalance = 3000.0
+    ),
+)
+*/
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/report_pdf/TransactionStatementReport.kt b/presentation/src/main/java/com/dev/chacha/presentation/report_pdf/TransactionStatementReport.kt
new file mode 100644
index 0000000..15d3a0e
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/report_pdf/TransactionStatementReport.kt
@@ -0,0 +1,21 @@
+package com.dev.chacha.presentation.report_pdf
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+
+@Composable
+fun TransactionStatementReport() {
+    Surface(
+        color = MaterialTheme.colors.background,
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Box {
+            // Generate the transaction statement report PDF file
+        }
+    }
+}
+
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyBottomSheetContent.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyBottomSheetContent.kt
index c4fe716..24b6fc5 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyBottomSheetContent.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyBottomSheetContent.kt
@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.BottomSheetScaffoldState
-import androidx.compose.material.BottomSheetState
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.outlined.Search
@@ -34,26 +33,26 @@ fun SendMoneyBottomSheetContent(
     coroutineScope: CoroutineScope,
     scaffoldState: BottomSheetScaffoldState,
     sendMoneyState: SendMoneyState,
-    onPhoneNumberChanged: (String)->Unit,
-    onAmountChanged:(String)-> Unit,
-    contactListViewModel : ContactListViewModel,
-    onRecipientProvider: (RecipientProvider)->Unit
+    onPhoneNumberChanged: (String) -> Unit,
+    onAmountChanged: (String) -> Unit,
+    contactListViewModel: ContactListViewModel,
+    onRecipientProvider: (RecipientProvider) -> Unit
 ) {
     val context = LocalContext.current
-
     Column(
         modifier = Modifier.fillMaxWidth(),
         verticalArrangement = Arrangement.spacedBy(12.dp)
     ) {
+
         SendMoneyRecipientDropDown(
-            sendMoneyState = sendMoneyState ,
-            onRecipientProvider = { newValue->
+            sendMoneyState = sendMoneyState,
+            onRecipientProvider = { newValue ->
                 onRecipientProvider(newValue)
             }
         )
         RideOutlinedTextField(
             value = sendMoneyState.phoneNumber,
-            onValueChange = {phoneNumber->
+            onValueChange = { phoneNumber ->
                 onPhoneNumberChanged(phoneNumber)
             },
             keyboardType = KeyboardType.Phone,
@@ -63,28 +62,28 @@ fun SendMoneyBottomSheetContent(
                     imageVector = Icons.Outlined.Search,
                     contentDescription = "Call",
                     tint = LocalContentColor.current.copy(alpha = ContentAlpha.medium),
-                    modifier = Modifier.padding(8.dp).size(24.dp)
+                    modifier = Modifier
+                        .padding(8.dp)
+                        .size(24.dp)
                         .clickable {
-                                coroutineScope.launch {
-                                    if (scaffoldState.bottomSheetState.isCollapsed) {
-                                        contactListViewModel.send(ContactUiEvent.GetContacts, context)
-                                        scaffoldState.bottomSheetState.expand()
-
-                                    } else {
-                                        scaffoldState.bottomSheetState.collapse()
-                                    }
+                            coroutineScope.launch {
+                                if (scaffoldState.bottomSheetState.isCollapsed) {
+                                    contactListViewModel.send(ContactUiEvent.GetContacts, context)
+                                    scaffoldState.bottomSheetState.expand()
+                                } else {
+                                    scaffoldState.bottomSheetState.collapse()
                                 }
-
+                            }
                         },
                 )
             },
         )
         RideOutlinedTextField(
             value = sendMoneyState.amount,
-            onValueChange = { amount->
+            onValueChange = { amount ->
                 onAmountChanged(amount)
             },
-            keyboardType = KeyboardType.Phone,
+            keyboardType = KeyboardType.Number,
             hint = stringResource(id = R.string.amount),
             supportText = stringResource(id = R.string.amount_support_text),
 
@@ -98,5 +97,6 @@ fun SendMoneyBottomSheetContent(
             enable = sendMoneyState.phoneNumber.isNotBlank() && sendMoneyState.amount.isNotBlank()
         )
     }
-
 }
+
+
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyRecipientDropDown.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyRecipientDropDown.kt
index 6ed0820..87688c2 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyRecipientDropDown.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyRecipientDropDown.kt
@@ -18,8 +18,10 @@ import androidx.compose.material.icons.filled.Phone
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -28,6 +30,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.dimensionResource
@@ -42,7 +45,7 @@ fun SendMoneyRecipientDropDown(
     sendMoneyState: SendMoneyState,
     onRecipientProvider: (RecipientProvider)->Unit
 ) {
-    val sendMoneyViewModel: SendMoneyViewModel = viewModel()
+//    val sendMoneyViewModel: SendMoneyViewModel = viewModel()
     var textfieldSize by remember { mutableStateOf(Size.Zero) }
     var expanded by remember { mutableStateOf(false) }
     val interactionSource = remember { MutableInteractionSource() }
@@ -82,7 +85,15 @@ fun SendMoneyRecipientDropDown(
                         .clickable { expanded = !expanded }
                 )
             },
-            interactionSource = interactionSource
+            interactionSource = interactionSource,
+            colors = TextFieldDefaults.outlinedTextFieldColors(
+                containerColor = Color.Transparent,
+                focusedBorderColor = MaterialTheme.colorScheme.onBackground,
+                cursorColor = Color.Transparent,
+                focusedLabelColor = Color.Transparent
+
+
+            )
         )
         DropdownMenu(
             expanded = expanded,
@@ -98,7 +109,8 @@ fun SendMoneyRecipientDropDown(
                         .align(Alignment.CenterHorizontally),
                     text = { Text(text = item.name) },
                     onClick = {
-                        sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.RecipientProviderSelected(item))
+                        onRecipientProvider(item)
+//                        sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.RecipientProviderSelected(item))
                         expanded = false
                     },
                     leadingIcon = {
@@ -117,7 +129,7 @@ fun SendMoneyRecipientDropDown(
 
 }
 
-fun getRecipientProviderString(recipientProvider: String, context: Context): String {
+/*fun getRecipientProviderString(recipientProvider: String, context: Context): String {
     return if (recipientProvider.isEmpty() || recipientProvider == Constants.RECIPIENT_PROVIDER) {
         context.getString(R.string.all_recpient_with_emoji)
     } else {
@@ -143,5 +155,5 @@ fun getRecipientProviderIcon(recipientProvider: String): String {
         RecipientProvider.AirtelMoney -> Icons.Default.AttachMoney.toString()
         RecipientProvider.Tkash -> Icons.Default.AccountBalanceWallet.toString()
     }
-}
+}*/
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyScreen.kt
deleted file mode 100644
index 6b9704d..0000000
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyScreen.kt
+++ /dev/null
@@ -1,259 +0,0 @@
-package com.dev.chacha.presentation.send_money
-
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.interaction.collectIsPressedAsState
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.material.BottomSheetScaffold
-import androidx.compose.material.BottomSheetValue
-import androidx.compose.material.ContentAlpha
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.KeyboardArrowDown
-import androidx.compose.material.icons.filled.KeyboardArrowUp
-import androidx.compose.material.icons.outlined.Search
-import androidx.compose.material.rememberBottomSheetScaffoldState
-import androidx.compose.material.rememberBottomSheetState
-import androidx.compose.material3.DropdownMenu
-import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.Icon
-import androidx.compose.material3.LocalContentColor
-import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
-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.rememberCoroutineScope
-import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.geometry.Size
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.layout.onGloballyPositioned
-import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.res.dimensionResource
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.input.KeyboardType
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.toSize
-import androidx.lifecycle.viewmodel.compose.viewModel
-import androidx.navigation.NavController
-import androidx.navigation.compose.rememberNavController
-import com.dev.chacha.presentation.R
-import com.dev.chacha.presentation.common.components.AppToolbar
-import com.dev.chacha.presentation.common.components.ContinueButton
-import com.dev.chacha.presentation.common.components.RideOutlinedTextField
-import com.dev.chacha.presentation.contactList.ContactListViewModel
-import com.dev.chacha.presentation.contactList.ContactSelectionScreen
-import com.dev.chacha.presentation.contactList.ContactUiEvent
-import kotlinx.coroutines.launch
-import timber.log.Timber
-
-@OptIn(ExperimentalMaterialApi::class)
-@Composable
-fun SendMoneyScreen(
-    navigateBack:()->Unit,
-    navController: NavController
-
-) {
-    val sheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)
-    val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState)
-    val viewModel = viewModel<ContactListViewModel>()
-    val coroutineScope = rememberCoroutineScope()
-    val (amount, setAmount) = rememberSaveable { mutableStateOf("") }
-    var selectedRecipient by rememberSaveable { mutableStateOf(RecipientProvider.Mpesa) }
-    var phoneNumber by rememberSaveable { mutableStateOf("") }
-    var textfieldSize by remember { mutableStateOf(Size.Zero) }
-    var expanded by remember { mutableStateOf(false) }
-    val context = LocalContext.current
-    val icon = if (expanded)
-        Icons.Filled.KeyboardArrowUp
-    else
-        Icons.Filled.KeyboardArrowDown
-
-    val interactionSource = remember { MutableInteractionSource() }
-
-    if (interactionSource.collectIsPressedAsState().value)
-        expanded = !expanded
-
-
-    BottomSheetScaffold(
-        scaffoldState = scaffoldState,
-        sheetContent = {
-            Timber.tag("Error Contact").d(phoneNumber)
-            ContactSelectionScreen(
-                onContactSelected = { contact ->
-                    phoneNumber = contact.phoneNumber
-                    coroutineScope.launch {
-                        phoneNumber = contact.phoneNumber
-                        sheetState.collapse()
-                    }
-                }, navController = navController,
-                viewModel = viewModel
-            )
-        },
-        sheetPeekHeight = 0.dp,
-        sheetBackgroundColor = Color.Unspecified.copy(alpha = 0F),
-        modifier = Modifier.fillMaxSize()
-
-    ) {
-        Scaffold(
-            topBar = {
-                AppToolbar(
-                    title = stringResource(id = R.string.send_money),
-                    showBackArrow = true,
-                    navigateBack = {navigateBack()}
-                )
-            },
-        ) { padding ->
-            Column(
-                modifier = Modifier
-                    .padding(padding)
-                    .padding(horizontal = 16.dp)
-            ) {
-                Column(modifier = Modifier.fillMaxWidth()) {
-                    OutlinedTextField(
-                        value = selectedRecipient.name,
-                        onValueChange = {newValue->
-                            val newProvider = recipientProvider.find { it.name == newValue }
-                            if (newProvider != null) {
-                                selectedRecipient = newProvider
-                            }
-                        },
-                        trailingIcon = {
-                            Icon(icon, "contentDescription",
-                                Modifier.clickable { expanded = !expanded })
-                        },
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .padding(vertical = dimensionResource(id = R.dimen.margin_10))
-                            .clickable {
-                                expanded = !expanded
-                            }
-                            .onGloballyPositioned { coordinates ->
-                                textfieldSize = coordinates.size.toSize()
-                            },
-                        readOnly = true,
-                        leadingIcon = {
-                            Icon(
-                                selectedRecipient.icon,
-                                "contentDescription",
-                                modifier = Modifier.size(24.dp)
-                                    .clickable { expanded = !expanded }
-                            )
-                        },
-                        interactionSource = interactionSource
-                    )
-                    DropdownMenu(
-                        expanded = expanded,
-                        onDismissRequest = { expanded = false },
-                        modifier = Modifier
-                            .width(with(LocalDensity.current) { textfieldSize.width.toDp() }),
-                    ) {
-                        recipientProvider.forEach { item ->
-                            DropdownMenuItem(
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .padding(8.dp)
-                                    .align(Alignment.CenterHorizontally),
-                                text = { Text(text = item.name) },
-                                onClick = {
-                                    selectedRecipient = item
-                                    expanded = false
-                                },
-                                leadingIcon = {
-                                    Icon(
-                                        item.icon,
-                                        contentDescription = item.name,
-                                        modifier = Modifier.padding(end = 8.dp)
-                                    )
-
-                                }
-                            )
-                        }
-
-                    }
-                }
-
-                Spacer(modifier = Modifier.height(12.dp))
-
-                RideOutlinedTextField(
-                    value = phoneNumber,
-                    onValueChange = {
-                        phoneNumber = it
-                    },
-                    keyboardType = KeyboardType.Phone,
-                    hint = stringResource(id = R.string.phoneNumber),
-                    trailingIcon = {
-                        Icon(
-                            imageVector = Icons.Outlined.Search,
-                            contentDescription = "Call",
-                            modifier = Modifier
-                                .padding(8.dp)
-                                .size(24.dp)
-                                .clickable {
-                                    coroutineScope.launch {
-                                        coroutineScope.launch {
-                                            if (sheetState.isCollapsed) {
-                                                viewModel.send(ContactUiEvent.GetContacts, context)
-                                                sheetState.expand()
-                                            } else {
-                                                sheetState.collapse()
-                                            }
-                                        }
-                                    }
-                                },
-                            tint = LocalContentColor.current.copy(alpha = ContentAlpha.medium)
-                        )
-                    },
-                )
-                Spacer(modifier = Modifier.height(12.dp))
-
-                RideOutlinedTextField(
-                    value = amount,
-                    onValueChange = {
-                        setAmount(it)
-                    },
-                    keyboardType = KeyboardType.Phone,
-                    hint = stringResource(id = R.string.amount),
-                    supportText = stringResource(id = R.string.amount_support_text),
-                    error = if (amount.isEmpty() && phoneNumber.isNotEmpty() && recipientProvider.isEmpty()) "Enter amount" else "",
-                    isError = amount.isEmpty() && phoneNumber.isNotEmpty() && recipientProvider.isNotEmpty()
-                )
-
-                Spacer(modifier = Modifier.height(20.dp))
-
-                ContinueButton(
-                    text = stringResource(id = R.string.continuee),
-                    onClick = {},
-                    enable = phoneNumber.isNotBlank() && amount.isNotBlank()
-                )
-
-            }
-        }
-    }
-
-
-}
-
-
-@Composable
-@Preview
-fun PreviewSendMoneyScreen() {
-    SendMoneyScreen(
-        navigateBack = { /*TODO*/ },
-        navController = rememberNavController()
-    )
-}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyState.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyState.kt
index 7453523..2e64f06 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyState.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyState.kt
@@ -1,5 +1,6 @@
 package com.dev.chacha.presentation.send_money
 
+import androidx.compose.material.BottomSheetScaffoldState
 import androidx.compose.material.BottomSheetState
 import androidx.compose.material.BottomSheetValue
 import androidx.compose.material.ExperimentalMaterialApi
@@ -10,5 +11,7 @@ data class SendMoneyState(
     val expanded: Boolean = false,
     val phoneNumber: String = "",
     val amount: String = "",
-    val selectedRecipient: RecipientProvider = RecipientProvider.Mpesa
+    val selectedRecipient: RecipientProvider = RecipientProvider.Mpesa,
 )
+
+
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyViewModel.kt
index 51243cf..63abc92 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyViewModel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendMoneyViewModel.kt
@@ -19,19 +19,16 @@ class SendMoneyViewModel : ViewModel() {
 
     val sendMoneyState = MutableStateFlow(SendMoneyState())
 
-
     fun onSendMoneyEvent(event: SendMoneyEvent){
         when(event){
             is SendMoneyEvent.AmountChanged -> {
                 sendMoneyState.update { it.copy(amount = event.amount) }
             }
             SendMoneyEvent.CollapseSheet -> {
-                sendMoneyState.update { it.copy(expanded = false) }
-                sendMoneyState.update { it.copy(sheetState = BottomSheetState(initialValue = BottomSheetValue.Collapsed)) }
+
             }
             SendMoneyEvent.ExpandSheet -> {
-                sendMoneyState.update { it.copy(expanded = true) }
-                sendMoneyState.update { it.copy(sheetState = BottomSheetState(initialValue = BottomSheetValue.Expanded)) }
+
             }
             is SendMoneyEvent.PhoneNumberChanged -> {
                 sendMoneyState.update { it.copy(phoneNumber = event.phoneNumber) }
@@ -42,42 +39,4 @@ class SendMoneyViewModel : ViewModel() {
         }
     }
 
-
-
-    private val _mobileNumber = mutableStateOf("")
-    val mobileNumber: State<String> = _mobileNumber
-
-    private val _amount = mutableStateOf("")
-    val amount: State<String> = _amount
-
-    private val _selectedRecipient = mutableStateOf(RecipientProvider.Mpesa)
-    val selectedRecipient: State<RecipientProvider> = _selectedRecipient
-
-    private val _phoneNumber = mutableStateOf("")
-    val phoneNumber: State<String> = _phoneNumber
-
-    private val _coroutineScope = viewModelScope
-    val coroutineScope: CoroutineScope = _coroutineScope
-
-    @OptIn(ExperimentalMaterialApi::class)
-    fun updateSheetState(state: BottomSheetValue) {
-        _sheetState.value = state
-    }
-
-    fun updateMobileNumber(number: String) {
-        _mobileNumber.value = number
-    }
-
-    fun updateAmount(amount: String) {
-        _amount.value = amount
-    }
-
-    fun updateSelectedRecipient(recipient: RecipientProvider) {
-        _selectedRecipient.value = recipient
-    }
-
-    fun updatePhoneNumber(number: String) {
-        _phoneNumber.value = number
-    }
-
 }
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendsMoneyScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendsMoneyScreen.kt
index 1fa3805..e55841b 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendsMoneyScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/send_money/SendsMoneyScreen.kt
@@ -35,17 +35,15 @@ import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalMaterialApi::class, ExperimentalCoroutinesApi::class)
 @Composable
-fun SendsMoneyScreen(
-    navigateBack:()->Unit,
-    navController: NavController
+fun SendsMoneyScreen(navigateBack:()->Unit, ) {
 
-) {
     val sendMoneyViewModel: SendMoneyViewModel = viewModel()
     val sendMoneyState by sendMoneyViewModel.sendMoneyState.collectAsState()
     val sheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)
     val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState)
-    val contactListViewModel = viewModel<ContactListViewModel>()
+    val viewModel = viewModel<ContactListViewModel>()
     val coroutineScope = rememberCoroutineScope()
+    val navController = rememberNavController()
 
 
     BottomSheetScaffold(
@@ -53,12 +51,11 @@ fun SendsMoneyScreen(
         sheetContent = {
             ContactSelectionScreen(
                 onContactSelected = { contact ->
-                    sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.PhoneNumberChanged(contact.phoneNumber))
                     coroutineScope.launch {
                         sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.PhoneNumberChanged(contact.phoneNumber))
+                        sheetState.collapse()
                     }
                 }, navController = navController,
-                viewModel = contactListViewModel
             )
         },
         sheetPeekHeight = 0.dp,
@@ -78,10 +75,11 @@ fun SendsMoneyScreen(
             Column(
                 modifier = Modifier
                     .padding(padding)
+                    .padding(horizontal = 16.dp)
             ) {
                 SendMoneyBottomSheetContent(
-                    coroutineScope,
-                    scaffoldState,
+                    coroutineScope = coroutineScope,
+                    scaffoldState = scaffoldState,
                     sendMoneyState = sendMoneyState,
                     onPhoneNumberChanged = { phoneNumber->
                         sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.PhoneNumberChanged(phoneNumber))
@@ -89,7 +87,7 @@ fun SendsMoneyScreen(
                     onAmountChanged = { amount ->
                         sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.AmountChanged(amount))
                     },
-                    contactListViewModel = contactListViewModel,
+                    contactListViewModel = viewModel,
                     onRecipientProvider = {  newProvider->
                         sendMoneyViewModel.onSendMoneyEvent(SendMoneyEvent.RecipientProviderSelected(newProvider))
                     }
@@ -102,6 +100,15 @@ fun SendsMoneyScreen(
 
 }
 
+@Composable
+@Preview
+fun SendsMoneyScreenPreview() {
+    SendsMoneyScreen(
+        navigateBack = {}
+    )
+
+}
+
 
 
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/send_money/components/SendMoneyContentScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/send_money/components/SendMoneyContentScreen.kt
index a1e69b9..76455af 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/send_money/components/SendMoneyContentScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/send_money/components/SendMoneyContentScreen.kt
@@ -17,7 +17,6 @@ import androidx.compose.ui.unit.dp
 import com.dev.chacha.presentation.R
 import com.dev.chacha.presentation.common.components.AppToolbar
 import com.dev.chacha.presentation.common.theme.PrimaryColor
-import com.dev.chacha.presentation.send_money.SendMoneyScreen
 import com.dev.chacha.presentation.send_money.artel_money.ArtelMoneyScreen
 import com.dev.chacha.presentation.send_money.mpesa.MpesaScreen
 import com.dev.chacha.presentation.send_money.tkash.TkashScreen
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/settings/SettingsScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/settings/SettingsScreen.kt
index 85bb0c0..2e3c623 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/settings/SettingsScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/settings/SettingsScreen.kt
@@ -2,20 +2,32 @@ package com.dev.chacha.presentation.settings
 
 import android.os.Build
 import androidx.annotation.RequiresApi
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.dev.chacha.presentation.R
 import com.dev.chacha.presentation.account.component.AccountCard
+import com.dev.chacha.presentation.account.component.AccountCards
 import com.dev.chacha.presentation.common.components.AppToolbar
+import com.dev.chacha.presentation.common.theme.Theme
+import com.dev.chacha.presentation.theme.ThemeViewModel
+import com.dev.chacha.presentation.theme.component.ThemeCard
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.ExperimentalCoroutinesApi
 
 
+@OptIn(ExperimentalCoroutinesApi::class)
 @RequiresApi(Build.VERSION_CODES.P)
 @Composable
 fun SettingsScreen(
@@ -25,6 +37,19 @@ fun SettingsScreen(
     navigateBack: () -> Unit
 ) {
 
+    val selectedTheme by viewModel.currentTheme.collectAsState()
+    val themeViewModel: ThemeViewModel = hiltViewModel()
+    val themeName by themeViewModel.theme.collectAsState(
+        initial = Theme.LIGHT_THEME.themeName,
+        context = Dispatchers.Main.immediate
+    )
+    val context = LocalContext.current
+    val themes = listOf(
+        Theme.LIGHT_THEME,
+        Theme.DARK_THEME,
+        Theme.FOLLOW_SYSTEM,
+        Theme.MATERIAL_YOU
+    )
     Scaffold(
         topBar = {
             AppToolbar(
@@ -45,21 +70,35 @@ fun SettingsScreen(
                         onClick = {
                             navigateToTheme()
                         },
-                        title = "Theme",
-                        icon = R.drawable.insights_icon
+                        title = when(themeName){
+                            Theme.LIGHT_THEME.themeName -> "Light"
+                            Theme.DARK_THEME.themeName -> "Dark"
+                            Theme.FOLLOW_SYSTEM.themeName -> "System"
+                            Theme.MATERIAL_YOU.themeName -> "Material You"
+                            else -> { "System"}
+                        },
+                        icon = R.drawable.insights_icon,
                     )
                 }
                 item {
-
                     AccountCard(
                         onClick = {
                             navigateToBiometricSettings()
                         },
-                        title = "Enable FingerPrint Lock",
+                        title = "Biometric",
                         icon = R.drawable.fingerprint_icon,
                     )
                 }
 
+                item {
+                    Text(
+                        text = "Date",
+                        modifier = Modifier.clickable {
+
+                        }
+                    )
+                }
+
             }
         }
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/theme/ThemeViewModel.kt b/presentation/src/main/java/com/dev/chacha/presentation/theme/ThemeViewModel.kt
index cb6ca3d..a3ff136 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/theme/ThemeViewModel.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/theme/ThemeViewModel.kt
@@ -10,6 +10,4 @@ class ThemeViewModel @Inject constructor(
      themeRepository: ThemeRepository
 ): ViewModel() {
     val theme = themeRepository.themeStream
-
-
 }
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/theme/component/ThemeCard.kt b/presentation/src/main/java/com/dev/chacha/presentation/theme/component/ThemeCard.kt
new file mode 100644
index 0000000..bad7c49
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/theme/component/ThemeCard.kt
@@ -0,0 +1,79 @@
+package com.dev.chacha.presentation.theme.component
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.dev.chacha.presentation.R
+import com.dev.chacha.presentation.common.theme.Brutalista
+
+@Composable
+fun ThemeCard(
+    onClick: (Int) -> Unit,
+    themeValue: Int,
+    themeName: String ,
+    icon: Int,
+    onSelectTheme: (Int) -> Unit,
+    isSelected: Boolean = false
+) {
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .clickable { onClick(themeValue)},
+        shape = RoundedCornerShape(8.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6F),
+        )
+    ) {
+        Row(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(16.dp),
+            horizontalArrangement = Arrangement.SpaceBetween,
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Icon(
+                    painter = painterResource(id = icon),
+                    contentDescription = null,
+                    modifier = Modifier.size(25.dp)
+                )
+                Text(
+                    text = themeName,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    fontSize = 14.sp,
+                    fontFamily = Brutalista,
+                )
+                Text(
+                    text = themeValue.toInt().toString(),
+                    color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    fontSize = 14.sp,
+                    fontFamily = Brutalista,
+                )
+            }
+            Icon(
+                painter = painterResource(id = R.drawable.chevron_right),
+                contentDescription = null
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/transaction/components/HorizontalCardItem.kt b/presentation/src/main/java/com/dev/chacha/presentation/transaction/components/HorizontalCardItem.kt
index 3bc0e7f..c9ccaff 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/transaction/components/HorizontalCardItem.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/transaction/components/HorizontalCardItem.kt
@@ -4,6 +4,7 @@ import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
@@ -23,19 +24,21 @@ import com.dev.chacha.presentation.common.theme.PrimaryColor
 
 @Composable
 fun HorizontalCardItem(
-    @DrawableRes drawable:  Int,
+    @DrawableRes drawable: Int,
     @StringRes text: Int,
-    onItemClick: ()-> Unit
+    onItemClick: () -> Unit
 ) {
     Card(
         modifier = Modifier
             .height(110.dp)
             .width(110.dp)
-            .clickable(onClick = onItemClick),
+            .clickable(MutableInteractionSource(), null) {
+                onItemClick()
+            },
         colors = CardDefaults.cardColors(
             containerColor = MaterialTheme.colorScheme.surfaceVariant.copy(alpha = 0.6F),
         ),
-    ){
+    ) {
         Column(
             modifier = Modifier
                 .fillMaxSize()
@@ -43,13 +46,13 @@ fun HorizontalCardItem(
             horizontalAlignment = Alignment.CenterHorizontally,
             verticalArrangement = Arrangement.Center
         ) {
-           Image(
-               painter =  painterResource(id = drawable),
-               contentDescription = null,
-               modifier = Modifier
-                   .size(25.dp),
-               colorFilter = ColorFilter.tint(PrimaryColor)
-           )
+            Image(
+                painter = painterResource(id = drawable),
+                contentDescription = null,
+                modifier = Modifier
+                    .size(25.dp),
+                colorFilter = ColorFilter.tint(PrimaryColor)
+            )
             Spacer(modifier = Modifier.height(8.dp))
             Text(
                 text = stringResource(id = text),
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/transaction_history/components/TransHistoryItem.kt b/presentation/src/main/java/com/dev/chacha/presentation/transaction_history/components/TransHistoryItem.kt
index f6c1453..72093e7 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/transaction_history/components/TransHistoryItem.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/transaction_history/components/TransHistoryItem.kt
@@ -28,7 +28,11 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.constraintlayout.compose.ConstraintLayout
 import coil.compose.AsyncImage
+import com.dev.chacha.presentation.extensions.formatContact
+import com.dev.chacha.presentation.extensions.formatDate
+import com.dev.chacha.presentation.extensions.formatDateTime
 import com.dev.chacha.presentation.extensions.getInitials
 import com.dev.chacha.presentation.transaction_history.TransactionsItem
 import com.dev.chacha.presentation.transaction_history.transactionsItem
@@ -40,146 +44,116 @@ fun TransHistoryItem(
     transactionItem: TransactionsItem,
     onTransactionClick: (TransactionsItem) -> Unit
 ) {
-    Column(
+    ConstraintLayout(
         modifier = Modifier
             .padding(vertical = 5.dp)
-            .fillMaxWidth(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally
+            .fillMaxWidth()
     ) {
+        val (profileImage, nameText, amountText, contactText, dateTimeText) = createRefs()
 
-        Row(
-            modifier = Modifier
-                .fillMaxWidth(),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Start
-        ) {
-            if (transactionItem.image != null) {
-                Box(
-                    modifier = Modifier
-                        .size(45.dp)
-                        .clip(CircleShape)
-                        .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08F)),
-                    contentAlignment = Alignment.Center
-                ) {
-                    AsyncImage(
-                        model = transactionItem.image,
-                        contentDescription = "profile_image",
-                        modifier = Modifier
-                            .size(30.dp)
-                            .clip(shape = CircleShape),
-                        placeholder = null
-                    )
-                }
-
-            } else {
-                val transactionInitials = transactionItem.name
-                Box(
+        if (transactionItem.image != null) {
+            Box(
+                modifier = Modifier
+                    .size(45.dp)
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08F))
+                    .constrainAs(profileImage) {
+                        start.linkTo(parent.start)
+                        centerVerticallyTo(parent)
+                    },
+                contentAlignment = Alignment.Center
+            ) {
+                AsyncImage(
+                    model = transactionItem.image,
+                    contentDescription = "profile_image",
                     modifier = Modifier
-                        .size(45.dp)
-                        .clip(CircleShape)
-                        .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08F)),
-                    contentAlignment = Alignment.Center
-                ) {
-                    Text(
-                        text = getInitials(transactionInitials),
-                        fontWeight = FontWeight.Normal,
-                        textAlign = TextAlign.Center,
-                        style = typography.headlineSmall
-                    )
-                }
+                        .size(30.dp)
+                        .clip(shape = CircleShape),
+                    placeholder = null
+                )
             }
-            Column(
+        } else {
+            val transactionInitials = transactionItem.name
+            Box(
                 modifier = Modifier
-                    .padding(start = 10.dp)
-                    .weight(1f),
-                verticalArrangement = Arrangement.Center
+                    .size(45.dp)
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08F))
+                    .constrainAs(profileImage) {
+                        start.linkTo(parent.start)
+                        centerVerticallyTo(parent)
+                    },
+                contentAlignment = Alignment.Center
             ) {
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween
-                ) {
-                    Text(
-                        text = transactionItem.name,
-                        style = typography.labelSmall,
-                        overflow = TextOverflow.Ellipsis,
-                        maxLines = 1,
-                        textAlign = TextAlign.Start,
-                    )
-                    Text(
-                        text = "KSH${transactionItem.amount}",
-                        textAlign = TextAlign.End,
-                        style = typography.labelSmall,
-                        overflow = TextOverflow.Ellipsis,
-                        maxLines = 1
-                    )
-                }
-
-                Row(
-                    modifier = Modifier.fillMaxWidth(),
-                    horizontalArrangement = Arrangement.SpaceBetween
-                ) {
-                    val formattedContact = formatContact(transactionItem.contact)
-                    Text(
-                        text = formattedContact,
-                        style = typography.labelSmall,
-                        overflow = TextOverflow.Ellipsis,
-                        maxLines = 1,
-                        textAlign = TextAlign.Start,
-                    )
-
-                    Text(
-                        text = "${formatDate(transactionItem.date)},${transactionItem.time}",
-                        textAlign = TextAlign.End,
-                        style = typography.labelSmall,
-                        overflow = TextOverflow.Ellipsis,
-                        maxLines = 1
-                    )
-
-                }
-
+                Text(
+                    text = getInitials(transactionInitials),
+                    fontWeight = FontWeight.Normal,
+                    textAlign = TextAlign.Center,
+                    style = typography.headlineSmall
+                )
             }
-
         }
+
+        Text(
+            text = transactionItem.name,
+            style = typography.labelSmall,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            textAlign = TextAlign.Start,
+            modifier = Modifier
+                .constrainAs(nameText) {
+                    start.linkTo(profileImage.end, margin = 10.dp)
+                    top.linkTo(amountText.top)
+                }
+        )
+
+        Text(
+            text = "KSH${transactionItem.amount}",
+            textAlign = TextAlign.End,
+            style = typography.labelSmall,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            modifier = Modifier
+                .constrainAs(amountText) {
+                    end.linkTo(parent.end)
+                    top.linkTo(parent.top)
+                }
+        )
+
+        val formattedContact = formatContact(transactionItem.contact)
+        Text(
+            text = formattedContact,
+            style = typography.labelSmall,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            textAlign = TextAlign.Start,
+            modifier = Modifier
+                .constrainAs(contactText) {
+                    start.linkTo(nameText.start)
+                    top.linkTo(nameText.bottom)
+                }
+        )
+
+        Text(
+            text = "${formatDate(transactionItem.date)}, ${transactionItem.time}",
+            textAlign = TextAlign.End,
+            style = typography.labelSmall,
+            overflow = TextOverflow.Ellipsis,
+            maxLines = 1,
+            modifier = Modifier
+                .constrainAs(dateTimeText) {
+                    end.linkTo(amountText.end)
+                    top.linkTo(amountText.bottom)
+                }
+        )
     }
 }
 
 
-private fun formatDate(date: String): String? {
-    val inputFormat = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
-    val outputFormat = SimpleDateFormat("dd MMM", Locale.getDefault())
-    val parsedDate = inputFormat.parse(date)
-    return parsedDate?.let { outputFormat.format(it) }
-}
 
 
-private fun formatContact(contact: String): String {
-    val formattedContact: String =when {
-        contact.startsWith("254") -> {
-            val prefix = contact.substring(0, 6)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
-        contact.startsWith("07") -> {
-            val prefix = contact.substring(0, 4)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
-        contact.startsWith("+254") -> {
-            val prefix = contact.substring(0, 7)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
-        contact.startsWith("01") -> {
-            val prefix = contact.substring(0, 4)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
 
-        else -> contact
-    }
-    return formattedContact
-}
+
 
 
 @Composable
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/AllTransactionContent.kt b/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/AllTransactionContent.kt
index 257b463..119d8de 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/AllTransactionContent.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/AllTransactionContent.kt
@@ -32,11 +32,11 @@ fun AllTransactionContent(
                 contentPadding = PaddingValues(8.dp),
                 verticalArrangement = Arrangement.spacedBy(8.dp)
             ) {
-                val groupedTransactions = transactions.groupBy { it.date }
+                val sortedTransactions = transactions.sortedWith(compareByDescending<TransactionsItem> { it.date }.thenByDescending { it.time })
 
-                val sortedGroupedTransactions = groupedTransactions.toSortedMap(compareByDescending { it })
+                val groupedTransactions = sortedTransactions.groupBy { it.date }
 
-                sortedGroupedTransactions.forEach { (date, transactionsByDate) ->
+                groupedTransactions.forEach { (date, transactionsByDate) ->
                     val formattedDate = formatDate(date)
                     stickyHeader {
                         if (formattedDate != null) {
@@ -57,6 +57,7 @@ fun AllTransactionContent(
 
 
 
+
 private fun formatDate(date: String): String? {
     val inputFormat = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
     val outputFormat = SimpleDateFormat("dd MMM yyyy", Locale.getDefault())
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/TransactionsHistoryItem.kt b/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/TransactionsHistoryItem.kt
index ea558eb..6b099c6 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/TransactionsHistoryItem.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/transactions_all/TransactionsHistoryItem.kt
@@ -27,6 +27,9 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
+import com.dev.chacha.presentation.extensions.formatContact
+import com.dev.chacha.presentation.extensions.formatDate
+import com.dev.chacha.presentation.extensions.formatDateTime
 import com.dev.chacha.presentation.extensions.getInitials
 import com.dev.chacha.presentation.transaction_history.TransactionsItem
 import com.dev.chacha.presentation.transaction_history.transactionsItem
@@ -127,13 +130,14 @@ fun TransactionHistoryItem(
                     )
 
                     Text(
-                        text = "${formatDate(transactionItem.date)},${transactionItem.time}",
+                        text = "${formatDate(transactionItem.date)}, ${transactionItem.time}",
                         textAlign = TextAlign.End,
                         style = typography.labelSmall,
                         overflow = TextOverflow.Ellipsis,
                         maxLines = 1
                     )
 
+
                 }
 
             }
@@ -143,41 +147,10 @@ fun TransactionHistoryItem(
 }
 
 
-private fun formatDate(date: String): String? {
-    val inputFormat = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
-    val outputFormat = SimpleDateFormat("dd MMM", Locale.getDefault())
-    val parsedDate = inputFormat.parse(date)
-    return parsedDate?.let { outputFormat.format(it) }
-}
 
 
-private fun formatContact(contact: String): String {
-    val formattedContact: String =when {
-        contact.startsWith("254") -> {
-            val prefix = contact.substring(0, 6)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
-        contact.startsWith("07") -> {
-            val prefix = contact.substring(0, 4)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
-        contact.startsWith("+254") -> {
-            val prefix = contact.substring(0, 7)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
-        contact.startsWith("01") -> {
-            val prefix = contact.substring(0, 4)
-            val lastThreeDigits = contact.substring(contact.length - 3)
-            "$prefix***$lastThreeDigits"
-        }
 
-        else -> contact
-    }
-    return formattedContact
-}
+
 
 
 
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/HexagonShapeClipper.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/HexagonShapeClipper.kt
new file mode 100644
index 0000000..ea17bbb
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/HexagonShapeClipper.kt
@@ -0,0 +1,37 @@
+package com.dev.chacha.presentation.util
+
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Outline
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.LayoutDirection
+import kotlin.math.cos
+import kotlin.math.sin
+
+
+class HexagonShapeClipper : Shape {
+    override fun createOutline(size: Size, layoutDirection: LayoutDirection, density: Density): Outline {
+        val path = Path()
+        val sideLength = size.width / 2
+
+        val centerX = size.width / 2
+        val centerY = size.height / 2
+
+        val angleDegrees = 60f
+        val angleRadians = Math.toRadians(angleDegrees.toDouble())
+        val radius = sideLength / cos(angleRadians)
+
+        val startPointX = centerX + radius * cos(0.toDouble())
+        val startPointY = centerY + radius * sin(0.toDouble())
+        path.moveTo(startPointX.toFloat(), startPointY.toFloat())
+
+        for (i in 1 until 6) {
+            val x = centerX + radius * cos(angleRadians * i)
+            val y = centerY + radius * sin(angleRadians * i)
+            path.lineTo(x.toFloat(), y.toFloat())
+        }
+
+        return Outline.Generic(path)
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/Swipeable.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/Swipeable.kt
new file mode 100644
index 0000000..3e7b388
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/Swipeable.kt
@@ -0,0 +1,918 @@
+package com.chacha.presentation.util
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.AnimationSpec
+import androidx.compose.animation.core.SpringSpec
+import androidx.compose.foundation.gestures.DraggableState
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material.ExperimentalMaterialApi
+import androidx.compose.material.SwipeableDefaults.AnimationSpec
+import androidx.compose.material.SwipeableDefaults.StandardResistanceFactor
+import androidx.compose.material.SwipeableDefaults.VelocityThreshold
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.Immutable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.Stable
+import androidx.compose.runtime.State
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.Saver
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.nestedscroll.NestedScrollConnection
+import androidx.compose.ui.input.nestedscroll.NestedScrollSource
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.debugInspectorInfo
+import androidx.compose.ui.unit.Density
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.Velocity
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.lerp
+import com.chacha.presentation.util.SwipeableDefaults.resistanceConfig
+import kotlinx.coroutines.CancellationException
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.filter
+import kotlinx.coroutines.flow.take
+import kotlinx.coroutines.launch
+import kotlin.math.PI
+import kotlin.math.abs
+import kotlin.math.sign
+import kotlin.math.sin
+
+/**
+ * State of the [swipeable] modifier.
+ *
+ * This contains necessary information about any ongoing swipe or animation and provides methods
+ * to change the state either immediately or by starting an animation. To create and remember a
+ * [SwipeableState] with the default animation clock, use [rememberSwipeableState].
+ *
+ * @param initialValue The initial value of the state.
+ * @param animationSpec The default animation that will be used to animate to a new state.
+ * @param confirmStateChange Optional callback invoked to confirm or veto a pending state change.
+ */
+@Stable
+@ExperimentalMaterialApi
+open class SwipeableState<T>(
+    initialValue: T,
+    internal val animationSpec: AnimationSpec<Float> = AnimationSpec,
+    internal val confirmStateChange: (newValue: T) -> Boolean = { true }
+) {
+    /**
+     * The current value of the state.
+     *
+     * If no swipe or animation is in progress, this corresponds to the anchor at which the
+     * [swipeable] is currently settled. If a swipe or animation is in progress, this corresponds
+     * the last anchor at which the [swipeable] was settled before the swipe or animation started.
+     */
+    var currentValue: T by mutableStateOf(initialValue)
+        private set
+
+    /**
+     * Whether the state is currently animating.
+     */
+    var isAnimationRunning: Boolean by mutableStateOf(false)
+        private set
+
+    /**
+     * The current position (in pixels) of the [swipeable].
+     *
+     * You should use this state to offset your content accordingly. The recommended way is to
+     * use `Modifier.offsetPx`. This includes the resistance by default, if resistance is enabled.
+     */
+    val offset: State<Float> get() = offsetState
+
+    /**
+     * The amount by which the [swipeable] has been swiped past its bounds.
+     */
+    val overflow: State<Float> get() = overflowState
+
+    // Use `Float.NaN` as a placeholder while the state is uninitialised.
+    private val offsetState = mutableStateOf(0f)
+    private val overflowState = mutableStateOf(0f)
+
+    // the source of truth for the "real"(non ui) position
+    // basically position in bounds + overflow
+    private val absoluteOffset = mutableStateOf(0f)
+
+    // current animation target, if animating, otherwise null
+    private val animationTarget = mutableStateOf<Float?>(null)
+
+    internal var anchors by mutableStateOf(emptyMap<Float, T>())
+
+    private val latestNonEmptyAnchorsFlow: Flow<Map<Float, T>> =
+        snapshotFlow { anchors }
+            .filter { it.isNotEmpty() }
+            .take(1)
+
+    internal var minBound = Float.NEGATIVE_INFINITY
+    internal var maxBound = Float.POSITIVE_INFINITY
+
+    internal fun ensureInit(newAnchors: Map<Float, T>) {
+        if (anchors.isEmpty()) {
+            // need to do initial synchronization synchronously :(
+            val initialOffset = newAnchors.getOffset(currentValue)
+            requireNotNull(initialOffset) {
+                "The initial value must have an associated anchor."
+            }
+            offsetState.value = initialOffset
+            absoluteOffset.value = initialOffset
+        }
+    }
+
+    internal suspend fun processNewAnchors(
+        oldAnchors: Map<Float, T>,
+        newAnchors: Map<Float, T>
+    ) {
+        if (oldAnchors.isEmpty()) {
+            // If this is the first time that we receive anchors, then we need to initialise
+            // the state so we snap to the offset associated to the initial value.
+            minBound = newAnchors.keys.minOrNull()!!
+            maxBound = newAnchors.keys.maxOrNull()!!
+            val initialOffset = newAnchors.getOffset(currentValue)
+            requireNotNull(initialOffset) {
+                "The initial value must have an associated anchor."
+            }
+            snapInternalToOffset(initialOffset)
+        } else if (newAnchors != oldAnchors) {
+            // If we have received new anchors, then the offset of the current value might
+            // have changed, so we need to animate to the new offset. If the current value
+            // has been removed from the anchors then we animate to the closest anchor
+            // instead. Note that this stops any ongoing animation.
+            minBound = Float.NEGATIVE_INFINITY
+            maxBound = Float.POSITIVE_INFINITY
+            val animationTargetValue = animationTarget.value
+            // if we're in the animation already, let's find it a new home
+            val targetOffset = if (animationTargetValue != null) {
+                // first, try to map old state to the new state
+                val oldState = oldAnchors[animationTargetValue]
+                val newState = newAnchors.getOffset(oldState)
+                // return new state if exists, or find the closes one among new anchors
+                newState ?: newAnchors.keys.minByOrNull { abs(it - animationTargetValue) }!!
+            } else {
+                // we're not animating, proceed by finding the new anchors for an old value
+                val actualOldValue = oldAnchors[offset.value]
+                val value = if (actualOldValue == currentValue) currentValue else actualOldValue
+                newAnchors.getOffset(value) ?: newAnchors
+                    .keys.minByOrNull { abs(it - offset.value) }!!
+            }
+            try {
+                animateInternalToOffset(targetOffset, animationSpec)
+            } catch (c: CancellationException) {
+                // If the animation was interrupted for any reason, snap as a last resort.
+                snapInternalToOffset(targetOffset)
+            } finally {
+                currentValue = newAnchors.getValue(targetOffset)
+                minBound = newAnchors.keys.minOrNull()!!
+                maxBound = newAnchors.keys.maxOrNull()!!
+            }
+        }
+    }
+
+    internal var thresholds: (Float, Float) -> Float by mutableStateOf({ _, _ -> 0f })
+
+    internal var velocityThreshold by mutableStateOf(0f)
+
+    internal var resistance: ResistanceConfig? by mutableStateOf(null)
+
+    internal val draggableState = DraggableState {
+        val newAbsolute = absoluteOffset.value + it
+        val clamped = newAbsolute.coerceIn(minBound, maxBound)
+        val overflow = newAbsolute - clamped
+        val resistanceDelta = resistance?.computeResistance(overflow) ?: 0f
+        offsetState.value = clamped + resistanceDelta
+        overflowState.value = overflow
+        absoluteOffset.value = newAbsolute
+    }
+
+    private suspend fun snapInternalToOffset(target: Float) {
+        draggableState.drag {
+            dragBy(target - absoluteOffset.value)
+        }
+    }
+
+    private suspend fun animateInternalToOffset(target: Float, spec: AnimationSpec<Float>) {
+        draggableState.drag {
+            var prevValue = absoluteOffset.value
+            animationTarget.value = target
+            isAnimationRunning = true
+            try {
+                Animatable(prevValue).animateTo(target, spec) {
+                    dragBy(this.value - prevValue)
+                    prevValue = this.value
+                }
+            } finally {
+                animationTarget.value = null
+                isAnimationRunning = false
+            }
+        }
+    }
+
+    /**
+     * The target value of the state.
+     *
+     * If a swipe is in progress, this is the value that the [swipeable] would animate to if the
+     * swipe finished. If an animation is running, this is the target value of that animation.
+     * Finally, if no swipe or animation is in progress, this is the same as the [currentValue].
+     */
+    @ExperimentalMaterialApi
+    val targetValue: T
+        get() {
+            // TODO(calintat): Track current velocity (b/149549482) and use that here.
+            val target = animationTarget.value ?: computeTarget(
+                offset = offset.value,
+                lastValue = anchors.getOffset(currentValue) ?: offset.value,
+                anchors = anchors.keys,
+                thresholds = thresholds,
+                velocity = 0f,
+                velocityThreshold = Float.POSITIVE_INFINITY
+            )
+            return anchors[target] ?: currentValue
+        }
+
+    /**
+     * Information about the ongoing swipe or animation, if any. See [SwipeProgress] for details.
+     *
+     * If no swipe or animation is in progress, this returns `SwipeProgress(value, value, 1f)`.
+     */
+    @ExperimentalMaterialApi
+    val progress: SwipeProgress<T>
+        get() {
+            val bounds = findBounds(offset.value, anchors.keys)
+            val from: T
+            val to: T
+            val fraction: Float
+            when (bounds.size) {
+                0 -> {
+                    from = currentValue
+                    to = currentValue
+                    fraction = 1f
+                }
+                1 -> {
+                    from = anchors.getValue(bounds[0])
+                    to = anchors.getValue(bounds[0])
+                    fraction = 1f
+                }
+                else -> {
+                    val (a, b) =
+                        if (direction > 0f) {
+                            bounds[0] to bounds[1]
+                        } else {
+                            bounds[1] to bounds[0]
+                        }
+                    from = anchors.getValue(a)
+                    to = anchors.getValue(b)
+                    fraction = (offset.value - a) / (b - a)
+                }
+            }
+            return SwipeProgress(from, to, fraction)
+        }
+
+    /**
+     * The direction in which the [swipeable] is moving, relative to the current [currentValue].
+     *
+     * This will be either 1f if it is is moving from left to right or top to bottom, -1f if it is
+     * moving from right to left or bottom to top, or 0f if no swipe or animation is in progress.
+     */
+    @ExperimentalMaterialApi
+    val direction: Float
+        get() = anchors.getOffset(currentValue)?.let { sign(offset.value - it) } ?: 0f
+
+    /**
+     * Set the state without any animation and suspend until it's set
+     *
+     * @param targetValue The new target value to set [currentValue] to.
+     */
+    @ExperimentalMaterialApi
+    suspend fun snapTo(targetValue: T) {
+        latestNonEmptyAnchorsFlow.collect { anchors ->
+            val targetOffset = anchors.getOffset(targetValue)
+            requireNotNull(targetOffset) {
+                "The target value must have an associated anchor."
+            }
+            snapInternalToOffset(targetOffset)
+            currentValue = targetValue
+        }
+    }
+
+    /**
+     * Set the state to the target value by starting an animation.
+     *
+     * @param targetValue The new value to animate to.
+     * @param anim The animation that will be used to animate to the new value.
+     */
+    @ExperimentalMaterialApi
+    suspend fun animateTo(targetValue: T, anim: AnimationSpec<Float> = animationSpec) {
+        latestNonEmptyAnchorsFlow.collect { anchors ->
+            try {
+                val targetOffset = anchors.getOffset(targetValue)
+                requireNotNull(targetOffset) {
+                    "The target value must have an associated anchor."
+                }
+                animateInternalToOffset(targetOffset, anim)
+            } finally {
+                val endOffset = absoluteOffset.value
+                val endValue = anchors
+                    // fighting rounding error once again, anchor should be as close as 0.5 pixels
+                    .filterKeys { anchorOffset -> abs(anchorOffset - endOffset) < 0.5f }
+                    .values.firstOrNull() ?: currentValue
+                currentValue = endValue
+            }
+        }
+    }
+
+    /**
+     * Perform fling with settling to one of the anchors which is determined by the given
+     * [velocity]. Fling with settling [swipeable] will always consume all the velocity provided
+     * since it will settle at the anchor.
+     *
+     * In general cases, [swipeable] flings by itself when being swiped. This method is to be
+     * used for nested scroll logic that wraps the [swipeable]. In nested scroll developer may
+     * want to trigger settling fling when the child scroll container reaches the bound.
+     *
+     * @param velocity velocity to fling and settle with
+     *
+     * @return the reason fling ended
+     */
+    suspend fun performFling(velocity: Float) {
+        latestNonEmptyAnchorsFlow.collect { anchors ->
+            val lastAnchor = anchors.getOffset(currentValue)!!
+            val targetValue = computeTarget(
+                offset = offset.value,
+                lastValue = lastAnchor,
+                anchors = anchors.keys,
+                thresholds = thresholds,
+                velocity = velocity,
+                velocityThreshold = velocityThreshold
+            )
+            val targetState = anchors[targetValue]
+            if (targetState != null && confirmStateChange(targetState)) animateTo(targetState)
+            // If the user vetoed the state change, rollback to the previous state.
+            else animateInternalToOffset(lastAnchor, animationSpec)
+        }
+    }
+
+    /**
+     * Force [swipeable] to consume drag delta provided from outside of the regular [swipeable]
+     * gesture flow.
+     *
+     * Note: This method performs generic drag and it won't settle to any particular anchor, *
+     * leaving swipeable in between anchors. When done dragging, [performFling] must be
+     * called as well to ensure swipeable will settle at the anchor.
+     *
+     * In general cases, [swipeable] drags by itself when being swiped. This method is to be
+     * used for nested scroll logic that wraps the [swipeable]. In nested scroll developer may
+     * want to force drag when the child scroll container reaches the bound.
+     *
+     * @param delta delta in pixels to drag by
+     *
+     * @return the amount of [delta] consumed
+     */
+    fun performDrag(delta: Float): Float {
+        val potentiallyConsumed = absoluteOffset.value + delta
+        val clamped = potentiallyConsumed.coerceIn(minBound, maxBound)
+        val deltaToConsume = clamped - absoluteOffset.value
+        if (abs(deltaToConsume) > 0) {
+            draggableState.dispatchRawDelta(deltaToConsume)
+        }
+        return deltaToConsume
+    }
+
+    companion object {
+        /**
+         * The default [Saver] implementation for [SwipeableState].
+         */
+        fun <T : Any> Saver(
+            animationSpec: AnimationSpec<Float>,
+            confirmStateChange: (T) -> Boolean
+        ) = Saver<SwipeableState<T>, T>(
+            save = { it.currentValue },
+            restore = { SwipeableState(it, animationSpec, confirmStateChange) }
+        )
+    }
+}
+
+/**
+ * Collects information about the ongoing swipe or animation in [swipeable].
+ *
+ * To access this information, use [SwipeableState.progress].
+ *
+ * @param from The state corresponding to the anchor we are moving away from.
+ * @param to The state corresponding to the anchor we are moving towards.
+ * @param fraction The fraction that the current position represents between [from] and [to].
+ * Must be between `0` and `1`.
+ */
+@Immutable
+@ExperimentalMaterialApi
+class SwipeProgress<T>(
+    val from: T,
+    val to: T,
+    /*@FloatRange(from = 0.0, to = 1.0)*/
+    val fraction: Float
+) {
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is SwipeProgress<*>) return false
+
+        if (from != other.from) return false
+        if (to != other.to) return false
+        if (fraction != other.fraction) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = from?.hashCode() ?: 0
+        result = 31 * result + (to?.hashCode() ?: 0)
+        result = 31 * result + fraction.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "SwipeProgress(from=$from, to=$to, fraction=$fraction)"
+    }
+}
+
+/**
+ * Create and [remember] a [SwipeableState] with the default animation clock.
+ *
+ * @param initialValue The initial value of the state.
+ * @param animationSpec The default animation that will be used to animate to a new state.
+ * @param confirmStateChange Optional callback invoked to confirm or veto a pending state change.
+ */
+@Composable
+@ExperimentalMaterialApi
+fun <T : Any> rememberSwipeableState(
+    initialValue: T,
+    animationSpec: AnimationSpec<Float> = AnimationSpec,
+    confirmStateChange: (newValue: T) -> Boolean = { true }
+): SwipeableState<T> {
+    return rememberSaveable(
+        saver = SwipeableState.Saver(
+            animationSpec = animationSpec,
+            confirmStateChange = confirmStateChange
+        )
+    ) {
+        SwipeableState(
+            initialValue = initialValue,
+            animationSpec = animationSpec,
+            confirmStateChange = confirmStateChange
+        )
+    }
+}
+
+/**
+ * Create and [remember] a [SwipeableState] which is kept in sync with another state, i.e.:
+ *  1. Whenever the [value] changes, the [SwipeableState] will be animated to that new value.
+ *  2. Whenever the value of the [SwipeableState] changes (e.g. after a swipe), the owner of the
+ *  [value] will be notified to update their state to the new value of the [SwipeableState] by
+ *  invoking [onValueChange]. If the owner does not update their state to the provided value for
+ *  some reason, then the [SwipeableState] will perform a rollback to the previous, correct value.
+ */
+@Composable
+@ExperimentalMaterialApi
+internal fun <T : Any> rememberSwipeableStateFor(
+    value: T,
+    onValueChange: (T) -> Unit,
+    animationSpec: AnimationSpec<Float> = AnimationSpec
+): SwipeableState<T> {
+    val swipeableState = remember {
+        SwipeableState(
+            initialValue = value,
+            animationSpec = animationSpec,
+            confirmStateChange = { true }
+        )
+    }
+    val forceAnimationCheck = remember { mutableStateOf(false) }
+    LaunchedEffect(value, forceAnimationCheck.value) {
+        if (value != swipeableState.currentValue) {
+            swipeableState.animateTo(value)
+        }
+    }
+    DisposableEffect(swipeableState.currentValue) {
+        if (value != swipeableState.currentValue) {
+            onValueChange(swipeableState.currentValue)
+            forceAnimationCheck.value = !forceAnimationCheck.value
+        }
+        onDispose { }
+    }
+    return swipeableState
+}
+
+/**
+ * Enable swipe gestures between a set of predefined states.
+ *
+ * To use this, you must provide a map of anchors (in pixels) to states (of type [T]).
+ * Note that this map cannot be empty and cannot have two anchors mapped to the same state.
+ *
+ * When a swipe is detected, the offset of the [SwipeableState] will be updated with the swipe
+ * delta. You should use this offset to move your content accordingly (see `Modifier.offsetPx`).
+ * When the swipe ends, the offset will be animated to one of the anchors and when that anchor is
+ * reached, the value of the [SwipeableState] will also be updated to the state corresponding to
+ * the new anchor. The target anchor is calculated based on the provided positional [thresholds].
+ *
+ * Swiping is constrained between the minimum and maximum anchors. If the user attempts to swipe
+ * past these bounds, a resistance effect will be applied by default. The amount of resistance at
+ * each edge is specified by the [resistance] config. To disable all resistance, set it to `null`.
+ *
+ * For an example of a [swipeable] with three states, see:
+ *
+ * @sample androidx.compose.material.samples.SwipeableSample
+ *
+ * @param T The type of the state.
+ * @param state The state of the [swipeable].
+ * @param anchors Pairs of anchors and states, used to map anchors to states and vice versa.
+ * @param thresholds Specifies where the thresholds between the states are. The thresholds will be
+ * used to determine which state to animate to when swiping stops. This is represented as a lambda
+ * that takes two states and returns the threshold between them in the form of a [ThresholdConfig].
+ * Note that the order of the states corresponds to the swipe direction.
+ * @param orientation The orientation in which the [swipeable] can be swiped.
+ * @param enabled Whether this [swipeable] is enabled and should react to the user's input.
+ * @param reverseDirection Whether to reverse the direction of the swipe, so a top to bottom
+ * swipe will behave like bottom to top, and a left to right swipe will behave like right to left.
+ * @param interactionSource Optional [MutableInteractionSource] that will passed on to
+ * the internal [Modifier.draggable].
+ * @param resistance Controls how much resistance will be applied when swiping past the bounds.
+ * @param velocityThreshold The threshold (in dp per second) that the end velocity has to exceed
+ * in order to animate to the next state, even if the positional [thresholds] have not been reached.
+ */
+@ExperimentalMaterialApi
+fun <T> Modifier.swipeable(
+    state: SwipeableState<T>,
+    anchors: Map<Float, T>,
+    orientation: Orientation,
+    enabled: Boolean = true,
+    reverseDirection: Boolean = false,
+    interactionSource: MutableInteractionSource? = null,
+    thresholds: (from: T, to: T) -> ThresholdConfig = { _, _ -> FixedThreshold(56.dp) },
+    resistance: ResistanceConfig? = resistanceConfig(anchors.keys),
+    velocityThreshold: Dp = VelocityThreshold
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "swipeable"
+        properties["state"] = state
+        properties["anchors"] = anchors
+        properties["orientation"] = orientation
+        properties["enabled"] = enabled
+        properties["reverseDirection"] = reverseDirection
+        properties["interactionSource"] = interactionSource
+        properties["thresholds"] = thresholds
+        properties["resistance"] = resistance
+        properties["velocityThreshold"] = velocityThreshold
+    }
+) {
+    require(anchors.isNotEmpty()) {
+        "You must have at least one anchor."
+    }
+    require(anchors.values.distinct().count() == anchors.size) {
+        "You cannot have two anchors mapped to the same state."
+    }
+    val density = LocalDensity.current
+    state.ensureInit(anchors)
+    LaunchedEffect(anchors, state) {
+        val oldAnchors = state.anchors
+        state.anchors = anchors
+        state.resistance = resistance
+        state.thresholds = { a, b ->
+            val from = anchors.getValue(a)
+            val to = anchors.getValue(b)
+            with(thresholds(from, to)) { density.computeThreshold(a, b) }
+        }
+        with(density) {
+            state.velocityThreshold = velocityThreshold.toPx()
+        }
+        state.processNewAnchors(oldAnchors, anchors)
+    }
+
+    Modifier.draggable(
+        orientation = orientation,
+        enabled = enabled,
+        reverseDirection = reverseDirection,
+        interactionSource = interactionSource,
+        startDragImmediately = state.isAnimationRunning,
+        onDragStopped = { velocity -> launch { state.performFling(velocity) } },
+        state = state.draggableState
+    )
+}
+
+/**
+ * Interface to compute a threshold between two anchors/states in a [swipeable].
+ *
+ * To define a [ThresholdConfig], consider using [FixedThreshold] and [FractionalThreshold].
+ */
+@Stable
+@ExperimentalMaterialApi
+interface ThresholdConfig {
+    /**
+     * Compute the value of the threshold (in pixels), once the values of the anchors are known.
+     */
+    fun Density.computeThreshold(fromValue: Float, toValue: Float): Float
+}
+
+/**
+ * A fixed threshold will be at an [offset] away from the first anchor.
+ *
+ * @param offset The offset (in dp) that the threshold will be at.
+ */
+@Immutable
+@ExperimentalMaterialApi
+data class FixedThreshold(private val offset: Dp) : ThresholdConfig {
+    override fun Density.computeThreshold(fromValue: Float, toValue: Float): Float {
+        return fromValue + offset.toPx() * sign(toValue - fromValue)
+    }
+}
+
+/**
+ * A fractional threshold will be at a [fraction] of the way between the two anchors.
+ *
+ * @param fraction The fraction (between 0 and 1) that the threshold will be at.
+ */
+@Immutable
+@ExperimentalMaterialApi
+data class FractionalThreshold(
+    /*@FloatRange(from = 0.0, to = 1.0)*/
+    private val fraction: Float
+) : ThresholdConfig {
+    override fun Density.computeThreshold(fromValue: Float, toValue: Float): Float {
+        return lerp(fromValue, toValue, fraction)
+    }
+}
+
+/**
+ * Specifies how resistance is calculated in [swipeable].
+ *
+ * There are two things needed to calculate resistance: the resistance basis determines how much
+ * overflow will be consumed to achieve maximum resistance, and the resistance factor determines
+ * the amount of resistance (the larger the resistance factor, the stronger the resistance).
+ *
+ * The resistance basis is usually either the size of the component which [swipeable] is applied
+ * to, or the distance between the minimum and maximum anchors. For a constructor in which the
+ * resistance basis defaults to the latter, consider using [resistanceConfig].
+ *
+ * You may specify different resistance factors for each bound. Consider using one of the default
+ * resistance factors in [SwipeableDefaults]: `StandardResistanceFactor` to convey that the user
+ * has run out of things to see, and `StiffResistanceFactor` to convey that the user cannot swipe
+ * this right now. Also, you can set either factor to 0 to disable resistance at that bound.
+ *
+ * @param basis Specifies the maximum amount of overflow that will be consumed. Must be positive.
+ * @param factorAtMin The factor by which to scale the resistance at the minimum bound.
+ * Must not be negative.
+ * @param factorAtMax The factor by which to scale the resistance at the maximum bound.
+ * Must not be negative.
+ */
+@Immutable
+class ResistanceConfig(
+    /*@FloatRange(from = 0.0, fromInclusive = false)*/
+    val basis: Float,
+    /*@FloatRange(from = 0.0)*/
+    val factorAtMin: Float = StandardResistanceFactor,
+    /*@FloatRange(from = 0.0)*/
+    val factorAtMax: Float = StandardResistanceFactor
+) {
+    fun computeResistance(overflow: Float): Float {
+        val factor = if (overflow < 0) factorAtMin else factorAtMax
+        if (factor == 0f) return 0f
+        val progress = (overflow / basis).coerceIn(-1f, 1f)
+        return basis / factor * sin(progress * PI.toFloat() / 2)
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (this === other) return true
+        if (other !is ResistanceConfig) return false
+
+        if (basis != other.basis) return false
+        if (factorAtMin != other.factorAtMin) return false
+        if (factorAtMax != other.factorAtMax) return false
+
+        return true
+    }
+
+    override fun hashCode(): Int {
+        var result = basis.hashCode()
+        result = 31 * result + factorAtMin.hashCode()
+        result = 31 * result + factorAtMax.hashCode()
+        return result
+    }
+
+    override fun toString(): String {
+        return "ResistanceConfig(basis=$basis, factorAtMin=$factorAtMin, factorAtMax=$factorAtMax)"
+    }
+}
+
+/**
+ *  Given an offset x and a set of anchors, return a list of anchors:
+ *   1. [ ] if the set of anchors is empty,
+ *   2. [ x' ] if x is equal to one of the anchors, accounting for a small rounding error, where x'
+ *      is x rounded to the exact value of the matching anchor,
+ *   3. [ min ] if min is the minimum anchor and x < min,
+ *   4. [ max ] if max is the maximum anchor and x > max, or
+ *   5. [ a , b ] if a and b are anchors such that a < x < b and b - a is minimal.
+ */
+private fun findBounds(
+    offset: Float,
+    anchors: Set<Float>
+): List<Float> {
+    // Find the anchors the target lies between with a little bit of rounding error.
+    val a = anchors.filter { it <= offset + 0.001 }.maxOrNull()
+    val b = anchors.filter { it >= offset - 0.001 }.minOrNull()
+
+    return when {
+        a == null ->
+            // case 1 or 3
+            listOfNotNull(b)
+        b == null ->
+            // case 4
+            listOf(a)
+        a == b ->
+            // case 2
+            // Can't return offset itself here since it might not be exactly equal
+            // to the anchor, despite being considered an exact match.
+            listOf(a)
+        else ->
+            // case 5
+            listOf(a, b)
+    }
+}
+
+private fun computeTarget(
+    offset: Float,
+    lastValue: Float,
+    anchors: Set<Float>,
+    thresholds: (Float, Float) -> Float,
+    velocity: Float,
+    velocityThreshold: Float
+): Float {
+    val bounds = findBounds(offset, anchors)
+    return when (bounds.size) {
+        0 -> lastValue
+        1 -> bounds[0]
+        else -> {
+            val lower = bounds[0]
+            val upper = bounds[1]
+            if (lastValue <= offset) {
+                // Swiping from lower to upper (positive).
+                if (velocity >= velocityThreshold) {
+                    return upper
+                } else {
+                    val threshold = thresholds(lower, upper)
+                    if (offset < threshold) lower else upper
+                }
+            } else {
+                // Swiping from upper to lower (negative).
+                if (velocity <= -velocityThreshold) {
+                    return lower
+                } else {
+                    val threshold = thresholds(upper, lower)
+                    if (offset > threshold) upper else lower
+                }
+            }
+        }
+    }
+}
+
+private fun <T> Map<Float, T>.getOffset(state: T): Float? {
+    return entries.firstOrNull { it.value == state }?.key
+}
+
+/**
+ * Contains useful defaults for [swipeable] and [SwipeableState].
+ */
+object SwipeableDefaults {
+    /**
+     * The default animation used by [SwipeableState].
+     */
+    val AnimationSpec = SpringSpec<Float>()
+
+    /**
+     * The default velocity threshold (1.8 dp per millisecond) used by [swipeable].
+     */
+    val VelocityThreshold = 125.dp
+
+    /**
+     * A stiff resistance factor which indicates that swiping isn't available right now.
+     */
+    const val StiffResistanceFactor = 20f
+
+    /**
+     * A standard resistance factor which indicates that the user has run out of things to see.
+     */
+    const val StandardResistanceFactor = 10f
+
+    /**
+     * The default resistance config used by [swipeable].
+     *
+     * This returns `null` if there is one anchor. If there are at least two anchors, it returns
+     * a [ResistanceConfig] with the resistance basis equal to the distance between the two bounds.
+     */
+    fun resistanceConfig(
+        anchors: Set<Float>,
+        factorAtMin: Float = StandardResistanceFactor,
+        factorAtMax: Float = StandardResistanceFactor
+    ): ResistanceConfig? {
+        return if (anchors.size <= 1) {
+            null
+        } else {
+            val basis = anchors.maxOrNull()!! - anchors.minOrNull()!!
+            ResistanceConfig(basis, factorAtMin, factorAtMax)
+        }
+    }
+}
+
+@ExperimentalMaterialApi
+val <T> SwipeableState<T>.PreUpPostTopNestedScrollConnection: NestedScrollConnection
+    get() = object : NestedScrollConnection {
+        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
+            val delta = available.toFloat()
+            return if (delta > 0 && source == NestedScrollSource.Drag) {
+                performDrag(delta).toOffset()
+            } else {
+                Offset.Zero
+            }
+        }
+
+        override fun onPostScroll(
+            consumed: Offset,
+            available: Offset,
+            source: NestedScrollSource
+        ): Offset {
+            return if (source == NestedScrollSource.Drag) {
+                performDrag(available.toFloat()).toOffset()
+            } else {
+                Offset.Zero
+            }
+        }
+
+        override suspend fun onPreFling(available: Velocity): Velocity {
+            val toFling = Offset(available.x, available.y).toFloat()
+            return if (toFling > 0) {
+                performFling(velocity = toFling)
+                // since we go to the anchor with tween settling, consume all for the best UX
+                available
+            } else {
+                Velocity.Zero
+            }
+        }
+
+        override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
+            performFling(velocity = Offset(available.x, available.y).toFloat())
+            return available
+        }
+
+        private fun Float.toOffset(): Offset = Offset(0f, this)
+
+        private fun Offset.toFloat(): Float = this.y
+    }
+
+// temp default nested scroll connection for swipeables which desire as an opt in
+// revisit in b/174756744 as all types will have their own specific connection probably
+@ExperimentalMaterialApi
+val <T> SwipeableState<T>.PreUpPostDownNestedScrollConnection: NestedScrollConnection
+    get() = object : NestedScrollConnection {
+        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
+            val delta = available.toFloat()
+            return if (delta < 0 && source == NestedScrollSource.Drag) {
+                performDrag(delta).toOffset()
+            } else {
+                Offset.Zero
+            }
+        }
+
+        override fun onPostScroll(
+            consumed: Offset,
+            available: Offset,
+            source: NestedScrollSource
+        ): Offset {
+            return if (source == NestedScrollSource.Drag) {
+                performDrag(available.toFloat()).toOffset()
+            } else {
+                Offset.Zero
+            }
+        }
+
+        override suspend fun onPreFling(available: Velocity): Velocity {
+            val toFling = Offset(available.x, available.y).toFloat()
+            return if (toFling < 0 && offset.value > minBound) {
+                performFling(velocity = toFling)
+                // since we go to the anchor with tween settling, consume all for the best UX
+                available
+            } else {
+                Velocity.Zero
+            }
+        }
+
+        override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
+            performFling(velocity = Offset(available.x, available.y).toFloat())
+            return available
+        }
+
+        private fun Float.toOffset(): Offset = Offset(0f, this)
+
+        private fun Offset.toFloat(): Float = this.y
+    }
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/YearMonthExt.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/YearMonthExt.kt
new file mode 100644
index 0000000..b3dabe1
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/YearMonthExt.kt
@@ -0,0 +1,14 @@
+package com.chacha.presentation.util
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import com.dev.chacha.presentation.calendar.CALENDAR_STARTS_ON
+import java.time.YearMonth
+import java.time.temporal.WeekFields
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun YearMonth.getNumberWeeks(weekFields: WeekFields = CALENDAR_STARTS_ON): Int {
+    val firstWeekNumber = this.atDay(1)[weekFields.weekOfMonth()]
+    val lastWeekNumber = this.atEndOfMonth()[weekFields.weekOfMonth()]
+    return lastWeekNumber - firstWeekNumber + 1 // Both weeks inclusive
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/animationTimeMillis.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/animationTimeMillis.kt
new file mode 100644
index 0000000..747f65e
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/animationTimeMillis.kt
@@ -0,0 +1,19 @@
+package com.dev.chacha.presentation.util
+
+import androidx.compose.runtime.*
+
+@Composable
+fun animationTimeMillis(): MutableState<Long> {
+    val millisState = remember { mutableStateOf(0L) }
+
+    LaunchedEffect(Unit) {
+        val startTime = withFrameMillis { it }
+
+        while (true) {
+            withFrameMillis { frameTime ->
+                millisState.value = frameTime - startTime
+            }
+        }
+    }
+    return millisState
+}
\ No newline at end of file
diff --git "a/presentation/src/main/java/com/dev/chacha/presentation/util/candy\320\241anes.kt" "b/presentation/src/main/java/com/dev/chacha/presentation/util/candy\320\241anes.kt"
new file mode 100644
index 0000000..60a886d
--- /dev/null
+++ "b/presentation/src/main/java/com/dev/chacha/presentation/util/candy\320\241anes.kt"
@@ -0,0 +1,92 @@
+package com.dev.chacha.presentation.util
+
+import java.math.BigDecimal
+import java.math.RoundingMode
+import java.text.NumberFormat
+import java.util.*
+
+
+
+enum class CurrencyType { FROM_LIST, CUSTOM, NONE }
+class ExtendCurrency(val value: String? = null, val type: CurrencyType) {
+    companion object {
+        fun getInstance(value: String?): ExtendCurrency {
+
+
+            val currency = try {
+                Currency.getInstance(value)
+            } catch (e: Exception) {
+                null
+            }
+
+            if (currency !== null) return ExtendCurrency(
+                value = value,
+                type = CurrencyType.FROM_LIST
+            )
+            if (value.isNullOrEmpty() || value == "null") return ExtendCurrency(
+                value = null,
+                type = CurrencyType.NONE
+            )
+
+            return ExtendCurrency(value = value, type = CurrencyType.CUSTOM)
+        }
+
+        fun none(): ExtendCurrency {
+            return ExtendCurrency(type = CurrencyType.NONE)
+        }
+    }
+
+    override fun equals(other: Any?): Boolean {
+        if (other == null || other !is ExtendCurrency) return false
+
+        return other.value == this.value && this.type == this.type
+    }
+
+    override fun hashCode(): Int {
+        var result = value?.hashCode() ?: 0
+        result = 31 * result + type.hashCode()
+        return result
+    }
+}
+
+fun BigDecimal.isZero(): Boolean = this.signum() == 0
+
+fun Double.round(scale: Int): Double =
+    BigDecimal(this).setScale(scale, RoundingMode.HALF_EVEN).toDouble()
+
+fun getFloatDivider(): String {
+    val numberFormat: NumberFormat = NumberFormat.getNumberInstance(Locale.getDefault())
+
+    numberFormat.maximumFractionDigits = 1
+    numberFormat.minimumFractionDigits = 1
+
+    val formattedValue = numberFormat.format(1.0)
+
+    return formattedValue.substring(1, 2)
+}
+
+fun prettyCandyCanes(
+    value: BigDecimal,
+    currency: ExtendCurrency,
+    forceShowAfterDot: Boolean = false,
+    maximumFractionDigits: Int = if (forceShowAfterDot) 5 else 2,
+    minimumFractionDigits: Int = if (forceShowAfterDot) 1 else 0,
+): String {
+    val formatter = if (currency.type === CurrencyType.FROM_LIST) {
+        NumberFormat.getCurrencyInstance(Locale.getDefault())
+    } else {
+        NumberFormat.getNumberInstance(Locale.getDefault())
+    }
+
+    formatter.maximumFractionDigits = maximumFractionDigits
+    formatter.minimumFractionDigits = minimumFractionDigits
+
+    if (currency.type === CurrencyType.FROM_LIST) formatter.currency =
+        Currency.getInstance(currency.value)
+
+    var formattedValue = formatter.format(value)
+
+    if (currency.type === CurrencyType.CUSTOM) formattedValue = "$formattedValue ${currency.value}"
+
+    return formattedValue
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/colors.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/colors.kt
new file mode 100644
index 0000000..8494015
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/colors.kt
@@ -0,0 +1,19 @@
+package com.dev.chacha.presentation.util
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import kotlin.math.ceil
+import kotlin.math.floor
+
+fun combineColors(colorA: Color, colorB: Color, angle: Float = 0.5F): Color {
+    val colorAPart = (1F - angle) * 2
+    val colorBPart = angle * 2
+
+    return Color(
+        red = (colorA.red * colorAPart + colorB.red * colorBPart) / 2,
+        green = (colorA.green * colorAPart + colorB.green * colorBPart) / 2,
+        blue = (colorA.blue * colorAPart + colorB.blue * colorBPart) / 2,
+    )
+}
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/lockOrientation.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/lockOrientation.kt
new file mode 100644
index 0000000..a684075
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/lockOrientation.kt
@@ -0,0 +1,28 @@
+package com.dev.chacha.presentation.util
+
+import android.app.Activity
+import android.content.Context
+import android.content.ContextWrapper
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.platform.LocalContext
+
+@Composable
+fun locScreenOrientation(orientation: Int) {
+    val context = LocalContext.current
+    DisposableEffect(Unit) {
+        val activity = context.findActivity() ?: return@DisposableEffect onDispose {}
+        val originalOrientation = activity.requestedOrientation
+        activity.requestedOrientation = orientation
+        onDispose {
+            // restore original orientation when view disappears
+            activity.requestedOrientation = originalOrientation
+        }
+    }
+}
+
+fun Context.findActivity(): Activity? = when (this) {
+    is Activity -> this
+    is ContextWrapper -> baseContext.findActivity()
+    else -> null
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/network/NetworkMonitor.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/network/NetworkMonitor.kt
index 24e7557..9fa39d5 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/util/network/NetworkMonitor.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/network/NetworkMonitor.kt
@@ -36,7 +36,6 @@ class NetworkMonitor constructor(val context: Context) {
                 isCellularConnected = true
 
             }
-
             override fun onLost(network: Network) {
                 // Perform necessary actions when network is lost
                 isNetworkAvailable = false
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/observeLiveData.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/observeLiveData.kt
new file mode 100644
index 0000000..6255a5f
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/observeLiveData.kt
@@ -0,0 +1,19 @@
+package com.dev.chacha.presentation.util
+
+import androidx.compose.runtime.*
+import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.lifecycle.MutableLiveData
+import androidx.lifecycle.Observer
+
+@Composable
+fun <T> observeLiveData(data: MutableLiveData<T>, callback: Observer<T>) {
+    val lifecycleOwner by rememberUpdatedState(LocalLifecycleOwner.current)
+
+    DisposableEffect(lifecycleOwner) {
+        data.observeForever(callback)
+
+        onDispose {
+            data.removeObserver(callback)
+        }
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/openIn.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/openIn.kt
new file mode 100644
index 0000000..649c694
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/openIn.kt
@@ -0,0 +1,63 @@
+package com.dev.chacha.presentation.util
+
+import android.content.ClipData
+import android.content.ClipboardManager
+import android.content.Context
+import android.content.Intent
+import android.net.Uri
+import android.widget.Toast
+import androidx.core.content.ContextCompat
+import androidx.core.content.ContextCompat.startActivity
+import com.dev.chacha.presentation.R
+
+fun openInBrowser(context: Context, link: String) {
+    val intent = Intent(Intent.ACTION_VIEW)
+
+    intent.data = Uri.parse(link)
+
+    try {
+        startActivity(context, intent, null)
+    } catch (e: Exception) {
+        val clipboard = ContextCompat.getSystemService(
+            context,
+            ClipboardManager::class.java
+        ) as ClipboardManager
+
+        clipboard.setPrimaryClip(ClipData.newPlainText("url", link))
+
+        Toast
+            .makeText(
+                context,
+                context.getString(R.string.copy_to_clipboard),
+                Toast.LENGTH_LONG
+            )
+            .show()
+    }
+}
+
+fun sendEmail(
+    context: Context,
+    recipients: Array<String>,
+    subject: String,
+    body: String = "",
+) {
+    val intent = Intent(Intent.ACTION_SENDTO)
+
+    intent.data = Uri.parse("mailto:")
+    intent.putExtra(Intent.EXTRA_EMAIL, recipients)
+    intent.putExtra(Intent.EXTRA_SUBJECT, subject)
+    intent.putExtra(Intent.EXTRA_TEXT, body)
+
+    try {
+        startActivity(context, intent, null)
+    } catch (e: Exception) {
+        e.printStackTrace()
+        Toast
+            .makeText(
+                context,
+                context.getString(R.string.not_found_email),
+                Toast.LENGTH_LONG
+            )
+            .show()
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/string.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/string.kt
new file mode 100644
index 0000000..f57fac2
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/string.kt
@@ -0,0 +1,11 @@
+package com.chacha.presentation.util
+
+import java.util.*
+
+fun String.titleCase():String = this.replaceFirstChar {
+    if (it.isLowerCase()) {
+        it.titlecase(Locale.getDefault())
+    } else {
+        it.toString()
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/time.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/time.kt
new file mode 100644
index 0000000..a2b53b9
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/time.kt
@@ -0,0 +1,136 @@
+package com.dev.chacha.presentation.util
+
+import android.os.Build
+import androidx.annotation.RequiresApi
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import com.dev.chacha.presentation.R
+import java.time.LocalDate
+import java.time.LocalDateTime
+import java.time.YearMonth
+import java.time.ZoneId
+import java.time.format.DateTimeFormatter
+import java.util.*
+import kotlin.math.ceil
+
+@Suppress("Build.VERSION_CODES.O")
+const val DAY = 24 * 60 * 60 * 1000
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun LocalDate.toDate(): Date = Date(this.atStartOfDay(ZoneId.systemDefault()).toEpochSecond() * 1000)
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun LocalDateTime.toDate(): Date = Date(this.toEpochSecond(
+    ZoneId.systemDefault().rules.getOffset(this)
+) * 1000)
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun Date.toLocalDate(): LocalDate = this.toInstant()
+    .atZone(ZoneId.systemDefault())
+    .toLocalDate()
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun Date.toLocalDateTime(): LocalDateTime = this.toInstant()
+    .atZone(ZoneId.systemDefault())
+    .toLocalDateTime()
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun countDays(toDate: Date, fromDate: Date = Date()): Int {
+    val fromDateRound = roundToDay(fromDate)
+    val toDateRound = roundToDay(toDate)
+
+    val daysFrom = ceil(fromDateRound.time / DAY.toDouble()).toInt()
+    val daysTo = ceil(toDateRound.time / DAY.toDouble()).toInt()
+
+    return daysTo - daysFrom + 1
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun isSameDay(timestampA: Long, timestampB: Long): Boolean {
+    return roundToDay(Date(timestampA)) == roundToDay(Date(timestampB))
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+@Composable
+fun prettyDate(
+    date: Date,
+    showTime: Boolean = true,
+    forceShowDate: Boolean = false,
+    forceHideDate: Boolean = false,
+    forceShowYear: Boolean = false,
+    human: Boolean = false,
+    shortMonth: Boolean = false,
+): String {
+    val yearOnlyFormatter = DateTimeFormatter.ofPattern("yyyy")
+    val dateWithMonthAndYearFormatter = if (shortMonth) {
+        DateTimeFormatter.ofPattern("dd MMM yyyy")
+    } else {
+        DateTimeFormatter.ofPattern("dd MMMM yyyy")
+    }
+    val dateWithMonthFormatter = if (shortMonth) {
+        DateTimeFormatter.ofPattern("dd MMM")
+    } else {
+        DateTimeFormatter.ofPattern("dd MMMM")
+    }
+    val timeFormatter = DateTimeFormatter.ofPattern("HH:mm")
+
+    val currentFullDate = dateWithMonthAndYearFormatter.format(LocalDate.now())
+    val currentYear = yearOnlyFormatter.format(LocalDate.now())
+
+    val convertedFullDate = dateWithMonthAndYearFormatter.format(date.toLocalDate())
+    val convertedYear = yearOnlyFormatter.format(date.toLocalDate())
+    val convertedDate = dateWithMonthFormatter.format(date.toLocalDate())
+    val convertedTime = timeFormatter.format(date.toLocalDateTime())
+
+    var final = ""
+
+    if (human && convertedFullDate == currentFullDate) {
+        final += stringResource(R.string.today)
+    }
+
+    if (!human || convertedFullDate != currentFullDate) {
+        if ((convertedFullDate != currentFullDate || !showTime || forceShowDate) && !forceHideDate) {
+            final += convertedDate
+        }
+
+        if (convertedYear != currentYear || forceShowYear) {
+            final += " $convertedYear"
+        }
+    }
+
+    if (showTime) {
+        final += " $convertedTime"
+    }
+
+    return final.trim()
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun prettyYearMonth(yearMonth: YearMonth): String {
+    val yearOnlyFormatter = DateTimeFormatter.ofPattern("yyyy")
+    val monthFormatter = DateTimeFormatter.ofPattern("LLLL")
+    val monthWithYearFormatter = DateTimeFormatter.ofPattern("LLLL yyyy")
+
+    return if (yearMonth.year.toString() == yearOnlyFormatter.format(LocalDate.now())) {
+        yearMonth.format(monthFormatter)
+    } else {
+        yearMonth.format(monthWithYearFormatter)
+    }.replaceFirstChar {
+        if (it.isLowerCase()) it.titlecase(
+            Locale.getDefault()
+        ) else it.toString()
+    }
+}
+
+@RequiresApi(Build.VERSION_CODES.O)
+fun roundToDay(date: Date): Date {
+    val calendar = Calendar.getInstance()
+    calendar.time = date
+
+    return Calendar
+        .Builder()
+        .setTimeZone(calendar.timeZone)
+        .setDate(calendar.get(Calendar.YEAR), calendar.get(Calendar.MONTH), calendar.get(Calendar.DAY_OF_MONTH))
+        .build()
+        .time
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/toSP.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/toSP.kt
new file mode 100644
index 0000000..edba42e
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/toSP.kt
@@ -0,0 +1,11 @@
+package com.chacha.presentation.util
+
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+
+@Stable
+fun min(a: TextUnit, b: TextUnit): TextUnit = kotlin.math.min(a.value, b.value).sp
+
+@Stable
+fun max(a: TextUnit, b: TextUnit): TextUnit = kotlin.math.max(a.value, b.value).sp
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/util/visualTransformationAsCurrency.kt b/presentation/src/main/java/com/dev/chacha/presentation/util/visualTransformationAsCurrency.kt
new file mode 100644
index 0000000..d59b755
--- /dev/null
+++ b/presentation/src/main/java/com/dev/chacha/presentation/util/visualTransformationAsCurrency.kt
@@ -0,0 +1,254 @@
+package com.chacha.presentation.util
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.SpanStyle
+import androidx.compose.ui.text.input.OffsetMapping
+import androidx.compose.ui.text.input.TransformedText
+import androidx.compose.ui.tooling.preview.Preview
+import com.dev.chacha.presentation.util.ExtendCurrency
+import com.dev.chacha.presentation.util.getFloatDivider
+import com.dev.chacha.presentation.util.prettyCandyCanes
+import kotlin.math.min
+
+private fun getAnnotatedString(
+    value: String,
+    hintParts: List<Pair<Int, Int>>,
+    styles: List<SpanStyle>,
+): AnnotatedString {
+    val builder = AnnotatedString.Builder(value)
+    hintParts.forEachIndexed { index, part ->
+        builder.addStyle(styles[index], part.first, part.second)
+    }
+    return builder.toAnnotatedString()
+}
+
+private fun getAnnotatedString(
+    value: String,
+    hintParts: List<Pair<Int, Int>>,
+    hintColor: Color,
+): AnnotatedString {
+    return getAnnotatedString(value, hintParts, hintParts.map { SpanStyle(color = hintColor) })
+}
+
+private fun getAnnotatedString(
+    value: String,
+    hintPart: Pair<Int, Int>,
+    hintColor: Color,
+): AnnotatedString {
+    return getAnnotatedString(value, listOf(hintPart), hintColor)
+}
+
+private fun calcShift(before: String, after: String, position: Int): Int {
+    var shift = 0
+
+    for (i in 0 until position) {
+        while (i < before.length && i + shift < after.length && (before[i] != after[i + shift])) {
+            shift += 1
+        }
+    }
+
+    return shift
+}
+
+private fun visualTransformationAsCurrency(
+    input: AnnotatedString,
+    currency: ExtendCurrency,
+    hintColor: Color,
+): TransformedText {
+    val floatDivider = getFloatDivider()
+    val fixed = tryConvertStringToNumber(input.text)
+    val currSymbol = prettyCandyCanes(
+        0.toBigDecimal(),
+        currency,
+        maximumFractionDigits = 0,
+        minimumFractionDigits = 0,
+    ).filter { it != '0' }
+    var output = prettyCandyCanes(
+        input.text.ifEmpty { "0" }.toBigDecimal(),
+        currency,
+        maximumFractionDigits = 2,
+        minimumFractionDigits = 1,
+    ).replace(currSymbol, "").trim()
+
+    val forceShowAfterDot = input.text.contains(".0")
+    val before = output.substringBefore("${floatDivider}0")
+    val after = if (forceShowAfterDot) {
+        output.substringAfter(floatDivider, "")
+    } else {
+        output.substringAfter("${floatDivider}0", "")
+    }
+
+    val divider = if (fixed.third.isNotEmpty() || forceShowAfterDot) {
+        "$floatDivider${fixed.third}"
+    } else {
+        ""
+    }
+
+    output = if (input.text.isEmpty()) "" else before + divider + after
+
+    val offsetTranslator = object : OffsetMapping {
+        override fun originalToTransformed(offset: Int): Int {
+            val shift = calcShift(input.text.replace(".", floatDivider), output, offset)
+
+            return (offset + shift).coerceIn(0, output.length)
+        }
+
+        override fun transformedToOriginal(offset: Int): Int {
+            val shift = calcShift(input.text.replace(".", floatDivider), output, offset)
+
+            return (offset - shift).coerceIn(0, input.length)
+        }
+    }
+
+    return if (input.text.isEmpty()) {
+        TransformedText(
+            getAnnotatedString(
+                output,
+                listOf(),
+                listOf(),
+            ),
+            offsetTranslator,
+        )
+    } else {
+        TransformedText(
+            getAnnotatedString(
+                output,
+                listOf(
+                    Pair(
+                        before.length + (if (fixed.third.isNotEmpty()) 1 else 0),
+                        before.length + (if (fixed.third.isNotEmpty()) 2 else 0),
+                    ),
+                ),
+                listOf(
+                    SpanStyle(color = hintColor),
+                ),
+            ),
+            offsetTranslator,
+        )
+    }
+}
+
+fun visualTransformationAsCurrency(
+    currency: ExtendCurrency,
+    hintColor: Color,
+): ((input: AnnotatedString) -> TransformedText) {
+    return {
+        visualTransformationAsCurrency(it, currency, hintColor)
+    }
+}
+
+fun isNumber(char: Char): Boolean {
+    return try {
+        char.toString().toInt(); true
+    } catch (e: Exception) {
+        false
+    }
+}
+
+fun Triple<String, String, String>.join(third: Boolean = true): String =
+    this.first + this.second + if (third) this.third else ""
+
+fun fixedNumberString(input: String): String {
+    val dotExist = input.contains(".")
+    val before = input.substringBefore(".")
+    val after = input.substringAfter(".", "")
+
+    var addZero = false
+    var beforeFiltered = before
+        .replace("\\D".toRegex(), "")
+        .trimStart { addZero = addZero || it == '0'; it == '0'}
+
+    if (addZero) beforeFiltered = "0$beforeFiltered"
+    addZero = false
+
+    var afterFiltered = after
+        .replace("\\D".toRegex(), "")
+        .trimEnd { addZero = addZero || it == '0'; it == '0' }
+
+    if (addZero) afterFiltered = "${afterFiltered}0"
+
+    if (afterFiltered.length > 2) afterFiltered = afterFiltered.dropLast(afterFiltered.length - 2)
+
+    if (beforeFiltered.isEmpty() && afterFiltered.isEmpty()) return ""
+
+    if (afterFiltered.isEmpty() && !dotExist) return beforeFiltered
+
+    return "$beforeFiltered.$afterFiltered"
+}
+
+fun tryConvertStringToNumber(input: String): Triple<String, String, String> {
+    val afterDot = input.dropWhile { it != '.' }
+    val beforeDot = input.substring(0, input.length - afterDot.length)
+
+    val start = beforeDot.filter { isNumber(it) }.dropWhile { it == '0' }
+    val hintStart = if (start.isEmpty()) "0" else ""
+    val end = afterDot.filter { isNumber(it) }
+    var hintEnd = ""
+    if (end.isEmpty() && input.lastOrNull() == '.') {
+        hintEnd = "0"
+    }
+    val middle = if (end.isNotEmpty() || (input.lastOrNull() == '.')) {
+        "."
+    } else {
+        ""
+    }
+
+    return Triple(
+        hintStart,
+        "$start$middle${end.substring(0, min(2, end.length))}",
+        hintEnd,
+    )
+}
+
+@Preview
+@Composable
+fun Preview() {
+    Column {
+        Text(
+            text = visualTransformationAsCurrency(
+                getAnnotatedString("0", Pair(0, 1), Color.Green),
+                currency = ExtendCurrency.none(),
+                Color.Green,
+            ).text
+        )
+        Text(
+            text = visualTransformationAsCurrency(
+                getAnnotatedString("0", Pair(0, 4), Color.Green),
+                currency = ExtendCurrency.getInstance("EUR"),
+                Color.Green,
+            ).text
+        )
+        Text(
+            text = visualTransformationAsCurrency(
+                getAnnotatedString("0", Pair(0, 4), Color.Green),
+                currency = ExtendCurrency.getInstance("RUB"),
+                Color.Green,
+            ).text
+        )
+        Text(
+            text = visualTransformationAsCurrency(
+                getAnnotatedString("", Pair(0, 4), Color.Green),
+                currency = ExtendCurrency.none(),
+                Color.Green,
+            ).text
+        )
+        Text(
+            text = visualTransformationAsCurrency(
+                getAnnotatedString("", Pair(0, 4), Color.Green),
+                currency = ExtendCurrency.getInstance("EUR"),
+                Color.Green,
+            ).text
+        )
+        Text(
+            text = visualTransformationAsCurrency(
+                getAnnotatedString("", Pair(0, 4), Color.Green),
+                currency = ExtendCurrency.getInstance("RUB"),
+                Color.Green,
+            ).text
+        )
+    }
+}
\ No newline at end of file
diff --git a/presentation/src/main/java/com/dev/chacha/presentation/withdraw/WithdrawScreen.kt b/presentation/src/main/java/com/dev/chacha/presentation/withdraw/WithdrawScreen.kt
index 240937f..188ccc9 100644
--- a/presentation/src/main/java/com/dev/chacha/presentation/withdraw/WithdrawScreen.kt
+++ b/presentation/src/main/java/com/dev/chacha/presentation/withdraw/WithdrawScreen.kt
@@ -40,7 +40,6 @@ fun WithdrawScreen(
         }
     ) { paddingValues ->
 
-
         val availableBalance = remember { mutableStateOf(10000.0) }
         var withdrawalAmount by remember { mutableStateOf("") }
 
diff --git a/presentation/src/main/res/drawable/sacco_logo.xml b/presentation/src/main/res/drawable/sacco_logo.xml
index 2a79798..f350268 100644
--- a/presentation/src/main/res/drawable/sacco_logo.xml
+++ b/presentation/src/main/res/drawable/sacco_logo.xml
@@ -7,7 +7,7 @@
 
     <!-- Circle -->
     <path
-        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"
+        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12z,2z"
         android:fillColor="#00000000"/>
 
     <!-- "S" Text -->
diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml
index a723e0c..8321b46 100644
--- a/presentation/src/main/res/values/strings.xml
+++ b/presentation/src/main/res/values/strings.xml
@@ -126,5 +126,19 @@
     <string name="accountType">Account Type</string>
     <string name="all_recpient_with_emoji">🌎 Mpesa</string>
     <string name="recipient_with_emoji">%1$s  %2$s</string>
+    <string name="pin">Enter Pin</string>
+    <string name="enter_your_loan">Enter your SACCO PIN to access your Loans</string>
+    <string name="apply">Apply</string>
+    <string name="select_finish_date_title">Select End Date</string>
+    <string name="today">Today</string>
+
+    <plurals name="finish_date">
+        <item quantity="one">%1$s (%2$s day)</item>
+        <item quantity="other">%1$s (%2$s days)</item>
+    </plurals>
+
+    <string name="not_found_email">not found\n</string>
+    <string name="copy_to_clipboard">copied to clopboard</string>
+
 
 </resources>
\ No newline at end of file