diff --git a/src/app/container_page.tsx b/src/app/container_page.tsx
index 1e3a010..83a7592 100644
--- a/src/app/container_page.tsx
+++ b/src/app/container_page.tsx
@@ -1,5 +1,5 @@
 import { Footer } from '~/components/Footer';
-import { NavBar } from '~/components/navBar/navBar';
+import NavBar from '~/components/navBar/navBar';
 
 type ContainerPageProps = {
   children: React.ReactNode;
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 860629a..edc16cd 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -1,19 +1,19 @@
-"use client";
-import { useState } from "react";
-import { useAuth } from "@/context/AuthContext";
-import { useRouter } from "next/navigation";
+'use client';
+import { useState } from 'react';
+import { useAuth } from '~/context/AuthContext';
+import { useRouter } from 'next/navigation';
 
 const Login = () => {
   const router = useRouter();
   const { login } = useAuth();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
 
   const handleLogin = async () => {
     try {
       await login(email, password);
-      console.log("Login successful");
-      router.push("/protected");
+      console.log('Login successful');
+      router.push('/protected');
     } catch (error) {
       console.log(error);
       // Handle login error here if needed.
@@ -47,7 +47,7 @@ const Login = () => {
         <button
           className="bg-secondary-dm text-text-dm w-2/12 px-4 py-3 hover:bg-green-800 transition-all duration-500 my-8 ease-in-out rounded font-semibold"
           onClick={() => {
-            router.push("/signin");
+            router.push('/signin');
           }}
         >
           Register
diff --git a/src/assets/icons/CarShoping.tsx b/src/assets/icons/CarShoping.tsx
new file mode 100644
index 0000000..abb212a
--- /dev/null
+++ b/src/assets/icons/CarShoping.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function Cash() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 30 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H4C4.22306 6.1623e-05 4.4397 0.0747014 4.61546 0.212049C4.79122 0.349398 4.91602 0.541568 4.97 0.758L5.78 4H29C29.1479 4.00009 29.2939 4.03298 29.4276 4.0963C29.5612 4.15963 29.6792 4.25181 29.7729 4.3662C29.8666 4.48059 29.9338 4.61435 29.9696 4.75784C30.0054 4.90133 30.009 5.05098 29.98 5.196L27.98 15.196C27.9362 15.4141 27.821 15.6113 27.6526 15.7566C27.4842 15.9018 27.2721 15.9868 27.05 15.998L8.256 16.942L8.83 20H26C26.2652 20 26.5196 20.1054 26.7071 20.2929C26.8946 20.4804 27 20.7348 27 21C27 21.2652 26.8946 21.5196 26.7071 21.7071C26.5196 21.8946 26.2652 22 26 22H8C7.76686 21.9998 7.54113 21.9181 7.36182 21.7691C7.18251 21.6201 7.0609 21.4132 7.018 21.184L4.02 5.214L3.22 2H1C0.734784 2 0.48043 1.89464 0.292893 1.70711C0.105357 1.51957 0 1.26522 0 1ZM6.204 6L7.884 14.958L26.172 14.04L27.78 6H6.204ZM10 22C8.93913 22 7.92172 22.4214 7.17157 23.1716C6.42143 23.9217 6 24.9391 6 26C6 27.0609 6.42143 28.0783 7.17157 28.8284C7.92172 29.5786 8.93913 30 10 30C11.0609 30 12.0783 29.5786 12.8284 28.8284C13.5786 28.0783 14 27.0609 14 26C14 24.9391 13.5786 23.9217 12.8284 23.1716C12.0783 22.4214 11.0609 22 10 22ZM24 22C22.9391 22 21.9217 22.4214 21.1716 23.1716C20.4214 23.9217 20 24.9391 20 26C20 27.0609 20.4214 28.0783 21.1716 28.8284C21.9217 29.5786 22.9391 30 24 30C25.0609 30 26.0783 29.5786 26.8284 28.8284C27.5786 28.0783 28 27.0609 28 26C28 24.9391 27.5786 23.9217 26.8284 23.1716C26.0783 22.4214 25.0609 22 24 22ZM10 24C10.5304 24 11.0391 24.2107 11.4142 24.5858C11.7893 24.9609 12 25.4696 12 26C12 26.5304 11.7893 27.0391 11.4142 27.4142C11.0391 27.7893 10.5304 28 10 28C9.46957 28 8.96086 27.7893 8.58579 27.4142C8.21071 27.0391 8 26.5304 8 26C8 25.4696 8.21071 24.9609 8.58579 24.5858C8.96086 24.2107 9.46957 24 10 24ZM24 24C24.5304 24 25.0391 24.2107 25.4142 24.5858C25.7893 24.9609 26 25.4696 26 26C26 26.5304 25.7893 27.0391 25.4142 27.4142C25.0391 27.7893 24.5304 28 24 28C23.4696 28 22.9609 27.7893 22.5858 27.4142C22.2107 27.0391 22 26.5304 22 26C22 25.4696 22.2107 24.9609 22.5858 24.5858C22.9609 24.2107 23.4696 24 24 24Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/assets/icons/CardCredit.tsx b/src/assets/icons/CardCredit.tsx
index ed593b2..4f39358 100644
--- a/src/assets/icons/CardCredit.tsx
+++ b/src/assets/icons/CardCredit.tsx
@@ -1,18 +1,18 @@
-
 import React from 'react';
 
 export default function CardCredit() {
   return (
-    <svg 
-    xmlns="http://www.w3.org/2000/svg" 
-    fill="none" 
-    viewBox="0 0 24 24" 
-    stroke-width="1.5" 
-    stroke="currentColor">
-        <path 
-        stroke-linecap="round" 
-        stroke-linejoin="round" 
-        d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z"
+      />
     </svg>
   );
-}
\ No newline at end of file
+}
diff --git a/src/assets/icons/Cash.tsx b/src/assets/icons/Cash.tsx
index 5ed229e..ad22473 100644
--- a/src/assets/icons/Cash.tsx
+++ b/src/assets/icons/Cash.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default function Cash() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"  stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
     </svg>
   );
diff --git a/src/assets/icons/HamburguerClose.tsx b/src/assets/icons/HamburguerClose.tsx
new file mode 100644
index 0000000..4c68050
--- /dev/null
+++ b/src/assets/icons/HamburguerClose.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function HamburguerClose() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="-5 -7 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M1 0h5a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm7 8h5a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2zM1 4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z"
+      />
+    </svg>
+  );
+}
diff --git a/src/assets/icons/HamburguerOpen.tsx b/src/assets/icons/HamburguerOpen.tsx
new file mode 100644
index 0000000..eca8faa
--- /dev/null
+++ b/src/assets/icons/HamburguerOpen.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function HamburguerClose() {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 36 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.52379 30H33.6349C34.7043 30 35.5793 28.875 35.5793 27.5C35.5793 26.125 34.7043 25 33.6349 25H2.52379C1.45435 25 0.579346 26.125 0.579346 27.5C0.579346 28.875 1.45435 30 2.52379 30ZM2.52379 17.5H33.6349C34.7043 17.5 35.5793 16.375 35.5793 15C35.5793 13.625 34.7043 12.5 33.6349 12.5H2.52379C1.45435 12.5 0.579346 13.625 0.579346 15C0.579346 16.375 1.45435 17.5 2.52379 17.5ZM0.579346 2.5C0.579346 3.875 1.45435 5 2.52379 5H33.6349C34.7043 5 35.5793 3.875 35.5793 2.5C35.5793 1.125 34.7043 0 33.6349 0H2.52379C1.45435 0 0.579346 1.125 0.579346 2.5Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
diff --git a/src/assets/icons/Login.tsx b/src/assets/icons/Login.tsx
new file mode 100644
index 0000000..fb5d5fe
--- /dev/null
+++ b/src/assets/icons/Login.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function Login() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        fill="black"
+        fill-rule="evenodd"
+        d="M8 14.5a6.47 6.47 0 0 0 3.25-.87V11.5A2.25 2.25 0 0 0 9 9.25H7a2.25 2.25 0 0 0-2.25 2.25v2.13A6.47 6.47 0 0 0 8 14.5Zm4.75-3v.937a6.5 6.5 0 1 0-9.5 0V11.5a3.752 3.752 0 0 1 2.486-3.532a3 3 0 1 1 4.528 0A3.752 3.752 0 0 1 12.75 11.5ZM8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM9.5 6a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}
diff --git a/src/assets/icons/SearchIcon.tsx b/src/assets/icons/SearchIcon.tsx
new file mode 100644
index 0000000..fddda84
--- /dev/null
+++ b/src/assets/icons/SearchIcon.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function CardCredit() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.3333 9.33333H9.80667L9.62 9.15333C10.2733 8.39333 10.6667 7.40667 10.6667 6.33333C10.6667 3.94 8.72667 2 6.33333 2C3.94 2 2 3.94 2 6.33333C2 8.72667 3.94 10.6667 6.33333 10.6667C7.40667 10.6667 8.39333 10.2733 9.15333 9.62L9.33333 9.80667V10.3333L12.6667 13.66L13.66 12.6667L10.3333 9.33333V9.33333ZM6.33333 9.33333C4.67333 9.33333 3.33333 7.99333 3.33333 6.33333C3.33333 4.67333 4.67333 3.33333 6.33333 3.33333C7.99333 3.33333 9.33333 4.67333 9.33333 6.33333C9.33333 7.99333 7.99333 9.33333 6.33333 9.33333Z"
+        fill="#5F6974"
+      />
+    </svg>
+  );
+}
diff --git a/src/assets/icons/Shield.tsx b/src/assets/icons/Shield.tsx
index ef37a9b..d4cf638 100644
--- a/src/assets/icons/Shield.tsx
+++ b/src/assets/icons/Shield.tsx
@@ -2,8 +2,17 @@ import React from 'react';
 
 export default function Shield() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z"
