diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..799d323 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,34 +1,23 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container d-flex">
+  <div class="dropdown shadow-none">
+    <button
+      class="btn btn-secondary dropdown-toggle shadow-none Sr-16"
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <fa-icon [icon]="icon_store" style="color: black;"></fa-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
-
-<!-- <div class="dropdown" dropdown>
-    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
-    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
-      <a class="dropdown-item"> Profile</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
-    </div>
-  </div> -->
+</div>

diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..799d323 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,34 +1,23 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container d-flex">
+  <div class="dropdown shadow-none">
+    <button
+      class="btn btn-secondary dropdown-toggle shadow-none Sr-16"
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <fa-icon [icon]="icon_store" style="color: black;"></fa-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
-
-<!-- <div class="dropdown" dropdown>
-    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
-    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
-      <a class="dropdown-item"> Profile</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
-    </div>
-  </div> -->
+</div>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..8633050 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -2,29 +2,16 @@
     button{
         background: none;
         border: none;
-        outline: none;
         color: var(--base-color-dark) !important;
     }
-    button:focus{
-        outline: none !important;
-    }
     .dropdown-menu{
         width: 12rem;
-        position: absolute !important;
         left: 5px !important;
         li{
-            background-color: var(--base-color-gray);
             &:hover{
                 background: var(--base-color-gray-dark);
             }
         }
     }
  
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+}
\ No newline at end of file

diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..799d323 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,34 +1,23 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container d-flex">
+  <div class="dropdown shadow-none">
+    <button
+      class="btn btn-secondary dropdown-toggle shadow-none Sr-16"
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <fa-icon [icon]="icon_store" style="color: black;"></fa-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
-
-<!-- <div class="dropdown" dropdown>
-    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
-    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
-      <a class="dropdown-item"> Profile</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
-    </div>
-  </div> -->
+</div>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..8633050 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -2,29 +2,16 @@
     button{
         background: none;
         border: none;
-        outline: none;
         color: var(--base-color-dark) !important;
     }
-    button:focus{
-        outline: none !important;
-    }
     .dropdown-menu{
         width: 12rem;
-        position: absolute !important;
         left: 5px !important;
         li{
-            background-color: var(--base-color-gray);
             &:hover{
                 background: var(--base-color-gray-dark);
             }
         }
     }
  
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
index a3acd29..ad52d9e 100644
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -1,5 +1,5 @@
-<div class="footer__background  p-3">
-    <div class="content">
+<div class="footer__background has-bg-dark  p-3">
+    <div class="content d-flex  justify-content-center">
         <section class="d-flex flex-column justify-content-start align-items-center">
             <span class="text-center"><strong class="Ws-20">Acerca de</strong></span>
             <p class="text-center Tx-14">Confianza y seguridad</p>
@@ -20,7 +20,7 @@
             <p class="text-center Tx-14">País Colombia</p>
         </section>
     </div>
-    <section class="image-container">
+    <section class="image-container d-flex justify-content-center align-items-center pt-3">
         <img src="../../../../assets/images/svg/wtredata.svg" alt="" width="79px" height="60px">
     </section>
 </div>

diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..799d323 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,34 +1,23 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container d-flex">
+  <div class="dropdown shadow-none">
+    <button
+      class="btn btn-secondary dropdown-toggle shadow-none Sr-16"
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <fa-icon [icon]="icon_store" style="color: black;"></fa-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
-
-<!-- <div class="dropdown" dropdown>
-    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
-    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
-      <a class="dropdown-item"> Profile</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
-    </div>
-  </div> -->
+</div>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..8633050 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -2,29 +2,16 @@
     button{
         background: none;
         border: none;
-        outline: none;
         color: var(--base-color-dark) !important;
     }
