diff --git a/src/App.tsx b/src/App.tsx
index 8ebdd9d..f18f2cd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -59,12 +59,12 @@ function App() {
                         }
                         // @ts-ignore
                         let message = document.getElementById("ubuntucola").value as string
-                        setMessage(getmisskeycolors(message, colors));
+                        setMessage(getmisskeycolors(message, colors).replace(/\$\[fg\.color=[0-9A-Fa-f]{6} \]/g, ''));
                     }}>
                         generate!
                     </button>
                 </div>
-                <span>{message()}</span>
+                <code>{message()}</code>
             </div>
         </>
     )
diff --git a/src/helpers.ts b/src/helpers.ts
index 946d04a..252f507 100644
--- a/src/helpers.ts
+++ b/src/helpers.ts
@@ -52,7 +52,12 @@ export function getmisskeycolors(message:string, colors:string[]){
         const [low, high , progress] = sampleFromArray(colors, i / (message.length - 1))
         //@ts-ignore
         const color = lerpoklab(tozerotoone(colors[low]), tozerotoone(colors[high]), progress)
-        finalmessage += (`$[fg.color=${tohexstring(color).substring(1)} ${message[i]}]`)
+        if (message[i] === " ") {
+            finalmessage += " "
+        } else {
+            finalmessage += (`$[fg.color=${tohexstring(color).substring(1)} ${message[i]}]`)
+        }
+
     }
     return finalmessage
 }