diff --git a/components/HeaderTopbar/HeaderTopbar.js b/components/HeaderTopbar/HeaderTopbar.js
index c11038a..66dda34 100644
--- a/components/HeaderTopbar/HeaderTopbar.js
+++ b/components/HeaderTopbar/HeaderTopbar.js
@@ -5,21 +5,32 @@ import Link from 'next/link'
 import Logo from '/public/images/logo.png'
 import Image from 'next/image'
 import { useTranslation } from 'next-i18next'
+import { changeLanguage } from '../../utils/commonFunction.utils'
+import { useRouter } from 'next/router'
 
 const HeaderTopbar = () => {
   const { t } = useTranslation('common')
 
+  const router = useRouter()
+
+  const handleLanguageChange = () => {
+    changeLanguage(router, 'es'); // always switch to Spanish
+  };
+
   return (
     <>
       <div
-        className="header-top py-2 d-none d-lg-block"
+        className="header-top py-2 "
         style={{
           background: 'linear-gradient(90deg, #C12026 11.32%, #E14448 95.28%)',
         }}
       >
         <div className="container-fluid">
-          <div className="text-center" style={{ color: 'white' }}>
-            Para cambiar al español, haz clic en la opción en la parte inferior derecha del encabezado.
+          <div className='d-flex justify-content-center align-items-center gap-5 flex-wrap'>
+            <div className="text-center" style={{ color: 'white' }}>
+              Haz clic en el botón para cambiar a español.
+            </div>
+            <button onClick={handleLanguageChange} className='white-button'>Haz clic aquí</button>
           </div>
         </div>
       </div>
diff --git a/styles/sass/layout/_header.scss b/styles/sass/layout/_header.scss
index fae23af..e50b2fe 100644
--- a/styles/sass/layout/_header.scss
+++ b/styles/sass/layout/_header.scss
@@ -2025,29 +2025,39 @@
 .responsivemenu a:not([href]):not([class]):hover {
 	color: #ddd;
 }
+
 .responsive-entry-media {
-    position: relative;
-    width: 100%;
-    aspect-ratio:28 / 9; 
-    overflow: hidden;
+	position: relative;
+	width: 100%;
+	aspect-ratio: 28 / 9;
+	overflow: hidden;
 }
 
 .responsive-entry-media img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
 
 .responsive-entry-media2 {
-    position: relative;
-    width: 100%;
-    aspect-ratio:3 / 2; 
-    overflow: hidden;
+	position: relative;
+	width: 100%;
+	aspect-ratio: 3 / 2;
+	overflow: hidden;
 }
 
 .responsive-entry-media2 img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
 }
 
+.white-button {
+	border: none;
+	background-color: white;
+	color: #c12026;
+	border-radius: 2px;
+	padding: 5px 10px;
+	font-size: 16px;
+	font-weight: bold;
+}
\ No newline at end of file