diff --git a/lib/Compose.dart b/lib/Compose.dart
index 27081ee..43076f9 100644
--- a/lib/Compose.dart
+++ b/lib/Compose.dart
@@ -1,3 +1,5 @@
+import 'package:crab_ui/api_service.dart';
+import 'package:crab_ui/structs.dart';
 import 'package:flutter/material.dart';
 import 'package:super_editor/super_editor.dart';
 import 'package:super_editor_markdown/super_editor_markdown.dart';
@@ -6,12 +8,14 @@ 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);
+  GetThreadResponse? emailDraftID;
+  ComposeEmail(
+      {Key? key,
+      required this.onMinimize,
+      required this.onClose,
+      required this.onSendMessage,
+      this.emailDraftID})
+      : super(key: key);
 
   @override
   _ComposeEmailState createState() => _ComposeEmailState();
@@ -23,20 +27,38 @@ class _ComposeEmailState extends State<ComposeEmail> {
   late final MutableDocument _document;
   late final MutableDocumentComposer _composer;
   TextEditingController _emailRecipientController = TextEditingController();
+  TextEditingController _emailSubjectController = TextEditingController();
+  List<String>? contentOfDraft;
 
   @override
   void initState() {
     super.initState();
+    _loadDraftContent();
+  }
 
-    _document = MutableDocument(nodes: [
-      ParagraphNode(
-        id: Editor.createNodeId(),
-        text: AttributedText("hello world!"),
-      )
-    ]);
-    _composer = MutableDocumentComposer();
-    _editor =
-        createDefaultDocumentEditor(document: _document!, composer: _composer!);
+  void _loadDraftContent() async {
+    if (widget.emailDraftID != null) {
+      String? drafted = widget.emailDraftID?.messages.last;
+      if (drafted != null) {
+        contentOfDraft =
+            await ApiService().fetchMarkdownContent([drafted!], "Drafts");
+        setState(() {
+          _document = MutableDocument(nodes: [
+            ParagraphNode(
+              id: Editor.createNodeId(),
+              text: AttributedText(contentOfDraft?[0] ??
+                  ""), // NOW THIS SHOULD BE WTV ITS IN DRAFTS
+            )
+          ]);
+          _composer = MutableDocumentComposer();
+          _editor = createDefaultDocumentEditor(
+              document: _document, composer: _composer);
+          _emailRecipientController.text =
+              widget.emailDraftID!.to[0].address;
+          _emailSubjectController.text = widget.emailDraftID!.subject;
+        });
+      }
+    }
   }
 
   @override
@@ -70,7 +92,7 @@ class _ComposeEmailState extends State<ComposeEmail> {
                       icon: Icon(Icons.minimize, color: Colors.grey[600])),
                   IconButton(
                       onPressed: () {
-                        //TODO: implement that maximizing
+                        //TODO: implement maximizing the window or widget
                       },
                       icon: Icon(Icons.maximize, color: Colors.grey[600])),
                   IconButton(
@@ -81,9 +103,9 @@ class _ComposeEmailState extends State<ComposeEmail> {
                 ],
               ),
               Container(
-                // TODO: WHEN NOT CLICKED ITS ONLY A TEXTFIELD WITH A HINT, AND THEN WHEN CLICKED THIS 
-                width: 500.0,
-                height: 40.0,
+                // 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:")),
@@ -100,25 +122,95 @@ class _ComposeEmailState extends State<ComposeEmail> {
                   ],
                 ),
               ),
+              SizedBox(
+                height: 4,
+              ),
+              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: [
+                    Expanded(
+                      child: TextField(
+                        controller: _emailSubjectController,
+                        decoration: InputDecoration(
+                          hintText: "Subject",
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+              ),
               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,
+                //here the widget goes
+                child: SuperEditor(
+                  //make this its own
+                  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)
+                ),
+              ),
+              Container(
+                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  children: [
+                    ElevatedButton(
+                      onPressed: () {
+                        print('sent');
+                        String markdown =
+                            serializeDocumentToMarkdown(_editor.document);
+
+                        print(_emailRecipientController.text);
+                        print(_emailSubjectController.text);
+                        print(markdown);
+                        ApiService().sendEmail(_emailRecipientController.text,
+                            _emailSubjectController.text, markdown);
+                      },
+                      style: ElevatedButton.styleFrom(
+                          shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(30)),
+                          elevation: 4,
+                          foregroundColor: Colors.white,
+                          backgroundColor: Colors.blueAccent),
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Text(
+                            'Send',
+                            style: TextStyle(fontWeight: FontWeight.bold),
                           ),
-                        };
-                      }),],
-                      inlineTextStyler: defaultInlineTextStyler)
-                  ),
+                          // const SizedBox(
+                          //   width: 8,
+                          // ),
+                          // Container(
+                          //     height: 30, width: 1.0, color: Colors.white),
+                          // const SizedBox(
+                          //   width: 8,
+                          // ),
+                          // const Icon(
+                          //   Icons.arrow_drop_down,
+                          //   size: 24,
+                          // )
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
               )
             ])),
       ),
@@ -131,6 +223,7 @@ class OverlayService {
   factory OverlayService() => _instance;
   OverlayService._internal();
   OverlayEntry? _overlayEntry;
+  GetThreadResponse? draftID;
 
   void showPersistentWidget(BuildContext context) {
     if (_overlayEntry != null) {
@@ -139,16 +232,16 @@ class OverlayService {
     }
     _overlayEntry = OverlayEntry(
         builder: (context) => ComposeEmail(
-              onClose: () {
-                removeComposeWidget();
-              },
-              onMinimize: (String content) {
-                minimizeComposeWidget(content);
-              },
-              onSendMessage: (message) {
-                print('msg senf form overlay $message');
-              },
-            ));
+            onClose: () {
+              removeComposeWidget();
+            },
+            onMinimize: (String content) {
+              minimizeComposeWidget(content);
+            },
+            onSendMessage: (message) {
+              print('msg senf form overlay $message');
+            },
+            emailDraftID: draftID));
     Navigator.of(context).overlay?.insert(_overlayEntry!);
     print("inserted into tree");
   }