diff --git a/packages/app_ui/lib/app_ui.dart b/packages/app_ui/lib/app_ui.dart
index 339b59d4..6454dfbd 100644
--- a/packages/app_ui/lib/app_ui.dart
+++ b/packages/app_ui/lib/app_ui.dart
@@ -1 +1,3 @@
 library app_ui;
+
+export 'src/dialog/dialog.dart';
diff --git a/packages/app_ui/lib/src/dialog/dialog.dart b/packages/app_ui/lib/src/dialog/dialog.dart
new file mode 100644
index 00000000..e8c89e99
--- /dev/null
+++ b/packages/app_ui/lib/src/dialog/dialog.dart
@@ -0,0 +1 @@
+export 'dialog_decoration.dart';
diff --git a/packages/app_ui/lib/src/dialog/dialog_decoration.dart b/packages/app_ui/lib/src/dialog/dialog_decoration.dart
new file mode 100644
index 00000000..fec49993
--- /dev/null
+++ b/packages/app_ui/lib/src/dialog/dialog_decoration.dart
@@ -0,0 +1,73 @@
+import 'package:app_ui/gen/gen.dart';
+import 'package:flutter/material.dart';
+
+/// {@template dialog_background}
+/// A card with image background.
+///
+/// Requires the header [Widget] and body [Widget], which are displayed on the
+/// card.
+/// {@endtemplate}
+class DialogDecoration extends StatelessWidget {
+  /// {@macro dialog_background}
+  const DialogDecoration({
+    Key? key,
+    required Widget header,
+    required Widget body,
+  })  : _header = header,
+        _body = body,
+        super(key: key);
+
+  final Widget _header;
+  final Widget _body;
+
+  @override
+  Widget build(BuildContext context) {
+    const radius = BorderRadius.all(Radius.circular(12));
+    const boardWidth = 5.0;
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final gameWidgetWidth = constraints.maxHeight * 9 / 16;
+
+        return Center(
+          child: SizedBox(
+            height: gameWidgetWidth,
+            width: gameWidgetWidth,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                borderRadius: radius,
+                border: Border.all(
+                  color: Colors.white,
+                  width: boardWidth,
+                ),
+                image: DecorationImage(
+                  fit: BoxFit.cover,
+                  image: AssetImage(
+                    Assets.images.dialog.background.keyName,
+                  ),
+                ),
+              ),
+              child: Padding(
+                padding: const EdgeInsets.all(boardWidth - 1),
+                child: ClipRRect(
+                  borderRadius: radius,
+                  child: Column(
+                    children: [
+                      Expanded(
+                        child: Center(child: _header),
+                      ),
+                      Expanded(
+                        flex: 4,
+                        child: _body,
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/packages/app_ui/test/src/dialog/dialog_decoration_test.dart b/packages/app_ui/test/src/dialog/dialog_decoration_test.dart
new file mode 100644
index 00000000..983ceb0a
--- /dev/null
+++ b/packages/app_ui/test/src/dialog/dialog_decoration_test.dart
@@ -0,0 +1,26 @@
+// ignore_for_file: prefer_const_constructors
+
+import 'package:app_ui/app_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  group('DialogDecoration', () {
+    testWidgets('renders header and body', (tester) async {
+      const headerText = 'header';
+      const bodyText = 'body';
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: DialogDecoration(
+            header: Text(headerText),
+            body: Text(bodyText),
+          ),
+        ),
+      );
+
+      expect(find.text(headerText), findsOneWidget);
+      expect(find.text(bodyText), findsOneWidget);
+    });
+  });
+}