-    button:focus{
-        outline: none !important;
-    }
     .dropdown-menu{
         width: 12rem;
-        position: absolute !important;
         left: 5px !important;
         li{
-            background-color: var(--base-color-gray);
             &:hover{
                 background: var(--base-color-gray-dark);
             }
         }
     }
  
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
index a3acd29..ad52d9e 100644
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -1,5 +1,5 @@
-<div class="footer__background  p-3">
-    <div class="content">
+<div class="footer__background has-bg-dark  p-3">
+    <div class="content d-flex  justify-content-center">
         <section class="d-flex flex-column justify-content-start align-items-center">
             <span class="text-center"><strong class="Ws-20">Acerca de</strong></span>
             <p class="text-center Tx-14">Confianza y seguridad</p>
@@ -20,7 +20,7 @@
             <p class="text-center Tx-14">País Colombia</p>
         </section>
     </div>
-    <section class="image-container">
+    <section class="image-container d-flex justify-content-center align-items-center pt-3">
         <img src="../../../../assets/images/svg/wtredata.svg" alt="" width="79px" height="60px">
     </section>
 </div>
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index bfae8ab..ffd6965 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,11 +1,7 @@
-
 .footer__background{
     height: 252px;
-    background: var(--base-color-dark);
     color: var(--base-color-white);
     .content{
-        display: flex;
-        justify-content: space-around;
         section{
             width: 16rem;
         }
@@ -18,11 +14,4 @@
 
 span{
     margin-bottom:20px ;
-}
-
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
 }
\ No newline at end of file

diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..799d323 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,34 +1,23 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container d-flex">
+  <div class="dropdown shadow-none">
+    <button
+      class="btn btn-secondary dropdown-toggle shadow-none Sr-16"
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <fa-icon [icon]="icon_store" style="color: black;"></fa-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
-
-<!-- <div class="dropdown" dropdown>
-    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
-    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
-      <a class="dropdown-item"> Profile</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
-    </div>
-  </div> -->
+</div>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..8633050 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -2,29 +2,16 @@
     button{
         background: none;
         border: none;
-        outline: none;
         color: var(--base-color-dark) !important;
     }
-    button:focus{
-        outline: none !important;
-    }
     .dropdown-menu{
         width: 12rem;
-        position: absolute !important;
         left: 5px !important;
         li{
-            background-color: var(--base-color-gray);
             &:hover{
                 background: var(--base-color-gray-dark);
             }
         }
     }
  
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
index a3acd29..ad52d9e 100644
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -1,5 +1,5 @@
-<div class="footer__background  p-3">
-    <div class="content">
+<div class="footer__background has-bg-dark  p-3">
+    <div class="content d-flex  justify-content-center">
         <section class="d-flex flex-column justify-content-start align-items-center">
             <span class="text-center"><strong class="Ws-20">Acerca de</strong></span>
             <p class="text-center Tx-14">Confianza y seguridad</p>
@@ -20,7 +20,7 @@
             <p class="text-center Tx-14">País Colombia</p>
         </section>
     </div>
-    <section class="image-container">
+    <section class="image-container d-flex justify-content-center align-items-center pt-3">
         <img src="../../../../assets/images/svg/wtredata.svg" alt="" width="79px" height="60px">
     </section>
 </div>
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index bfae8ab..ffd6965 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,11 +1,7 @@
-
 .footer__background{
     height: 252px;
-    background: var(--base-color-dark);
     color: var(--base-color-white);
     .content{
-        display: flex;
-        justify-content: space-around;
         section{
             width: 16rem;
         }
@@ -18,11 +14,4 @@
 
 span{
     margin-bottom:20px ;
-}
-
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
 }
\ No newline at end of file
diff --git a/src/app/shared/components/search/search.component.html b/src/app/shared/components/search/search.component.html
index 9573d45..6fed7bf 100644
--- a/src/app/shared/components/search/search.component.html
+++ b/src/app/shared/components/search/search.component.html
@@ -1,16 +1,14 @@
-<main>
-  <div class="main-container">
-      <label for="">
-        <input
-          class=""
-          type="text"
-          placeholder="Buscar: Hoteles, restaurantes, tiendas, etc."
-          [(ngModel)]="search"
-          (ngModelChange)="onSearchChange()"
-        />
-        <button>
-          <fa-icon [icon]="icon_search"></fa-icon>
-        </button>
-      </label>
-  </div>
-</main>
+<div class="main-container d-flex">
+  <label class="d-flex" for="">
+    <input
+      class=""
+      type="text"
+      placeholder="Buscar: Hoteles, restaurantes, tiendas, etc."
+      [(ngModel)]="search"
+      (ngModelChange)="onSearchChange()"
+    />
+    <button class="has-bg-primary">
+      <fa-icon [icon]="icon_search"></fa-icon>
+    </button>
+  </label>
+</div>

diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
index 52fe718..799d323 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.html
@@ -1,34 +1,23 @@
-<main>
-  <div class="main-container">
-    <div class="dropdown">
-      <button
-        class="btn btn-secondary dropdown-toggle Sr-16"
-        type="button"
-        id="dropdownMenu2"
-        data-bs-toggle="dropdown"
-        aria-expanded="false"
-        [ngStyle]="{ color: getTextColor() }"
-      >
-        <fa-icon [icon]="icon_store" style="color: black;"></fa-icon> {{ name }}
-      </button>
-      <ul class="dropdown-menu " aria-labelledby="dropdownMenu2">
-        <li *ngFor="let element of elements">
-          <button class="dropdown-item" type="button">
-            <fa-icon [icon]="element.icon"></fa-icon> {{ element.name }}
-          </button>
-        </li>
-      </ul>
-    </div>
+<div class="main-container d-flex">
+  <div class="dropdown shadow-none">
+    <button
+      class="btn btn-secondary dropdown-toggle shadow-none Sr-16"
+      type="button"
+      id="dropdownMenu2"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+      [ngStyle]="{ color: getTextColor() }"
+    >
+      <fa-icon [icon]="icon_store" style="color: black;"></fa-icon>
+      {{ name }}
+    </button>
+    <ul class="dropdown-menu has-bg-gray" aria-labelledby="dropdownMenu2">
+      <li *ngFor="let element of elements">
+        <button class="dropdown-item" type="button">
+          <fa-icon [icon]="element.icon"></fa-icon>
+          {{ element.name }}
+        </button>
+      </li>
+    </ul>
   </div>
-</main>
-
-
-<!-- <div class="dropdown" dropdown>
-    <button class="dropdown-toggle text-light" dropdownToggle> Manage</button>
-    <div class="dropdown-menu mt-2 mr-3" *dropdownMenu>
-      <a class="dropdown-item"> Profile</a>
-      <a class="dropdown-item" href="#">Another action</a>
-      <div class="dropdown-divider"></div>
-      <a class="dropdown-item"><i class="fa fa-sign-out"></i>New</a>
-    </div>
-  </div> -->
+</div>
diff --git a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
index 7bd79ba..8633050 100644
--- a/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
+++ b/src/app/shared/components/dropdown-categories/dropdown-categories.component.scss
@@ -2,29 +2,16 @@
     button{
         background: none;
         border: none;
-        outline: none;
         color: var(--base-color-dark) !important;
     }
-    button:focus{
-        outline: none !important;
-    }
     .dropdown-menu{
         width: 12rem;
-        position: absolute !important;
         left: 5px !important;
         li{
-            background-color: var(--base-color-gray);
             &:hover{
                 background: var(--base-color-gray-dark);
             }
         }
     }
  
-}
-
-.main-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
+}
\ No newline at end of file
diff --git a/src/app/shared/components/footer/footer.component.html b/src/app/shared/components/footer/footer.component.html
index a3acd29..ad52d9e 100644
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -1,5 +1,5 @@
-<div class="footer__background  p-3">
-    <div class="content">
+<div class="footer__background has-bg-dark  p-3">
+    <div class="content d-flex  justify-content-center">
         <section class="d-flex flex-column justify-content-start align-items-center">
             <span class="text-center"><strong class="Ws-20">Acerca de</strong></span>
             <p class="text-center Tx-14">Confianza y seguridad</p>
