diff --git a/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart b/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart
index 2f89a2311e..7120787037 100644
--- a/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart
+++ b/app_flowy/lib/workspace/presentation/stack_page/doc/doc_stack_page.dart
@@ -3,6 +3,7 @@ import 'package:app_flowy/workspace/application/doc/share_bloc.dart';
 import 'package:app_flowy/workspace/domain/i_view.dart';
 import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart';
 import 'package:app_flowy/workspace/domain/view_ext.dart';
+import 'package:app_flowy/workspace/presentation/widgets/dialogs.dart';
 import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -150,18 +151,7 @@ class DocShareButton extends StatelessWidget {
   }
 
   void showWorkInProgressDialog(BuildContext context) {
-    showDialog(
-      context: context,
-      builder: (_) {
-        return AlertDialog(
-          title: const Text('Select Color'),
-          backgroundColor: Theme.of(context).canvasColor,
-          content: SingleChildScrollView(
-            child: Text("WIP"),
-          ),
-        );
-      },
-    );
+    const FlowyAlertDialog(title: "Work in progress").show(context);
   }
 }
 
diff --git a/app_flowy/lib/workspace/presentation/widgets/dialogs.dart b/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
index 06f1682f31..4a5b740184 100644
--- a/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
+++ b/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
@@ -77,6 +77,52 @@ class _CreateTextFieldDialog extends State<TextFieldDialog> {
   }
 }
 
+class FlowyAlertDialog extends StatefulWidget {
+  final String title;
+  final void Function()? cancel;
+  final void Function()? confirm;
+
+  const FlowyAlertDialog({
+    required this.title,
+    this.confirm,
+    this.cancel,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<FlowyAlertDialog> createState() => _CreateFlowyAlertDialog();
+}
+
+class _CreateFlowyAlertDialog extends State<FlowyAlertDialog> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
+    return StyledDialog(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          ...[
+            FlowyText.medium(widget.title, color: theme.shader4),
+          ],
+          if (widget.confirm != null) ...[
+            const VSpace(20),
+            OkCancelButton(
+              onOkPressed: widget.confirm!,
+              onCancelPressed: widget.confirm,
+            )
+          ]
+        ],
+      ),
+    );
+  }
+}
+
 class OkCancelDialog extends StatelessWidget {
   final VoidCallback? onOkPressed;
   final VoidCallback? onCancelPressed;