diff --git a/src/app/app.component.html b/src/app/app.component.html
index ccb5c55..bbfe9de 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -6,7 +6,7 @@
   >
     <form [formGroup]="form" class="p-4 md:p-8 w-full">
       <div class="w-full max-w-xs text-center mx-auto">
-        <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
+        <h1 class="mb-4 md:mb-8 text-sm leading-4 text-white">
           Just type the data and generate the meta tags for your website
         </h1>
       </div>
@@ -16,13 +16,13 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
           *ngFor="let field of metatagsList"
         >
           <ng-container *ngIf="field.type === 'text' || field.type === 'color'">
-            <label [for]="field.name" class="leading-4 text-xs text-zinc-200">{{
+            <label [for]="field.name" class="leading-4 text-xs text-white">{{
               field.label
             }}</label>
 
             <div
               *ngIf="field.name === 'image' && form?.get('image')"
-              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-700 overflow-hidden"
+              class="w-full min-h-60 rounded bg-zinc-800 border border-zinc-800 overflow-hidden"
             >
               <img *ngIf="form?.get('image')?.value" [src]="form.get('image')?.value" width="100%" alt="" />
             </div>
@@ -34,7 +34,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 [name]="field.name"
                 [placeholder]="field.label"
                 [formControlName]="field.name"
-                class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                class="h-8 text-xs w-full bg-zinc-900 rounded border placeholder:text-zinc-500 border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
               />
               <ng-container class="" *ngIf="field.name === 'color'">
                 <input
@@ -53,19 +53,19 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 </div>
               </ng-container>
             </div>
-            <span class="text-xs text-zinc-400 leading-4 mt-1">{{
+            <span class="text-xs text-zinc-500 leading-4 mt-1">{{
               field.description
             }}</span>
           </ng-container>
 
           <ng-container *ngIf="field.type === 'select'">
-            <label [for]="field.name" class="leading-4 text-xs text-zinc-200">{{
+            <label [for]="field.name" class="leading-4 text-xs text-white">{{
               field.label
             }}</label>
             <select
               [id]="field.name"
               [formControlName]="field.name"
-              class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+              class="h-8 text-xs w-full bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-500 focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
             >
               <option
                 *ngFor="let option of field.options"
@@ -74,7 +74,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
                 {{ option.value }}
               </option>
             </select>
-            <span class="text-xs text-zinc-400 leading-4 mt-1">{{
+            <span class="text-xs text-zinc-500 leading-4 mt-1">{{
               field.description
             }}</span>
           </ng-container>
@@ -86,7 +86,7 @@ <h1 class="mb-4 md:mb-8 text-sm leading-4 text-zinc-300">
   </div>
 
   <div
-    class="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-hidden border-r border-zinc-800"
+    class="resize-none md:resize-x w-full md:w-[33.3333%] flex-grow mx-auto flex flex-col h-full md:h-[calc(100vh-56px)] overflow-hidden border-r border-zinc-800 p-4 md:p-0"
   >
     <app-code-result [code]="code" class="h-full" />
   </div>
diff --git a/src/app/components/code-result/code-result.component.html b/src/app/components/code-result/code-result.component.html
index b7eb77c..4bcf5e8 100644
--- a/src/app/components/code-result/code-result.component.html
+++ b/src/app/components/code-result/code-result.component.html
@@ -1,13 +1,13 @@
 <div class="relative h-full">
-  <div class="absolute top-2 right-6 flex justify-center items-center z-10">
+  <div class="absolute top-2 right-2 md:right-6 flex justify-center items-center z-10">
     <button
       (click)="copy()"
-      class="h-6 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 hover:text-zinc-50 rounded text-xs px-2 py-2 flex justify-center items-center">
+      class="h-6 bg-zinc-800 hover:bg-zinc-700 text-white hover:text-zinc-50 rounded text-xs px-2 py-2 flex justify-center items-center">
       Copy
     </button>
   </div>
   <pre class="w-full h-full appearance-none !m-0 !p-0 flex relative">
-    <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-950 text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code>
+    <code class="w-full h-full appearance-none !m-0 !p-4 !bg-zinc-900 md:!bg-zinc-950 rounded md:rounded-none text-xs overflow-x-auto overflow-y-auto md:overflow-y-scroll" [highlight]="code" [language]="'html'"></code>
   </pre>
 
 </div>
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
index 904c020..243c9a2 100644
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -6,14 +6,14 @@
     <a
       href="https://github.com/gustavoquinalha"
       target="_blank"
-      class="text-zinc-400 hover:text-zinc-200 hover:underline underline-offset-1"
+      class="text-zinc-400 hover:text-white hover:underline underline-offset-1"
       >Gustavo Quinalha</a
     >
     &
     <a
       href="https://github.com/userjapa"
       target="_blank"
-      class="text-zinc-400 hover:text-zinc-200 hover:underline underline-offset-1"
+      class="text-zinc-400 hover:text-white hover:underline underline-offset-1"
       >Japa</a
     >
     — All rights reserved.
diff --git a/src/app/components/menu/menu.component.html b/src/app/components/menu/menu.component.html
index 1ec956e..d07c673 100644
--- a/src/app/components/menu/menu.component.html
+++ b/src/app/components/menu/menu.component.html
@@ -19,11 +19,11 @@
       [(ngModel)]="url"
       (keydown.enter)="fetchMetadata()"
       placeholder="https://gus.vision"
-      class="w-full pr-14 h-8 text-xs bg-zinc-900 rounded border border-zinc-800 focus:border-zinc-200 focus:ring-2 focus:ring-zinc-200 outline-none text-zinc-200 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+      class="w-full pr-14 h-8 text-xs bg-zinc-900 rounded border border-zinc-800 focus:border-white focus:ring-2 focus:ring-white outline-none text-white py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
     />
     <button
       (click)="fetchMetadata()"
-      class="absolute top-1 right-1 h-6 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 hover:text-zinc-50 rounded text-xs px-2 py-2 flex items-center justify-center"
+      class="absolute top-1 right-1 h-6 bg-zinc-800 hover:bg-zinc-700 text-white hover:text-zinc-50 rounded text-xs px-2 py-2 flex items-center justify-center"
     >
       Fetch
     </button>
diff --git a/src/app/components/preview/preview.component.html b/src/app/components/preview/preview.component.html
index 32a8465..cec0156 100644
--- a/src/app/components/preview/preview.component.html
+++ b/src/app/components/preview/preview.component.html
@@ -1,8 +1,8 @@
 <div
-  class="text-zinc-200 gap-4 md:gap-8 h-full flex flex-col mb-4 md:mb-8 lg:mb-10 pb-4 md:pb-8 lg:pb-10"
+  class="text-white gap-4 md:gap-8 h-full flex flex-col mb-4 md:mb-8 lg:mb-10 pb-4 md:pb-8 lg:pb-10"
 >
   <div class="w-full max-w-xl">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Google</div>
+    <div class="text-xs text-white uppercase mb-2">Google</div>
     <div class="w-full p-4 border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="text-base text-[#99c3ff]">
         {{ content?.title || "Page title" }}
@@ -17,7 +17,7 @@
   </div>
 
   <div class="w-full max-w-lg">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Twitter</div>
+    <div class="text-xs text-white uppercase mb-2">Twitter</div>
     <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
         <img
@@ -29,7 +29,7 @@
         />
       </div>
       <div class="w-full flex flex-col gap-1 p-4">
-        <div class="text-base text-zinc-200 font-medium">
+        <div class="text-base text-white font-medium">
           {{ content?.title || "Page title" }}
         </div>
         <div class="text-xs text-zinc-400">
@@ -43,7 +43,7 @@
   </div>
 
   <div class="w-full max-w-lg">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Facebook</div>
+    <div class="text-xs text-white uppercase mb-2">Facebook</div>
     <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="bg-zinc-800 w-full h-52 min-h-52 overflow-hidden border-b border-zinc-800">
         <img
@@ -58,7 +58,7 @@
         <div class="text-xs text-zinc-400 uppercase">
           {{ content?.canonical || "https://pageurl.com" }}
         </div>
-        <div class="text-base text-zinc-200 font-medium">
+        <div class="text-base text-white font-medium">
           {{ content?.title || "Page title" }}
         </div>
         <div class="text-xs text-zinc-400">
@@ -69,7 +69,7 @@
   </div>
 
   <div class="w-full max-w-xl">
-    <div class="text-xs text-zinc-200 uppercase mb-2">Linkedin</div>
+    <div class="text-xs text-white uppercase mb-2">Linkedin</div>
     <div class="w-full border border-zinc-800 rounded overflow-hidden bg-zinc-900">
       <div class="bg-zinc-800 w-full h-64 min-h-64 overflow-hidden border-b border-zinc-800">
         <img
@@ -81,7 +81,7 @@
         />
       </div>
       <div class="w-full flex flex-col gap-1 p-4">
-        <div class="text-xs text-zinc-200 font-medium">
+        <div class="text-xs text-white font-medium">
           {{ content?.title || "Page title" }}
         </div>
         <div class="text-xs text-zinc-400">
@@ -91,5 +91,5 @@
     </div>
   </div>
 
-  <div class="min-h-4 md:min-h-8"></div>
+  <div class="hidden md:flex min-h-4 md:min-h-8"></div>
 </div>
diff --git a/src/assets/dracula.css b/src/assets/dracula.css
deleted file mode 100644
index 087149f..0000000
--- a/src/assets/dracula.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/* Dracula Theme v1.2.5
- *
- * https://github.com/dracula/highlightjs
- *
- * Copyright 2016-present, All rights reserved
- *
- * Code licensed under the MIT license
- *
- * @author Denis Ciccale <dciccale@gmail.com>
- * @author Zeno Rocha <hi@zenorocha.com>
- */
-
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #282a36;
-}
-
-.hljs-built_in,
-.hljs-selector-tag,
-.hljs-section,
-.hljs-link {
-  color: #8be9fd;
-}
-
-.hljs-keyword {
-  color: #ff79c6;
-}
-
-.hljs,
-.hljs-subst {
-  color: #f8f8f2;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-meta-keyword {
-  font-style: italic;
-  color: #50fa7b;
-}
-
-.hljs-string,
-.hljs-meta,
-.hljs-name,
-.hljs-type,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-addition,
-.hljs-variable,
-.hljs-template-tag,
-.hljs-template-variable {
-  color: #f1fa8c;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-deletion {
-  color: #6272a4;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-literal,
-.hljs-title,
-.hljs-section,
-.hljs-doctag,
-.hljs-type,
-.hljs-name,
-.hljs-strong {
-  font-weight: bold;
-}
-
-.hljs-literal,
-.hljs-number {
-  color: #bd93f9;
-}
-
-.hljs-emphasis {
-  font-style: italic;
-}
diff --git a/src/assets/intro.webp b/src/assets/intro.webp
index 20086d2..591f87e 100644
Binary files a/src/assets/intro.webp and b/src/assets/intro.webp differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
index 6bba853..8a9a5fe 100644
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="Camada_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="-19 49.7 360.7 103.3" style="enable-background:new -19 49.7 360.7 103.3;" xml:space="preserve">
 <style type="text/css">
diff --git a/src/index.html b/src/index.html
index cc860a2..7b54235 100644
--- a/src/index.html
+++ b/src/index.html
@@ -46,7 +46,7 @@
 
     <!-- Meta Tags Generated via https://seotopper.netlify.app/ -->
   </head>
-  <body class="bg-zinc-950 min-h-screen text-zinc-200 text-base">
+  <body class="bg-zinc-950 min-h-screen text-white text-base">
     <!-- Google Tag Manager (noscript) -->
     <noscript
       ><iframe
diff --git a/src/styles.scss b/src/styles.scss
index 6da8a47..b0751d7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,9 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "~assets/dracula.css";
-// @import 'highlight.js/styles/dark.css';
-
 :root {
   color-scheme: dark;
 }