+      />
     </svg>
   );
-}
\ No newline at end of file
+}
diff --git a/src/assets/icons/Truck.tsx b/src/assets/icons/Truck.tsx
index c9169ce..594bbef 100644
--- a/src/assets/icons/Truck.tsx
+++ b/src/assets/icons/Truck.tsx
@@ -2,8 +2,17 @@ import React from 'react';
 
 export default function Truck() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"
+      />
     </svg>
   );
 }
diff --git a/src/assets/icons/warranty.tsx b/src/assets/icons/warranty.tsx
index 1d5754e..ae7498a 100644
--- a/src/assets/icons/warranty.tsx
+++ b/src/assets/icons/warranty.tsx
@@ -2,8 +2,17 @@ import React from 'react';
 
 export default function warranty() {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
+      />
     </svg>
   );
 }
diff --git a/src/assets/img/index.ts b/src/assets/img/index.ts
index b58b9d4..ba724be 100644
--- a/src/assets/img/index.ts
+++ b/src/assets/img/index.ts
@@ -40,6 +40,7 @@ import Cat05 from './categories/Cat05.png';
 import Cat06 from './categories/Cat06.png';
 import Cat07 from './categories/Cat07.png';
 import Cat08 from './categories/Cat08.png';
+import ActLogo from './logo/AtcLogoNavBar.png';
 
 // Exporta todas las imágenes organizadas en un objeto
 export const Images = {
@@ -53,6 +54,7 @@ export const Images = {
     LogoShieldBlack,
     LogoShieldLight,
     LogoShieldRed,
+    ActLogo,
   },
   icons: {
     CompraSegura,
diff --git a/src/assets/img/logo/AtcLogoNavBar.png b/src/assets/img/logo/AtcLogoNavBar.png
new file mode 100644
index 0000000..19eaf72
Binary files /dev/null and b/src/assets/img/logo/AtcLogoNavBar.png differ
diff --git a/src/components/IconText.tsx b/src/components/IconText.tsx
index 1dff086..d17c657 100644
--- a/src/components/IconText.tsx
+++ b/src/components/IconText.tsx
@@ -1,3 +1,4 @@
+'use client';
 import Icon from '~/assets/icons/icon';
 import { IconTypes } from '~/types/icons';
 
diff --git a/src/components/ThemeMode.tsx b/src/components/ThemeMode.tsx
index 5e30220..466a7d1 100644
--- a/src/components/ThemeMode.tsx
+++ b/src/components/ThemeMode.tsx
@@ -6,7 +6,7 @@ type ThemeModeButtonProps = {
   sizeIcon?: number;
 };
 
-export function ThemeModeButton({ sizeIcon = 25 }: ThemeModeButtonProps) {
+export function ThemeModeButton({ sizeIcon = 35 }: ThemeModeButtonProps) {
   const { systemTheme, theme, setTheme } = useTheme();
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index e2ac80e..3aa3fd2 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -29,7 +29,7 @@ const ButtonComponent: React.FC<ButtonComponentProps> = ({
 
   const textvariant = variant === 'search' ? 'Buscar' : 'Boton';
 
-  const StylesDefaul = ` min-w-[4.34rem] max-w-[8.6875rem] min-h-2.75[rem] max-h-[2.75rem] p-2 flex justify-center items-center font-bold ${buttonClass}`;
+  const StylesDefaul = `text-base text-text-lm min-w-[4.34rem] max-w-[8.6875rem] min-h-2.75[rem] max-h-[2.75rem] p-2 flex justify-center items-center font-medium ${buttonClass}`;
 
   if (to) {
     return (
@@ -50,22 +50,30 @@ type MainButtonProps = {
   variant?: 'default' | 'secondary' | 'tertiary';
   color?: 'default' | 'red';
   children: React.ReactNode;
-};
+  className?: string;
+} & React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;
+
 export const MainButton: React.FC<MainButtonProps> = ({
   variant = 'default',
   color = 'default',
+  className,
   children,
+  ...props
 }) => {
   const variant_style =
     variant === 'secondary'
       ? `border ${color === 'red' ? 'border-primary-lm text-primary-lm' : ''}`
       : variant === 'tertiary'
       ? `${color === 'red' ? 'text-primary-lm' : ''}`
-      : `${color === 'red' ? 'bg-primary-lm text-white' : 'bg-white'}`;
+      : `${color === 'red' ? 'bg-primary-lm text-white' : 'bg-none'}`;
 
   return (
     <button
-      className={`px-3 py-1 text-base font-medium rounded ${variant_style}`}
+      className={`px-3 py-1 text-base font-medium rounded ${variant_style} ${className}`}
+      {...props}
     >
       {children}
     </button>
diff --git a/src/components/cards/brandCard.tsx b/src/components/cards/brandCard.tsx
index 1caff38..921780b 100644
--- a/src/components/cards/brandCard.tsx
+++ b/src/components/cards/brandCard.tsx
@@ -20,7 +20,7 @@ const Card: FC<CardProps> = ({ title, imageSrc }) => {
       </div>
 
       <div className="w-full h-[2.3125rem] overflow-hidden flex items-end justify-center opacity-0 group-hover:opacity-100 transition-opacity group">
-        <h3 className="font-oswald font-bold text-xs text-background-lm text-center line-clamp-1 ">
+        <h3 className="font-oswald font-bold text-xs text-center line-clamp-1 ">
           {title.toUpperCase()}
         </h3>
       </div>
diff --git a/src/components/cards/landingCard.tsx b/src/components/cards/landingCard.tsx
index e4da8d7..3e7c92b 100644
--- a/src/components/cards/landingCard.tsx
+++ b/src/components/cards/landingCard.tsx
@@ -11,7 +11,7 @@ interface CardProps {
 
 const Card: FC<CardProps> = ({ title, price, nota, imageSrc }) => {
   return (
-    <div className="flex flex-col w-[15.3125rem] h-[268px] pb-1 border bg-white">
+    <div className="flex flex-col w-[15.3125rem] h-[268px] pb-1  bg-white shadow-md">
       <Image
         src={imageSrc}
         alt="Cubre Volante"
diff --git a/src/components/containerCards/containerCardsBrands.tsx b/src/components/containerCards/containerCardsBrands.tsx
index 412af9f..29b6ffa 100644
--- a/src/components/containerCards/containerCardsBrands.tsx
+++ b/src/components/containerCards/containerCardsBrands.tsx
@@ -1,25 +1,23 @@
 'use client';
-import React from "react";
+import React from 'react';
 import { useState } from 'react';
 import Pagination from '../pagination';
-import Card from "../cards/brandCard";
-
+import Card from '../cards/brandCard';
 
 type Brand = {
-    id: string;
-    name: string;
-    image: string[];
-  };
+  id: string;
+  name: string;
+  image: string[];
+};
 
 type ContainerCardProps = {
   brand: Brand[];
 };
 
 const BrandCategory = ({ brand }: ContainerCardProps) => {
-
   const [pagination, setPagination] = useState({
     page: 1,
-    itemsPage: 11,
+    itemsPage: 5,
   });
 
   const maximo = Math.ceil(brand.length / pagination.itemsPage);
@@ -41,16 +39,10 @@ const BrandCategory = ({ brand }: ContainerCardProps) => {
 
   return (
     <div>
-      <h1 className='title'>
-        Marcas
-      </h1>
+      <h1 className="title">Marcas</h1>
       <div className="flex flex-wrap justify-center">
         {brand.slice(startIndex, endIndex).map((brand) => (
-          <Card
-            key={brand.id}
-            title={brand.name}
-            imageSrc={brand.image[0]}
-          />
+          <Card key={brand.id} title={brand.name} imageSrc={brand.image[0]} />
         ))}
       </div>
       <div className="flex justify-center items-center text-center my-8">
@@ -64,4 +56,4 @@ const BrandCategory = ({ brand }: ContainerCardProps) => {
   );
 };
 
-export default BrandCategory;
\ No newline at end of file
+export default BrandCategory;
diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx
index 405cb3e..0093f6f 100644
--- a/src/components/inputs/InputField.tsx
+++ b/src/components/inputs/InputField.tsx
@@ -6,6 +6,7 @@ type InputFieldProps = {
   leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   color?: 'default' | 'red';
+  className?: string;
 } & React.DetailedHTMLProps<
   React.InputHTMLAttributes<HTMLInputElement>,
   HTMLInputElement
@@ -17,9 +18,10 @@ export function InputField({
   leftIcon,
   rightIcon,
   color,
+  className,
   ...props
 }: InputFieldProps) {
-  const currentColor = color === 'red' ? 'primary-lm' : 'secondary-dm';
+  const currentColor = color === 'red' ? 'primary-lm' : '';
 
   return (
     <div className="max-w-md">
@@ -37,21 +39,21 @@ export function InputField({
       <div className="rounded relative">
         {leftIcon && (
           <div
-            className={`absolute left-0 inset-y-0 py-2 px-1 aspect-square  text-${currentColor}`}
+            className={`absolute left-0 inset-y-0 py-2 pl-2 px-1 aspect-square  text-${currentColor}`}
           >
             {leftIcon}
           </div>
         )}
         <input
+          {...props}
           id="input-field"
           type="text"
-          className={`w-full py-1.5  px-3 outline-none border rounded-md text-secondary-dm
+          className={`w-full py-1.5 px-3 outline-none rounded-md text-secondary-dm
           ${leftIcon && 'pl-9'} 
           ${rightIcon && 'pr-9'}
-          border-${currentColor}`}
+          border-${currentColor} ${className}`}
           required={required}
           autoComplete="off"
-          {...props}
         />
         {rightIcon && (
           <div
diff --git a/src/components/navBar/MenuMobile.tsx b/src/components/navBar/MenuMobile.tsx
new file mode 100644
index 0000000..4108c4b
--- /dev/null
+++ b/src/components/navBar/MenuMobile.tsx
@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import React, { FC } from 'react';
+
+interface MenuMobileProps {}
+
+const MenuMobile: FC<MenuMobileProps> = ({}) => {
+  return (
+    <div className="flex flex-col items-center">
+      <Link
+        href="/products"
+        className="block p-4 hover:text-2xl hover:font-bold"
+      >
+        Productos
+      </Link>
+      <Link
+        href="/how-to-buy"
+        className="block p-4 hover:text-2xl hover:font-bold"
+      >
+        Como comprar
+      </Link>
+      <Link href="/blog" className="block p-4 hover:text-2xl hover:font-bold">
+        Blog
+      </Link>
+      <Link
+        href="/about-us"
+        className="block p-4 hover:text-2xl hover:font-bold"
+      >
+        Nosotros
+      </Link>
+      <Link
+        href="/contact"
+        className="block p-4 hover:text-2xl hover:font-bold"
+      >
+        Contacto
+      </Link>
+    </div>
+  );
+};
+
+export default MenuMobile;
diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
index 9cb5c50..4f7eb1d 100644
--- a/src/components/navBar/navBar.tsx
+++ b/src/components/navBar/navBar.tsx
@@ -1,50 +1,112 @@
 'use client';
 import Image from 'next/image';
-import React from 'react';
-import { Images } from "~/assets/img";
-import ButtonComponent from '../button/button';
-import { FaAtlas, FaUser } from 'react-icons/fa';
-import { BsCartFill } from 'react-icons/bs';
-import Link from 'next/link';
+import React, { FC, useState } from 'react';
+import { Images } from '~/assets/img';
+import ButtonComponent, { MainButton } from '../button/button';
 import { DropDownMenu } from '../dropdownMenu/dropdownMenu';
 import { ThemeModeButton } from '../ThemeMode';
+import { InputField } from '../inputs/InputField';
+import Link from 'next/link';
+import IconText from '../IconText';
+import Icon from '~/assets/icons/icon';
+import MenuMobile from './MenuMobile';
+
+interface NavBarProps {}
+
+const NavBar: FC<NavBarProps> = ({}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleNavbar = () => {
+    setIsOpen(!isOpen);
+  };
 
-export const NavBar = () => {
   return (
-    <div className="w-full h-10 flex relative justify-between bg-text-dm">
-      <div className="flex">
-        <Link className=" flex items-center" href={'/'}>
-          <Image 
-          src={Images.LogoRedColor} 
-          width={100} 
-          height={100} 
-          alt="Your Company" />
-        </Link>
-        <DropDownMenu
-          title="Categorias"
-          anchorArray={[
-            { title: 'Farolas', to: '/products/Farolas' },
-            { title: 'Stops', to: '/products/Stops' },
-          ]}
-        />
-        <DropDownMenu
-          title="Marcas"
-          anchorArray={[
-            { title: 'Mazda', to: '/products/Mazda' },
-            { title: 'Toyota', to: '/products/Toyota' },
-          ]}
-        />
-      </div>
-      <input type="text" className="" />
-      <ButtonComponent variant="white" text="Inicio" to="/" />
-      <ButtonComponent variant="white" text="Sobre nosotros" to="/aboutUs" />
-      <ButtonComponent variant="white" text="Contacto" to="/contact" />
-      <div className="flex items-center">
-        <FaAtlas className="cursor-pointer" />
-        <FaUser className="cursor-pointer" />
-        <BsCartFill className="cursor-pointer" />
+    <div className="bg-white">
+      <div className="z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col">
+        <nav className="p-4 flex items-center h-[60px] justify-between max-w-[1480px] mx-auto">
+          {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
+          <div className="flex items-center gap-2">
+            <div className="">
+              {/* Iconos menu mobile */}
+              <MainButton onClick={toggleNavbar}>
+                {isOpen ? (
+                  <div className="h-14 w-14">
+                    <Icon icon="HamburguerClose" />
+                  </div>
+                ) : (
+                  <div className="h-[30px] w-[36px]">
+                    <Icon icon="HamburguerOpen" />
+                  </div>
+                )}
+              </MainButton>
+            </div>
+            <div>
+              {/* imagenes tablet y desktop */}
+              <div className="hidden md:flex justify-center items-center">
+                <Link href="/">
+                  <Image
+                    src={Images.logos.LogoRedColor}
+                    width={200}
+                    height={30}
+                    alt="Your Company"
+                  />
+                </Link>
+              </div>
+              {/* imagen mobile */}
+              <div className="md:hidden flex justify-center items-center">
+                <Link href="/">
+                  <Image
+                    src={Images.logos.ActLogo}
+                    width={55}
+                    height={32}
+                    alt="Your Company"
+                  />
+                </Link>
+              </div>
+            </div>
+          </div>
+          {/* Contenedor central dropDownMenus e input */}
+          <div className="hidden md:flex items-center justify-center gap-5">
+            {/* input */}
+            <div className="flex items-center justify-center">
+              <InputField
+                placeholder="Buscar Productos"
+                leftIcon={<Icon icon="SearchIcon" />}
+              />
+            </div>
+          </div>
+          {/* Contenedor lado derecho iconos*/}
+          <div className="flex items-center gap-6">
+            <div className="h-[35px] w-[35px]">
+              <Link href={'/login'}>
+                <Icon icon="Login" />
+              </Link>
+            </div>
+            <div className="h-[35px] w-[35px]">
+              <Link href={'#'}>
+                <Icon icon="CarShoping" />
+              </Link>
+            </div>
+
+            <ThemeModeButton />
+          </div>
+        </nav>
+        {/* Input mobile*/}
+        <div className="md:hidden flex items-center justify-center pb-3">
+          <InputField
+            placeholder="Buscar Productos"
+            leftIcon={<Icon icon="SearchIcon" />}
+          />
+        </div>
+        {/* Menu */}
+        {isOpen && (
+          <div className="border-t-2 border-t-white">
+            <MenuMobile />
+          </div>
+        )}
       </div>
-      <ThemeModeButton />
     </div>
   );
-};
\ No newline at end of file
+};
+
+export default NavBar;
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
index 10546e4..27b25df 100644
--- a/src/components/pagination.tsx
+++ b/src/components/pagination.tsx
@@ -29,7 +29,7 @@ const Pagination: FC<paginationProps> = ({
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 32 32"
           >
-            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_bgCarrier"></g>
             <g
               id="SVGRepo_tracerCarrier"
               stroke-linecap="round"
@@ -45,7 +45,7 @@ const Pagination: FC<paginationProps> = ({
         className="w-12 h-7 border text-center"
         name="page"
         autoComplete="off"
-        value={page}
+        placeholder={page + ''}
       />
 
       <p className="flex justify-items-center text-center">de {maximo}</p>
@@ -65,14 +65,13 @@ const Pagination: FC<paginationProps> = ({
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 32 32"
           >
-            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g id="SVGRepo_bgCarrier"></g>
             <g
               id="SVGRepo_tracerCarrier"
               stroke-linecap="round"
               stroke-linejoin="round"
             ></g>
             <g id="SVGRepo_iconCarrier">
-              {' '}
               <path d="M21,2H11c-5,0-9,4-9,9v10c0,5,4,9,9,9h10c5,0,9-4,9-9V11C30,6,26,2,21,2z M19.7,16.7l-5,5C14.5,21.9,14.3,22,14,22 s-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l4.3-4.3l-4.3-4.3c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5,5C20.1,15.7,20.1,16.3,19.7,16.7z"></path>{' '}
             </g>
           </svg>
diff --git a/src/components/paymentMethod/payMethod.tsx b/src/components/paymentMethod/payMethod.tsx
index c8ea413..e4cae2e 100644
--- a/src/components/paymentMethod/payMethod.tsx
+++ b/src/components/paymentMethod/payMethod.tsx
@@ -6,15 +6,15 @@ interface PaymentMethodProps {
   link: string;
 }
 
-const PaymentMethod: React.FC<PaymentMethodProps> = ({ imageSrc, title, link }) => {
+const PaymentMethod: React.FC<PaymentMethodProps> = ({
+  imageSrc,
+  title,
+  link,
+}) => {
   return (
     <div className="flex justify-between items-center mr-5 ml-5">
-      <a
-        className="flex items-center"
-        href={link}
-        data-title="Medios de pago"
-      >
-        <IconText icon={imageSrc} text='' />
+      <a className="flex items-center" href={link} data-title="Medios de pago">
+        <IconText icon={imageSrc} text="" className="h-6 w-6" />
         <div>{title}</div>
       </a>
     </div>
diff --git a/src/types/icons.d.ts b/src/types/icons.d.ts
index 642a002..793fd83 100644
--- a/src/types/icons.d.ts
+++ b/src/types/icons.d.ts
@@ -1 +1 @@
-export type IconTypes = | 'CardCredit' | 'Cash' | 'Facebook' | 'icon' | 'Instagram' | 'MapLocation' | 'Moon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' 
\ No newline at end of file
+export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' 
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 66439ac..06ed4c5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -21,12 +21,12 @@ module.exports = {
       'text-dm': '#f1f1f1',
       white: '#fff',
     },
-    screen: {
+    screens: {
       xs: '480px',
       ms: '768px',
-      md: '990px',
+      md: '1080px',
       lg: '1200px',
-      xl: '1480',
+      xl: '1480px',
     },
     extend: {},
   },