diff --git a/lib/core/config/widget/base_appbar.dart b/lib/core/config/widget/base_appbar.dart
new file mode 100644
index 0000000..7bed75e
--- /dev/null
+++ b/lib/core/config/widget/base_appbar.dart
@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:jusicool_design_system/jusicool_design_system.dart';
+
+class BaseAppbar extends StatelessWidget implements PreferredSizeWidget {
+  const BaseAppbar({
+    super.key,
+    this.title = '',
+    this.centerTitle = true,
+    this.textStyle,
+    this.backgroundColor,
+    this.actionWidgets,
+    this.backButton = false,
+  });
+
+  final String title;
+  final bool centerTitle;
+  final TextStyle? textStyle;
+  final Color? backgroundColor;
+  final bool backButton;
+  final List<Widget>? actionWidgets;
+  final double elevation = 0.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      title: Text(title),
+      centerTitle: centerTitle,
+      backgroundColor: backgroundColor ?? JusicoolColor.white,
+      elevation: elevation,
+      scrolledUnderElevation: 0.0,
+      titleTextStyle: textStyle ?? JusicoolTypography.subTitle,
+      leading:
+          backButton
+              ? IconButton(
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+                icon: JusicoolIcon.backArrow(
+                  width: 24.w,
+                  height: 24.h,
+                  color: JusicoolColor.black,
+                ),
+              )
+              : null,
+      actionsPadding: EdgeInsets.only(right: 24),
+      actions: actionWidgets ?? [],
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(57.h);
+}
diff --git a/lib/core/config/widget/base_scaffold.dart b/lib/core/config/widget/base_scaffold.dart
new file mode 100644
index 0000000..e2cb585
--- /dev/null
+++ b/lib/core/config/widget/base_scaffold.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+abstract class BaseScaffold extends ConsumerWidget {
+  const BaseScaffold({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return Scaffold(
+      backgroundColor: backgroundColor,
+      resizeToAvoidBottomInset: resizeToAvoidBottomInset,
+      appBar: buildAppBar(context, ref),
+      body:
+          useSafeArea
+              ? SafeArea(
+                top: setTopSafeArea,
+                bottom: setBottomSafeArea,
+                child: buildBody(context, ref),
+              )
+              : buildBody(context, ref),
+      bottomNavigationBar: buildBottomNavigationBar(context, ref),
+    );
+  }
+
+  @protected
+  Color get backgroundColor => Colors.white;
+
+  @protected
+  bool get resizeToAvoidBottomInset => true;
+
+  @protected
+  bool get useSafeArea => true;
+
+  @protected
+  bool get setBottomSafeArea => true;
+
+  @protected
+  bool get setTopSafeArea => true;
+
+  @protected
+  PreferredSizeWidget? buildAppBar(BuildContext context, WidgetRef ref) => null;
+
+  @protected
+  Widget buildBody(BuildContext context, WidgetRef ref);
+
+  @protected
+  Widget? buildBottomNavigationBar(BuildContext context, WidgetRef ref) => null;
+}