diff --git a/admin/src/Messages/MessageAdd.js b/admin/src/Messages/MessageAdd.js
index 883c2fee..26158fb0 100644
--- a/admin/src/Messages/MessageAdd.js
+++ b/admin/src/Messages/MessageAdd.js
@@ -1,16 +1,19 @@
-import React, { useState } from "react";
-import { useHistory } from "react-router-dom";
+import React, { useMemo } from "react";
+import { withRouter } from "react-router";
 import MessageForm from "../Components/MessageForm";
 import Message from "../Models/Message";
 import { notifySuccess } from "../message";
 
-export default function MessageAdd() {
-    const [message] = useState(new Message());
-    const navigate = useHistory();
+function MessageAdd(props) {
+    const { router } = props;
 
+    // Create a new Message instance
+    const message = useMemo(() => new Message(), []);
+
+    // Handler for saving the message
     const onSend = () => {
         message.save().then(() => {
-            navigate("/messages");
+            router.push("/messages");
             notifySuccess("Ditt meddelande har skickats");
         });
     };
@@ -26,3 +29,5 @@ export default function MessageAdd() {
         </div>
     );
 }
+
+export default withRouter(MessageAdd);
diff --git a/admin/src/Messages/MessageShow.js b/admin/src/Messages/MessageShow.js
index 267cf829..4f69eeed 100644
--- a/admin/src/Messages/MessageShow.js
+++ b/admin/src/Messages/MessageShow.js
@@ -1,22 +1,58 @@
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import React, { useEffect, useMemo, useState } from "react";
+import { withRouter } from "react-router";
 import DateTimeShow from "../Components/DateTimeShow";
 import Message from "../Models/Message";
 
-export default function MessageShow() {
-    const { id } = useParams();
-    const [message, setMessage] = useState({});
+function MessageShow(props) {
+    const { id } = props.match.params;
+    const messageInstance = useMemo(() => Message.get(id), [id]);
+
+    const [message, setMessage] = useState(() => {
+        // Initialize with extracted attributes
+        return {
+            body: "",
+            created_at: null,
+            id: null,
+            recipient: "",
+            recipient_id: null,
+            recipients: [],
+            sent_at: null,
+            status: "",
+            subject: "",
+            template: "",
+            updated_at: null,
+        };
+    });
 
     useEffect(() => {
-        const messageInstance = Message.get(id);
-        const unsubscribe = messageInstance.subscribe(() => {
-            setMessage(messageInstance);
-        });
+        // Extract message attributes from the instance and set state
+        const updateMessage = () => {
+            setMessage({
+                body: messageInstance.body,
+                created_at: messageInstance.created_at,
+                id: messageInstance.id,
+                recipient: messageInstance.recipient,
+                recipient_id: messageInstance.recipient_id,
+                recipients: messageInstance.recipients,
+                sent_at: messageInstance.sent_at,
+                status: messageInstance.status,
+                subject: messageInstance.subject,
+                template: messageInstance.template,
+                updated_at: messageInstance.updated_at,
+            });
+        };
 
+        // Call the function once to initialize state
+        updateMessage();
+
+        // Subscribe to updates
+        const unsubscribe = messageInstance.subscribe(updateMessage);
+
+        // Cleanup subscription on unmount
         return () => {
             unsubscribe();
         };
-    }, [id]);
+    }, [messageInstance]);
 
     return (
         <div className="uk-margin-top">
@@ -27,7 +63,9 @@ export default function MessageShow() {
                         <tr>
                             <th align="left">Created</th>
                             <td>
-                                <DateTimeShow date={message.created_at} />
+                                <DateTimeShow
+                                    date={message.created_at || null}
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -37,16 +75,16 @@ export default function MessageShow() {
                         <tr>
                             <th align="left">Sent</th>
                             <td>
-                                <DateTimeShow date={message.sent_at} />
+                                <DateTimeShow date={message.sent_at || null} />
                             </td>
                         </tr>
                         <tr>
                             <th align="left">Recipient</th>
-                            <td>{message.recipient}</td>
+                            <td>{message.recipient || "N/A"}</td>
                         </tr>
                         <tr>
                             <th align="left">Template Used</th>
-                            <td>{message.template}</td>
+                            <td>{message.template || "N/A"}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -55,12 +93,14 @@ export default function MessageShow() {
             <div className="uk-panel uk-panel-box uk-margin-bottom">
                 <h3
                     className="uk-panel-title"
-                    dangerouslySetInnerHTML={{ __html: message.subject }}
+                    dangerouslySetInnerHTML={{ __html: message.subject || "" }}
                 />
             </div>
             <div className="uk-panel uk-panel-box uk-margin-bottom">
-                <div dangerouslySetInnerHTML={{ __html: message.body }} />
+                <div dangerouslySetInnerHTML={{ __html: message.body || "" }} />
             </div>
         </div>
     );
 }
+
+export default withRouter(MessageShow);