diff --git a/src/index.html b/src/index.html
index a37f193..23fd5d1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,69 +8,121 @@
         body {
             font-family: Arial, sans-serif;
             margin: 20px;
+            background-color: #121212; /* Dark mode background */
+            color: #ffffff; /* Dark mode text color */
         }
-        h1, h2 {
-            color: #333;
+        h1 {
+            color: #ffffff;
         }
-        p {
-            line-height: 1.6;
+        textarea {
+            width: 100%;
+            height: 100px;
+            margin-bottom: 10px;
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-wrap: break-word; /* Break long words */
+            background-color: #2c2c2c; /* Dark mode textarea background */
+            color: #ffffff; /* Dark mode textarea text color */
+            border: 1px solid #444; /* Dark mode textarea border */
         }
-        .section {
-            margin-bottom: 20px;
-        }
-        .section p {
-            margin: 0 0 10px;
-        }
-        .link-btn {
-            display: inline-block;
-            margin: 5px 0;
-            padding: 10px 15px;
+        button {
+            padding: 10px 20px;
             font-size: 16px;
             color: white;
             background-color: #007bff;
-            text-decoration: none;
+            border: none;
             border-radius: 5px;
+            cursor: pointer;
+            margin-right: 10px;
         }
-        .link-btn:hover {
+        button:hover {
             background-color: #0056b3;
         }
+        #messageFields {
+            margin-top: 10px;
+        }
+        .message-field {
+            margin-bottom: 10px;
+        }
+        #output {
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-wrap: break-word; /* Break long words */
+            background: #2c2c2c; /* Dark mode output background */
+            color: #ffffff; /* Dark mode output text color */
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 10px;
+            border: 1px solid #444; /* Dark mode output border */
+        }
+        .error {
+            color: #ff6b6b; /* Dark mode error color */
+        }
+        #hashResult {
+            margin-top: 10px;
+            padding: 10px;
+            background: #e9ecef;
+            border-radius: 5px;
+            color: #000000; /* Light mode text color for hash result */
+        }
+        nav {
+            background-color: #333; /* Dark mode nav background */
+            color: #ffffff; /* Dark mode nav text color */
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        nav a {
+            color: #ffffff; /* Dark mode nav link color */
+            text-decoration: none;
+            margin-right: 10px;
+        }
+        nav a:hover {
+            text-decoration: underline;
+        }
     </style>
 </head>
 <body>
-    <h1>eCash Text Splitter & Reassembler</h1>
-    
-    <div class="section">
-        <h2>How to Use the eCash Text Splitter</h2>
-        <p>This tool helps you split a large eCash payment text into smaller, manageable parts that can be sent over Meshtastic. Each part will include a prefix indicating its sequence and a hash for integrity verification.</p>
-        <p>To use the text splitter:</p>
-        <ol>
-            <li>Go to the <a class="link-btn" href="splitter.html">eCash Text Splitter Tool</a>.</li>
-            <li>Paste your eCash payment text into the text area.</li>
-            <li>Click the "Split Text" button. The text will be divided into chunks of up to 150 characters.</li>
-            <li>Each chunk will include a prefix with its sequence number and, for the first chunk, a hash of the entire text.</li>
-            <li>Copy each chunk and send them as separate messages.</li>
-        </ol>
-    </div>
+    <nav>
+        <a href="index.html">Home</a>
+        <a href="splitter.html">Splitter</a>
+        <a href="reassemble.html">Reassembler</a>
+    </nav>
 
-    <div class="section">
-        <h2>How to Reassemble the eCash Payment</h2>
-        <p>To reassemble the split eCash payment text and verify its integrity:</p>
-        <ol>
-            <li>Go to the <a class="link-btn" href="reassemble.html">eCash Text Reassembler Tool</a>.</li>
-            <li>Paste all received message chunks into the provided text area.</li>
-            <li>The tool will automatically reorder the messages, combine them, and check the hash for integrity verification.</li>
-            <li>If the hash matches, you will get the original text back. If not, verify the chunks for completeness and correct order.</li>
-        </ol>
-    </div>
+    <div class="container">
+        <div class="header">
+            <h1>eCash Text Splitter & Reassembler</h1>
+        </div>
+        
+        <div class="section">
+            <h2>How to Use the eCash Text Splitter</h2>
+            <p>This tool helps you split a large eCash payment text into smaller, manageable parts that can be sent over Meshtastic. Each part will include a prefix indicating its sequence and a hash for integrity verification.</p>
+            <p>To use the text splitter:</p>
+            <ol>
+                <li>Go to the <a href="splitter.html">eCash Text Splitter Tool</a>.</li>
+                <li>Paste your eCash payment text into the text area.</li>
+                <li>Click the "Split Text" button. The text will be divided into chunks of up to 150 characters.</li>
+                <li>Each chunk will include a prefix with its sequence number and, for the first chunk, a hash of the entire text.</li>
+                <li>Copy each chunk and send them as separate messages.</li>
+            </ol>
+        </div>
 
-    <div class="section">
-        <h2>Links</h2>
-        <p>Access the tools and repository below:</p>
-        <ul>
-            <li><a class="link-btn" href="splitter.html">eCash Text Splitter Tool</a></li>
-            <li><a class="link-btn" href="reassemble.html">eCash Text Reassembler Tool</a></li>
-            <li><a class="link-btn" href="https://github.com/PR0M3TH3AN/text_splitter">GitHub Repository</a></li>
-        </ul>
+        <div class="section">
+            <h2>How to Reassemble the eCash Payment</h2>
+            <p>To reassemble the split eCash payment text and verify its integrity:</p>
+            <ol>
+                <li>Go to the <a href="reassemble.html">eCash Text Reassembler Tool</a>.</li>
+                <li>Paste all received message chunks into the provided text area.</li>
+                <li>The tool will automatically reorder the messages, combine them, and check the hash for integrity verification.</li>
+                <li>If the hash matches, you will get the original text back. If not, verify the chunks for completeness and correct order.</li>
+            </ol>
+        </div>
+
+        <div class="section">
+            <h2>Links</h2>
+            <p>Access the repository below:</p>
+            <ul>
+                <li><a href="https://github.com/PR0M3TH3AN/text_splitter">GitHub Repository</a></li>
+            </ul>
+        </div>
     </div>
 </body>
 </html>
diff --git a/src/reassemble.html b/src/reassemble.html
index 03927ea..1dbb9d0 100644
--- a/src/reassemble.html
+++ b/src/reassemble.html
@@ -8,14 +8,21 @@
         body {
             font-family: Arial, sans-serif;
             margin: 20px;
+            background-color: #121212; /* Dark mode background */
+            color: #ffffff; /* Dark mode text color */
         }
         h1 {
-            color: #333;
+            color: #ffffff;
         }
         textarea {
             width: 100%;
-            height: 150px;
+            height: 100px;
             margin-bottom: 10px;
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-wrap: break-word; /* Break long words */
+            background-color: #2c2c2c; /* Dark mode textarea background */
+            color: #ffffff; /* Dark mode textarea text color */
+            border: 1px solid #444; /* Dark mode textarea border */
         }
         button {
             padding: 10px 20px;
@@ -25,77 +32,186 @@
             border: none;
             border-radius: 5px;
             cursor: pointer;
+            margin-right: 10px;
         }
         button:hover {
             background-color: #0056b3;
         }
-        pre {
-            white-space: pre-wrap; /* Allows text to wrap and maintains formatting */
-            background: #f4f4f4;
+        #messageFields {
+            margin-top: 10px;
+        }
+        .message-field {
+            margin-bottom: 10px;
+        }
+        #output {
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-wrap: break-word; /* Break long words */
+            background: #2c2c2c; /* Dark mode output background */
+            color: #ffffff; /* Dark mode output text color */
             padding: 10px;
             border-radius: 5px;
-            overflow: auto;
+            margin-top: 10px;
+            border: 1px solid #444; /* Dark mode output border */
         }
         .error {
-            color: red;
+            color: #ff6b6b; /* Dark mode error color */
+        }
+        #hashResult {
+            margin-top: 10px;
+            padding: 10px;
+            background: #e9ecef;
+            border-radius: 5px;
+            color: #000000; /* Light mode text color for hash result */
+        }
+        nav {
+            background-color: #333; /* Dark mode nav background */
+            color: #ffffff; /* Dark mode nav text color */
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        nav a {
+            color: #ffffff; /* Dark mode nav link color */
+            text-decoration: none;
+            margin-right: 10px;
+        }
+        nav a:hover {
+            text-decoration: underline;
         }
     </style>
 </head>
 <body>
+    <nav>
+        <a href="index.html">Home</a>
+        <a href="splitter.html">Splitter</a>
+        <a href="reassemble.html">Reassembler</a>
+    </nav>
+    
     <h1>eCash Text Reassembler</h1>
     
-    <textarea id="inputChunks" placeholder="Paste all received message chunks here..."></textarea>
+    <textarea id="firstMessage" placeholder="Paste the first message (with hash and total messages) here..."></textarea>
+    <button onclick="generateMessageFields()">Generate Message Fields</button>
+    
+    <div id="messageFields"></div>
+    
     <button onclick="reassembleText()">Reassemble Text</button>
+    <button id="copyButton" onclick="copyFinalMessage()" style="display: none;">Copy Final Message</button>
     
     <h2>Reassembled Text</h2>
-    <pre id="outputText"></pre>
-    <p id="statusMessage" class="error"></p>
+    <div id="output"></div>
+
+    <div id="hashResult"></div>
     
     <script>
+        function hexToUint8Array(hex) {
+            const length = hex.length / 2;
+            const bytes = new Uint8Array(length);
+            for (let i = 0; i < length; i++) {
+                bytes[i] = parseInt(hex.substr(i * 2, 2), 16);
+            }
+            return bytes;
+        }
+
+        function generateMessageFields() {
+            const firstMessage = document.getElementById('firstMessage').value.trim();
+            const lines = firstMessage.split('\n');
+            
+            if (lines.length < 2) {
+                alert('Invalid format for the first message.');
+                return;
+            }
+
+            const hashLine = lines[0];
+            const messageInfoLine = lines[1];
+            
+            const hashRegex = /Hash:\s([a-fA-F0-9]{64})/;
+            const messageInfoRegex = /Message\s(\d+)\/(\d+)/;
+
+            const hashMatch = hashLine.match(hashRegex);
+            const messageInfoMatch = messageInfoLine.match(messageInfoRegex);
+
+            if (!hashMatch || !messageInfoMatch) {
+                alert('Invalid format for the first message.');
+                return;
+            }
+
+            const totalMessages = parseInt(messageInfoMatch[2], 10);
+
+            const messageFieldsDiv = document.getElementById('messageFields');
+            messageFieldsDiv.innerHTML = ''; // Clear previous fields
+
+            for (let i = 1; i <= totalMessages; i++) {
+                const inputField = document.createElement('textarea');
+                inputField.className = 'message-field';
+                inputField.id = 'messageField' + i;
+                inputField.placeholder = 'Paste message ' + i + ' here...';
+                messageFieldsDiv.appendChild(inputField);
+            }
+        }
+
         function reassembleText() {
-            const chunks = document.getElementById('inputChunks').value.split('\n\n---\n\n');
-            let text = '';
-            let hashReceived = '';
-            const chunkOrder = [];
+            const firstMessage = document.getElementById('firstMessage').value.trim();
+            const lines = firstMessage.split('\n');
             
-            // Extract the hash from the first chunk and remove it from the text
-            chunks.forEach(chunk => {
-                const lines = chunk.split('\n');
-                if (lines[0].startsWith('Hash:')) {
-                    hashReceived = lines[0].replace('Hash: ', '').trim();
-                    text += lines.slice(2).join('\n') + '\n';
-                } else {
-                    text += chunk.replace(/^Message \d+\/\d+\n\n/, '') + '\n';
+            if (lines.length < 2) {
+                alert('Invalid format for the first message.');
+                return;
+            }
+
+            const hashLine = lines[0];
+            const messageInfoLine = lines[1];
+            
+            const hashRegex = /Hash:\s([a-fA-F0-9]{64})/;
+            const messageInfoRegex = /Message\s(\d+)\/(\d+)/;
+
+            const hashMatch = hashLine.match(hashRegex);
+            const messageInfoMatch = messageInfoLine.match(messageInfoRegex);
+
+            if (!hashMatch || !messageInfoMatch) {
+                alert('Invalid format for the first message.');
+                return;
+            }
+
+            const originalHash = hashMatch[1];
+            const totalMessages = parseInt(messageInfoMatch[2], 10);
+
+            // Gather all message chunks
+            let reassembledText = '';
+            for (let i = 1; i <= totalMessages; i++) {
+                const chunk = document.getElementById('messageField' + i).value.trim();
+                if (chunk) {
+                    // Extract message content by removing the first two lines
+                    const chunkContent = chunk.split('\n').slice(2).join('');
+                    reassembledText += chunkContent;
                 }
-                const match = lines[0].match(/Message (\d+)\/(\d+)/);
-                if (match) {
-                    chunkOrder[parseInt(match[1], 10) - 1] = chunk;
-                }
-            });
-            
-            // Reassemble text in order
-            const reassembledText = chunkOrder.join('\n\n---\n\n');
-            
-            // Calculate the hash of the reassembled text
-            crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
+            }
+
+            // Calculate hash of the reassembled text
+            crypto.subtle.digest('SHA-256', new TextEncoder().encode(reassembledText))
                 .then(hashBuffer => {
                     const hashArray = Array.from(new Uint8Array(hashBuffer));
                     const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
-                    
-                    if (hashHex === hashReceived) {
-                        document.getElementById('outputText').textContent = text;
-                        document.getElementById('statusMessage').textContent = 'The reassembled text matches the original hash!';
-                        document.getElementById('statusMessage').classList.remove('error');
+
+                    if (hashHex === originalHash) {
+                        document.getElementById('output').textContent = reassembledText;
+                        document.getElementById('output').classList.remove('error');
+                        document.getElementById('copyButton').style.display = 'inline-block';
+                        document.getElementById('hashResult').innerHTML = `Hash verification successful!<br>Original Hash: ${originalHash}<br>Calculated Hash: ${hashHex}`;
                     } else {
-                        document.getElementById('outputText').textContent = '';
-                        document.getElementById('statusMessage').textContent = 'Hash mismatch! The reassembled text may be corrupted.';
-                        document.getElementById('statusMessage').classList.add('error');
+                        document.getElementById('output').textContent = 'Hash mismatch! The reassembled text may be incorrect.';
+                        document.getElementById('output').classList.add('error');
+                        document.getElementById('copyButton').style.display = 'none';
+                        document.getElementById('hashResult').innerHTML = `Hash mismatch!<br>Original Hash: ${originalHash}<br>Calculated Hash: ${hashHex}`;
                     }
                 })
-                .catch(err => {
-                    document.getElementById('statusMessage').textContent = 'Error calculating hash: ' + err;
-                    document.getElementById('statusMessage').classList.add('error');
-                });
+                .catch(err => console.error('Error calculating hash:', err));
+        }
+
+        function copyFinalMessage() {
+            const reassembledText = document.getElementById('output').textContent;
+            navigator.clipboard.writeText(reassembledText)
+                .then(() => alert('Final message copied to clipboard!'))
+                .catch(err => console.error('Error copying text: ', err));
         }
     </script>
 </body>
diff --git a/src/splitter.html b/src/splitter.html
index 0ce57c5..b6341a2 100644
--- a/src/splitter.html
+++ b/src/splitter.html
@@ -8,14 +8,21 @@
         body {
             font-family: Arial, sans-serif;
             margin: 20px;
+            background-color: #121212; /* Dark mode background */
+            color: #ffffff; /* Dark mode text color */
         }
         h1 {
-            color: #333;
+            color: #ffffff;
         }
         textarea {
             width: 100%;
             height: 150px;
             margin-bottom: 10px;
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-wrap: break-word; /* Break long words */
+            background-color: #2c2c2c; /* Dark mode textarea background */
+            color: #ffffff; /* Dark mode textarea text color */
+            border: 1px solid #444; /* Dark mode textarea border */
         }
         button {
             padding: 10px 20px;
@@ -25,27 +32,68 @@
             border: none;
             border-radius: 5px;
             cursor: pointer;
+            margin-right: 10px;
         }
         button:hover {
             background-color: #0056b3;
         }
+        .chunk-container {
+            margin-bottom: 20px;
+        }
         pre {
-            white-space: pre-wrap; /* Allows text to wrap and maintains formatting */
-            background: #f4f4f4;
+            white-space: pre-wrap; /* Ensure text wraps */
+            word-wrap: break-word; /* Break long words */
+            background: #2c2c2c; /* Dark mode pre background */
+            color: #ffffff; /* Dark mode pre text color */
             padding: 10px;
             border-radius: 5px;
+            border: 1px solid #444; /* Dark mode pre border */
             overflow: auto;
         }
+        .copy-btn {
+            display: block;
+            margin-top: 5px;
+            background-color: #28a745;
+            border: none;
+            border-radius: 5px;
+            color: white;
+            cursor: pointer;
+            padding: 10px 20px;
+        }
+        .copy-btn:hover {
+            background-color: #218838;
+        }
+        nav {
+            background-color: #333; /* Dark mode nav background */
+            color: #ffffff; /* Dark mode nav text color */
+            padding: 10px;
+            border-radius: 5px;
+            margin-bottom: 20px;
+        }
+        nav a {
+            color: #ffffff; /* Dark mode nav link color */
+            text-decoration: none;
+            margin-right: 10px;
+        }
+        nav a:hover {
+            text-decoration: underline;
+        }
     </style>
 </head>
 <body>
+    <nav>
+        <a href="index.html">Home</a>
+        <a href="splitter.html">Splitter</a>
+        <a href="reassemble.html">Reassembler</a>
+    </nav>
+
     <h1>eCash Text Splitter</h1>
     
     <textarea id="inputText" placeholder="Paste your eCash payment text here..."></textarea>
     <button onclick="splitText()">Split Text</button>
     
     <h2>Output Chunks</h2>
-    <pre id="outputChunks"></pre>
+    <div id="outputChunks"></div>
     
     <script>
         function splitText() {
@@ -54,7 +102,7 @@
             const chunks = [];
             
             // Calculate the hash of the text
-            const hash = crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
+            crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
                 .then(hashBuffer => {
                     const hashArray = Array.from(new Uint8Array(hashBuffer));
                     const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
@@ -76,8 +124,29 @@
                         chunks.push(chunk);
                     }
                     
-                    // Display the chunks
-                    document.getElementById('outputChunks').textContent = chunks.join('\n\n---\n\n');
+                    // Display the chunks with copy buttons
+                    const outputChunksDiv = document.getElementById('outputChunks');
+                    outputChunksDiv.innerHTML = ''; // Clear previous output
+                    chunks.forEach((chunk, index) => {
+                        const chunkContainer = document.createElement('div');
+                        chunkContainer.className = 'chunk-container';
+                        
+                        const pre = document.createElement('pre');
+                        pre.textContent = chunk;
+                        chunkContainer.appendChild(pre);
+                        
+                        const copyButton = document.createElement('button');
+                        copyButton.textContent = 'Copy Chunk ' + (index + 1);
+                        copyButton.className = 'copy-btn';
+                        copyButton.onclick = () => {
+                            navigator.clipboard.writeText(chunk)
+                                .then(() => alert('Chunk copied to clipboard!'))
+                                .catch(err => console.error('Error copying text: ', err));
+                        };
+                        chunkContainer.appendChild(copyButton);
+                        
+                        outputChunksDiv.appendChild(chunkContainer);
+                    });
                 })
                 .catch(err => console.error('Error calculating hash:', err));
         }
