diff --git a/components/email/ComposeEmail.tsx b/components/email/ComposeEmail.tsx
index 5f3d607f..3ddeec61 100644
--- a/components/email/ComposeEmail.tsx
+++ b/components/email/ComposeEmail.tsx
@@ -103,9 +103,6 @@ export default function ComposeEmail({
     try {
       setSending(true); // Use sending state to show loading
       
-      // Use the same decoding approach as Panel 3
-      const decoded = await decodeEmail(initialEmail.content);
-      
       // Format subject with Fwd: prefix if needed
       const cleanSubject = initialEmail.subject.replace(/^(Fwd|FW|Forward):\s*/i, '').trim();
       const formattedSubject = initialEmail.subject.match(/^(Fwd|FW|Forward):/i) 
@@ -117,36 +114,40 @@ export default function ComposeEmail({
       // Format date for the forwarded message header
       const formatDate = (date: Date | null): string => {
         if (!date) return '';
-        
-        return date.toLocaleString('en-US', {
-          weekday: 'short',
-          year: 'numeric', 
-          month: 'short', 
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        });
+        try {
+          return date.toLocaleString('en-US', {
+            weekday: 'short',
+            year: 'numeric', 
+            month: 'short', 
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+          });
+        } catch (e) {
+          return date.toString();
+        }
       };
       
-      // Create the same forwarded message format as Panel 3
-      const formattedContent = `
+      // Create a simple forwarded message header but preserve the full HTML content
+      const headerContent = `
 <div>
 <br>
 ---------- Forwarded message ---------<br>
 <br>
-From: ${decoded.from || ''}<br>
+From: ${initialEmail.from || ''}<br>
 <br>
-Date: ${formatDate(decoded.date)}<br>
+Date: ${formatDate(initialEmail.date)}<br>
 <br>
-Subject: ${decoded.subject || ''}<br>
+Subject: ${initialEmail.subject || ''}<br>
 <br>
-To: ${decoded.to || ''}<br>
+To: ${initialEmail.to || ''}<br>
 <br>
-${decoded.html || `<pre>${decoded.text || ''}</pre>`}
 </div>
       `;
       
-      setBody(formattedContent);
+      // Instead of trying to parse and clean the HTML, directly use the raw content
+      // This preserves all original formatting, CSS, and HTML structure
+      setBody(headerContent + initialEmail.content);
     } catch (error) {
       console.error('Error initializing forwarded email:', error);
       setBody('<div>Error loading forwarded content</div>');
diff --git a/components/email/EmailLayout.tsx b/components/email/EmailLayout.tsx
index e7eb5349..2b4a71bb 100644
--- a/components/email/EmailLayout.tsx
+++ b/components/email/EmailLayout.tsx
@@ -12,6 +12,9 @@ import { ScrollArea } from '@/components/ui/scroll-area';
 import { Badge } from '@/components/ui/badge';
 import EmailPanel from './EmailPanel';
 import { EmailMessage } from '@/lib/services/email-service';
+import { useToast } from "@/hooks/use-toast";
+import { sendEmail } from '@/lib/services/email-service';
+import { useSession } from "next-auth/react";
 
 interface EmailLayoutProps {
   className?: string;
@@ -32,6 +35,12 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
   const [page, setPage] = useState<number>(1);
   const [hasMore, setHasMore] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const [isSending, setIsSending] = useState<boolean>(false);
+  const [showComposeModal, setShowComposeModal] = useState<boolean>(false);
+  
+  // Get toast and session
+  const { toast } = useToast();
+  const { data: session } = useSession();
   
   // Load emails on component mount and when folder changes
   useEffect(() => {
@@ -144,29 +153,39 @@ export default function EmailLayout({ className = '' }: EmailLayoutProps) {
     bcc?: string;
     subject: string;
     body: string;
-    attachments?: { name: string; content: string; type: string; }[];
-  }) => {
+    attachments?: Array<{
+      name: string;
+      content: string;
+      type: string;
+    }>;
+  }): Promise<void> => {
+    setIsSending(true);
     try {
-      const response = await fetch('/api/courrier/send', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(emailData),
+      // The sendEmail function requires userId as the first parameter
+      const result = await sendEmail(session?.user?.id as string, emailData);
+      
+      if (result.success) {
+        toast({
+          title: "Success",
+          description: "Email sent successfully"
+        });
+        setShowComposeModal(false);
+      } else {
+        toast({
+          variant: "destructive",
+          title: "Error",
+          description: `Failed to send email: ${result.error || 'Unknown error'}`
+        });
+      }
+    } catch (error) {
+      console.error('Error sending email:', error);
+      toast({
+        variant: "destructive",
+        title: "Error",
+        description: "Failed to send email"
       });
-      
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || 'Failed to send email');
-      }
-      
-      // If email was sent successfully and we're in the Sent folder, refresh
-      if (currentFolder === 'Sent') {
-        loadEmails(true);
-      }
-    } catch (err) {
-      console.error('Error sending email:', err);
-      throw err;
+    } finally {
+      setIsSending(false);
     }
   };