diff --git a/app/message.go b/app/message.go
index cbb7027..b4d47aa 100644
--- a/app/message.go
+++ b/app/message.go
@@ -67,7 +67,7 @@ func getMessagesFromDB(c *gin.Context) {
 			return
 		}
 
-		parsed = strings.ReplaceAll(parsed, "<pre>", "<div class='card bg-base-100 shadow-xl'><div class='card-body overflow-x-auto'><pre>")
+		parsed = strings.ReplaceAll(parsed, "<pre>", "<div class='card bg-base-100 shadow-xl'><div class='card-body text-white'><pre>")
 		parsed = strings.ReplaceAll(parsed, "</pre>", "</pre></div></div>")
 
 		chatMessages = append(chatMessages, ChatMessage{
diff --git a/app/run.go b/app/run.go
index 34c1f2c..528bce7 100644
--- a/app/run.go
+++ b/app/run.go
@@ -94,7 +94,7 @@ func (mc *ModelConfig) runModel(ctx context.Context) gin.HandlerFunc {
 		for _, msg := range messages {
 			parsedHuman, _ := parser.ParseMD(msg.Human)
 			parsedResponse, _ := parser.ParseMD(msg.Response)
-			parsedResponse = strings.ReplaceAll(parsedResponse, "<pre>", "<div class='card bg-base-100 shadow-xl'><div class='card-body overflow-x-auto'><pre>")
+			parsedResponse = strings.ReplaceAll(parsedResponse, "<pre>", "<div class='card bg-base-100 shadow-xl'><div class='card-body text-white'><pre>")
 			parsedResponse = strings.ReplaceAll(parsedResponse, "</pre>", "</pre></div></div>")
 			chatMessages = append(chatMessages, ChatMessage{
 				Human:    template.HTML(parsedHuman),
diff --git a/templates/chat.html b/templates/chat.html
index ffc366c..9e294aa 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -8,7 +8,7 @@
         </div>
       </div>
       <div class="chat-header">You</div>
-      <div class="chat-bubble" style="max-width: 100%; word-break: break-word;">{{.Human}}</div>
+      <div class="chat-bubble chat-bubble-accent" style="max-width: 100%; word-break: break-word;">{{.Human}}</div>
     </div>
     {{end}}
     {{if .Response}}
@@ -19,7 +19,7 @@
         </div>
       </div>
       <div class="chat-header">JennAI</div>
-      <div class="chat-bubble" style="max-width: 100%; word-break: break-word;">{{.Response}}</div>
+      <div class="chat-bubble chat-bubble-secondary" style="max-width: 100%; word-break: break-word;">{{.Response}}</div>
       <div class="chat-footer opacity-50">{{.Platform}} - {{.Model}}</div>
     </div>
     {{end}}
diff --git a/templates/index.html b/templates/index.html
index 79bbea1..99bebab 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -81,10 +81,10 @@
         </div>
 
         <!-- Messages -->
-        <div id="htmlOutput" class="flex flex-col flex-grow pl-40 pr-40 mb-20">
+        <div id="htmlOutput" class="flex flex-col flex-grow justify-center pl-40 pr-40">
           <div 
             id="messages"
-            class="flex flex-col flex-grow overflow-y-auto border-0 text-gray-100 mb-20"
+            class="overflow-y-auto border-0 text-gray-100 mb-20"
             style="max-height: calc(100vh - 200px);"
           >
             {{template "chat.html" .}}