From 5cd2c8df0674f596e39abfa06e48ff3c90c5bc11 Mon Sep 17 00:00:00 2001
From: Taewan Park <swimingtw@gmail.com>
Date: Tue, 12 Dec 2023 14:59:58 +0900
Subject: [PATCH] v0.3.1
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚀 Feature Updates

- System Navigation Bar 색상도 테마에 바뀌게끔 수정
- 상품 상세 화면에서 Graph 영역이 세로로 슬라이드할 경우 스크롤 영역에 적용되도록 변경 (이제부터는 길게 누를 시 그래프 라벨이 활성화됩니다)
- 일부 페이지에서 접근성 개선

🔧 Bug Fixes

- 상품 목록 화면에서 알림 토글을 껐다가 켰을때 활성화 상태에서 꺼짐 상태에 아이콘이 뜨는 오류 수정
- 상품 목록 화면에서 화면의 토글값을 변경한 후, 새로고침을 했을때 원래대로 돌아오는 문제 수정
- 로딩중일때 상품 상세 화면에서 버튼들 비활성화
- Dynamic Theme을 지원하지 않는 OS의 경우 해당 테마 설정 View 비활성화
- 상품, 상품 추천 목록 전환시 스크롤 / 당겨서 새로고침 오류 수정
- 화면 회전 시 다이얼로그가 사라지는 현상 수정
- 상품 상세 페이지에서 화면 회전 시 Scroll State가 초기화되는 현상 수정
- 모든 페이지에서 버튼 연속 입력 방지 처리
- 모든 페이지에서 메모리 누수가 일어나는 일부 항목들 수정
- 시스템 글꼴을 키웠을때 UI가 깨지는 문제 수정
- 테마 변경 후 앱 재시작 시 테마 변경이 안되는 오류 수정
- 목표 가격 수정 시 가격 수정 화면 초기 값 기존 목표 가격으로 수정
- 내 정보 페이지에서 이름에 문자만 나올 수 있도록 수정

Material Chart Changelog: https://github.com/Taewan-P/material-android-chart/releases/tag/v0.2.0

Co-Authored-By: EunhoKang <zay0njugin@gmail.com>
Co-Authored-By: ootr47 <83055885+ootr47@users.noreply.github.com>
Co-Authored-By: 손문기 <39684860+Muungi@users.noreply.github.com>
Co-Authored-By: ByeongIk Choi <bichoi0715@gmail.com>
---
 android/app/build.gradle.kts                  |   6 +-
 .../product/ProductRepositoryImpl.kt          |   2 +-
 .../app/priceguard/ui/ErrorDialogFragment.kt  |  44 ++++++
 .../java/app/priceguard/ui/PriceGuardApp.kt   |  22 +--
 .../priceguard/ui/additem/AddItemActivity.kt  |  14 +-
 .../confirm/ConfirmItemLinkFragment.kt        |   3 +-
 .../additem/link/LinkHelperWebViewActivity.kt |  17 ++-
 .../additem/link/RegisterItemLinkFragment.kt  |  11 +-
 .../setprice/SetTargetPriceFragment.kt        |  86 +++++------
 .../setprice/SetTargetPriceViewModel.kt       |   5 +-
 .../priceguard/ui/data/DialogConfirmAction.kt |   7 +
 .../priceguard/ui/detail/DetailActivity.kt    | 100 +++++++------
 .../app/priceguard/ui/home/HomeActivity.kt    |   5 +-
 .../ui/home/ProductSummaryAdapter.kt          |  75 +++++++---
 .../ui/home/list/ProductListFragment.kt       |  27 ++--
 .../ui/home/list/ProductListViewModel.kt      |  32 +++--
 .../ui/home/mypage/MyPageFragment.kt          |  43 ++++--
 .../ui/home/mypage/MyPageViewModel.kt         |  11 +-
 .../recommend/RecommendedProductFragment.kt   |  21 ++-
 .../ui/home/theme/ThemeDialogFragment.kt      | 100 +++++++------
 .../app/priceguard/ui/intro/IntroActivity.kt  |   3 +
 .../app/priceguard/ui/login/LoginActivity.kt  |  44 +++---
 .../priceguard/ui/signup/SignupActivity.kt    |  33 ++---
 .../priceguard/ui/signup/SignupViewModel.kt   |   3 +-
 .../ui/splash/SplashScreenActivity.kt         |   3 +
 .../ui/util/ConfirmDialogFragment.kt          |  81 +++++++++++
 .../java/app/priceguard/ui/util/Dialog.kt     |  57 ++++++++
 .../ui/util/{ui => }/ImageViewAdapter.kt      |   2 +-
 .../ui/util/NavControllerExtensions.kt        |  12 ++
 .../app/priceguard/ui/util/NavigationBar.kt   |  17 +++
 .../ui/util/{ui => }/NotificationSetting.kt   |   2 +-
 .../{ui => }/drawable/ProgressIndicator.kt    |   2 +-
 .../ui/util/ui/DisableAppBarScroll.kt         |  32 -----
 .../priceguard/ui/util/ui/NetworkDialog.kt    |  42 ------
 .../src/main/res/layout/activity_detail.xml   |  89 +++++++-----
 .../layout/activity_link_helper_web_view.xml  |   1 +
 .../src/main/res/layout/fragment_my_page.xml  |   6 +-
 .../main/res/layout/fragment_product_list.xml |   1 +
 .../layout/fragment_recommended_product.xml   |   1 +
 .../res/layout/fragment_set_target_price.xml  |   4 +-
 .../app/src/main/res/navigation/nav_graph.xml |   3 +
 .../app/src/main/res/values-night/themes.xml  |   2 +
 android/app/src/main/res/values/colors.xml    |   2 +
 android/app/src/main/res/values/themes.xml    |   4 +-
 android/release_notes.txt                     |  32 +++--
 backend/src/auth/auth.service.ts              |   6 +-
 backend/src/auth/jwt/jwt.repository.ts        |  20 ---
 backend/src/auth/jwt/jwt.service.ts           |   3 +-
 backend/src/cache/cache.node.ts               |  11 ++
 backend/src/cache/cache.service.ts            | 114 +++++++++++++++
 .../{utils/cache.ts => cache/rank.cache.ts}   |  45 +++---
 backend/src/cache/tracking.cache.ts           | 120 ++++++++++++++++
 backend/src/constants.ts                      |   6 +-
 backend/src/entities/token.entity.ts          |  10 --
 backend/src/firebase/firebase.config.ts       |   2 +-
 backend/src/product/product.module.ts         |  10 +-
 backend/src/product/product.service.ts        | 135 ++++++++++--------
 57 files changed, 1056 insertions(+), 535 deletions(-)
 create mode 100644 android/app/src/main/java/app/priceguard/ui/ErrorDialogFragment.kt
 create mode 100644 android/app/src/main/java/app/priceguard/ui/data/DialogConfirmAction.kt
 create mode 100644 android/app/src/main/java/app/priceguard/ui/util/ConfirmDialogFragment.kt
 create mode 100644 android/app/src/main/java/app/priceguard/ui/util/Dialog.kt
 rename android/app/src/main/java/app/priceguard/ui/util/{ui => }/ImageViewAdapter.kt (93%)
 create mode 100644 android/app/src/main/java/app/priceguard/ui/util/NavControllerExtensions.kt
 create mode 100644 android/app/src/main/java/app/priceguard/ui/util/NavigationBar.kt
 rename android/app/src/main/java/app/priceguard/ui/util/{ui => }/NotificationSetting.kt (89%)
 rename android/app/src/main/java/app/priceguard/ui/util/{ui => }/drawable/ProgressIndicator.kt (92%)
 delete mode 100644 android/app/src/main/java/app/priceguard/ui/util/ui/DisableAppBarScroll.kt
 delete mode 100644 android/app/src/main/java/app/priceguard/ui/util/ui/NetworkDialog.kt
 delete mode 100644 backend/src/auth/jwt/jwt.repository.ts
 create mode 100644 backend/src/cache/cache.node.ts
 create mode 100644 backend/src/cache/cache.service.ts
 rename backend/src/{utils/cache.ts => cache/rank.cache.ts} (74%)
 create mode 100644 backend/src/cache/tracking.cache.ts
 delete mode 100644 backend/src/entities/token.entity.ts

diff --git a/android/app/build.gradle.kts b/android/app/build.gradle.kts
index 31914149..251fd6a3 100644
--- a/android/app/build.gradle.kts
+++ b/android/app/build.gradle.kts
@@ -19,8 +19,8 @@ android {
         applicationId = "app.priceguard"
         minSdk = 29
         targetSdk = 34
-        versionCode = 4
-        versionName = "0.3.0"
+        versionCode = 5
+        versionName = "0.3.1"
 
         testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
     }
@@ -111,7 +111,7 @@ dependencies {
     kapt("androidx.hilt:hilt-compiler:1.1.0")
 
     // Material chart
-    implementation("app.priceguard:materialchart:0.1.2")
+    implementation("app.priceguard:materialchart:0.2.0")
 }
 
 kapt {
diff --git a/android/app/src/main/java/app/priceguard/data/repository/product/ProductRepositoryImpl.kt b/android/app/src/main/java/app/priceguard/data/repository/product/ProductRepositoryImpl.kt
index acc34735..88e32e05 100644
--- a/android/app/src/main/java/app/priceguard/data/repository/product/ProductRepositoryImpl.kt
+++ b/android/app/src/main/java/app/priceguard/data/repository/product/ProductRepositoryImpl.kt
@@ -175,7 +175,7 @@ class ProductRepositoryImpl @Inject constructor(
                             dto.imageUrl ?: "",
                             dto.price ?: 0,
                             dto.rank ?: 0,
-                            GraphDataConverter().toDataset(dto.priceData)
+                            graphDataConverter.toDataset(dto.priceData)
                         )
                     } ?: listOf()
                 )
diff --git a/android/app/src/main/java/app/priceguard/ui/ErrorDialogFragment.kt b/android/app/src/main/java/app/priceguard/ui/ErrorDialogFragment.kt
new file mode 100644
index 00000000..0ab68b0a
--- /dev/null
+++ b/android/app/src/main/java/app/priceguard/ui/ErrorDialogFragment.kt
@@ -0,0 +1,44 @@
+package app.priceguard.ui
+
+import android.app.Dialog
+import android.content.Intent
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import app.priceguard.R
+import app.priceguard.data.repository.token.TokenRepository
+import app.priceguard.ui.login.LoginActivity
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import javax.inject.Inject
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.launch
+
+class ErrorDialogFragment : DialogFragment() {
+
+    @Inject
+    lateinit var tokenRepository: TokenRepository
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        return MaterialAlertDialogBuilder(
+            requireActivity(),
+            R.style.ThemeOverlay_App_MaterialAlertDialog
+        ).apply {
+            setTitle(getString(R.string.permission_denied_title))
+            setMessage(getString(R.string.permission_denied_message))
+            setPositiveButton(getString(R.string.confirm)) { _, _ -> goBackToLoginActivity(tokenRepository) }
+        }.create()
+    }
+
+    override fun onStart() {
+        super.onStart()
+        dialog?.setCancelable(false)
+    }
+
+    private fun goBackToLoginActivity(tokenRepository: TokenRepository) {
+        CoroutineScope(Dispatchers.IO).launch { tokenRepository.clearTokens() }
+        val intent = Intent(requireActivity(), LoginActivity::class.java)
+        intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
+        startActivity(intent)
+        requireActivity().finish()
+    }
+}
diff --git a/android/app/src/main/java/app/priceguard/ui/PriceGuardApp.kt b/android/app/src/main/java/app/priceguard/ui/PriceGuardApp.kt
index 829419be..dc0e1908 100644
--- a/android/app/src/main/java/app/priceguard/ui/PriceGuardApp.kt
+++ b/android/app/src/main/java/app/priceguard/ui/PriceGuardApp.kt
@@ -1,8 +1,6 @@
 package app.priceguard.ui
 
 import android.app.Application
-import android.app.UiModeManager
-import android.content.Context
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.hilt.work.HiltWorkerFactory
 import androidx.work.Configuration
@@ -47,23 +45,15 @@ class PriceGuardApp : Application(), Configuration.Provider {
 
             when (darkMode) {
                 MODE_LIGHT -> {
-                    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.S) {
-                        val uiModeManager =
-                            getSystemService(Context.UI_MODE_SERVICE) as UiModeManager
-                        uiModeManager.setApplicationNightMode(UiModeManager.MODE_NIGHT_NO)
-                    } else {
-                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
-                    }
+                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
                 }
 
                 MODE_DARK -> {
-                    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.S) {
-                        val uiModeManager =
-                            getSystemService(Context.UI_MODE_SERVICE) as UiModeManager
-                        uiModeManager.setApplicationNightMode(UiModeManager.MODE_NIGHT_YES)
-                    } else {
-                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
-                    }
+                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
+                }
+
+                else -> {
+                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
                 }
             }
         }
diff --git a/android/app/src/main/java/app/priceguard/ui/additem/AddItemActivity.kt b/android/app/src/main/java/app/priceguard/ui/additem/AddItemActivity.kt
index 132accb5..f33794bf 100644
--- a/android/app/src/main/java/app/priceguard/ui/additem/AddItemActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/additem/AddItemActivity.kt
@@ -3,12 +3,13 @@ package app.priceguard.ui.additem
 import android.content.Intent
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatActivity
-import androidx.navigation.NavController
-import androidx.navigation.NavDirections
 import androidx.navigation.fragment.NavHostFragment
 import app.priceguard.R
 import app.priceguard.databinding.ActivityAddItemBinding
 import app.priceguard.ui.additem.link.RegisterItemLinkFragmentDirections
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
+import app.priceguard.ui.util.safeNavigate
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -18,7 +19,7 @@ class AddItemActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
-
+        this.applySystemNavigationBarColor(SystemNavigationColorState.SURFACE)
         binding = ActivityAddItemBinding.inflate(layoutInflater)
         setStartDestination()
         setContentView(binding.root)
@@ -43,13 +44,10 @@ class AddItemActivity : AppCompatActivity() {
                     intent.getStringExtra("productCode") ?: "",
                     intent.getStringExtra("productTitle") ?: "",
                     intent.getIntExtra("productPrice", 0),
-                    intent.getBooleanExtra("isAdding", true)
+                    intent.getBooleanExtra("isAdding", true),
+                    intent.getIntExtra("productTargetPrice", (intent.getIntExtra("productPrice", 0) * 0.8).toInt())
                 )
             navController.safeNavigate(action)
         }
     }
-
-    private fun NavController.safeNavigate(direction: NavDirections) {
-        currentDestination?.getAction(direction.actionId)?.run { navigate(direction) }
-    }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/additem/confirm/ConfirmItemLinkFragment.kt b/android/app/src/main/java/app/priceguard/ui/additem/confirm/ConfirmItemLinkFragment.kt
index f8f434a3..8f285a41 100644
--- a/android/app/src/main/java/app/priceguard/ui/additem/confirm/ConfirmItemLinkFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/additem/confirm/ConfirmItemLinkFragment.kt
@@ -57,7 +57,8 @@ class ConfirmItemLinkFragment : Fragment() {
                     arguments.getString("productCode") ?: "",
                     arguments.getString("productName") ?: "",
                     arguments.getInt("productPrice"),
-                    true
+                    true,
+                    (arguments.getInt("productPrice") * 0.8).toInt()
                 )
             findNavController().navigate(action)
         }
diff --git a/android/app/src/main/java/app/priceguard/ui/additem/link/LinkHelperWebViewActivity.kt b/android/app/src/main/java/app/priceguard/ui/additem/link/LinkHelperWebViewActivity.kt
index 23727c6e..cb7996fe 100644
--- a/android/app/src/main/java/app/priceguard/ui/additem/link/LinkHelperWebViewActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/additem/link/LinkHelperWebViewActivity.kt
@@ -1,12 +1,13 @@
 package app.priceguard.ui.additem.link
 
 import android.os.Bundle
