diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8a68833..b99f0fc 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -391,16 +391,16 @@ export default function Home() {
               </p>
               <ol className="list-decimal list-inside">
                 <li className="mb-2">
-                  Put <code>{proxyUrl}</code> in your
+                  Put <code style={{ color: "#fff0b9" }}>{proxyUrl}</code> in your
                   API settings, any value for model and key.
                 </li>
                 <li className="mb-2">
-                  REQUIRED: Set your custom prompt to <code>&lt;.&gt;</code>
+                  REQUIRED: Set your custom prompt to <code style={{ color: "#fff0b9" }}>&lt;.&gt;</code>
                 </li>
                 <li className="mb-2">
                   REQUIRED: Set your persona (or create a new one) with the name{" "}
-                  <code>&#123;user&#125;</code> and the description should only
-                  have <code>.</code> in it.
+                  <code style={{ color: "#fff0b9" }}>&#123;user&#125;</code> and the description should only
+                  have <code style={{ color: "#fff0b9" }}>.</code> in it.
                 </li>
                 <li className="mb-2">
                   Save settings and refresh the page. Not this page. <i>That</i>{" "}
@@ -408,7 +408,7 @@ export default function Home() {
                 </li>
                 <li className="mb-2">Start a new chat with a character.</li>
                 <li className="mb-2">
-                  Char name inference is implemented: if you send just a dot: <code>.</code>, sucker will use the inferred name from the persona tag, or you can send the character name yourself.
+                  Char name inference is implemented: if you send just a dot: <code style={{ color: "#fff0b9" }}>.</code>, sucker will use the inferred name from the persona tag, or you can send the character name yourself.
                 </li>
                 <li className="mb-2">
                   Hit the Refresh button here, and the cards should appear here.
@@ -417,7 +417,7 @@ export default function Home() {
                   If you're interested in capturing alternate greetings, start a
                   new chat and send the conversation ID as first message instead
                   of the character name. The format is{" "}
-                  <code>[sucker:conv=conversationId]</code> which you'll be
+                  <code style={{ color: "#fff0b9" }}>[sucker:conv=conversationId]</code> which you'll be
                   given when creating a new card.
                 </li>
                 <li className="mb-2">