diff --git a/next-i18next.config.js b/next-i18next.config.js
index ef7bdf1..6a4b3a4 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -1,4 +1,5 @@
 const path = require("path");
+
 module.exports = {
   i18n: {
     defaultLocale: "en",
diff --git a/src/components/AddServicePage/AddService.jsx b/src/components/AddServicePage/AddService.jsx
index 861a815..6d033c1 100644
--- a/src/components/AddServicePage/AddService.jsx
+++ b/src/components/AddServicePage/AddService.jsx
@@ -21,7 +21,6 @@ const AddService = ({ user }) => {
     e.preventDefault();
     const form = new FormData(e.target);
     const images = form.getAll("images");
-    console.log("in handle", serviceData);
     addService(user, images, serviceData);
   };
 
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 8b77597..c8c61c7 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -4,8 +4,8 @@ import React from "react";
 import Link from "next/link";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
-import { FooterContainer, MainContainer } from "./Footer.styled";
 import cookie from "cookie-cutter";
+import { FooterContainer, MainContainer } from "./Footer.styled";
 
 // eslint-disable-next-line arrow-body-style
 const Footer = () => {
@@ -15,7 +15,6 @@ const Footer = () => {
   const changeLocale = () => {
     const locale = router.locale === "en" ? "ku" : "en";
     cookie.set("NEXT_LOCALE", locale);
-    console.log(cookie.get("NEXT_LOCALE"));
     router.push(router.asPath, undefined, { locale });
   };
 
diff --git a/src/components/HeroComponents/LogoSection.jsx b/src/components/HeroComponents/LogoSection.jsx
index 90246fd..2b79a45 100644
--- a/src/components/HeroComponents/LogoSection.jsx
+++ b/src/components/HeroComponents/LogoSection.jsx
@@ -14,7 +14,7 @@ const LogoSection = () => {
         <div className="logo text-center">
           <h1>{t("home.makeLogo")}</h1>
           <h3>{t("home.designLogo")}</h3>
-          <Link href="/services_search?q=logo">
+          <Link href="/services_search?q=logo" passHref>
             <Btn>{t("home.tryKiraLogo")} </Btn>
           </Link>
         </div>
diff --git a/src/components/LargeProfileCard/LargeProfileCard.jsx b/src/components/LargeProfileCard/LargeProfileCard.jsx
index fe23c26..ee33382 100644
--- a/src/components/LargeProfileCard/LargeProfileCard.jsx
+++ b/src/components/LargeProfileCard/LargeProfileCard.jsx
@@ -70,7 +70,7 @@ LargeProfileCard.propTypes = {
   uid: PropTypes.string.isRequired,
   photoURL: PropTypes.string,
   displayName: PropTypes.string.isRequired,
-  job: PropTypes.string,
+  title: PropTypes.string,
   location: PropTypes.string,
   about: PropTypes.string,
   skills: PropTypes.array,
@@ -78,7 +78,7 @@ LargeProfileCard.propTypes = {
 
 LargeProfileCard.defaultProps = {
   photoURL: "",
-  job: "",
+  title: "",
   location: "",
   about: "",
   skills: [],
diff --git a/src/components/Modals/JoinModal.jsx b/src/components/Modals/JoinModal.jsx
index d32949a..296719b 100644
--- a/src/components/Modals/JoinModal.jsx
+++ b/src/components/Modals/JoinModal.jsx
@@ -38,29 +38,27 @@ const JoinModal = ({ showJoin, setShowJoin }) => {
 
   const { t } = useTranslation("navbar");
 
-  return (
-    <>
-      {showJoin && (
-        <Background onClick={closeModal} ref={modalRef}>
-          <animated.div style={animation}>
-            <ModalWrapper showJoin={showJoin}>
-              <ModalContent>
-                <h4>{t("navbar.joinNow")} </h4>
-                <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
-              </ModalContent>
-              <CloseModalButton onClick={() => setShowJoin((show) => !show)} />
-              <ModalBubbles>
-                <div className="uper-bigBubble" />
-                <div className="uper-smallBubble" />
-                <div className="bottom-bigBubble" />
-                <div className="bottom-smallBubble" />
-              </ModalBubbles>
-            </ModalWrapper>
-          </animated.div>
-        </Background>
-      )}
-    </>
-  );
+  if (showJoin)
+    return (
+      <Background onClick={closeModal} ref={modalRef}>
+        <animated.div style={animation}>
+          <ModalWrapper showJoin={showJoin}>
+            <ModalContent>
+              <h4>{t("navbar.joinNow")} </h4>
+              <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
+            </ModalContent>
+            <CloseModalButton onClick={() => setShowJoin((show) => !show)} />
+            <ModalBubbles>
+              <div className="uper-bigBubble" />
+              <div className="uper-smallBubble" />
+              <div className="bottom-bigBubble" />
+              <div className="bottom-smallBubble" />
+            </ModalBubbles>
+          </ModalWrapper>
+        </animated.div>
+      </Background>
+    );
+  return null;
 };
 
 export default JoinModal;
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index f032d25..a8c8d7f 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -5,11 +5,11 @@ import { MdSettings } from "react-icons/md";
 import { FiLogOut } from "react-icons/fi";
 import { useTranslation } from "next-i18next";
 import { auth } from "src/firebase/firebase";
+import Link from "next/link";
 import userContext from "../../context/context";
 import Searchbox from "./Searchbox";
 import { JoinBtn, Img, ProfileImg, DropDown } from "./Navbar.styled";
 import JoinModal from "../Modals/JoinModal";
-import Link from "next/link";
 
 const NavBar = () => {
   const [showJoin, setShowJoin] = useState(false);
@@ -26,7 +26,7 @@ const NavBar = () => {
     <Navbar bg="primary" collapseOnSelect expand="xl" variant="dark">
       <Container>
         <Navbar.Brand>
-          <Link href={"/"}>
+          <Link href="/" passHref>
             <Img
               src="/NavbarLogo.png"
               width="104px"
@@ -49,7 +49,7 @@ const NavBar = () => {
           ) : (
             <Nav className="w-100 d-flex justify-content-end">
               <Nav.Link>
-                <Link href={"/add_service"}>
+                <Link href="/add_service" passHref>
                   <FaPlus size="25px" className="text-white mt-1" />
                 </Link>
               </Nav.Link>
@@ -61,7 +61,7 @@ const NavBar = () => {
 
                 <Dropdown.Menu>
                   <Dropdown.Item>
-                    <Link href={`/profile/${user.uid}`}>
+                    <Link href={`/profile/${user.uid}`} passHref>
                       <div>
                         {user.photoURL ? (
                           <ProfileImg src={user.photoURL} roundedCircle fluid />
@@ -74,7 +74,7 @@ const NavBar = () => {
                   </Dropdown.Item>
 
                   <Dropdown.Item>
-                    <Link href="/settings">
+                    <Link href="/settings" passHref>
                       <div>
                         <MdSettings size="20px" />
                         <span className="mx-3 text-muted">{t("navbar.settings")}</span>
diff --git a/src/components/Navbar/Searchbox.jsx b/src/components/Navbar/Searchbox.jsx
index 3892f4e..1a51744 100644
--- a/src/components/Navbar/Searchbox.jsx
+++ b/src/components/Navbar/Searchbox.jsx
@@ -31,24 +31,22 @@ const Searchbox = () => {
 
   const { t } = useTranslation("navbar");
   return (
-    <>
-      <SearchForm className="d-flex md-shadow mx-2" onSubmit={handleSubmit}>
-        <InputGroup.Text id="basic-addon1">
-          <IoSearch size="25px" />
-          <DropdownButton id="dropdown-basic-button">
-            <Dropdown.Item onClick={setdropdowntrue}>{t("navbar.freelancers")}</Dropdown.Item>
-            <Dropdown.Item onClick={setdropdownfalse}>{t("navbar.services")}</Dropdown.Item>
-          </DropdownButton>
-        </InputGroup.Text>
-        <input
-          type="search"
-          placeholder={t(searchPlaceholder)}
-          aria-label="Search"
-          className="input"
-          onChange={handleInput}
-        />
-      </SearchForm>
-    </>
+    <SearchForm className="d-flex md-shadow mx-2" onSubmit={handleSubmit}>
+      <InputGroup.Text id="basic-addon1">
+        <IoSearch size="25px" />
+        <DropdownButton id="dropdown-basic-button">
+          <Dropdown.Item onClick={setdropdowntrue}>{t("navbar.freelancers")}</Dropdown.Item>
+          <Dropdown.Item onClick={setdropdownfalse}>{t("navbar.services")}</Dropdown.Item>
+        </DropdownButton>
+      </InputGroup.Text>
+      <input
+        type="search"
+        placeholder={t(searchPlaceholder)}
+        aria-label="Search"
+        className="input"
+        onChange={handleInput}
+      />
+    </SearchForm>
   );
 };
 export default Searchbox;
diff --git a/src/components/SellerContact/SellerContact.jsx b/src/components/SellerContact/SellerContact.jsx
index 6f9426b..f8c6cec 100644
--- a/src/components/SellerContact/SellerContact.jsx
+++ b/src/components/SellerContact/SellerContact.jsx
@@ -20,38 +20,36 @@ const SellerContact = ({ show, setShow, email, phone, name }) => {
       setShow(false);
     }
   };
-  return (
-    <>
-      {show && (
-        <Background onClick={closeModal} ref={modalRef}>
-          <animated.div style={animation}>
-            <ModalWrapper show={show}>
-              <ModalContent>
-                <h3 className="mb-4 text-primary">Contact me</h3>
-                <h4 className="mb-4">
-                  Name:
-                  <span className="mx-3">{name && name}</span>
-                </h4>
-                <h4 className="mb-4">
-                  Phone Number:
-                  {phone ? (
-                    <span className="mx-3">{phone && phone}</span>
-                  ) : (
-                    <span className="mx-3 text-muted">XXX</span>
-                  )}
-                </h4>
-                <h4 className="mb-4">
-                  Email:
-                  <span className="mx-3">{email && email}</span>
-                </h4>
-              </ModalContent>
-              <CloseModalButton onClick={() => setShow((show) => !show)} />
-            </ModalWrapper>
-          </animated.div>
-        </Background>
-      )}
-    </>
-  );
+  if (show)
+    return (
+      <Background onClick={closeModal} ref={modalRef}>
+        <animated.div style={animation}>
+          <ModalWrapper show={show}>
+            <ModalContent>
+              <h3 className="mb-4 text-primary">Contact me</h3>
+              <h4 className="mb-4">
+                Name:
+                <span className="mx-3">{name && name}</span>
+              </h4>
+              <h4 className="mb-4">
+                Phone Number:
+                {phone ? (
+                  <span className="mx-3">{phone && phone}</span>
+                ) : (
+                  <span className="mx-3 text-muted">XXX</span>
+                )}
+              </h4>
+              <h4 className="mb-4">
+                Email:
+                <span className="mx-3">{email && email}</span>
+              </h4>
+            </ModalContent>
+            <CloseModalButton onClick={() => setShow((show) => !show)} />
+          </ModalWrapper>
+        </animated.div>
+      </Background>
+    );
+  return null;
 };
 
 const Background = styled.div`
diff --git a/src/components/SettingsPage/SettingsPage.jsx b/src/components/SettingsPage/SettingsPage.jsx
index a3e9b37..c92edbd 100644
--- a/src/components/SettingsPage/SettingsPage.jsx
+++ b/src/components/SettingsPage/SettingsPage.jsx
@@ -2,9 +2,9 @@
 import { Card, Col, Row, Form, Button } from "react-bootstrap";
 import React, { useState, useEffect, useContext } from "react";
 import { useTranslation } from "next-i18next";
+import userContext from "src/context/context";
 import { Container, MainContainer } from "./SettingsPage.styled";
 import { getUserInfo, updateUserInDB, uploadImage } from "../../firebase/utilities";
-import userContext from "src/context/context";
 
 const SettingsPage = () => {
   const user = useContext(userContext);
diff --git a/src/firebase/firestore/__test__/firestore.test.js b/src/firebase/firestore/__test__/firestore.test.js
index 0f74d6f..ab45a0c 100644
--- a/src/firebase/firestore/__test__/firestore.test.js
+++ b/src/firebase/firestore/__test__/firestore.test.js
@@ -16,8 +16,8 @@ import {
   deleteField,
   Timestamp,
 } from "firebase/firestore";
-import { addUserAdmin, addServiceAdmin, getRandomKey } from "./helpers";
 import path from "path";
+import { addUserAdmin, addServiceAdmin, getRandomKey } from "./helpers";
 
 let testEnv;
 
@@ -41,9 +41,12 @@ afterAll(async () => {
 
 describe("firestore security rules", () => {
   const uid = "AuthedUserId";
-  let auth, unauth;
-  let userRef, userData;
-  let serviceRef, serviceData;
+  let auth;
+  let unauth;
+  let userRef;
+  let userData;
+  let serviceRef;
+  let serviceData;
 
   beforeAll(() => {
     auth = testEnv.authenticatedContext(uid).firestore();
@@ -228,12 +231,11 @@ describe("firestore security rules", () => {
 
     describe("users collection", () => {
       let changedUserData;
-      beforeEach(
-        () =>
-          (changedUserData = {
-            displayName: "New Name",
-          }),
-      );
+      beforeEach(() => {
+        changedUserData = {
+          displayName: "New Name",
+        };
+      });
 
       test("allow reads", async () => {
         const otherUser = doc(unauth, "users/otherUser");
diff --git a/src/firebase/index.js b/src/firebase/index.js
index ccf6338..ce0506f 100644
--- a/src/firebase/index.js
+++ b/src/firebase/index.js
@@ -1 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
 export { default } from "./firebase";
diff --git a/src/firebase/utilities.js b/src/firebase/utilities.js
index effd298..887b186 100644
--- a/src/firebase/utilities.js
+++ b/src/firebase/utilities.js
@@ -1,7 +1,14 @@
 import { db, storage } from "./firebase";
+
 const services = db.collection("services");
 const users = db.collection("users");
 
+export const uploadImage = async (path, file) => {
+  const fileRef = storage.ref().child(`${path}/${file.name}`);
+  await fileRef.put(file);
+  return fileRef.getDownloadURL();
+};
+
 export const addService = async (user, images, serviceData) => {
   const newServiceRef = services.doc();
   const { uid, displayName, photoURL } = user;
@@ -14,14 +21,6 @@ export const addService = async (user, images, serviceData) => {
   serviceData.revisions = Number(serviceData.revisions);
   serviceData.price = Number(serviceData.price);
 
-  console.log("commit", {
-    provider: {
-      displayName,
-      photoURL,
-      uid,
-    },
-    ...serviceData,
-  });
   return newServiceRef.set({
     provider: {
       displayName,
@@ -71,7 +70,7 @@ export const getService = async (uid) => {
 };
 
 export const getUserInfo = async (user) =>
-  await users
+  users
     .doc(user.uid)
     .get()
     .then((doc) => doc.data());
@@ -104,12 +103,6 @@ export const getAllServicesUID = async () => {
   return uids;
 };
 
-export const uploadImage = async (path, file) => {
-  const fileRef = storage.ref().child(`${path}/${file.name}`);
-  await fileRef.put(file);
-  return fileRef.getDownloadURL();
-};
-
 export const updateProfilePicture = async (user, file) => {
   file.name = "profilePicture";
   const photoURL = await uploadImage(user.uid, file);
diff --git a/src/pages/add_service/index.jsx b/src/pages/add_service/index.jsx
index 12fdc5f..96061c8 100644
--- a/src/pages/add_service/index.jsx
+++ b/src/pages/add_service/index.jsx
@@ -4,6 +4,7 @@ import AddService from "../../components/AddServicePage/AddService";
 import userContext from "../../context/context";
 
 const addService = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const user = useContext(userContext);
   return <AddService user={user} />;
 };
diff --git a/src/pages/service/[uid]/index.jsx b/src/pages/service/[uid]/index.jsx
index e1f740c..f2d9bb1 100644
--- a/src/pages/service/[uid]/index.jsx
+++ b/src/pages/service/[uid]/index.jsx
@@ -11,6 +11,7 @@ import ServicePricingInformation from "src/components/ServicePricingInformation/
 import { getService, getAllServicesUID, getUserInfo } from "src/firebase/utilities";
 import CustomCarousel from "src/components/CustomCarousel/CustomCarousel";
 import ServiceHeaderProfile from "src/components/ServiceHeaderProfile/ServiceHeaderProfile";
+import Image from "next/image";
 
 const Service = ({ service, user }) => (
   <Container>
@@ -29,7 +30,7 @@ const Service = ({ service, user }) => (
           <Container style={{ height: "500px", marginBottom: "8rem" }}>
             <CustomCarousel
               thumbnail
-              items={service.images && service.images.map((image) => <img src={image} alt="" />)}
+              items={service.images && service.images.map((image) => <Image src={image} alt="" />)}
             />
           </Container>
         </Container>
diff --git a/src/pages/services_search/index.jsx b/src/pages/services_search/index.jsx
index 28a6f60..bc51534 100644
--- a/src/pages/services_search/index.jsx
+++ b/src/pages/services_search/index.jsx
@@ -85,8 +85,6 @@ Services.propTypes = {
 export const getServerSideProps = async (context) => {
   const services = await getAllServices();
 
-  console.log(services.length);
-
   const query = context.query.q;
   let results = [];