@@ -20,7 +20,7 @@
             <p class="text-center Tx-14">País Colombia</p>
         </section>
     </div>
-    <section class="image-container">
+    <section class="image-container d-flex justify-content-center align-items-center pt-3">
         <img src="../../../../assets/images/svg/wtredata.svg" alt="" width="79px" height="60px">
     </section>
 </div>
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index bfae8ab..ffd6965 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -1,11 +1,7 @@
-
 .footer__background{
     height: 252px;
-    background: var(--base-color-dark);
     color: var(--base-color-white);
     .content{
-        display: flex;
-        justify-content: space-around;
         section{
             width: 16rem;
         }
@@ -18,11 +14,4 @@
 
 span{
     margin-bottom:20px ;
-}
-
-.image-container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top:26px;
 }
\ No newline at end of file
diff --git a/src/app/shared/components/search/search.component.html b/src/app/shared/components/search/search.component.html
index 9573d45..6fed7bf 100644
--- a/src/app/shared/components/search/search.component.html
+++ b/src/app/shared/components/search/search.component.html
@@ -1,16 +1,14 @@
-<main>
-  <div class="main-container">
-      <label for="">
-        <input
-          class=""
-          type="text"
-          placeholder="Buscar: Hoteles, restaurantes, tiendas, etc."
-          [(ngModel)]="search"
-          (ngModelChange)="onSearchChange()"
-        />
-        <button>
-          <fa-icon [icon]="icon_search"></fa-icon>
-        </button>
-      </label>
-  </div>
-</main>
+<div class="main-container d-flex">
+  <label class="d-flex" for="">
+    <input
+      class=""
+      type="text"
+      placeholder="Buscar: Hoteles, restaurantes, tiendas, etc."
+      [(ngModel)]="search"
+      (ngModelChange)="onSearchChange()"
+    />
+    <button class="has-bg-primary">
+      <fa-icon [icon]="icon_search"></fa-icon>
+    </button>
+  </label>
+</div>
diff --git a/src/app/shared/components/search/search.component.scss b/src/app/shared/components/search/search.component.scss
index ff77bee..ea2ca86 100644
--- a/src/app/shared/components/search/search.component.scss
+++ b/src/app/shared/components/search/search.component.scss
@@ -5,24 +5,14 @@
 
 .main-container {
   padding: 0.5rem 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  label {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
   input {
-    width: 590px;
-    height: 50px;
+    width: --webkit-fill-available;
     border: none;
-    background: rgb(226, 226, 226);
+    background: var(--base-color-gray-light);
     padding: 0.5rem 1rem;
-    border-top: 1px solid #000000;
-    border-bottom: 1px solid #000000;
-    border-left: 1px solid #000000;
+    border-top: 1px solid var(--base-color-dark);
+    border-bottom: 1px solid var(--base-color-dark);
+    border-left: 1px solid var(--base-color-dark);
     border-radius: var(--base-rounded-medium) 0px 0px var(--base-rounded-medium);
   }
 
@@ -30,16 +20,12 @@
     outline: none;
   }
   button {
-    height: 50px;
-    width: 65px;
+    width: 3rem;
     border: none;
     padding: 0.5rem;
     border-top: 1px solid #000000;
     border-right: 1px solid #000000;
     border-bottom: 1px solid #000000;
-    /* border: solid 1px rgb(212, 212, 212); */
-    /* top-left | top-right | bottom-right | bottom-left */
     border-radius: 0px var(--base-rounded-medium) var(--base-rounded-medium) 0px;
-    background: var(--base-color-primary);
   }
 }