diff --git a/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsFragment.kt b/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsFragment.kt
index f3e6b247..bf84ff36 100644
--- a/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsFragment.kt
+++ b/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsFragment.kt
@@ -8,73 +8,29 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.databinding.DataBindingUtil
+import androidx.compose.ui.platform.ComposeView
 import androidx.fragment.app.Fragment
-import androidx.fragment.app.viewModels
-import androidx.lifecycle.Lifecycle
-import androidx.lifecycle.lifecycleScope
-import androidx.lifecycle.repeatOnLifecycle
 import androidx.navigation.fragment.findNavController
 import com.hieuwu.groceriesstore.R
-import com.hieuwu.groceriesstore.databinding.FragmentNotificationSettingsBinding
 import dagger.hilt.android.AndroidEntryPoint
-import kotlinx.coroutines.launch
 
 
 @AndroidEntryPoint
 class NotificationSettingsFragment : Fragment() {
 
-    private lateinit var binding: FragmentNotificationSettingsBinding
-    private val viewModel: NotificationSettingsViewModel by viewModels()
-
     override fun onCreateView(
         inflater: LayoutInflater, container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        binding = DataBindingUtil.inflate<FragmentNotificationSettingsBinding>(
-            inflater, R.layout.fragment_notification_settings, container, false
-        )
-
-        binding.viewModel = viewModel
-        binding.lifecycleOwner = viewLifecycleOwner
-        setEventListeners()
-        setObservers()
-
-        return binding.root
-    }
-
-    private fun setObservers() {
-        viewLifecycleOwner.lifecycleScope.launch {
-            repeatOnLifecycle(Lifecycle.State.STARTED) {
-                launch {
-                    viewModel.user.collect { viewModel.initializeSwitchValue(it) }
-                }
-            }
-        }
-
-        viewModel.isOrderCreatedNotiEnabled.observe(viewLifecycleOwner) {}
-        viewModel.isDatabaseRefreshedNotiEnabled.observe(viewLifecycleOwner) {}
-        viewModel.isPromotionNotiEnabled.observe(viewLifecycleOwner) {}
-    }
-
-    private fun setEventListeners() {
-        binding.toolbar.setNavigationOnClickListener {
-            findNavController().navigateUp()
-        }
-
         createChannel(
             getString(R.string.order_created_notification_channel_id),
             getString(R.string.order_created_notification_channel_name)
         )
-
-        binding.toolbar.setOnMenuItemClickListener { item ->
-            when (item.itemId) {
-                R.id.action_save -> {
-                    // Update user data to backend
-                    viewModel.updateNotificationSettings()
-                    true
-                }
-                else -> false
+        return ComposeView(requireContext()).apply {
+            setContent {
+                NotificationSettingsScreen(
+                   onNavigateUp = { findNavController().navigateUp() }
+                )
             }
         }
     }
diff --git a/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsScreen.kt b/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsScreen.kt
new file mode 100644
index 00000000..6e9fe028
--- /dev/null
+++ b/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/NotificationSettingsScreen.kt
@@ -0,0 +1,130 @@
+package com.hieuwu.groceriesstore.presentation.notificationsettings
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBarDefaults
+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.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.text.AnnotatedString
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.hieuwu.groceriesstore.R
+import com.hieuwu.groceriesstore.presentation.notificationsettings.composables.NotificationSettingsItem
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun NotificationSettingsScreen(
+    onNavigateUp: () -> Unit,
+    viewModel: NotificationSettingsViewModel = hiltViewModel()
+) {
+    Scaffold(
+        topBar = {
+            CenterAlignedTopAppBar(
+                title = { Text(text = "Notifications", color = Color.White, fontWeight = FontWeight.Medium) },
+                actions = {
+                    ClickableText(
+                        text = AnnotatedString("SAVE"),
+                        style = TextStyle(color = Color.White, fontWeight = FontWeight.Medium),
+                        onClick = {
+                            viewModel.updateNotificationSettings()
+                        },
+                        modifier = Modifier.padding(horizontal = 8.dp)
+                    )
+                },
+                navigationIcon = {
+                    IconButton(onClick = { onNavigateUp() }) {
+                        Icon(
+                            imageVector = Icons.Filled.ArrowBack,
+                            contentDescription = null,
+                            tint = Color.White
+                        )
+                    }
+                },
+                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
+                    containerColor = colorResource(id = R.color.colorPrimary)
+                )
+            )
+        }
+    ) {
+        val user = viewModel.user.collectAsState().value
+
+        if (user != null)
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(it)
+            ) {
+                var isOrderCreatedNotiEnabled by remember { mutableStateOf(user.isOrderCreatedNotiEnabled) }
+                var isDataRefreshedNotiEnabled by remember { mutableStateOf(user.isDataRefreshedNotiEnabled) }
+                var isPromotionNotiEnabled by remember { mutableStateOf(user.isPromotionNotiEnabled) }
+                viewModel.initializeSwitchValue(
+                    user.copy(
+                        isOrderCreatedNotiEnabled = isOrderCreatedNotiEnabled,
+                        isDataRefreshedNotiEnabled = isDataRefreshedNotiEnabled,
+                        isPromotionNotiEnabled = isPromotionNotiEnabled
+                    )
+                )
+
+                LazyColumn(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                ) {
+                    item {
+                        NotificationSettingsItem(
+                            text = R.string.show_when_order_created,
+                            isChecked = isOrderCreatedNotiEnabled,
+                            onClick = {
+                                isOrderCreatedNotiEnabled = !isOrderCreatedNotiEnabled
+                            }
+                        )
+                    }
+                    item {
+                        NotificationSettingsItem(
+                            text = R.string.show_when_promotion_sent,
+                            isChecked = isPromotionNotiEnabled,
+                            onClick = {
+                                isPromotionNotiEnabled = !isPromotionNotiEnabled
+                            }
+                        )
+                    }
+                    item {
+                        NotificationSettingsItem(
+                            text = R.string.show_when_app_data_is_refreshed,
+                            isChecked = isDataRefreshedNotiEnabled,
+                            onClick = {
+                                isDataRefreshedNotiEnabled = !isDataRefreshedNotiEnabled
+                            }
+                        )
+                    }
+                }
+
+            }
+    }
+}
+
+@Preview
+@Composable
+fun NotificationSettingsScreenPreview() {
+    NotificationSettingsScreen(onNavigateUp = { })
+}
\ No newline at end of file
diff --git a/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/composables/NotificationSettingsItems.kt b/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/composables/NotificationSettingsItems.kt
new file mode 100644
index 00000000..c53f1ee7
--- /dev/null
+++ b/app/src/main/java/com/hieuwu/groceriesstore/presentation/notificationsettings/composables/NotificationSettingsItems.kt
@@ -0,0 +1,50 @@
+package com.hieuwu.groceriesstore.presentation.notificationsettings.composables
+
+import androidx.annotation.StringRes
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.hieuwu.groceriesstore.R
+
+@Composable
+fun NotificationSettingsItem(@StringRes text: Int, isChecked: Boolean, onClick: () -> Unit) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(vertical = 8.dp, horizontal = 16.dp),
+        horizontalArrangement = Arrangement.SpaceBetween,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Text(text = stringResource(text))
+        Switch(
+            checked = isChecked, onCheckedChange = { onClick() }, colors = SwitchDefaults.colors(
+                checkedTrackColor = colorResource(id = R.color.colorPrimary)
+            )
+        )
+    }
+}
+
+@Preview
+@Composable
+fun NotificationSettingsItemPreview() {
+    NotificationSettingsItem(
+        text = R.string.show_when_order_created,
+        isChecked = true,
+        onClick = { }
+    )
+}
\ No newline at end of file
diff --git a/app/src/main/res/layout/fragment_notification_settings.xml b/app/src/main/res/layout/fragment_notification_settings.xml
deleted file mode 100644
index 3db51cdd..00000000
--- a/app/src/main/res/layout/fragment_notification_settings.xml
+++ /dev/null
@@ -1,75 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <data>
-
-        <variable
-            name="viewModel"
-            type="com.hieuwu.groceriesstore.presentation.notificationsettings.NotificationSettingsViewModel" />
-    </data>
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        tools:context=".presentation.notificationsettings.NotificationSettingsFragment">
-
-        <com.google.android.material.appbar.AppBarLayout
-            android:id="@+id/appbar"
-            android:layout_width="match_parent"
-            android:layout_height="?android:attr/actionBarSize"
-            app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
-
-            <com.google.android.material.appbar.MaterialToolbar
-                android:id="@+id/toolbar"
-                android:layout_width="match_parent"
-                android:layout_height="?attr/actionBarSize"
-                android:background="@android:color/transparent"
-                app:contentInsetStartWithNavigation="0dp"
-                app:menu="@menu/update_menu"
-                app:navigationIcon="@drawable/ic_detail_back"
-                app:title="@string/notifications"
-                app:titleCentered="true"
-                app:titleTextColor="@android:color/white"
-                app:toolbarId="@id/toolbar" />
-
-        </com.google.android.material.appbar.AppBarLayout>
-
-        <Switch
-            android:id="@+id/switch_order_created"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:checked="@={viewModel.isOrderCreatedNotiEnabled}"
-            android:layout_marginHorizontal="@dimen/margin_medium"
-            android:layout_marginTop="@dimen/margin_medium"
-            android:minHeight="@dimen/switch_min_height"
-            android:text="@string/show_when_order_created"
-            app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/appbar" />
-
-        <Switch
-            android:id="@+id/switch_promotion"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:checked="@={viewModel.isPromotionNotiEnabled}"
-            android:layout_marginHorizontal="@dimen/margin_medium"
-            android:minHeight="@dimen/switch_min_height"
-            android:text="@string/show_when_promotion_sent"
-            app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/switch_order_created" />
-
-        <Switch
-            android:id="@+id/switch_database_refresh_done"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:checked="@={viewModel.isDatabaseRefreshedNotiEnabled}"
-            android:layout_marginHorizontal="@dimen/margin_medium"
-            android:minHeight="@dimen/switch_min_height"
-            android:text="@string/show_when_app_data_is_refreshed"
-            app:layout_constraintLeft_toLeftOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/switch_promotion" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>