+import android.webkit.WebView
 import androidx.appcompat.app.AppCompatActivity
 import app.priceguard.databinding.ActivityLinkHelperWebViewBinding
 
 class LinkHelperWebViewActivity : AppCompatActivity() {
-
     private lateinit var binding: ActivityLinkHelperWebViewBinding
+    private lateinit var webView: WebView
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -14,6 +15,18 @@ class LinkHelperWebViewActivity : AppCompatActivity() {
         binding = ActivityLinkHelperWebViewBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
-        binding.wbLinkHelper.loadUrl("https://info-kr.priceguard.app/")
+        webView = WebView(this)
+        webView.loadUrl("https://info-kr.priceguard.app/")
+        binding.wbLinkHelper.addView(webView)
+    }
+
+    override fun onDestroy() {
+        super.onDestroy()
+        binding.wbLinkHelper.removeAllViews()
+        webView.clearHistory()
+        webView.clearCache(true)
+        webView.loadUrl("about:blank")
+        webView.pauseTimers()
+        webView.destroy()
     }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/additem/link/RegisterItemLinkFragment.kt b/android/app/src/main/java/app/priceguard/ui/additem/link/RegisterItemLinkFragment.kt
index e5d3c2f3..25b033a9 100644
--- a/android/app/src/main/java/app/priceguard/ui/additem/link/RegisterItemLinkFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/additem/link/RegisterItemLinkFragment.kt
@@ -8,8 +8,6 @@ import android.view.ViewGroup
 import androidx.activity.addCallback
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
-import androidx.navigation.NavController
-import androidx.navigation.NavDirections
 import androidx.navigation.fragment.findNavController
 import app.priceguard.R
 import app.priceguard.data.repository.product.ProductErrorState
@@ -17,7 +15,8 @@ import app.priceguard.data.repository.token.TokenRepository
 import app.priceguard.databinding.FragmentRegisterItemLinkBinding
 import app.priceguard.ui.home.HomeActivity
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.showPermissionDeniedDialog
+import app.priceguard.ui.util.safeNavigate
+import app.priceguard.ui.util.showDialogWithLogout
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
@@ -111,7 +110,7 @@ class RegisterItemLinkFragment : Fragment() {
                     is RegisterItemLinkViewModel.RegisterLinkEvent.FailureVerification -> {
                         when (event.errorType) {
                             ProductErrorState.PERMISSION_DENIED -> {
-                                requireActivity().showPermissionDeniedDialog(tokenRepository)
+                                showDialogWithLogout()
                             }
 
                             ProductErrorState.INVALID_REQUEST -> {
@@ -132,10 +131,6 @@ class RegisterItemLinkFragment : Fragment() {
         binding.tvRegisterItemError.text = message
     }
 
-    private fun NavController.safeNavigate(direction: NavDirections) {
-        currentDestination?.getAction(direction.actionId)?.run { navigate(direction) }
-    }
-
     override fun onDestroyView() {
         super.onDestroyView()
         _binding = null
diff --git a/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceFragment.kt b/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceFragment.kt
index 209d6fd7..aa7e39be 100644
--- a/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceFragment.kt
@@ -1,6 +1,5 @@
 package app.priceguard.ui.additem.setprice
 
-import android.content.Intent
 import android.os.Bundle
 import android.text.Editable
 import android.view.LayoutInflater
@@ -16,10 +15,10 @@ import app.priceguard.data.repository.product.ProductErrorState
 import app.priceguard.data.repository.token.TokenRepository
 import app.priceguard.databinding.FragmentSetTargetPriceBinding
 import app.priceguard.ui.additem.setprice.SetTargetPriceViewModel.SetTargetPriceEvent
-import app.priceguard.ui.home.HomeActivity
+import app.priceguard.ui.data.DialogConfirmAction
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.showPermissionDeniedDialog
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import app.priceguard.ui.util.showDialogWithAction
+import app.priceguard.ui.util.showDialogWithLogout
 import com.google.android.material.slider.Slider
 import com.google.android.material.slider.Slider.OnSliderTouchListener
 import dagger.hilt.android.AndroidEntryPoint
@@ -73,8 +72,9 @@ class SetTargetPriceFragment : Fragment() {
         val productCode = arguments.getString("productCode") ?: ""
         val title = arguments.getString("productTitle") ?: ""
         val price = arguments.getInt("productPrice")
+        var targetPrice = arguments.getInt("productTargetPrice")
 
-        setTargetPriceViewModel.updateTargetPrice((price * 0.8).toInt())
+        setTargetPriceViewModel.updateTargetPrice(targetPrice)
 
         tvSetPriceCurrentPrice.text =
             String.format(
@@ -85,7 +85,9 @@ class SetTargetPriceFragment : Fragment() {
             getString(R.string.current_price_info, tvSetPriceCurrentPrice.text)
 
         setTargetPriceViewModel.setProductInfo(productCode, title, price)
-        etTargetPrice.setText((price * 0.8).toInt().toString())
+        etTargetPrice.setText(targetPrice.toString())
+
+        updateSlideValueWithPrice(targetPrice.toFloat())
     }
 
     private fun FragmentSetTargetPriceBinding.initListener() {
@@ -128,20 +130,7 @@ class SetTargetPriceFragment : Fragment() {
             }
 
             setTargetPriceViewModel.updateTargetPrice(targetPrice.toInt())
-
-            val percent =
-                ((targetPrice / setTargetPriceViewModel.state.value.productPrice) * MAX_PERCENT).toInt()
-
-            binding.tvTargetPricePercent.text =
-                String.format(getString(R.string.current_price_percent), percent)
-
-            binding.tvTargetPricePercent.contentDescription = getString(
-                R.string.target_price_percent_and_price,
-                binding.tvTargetPricePercent.text,
-                binding.tvSetPriceCurrentPrice.text
-            )
-
-            binding.updateSlideValueWithPrice(targetPrice, percent.roundAtFirstDigit())
+            binding.updateSlideValueWithPrice(targetPrice)
         }
     }
 
@@ -164,34 +153,37 @@ class SetTargetPriceFragment : Fragment() {
             setTargetPriceViewModel.event.collect { event ->
                 when (event) {
                     is SetTargetPriceEvent.SuccessProductAdd -> {
-                        showActivityFinishDialog(
+                        showDialogWithAction(
                             getString(R.string.success_add),
-                            getString(R.string.success_add_message)
+                            getString(R.string.success_add_message),
+                            DialogConfirmAction.FINISH
                         )
                     }
 
                     is SetTargetPriceEvent.SuccessPriceUpdate -> {
-                        showActivityFinishDialog(
+                        showDialogWithAction(
                             getString(R.string.success_update),
-                            getString(R.string.success_update_message)
+                            getString(R.string.success_update_message),
+                            DialogConfirmAction.FINISH
                         )
                     }
 
                     is SetTargetPriceEvent.FailurePriceAdd -> {
                         when (event.errorType) {
                             ProductErrorState.EXIST -> {
-                                showActivityFinishDialog(
+                                showDialogWithAction(
                                     getString(R.string.error_add_product),
-                                    getString(R.string.exist_product)
+                                    getString(R.string.exist_product),
+                                    DialogConfirmAction.FINISH
                                 )
                             }
 
                             ProductErrorState.PERMISSION_DENIED -> {
-                                requireActivity().showPermissionDeniedDialog(tokenRepository)
+                                showDialogWithLogout()
                             }
 
                             else -> {
-                                showActivityFinishDialog(
+                                showDialogWithAction(
                                     getString(R.string.error),
                                     getString(R.string.retry)
                                 )
@@ -202,11 +194,11 @@ class SetTargetPriceFragment : Fragment() {
                     is SetTargetPriceEvent.FailurePriceUpdate -> {
                         when (event.errorType) {
                             ProductErrorState.PERMISSION_DENIED -> {
-                                requireActivity().showPermissionDeniedDialog(tokenRepository)
+                                showDialogWithLogout()
                             }
 
                             else -> {
-                                showActivityFinishDialog(
+                                showDialogWithAction(
                                     getString(R.string.error_patch_price),
                                     getString(R.string.retry)
                                 )
@@ -218,34 +210,22 @@ class SetTargetPriceFragment : Fragment() {
         }
     }
 
-    private fun showActivityFinishDialog(title: String, message: String) {
-        MaterialAlertDialogBuilder(requireActivity(), R.style.ThemeOverlay_App_MaterialAlertDialog)
-            .setTitle(title)
-            .setMessage(message)
-            .setPositiveButton(R.string.confirm) { _, _ -> goToHomeActivity() }
-            .setOnDismissListener { goToHomeActivity() }
-            .create()
-            .show()
-    }
+    private fun FragmentSetTargetPriceBinding.updateSlideValueWithPrice(targetPrice: Float) {
+        val percent =
+            ((targetPrice / setTargetPriceViewModel.state.value.productPrice) * MAX_PERCENT).toInt().roundAtFirstDigit()
 
-    private fun goToHomeActivity() {
-        val activityIntent = requireActivity().intent
-        if (activityIntent?.action == Intent.ACTION_SEND) {
-            val intent = Intent(requireActivity(), HomeActivity::class.java)
-            intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
-            startActivity(intent)
-        }
-        requireActivity().finish()
-    }
-
-    private fun FragmentSetTargetPriceBinding.updateSlideValueWithPrice(
-        targetPrice: Float,
-        percent: Int
-    ) {
         val pricePercent = percent.coerceIn(MIN_PERCENT, MAX_PERCENT)
         if (targetPrice > setTargetPriceViewModel.state.value.productPrice) {
             tvTargetPricePercent.text = getString(R.string.over_current_price)
+        } else {
+            tvTargetPricePercent.text =
+                String.format(getString(R.string.current_price_percent), percent)
         }
+        binding.tvTargetPricePercent.contentDescription = getString(
+            R.string.target_price_percent_and_price,
+            binding.tvTargetPricePercent.text,
+            binding.tvSetPriceCurrentPrice.text
+        )
         slTargetPrice.value = pricePercent.toFloat()
     }
 
diff --git a/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceViewModel.kt b/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceViewModel.kt
index 51205227..c40b3d02 100644
--- a/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceViewModel.kt
+++ b/android/app/src/main/java/app/priceguard/ui/additem/setprice/SetTargetPriceViewModel.kt
@@ -21,7 +21,8 @@ class SetTargetPriceViewModel @Inject constructor(private val productRepository:
         val productCode: String = "",
         val targetPrice: Int = 0,
         val productName: String = "",
-        val productPrice: Int = 0
+        val productPrice: Int = 0,
+        val isReady: Boolean = true
     )
 
     sealed class SetTargetPriceEvent {
@@ -39,6 +40,7 @@ class SetTargetPriceViewModel @Inject constructor(private val productRepository:
 
     fun addProduct() {
         viewModelScope.launch {
+            _state.value = state.value.copy(isReady = false)
             val response = productRepository.addProduct(
                 _state.value.productCode,
                 _state.value.targetPrice
@@ -52,6 +54,7 @@ class SetTargetPriceViewModel @Inject constructor(private val productRepository:
                     _event.emit(SetTargetPriceEvent.FailurePriceAdd(response.errorState))
                 }
             }
+            _state.value = state.value.copy(isReady = true)
         }
     }
 
diff --git a/android/app/src/main/java/app/priceguard/ui/data/DialogConfirmAction.kt b/android/app/src/main/java/app/priceguard/ui/data/DialogConfirmAction.kt
new file mode 100644
index 00000000..18de82ea
--- /dev/null
+++ b/android/app/src/main/java/app/priceguard/ui/data/DialogConfirmAction.kt
@@ -0,0 +1,7 @@
+package app.priceguard.ui.data
+
+enum class DialogConfirmAction {
+    NOTHING,
+    FINISH,
+    CUSTOM
+}
diff --git a/android/app/src/main/java/app/priceguard/ui/detail/DetailActivity.kt b/android/app/src/main/java/app/priceguard/ui/detail/DetailActivity.kt
index e34804e6..7fe0a3e9 100644
--- a/android/app/src/main/java/app/priceguard/ui/detail/DetailActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/detail/DetailActivity.kt
@@ -1,11 +1,11 @@
 package app.priceguard.ui.detail
 
-import android.content.DialogInterface
 import android.content.Intent
 import android.net.Uri
 import android.os.Bundle
 import android.widget.Toast
 import androidx.activity.addCallback
+import androidx.activity.result.contract.ActivityResultContracts
 import androidx.activity.viewModels
 import androidx.appcompat.app.AppCompatActivity
 import app.priceguard.R
@@ -16,24 +16,33 @@ import app.priceguard.data.repository.token.TokenRepository
 import app.priceguard.databinding.ActivityDetailBinding
 import app.priceguard.materialchart.data.GraphMode
 import app.priceguard.ui.additem.AddItemActivity
+import app.priceguard.ui.data.DialogConfirmAction
 import app.priceguard.ui.home.HomeActivity
+import app.priceguard.ui.util.ConfirmDialogFragment
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.showConfirmationDialog
-import app.priceguard.ui.util.ui.showPermissionDeniedDialog
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import app.priceguard.ui.util.showConfirmDialog
+import app.priceguard.ui.util.showDialogWithLogout
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
 @AndroidEntryPoint
-class DetailActivity : AppCompatActivity() {
+class DetailActivity : AppCompatActivity(), ConfirmDialogFragment.OnDialogResultListener {
 
     @Inject
     lateinit var tokenRepository: TokenRepository
     private lateinit var binding: ActivityDetailBinding
     private val productDetailViewModel: ProductDetailViewModel by viewModels()
 
+    private val activityResultLauncher =
+        registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
+            binding.btnDetailShare.isEnabled = true
+        }
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        this.applySystemNavigationBarColor(SystemNavigationColorState.SURFACE)
         binding = ActivityDetailBinding.inflate(layoutInflater)
         binding.lifecycleOwner = this
         binding.viewModel = productDetailViewModel
@@ -74,6 +83,7 @@ class DetailActivity : AppCompatActivity() {
             intent.putExtra("productCode", productDetailViewModel.productCode)
             intent.putExtra("productTitle", productDetailViewModel.state.value.productName)
             intent.putExtra("productPrice", productDetailViewModel.state.value.price)
+            intent.putExtra("productTargetPrice", productDetailViewModel.state.value.targetPrice)
             intent.putExtra("isAdding", false)
             this@DetailActivity.startActivity(intent)
         }
@@ -101,6 +111,7 @@ class DetailActivity : AppCompatActivity() {
         }
 
         binding.btnDetailShare.setOnClickListener {
+            binding.btnDetailShare.isEnabled = false
             val shareLink =
                 getString(R.string.share_link_template, productDetailViewModel.productCode)
 
@@ -112,7 +123,7 @@ class DetailActivity : AppCompatActivity() {
             }
 
             val shareIntent = Intent.createChooser(sendIntent, null)
-            startActivity(shareIntent)
+            activityResultLauncher.launch(shareIntent)
         }
     }
 
@@ -129,7 +140,11 @@ class DetailActivity : AppCompatActivity() {
         val productCodeFromDeepLink = deepLink?.getQueryParameter("code")
 
         if (productCode == null && productCodeFromDeepLink == null) {
-            showDialogAndExit(getString(R.string.error), getString(R.string.invalid_access))
+            showConfirmDialog(
+                getString(R.string.error),
+                getString(R.string.invalid_access),
+                DialogConfirmAction.FINISH
+            )
             return
         }
 
@@ -165,20 +180,22 @@ class DetailActivity : AppCompatActivity() {
             productDetailViewModel.event.collect { event ->
                 when (event) {
                     ProductDetailViewModel.ProductDetailEvent.Logout -> {
-                        showDialogAndExit(getString(R.string.error), getString(R.string.logged_out))
+                        showDialogWithLogout()
                     }
 
                     ProductDetailViewModel.ProductDetailEvent.NotFound -> {
-                        showDialogAndExit(
+                        showConfirmDialog(
                             getString(R.string.error),
-                            getString(R.string.product_not_found)
+                            getString(R.string.product_not_found),
+                            DialogConfirmAction.FINISH
                         )
                     }
 
                     ProductDetailViewModel.ProductDetailEvent.UnknownError -> {
-                        showDialogAndExit(
+                        showConfirmDialog(
                             getString(R.string.error),
-                            getString(R.string.undefined_error)
+                            getString(R.string.undefined_error),
+                            DialogConfirmAction.FINISH
                         )
                     }
 
@@ -190,34 +207,31 @@ class DetailActivity : AppCompatActivity() {
                     }
 
                     ProductDetailViewModel.ProductDetailEvent.DeleteTracking -> {
-                        showConfirmationDialog(
-                            getString(R.string.stop_tracking_confirm),
-                            getString(R.string.stop_tracking_detail)
-                        ) { _, _ -> productDetailViewModel.deleteProductTracking() }
+                        showConfirmationDialogForResult()
                     }
 
                     is ProductDetailViewModel.ProductDetailEvent.DeleteFailed -> {
                         when (event.errorType) {
                             ProductErrorState.NOT_FOUND -> {
-                                showConfirmationDialog(
+                                showConfirmDialog(
                                     getString(R.string.delete_product_failed),
                                     getString(R.string.product_not_found)
                                 )
                             }
 
                             ProductErrorState.INVALID_REQUEST -> {
-                                showConfirmationDialog(
+                                showConfirmDialog(
                                     getString(R.string.delete_product_failed),
                                     getString(R.string.invalid_request)
                                 )
                             }
 
                             ProductErrorState.PERMISSION_DENIED -> {
-                                showPermissionDeniedDialog(tokenRepository)
+                                showDialogWithLogout()
                             }
 
                             else -> {
-                                showConfirmationDialog(
+                                showConfirmDialog(
                                     getString(R.string.delete_product_failed),
                                     getString(R.string.undefined_error)
                                 )
@@ -254,7 +268,11 @@ class DetailActivity : AppCompatActivity() {
     }
 
     private fun goToHomeActivityIfDeepLinked() {
-        if (intent.data?.getQueryParameter("code") != null || intent.getBooleanExtra("directed", false)) {
+        if (intent.data?.getQueryParameter("code") != null || intent.getBooleanExtra(
+                "directed",
+                false
+            )
+        ) {
             val intent = Intent(this@DetailActivity, HomeActivity::class.java)
             intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
             startActivity(intent)
@@ -262,31 +280,27 @@ class DetailActivity : AppCompatActivity() {
         finish()
     }
 
-    private fun showConfirmationDialog(
-        title: String,
-        message: String,
-        onConfirm: DialogInterface.OnClickListener
-    ) {
-        MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_App_MaterialAlertDialog)
-            .setTitle(title)
-            .setMessage(message)
-            .setPositiveButton(getString(R.string.confirm), onConfirm)
-            .setNegativeButton(getString(R.string.cancel)) { _, _ -> }
-            .create()
-            .show()
-    }
-
-    private fun showDialogAndExit(title: String, message: String) {
-        MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_App_MaterialAlertDialog)
-            .setTitle(title)
-            .setMessage(message)
-            .setPositiveButton(getString(R.string.confirm)) { _, _ -> finish() }
-            .setCancelable(false)
-            .create()
-            .show()
+    private fun showConfirmationDialogForResult() {
+        val tag = "confirm_dialog_fragment_from_activity"
+        if (supportFragmentManager.findFragmentByTag(tag) != null) return
+
+        val dialogFragment = ConfirmDialogFragment()
+        val bundle = Bundle()
+        bundle.putString("title", getString(R.string.stop_tracking_confirm))
+        bundle.putString("message", getString(R.string.stop_tracking_detail))
+        bundle.putString("actionString", DialogConfirmAction.CUSTOM.name)
+        dialogFragment.arguments = bundle
+        dialogFragment.setOnDialogResultListener(this)
+        dialogFragment.show(supportFragmentManager, tag)
     }
 
     private fun showToast(message: String) {
         Toast.makeText(this, message, Toast.LENGTH_LONG).show()
     }
+
+    override fun onDialogResult(result: Boolean) {
+        if (result) {
+            productDetailViewModel.deleteProductTracking()
+        }
+    }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/home/HomeActivity.kt b/android/app/src/main/java/app/priceguard/ui/home/HomeActivity.kt
index e3c789ff..14a48b7c 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/HomeActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/HomeActivity.kt
@@ -16,7 +16,9 @@ import androidx.work.WorkManager
 import app.priceguard.R
 import app.priceguard.databinding.ActivityHomeBinding
 import app.priceguard.service.UpdateTokenWorker
-import app.priceguard.ui.util.ui.openNotificationSettings
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
+import app.priceguard.ui.util.openNotificationSettings
 import com.google.android.gms.common.ConnectionResult
 import com.google.android.gms.common.GoogleApiAvailability
 import com.google.android.material.snackbar.Snackbar
@@ -31,6 +33,7 @@ class HomeActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        this.applySystemNavigationBarColor(SystemNavigationColorState.BOTTOM_NAVIGATION)
         binding = ActivityHomeBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
diff --git a/android/app/src/main/java/app/priceguard/ui/home/ProductSummaryAdapter.kt b/android/app/src/main/java/app/priceguard/ui/home/ProductSummaryAdapter.kt
index 3590c0a7..cf282f0d 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/ProductSummaryAdapter.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/ProductSummaryAdapter.kt
@@ -13,8 +13,11 @@ import app.priceguard.data.graph.ProductChartDataset
 import app.priceguard.databinding.ItemProductSummaryBinding
 import app.priceguard.materialchart.data.GraphMode
 
-class ProductSummaryAdapter(private val productSummaryClickListener: ProductSummaryClickListener) :
-    ListAdapter<ProductSummary, ProductSummaryAdapter.ViewHolder>(diffUtil) {
+class ProductSummaryAdapter<T : ProductSummary>(
+    private val productSummaryClickListener: ProductSummaryClickListener,
+    diffUtil: DiffUtil.ItemCallback<T>
+) :
+    ListAdapter<T, ProductSummaryAdapter.ViewHolder>(diffUtil) {
 
     init {
         setHasStableIds(true)
@@ -43,6 +46,7 @@ class ProductSummaryAdapter(private val productSummaryClickListener: ProductSumm
 
         fun bind(item: ProductSummary) {
             with(binding) {
+                resetListener()
                 summary = item
                 setViewType(item)
                 setClickListener(item.productCode)
@@ -50,6 +54,10 @@ class ProductSummaryAdapter(private val productSummaryClickListener: ProductSumm
             }
         }
 
+        private fun ItemProductSummaryBinding.resetListener() {
+            msProduct.setOnCheckedChangeListener(null)
+        }
+
         private fun ItemProductSummaryBinding.setViewType(item: ProductSummary) {
             when (item) {
                 is ProductSummary.RecommendedProductSummary -> {
@@ -71,18 +79,22 @@ class ProductSummaryAdapter(private val productSummaryClickListener: ProductSumm
         }
 
         private fun ItemProductSummaryBinding.setSwitchListener(item: ProductSummary) {
-            if (msProduct.isChecked.not()) {
-                msProduct.setThumbIconResource(R.drawable.ic_notifications_off)
-            }
+            updateThumbIcon(msProduct.isChecked)
+
             msProduct.setOnCheckedChangeListener { _, isChecked ->
-                productSummaryClickListener.onToggle(item.productCode, msProduct.isChecked)
-                if (isChecked) {
-                    msProduct.setThumbIconResource(R.drawable.ic_notifications_active)
-                } else {
-                    msProduct.setThumbIconResource(R.drawable.ic_notifications_off)
-                }
+                productSummaryClickListener.onToggle(item.productCode, isChecked)
+                updateThumbIcon(isChecked)
+            }
+            msProduct.contentDescription =
+                msProduct.context.getString(R.string.single_product_notification_toggle, item.title)
+        }
+
+        private fun ItemProductSummaryBinding.updateThumbIcon(checked: Boolean) {
+            if (checked) {
+                msProduct.setThumbIconResource(R.drawable.ic_notifications_active)
+            } else {
+                msProduct.setThumbIconResource(R.drawable.ic_notifications_off)
             }
-            msProduct.contentDescription = msProduct.context.getString(R.string.single_product_notification_toggle, item.title)
         }
 
         private fun ItemProductSummaryBinding.setDiscount(discount: Float) {
@@ -105,14 +117,21 @@ class ProductSummaryAdapter(private val productSummaryClickListener: ProductSumm
                 true
             )
             tvProductDiscountPercent.setTextColor(value.data)
-            tvProductDiscountPercent.contentDescription = tvProductDiscountPercent.context.getString(R.string.target_price_delta, tvProductDiscountPercent.text)
+            tvProductDiscountPercent.contentDescription =
+                tvProductDiscountPercent.context.getString(
+                    R.string.target_price_delta,
+                    tvProductDiscountPercent.text
+                )
         }
 
         private fun ItemProductSummaryBinding.setRecommendRank(item: ProductSummary.RecommendedProductSummary) {
             tvProductRecommendRank.text = tvProductRecommendRank.context.getString(
                 R.string.recommand_rank, item.recommendRank
             )
-            tvProductRecommendRank.contentDescription = tvProductRecommendRank.context.getString(R.string.current_rank_info, item.recommendRank)
+            tvProductRecommendRank.contentDescription = tvProductRecommendRank.context.getString(
+                R.string.current_rank_info,
+                item.recommendRank
+            )
         }
 
         private fun ItemProductSummaryBinding.setClickListener(code: String) {
@@ -136,12 +155,28 @@ class ProductSummaryAdapter(private val productSummaryClickListener: ProductSumm
     }
 
     companion object {
-        val diffUtil = object : DiffUtil.ItemCallback<ProductSummary>() {
-            override fun areContentsTheSame(oldItem: ProductSummary, newItem: ProductSummary) =
-                oldItem == newItem
-
-            override fun areItemsTheSame(oldItem: ProductSummary, newItem: ProductSummary) =
-                oldItem.productCode == newItem.productCode
+        val userDiffUtil = object : DiffUtil.ItemCallback<ProductSummary.UserProductSummary>() {
+            override fun areContentsTheSame(
+                oldItem: ProductSummary.UserProductSummary,
+                newItem: ProductSummary.UserProductSummary
+            ) = oldItem.productCode == newItem.productCode &&
+                oldItem.price == newItem.price &&
+                oldItem.discountPercent == newItem.discountPercent &&
+                oldItem.title == newItem.title
+
+            override fun areItemsTheSame(
+                oldItem: ProductSummary.UserProductSummary,
+                newItem: ProductSummary.UserProductSummary
+            ) = oldItem.productCode == newItem.productCode
         }
+
+        val diffUtil =
+            object : DiffUtil.ItemCallback<ProductSummary>() {
+                override fun areContentsTheSame(oldItem: ProductSummary, newItem: ProductSummary) =
+                    oldItem == newItem
+
+                override fun areItemsTheSame(oldItem: ProductSummary, newItem: ProductSummary) =
+                    oldItem.productCode == newItem.productCode
+            }
     }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/home/list/ProductListFragment.kt b/android/app/src/main/java/app/priceguard/ui/home/list/ProductListFragment.kt
index d10b195d..bb08a5ea 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/list/ProductListFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/list/ProductListFragment.kt
@@ -5,10 +5,8 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
-import androidx.recyclerview.widget.SimpleItemAnimator
 import androidx.work.WorkManager
 import app.priceguard.R
 import app.priceguard.data.repository.product.ProductErrorState
@@ -20,9 +18,8 @@ import app.priceguard.ui.detail.DetailActivity
 import app.priceguard.ui.home.ProductSummaryAdapter
 import app.priceguard.ui.home.ProductSummaryClickListener
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.disableAppBarRecyclerView
-import app.priceguard.ui.util.ui.showConfirmationDialog
-import app.priceguard.ui.util.ui.showPermissionDeniedDialog
+import app.priceguard.ui.util.showDialogWithAction
+import app.priceguard.ui.util.showDialogWithLogout
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
@@ -54,10 +51,6 @@ class ProductListFragment : Fragment() {
         binding.initSettingAdapter()
         binding.initListener()
         collectEvent()
-        disableAppBarRecyclerView(
-            binding.ablProductList.layoutParams as CoordinatorLayout.LayoutParams,
-            binding.rvProductList
-        )
     }
 
     override fun onStart() {
@@ -66,11 +59,6 @@ class ProductListFragment : Fragment() {
     }
 
     private fun FragmentProductListBinding.initSettingAdapter() {
-        val animator = rvProductList.itemAnimator
-        if (animator is SimpleItemAnimator) {
-            animator.supportsChangeAnimations = false
-        }
-
         val listener = object : ProductSummaryClickListener {
             override fun onClick(productCode: String) {
                 val intent = Intent(context, DetailActivity::class.java)
@@ -88,7 +76,7 @@ class ProductListFragment : Fragment() {
             }
         }
 
-        val adapter = ProductSummaryAdapter(listener)
+        val adapter = ProductSummaryAdapter(listener, ProductSummaryAdapter.userDiffUtil)
         rvProductList.adapter = adapter
         this@ProductListFragment.repeatOnStarted {
             productListViewModel.productList.collect { list ->
@@ -117,25 +105,25 @@ class ProductListFragment : Fragment() {
             productListViewModel.events.collect { event ->
                 when (event) {
                     ProductErrorState.PERMISSION_DENIED -> {
-                        requireActivity().showPermissionDeniedDialog(tokenRepository)
+                        showDialogWithLogout()
                     }
 
                     ProductErrorState.INVALID_REQUEST -> {
-                        requireActivity().showConfirmationDialog(
+                        showDialogWithAction(
                             getString(R.string.product_list_failed),
                             getString(R.string.invalid_request)
                         )
                     }
 
                     ProductErrorState.NOT_FOUND -> {
-                        requireActivity().showConfirmationDialog(
+                        showDialogWithAction(
                             getString(R.string.product_list_failed),
                             getString(R.string.not_found)
                         )
                     }
 
                     else -> {
-                        requireActivity().showConfirmationDialog(
+                        showDialogWithAction(
                             getString(R.string.product_list_failed),
                             getString(R.string.undefined_error)
                         )
@@ -156,6 +144,7 @@ class ProductListFragment : Fragment() {
 
     override fun onDestroyView() {
         super.onDestroyView()
+        binding.rvProductList.adapter = null
         _binding = null
     }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/home/list/ProductListViewModel.kt b/android/app/src/main/java/app/priceguard/ui/home/list/ProductListViewModel.kt
index 5da268c8..d1cdafc5 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/list/ProductListViewModel.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/list/ProductListViewModel.kt
@@ -7,6 +7,7 @@ import app.priceguard.data.repository.RepositoryResult
 import app.priceguard.data.repository.product.ProductErrorState
 import app.priceguard.data.repository.product.ProductRepository
 import app.priceguard.materialchart.data.GraphMode
+import app.priceguard.ui.data.ProductData
 import app.priceguard.ui.home.ProductSummary.UserProductSummary
 import dagger.hilt.android.lifecycle.HiltViewModel
 import javax.inject.Inject
@@ -46,17 +47,7 @@ class ProductListViewModel @Inject constructor(
 
             when (result) {
                 is RepositoryResult.Success -> {
-                    _productList.value = result.data.map { data ->
-                        UserProductSummary(
-                            data.shop,
-                            data.productName,
-                            data.price,
-                            data.productCode,
-                            graphDataConverter.packWithEdgeData(data.priceData, GraphMode.WEEK),
-                            calculateDiscountRate(data.targetPrice, data.price),
-                            data.isAlert
-                        )
-                    }
+                    updateProductList(isRefresh, result.data)
                 }
 
                 is RepositoryResult.Error -> {
@@ -66,6 +57,25 @@ class ProductListViewModel @Inject constructor(
         }
     }
 
+    private fun updateProductList(refresh: Boolean, fetched: List<ProductData>) {
+        val productMap = mutableMapOf<String, Boolean>()
+        _productList.value.forEach { product ->
+            productMap[product.productCode] = product.isAlarmOn
+        }
+
+        _productList.value = fetched.map { data ->
+            UserProductSummary(
+                data.shop,
+                data.productName,
+                data.price,
+                data.productCode,
+                graphDataConverter.packWithEdgeData(data.priceData, GraphMode.WEEK),
+                calculateDiscountRate(data.targetPrice, data.price),
+                if (refresh) productMap[data.productCode] ?: data.isAlert else data.isAlert
+            )
+        }
+    }
+
     fun updateProductAlarmToggle(productCode: String, checked: Boolean) {
         _productList.value = productList.value.mapIndexed { _, product ->
             if (product.productCode == productCode) {
diff --git a/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageFragment.kt b/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageFragment.kt
index 7ee3e6d4..77c0c7b3 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageFragment.kt
@@ -12,23 +12,25 @@ import androidx.navigation.fragment.findNavController
 import app.priceguard.R
 import app.priceguard.data.repository.token.TokenRepository
 import app.priceguard.databinding.FragmentMyPageBinding
+import app.priceguard.ui.data.DialogConfirmAction
 import app.priceguard.ui.home.mypage.MyPageViewModel.MyPageEvent
 import app.priceguard.ui.intro.IntroActivity
+import app.priceguard.ui.util.ConfirmDialogFragment
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.openNotificationSettings
+import app.priceguard.ui.util.openNotificationSettings
+import app.priceguard.ui.util.safeNavigate
 import com.google.android.gms.oss.licenses.OssLicensesMenuActivity
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
 @AndroidEntryPoint
-class MyPageFragment : Fragment() {
+class MyPageFragment : Fragment(), ConfirmDialogFragment.OnDialogResultListener {
 
     @Inject
     lateinit var tokenRepository: TokenRepository
     private var _binding: FragmentMyPageBinding? = null
     private val binding get() = _binding!!
-    private val viewModel: MyPageViewModel by viewModels()
+    private val myPageViewModel: MyPageViewModel by viewModels()
 
     override fun onCreateView(
         inflater: LayoutInflater,
@@ -36,7 +38,7 @@ class MyPageFragment : Fragment() {
         savedInstanceState: Bundle?
     ): View {
         _binding = FragmentMyPageBinding.inflate(layoutInflater, container, false)
-        binding.viewModel = viewModel
+        binding.viewModel = myPageViewModel
         binding.lifecycleOwner = viewLifecycleOwner
         return binding.root
     }
@@ -47,7 +49,7 @@ class MyPageFragment : Fragment() {
         initSettingAdapter()
 
         repeatOnStarted {
-            viewModel.event.collect { event ->
+            myPageViewModel.event.collect { event ->
                 when (event) {
                     is MyPageEvent.StartIntroAndExitHome -> startIntroAndExitHome()
                 }
@@ -68,7 +70,7 @@ class MyPageFragment : Fragment() {
                             }
 
                             Setting.THEME -> {
-                                findNavController().navigate(R.id.action_myPageFragment_to_themeDialogFragment)
+                                findNavController().safeNavigate(R.id.action_myPageFragment_to_themeDialogFragment)
                             }
 
                             Setting.LICENSE -> {
@@ -76,7 +78,7 @@ class MyPageFragment : Fragment() {
                             }
 
                             Setting.LOGOUT -> {
-                                showLogoutConfirmDialog()
+                                showConfirmationDialogForResult()
                             }
                         }
                     }
@@ -109,13 +111,18 @@ class MyPageFragment : Fragment() {
         )
     }
 
-    private fun showLogoutConfirmDialog() {
-        MaterialAlertDialogBuilder(requireActivity(), R.style.ThemeOverlay_App_MaterialAlertDialog)
-            .setTitle(getString(R.string.logout_confirm_title))
-            .setMessage(getString(R.string.logout_confirm_message))
-            .setPositiveButton(getString(R.string.yes)) { _, _ -> viewModel.logout() }
-            .setNegativeButton(R.string.no) { dialog, _ -> dialog.dismiss() }
-            .show()
+    private fun showConfirmationDialogForResult() {
+        val tag = "confirm_dialog_fragment_from_activity"
+        if (requireActivity().supportFragmentManager.findFragmentByTag(tag) != null) return
+
+        val dialogFragment = ConfirmDialogFragment()
+        val bundle = Bundle()
+        bundle.putString("title", getString(R.string.logout_confirm_title))
+        bundle.putString("message", getString(R.string.logout_confirm_message))
+        bundle.putString("actionString", DialogConfirmAction.CUSTOM.name)
+        dialogFragment.arguments = bundle
+        dialogFragment.setOnDialogResultListener(this)
+        dialogFragment.show(requireActivity().supportFragmentManager, tag)
     }
 
     private fun startIntroAndExitHome() {
@@ -124,6 +131,12 @@ class MyPageFragment : Fragment() {
         requireActivity().finish()
     }
 
+    override fun onDialogResult(result: Boolean) {
+        if (result) {
+            myPageViewModel.logout()
+        }
+    }
+
     override fun onDestroyView() {
         super.onDestroyView()
         _binding = null
diff --git a/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageViewModel.kt b/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageViewModel.kt
index 3ec33420..12e49dcf 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageViewModel.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/mypage/MyPageViewModel.kt
@@ -43,7 +43,7 @@ class MyPageViewModel @Inject constructor(
                 MyPageInfo(
                     userData.name,
                     userData.email,
-                    if (userData.name.isNotEmpty()) userData.name.first().toString() else ""
+                    getFirstName(userData.name)
                 )
         }
     }
@@ -54,4 +54,13 @@ class MyPageViewModel @Inject constructor(
             _event.emit(MyPageEvent.StartIntroAndExitHome)
         }
     }
+
+    private fun getFirstName(name: String): String {
+        name.forEach {
+            if (it.isSurrogate().not() && it.toString().isNotBlank()) {
+                return it.uppercase()
+            }
+        }
+        return ""
+    }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/home/recommend/RecommendedProductFragment.kt b/android/app/src/main/java/app/priceguard/ui/home/recommend/RecommendedProductFragment.kt
index bee82f27..f6f54181 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/recommend/RecommendedProductFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/recommend/RecommendedProductFragment.kt
@@ -5,7 +5,6 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.coordinatorlayout.widget.CoordinatorLayout
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
 import app.priceguard.R
@@ -16,9 +15,8 @@ import app.priceguard.ui.detail.DetailActivity
 import app.priceguard.ui.home.ProductSummaryAdapter
 import app.priceguard.ui.home.ProductSummaryClickListener
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.disableAppBarRecyclerView
-import app.priceguard.ui.util.ui.showConfirmationDialog
-import app.priceguard.ui.util.ui.showPermissionDeniedDialog
+import app.priceguard.ui.util.showDialogWithAction
+import app.priceguard.ui.util.showDialogWithLogout
 import dagger.hilt.android.AndroidEntryPoint
 import javax.inject.Inject
 
@@ -48,10 +46,6 @@ class RecommendedProductFragment : Fragment() {
         binding.initSettingAdapter()
         binding.initListener()
         collectEvent()
-        disableAppBarRecyclerView(
-            binding.ablRecommendedProduct.layoutParams as CoordinatorLayout.LayoutParams,
-            binding.rvRecommendedProduct
-        )
     }
 
     override fun onStart() {
@@ -72,7 +66,7 @@ class RecommendedProductFragment : Fragment() {
             }
         }
 
-        val adapter = ProductSummaryAdapter(listener)
+        val adapter = ProductSummaryAdapter(listener, ProductSummaryAdapter.diffUtil)
         rvRecommendedProduct.adapter = adapter
         this@RecommendedProductFragment.repeatOnStarted {
             recommendedProductViewModel.recommendedProductList.collect { list ->
@@ -92,25 +86,25 @@ class RecommendedProductFragment : Fragment() {
             recommendedProductViewModel.events.collect { event ->
                 when (event) {
                     ProductErrorState.PERMISSION_DENIED -> {
-                        requireActivity().showPermissionDeniedDialog(tokenRepository)
+                        showDialogWithLogout()
                     }
 
                     ProductErrorState.INVALID_REQUEST -> {
-                        requireActivity().showConfirmationDialog(
+                        showDialogWithAction(
                             getString(R.string.recommended_product_failed),
                             getString(R.string.invalid_request)
                         )
                     }
 
                     ProductErrorState.NOT_FOUND -> {
-                        requireActivity().showConfirmationDialog(
+                        showDialogWithAction(
                             getString(R.string.recommended_product_failed),
                             getString(R.string.not_found)
                         )
                     }
 
                     else -> {
-                        requireActivity().showConfirmationDialog(
+                        showDialogWithAction(
                             getString(R.string.recommended_product_failed),
                             getString(R.string.undefined_error)
                         )
@@ -122,6 +116,7 @@ class RecommendedProductFragment : Fragment() {
 
     override fun onDestroyView() {
         super.onDestroyView()
+        binding.rvRecommendedProduct.adapter = null
         _binding = null
     }
 }
diff --git a/android/app/src/main/java/app/priceguard/ui/home/theme/ThemeDialogFragment.kt b/android/app/src/main/java/app/priceguard/ui/home/theme/ThemeDialogFragment.kt
index 58e8160b..ede9df7d 100644
--- a/android/app/src/main/java/app/priceguard/ui/home/theme/ThemeDialogFragment.kt
+++ b/android/app/src/main/java/app/priceguard/ui/home/theme/ThemeDialogFragment.kt
@@ -1,6 +1,7 @@
 package app.priceguard.ui.home.theme
 
 import android.app.Dialog
+import android.os.Build
 import android.os.Bundle
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.fragment.app.DialogFragment
@@ -22,13 +23,15 @@ class ThemeDialogFragment : DialogFragment() {
 
     @Inject
     lateinit var configDataSource: ConfigDataSource
+    private var _binding: FragmentThemeDialogBinding? = null
+    private val binding get() = _binding!!
 
     override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
-        val binding: FragmentThemeDialogBinding =
-            FragmentThemeDialogBinding.inflate(requireActivity().layoutInflater)
+        _binding = FragmentThemeDialogBinding.inflate(requireActivity().layoutInflater)
         val view = binding.root
 
-        setCheckedButton(binding)
+        setCheckedButton()
+        checkDynamicThemeSupport()
 
         return MaterialAlertDialogBuilder(
             requireActivity(),
@@ -36,48 +39,65 @@ class ThemeDialogFragment : DialogFragment() {
         ).apply {
             setView(view)
             setPositiveButton(R.string.confirm) { _, _ ->
-                val dynamicMode = when (binding.rgDynamicColor.checkedRadioButtonId) {
-                    R.id.rb_yes -> {
-                        DynamicColors.applyToActivitiesIfAvailable(requireActivity().application)
-                        requireActivity().recreate()
-                        PriceGuardApp.MODE_DYNAMIC
-                    }
+                val dynamicMode = applyDynamicMode()
+                val darkMode = applyDarkMode()
+                requireActivity().recreate()
 
-                    else -> {
-                        DynamicColors.applyToActivitiesIfAvailable(
-                            requireActivity().application,
-                            DynamicColorsOptions.Builder()
-                                .setThemeOverlay(R.style.Theme_PriceGuard).build()
-                        )
-                        requireActivity().recreate()
-                        PriceGuardApp.MODE_DYNAMIC_NO
-                    }
-                }
+                saveTheme(dynamicMode, darkMode)
+                dismiss()
+            }
+        }.create()
+    }
 
-                val darkMode = when (binding.rgDarkMode.checkedRadioButtonId) {
-                    R.id.rb_system -> {
-                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
-                        PriceGuardApp.MODE_SYSTEM
-                    }
+    override fun onDestroyView() {
+        super.onDestroyView()
+        _binding = null
+    }
 
-                    R.id.rb_light -> {
-                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
-                        PriceGuardApp.MODE_LIGHT
-                    }
+    private fun applyDynamicMode() = when (binding.rgDynamicColor.checkedRadioButtonId) {
+        R.id.rb_yes -> {
+            DynamicColors.applyToActivitiesIfAvailable(requireActivity().application)
+            PriceGuardApp.MODE_DYNAMIC
+        }
 
-                    R.id.rb_dark -> {
-                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
-                        PriceGuardApp.MODE_DARK
-                    }
+        else -> {
+            DynamicColors.applyToActivitiesIfAvailable(
+                requireActivity().application,
+                DynamicColorsOptions.Builder()
+                    .setThemeOverlay(R.style.Theme_PriceGuard).build()
+            )
+            PriceGuardApp.MODE_DYNAMIC_NO
+        }
+    }
 
-                    else -> {
-                        PriceGuardApp.MODE_SYSTEM
-                    }
-                }
-                saveTheme(dynamicMode, darkMode)
-                dismiss()
+    private fun applyDarkMode() = when (binding.rgDarkMode.checkedRadioButtonId) {
+        R.id.rb_system -> {
+            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
+            PriceGuardApp.MODE_SYSTEM
+        }
+
+        R.id.rb_light -> {
+            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
+            PriceGuardApp.MODE_LIGHT
+        }
+
+        R.id.rb_dark -> {
+            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
+            PriceGuardApp.MODE_DARK
+        }
+
+        else -> {
+            PriceGuardApp.MODE_SYSTEM
+        }
+    }
+
+    private fun checkDynamicThemeSupport() {
+        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
+            // Disable Dynamic Theme Radio Group
+            (0 until binding.rgDynamicColor.childCount).forEach { idx ->
+                binding.rgDynamicColor.getChildAt(idx).isEnabled = false
             }
-        }.create()
+        }
     }
 
     private fun saveTheme(dynamicMode: Int, darkMode: Int) {
@@ -87,7 +107,7 @@ class ThemeDialogFragment : DialogFragment() {
         }
     }
 
-    private fun setCheckedButton(binding: FragmentThemeDialogBinding) {
+    private fun setCheckedButton() {
         lifecycleScope.launch {
             val dynamicColorMode = configDataSource.getDynamicMode()
             val darkMode = configDataSource.getDarkMode()
diff --git a/android/app/src/main/java/app/priceguard/ui/intro/IntroActivity.kt b/android/app/src/main/java/app/priceguard/ui/intro/IntroActivity.kt
index f2ea2e8d..9b745ef0 100644
--- a/android/app/src/main/java/app/priceguard/ui/intro/IntroActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/intro/IntroActivity.kt
@@ -6,6 +6,8 @@ import androidx.appcompat.app.AppCompatActivity
 import app.priceguard.databinding.ActivityIntroBinding
 import app.priceguard.ui.login.LoginActivity
 import app.priceguard.ui.signup.SignupActivity
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -14,6 +16,7 @@ class IntroActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        this.applySystemNavigationBarColor(SystemNavigationColorState.SURFACE)
         binding = ActivityIntroBinding.inflate(layoutInflater)
         setContentView(binding.root)
 
diff --git a/android/app/src/main/java/app/priceguard/ui/login/LoginActivity.kt b/android/app/src/main/java/app/priceguard/ui/login/LoginActivity.kt
index ed65567f..c2dca38c 100644
--- a/android/app/src/main/java/app/priceguard/ui/login/LoginActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/login/LoginActivity.kt
@@ -10,34 +10,42 @@ import app.priceguard.databinding.ActivityLoginBinding
 import app.priceguard.ui.home.HomeActivity
 import app.priceguard.ui.login.LoginViewModel.LoginEvent
 import app.priceguard.ui.signup.SignupActivity
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
+import app.priceguard.ui.util.drawable.getCircularProgressIndicatorDrawable
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.drawable.getCircularProgressIndicatorDrawable
+import app.priceguard.ui.util.showConfirmDialog
 import com.google.android.material.button.MaterialButton
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import com.google.android.material.progressindicator.CircularProgressIndicatorSpec
+import com.google.android.material.progressindicator.IndeterminateDrawable
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
 class LoginActivity : AppCompatActivity() {
     private val loginViewModel: LoginViewModel by viewModels()
     private lateinit var binding: ActivityLoginBinding
+    private lateinit var circularProgressIndicator: IndeterminateDrawable<CircularProgressIndicatorSpec>
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        this.applySystemNavigationBarColor(SystemNavigationColorState.SURFACE)
         binding = ActivityLoginBinding.inflate(layoutInflater)
         with(binding) {
             viewModel = loginViewModel
         }
+        circularProgressIndicator = getCircularProgressIndicatorDrawable(this@LoginActivity)
         initListener()
         collectEvent()
         setContentView(binding.root)
     }
 
+    override fun onDestroy() {
+        super.onDestroy()
+        circularProgressIndicator.stop()
+    }
+
     private fun initListener() {
         with(binding) {
-            btnLoginLogin.setOnClickListener {
-                (binding.btnLoginLogin as MaterialButton).icon =
-                    getCircularProgressIndicatorDrawable(this@LoginActivity)
-            }
             btnLoginSignup.setOnClickListener {
                 gotoSignUp()
             }
@@ -49,8 +57,7 @@ class LoginActivity : AppCompatActivity() {
             loginViewModel.event.collect { event ->
                 when (event) {
                     LoginEvent.LoginStart -> {
-                        (binding.btnLoginLogin as MaterialButton).icon =
-                            getCircularProgressIndicatorDrawable(this@LoginActivity)
+                        (binding.btnLoginLogin as MaterialButton).icon = circularProgressIndicator
                     }
 
                     LoginEvent.TokenUpdateError, LoginEvent.FirebaseError -> {
@@ -73,18 +80,24 @@ class LoginActivity : AppCompatActivity() {
     private fun setDialogMessageAndShow(eventType: LoginEvent) {
         when (eventType) {
             LoginEvent.Invalid -> {
-                showDialog(
+                showConfirmDialog(
                     getString(R.string.login_invalid),
                     getString(R.string.login_invalid_message)
                 )
             }
 
             is LoginEvent.LoginFailure -> {
-                showDialog(getString(R.string.login_fail), getString(R.string.login_fail_message))
+                showConfirmDialog(
+                    getString(R.string.login_fail),
+                    getString(R.string.login_fail_message)
+                )
             }
 
             is LoginEvent.UndefinedError -> {
-                showDialog(getString(R.string.login_fail), getString(R.string.undefined_error))
+                showConfirmDialog(
+                    getString(R.string.login_fail),
+                    getString(R.string.undefined_error)
+                )
             }
 
             is LoginEvent.LoginInfoSaved -> {
@@ -95,15 +108,6 @@ class LoginActivity : AppCompatActivity() {
         }
     }
 
-    private fun showDialog(title: String, message: String) {
-        MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_App_MaterialAlertDialog)
-            .setTitle(title)
-            .setMessage(message)
-            .setPositiveButton(getString(R.string.confirm)) { _, _ -> }
-            .create()
-            .show()
-    }
-
     private fun gotoSignUp() {
         startActivity(Intent(this, SignupActivity::class.java))
     }
diff --git a/android/app/src/main/java/app/priceguard/ui/signup/SignupActivity.kt b/android/app/src/main/java/app/priceguard/ui/signup/SignupActivity.kt
index 2591df62..1fe52127 100644
--- a/android/app/src/main/java/app/priceguard/ui/signup/SignupActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/signup/SignupActivity.kt
@@ -13,12 +13,16 @@ import app.priceguard.databinding.ActivitySignupBinding
 import app.priceguard.ui.home.HomeActivity
 import app.priceguard.ui.signup.SignupViewModel.SignupEvent
 import app.priceguard.ui.signup.SignupViewModel.SignupUIState
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
+import app.priceguard.ui.util.drawable.getCircularProgressIndicatorDrawable
 import app.priceguard.ui.util.lifecycle.repeatOnStarted
-import app.priceguard.ui.util.ui.drawable.getCircularProgressIndicatorDrawable
+import app.priceguard.ui.util.showConfirmDialog
 import com.google.android.material.appbar.AppBarLayout
 import com.google.android.material.appbar.AppBarLayout.Behavior.DragCallback
 import com.google.android.material.button.MaterialButton
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import com.google.android.material.progressindicator.CircularProgressIndicatorSpec
+import com.google.android.material.progressindicator.IndeterminateDrawable
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -26,17 +30,25 @@ class SignupActivity : AppCompatActivity() {
 
     private lateinit var binding: ActivitySignupBinding
     private val signupViewModel: SignupViewModel by viewModels()
+    private lateinit var circularProgressIndicator: IndeterminateDrawable<CircularProgressIndicatorSpec>
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        this.applySystemNavigationBarColor(SystemNavigationColorState.SURFACE)
         binding = DataBindingUtil.setContentView(this, R.layout.activity_signup)
         binding.vm = signupViewModel
         binding.lifecycleOwner = this
+        circularProgressIndicator = getCircularProgressIndicatorDrawable(this@SignupActivity)
         setNavigationButton()
         disableAppBarScroll()
         observeState()
     }
 
+    override fun onDestroy() {
+        super.onDestroy()
+        circularProgressIndicator.stop()
+    }
+
     private fun disableAppBarScroll() {
         val clLayoutParams = binding.ablSignupTopbar.layoutParams as CoordinatorLayout.LayoutParams
         val scrollView: NestedScrollView = binding.nsvSignupContent
@@ -64,8 +76,6 @@ class SignupActivity : AppCompatActivity() {
     }
 
     private fun handleSignupEvent(event: SignupEvent) {
-        val circularProgressIndicator = getCircularProgressIndicatorDrawable(this)
-
         when (event) {
             is SignupEvent.SignupStart -> {
                 (binding.btnSignupSignup as MaterialButton).icon = circularProgressIndicator
@@ -79,15 +89,15 @@ class SignupActivity : AppCompatActivity() {
                     }
 
                     SignupEvent.DuplicatedEmail -> {
-                        showDialog(getString(R.string.error), getString(R.string.duplicate_email))
+                        showConfirmDialog(getString(R.string.error), getString(R.string.duplicate_email))
                     }
 
                     SignupEvent.InvalidRequest -> {
-                        showDialog(getString(R.string.error), getString(R.string.invalid_parameter))
+                        showConfirmDialog(getString(R.string.error), getString(R.string.invalid_parameter))
                     }
 
                     SignupEvent.UndefinedError -> {
-                        showDialog(getString(R.string.error), getString(R.string.undefined_error))
+                        showConfirmDialog(getString(R.string.error), getString(R.string.undefined_error))
                     }
 
                     SignupEvent.TokenUpdateError, SignupEvent.FirebaseError -> {
@@ -117,15 +127,6 @@ class SignupActivity : AppCompatActivity() {
         }
     }
 
-    private fun showDialog(title: String, message: String) {
-        MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_App_MaterialAlertDialog)
-            .setTitle(title)
-            .setMessage(message)
-            .setPositiveButton(getString(R.string.confirm)) { _, _ -> }
-            .create()
-            .show()
-    }
-
     private fun observeState() {
         repeatOnStarted {
             signupViewModel.state.collect { state ->
diff --git a/android/app/src/main/java/app/priceguard/ui/signup/SignupViewModel.kt b/android/app/src/main/java/app/priceguard/ui/signup/SignupViewModel.kt
index b5e5d10f..1ed9b68c 100644
--- a/android/app/src/main/java/app/priceguard/ui/signup/SignupViewModel.kt
+++ b/android/app/src/main/java/app/priceguard/ui/signup/SignupViewModel.kt
@@ -65,9 +65,10 @@ class SignupViewModel @Inject constructor(
         }
 
         viewModelScope.launch {
+            updateSignupStarted(true)
             sendSignupEvent(SignupEvent.SignupStart)
             Log.d("ViewModel", "Event Start Sent")
-            updateSignupStarted(true)
+
             val result =
                 authRepository.signUp(_state.value.email, _state.value.name, _state.value.password)
 
diff --git a/android/app/src/main/java/app/priceguard/ui/splash/SplashScreenActivity.kt b/android/app/src/main/java/app/priceguard/ui/splash/SplashScreenActivity.kt
index e5af9705..15d756a5 100644
--- a/android/app/src/main/java/app/priceguard/ui/splash/SplashScreenActivity.kt
+++ b/android/app/src/main/java/app/priceguard/ui/splash/SplashScreenActivity.kt
@@ -13,6 +13,8 @@ import app.priceguard.databinding.ActivitySplashScreenBinding
 import app.priceguard.ui.detail.DetailActivity
 import app.priceguard.ui.home.HomeActivity
 import app.priceguard.ui.intro.IntroActivity
+import app.priceguard.ui.util.SystemNavigationColorState
+import app.priceguard.ui.util.applySystemNavigationBarColor
 import app.priceguard.ui.util.lifecycle.repeatOnCreated
 import dagger.hilt.android.AndroidEntryPoint
 
@@ -25,6 +27,7 @@ class SplashScreenActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
+        this.applySystemNavigationBarColor(SystemNavigationColorState.SURFACE)
         binding = ActivitySplashScreenBinding.inflate(layoutInflater)
         setContentView(binding.root)
         observeState()
diff --git a/android/app/src/main/java/app/priceguard/ui/util/ConfirmDialogFragment.kt b/android/app/src/main/java/app/priceguard/ui/util/ConfirmDialogFragment.kt
new file mode 100644
index 00000000..fdd309ed
--- /dev/null
+++ b/android/app/src/main/java/app/priceguard/ui/util/ConfirmDialogFragment.kt
@@ -0,0 +1,81 @@
+package app.priceguard.ui.util
+
+import android.app.Dialog
+import android.os.Bundle
+import androidx.fragment.app.DialogFragment
+import app.priceguard.R
+import app.priceguard.ui.data.DialogConfirmAction
+import com.google.android.material.dialog.MaterialAlertDialogBuilder
+
+class ConfirmDialogFragment : DialogFragment() {
+
+    private lateinit var title: String
+    private lateinit var message: String
+    private lateinit var action: DialogConfirmAction
+    private lateinit var negativeButtonText: String
+
+    private var resultListener: OnDialogResultListener? = null
+
+    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
+        initDialogInfo()
+
+        return MaterialAlertDialogBuilder(
+            requireActivity(),
+            R.style.ThemeOverlay_App_MaterialAlertDialog
+        ).apply {
+            setTitle(title)
+            setMessage(message)
+            setNegativeButton(negativeButtonText) { _, _ -> }
+            setPositiveButton(getString(R.string.confirm)) { _, _ ->
+                when (action) {
+                    DialogConfirmAction.FINISH -> {
+                        requireActivity().finish()
+                    }
+
+                    DialogConfirmAction.CUSTOM -> {
+                        resultListener?.onDialogResult(true)
+                    }
+
+                    DialogConfirmAction.NOTHING -> {}
+                }
+                dismiss()
+            }
+        }.create()
+    }
+
+    private fun initDialogInfo() {
+        title = arguments?.getString("title") ?: ""
+        message = arguments?.getString("message") ?: ""
+
+        val actionString = arguments?.getString("actionString")
+        actionString?.let { actionString ->
+            action = DialogConfirmAction.valueOf(actionString)
+        }?.run {
+            DialogConfirmAction.NOTHING
+        }
+
+        negativeButtonText = if (action == DialogConfirmAction.CUSTOM) {
+            getString(R.string.cancel)
+        } else {
+            ""
+        }
+    }
+
+    override fun onStart() {
+        super.onStart()
+
+        if (action == DialogConfirmAction.NOTHING || action == DialogConfirmAction.CUSTOM) {
+            dialog?.setCancelable(true)
+        } else {
+            dialog?.setCancelable(false)
+        }
+    }
+
+    fun setOnDialogResultListener(listener: OnDialogResultListener) {
+        resultListener = listener
+    }
+
+    interface OnDialogResultListener {
+        fun onDialogResult(result: Boolean)
+    }
+}
diff --git a/android/app/src/main/java/app/priceguard/ui/util/Dialog.kt b/android/app/src/main/java/app/priceguard/ui/util/Dialog.kt
new file mode 100644
index 00000000..f6350913
--- /dev/null
+++ b/android/app/src/main/java/app/priceguard/ui/util/Dialog.kt
@@ -0,0 +1,57 @@
+package app.priceguard.ui.util
+
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import androidx.fragment.app.Fragment
+import app.priceguard.ui.ErrorDialogFragment
+import app.priceguard.ui.data.DialogConfirmAction
+
+fun AppCompatActivity.showConfirmDialog(
+    title: String,
+    message: String,
+    action: DialogConfirmAction = DialogConfirmAction.NOTHING
+) {
+    val tag = "confirm_dialog_fragment_from_activity"
+    if (supportFragmentManager.findFragmentByTag(tag) != null) return
+
+    val dialogFragment = ConfirmDialogFragment()
+    val bundle = Bundle()
+    bundle.putString("title", title)
+    bundle.putString("message", message)
+    bundle.putString("actionString", action.name)
+    dialogFragment.arguments = bundle
+    dialogFragment.show(supportFragmentManager, tag)
+}
+
+fun Fragment.showDialogWithAction(
+    title: String,
+    message: String,
+    action: DialogConfirmAction = DialogConfirmAction.NOTHING
+) {
+    val tag = "confirm_dialog_fragment_from_activity"
+    if (requireActivity().supportFragmentManager.findFragmentByTag(tag) != null) return
+
+    val dialogFragment = ConfirmDialogFragment()
+    val bundle = Bundle()
+    bundle.putString("title", title)
+    bundle.putString("message", message)
+    bundle.putString("actionString", action.name)
+    dialogFragment.arguments = bundle
+    dialogFragment.show(requireActivity().supportFragmentManager, tag)
+}
+
+fun AppCompatActivity.showDialogWithLogout() {
+    val tag = "error_dialog_fragment_from_fragment"
+    if (supportFragmentManager.findFragmentByTag(tag) != null) return
+
+    val dialogFragment = ErrorDialogFragment()
+    dialogFragment.show(supportFragmentManager, "error_dialog_fragment_from_activity")
+}
+
+fun Fragment.showDialogWithLogout() {
+    val tag = "error_dialog_fragment_from_fragment"
+    if (requireActivity().supportFragmentManager.findFragmentByTag(tag) != null) return
+
+    val dialogFragment = ErrorDialogFragment()
+    dialogFragment.show(requireActivity().supportFragmentManager, tag)
+}
diff --git a/android/app/src/main/java/app/priceguard/ui/util/ui/ImageViewAdapter.kt b/android/app/src/main/java/app/priceguard/ui/util/ImageViewAdapter.kt
similarity index 93%
rename from android/app/src/main/java/app/priceguard/ui/util/ui/ImageViewAdapter.kt
rename to android/app/src/main/java/app/priceguard/ui/util/ImageViewAdapter.kt
index 7a49eeee..d0779059 100644
--- a/android/app/src/main/java/app/priceguard/ui/util/ui/ImageViewAdapter.kt
+++ b/android/app/src/main/java/app/priceguard/ui/util/ImageViewAdapter.kt
@@ -1,4 +1,4 @@
-package app.priceguard.ui.util.ui
+package app.priceguard.ui.util
 
 import android.widget.ImageView
 import androidx.databinding.BindingAdapter
diff --git a/android/app/src/main/java/app/priceguard/ui/util/NavControllerExtensions.kt b/android/app/src/main/java/app/priceguard/ui/util/NavControllerExtensions.kt
new file mode 100644
index 00000000..7b45e79c
--- /dev/null
+++ b/android/app/src/main/java/app/priceguard/ui/util/NavControllerExtensions.kt
@@ -0,0 +1,12 @@
+package app.priceguard.ui.util
+
+import androidx.navigation.NavController
+import androidx.navigation.NavDirections
+
+fun NavController.safeNavigate(direction: NavDirections) {
+    currentDestination?.getAction(direction.actionId)?.run { navigate(direction) }
+}
+
+fun NavController.safeNavigate(actionId: Int) {
+    currentDestination?.getAction(actionId)?.run { navigate(actionId) }
+}
diff --git a/android/app/src/main/java/app/priceguard/ui/util/NavigationBar.kt b/android/app/src/main/java/app/priceguard/ui/util/NavigationBar.kt
new file mode 100644
index 00000000..aaf91a95
--- /dev/null
+++ b/android/app/src/main/java/app/priceguard/ui/util/NavigationBar.kt
@@ -0,0 +1,17 @@
+package app.priceguard.ui.util
+
+import android.app.Activity
+import com.google.android.material.color.MaterialColors
+
+fun Activity.applySystemNavigationBarColor(colorType: SystemNavigationColorState) {
+    window.navigationBarColor = MaterialColors.getColor(
+        this,
+        colorType.colorType,
+        getColor(android.R.color.transparent)
+    )
+}
+
+enum class SystemNavigationColorState(val colorType: Int) {
+    SURFACE(com.google.android.material.R.attr.colorSurface),
+    BOTTOM_NAVIGATION(com.google.android.material.R.attr.colorSurfaceContainerHigh)
+}
diff --git a/android/app/src/main/java/app/priceguard/ui/util/ui/NotificationSetting.kt b/android/app/src/main/java/app/priceguard/ui/util/NotificationSetting.kt
similarity index 89%
rename from android/app/src/main/java/app/priceguard/ui/util/ui/NotificationSetting.kt
rename to android/app/src/main/java/app/priceguard/ui/util/NotificationSetting.kt
index 428a4fc8..98776622 100644
--- a/android/app/src/main/java/app/priceguard/ui/util/ui/NotificationSetting.kt
+++ b/android/app/src/main/java/app/priceguard/ui/util/NotificationSetting.kt
@@ -1,4 +1,4 @@
-package app.priceguard.ui.util.ui
+package app.priceguard.ui.util
 
 import android.content.Context
 import android.content.Intent
diff --git a/android/app/src/main/java/app/priceguard/ui/util/ui/drawable/ProgressIndicator.kt b/android/app/src/main/java/app/priceguard/ui/util/drawable/ProgressIndicator.kt
similarity index 92%
rename from android/app/src/main/java/app/priceguard/ui/util/ui/drawable/ProgressIndicator.kt
rename to android/app/src/main/java/app/priceguard/ui/util/drawable/ProgressIndicator.kt
index d7b9c31e..af168d84 100644
--- a/android/app/src/main/java/app/priceguard/ui/util/ui/drawable/ProgressIndicator.kt
+++ b/android/app/src/main/java/app/priceguard/ui/util/drawable/ProgressIndicator.kt
@@ -1,4 +1,4 @@
-package app.priceguard.ui.util.ui.drawable
+package app.priceguard.ui.util.drawable
 
 import android.content.Context
 import app.priceguard.R
diff --git a/android/app/src/main/java/app/priceguard/ui/util/ui/DisableAppBarScroll.kt b/android/app/src/main/java/app/priceguard/ui/util/ui/DisableAppBarScroll.kt
deleted file mode 100644
index e2d69612..00000000
--- a/android/app/src/main/java/app/priceguard/ui/util/ui/DisableAppBarScroll.kt
+++ /dev/null
@@ -1,32 +0,0 @@
-package app.priceguard.ui.util.ui
-
-import androidx.coordinatorlayout.widget.CoordinatorLayout
-import androidx.recyclerview.widget.RecyclerView
-import com.google.android.material.appbar.AppBarLayout
-
-fun disableAppBarRecyclerView(
-    layoutParams: CoordinatorLayout.LayoutParams,
-    recyclerView: RecyclerView
-) {
-    val viewTreeObserver = recyclerView.viewTreeObserver
-    val disabledAblBehavior = getAblBehavior(false)
-    val enabledAblBehavior = getAblBehavior(true)
-
-    viewTreeObserver.addOnGlobalLayoutListener {
-        if (recyclerView.childCount == 0 || recyclerView.measuredHeight - recyclerView.getChildAt(0).height >= 0) {
-            layoutParams.behavior = disabledAblBehavior
-        } else {
-            layoutParams.behavior = enabledAblBehavior
-        }
-    }
-}
-
-fun getAblBehavior(canDrag: Boolean): AppBarLayout.Behavior {
-    val ablBehavior = AppBarLayout.Behavior()
-    ablBehavior.setDragCallback(object : AppBarLayout.Behavior.DragCallback() {
-        override fun canDrag(appBarLayout: AppBarLayout): Boolean {
-            return canDrag
-        }
-    })
-    return ablBehavior
-}
diff --git a/android/app/src/main/java/app/priceguard/ui/util/ui/NetworkDialog.kt b/android/app/src/main/java/app/priceguard/ui/util/ui/NetworkDialog.kt
deleted file mode 100644
index d76f19c4..00000000
--- a/android/app/src/main/java/app/priceguard/ui/util/ui/NetworkDialog.kt
+++ /dev/null
@@ -1,42 +0,0 @@
-package app.priceguard.ui.util.ui
-
-import android.app.Activity
-import android.content.Intent
-import app.priceguard.R
-import app.priceguard.data.repository.token.TokenRepository
-import app.priceguard.ui.login.LoginActivity
-import com.google.android.material.dialog.MaterialAlertDialogBuilder
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.launch
-
-fun Activity.showPermissionDeniedDialog(tokenRepository: TokenRepository) {
-    MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_App_MaterialAlertDialog)
-        .setTitle(getString(R.string.permission_denied_title))
-        .setMessage(getString(R.string.permission_denied_message))
-        .setPositiveButton(getString(R.string.confirm)) { _, _ -> goBackToLoginActivity(tokenRepository) }
-        .setOnDismissListener { goBackToLoginActivity(tokenRepository) }
-        .create()
-        .show()
-}
-
-fun Activity.goBackToLoginActivity(tokenRepository: TokenRepository) {
-    CoroutineScope(Dispatchers.IO).launch { tokenRepository.clearTokens() }
-    val intent = Intent(this, LoginActivity::class.java)
-    intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
-    startActivity(intent)
-    finish()
-}
-
-fun Activity.showConfirmationDialog(
-    title: String,
-    message: String
-) {
-    MaterialAlertDialogBuilder(this, R.style.ThemeOverlay_App_MaterialAlertDialog)
-        .setTitle(title)
-        .setMessage(message)
-        .setPositiveButton(getString(R.string.confirm)) { _, _ -> }
-        .setNegativeButton(getString(R.string.cancel)) { _, _ -> }
-        .create()
-        .show()
-}
diff --git a/android/app/src/main/res/layout/activity_detail.xml b/android/app/src/main/res/layout/activity_detail.xml
index ea751a07..327baf1d 100644
--- a/android/app/src/main/res/layout/activity_detail.xml
+++ b/android/app/src/main/res/layout/activity_detail.xml
@@ -48,6 +48,7 @@
                 android:layout_height="match_parent">
 
                 <androidx.core.widget.NestedScrollView
+                    android:id="@+id/nsv_product_detail"
                     android:layout_width="match_parent"
                     android:layout_height="match_parent">
 
@@ -96,6 +97,7 @@
                             android:layout_marginTop="12dp"
                             android:layout_marginEnd="12dp"
                             android:contentDescription="@string/share_product"
+                            android:enabled="@{viewModel.state.isReady}"
                             app:icon="@drawable/ic_share"
                             app:layout_constraintEnd_toEndOf="parent"
                             app:layout_constraintTop_toBottomOf="@+id/iv_detail_product" />
@@ -155,8 +157,9 @@
                             android:id="@+id/btn_detail_track"
                             style="?attr/materialButtonOutlinedStyle"
                             android:layout_width="0dp"
-                            android:layout_height="48dp"
+                            android:layout_height="wrap_content"
                             android:layout_marginTop="8dp"
+                            android:enabled="@{viewModel.state.isReady}"
                             android:text="@string/add_to_tracking_list"
                             android:visibility="@{viewModel.state.isTracking ? View.GONE : View.VISIBLE}"
                             app:icon="@drawable/ic_track"
@@ -177,36 +180,53 @@
                             app:layout_constraintStart_toEndOf="@id/gl_vertical_start_nested"
                             app:layout_constraintTop_toBottomOf="@+id/btn_detail_track" />
 
-                        <Button
-                            android:id="@+id/btn_detail_edit_price"
-                            style="@style/Widget.Material3.Button.TonalButton"
-                            android:layout_width="0dp"
-                            android:layout_height="48dp"
-                            android:layout_marginTop="8dp"
-                            android:layout_marginEnd="4dp"
-                            android:text="@string/edit_target_price"
-                            android:visibility="@{viewModel.state.isTracking ? View.VISIBLE : View.GONE}"
-                            app:icon="@drawable/ic_edit"
-                            app:iconGravity="textStart"
-                            app:layout_constraintEnd_toStartOf="@+id/btn_detail_delete"
-                            app:layout_constraintStart_toEndOf="@+id/gl_vertical_start_nested"
-                            app:layout_constraintTop_toBottomOf="@id/tv_detail_already_tracking_title" />
-
-                        <Button
-                            android:id="@+id/btn_detail_delete"
-                            style="@style/Widget.Material3.Button.TonalButton"
+                        <LinearLayout
+                            android:id="@+id/ll_detail_already_tracking"
                             android:layout_width="0dp"
-                            android:layout_height="48dp"
-                            android:layout_marginStart="4dp"
-                            android:layout_marginTop="8dp"
-                            android:onClick="@{() -> viewModel.sendDeleteTrackingEvent()}"
-                            android:text="@string/delete_tracking"
-                            android:visibility="@{viewModel.state.isTracking ? View.VISIBLE : View.GONE}"
-                            app:icon="@drawable/ic_delete"
-                            app:iconGravity="textStart"
+                            android:layout_height="wrap_content"
+                            android:orientation="horizontal"
                             app:layout_constraintEnd_toStartOf="@id/gl_vertical_end_nested"
-                            app:layout_constraintStart_toEndOf="@+id/btn_detail_edit_price"
-                            app:layout_constraintTop_toBottomOf="@id/tv_detail_already_tracking_title" />
+                            app:layout_constraintStart_toStartOf="@id/gl_vertical_start_nested"
+                            app:layout_constraintTop_toBottomOf="@id/tv_detail_already_tracking_title">
+
+                            <Button
+                                android:id="@+id/btn_detail_edit_price"
+                                style="@style/Widget.Material3.Button.TonalButton"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:layout_gravity="center_vertical"
+                                android:layout_marginTop="8dp"
+                                android:layout_marginEnd="4dp"
+                                android:layout_weight="1"
+                                android:enabled="@{viewModel.state.isReady}"
+                                android:text="@string/edit_target_price"
+                                android:visibility="@{viewModel.state.isTracking ? View.VISIBLE : View.GONE}"
+                                app:icon="@drawable/ic_edit"
+                                app:iconGravity="textStart"
+                                app:layout_constraintEnd_toStartOf="@+id/btn_detail_delete"
+                                app:layout_constraintStart_toEndOf="@+id/gl_vertical_start_nested"
+                                app:layout_constraintTop_toBottomOf="@id/tv_detail_already_tracking_title" />
+
+                            <Button
+                                android:id="@+id/btn_detail_delete"
+                                style="@style/Widget.Material3.Button.TonalButton"
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:layout_gravity="center_vertical"
+                                android:layout_marginStart="4dp"
+                                android:layout_marginTop="8dp"
+                                android:layout_weight="1"
+                                android:enabled="@{viewModel.state.isReady}"
+                                android:onClick="@{() -> viewModel.sendDeleteTrackingEvent()}"
+                                android:text="@string/delete_tracking"
+                                android:visibility="@{viewModel.state.isTracking ? View.VISIBLE : View.GONE}"
+                                app:icon="@drawable/ic_delete"
+                                app:iconGravity="textStart"
+                                app:layout_constraintEnd_toStartOf="@id/gl_vertical_end_nested"
+                                app:layout_constraintStart_toEndOf="@+id/btn_detail_edit_price"
+                                app:layout_constraintTop_toBottomOf="@id/tv_detail_already_tracking_title" />
+
+                        </LinearLayout>
 
                         <TextView
                             android:id="@+id/tv_detail_lowest_price_title"
@@ -217,7 +237,7 @@
                             android:text="@string/lowest_price"
                             android:textAppearance="?attr/textAppearanceTitleSmall"
                             app:layout_constraintStart_toEndOf="@id/gl_vertical_start_nested"
-                            app:layout_constraintTop_toBottomOf="@+id/btn_detail_delete" />
+                            app:layout_constraintTop_toBottomOf="@+id/ll_detail_already_tracking" />
 
                         <TextView
                             android:id="@+id/tv_detail_lowest_price"
@@ -229,7 +249,7 @@
                             android:textAppearance="?attr/textAppearanceTitleSmall"
                             android:textStyle="bold"
                             app:layout_constraintEnd_toStartOf="@id/gl_vertical_end_nested"
-                            app:layout_constraintTop_toBottomOf="@id/btn_detail_delete"
+                            app:layout_constraintTop_toBottomOf="@id/ll_detail_already_tracking"
                             tools:text="28,080원" />
 
                         <TextView
@@ -288,6 +308,7 @@
                                 android:layout_width="0dp"
                                 android:layout_height="wrap_content"
                                 android:layout_weight="1"
+                                android:enabled="@{viewModel.state.isReady}"
                                 android:text="@string/day" />
 
                             <Button
@@ -296,6 +317,7 @@
                                 android:layout_width="0dp"
                                 android:layout_height="wrap_content"
                                 android:layout_weight="1"
+                                android:enabled="@{viewModel.state.isReady}"
                                 android:text="@string/week" />
 
                             <Button
@@ -304,6 +326,7 @@
                                 android:layout_width="0dp"
                                 android:layout_height="wrap_content"
                                 android:layout_weight="1"
+                                android:enabled="@{viewModel.state.isReady}"
                                 android:text="@string/month" />
 
                             <Button
@@ -312,6 +335,7 @@
                                 android:layout_width="0dp"
                                 android:layout_height="wrap_content"
                                 android:layout_weight="1"
+                                android:enabled="@{viewModel.state.isReady}"
                                 android:text="@string/quarter" />
 
                         </com.google.android.material.button.MaterialButtonToggleGroup>
@@ -335,7 +359,8 @@
                     android:id="@+id/btn_detail_to_shopping_mall"
                     style="@style/Widget.Material3.Button.ElevatedButton.Primary"
                     android:layout_width="0dp"
-                    android:layout_height="64dp"
+                    android:layout_height="wrap_content"
+                    android:minHeight="64dp"
                     android:layout_margin="16dp"
                     android:enabled="@{viewModel.state.isReady}"
                     android:onClick="@{() -> viewModel.sendBrowserEvent()}"
diff --git a/android/app/src/main/res/layout/activity_link_helper_web_view.xml b/android/app/src/main/res/layout/activity_link_helper_web_view.xml
index df50c225..3fc4b917 100644
--- a/android/app/src/main/res/layout/activity_link_helper_web_view.xml
+++ b/android/app/src/main/res/layout/activity_link_helper_web_view.xml
@@ -4,6 +4,7 @@
     xmlns:tools="http://schemas.android.com/tools">
 
     <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/cl_link_helper"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         tools:context=".ui.additem.link.LinkHelperWebViewActivity">
diff --git a/android/app/src/main/res/layout/fragment_my_page.xml b/android/app/src/main/res/layout/fragment_my_page.xml
index cf89cc93..d9cc7213 100644
--- a/android/app/src/main/res/layout/fragment_my_page.xml
+++ b/android/app/src/main/res/layout/fragment_my_page.xml
@@ -53,7 +53,8 @@
                 <androidx.cardview.widget.CardView
                     android:id="@+id/view_my_page_background"
                     android:layout_width="0dp"
-                    android:layout_height="80dp"
+                    android:layout_height="wrap_content"
+                    android:minHeight="80dp"
                     android:layout_marginHorizontal="16dp"
                     android:layout_marginTop="24dp"
                     app:cardBackgroundColor="?attr/colorSurfaceContainerHighest"
@@ -65,7 +66,8 @@
 
                     <androidx.constraintlayout.widget.ConstraintLayout
                         android:layout_width="match_parent"
-                        android:layout_height="match_parent">
+                        android:layout_height="match_parent"
+                        android:minHeight="80dp">
 
                         <TextView
                             android:id="@+id/tv_my_page_profile"
diff --git a/android/app/src/main/res/layout/fragment_product_list.xml b/android/app/src/main/res/layout/fragment_product_list.xml
index e0d16eab..137cf485 100644
--- a/android/app/src/main/res/layout/fragment_product_list.xml
+++ b/android/app/src/main/res/layout/fragment_product_list.xml
@@ -19,6 +19,7 @@
         app:refreshing="@{viewModel.isRefreshing}">
 
         <androidx.coordinatorlayout.widget.CoordinatorLayout
+            android:id="@+id/cl_product_list"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             tools:context=".ui.home.list.ProductListFragment">
diff --git a/android/app/src/main/res/layout/fragment_recommended_product.xml b/android/app/src/main/res/layout/fragment_recommended_product.xml
index 3cbecda5..d534a108 100644
--- a/android/app/src/main/res/layout/fragment_recommended_product.xml
+++ b/android/app/src/main/res/layout/fragment_recommended_product.xml
@@ -20,6 +20,7 @@
         tools:context=".ui.home.recommend.RecommendedProductFragment">
 
         <androidx.coordinatorlayout.widget.CoordinatorLayout
+            android:id="@+id/cl_recommended_product"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
 
diff --git a/android/app/src/main/res/layout/fragment_set_target_price.xml b/android/app/src/main/res/layout/fragment_set_target_price.xml
index 05126f04..af211be1 100644
--- a/android/app/src/main/res/layout/fragment_set_target_price.xml
+++ b/android/app/src/main/res/layout/fragment_set_target_price.xml
@@ -91,7 +91,6 @@
                 android:layout_height="wrap_content"
                 android:focusable="true"
                 android:stepSize="10"
-                android:value="80"
                 android:valueFrom="0"
                 android:valueTo="100"
                 app:layout_constraintEnd_toStartOf="@id/gl_vertical_end"
@@ -104,7 +103,6 @@
                 android:layout_height="wrap_content"
                 android:gravity="center_vertical|end"
                 android:paddingHorizontal="16dp"
-                android:text="@string/target_price_80"
                 android:textSize="16sp"
                 android:textStyle="bold"
                 app:layout_constraintEnd_toStartOf="@id/gl_vertical_end"
@@ -118,6 +116,7 @@
                 android:layout_height="wrap_content"
                 android:layout_marginTop="32dp"
                 android:layout_marginBottom="16dp"
+                android:enabled="@{viewModel.state.ready}"
                 android:text="@string/back"
                 app:layout_constraintBottom_toBottomOf="parent"
                 app:layout_constraintStart_toEndOf="@id/gl_vertical_start"
@@ -128,6 +127,7 @@
                 android:id="@+id/btn_confirm_item_next"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:enabled="@{viewModel.state.ready}"
                 android:text="@string/finish"
                 app:layout_constraintBottom_toBottomOf="@id/btn_confirm_item_back"
                 app:layout_constraintEnd_toStartOf="@id/gl_vertical_end"
diff --git a/android/app/src/main/res/navigation/nav_graph.xml b/android/app/src/main/res/navigation/nav_graph.xml
index ef15f8cd..e1dc72b1 100644
--- a/android/app/src/main/res/navigation/nav_graph.xml
+++ b/android/app/src/main/res/navigation/nav_graph.xml
@@ -49,6 +49,9 @@
         <argument
             android:name="isAdding"
             app:argType="boolean" />
+        <argument
+            android:name="productTargetPrice"
+            app:argType="integer" />
     </fragment>
     <fragment
         android:id="@+id/registerItemLinkFragment"
diff --git a/android/app/src/main/res/values-night/themes.xml b/android/app/src/main/res/values-night/themes.xml
index 58543692..58f8cfbb 100644
--- a/android/app/src/main/res/values-night/themes.xml
+++ b/android/app/src/main/res/values-night/themes.xml
@@ -27,6 +27,8 @@
         <item name="colorSurfaceVariant">@color/md_theme_dark_surfaceVariant</item>
         <item name="colorOnSurfaceVariant">@color/md_theme_dark_onSurfaceVariant</item>
         <item name="colorPrimaryInverse">@color/md_theme_dark_inversePrimary</item>
+        <item name="colorOnPrimaryFixedVariant">@color/md_theme_dark_onPrimaryFixedVariant</item>
         <item name="android:windowLightStatusBar">false</item>
+        <item name="android:windowLightNavigationBar">false</item>
     </style>
 </resources>
\ No newline at end of file
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
index 49b77cfa..21dab7aa 100644
--- a/android/app/src/main/res/values/colors.xml
+++ b/android/app/src/main/res/values/colors.xml
@@ -31,6 +31,7 @@
     <color name="md_theme_light_onSurface">#1B1B1F</color>
     <color name="md_theme_light_surfaceVariant">#E2E2EC</color>
     <color name="md_theme_light_onSurfaceVariant">#45464F</color>
+    <color name="md_theme_light_onPrimaryFixedVariant">#003FA4</color>
     <color name="md_theme_dark_primary">#B3C5FF</color>
     <color name="md_theme_dark_onPrimary">#002B75</color>
     <color name="md_theme_dark_primaryContainer">#003FA4</color>
@@ -61,4 +62,5 @@
     <color name="md_theme_dark_onSurface">#C7C6CA</color>
     <color name="md_theme_dark_surfaceVariant">#45464F</color>
     <color name="md_theme_dark_onSurfaceVariant">#C5C6D0</color>
+    <color name="md_theme_dark_onPrimaryFixedVariant">#003FA4</color>
 </resources>
diff --git a/android/app/src/main/res/values/themes.xml b/android/app/src/main/res/values/themes.xml
index 6f20f251..635e854f 100644
--- a/android/app/src/main/res/values/themes.xml
+++ b/android/app/src/main/res/values/themes.xml
@@ -27,12 +27,14 @@
         <item name="colorSurfaceVariant">@color/md_theme_light_surfaceVariant</item>
         <item name="colorOnSurfaceVariant">@color/md_theme_light_onSurfaceVariant</item>
         <item name="colorPrimaryInverse">@color/md_theme_light_inversePrimary</item>
-        <item name="android:statusBarColor">@color/md_theme_light_surface</item>
+        <item name="colorOnPrimaryFixedVariant">@color/md_theme_light_onPrimaryFixedVariant</item>
         <item name="android:windowLightStatusBar">true</item>
+        <item name="android:windowLightNavigationBar">true</item>
     </style>
 
     <style name="Theme.PriceGuard" parent="Base.Theme.PriceGuard">
         <item name="android:statusBarColor">?attr/colorSurface</item>
+        <item name="android:navigationBarColor">?attr/colorSurface</item>
     </style>
 
     <style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.Material3.MaterialAlertDialog">
diff --git a/android/release_notes.txt b/android/release_notes.txt
index fce02d79..4da1a62f 100644
--- a/android/release_notes.txt
+++ b/android/release_notes.txt
@@ -1,14 +1,28 @@
-December 8, 2023
-v0.3.0
+December 12, 2023
+v0.3.1
 
 🚀 Feature Updates
 
-- 그래프 데이터 변환 버그 수정
-- 다이나믹 테마 지원
-- 상품 정보로까지 딥링크 지원
-- 접근성 개선 (Talkback 전부 지원)
-- 푸시 알림 지원
+- System Navigation Bar 색상도 테마에 바뀌게끔 수정
+- 상품 상세 화면에서 Graph 영역이 세로로 슬라이드할 경우 스크롤 영역에 적용되도록 변경 (이제부터는 길게 누를 시 그래프 라벨이 활성화됩니다)
+- 일부 페이지에서 접근성 개선
 
-🚧Notice
+🔧 Bug Fixes
+
+- 상품 목록 화면에서 알림 토글을 껐다가 켰을때 활성화 상태에서 꺼짐 상태에 아이콘이 뜨는 오류 수정
+- 상품 목록 화면에서 화면의 토글값을 변경한 후, 새로고침을 했을때 원래대로 돌아오는 문제 수정
+- 로딩중일때 상품 상세 화면에서 버튼들 비활성화
+- Dynamic Theme을 지원하지 않는 OS의 경우 해당 테마 설정 View 비활성화
+- 상품, 상품 추천 목록 전환시 스크롤 / 당겨서 새로고침 오류 수정
+- 화면 회전 시 다이얼로그가 사라지는 현상 수정
+- 상품 상세 페이지에서 화면 회전 시 Scroll State가 초기화되는 현상 수정
+- 모든 페이지에서 버튼 연속 입력 방지 처리
+- 모든 페이지에서 메모리 누수가 일어나는 일부 항목들 수정
+- 시스템 글꼴을 키웠을때 UI가 깨지는 문제 수정
+- 테마 변경 후 앱 재시작 시 테마 변경이 안되는 오류 수정
+- 목표 가격 수정 시 가격 수정 화면 초기 값 기존 목표 가격으로 수정
+- 내 정보 페이지에서 이름에 문자만 나올 수 있도록 수정
+
+
+Material Chart Changelog: https://github.com/Taewan-P/material-android-chart/releases/tag/v0.2.0
 
-현재 알림 설정 토글에 버그가 있습니다. 빠른 시일 내에 수정하겠습니다.
diff --git a/backend/src/auth/auth.service.ts b/backend/src/auth/auth.service.ts
index e4419989..94820ee8 100644
--- a/backend/src/auth/auth.service.ts
+++ b/backend/src/auth/auth.service.ts
@@ -4,7 +4,7 @@ import * as bcrypt from 'bcrypt';
 import { User } from 'src/entities/user.entity';
 import { ValidationException } from 'src/exceptions/validation.exception';
 import { JwtService } from '@nestjs/jwt';
-import { ACCESS_TOKEN_SECRETS, REFRESH_TOKEN_SECRETS } from 'src/constants';
+import { ACCESS_TOKEN_SECRETS, REFRESH_TOKEN_SECRETS, TWO_MONTHS_TO_SEC, TWO_WEEKS_TO_SEC } from 'src/constants';
 import { InjectRedis } from '@songkeys/nestjs-redis';
 import Redis from 'ioredis';
 
@@ -25,7 +25,7 @@ export class AuthService {
 
     async getRefreshToken(user: User): Promise<string> {
         const refreshToken = this.jwtService.sign({ id: user.id }, { secret: REFRESH_TOKEN_SECRETS, expiresIn: '2w' });
-        await this.redis.set(`refreshToken:${user.id}`, refreshToken);
+        await this.redis.set(`refreshToken:${user.id}`, refreshToken, 'EX', TWO_WEEKS_TO_SEC);
         return refreshToken;
     }
 
@@ -53,7 +53,7 @@ export class AuthService {
 
     async addFirebaseToken(userId: string, token: string) {
         try {
-            await this.redis.set(`firebaseToken:${userId}`, token);
+            await this.redis.set(`firebaseToken:${userId}`, token, 'EX', TWO_MONTHS_TO_SEC);
             return token;
         } catch (e) {
             throw new HttpException('Firebase 토큰 등록 실패', HttpStatus.INTERNAL_SERVER_ERROR);
diff --git a/backend/src/auth/jwt/jwt.repository.ts b/backend/src/auth/jwt/jwt.repository.ts
deleted file mode 100644
index 91257ece..00000000
--- a/backend/src/auth/jwt/jwt.repository.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Injectable } from '@nestjs/common';
-import { Repository } from 'typeorm';
-import { InjectRepository } from '@nestjs/typeorm';
-import { Token } from 'src/entities/token.entity';
-
-@Injectable()
-export class JWTRepository extends Repository<Token> {
-    constructor(
-        @InjectRepository(Token)
-        private repository: Repository<Token>,
-    ) {
-        super(repository.target, repository.manager, repository.queryRunner);
-    }
-
-    async saveToken(userId: string, token: string): Promise<string> {
-        const newToken = Token.create({ userId, token });
-        await newToken.save();
-        return newToken.token;
-    }
-}
diff --git a/backend/src/auth/jwt/jwt.service.ts b/backend/src/auth/jwt/jwt.service.ts
index aec6b10d..5cfe2ff0 100644
--- a/backend/src/auth/jwt/jwt.service.ts
+++ b/backend/src/auth/jwt/jwt.service.ts
@@ -19,8 +19,7 @@ export class JWTService {
     }
 
     async isLatestRefreshToken(userId: string, payload: string) {
-        const tokenInfo = await this.findOne(userId);
-        const latestRefreshToken = tokenInfo;
+        const latestRefreshToken = await this.findOne(userId);
         const token = this.jwtService.sign(payload, { secret: REFRESH_TOKEN_SECRETS });
         if (latestRefreshToken !== token) {
             return false;
diff --git a/backend/src/cache/cache.node.ts b/backend/src/cache/cache.node.ts
new file mode 100644
index 00000000..a5776847
--- /dev/null
+++ b/backend/src/cache/cache.node.ts
@@ -0,0 +1,11 @@
+export class CacheNode<T> {
+    key: string;
+    value: T;
+    prev: CacheNode<T>;
+    next: CacheNode<T>;
+
+    constructor(key: string, value: T) {
+        this.key = key;
+        this.value = value;
+    }
+}
diff --git a/backend/src/cache/cache.service.ts b/backend/src/cache/cache.service.ts
new file mode 100644
index 00000000..31117901
--- /dev/null
+++ b/backend/src/cache/cache.service.ts
@@ -0,0 +1,114 @@
+import { Injectable } from '@nestjs/common';
+import { ProductRankCache } from './rank.cache';
+import { MAX_TRACKING_PRODUCT_CACHE, MAX_TRACKING_RANK, TWENTY_MIN_TO_SEC } from 'src/constants';
+import { TrackingProductCache } from './tracking.cache';
+import { InjectRepository } from '@nestjs/typeorm';
+import Redis from 'ioredis';
+import { InjectRedis } from '@songkeys/nestjs-redis';
+import { ProductPrice } from 'src/schema/product.schema';
+import { Model } from 'mongoose';
+import { InjectModel } from '@nestjs/mongoose';
+import { ProductRepository } from 'src/product/product.repository';
+import { TrackingProductRepository } from 'src/product/trackingProduct.repository';
+import { ProductRankCacheDto } from 'src/dto/product.rank.cache.dto';
+import { TrackingProduct } from 'src/entities/trackingProduct.entity';
+
+@Injectable()
+export class CacheService {
+    private productRankCache = new ProductRankCache(MAX_TRACKING_RANK);
+    private trackingProductCache = new TrackingProductCache(MAX_TRACKING_PRODUCT_CACHE);
+    constructor(
+        @InjectRepository(TrackingProductRepository)
+        private trackingProductRepository: TrackingProductRepository,
+        @InjectRepository(ProductRepository)
+        private productRepository: ProductRepository,
+        @InjectModel(ProductPrice.name)
+        private productPriceModel: Model<ProductPrice>,
+        @InjectRedis() private readonly redis: Redis,
+    ) {
+        this.initCache();
+    }
+
+    async initCache() {
+        const latestData = await this.productPriceModel
+            .aggregate([
+                {
+                    $sort: { time: -1 },
+                },
+                {
+                    $group: {
+                        _id: '$productId',
+                        price: { $first: '$price' },
+                        isSoldOut: { $first: '$isSoldOut' },
+                        lowestPrice: { $min: '$price' },
+                    },
+                },
+            ])
+            .sort('_id')
+            .exec();
+        const userCountList = await this.trackingProductRepository.getAllUserCount();
+        const rankList = await this.productRepository.getTotalInfoRankingList();
+        const initPromise = latestData.map(async (data) => {
+            const matchProduct = userCountList.find((product) => product.id === data._id);
+            const setUserCount = await this.redis.set(
+                `product:${data._id}`,
+                JSON.stringify({
+                    isSoldOut: data.isSoldOut,
+                    price: data.price,
+                    lowestPrice: data.lowestPrice,
+                }),
+                'EX',
+                TWENTY_MIN_TO_SEC,
+            );
+            const zaddUserCount = await this.redis.zadd(
+                'userCount',
+                matchProduct ? parseInt(matchProduct.userCount) : 0,
+                data._id,
+            );
+            return Promise.all([setUserCount, zaddUserCount]);
+        });
+        rankList.forEach((product) => {
+            this.productRankCache.put(product.id, { ...product, userCount: parseInt(product.userCount) });
+        });
+        await Promise.all(initPromise);
+    }
+
+    putProductRank(key: string, value: ProductRankCacheDto) {
+        this.productRankCache.put(key, value);
+    }
+
+    updateProductRank(product: ProductRankCacheDto, newProduct?: ProductRankCacheDto) {
+        this.productRankCache.update(product, newProduct);
+    }
+
+    findIndexProductRank(key: string) {
+        return this.productRankCache.findIndex(key);
+    }
+
+    getProductRank(key: string) {
+        return this.productRankCache.get(key);
+    }
+    getAllProductRank() {
+        return this.productRankCache.getAll();
+    }
+
+    putTrackingProduct(key: string, value: TrackingProduct[]) {
+        this.trackingProductCache.put(key, value);
+    }
+
+    getTrackingProduct(key: string) {
+        return this.trackingProductCache.get(key);
+    }
+
+    addValueTrackingProduct(key: string, value: TrackingProduct) {
+        this.trackingProductCache.addValue(key, value);
+    }
+
+    deleteValueTrackingProdcut(key: string, value: TrackingProduct) {
+        this.trackingProductCache.deleteValue(key, value);
+    }
+
+    updateValueTrackingProdcut(key: string, value: TrackingProduct) {
+        this.trackingProductCache.updateValue(key, value);
+    }
+}
diff --git a/backend/src/utils/cache.ts b/backend/src/cache/rank.cache.ts
similarity index 74%
rename from backend/src/utils/cache.ts
rename to backend/src/cache/rank.cache.ts
index 62961ad4..1a5e0ae7 100644
--- a/backend/src/utils/cache.ts
+++ b/backend/src/cache/rank.cache.ts
@@ -1,22 +1,12 @@
 import { ProductRankCacheDto } from 'src/dto/product.rank.cache.dto';
-
-class CacheNode {
-    key: string;
-    value: ProductRankCacheDto;
-    prev: CacheNode;
-    next: CacheNode;
-    constructor(key: string, value: ProductRankCacheDto) {
-        this.key = key;
-        this.value = value;
-    }
-}
+import { CacheNode } from './cache.node';
 
 export class ProductRankCache {
     maxSize: number;
     count: number;
-    head: CacheNode;
-    tail: CacheNode;
-    hashTable = new Map<string, CacheNode>();
+    head: CacheNode<ProductRankCacheDto>;
+    tail: CacheNode<ProductRankCacheDto>;
+    hashMap = new Map<string, CacheNode<ProductRankCacheDto>>();
     constructor(size: number) {
         this.maxSize = size;
         this.head = new CacheNode('head', new ProductRankCacheDto());
@@ -31,11 +21,11 @@ export class ProductRankCache {
         this.add(node);
         if (this.count > this.maxSize) {
             const lowestNode = this.getLowestNode();
-            this.delete(lowestNode);
+            this.remove(lowestNode);
         }
     }
 
-    private add(node: CacheNode) {
+    private add(node: CacheNode<ProductRankCacheDto>) {
         let prev = this.tail.prev;
         while (prev.value.userCount <= node.value.userCount) {
             if (prev.value.userCount === node.value.userCount && prev.value.id > node.value.id) {
@@ -51,7 +41,7 @@ export class ProductRankCache {
         node.next = next;
         node.prev = prev;
         next.prev = node;
-        this.hashTable.set(node.key, node);
+        this.hashMap.set(node.key, node);
         this.count++;
     }
 
@@ -63,11 +53,18 @@ export class ProductRankCache {
         return node;
     }
 
-    delete(node: CacheNode) {
+    delete(key: string) {
+        const node = this.hashMap.get(key);
+        if (node) {
+            this.remove(node);
+        }
+    }
+
+    private remove(node: CacheNode<ProductRankCacheDto>) {
         const { prev, next } = node;
         prev.next = next;
         next.prev = prev;
-        this.hashTable.delete(node.key);
+        this.hashMap.delete(node.key);
         this.count--;
     }
 
@@ -86,9 +83,9 @@ export class ProductRankCache {
     }
 
     update(product: ProductRankCacheDto, newProduct?: ProductRankCacheDto) {
-        const node = this.hashTable.get(product.id);
+        const node = this.hashMap.get(product.id);
         if (node) {
-            this.delete(node);
+            this.remove(node);
         }
         if (newProduct) {
             this.put(newProduct.id, newProduct);
@@ -97,9 +94,9 @@ export class ProductRankCache {
         this.put(product.id, product);
     }
 
-    get(key: string): CacheNode | null {
-        const node = this.hashTable.get(key);
-        return node ? node : null;
+    get(key: string): ProductRankCacheDto | null {
+        const node = this.hashMap.get(key);
+        return node ? node.value : null;
     }
 
     getAll() {
diff --git a/backend/src/cache/tracking.cache.ts b/backend/src/cache/tracking.cache.ts
new file mode 100644
index 00000000..c6b2b30e
--- /dev/null
+++ b/backend/src/cache/tracking.cache.ts
@@ -0,0 +1,120 @@
+import { TrackingProduct } from 'src/entities/trackingProduct.entity';
+import { CacheNode } from './cache.node';
+
+export class TrackingProductCache {
+    private maxSize: number;
+    private count: number;
+    head: CacheNode<TrackingProduct[]>;
+    tail: CacheNode<TrackingProduct[]>;
+    hashMap = new Map<string, CacheNode<TrackingProduct[]>>();
+    constructor(size: number) {
+        this.maxSize = size;
+        this.head = new CacheNode('head', [new TrackingProduct()]);
+        this.tail = new CacheNode('tail', [new TrackingProduct()]);
+        this.head.next = this.tail;
+        this.tail.prev = this.head;
+        this.count = 0;
+    }
+
+    put(key: string, value: TrackingProduct[]) {
+        this.delete(key);
+        const node = new CacheNode(key, value);
+        this.add(node);
+        if (this.count > this.maxSize) {
+            const oldestNode = this.head.next;
+            this.remove(oldestNode);
+        }
+    }
+
+    private add(node: CacheNode<TrackingProduct[]>) {
+        const prev = this.tail.prev;
+        prev.next = node;
+        node.next = this.tail;
+        node.prev = prev;
+        this.tail.prev = node;
+        this.hashMap.set(node.key, node);
+        this.count++;
+    }
+
+    delete(key: string) {
+        const node = this.hashMap.get(key);
+        if (node) {
+            this.remove(node);
+        }
+    }
+
+    private remove(node: CacheNode<TrackingProduct[]>) {
+        const { prev, next } = node;
+        prev.next = next;
+        next.prev = prev;
+        this.hashMap.delete(node.key);
+        this.count--;
+    }
+
+    findIndex(key: string) {
+        let node = this.head.next;
+        let idx = 0;
+        while (node.key !== key) {
+            idx++;
+            if (this.count <= idx) {
+                idx = -1;
+                break;
+            }
+            node = node.next;
+        }
+        return idx;
+    }
+
+    get(key: string): TrackingProduct[] | null {
+        const node = this.hashMap.get(key);
+        return node ? node.value : null;
+    }
+
+    getAll() {
+        const nodeList = [];
+        let node = this.head.next;
+        while (node !== this.tail) {
+            nodeList.push(node.value);
+            node = node.next;
+        }
+        return nodeList;
+    }
+
+    addValue(key: string, value: TrackingProduct) {
+        const node = this.hashMap.get(key);
+        if (node) {
+            node.value.push(value);
+        }
+    }
+
+    deleteValue(key: string, value: TrackingProduct) {
+        const node = this.hashMap.get(key);
+        if (node) {
+            node.value = node.value.filter((product) => {
+                return product.productId !== value.productId;
+            });
+        }
+    }
+
+    updateValue(key: string, value: TrackingProduct) {
+        const node = this.hashMap.get(key);
+        if (node) {
+            node.value.forEach((product, idx) => {
+                if (product.productId === value.productId) {
+                    node.value[idx] = value;
+                    return false;
+                }
+            });
+        }
+    }
+
+    size() {
+        return this.count;
+    }
+    clear() {
+        this.count = 0;
+        this.head.next = this.tail;
+        this.tail.prev = this.head;
+        this.hashMap = new Map<string, CacheNode<TrackingProduct[]>>();
+    }
+}
diff --git a/backend/src/constants.ts b/backend/src/constants.ts
index 01f935f3..e5c02836 100644
--- a/backend/src/constants.ts
+++ b/backend/src/constants.ts
@@ -26,7 +26,7 @@ export const REDIS_PASSWORD = process.env.REDIS_PASSWORD;
 export const TYPE = process.env.TYPE;
 export const PROJECT_ID = process.env.PROJECT_ID;
 export const PRIVATE_KEY_ID = process.env.PRIVATE_KEY_ID;
-export const PRIVATE_KEY = process.env.PRIVATE_KEY as string;
+export const { PRIVATE_KEY } = JSON.parse(process.env.PRIVATE_KEY as string);
 export const CLIENT_EMAIL = process.env.CLIENT_EMAIL;
 export const CLIENT_ID = process.env.CLIENT_ID;
 export const AUTH_URI = process.env.AUTH_URI;
@@ -35,3 +35,7 @@ export const AUTH_PROVIDER_X509_CERT_URL = process.env.AUTH_PROVIDER_X509_CERT_U
 export const CLIENT_X509_CERT_URL = process.env.CLIENT_X509_CERT_URL;
 export const UNIVERSE_DOMAIN = process.env.UNIVERSE_DOMAIN;
 export const CHANNEL_ID = process.env.CHANNEL_ID;
+export const TWENTY_MIN_TO_SEC = 20 * 60;
+export const TWO_WEEKS_TO_SEC = 2 * 7 * 24 * 60 * 60;
+export const TWO_MONTHS_TO_SEC = 61 * 24 * 60 * 60;
+export const MAX_TRACKING_PRODUCT_CACHE = 30;
diff --git a/backend/src/entities/token.entity.ts b/backend/src/entities/token.entity.ts
deleted file mode 100644
index b8b86bbc..00000000
--- a/backend/src/entities/token.entity.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Entity, BaseEntity, PrimaryColumn, Column } from 'typeorm';
-
-@Entity({ name: 'refresh_whitelist' })
-export class Token extends BaseEntity {
-    @PrimaryColumn('uuid')
-    userId: string;
-
-    @Column({ type: 'varchar', length: 256 })
-    token: string;
-}
diff --git a/backend/src/firebase/firebase.config.ts b/backend/src/firebase/firebase.config.ts
index 7984d0c9..d1e29432 100644
--- a/backend/src/firebase/firebase.config.ts
+++ b/backend/src/firebase/firebase.config.ts
@@ -16,7 +16,7 @@ export const serviceAccount = {
     type: TYPE,
     project_id: PROJECT_ID,
     private_key_id: PRIVATE_KEY_ID,
-    private_key: PRIVATE_KEY.replace(/\\n/g, '\n'),
+    private_key: PRIVATE_KEY,
     client_email: CLIENT_EMAIL,
     client_id: CLIENT_ID,
     auth_uri: AUTH_URI,
diff --git a/backend/src/product/product.module.ts b/backend/src/product/product.module.ts
index 0887cc0a..8a8d6a0a 100644
--- a/backend/src/product/product.module.ts
+++ b/backend/src/product/product.module.ts
@@ -10,6 +10,7 @@ import { MongooseModule } from '@nestjs/mongoose';
 import { ProductPrice, ProductPriceSchema } from 'src/schema/product.schema';
 import { FirebaseService } from 'src/firebase/firebase.service';
 import { CronService } from 'src/cron/cron.service';
+import { CacheService } from 'src/cache/cache.service';
 
 @Module({
     imports: [
@@ -17,6 +18,13 @@ import { CronService } from 'src/cron/cron.service';
         MongooseModule.forFeature([{ name: ProductPrice.name, schema: ProductPriceSchema }]),
     ],
     controllers: [ProductController],
-    providers: [ProductService, ProductRepository, TrackingProductRepository, FirebaseService, CronService],
+    providers: [
+        ProductService,
+        ProductRepository,
+        TrackingProductRepository,
+        FirebaseService,
+        CronService,
+        CacheService,
+    ],
 })
 export class ProductModule {}
diff --git a/backend/src/product/product.service.ts b/backend/src/product/product.service.ts
index 739f4df0..136730e2 100644
--- a/backend/src/product/product.service.ts
+++ b/backend/src/product/product.service.ts
@@ -12,17 +12,16 @@ import { InjectModel } from '@nestjs/mongoose';
 import { ProductPrice } from 'src/schema/product.schema';
 import { Model } from 'mongoose';
 import { PriceDataDto } from 'src/dto/price.data.dto';
-import { MAX_TRACKING_RANK, NINETY_DAYS, NO_CACHE, THIRTY_DAYS } from 'src/constants';
-import { ProductRankCache } from 'src/utils/cache';
+import { MAX_TRACKING_RANK, NINETY_DAYS, THIRTY_DAYS, TWENTY_MIN_TO_SEC } from 'src/constants';
 import { ProductRankCacheDto } from 'src/dto/product.rank.cache.dto';
 import Redis from 'ioredis';
 import { InjectRedis } from '@songkeys/nestjs-redis';
+import { CacheService } from 'src/cache/cache.service';
 
 const REGEXP_11ST =
     /http[s]?:\/\/(?:www\.|m\.)?11st\.co\.kr\/products\/(?:ma\/|m\/|pa\/)?([1-9]\d*)(?:\?.*)?(?:\/share)?/;
 @Injectable()
 export class ProductService {
-    private productRankCache = new ProductRankCache(MAX_TRACKING_RANK);
     constructor(
         @InjectRepository(TrackingProductRepository)
         private trackingProductRepository: TrackingProductRepository,
@@ -31,6 +30,7 @@ export class ProductService {
         @InjectModel(ProductPrice.name)
         private productPriceModel: Model<ProductPrice>,
         @InjectRedis() private readonly redis: Redis,
+        private cacheService: CacheService,
     ) {
         this.initCache();
     }
@@ -63,6 +63,8 @@ export class ProductService {
                     price: data.price,
                     lowestPrice: data.lowestPrice,
                 }),
+                'EX',
+                TWENTY_MIN_TO_SEC,
             );
             const zaddUserCount = await this.redis.zadd(
                 'userCount',
@@ -72,7 +74,7 @@ export class ProductService {
             return Promise.all([setUserCount, zaddUserCount]);
         });
         rankList.forEach((product) => {
-            this.productRankCache.put(product.id, { ...product, userCount: parseInt(product.userCount) });
+            this.cacheService.putProductRank(product.id, { ...product, userCount: parseInt(product.userCount) });
         });
         await Promise.all(initPromise);
     }
@@ -99,36 +101,42 @@ export class ProductService {
         if (trackingProduct) {
             throw new HttpException('이미 등록된 상품입니다.', HttpStatus.CONFLICT);
         }
-        const cacheData = await this.redis.zscore('userCount', product.id);
-        const userCount = cacheData ? parseInt(cacheData) : NO_CACHE;
-        const productRank = {
+        const userCount = parseInt(await this.redis.zincrby('userCount', 1, product.id));
+        const newProductRank = {
             id: product.id,
             productName: product.productName,
             productCode: product.productCode,
             shop: product.shop,
             imageUrl: product.imageUrl,
-            userCount: userCount + 1,
+            userCount: userCount,
         };
-        this.productRankCache.update(productRank);
-        if (cacheData) {
-            await this.redis.zincrby('userCount', 1, product.id);
+        const newTrackingProduct = await this.trackingProductRepository.saveTrackingProduct(
+            userId,
+            product.id,
+            targetPrice,
+        );
+        const trackingProductList = this.cacheService.getTrackingProduct(userId);
+        if (trackingProductList) {
+            newTrackingProduct.product = product;
+            this.cacheService.addValueTrackingProduct(userId, newTrackingProduct);
         }
-        await this.trackingProductRepository.saveTrackingProduct(userId, product.id, targetPrice);
+        this.cacheService.updateProductRank(newProductRank);
     }
 
     async getTrackingList(userId: string): Promise<TrackingProductDto[]> {
-        const trackingProductList = await this.trackingProductRepository.find({
-            where: { userId: userId },
-            relations: ['product'],
-        });
+        let trackingProductList = this.cacheService.getTrackingProduct(userId);
+        if (!trackingProductList) {
+            trackingProductList = await this.trackingProductRepository.find({
+                where: { userId: userId },
+                relations: ['product'],
+            });
+            this.cacheService.putTrackingProduct(userId, trackingProductList);
+        }
         if (trackingProductList.length === 0) return [];
         const trackingListInfo = trackingProductList.map(async ({ product, targetPrice, isAlert }) => {
             const { id, productName, productCode, shop, imageUrl } = product;
-            const cacheData = await this.redis.get(`product:${id}`);
-            const { price } = cacheData
-                ? JSON.parse(cacheData)
-                : await this.productRepository.findOne({ where: { id: id } });
             const priceData = await this.getPriceData(id, THIRTY_DAYS);
+            const { price } = priceData[priceData.length - 1];
             return {
                 productName,
                 productCode,
@@ -145,14 +153,11 @@ export class ProductService {
     }
 
     async getRecommendList() {
-        const recommendList = this.productRankCache.getAll();
+        const recommendList = this.cacheService.getAllProductRank();
         const recommendListInfo = recommendList.map(async (product, index) => {
             const { id, productName, productCode, shop, imageUrl } = product;
-            const cacheData = await this.redis.get(`product:${id}`);
-            const { price } = cacheData
-                ? JSON.parse(cacheData)
-                : await this.productRepository.findOne({ where: { id: id } });
             const priceData = await this.getPriceData(id, THIRTY_DAYS);
+            const { price } = priceData[priceData.length - 1];
             return {
                 productName,
                 productCode,
@@ -178,10 +183,11 @@ export class ProductService {
             where: { userId: userId, productId: selectProduct.id },
         });
         await this.trackingProductRepository.getUserCount(selectProduct.id);
-        const idx = this.productRankCache.findIndex(selectProduct.id);
+        const idx = this.cacheService.findIndexProductRank(selectProduct.id);
         const rank = idx === -1 ? idx : idx + 1;
         const priceData = await this.getPriceData(selectProduct.id, NINETY_DAYS);
-        const { price, lowestPrice } = await this.getProductCurrentData(selectProduct.id);
+        const { price } = priceData[priceData.length - 1];
+        const lowestPrice = Math.min(...priceData.map((item) => item.price));
         return {
             productName: selectProduct.productName,
             shop: selectProduct.shop,
@@ -204,43 +210,54 @@ export class ProductService {
 
     async deleteProduct(userId: string, productCode: string) {
         const product = await this.findTrackingProductByCode(userId, productCode);
-        const prevProduct = this.productRankCache.get(product.productId)?.value;
+        const currentProduct = this.cacheService.getProductRank(product.productId);
         await this.redis.zincrby('userCount', -1, product.productId);
-
-        if (!prevProduct) {
-            throw new HttpException('상품을 찾을 수 없습니다.', HttpStatus.NOT_FOUND);
+        if (currentProduct) {
+            currentProduct.userCount--;
+            const productCount = await this.redis.zcard('userCount');
+            if (productCount > MAX_TRACKING_RANK) {
+                await this.deleteUpdateCache(currentProduct);
+            } else {
+                this.cacheService.updateProductRank(currentProduct);
+            }
         }
-        prevProduct.userCount--;
-        const productCount = await this.redis.zcard('userCount');
-        if (productCount > MAX_TRACKING_RANK) {
-            await this.deleteUpdateCache(prevProduct);
-        } else {
-            this.productRankCache.update(prevProduct);
+        if (product) {
+            this.cacheService.deleteValueTrackingProdcut(userId, product);
         }
         await this.trackingProductRepository.remove(product);
     }
 
-    async deleteUpdateCache(prevProduct: ProductRankCacheDto) {
-        const nextDataId = (await this.redis.zrevrange('userCount', MAX_TRACKING_RANK, MAX_TRACKING_RANK))[0];
-        const cacheData = await this.redis.zscore('userCount', nextDataId);
-        const userCount = cacheData ? parseInt(cacheData) : NO_CACHE;
-        if (userCount >= prevProduct.userCount) {
-            const newProduct = await this.productRepository.findOne({
-                where: { id: nextDataId },
-            });
-            if (!newProduct) {
-                throw new HttpException('상품을 찾을 수 없습니다.', HttpStatus.NOT_FOUND);
-            }
-            const newProductRanck = {
-                id: newProduct.id,
-                productName: newProduct.productName,
-                productCode: newProduct.productCode,
-                shop: newProduct.shop,
-                imageUrl: newProduct.imageUrl,
-                userCount: userCount,
-            };
-            this.productRankCache.update(prevProduct, newProductRanck);
+    async deleteUpdateCache(currentProduct: ProductRankCacheDto) {
+        const nextProductData = await this.redis.zrevrange(
+            'userCount',
+            MAX_TRACKING_RANK,
+            MAX_TRACKING_RANK,
+            'WITHSCORES',
+        );
+        const [nextDataId, userCount] = [nextProductData[0], parseInt(nextProductData[1])];
+        if (userCount < currentProduct.userCount) {
+            this.cacheService.updateProductRank(currentProduct);
+            return;
+        }
+        if (userCount === currentProduct.userCount && nextDataId < currentProduct.id) {
+            this.cacheService.updateProductRank(currentProduct);
+            return;
         }
+        const newProduct = await this.productRepository.findOne({
+            where: { id: nextDataId },
+        });
+        if (!newProduct) {
+            throw new HttpException('상품을 찾을 수 없습니다.', HttpStatus.NOT_FOUND);
+        }
+        const newProductRank = {
+            id: newProduct.id,
+            productName: newProduct.productName,
+            productCode: newProduct.productCode,
+            shop: newProduct.shop,
+            imageUrl: newProduct.imageUrl,
+            userCount: userCount,
+        };
+        this.cacheService.updateProductRank(currentProduct, newProductRank);
     }
 
     async findTrackingProductByCode(userId: string, productCode: string) {
@@ -256,6 +273,7 @@ export class ProductService {
         if (!trackingProduct) {
             throw new HttpException('상품을 찾을 수 없습니다.', HttpStatus.NOT_FOUND);
         }
+        trackingProduct.product = existProduct;
         return trackingProduct;
     }
 
@@ -292,6 +310,8 @@ export class ProductService {
                 isSoldOut: productInfo.isSoldOut,
                 lowestPrice: productInfo.productPrice,
             }),
+            'EX',
+            TWENTY_MIN_TO_SEC,
         );
         this.productPriceModel.create(updatedDataInfo);
         return product;
@@ -301,6 +321,7 @@ export class ProductService {
         const product = await this.findTrackingProductByCode(userId, productCode);
         product.isAlert = !product.isAlert;
         await this.trackingProductRepository.save(product);
+        this.cacheService.updateValueTrackingProdcut(userId, product);
     }
 
     async getProductCurrentData(productId: string) {