diff --git a/apps/zui/src/css/_layouts.scss b/apps/zui/src/css/_layouts.scss
index e54451a0f5..7d83ba628d 100644
--- a/apps/zui/src/css/_layouts.scss
+++ b/apps/zui/src/css/_layouts.scss
@@ -118,3 +118,11 @@
 .box-1 {
     padding: var(--s1);
 }
+
+.center {
+    margin-inline: auto;
+}
+
+.flex {
+    display: flex;
+}
diff --git a/apps/zui/src/css/_utilities.scss b/apps/zui/src/css/_utilities.scss
index ad321d5110..757626960c 100644
--- a/apps/zui/src/css/_utilities.scss
+++ b/apps/zui/src/css/_utilities.scss
@@ -9,3 +9,47 @@
 .justify\:between {
     justify-content: space-between;
 }
+
+.align\:center {
+    align-items: center;
+}
+
+.width\:viewport {
+    width: 100vw;
+}
+
+.height\:viewport {
+    height: 100vh;
+}
+
+.z\:1 {
+    z-index: 1;
+}
+
+.z\:2 {
+    z-index: 2;
+}
+
+.bg\:bg {
+    background-color: var(--bg-color);
+}
+
+.bg\:backdrop {
+    background: rgba(0, 0, 0, var(--backdrop-transparency, 0.3));
+}
+
+.bg\:transparent {
+    background: transparent;
+}
+
+.width\:fit {
+    inline-size: fit-content;
+}
+
+.max-height\:viewport {
+    max-block-size: 100vh;
+}
+
+.scroll\:y {
+    overflow-y: auto;
+}