diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 76a55d2..9731eb2 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -8,7 +8,6 @@
         Enter,
     } from "../wailsjs/go/main/App.js";
 
-    let resultText: string = "Please enter your name below 👇";
     let searchText: string;
 
     let mathRes: string | null;
@@ -70,6 +69,12 @@
             }}
         />
         <div style="padding: 0 10px">
+            {#if searchText?.match(/^#[\da-f]{3}([\da-f]{3})?$/)}
+                <div style="display: flex; gap: 20px; align-items: center; padding: 20px;">
+                    <h1>Color</h1>
+                    <div class="color-block" style="--background-color: {searchText};"></div>
+                </div>
+            {/if}
             {#if mathRes}
                 <div>
                     <h1>Calculations</h1>
@@ -157,6 +162,10 @@
         color: white;
         border-radius: 10px;
         border: #151515 solid 2px;
-        box-shadow: #00000055 0px 0 20px 5px;
+    }
+    .color-block {
+        background: var(--background-color);
+        width: 64px;
+        height: 64px;
     }
 </style>