diff --git a/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/error/ErrorColumn.kt b/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/error/ErrorColumn.kt
index 452f3477..52dc2aef 100644
--- a/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/error/ErrorColumn.kt
+++ b/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/error/ErrorColumn.kt
@@ -8,6 +8,8 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Face
 import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -16,22 +18,25 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.yasinkacmaz.jetflix.R
+import com.yasinkacmaz.jetflix.ui.theme.spacing
 
 @Composable
 fun ErrorColumn(message: String, modifier: Modifier = Modifier) {
-    Column(
-        modifier = modifier.fillMaxSize(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally,
-    ) {
-        Text(message)
-        Icon(
-            imageVector = Icons.Filled.Face,
-            contentDescription = stringResource(id = R.string.error_icon_content_description),
-            modifier = Modifier
-                .size(40.dp)
-                .padding(top = 16.dp),
-        )
+    Surface {
+        Column(
+            modifier = modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(message)
+            Icon(
+                imageVector = Icons.Filled.Face,
+                contentDescription = stringResource(id = R.string.error_icon_content_description),
+                modifier = Modifier
+                    .size(40.dp)
+                    .padding(top = MaterialTheme.spacing.l),
+            )
+        }
     }
 }
 
diff --git a/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/loading/LoadingColumn.kt b/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/loading/LoadingColumn.kt
index 126a71b9..388c23ba 100644
--- a/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/loading/LoadingColumn.kt
+++ b/app/src/main/kotlin/com/yasinkacmaz/jetflix/ui/common/loading/LoadingColumn.kt
@@ -6,22 +6,31 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.yasinkacmaz.jetflix.ui.theme.spacing
 
 @Composable
 fun LoadingColumn(title: String, modifier: Modifier = Modifier) {
-    Column(
-        modifier = modifier.fillMaxSize(),
-        verticalArrangement = Arrangement.Center,
-        horizontalAlignment = Alignment.CenterHorizontally,
-    ) {
-        Text(title)
-        CircularProgressIndicator(modifier = Modifier.size(40.dp).padding(top = 16.dp))
+    Surface {
+        Column(
+            modifier = modifier.fillMaxSize(),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            Text(title)
+            CircularProgressIndicator(
+                modifier = Modifier
+                    .size(40.dp)
+                    .padding(top = MaterialTheme.spacing.l),
+            )
+        }
     }
 }