diff --git a/app/src/main/java/com/android/trisolarispms/ui/card/CardInfoScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/card/CardInfoScreen.kt
index 128235d..3a2e86f 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/card/CardInfoScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/card/CardInfoScreen.kt
@@ -11,18 +11,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.mutableStateOf
@@ -39,6 +32,7 @@ import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
 import com.android.trisolarispms.data.api.core.ApiClient
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 import java.util.Calendar
 import java.util.Date
 import kotlinx.coroutines.launch
@@ -101,18 +95,9 @@ fun CardInfoScreen(
         }
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Card Details") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Card Details",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/card/IssueTemporaryCardScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/card/IssueTemporaryCardScreen.kt
index 6abdc52..753f9a0 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/card/IssueTemporaryCardScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/card/IssueTemporaryCardScreen.kt
@@ -9,18 +9,11 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.TextButton
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.collectAsState
@@ -39,6 +32,7 @@ import com.airbnb.lottie.compose.LottieCompositionSpec
 import com.airbnb.lottie.compose.LottieConstants
 import com.airbnb.lottie.compose.animateLottieCompositionAsState
 import com.airbnb.lottie.compose.rememberLottieComposition
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 
 @Composable
 @OptIn(ExperimentalMaterial3Api::class)
@@ -97,18 +91,9 @@ fun IssueTemporaryCardScreen(
         }
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Issue Temporary Card") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Issue Temporary Card",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/payment/BookingPaymentsScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/payment/BookingPaymentsScreen.kt
index b04450c..afc3142 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/payment/BookingPaymentsScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/payment/BookingPaymentsScreen.kt
@@ -12,23 +12,18 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.AlertDialog
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -42,11 +37,11 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.android.trisolarispms.data.api.model.PaymentDto
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 import java.time.OffsetDateTime
 import java.time.format.DateTimeFormatter
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun BookingPaymentsScreen(
     propertyId: String,
     bookingId: String,
@@ -66,18 +61,9 @@ fun BookingPaymentsScreen(
         viewModel.load(propertyId, bookingId)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Payments") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Payments",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/razorpay/RazorpaySettingsScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/razorpay/RazorpaySettingsScreen.kt
index 755ea80..22e37af 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/razorpay/RazorpaySettingsScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/razorpay/RazorpaySettingsScreen.kt
@@ -11,20 +11,12 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -37,9 +29,9 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.compose.ui.platform.ClipboardManager
 import androidx.compose.ui.platform.LocalClipboardManager
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun RazorpaySettingsScreen(
     propertyId: String,
     onBack: () -> Unit,
@@ -52,18 +44,9 @@ fun RazorpaySettingsScreen(
         viewModel.load(propertyId)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Razorpay Settings") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Razorpay Settings",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/room/RoomFormScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/room/RoomFormScreen.kt
index 4d64dab..13f7789 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/room/RoomFormScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/room/RoomFormScreen.kt
@@ -4,30 +4,24 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Delete
-import androidx.compose.material.icons.filled.Done
 import androidx.compose.material.icons.filled.PhotoLibrary
 import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -38,6 +32,8 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
+import com.android.trisolarispms.ui.common.SaveTopBarScaffold
 import com.android.trisolarispms.ui.roomtype.RoomTypeListViewModel
 
 @Composable
@@ -72,45 +68,28 @@ fun RoomFormScreen(
         }
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text(title) },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    IconButton(onClick = {
-                        if (roomId == null) {
-                            viewModel.submitCreate(propertyId, onSave)
-                        } else {
-                            viewModel.submitUpdate(propertyId, roomId, onSave)
-                        }
-                    }) {
-                        Icon(Icons.Default.Done, contentDescription = "Save")
-                    }
-                    if (roomId != null) {
-                        IconButton(onClick = { onViewImages(roomId) }) {
-                            Icon(Icons.Default.PhotoLibrary, contentDescription = "Images")
-                        }
-                        IconButton(onClick = { showDeleteConfirm = true }) {
-                            Icon(Icons.Default.Delete, contentDescription = "Delete Room")
-                        }
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
+    SaveTopBarScaffold(
+        title = title,
+        onBack = onBack,
+        onSave = {
+            if (roomId == null) {
+                viewModel.submitCreate(propertyId, onSave)
+            } else {
+                viewModel.submitUpdate(propertyId, roomId, onSave)
+            }
+        },
+        actions = {
+            if (roomId != null) {
+                IconButton(onClick = { onViewImages(roomId) }) {
+                    Icon(Icons.Default.PhotoLibrary, contentDescription = "Images")
+                }
+                IconButton(onClick = { showDeleteConfirm = true }) {
+                    Icon(Icons.Default.Delete, contentDescription = "Delete Room")
+                }
+            }
         }
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
+        PaddedScreenColumn(padding = padding) {
             OutlinedTextField(
                 value = state.roomNumber,
                 onValueChange = viewModel::onRoomNumberChange,
diff --git a/app/src/main/java/com/android/trisolarispms/ui/room/RoomsScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/room/RoomsScreen.kt
index b010915..422942f 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/room/RoomsScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/room/RoomsScreen.kt
@@ -5,7 +5,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -15,24 +14,19 @@ import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.Category
 import androidx.compose.material.icons.filled.CreditCard
+import androidx.compose.material.icons.filled.Groups
 import androidx.compose.material.icons.filled.Hotel
 import androidx.compose.material.icons.filled.Layers
-import androidx.compose.material.icons.filled.Groups
-import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.FilterChip
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
@@ -40,15 +34,18 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.platform.LocalContext
 import android.nfc.NfcAdapter
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
+import com.android.trisolarispms.ui.common.LoadingAndError
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
 import com.android.trisolarispms.ui.roomtype.RoomTypeListViewModel
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.mutableStateOf
 import androidx.compose.foundation.layout.Box
 
 @Composable
@@ -79,49 +76,27 @@ fun RoomsScreen(
         roomTypeListViewModel.load(propertyId)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Available Rooms") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
+    BackTopBarScaffold(
+        title = "Available Rooms",
+        onBack = onBack,
+        actions = {
+            if (canManageRooms) {
+                IconButton(onClick = onViewRoomTypes) {
+                    Icon(Icons.Default.Category, contentDescription = "Room Types")
+                }
+                if (nfcSupported && canViewCardInfo) {
+                    IconButton(onClick = onViewCardInfo) {
+                        Icon(Icons.Default.CreditCard, contentDescription = "Card Info")
                     }
-                },
-                actions = {
-                    if (canManageRooms) {
-                        IconButton(onClick = onViewRoomTypes) {
-                            Icon(Icons.Default.Category, contentDescription = "Room Types")
-                        }
-                        if (nfcSupported && canViewCardInfo) {
-                            IconButton(onClick = onViewCardInfo) {
-                                Icon(Icons.Default.CreditCard, contentDescription = "Card Info")
-                            }
-                        }
-                        IconButton(onClick = onAddRoom) {
-                            Icon(Icons.Default.Add, contentDescription = "Add Room")
-                        }
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
+                }
+                IconButton(onClick = onAddRoom) {
+                    Icon(Icons.Default.Add, contentDescription = "Add Room")
+                }
+            }
         }
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
-            if (state.isLoading) {
-                CircularProgressIndicator()
-                Spacer(modifier = Modifier.height(8.dp))
-            }
-            state.error?.let {
-                Text(text = it, color = MaterialTheme.colorScheme.error)
-                Spacer(modifier = Modifier.height(8.dp))
-            }
+        PaddedScreenColumn(padding = padding) {
+            LoadingAndError(isLoading = state.isLoading, error = state.error)
             if (!state.isLoading && state.error == null) {
                 Row(
                     modifier = Modifier.fillMaxWidth(),
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagFormScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagFormScreen.kt
index e1cbfa9..8a6662d 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagFormScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagFormScreen.kt
@@ -3,28 +3,18 @@ package com.android.trisolarispms.ui.roomimage
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
-import androidx.compose.material.icons.filled.Done
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
+import com.android.trisolarispms.ui.common.SaveTopBarScaffold
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 internal fun ImageTagFormScreen(
     title: String,
     name: String,
@@ -33,31 +23,12 @@ internal fun ImageTagFormScreen(
     onBack: () -> Unit,
     onSave: () -> Unit
 ) {
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text(title) },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    IconButton(onClick = onSave) {
-                        Icon(Icons.Default.Done, contentDescription = "Save")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    SaveTopBarScaffold(
+        title = title,
+        onBack = onBack,
+        onSave = onSave
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
+        PaddedScreenColumn(padding = padding) {
             OutlinedTextField(
                 value = name,
                 onValueChange = onNameChange,
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagsScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagsScreen.kt
index fb42799..dec6825 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagsScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomimage/ImageTagsScreen.kt
@@ -2,27 +2,18 @@ package com.android.trisolarispms.ui.roomimage
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Delete
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -31,9 +22,11 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.android.trisolarispms.data.api.model.RoomImageTagDto
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
+import com.android.trisolarispms.ui.common.LoadingAndError
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun ImageTagsScreen(
     onBack: () -> Unit,
     onAdd: () -> Unit,
@@ -46,39 +39,20 @@ fun ImageTagsScreen(
         viewModel.load()
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Image Tags") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    IconButton(onClick = onAdd) {
-                        Icon(Icons.Default.Add, contentDescription = "Add Tag")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
+    BackTopBarScaffold(
+        title = "Image Tags",
+        onBack = onBack,
+        actions = {
+            IconButton(onClick = onAdd) {
+                Icon(Icons.Default.Add, contentDescription = "Add Tag")
+            }
         }
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
-            if (state.isLoading) {
-                CircularProgressIndicator()
-                Spacer(modifier = Modifier.height(8.dp))
-            }
-            state.error?.let {
-                Text(text = it, color = MaterialTheme.colorScheme.error)
-                Spacer(modifier = Modifier.height(8.dp))
-            }
+        PaddedScreenColumn(padding = padding) {
+            LoadingAndError(
+                isLoading = state.isLoading,
+                error = state.error
+            )
             if (!state.isLoading && state.error == null) {
                 if (state.tags.isEmpty()) {
                     Text(text = "No tags")
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomimage/RoomImagesScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomimage/RoomImagesScreen.kt
index cc885b4..5f1b617 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomimage/RoomImagesScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomimage/RoomImagesScreen.kt
@@ -10,27 +10,20 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.UploadFile
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -42,12 +35,14 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
+import com.android.trisolarispms.ui.common.LoadingAndError
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
 import okhttp3.MediaType.Companion.toMediaType
 import okhttp3.MultipartBody
 import okhttp3.RequestBody.Companion.toRequestBody
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun RoomImagesScreen(
     propertyId: String,
     roomId: String,
@@ -86,44 +81,21 @@ fun RoomImagesScreen(
         originalOrderIds.value = state.images.mapNotNull { it.id }
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Room Images") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    IconButton(onClick = {
-                        pickerLauncher.launch(
-                            PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
-                        )
-                    }) {
-                        Icon(Icons.Default.UploadFile, contentDescription = "Pick Image")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
+    BackTopBarScaffold(
+        title = "Room Images",
+        onBack = onBack,
+        actions = {
+            IconButton(onClick = {
+                pickerLauncher.launch(
+                    PickVisualMediaRequest(ActivityResultContracts.PickVisualMedia.ImageOnly)
+                )
+            }) {
+                Icon(Icons.Default.UploadFile, contentDescription = "Pick Image")
+            }
         }
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
-            if (state.isLoading) {
-                CircularProgressIndicator()
-                Spacer(modifier = Modifier.height(8.dp))
-            }
-
-            state.error?.let {
-                Text(text = it, color = MaterialTheme.colorScheme.error)
-                Spacer(modifier = Modifier.height(8.dp))
-            }
+        PaddedScreenColumn(padding = padding) {
+            LoadingAndError(isLoading = state.isLoading, error = state.error)
 
             Text(text = "Upload", style = MaterialTheme.typography.titleMedium)
             Spacer(modifier = Modifier.height(8.dp))
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingDetailsTabsScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingDetailsTabsScreen.kt
index 48f48fa..ed7909e 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingDetailsTabsScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingDetailsTabsScreen.kt
@@ -18,7 +18,6 @@ import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material.icons.filled.Edit
 import androidx.compose.material.icons.filled.QrCode
 import androidx.compose.material.icons.filled.ReceiptLong
@@ -29,13 +28,10 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Tab
 import androidx.compose.material3.TabRow
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.DisposableEffect
@@ -57,6 +53,7 @@ import com.android.trisolarispms.data.api.core.ApiConstants
 import com.android.trisolarispms.data.api.core.FirebaseAuthTokenProvider
 import com.android.trisolarispms.data.api.model.BookingBillingMode
 import com.android.trisolarispms.data.api.model.BookingDetailsResponse
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 import com.android.trisolarispms.ui.guestdocs.GuestDocumentsTab
 import com.google.firebase.auth.FirebaseAuth
 import kotlinx.coroutines.launch
@@ -102,18 +99,9 @@ fun BookingDetailsTabsScreen(
         onDispose { detailsViewModel.stopStream() }
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Details") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Details",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingRoomStaysScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingRoomStaysScreen.kt
index db6d206..b56c642 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingRoomStaysScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomstay/BookingRoomStaysScreen.kt
@@ -8,18 +8,10 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -28,9 +20,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun BookingRoomStaysScreen(
     propertyId: String,
     bookingId: String,
@@ -43,18 +35,9 @@ fun BookingRoomStaysScreen(
         viewModel.load(propertyId, bookingId)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Room Stays") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Room Stays",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenitiesScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenitiesScreen.kt
index 372e87a..cf4fc76 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenitiesScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenitiesScreen.kt
@@ -2,11 +2,9 @@ package com.android.trisolarispms.ui.roomtype
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -14,17 +12,11 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Delete
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -34,10 +26,12 @@ import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.android.trisolarispms.data.api.model.AmenityDto
 import com.android.trisolarispms.data.api.core.ApiConstants
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
+import com.android.trisolarispms.ui.common.LoadingAndError
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
 import coil.compose.AsyncImage
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun AmenitiesScreen(
     onBack: () -> Unit,
     onAdd: () -> Unit,
@@ -51,41 +45,22 @@ fun AmenitiesScreen(
         viewModel.load()
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Amenities") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    if (canManageAmenities) {
-                        IconButton(onClick = onAdd) {
-                            Icon(Icons.Default.Add, contentDescription = "Add Amenity")
-                        }
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
+    BackTopBarScaffold(
+        title = "Amenities",
+        onBack = onBack,
+        actions = {
+            if (canManageAmenities) {
+                IconButton(onClick = onAdd) {
+                    Icon(Icons.Default.Add, contentDescription = "Add Amenity")
+                }
+            }
         }
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
-            if (state.isLoading) {
-                CircularProgressIndicator()
-                Spacer(modifier = Modifier.height(8.dp))
-            }
-            state.error?.let {
-                Text(text = it, color = MaterialTheme.colorScheme.error)
-                Spacer(modifier = Modifier.height(8.dp))
-            }
+        PaddedScreenColumn(padding = padding) {
+            LoadingAndError(
+                isLoading = state.isLoading,
+                error = state.error
+            )
             if (!state.isLoading && state.error == null) {
                 if (state.items.isEmpty()) {
                     Text(text = "No amenities")
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenityFormScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenityFormScreen.kt
index 8bb30f2..fefea3a 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenityFormScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomtype/AmenityFormScreen.kt
@@ -6,27 +6,19 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.ArrowDropDown
-import androidx.compose.material.icons.filled.Done
 import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -42,11 +34,12 @@ import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.PopupProperties
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
+import com.android.trisolarispms.ui.common.SaveTopBarScaffold
 import coil.compose.AsyncImage
 import com.android.trisolarispms.data.api.core.ApiConstants
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun AmenityFormScreen(
     title: String,
     onBack: () -> Unit,
@@ -89,31 +82,12 @@ fun AmenityFormScreen(
         (menuOffsetY - 32.dp).coerceAtLeast(0.dp)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text(title) },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    IconButton(onClick = onSaveClick) {
-                        Icon(Icons.Default.Done, contentDescription = "Save")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    SaveTopBarScaffold(
+        title = title,
+        onBack = onBack,
+        onSave = onSaveClick
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
+        PaddedScreenColumn(padding = padding) {
             OutlinedTextField(
                 value = state.name,
                 onValueChange = viewModel::onNameChange,
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomtype/RatePlanCalendarScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomtype/RatePlanCalendarScreen.kt
index 4a0bfe8..2977bd8 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomtype/RatePlanCalendarScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomtype/RatePlanCalendarScreen.kt
@@ -9,19 +9,12 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.text.KeyboardOptions
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -35,6 +28,7 @@ import androidx.lifecycle.viewmodel.compose.viewModel
 import com.android.trisolarispms.ui.calendar.CalendarDayCell
 import com.android.trisolarispms.ui.calendar.CalendarDaysOfWeekHeader
 import com.android.trisolarispms.ui.calendar.CalendarMonthHeader
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 import com.kizitonwose.calendar.compose.HorizontalCalendar
 import com.kizitonwose.calendar.compose.rememberCalendarState
 import com.kizitonwose.calendar.core.DayPosition
@@ -83,18 +77,9 @@ fun RatePlanCalendarScreen(
         viewModel.loadCalendar(propertyId, ratePlanId, from, to)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Calendar: $ratePlanCode") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Calendar: $ratePlanCode",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/roomtype/RoomTypesScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/roomtype/RoomTypesScreen.kt
index 5331587..4e05d8c 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/roomtype/RoomTypesScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/roomtype/RoomTypesScreen.kt
@@ -4,39 +4,32 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.AspectRatio
 import androidx.compose.material.icons.filled.Bed
 import androidx.compose.material.icons.filled.Groups
-import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
+import com.android.trisolarispms.ui.common.LoadingAndError
+import com.android.trisolarispms.ui.common.PaddedScreenColumn
+import coil.compose.AsyncImage
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
-import androidx.lifecycle.viewmodel.compose.viewModel
-import coil.compose.AsyncImage
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun RoomTypesScreen(
     propertyId: String,
     onBack: () -> Unit,
@@ -51,41 +44,22 @@ fun RoomTypesScreen(
         viewModel.load(propertyId)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Room Types") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                actions = {
-                    if (canManageRoomTypes) {
-                        IconButton(onClick = onAdd) {
-                            Icon(Icons.Default.Add, contentDescription = "Add Room Type")
-                        }
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
+    BackTopBarScaffold(
+        title = "Room Types",
+        onBack = onBack,
+        actions = {
+            if (canManageRoomTypes) {
+                IconButton(onClick = onAdd) {
+                    Icon(Icons.Default.Add, contentDescription = "Add Room Type")
+                }
+            }
         }
     ) { padding ->
-        Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .padding(padding)
-                .padding(24.dp),
-            verticalArrangement = Arrangement.Top
-        ) {
-            if (state.isLoading) {
-                CircularProgressIndicator()
-                Spacer(modifier = Modifier.height(8.dp))
-            }
-            state.error?.let {
-                Text(text = it, color = MaterialTheme.colorScheme.error)
-                Spacer(modifier = Modifier.height(8.dp))
-            }
+        PaddedScreenColumn(padding = padding) {
+            LoadingAndError(
+                isLoading = state.isLoading,
+                error = state.error
+            )
             if (!state.isLoading && state.error == null) {
                 if (state.items.isEmpty()) {
                     Text(text = "No room types")
@@ -164,7 +138,7 @@ fun RoomTypesScreen(
                                 }
                             }
                         }
-                        Spacer(modifier = Modifier.height(12.dp))
+                        androidx.compose.foundation.layout.Spacer(modifier = Modifier.height(12.dp))
                     }
                 }
             }
diff --git a/app/src/main/java/com/android/trisolarispms/ui/settings/PropertySettingsScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/settings/PropertySettingsScreen.kt
index d2d5385..ffd94ed 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/settings/PropertySettingsScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/settings/PropertySettingsScreen.kt
@@ -11,22 +11,15 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.Button
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ExposedDropdownMenuBox
 import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.DropdownMenuItem
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
@@ -38,6 +31,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
 import com.android.trisolarispms.data.api.model.CancellationPenaltyMode
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 
 @Composable
 @OptIn(ExperimentalMaterial3Api::class)
@@ -58,18 +52,9 @@ fun PropertySettingsScreen(
         }
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Settings") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Settings",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier
diff --git a/app/src/main/java/com/android/trisolarispms/ui/users/PropertyAccessCodeScreen.kt b/app/src/main/java/com/android/trisolarispms/ui/users/PropertyAccessCodeScreen.kt
index 51b2c98..507a2b2 100644
--- a/app/src/main/java/com/android/trisolarispms/ui/users/PropertyAccessCodeScreen.kt
+++ b/app/src/main/java/com/android/trisolarispms/ui/users/PropertyAccessCodeScreen.kt
@@ -10,20 +10,12 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.automirrored.filled.ArrowBack
 import androidx.compose.material3.Button
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.CircularProgressIndicator
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBar
-import androidx.compose.material3.TopAppBarDefaults
 import androidx.compose.material3.Checkbox
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.platform.LocalClipboardManager
@@ -37,11 +29,11 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.viewmodel.compose.viewModel
+import com.android.trisolarispms.ui.common.BackTopBarScaffold
 import java.time.OffsetDateTime
 import java.time.format.DateTimeFormatter
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun PropertyAccessCodeScreen(
     propertyId: String,
     allowedRoles: List<String>,
@@ -60,18 +52,9 @@ fun PropertyAccessCodeScreen(
         viewModel.loadPropertyCode(propertyId)
     }
 
-    Scaffold(
-        topBar = {
-            TopAppBar(
-                title = { Text("Generate Access Code") },
-                navigationIcon = {
-                    IconButton(onClick = onBack) {
-                        Icon(Icons.AutoMirrored.Default.ArrowBack, contentDescription = "Back")
-                    }
-                },
-                colors = TopAppBarDefaults.topAppBarColors()
-            )
-        }
+    BackTopBarScaffold(
+        title = "Generate Access Code",
+        onBack = onBack
     ) { padding ->
         Column(
             modifier = Modifier