diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 71163bd..eac5daf 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -9,20 +9,15 @@ jobs:
   build:
     name: Build
     runs-on: ubuntu-latest
-
     steps:
     - uses: actions/checkout@v4
     - uses: oven-sh/setup-bun@v1
-
     - name: Install dependencies
       run: bun install
-
     - name: Build
       run: bun run build
-
     - name: Install Firebase CLI
       run: bun install -g firebase-tools
-
     - name: Deploy to Firebase
       env:
         FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
diff --git a/README.md b/README.md
index 6cdf96d..4846f46 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,8 @@
 
 ![Uptime Badge](https://uptime.donado.co/api/badge/4/uptime/24) ![Uptime Badge](https://uptime.donado.co/api/badge/4/ping/24)
 
-<img width="2032" alt="Screenshot 2024-05-05 at 00 52 13" src="https://github.com/sjdonado/monocuco/assets/27580836/6dc68821-e206-4f6a-8d8f-2d8482d519a2">
+<img width="2032" alt="Screenshot 2024-05-08 at 05 42 01" src="https://github.com/sjdonado/monocuco/assets/27580836/ff3e7242-6133-4469-98c8-aa83f1bb0617">
+<img width="2032" alt="Screenshot 2024-05-08 at 05 42 12" src="https://github.com/sjdonado/monocuco/assets/27580836/6f30a3b9-69b8-4c03-a492-20d9d036b5cf">
 
 ## ¿Cómo contribuir?
 
@@ -294,3 +295,4 @@ Agrega la nueva palabra directamente en el archivo `src/data.json`, asegurate de
 
 ## Agradecimientos
 - Andres Urquina: Autor del icono [Ilustración Bailarina - Carnaval de Barranquilla, Colombia.](https://www.flickr.com/photos/andresurquina/16246891029)
+ Andres Urquina: Autor del icono [Ilustración Bailarina - Carnaval de Barranquilla, Colombia.](https://www.flickr.com/photos/andresurquina/16246891029)
diff --git a/src/App.tsx b/src/App.tsx
index c11f65f..fc099b7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -36,7 +36,7 @@ const App = function App() {
   const emptyResults = results.length === 0;
 
   return (
-    <div className="flex min-h-screen w-full flex-col justify-start gap-12 border-t-4 border-red-600 p-4">
+    <div className="flex min-h-screen w-full flex-col justify-start gap-12 border-t-4 border-red-600 bg-gray-50 p-4 dark:bg-gray-900 dark:text-gray-300">
       <GithubButtons />
       <div className="flex flex-col items-center">
         <Header />
diff --git a/src/components/LazyLoadingSearchResults.tsx b/src/components/LazyLoadingSearchResults.tsx
index e8d34f9..cc1bbc0 100644
--- a/src/components/LazyLoadingSearchResults.tsx
+++ b/src/components/LazyLoadingSearchResults.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense, startTransition, useEffect, useState } from 'react';
 
 import WordCard from './WordCard';
 
@@ -24,7 +24,7 @@ export default function LazyLoadingSearchResults({
       firstResults.length + lazyLoaded.length !== results.length ||
       (results.length > CHUNK_SIZE && lazyLoaded.length === 0)
     ) {
-      setTimeout(() => {
+      startTransition(() => {
         setLazyLoaded(
           results
             .slice(CHUNK_SIZE, results.length)
@@ -32,7 +32,7 @@ export default function LazyLoadingSearchResults({
               <WordCard key={result.id} word={result.word} currentWord={currentWord} />
             )),
         );
-      }, 100);
+      });
     }
   }, [results, currentWord, firstResults, lazyLoaded]);
 
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index b0e06b0..9712312 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -31,7 +31,7 @@ function Input({ onSearch, word }: { onSearch: (value: string) => void; word: st
       <input
         ref={inputRef}
         type="text"
-        className="h-12 w-full appearance-none rounded-lg rounded-r-none border border-r-0 border-gray-400 px-4 leading-9 outline-none"
+        className="h-12 w-full appearance-none rounded-lg rounded-r-none border border-r-0 border-gray-400 px-4 leading-9 outline-none dark:border-gray-700 dark:bg-gray-900"
         autoComplete="off"
         autoCapitalize="off"
         autoCorrect="off"
@@ -39,7 +39,7 @@ function Input({ onSearch, word }: { onSearch: (value: string) => void; word: st
         placeholder="Buscar palabra"
         value={word}
       />
-      <div className="flex h-12 items-center justify-center rounded-r-lg border border-l-0 border-gray-400">
+      <div className="flex h-12 items-center justify-center rounded-r-lg border border-l-0 border-gray-400 bg-white dark:border-gray-700 dark:bg-gray-900">
         <MagnifyingGlassIcon className="mr-4 w-5 text-gray-400" />
       </div>
     </div>
diff --git a/src/components/WordCard.tsx b/src/components/WordCard.tsx
index be7f31b..dbf06b8 100644
--- a/src/components/WordCard.tsx
+++ b/src/components/WordCard.tsx
@@ -25,10 +25,10 @@ export default function WordCard({ word, currentWord }: Props) {
   );
 
   return (
-    <div className="relative flex w-full flex-col items-center justify-start gap-5 rounded-lg border p-4 text-center lg:w-[672px] lg:max-w-2xl">
+    <div className="relative flex w-full flex-col items-center justify-start gap-5 rounded-lg border bg-white p-4 text-center lg:w-[672px] lg:max-w-2xl dark:border-gray-700 dark:bg-gray-900">
       <div className="flex w-full flex-col gap-2">
         {synonyms.length > 0 && (
-          <div className="flex justify-end text-sm">Sin. {highlightText(synonyms, 'px-2')}</div>
+          <div className="flex justify-end text-sm">Sin. {highlightText(synonyms)}</div>
         )}
         {highlightText(word.text, 'h-full text-3xl')}
         <span className="mx-auto w-20 border-t-2 border-red-400" />