diff --git a/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Action.dart b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Action.dart
new file mode 100644
index 00000000..4bfc0d3e
--- /dev/null
+++ b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Action.dart
@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+class MIHAction extends StatefulWidget {
+  final void Function()? onTap;
+  final double iconSize;
+  final IconData icon;
+  const MIHAction({
+    super.key,
+    required this.icon,
+    required this.iconSize,
+    required this.onTap,
+  });
+
+  @override
+  State<MIHAction> createState() => _MIHActionState();
+}
+
+class _MIHActionState extends State<MIHAction> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      top: 5,
+      left: 5,
+      width: 50,
+      height: 50,
+      child: Builder(
+        builder: (context) => IconButton(
+          padding: const EdgeInsets.all(0),
+          onPressed: widget.onTap,
+          icon: Icon(
+            widget.icon,
+            size: widget.iconSize,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Body.dart b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Body.dart
new file mode 100644
index 00000000..77f9e1d4
--- /dev/null
+++ b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Body.dart
@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:patient_manager/main.dart';
+
+class MIHBody extends StatefulWidget {
+  final bool borderOn;
+  final List<Widget> bodyItems;
+  const MIHBody({
+    super.key,
+    required this.borderOn,
+    required this.bodyItems,
+  });
+
+  @override
+  State<MIHBody> createState() => _MIHBodyState();
+}
+
+class _MIHBodyState extends State<MIHBody> {
+  double paddingSize = 10;
+
+  Decoration? getBoader() {
+    if (widget.borderOn) {
+      return BoxDecoration(
+        color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        borderRadius: BorderRadius.circular(25.0),
+        border: Border.all(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 3.0),
+      );
+    } else {
+      return null;
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Padding(
+        padding: EdgeInsets.only(
+          left: paddingSize,
+          right: paddingSize,
+          bottom: paddingSize,
+        ),
+        child: Container(
+          //height: height - 100,
+          decoration: getBoader(),
+          child: Column(
+            children: widget.bodyItems,
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Header.dart b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Header.dart
new file mode 100644
index 00000000..7559d63d
--- /dev/null
+++ b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_Header.dart
@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class MIHHeader extends StatefulWidget {
+  final MainAxisAlignment headerAlignment;
+  final List<Widget> headerItems;
+  const MIHHeader({
+    super.key,
+    required this.headerAlignment,
+    required this.headerItems,
+  });
+
+  @override
+  State<MIHHeader> createState() => _MIHHeaderState();
+}
+
+class _MIHHeaderState extends State<MIHHeader> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 60,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: widget.headerAlignment,
+        children: widget.headerItems,
+      ),
+    );
+  }
+}
diff --git a/Frontend/patient_manager/lib/components/MIH_Layout/MIH_LayoutBuilder.dart b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_LayoutBuilder.dart
new file mode 100644
index 00000000..4f11f798
--- /dev/null
+++ b/Frontend/patient_manager/lib/components/MIH_Layout/MIH_LayoutBuilder.dart
@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_Action.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_Body.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_Header.dart';
+
+class MIHLayoutBuilder extends StatefulWidget {
+  final MIHAction actionButton;
+  final MIHHeader header;
+  final MIHBody body;
+  const MIHLayoutBuilder({
+    super.key,
+    required this.actionButton,
+    required this.header,
+    required this.body,
+  });
+
+  @override
+  State<MIHLayoutBuilder> createState() => _MIHLayoutBuilderState();
+}
+
+class _MIHLayoutBuilderState extends State<MIHLayoutBuilder> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Size screenSize = MediaQuery.sizeOf(context);
+    return Scaffold(
+      body: SizedBox(
+        width: screenSize.width,
+        height: screenSize.height,
+        child: Stack(
+          children: [
+            widget.actionButton,
+            Column(
+              children: [widget.header, widget.body],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}