diff --git a/packages/wyatt_ui_layout/README.md b/packages/wyatt_ui_layout/README.md
index 7f0c4c68..2cbb1aab 100644
--- a/packages/wyatt_ui_layout/README.md
+++ b/packages/wyatt_ui_layout/README.md
@@ -32,3 +32,4 @@ Wyatt Ui Layout for Flutter
 - Layouts :
   - App Bar Layout
   - Bottom Navigation Bar Layout
+  - Frame Layout (wrapp both appbar & bottom bar)
diff --git a/packages/wyatt_ui_layout/lib/src/presentation/layouts/frame_layout.dart b/packages/wyatt_ui_layout/lib/src/presentation/layouts/frame_layout.dart
new file mode 100644
index 00000000..ebe8f13b
--- /dev/null
+++ b/packages/wyatt_ui_layout/lib/src/presentation/layouts/frame_layout.dart
@@ -0,0 +1,41 @@
+// Copyright (C) 2022 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_layout/src/presentation/layouts/layout.dart';
+
+class FrameLayout extends Layout {
+  final String title;
+  final Widget body;
+  final int currentIndex;
+
+  const FrameLayout({
+    required this.title,
+    required this.body,
+    required this.currentIndex,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: context.components.appBar.configure(title: title),
+        body: body,
+        bottomNavigationBar: context.components.bottomNavigationBar.configure(
+          currentIndex: currentIndex,
+        ),
+      );
+}
diff --git a/packages/wyatt_ui_layout/lib/src/presentation/presentation.dart b/packages/wyatt_ui_layout/lib/src/presentation/presentation.dart
index b9ee6729..a1bff66c 100644
--- a/packages/wyatt_ui_layout/lib/src/presentation/presentation.dart
+++ b/packages/wyatt_ui_layout/lib/src/presentation/presentation.dart
@@ -1,2 +1,3 @@
 export 'layouts/app_bar_layout.dart';
 export 'layouts/bottom_navigation_bar_layout.dart';
+export 'layouts/frame_layout.dart';