src/components/AuthPages/Login/index.jsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from "react-router-dom";
 import appleLogo from "../../../assets/images/apple-black.svg";
 import facebookLogo from "../../../assets/images/facebook-4.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
+import linkedInLogo from "../../../assets/images/Linkedin.png";
 import WrenchBoard from "../../../assets/images/wrenchboard.png";
 import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
@@ -232,13 +233,14 @@ export default function Login() {
                           )}
                         </button>
                       </div>
-                      <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
-                      <BrandBtn
-                        link="#"
-                        imgSrc={facebookLogo}
-                        brand="Facebook"
-                      />
-                      <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
+                        <BrandBtn link="#" imgSrc={googleLogo} brand="Google" />
+                        <BrandBtn link="#" imgSrc={appleLogo} brand="Apple" />
+                      </div>
+                      <div className="sm:flex sm:justify-between sm:items-center sm:space-x-2">
+                        <BrandBtn link="#" imgSrc={facebookLogo} brand="Facebook" />
+                        <BrandBtn link="#" imgSrc={linkedInLogo} brand="LinkedIn" />
+                      </div>
                     </div>
                   </div>
                 ) : (
@@ -346,7 +348,7 @@ const BrandBtn = ({ link, imgSrc, brand }) => {
   };
 
   return (
-    <div className="flex justify-center bottomMargin">
+    <div className="w-full sm:w-1/2 flex justify-center bottomMargin">
       <a
         // onClick={doGoogle}
         href="#dd"