diff --git a/lib/Compose.dart b/lib/Compose.dart
new file mode 100644
index 0000000..27081ee
--- /dev/null
+++ b/lib/Compose.dart
@@ -0,0 +1,165 @@
+import 'package:flutter/material.dart';
+import 'package:super_editor/super_editor.dart';
+import 'package:super_editor_markdown/super_editor_markdown.dart';
+
+class ComposeEmail extends StatefulWidget {
+  final VoidCallback onClose;
+  final Function(String) onMinimize;
+  final Function(String) onSendMessage;
+  const ComposeEmail({
+    Key? key,
+    required this.onMinimize,
+    required this.onClose,
+    required this.onSendMessage,
+  }) : super(key: key);
+
+  @override
+  _ComposeEmailState createState() => _ComposeEmailState();
+}
+
+class _ComposeEmailState extends State<ComposeEmail> {
+  // if one were to alter a mutableDocument, one should only alter the document through EditRequest to the Editor
+  late final Editor _editor;
+  late final MutableDocument _document;
+  late final MutableDocumentComposer _composer;
+  TextEditingController _emailRecipientController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+
+    _document = MutableDocument(nodes: [
+      ParagraphNode(
+        id: Editor.createNodeId(),
+        text: AttributedText("hello world!"),
+      )
+    ]);
+    _composer = MutableDocumentComposer();
+    _editor =
+        createDefaultDocumentEditor(document: _document!, composer: _composer!);
+  }
+
+  @override
+  void dispose() {
+    _editor.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Positioned(
+      bottom: 10.0,
+      right: 10.0,
+      child: Material(
+        elevation: 8.0,
+        child: Container(
+            width: 600.0,
+            height: 616.0,
+            decoration: BoxDecoration(
+              color: Colors.white,
+            ),
+            child: Column(children: [
+              AppBar(
+                title: const Text("new message"),
+                actions: [
+                  IconButton(
+                      onPressed: () {
+                        //TODO: implement minimize, and submit email to drafts
+                        widget.onClose();
+                      },
+                      icon: Icon(Icons.minimize, color: Colors.grey[600])),
+                  IconButton(
+                      onPressed: () {
+                        //TODO: implement that maximizing
+                      },
+                      icon: Icon(Icons.maximize, color: Colors.grey[600])),
+                  IconButton(
+                      onPressed: () {
+                        widget.onClose();
+                      },
+                      icon: Icon(Icons.close, color: Colors.grey[600])),
+                ],
+              ),
+              Container(
+                // TODO: WHEN NOT CLICKED ITS ONLY A TEXTFIELD WITH A HINT, AND THEN WHEN CLICKED THIS 
+                width: 500.0,
+                height: 40.0,
+                child: Row(
+                  children: [
+                    TextButton(onPressed: () {}, child: Text("To:")),
+                    Expanded(
+                      child: TextField(
+                        controller: _emailRecipientController,
+                      ),
+                    ),
+                    TextButton(onPressed: () {}, child: Text("Cc")),
+                    SizedBox(
+                      width: 4.0,
+                    ),
+                    TextButton(onPressed: () {}, child: Text("Bcc")),
+                  ],
+                ),
+              ),
+              Expanded(
+                  //here the widget goes
+                  child: SuperEditor(
+                    editor: _editor!,
+                    plugins: {MarkdownInlineUpstreamSyntaxPlugin()},
+                    stylesheet: Stylesheet(
+                      rules: [StyleRule(BlockSelector.all, (doc, docNode) {
+                        return {
+                          Styles.maxWidth: 640.0,
+                          Styles.padding: const CascadingPadding.symmetric(horizontal: 24),
+                          Styles.textStyle: const TextStyle(
+                            color: Colors.black,
+                            fontSize: 15,
+                            height: 1.4,
+                          ),
+                        };
+                      }),],
+                      inlineTextStyler: defaultInlineTextStyler)
+                  ),
+              )
+            ])),
+      ),
+    );
+  }
+}
+
+class OverlayService {
+  static final OverlayService _instance = OverlayService._internal();
+  factory OverlayService() => _instance;
+  OverlayService._internal();
+  OverlayEntry? _overlayEntry;
+
+  void showPersistentWidget(BuildContext context) {
+    if (_overlayEntry != null) {
+      print("overlay visible");
+      return;
+    }
+    _overlayEntry = OverlayEntry(
+        builder: (context) => ComposeEmail(
+              onClose: () {
+                removeComposeWidget();
+              },
+              onMinimize: (String content) {
+                minimizeComposeWidget(content);
+              },
+              onSendMessage: (message) {
+                print('msg senf form overlay $message');
+              },
+            ));
+    Navigator.of(context).overlay?.insert(_overlayEntry!);
+    print("inserted into tree");
+  }
+
+  void removeComposeWidget() {
+    _overlayEntry?.remove();
+    _overlayEntry = null;
+  }
+
+  String minimizeComposeWidget(String content) {
+    //just hide the overlay but keep its info
+    return '';
+  }
+}