diff --git a/src/App.js b/src/App.js
index 75af360..be57faa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,6 +3,7 @@ import Footer from "./shared-components/footer-component/Footer";
 import Navbar from "./shared-components/navbar-component/Navbar";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import i18next from "i18next";
+import { useTranslation } from "react-i18next";
 import Cookies from "js-cookie";
 import HomePage from "./homePage/Homepage";
 import ListingsPage from "./listings-page/ListingsPage";
@@ -30,6 +31,7 @@ function App() {
   const currentLanguage = langauges.find(
     (lang) => lang.code === currentLanguageCode
   );
+  const { t } = useTranslation();
 
   useEffect(() => {
     document.body.dir = currentLanguage.dir || "ltr";
diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js
index c9bbe8c..afe5953 100644
--- a/src/listings-page/ListingsPage.js
+++ b/src/listings-page/ListingsPage.js
@@ -17,7 +17,7 @@ import {
   ComboboxList,
   ComboboxOption,
 } from "@reach/combobox";
-import { formatRelative } from "date-fns";
+//import { formatRelative } from "date-fns";
 import Select from "react-select";
 
 import "@reach/combobox/styles.css";
@@ -26,6 +26,8 @@ import * as listingData from "./data/property-data.json";
 import "./ListingsPage.css";
 
 import compassImg from "./compass.svg";
+import { withTranslation } from "react-i18next";
+
 
 const libraries = ["places"];
 
@@ -111,7 +113,7 @@ export default function ListingsPage() {
 
   const { isLoaded, loadError } = useLoadScript({
     googleMapsApiKey: `https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
-     AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`,
+    AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`,
     libraries,
   });
 
@@ -119,7 +121,7 @@ export default function ListingsPage() {
   const [selectedBeds, setSelectedBeds] = useState(null);
   const [selectedBaths, setSelectedBaths] = useState(null);
 
-  const [markers, setMarkers] = React.useState([]);
+  //const [markers, setMarkers] = React.useState([]);
   const [selected, setSelected] = React.useState(null);
 
   const [budget, setBudget] = useState(null);
@@ -157,6 +159,7 @@ export default function ListingsPage() {
     setBath(e.value);
   };
 
+  const { t } = this.props;
   return (
 
     <div className="main_borders">
@@ -203,8 +206,8 @@ export default function ListingsPage() {
         >
           {listingData.Properties.map((house) =>
             (budget >= house.PRICE || !budget) &&
-            (bed == house.BEDS || !bed) &&
-            (bath == house.BATHS || !bath) ? (
+            (bed === house.BEDS || !bed) &&
+            (bath === house.BATHS || !bath) ? (
               <Marker
                 key={house.LISTING_ID}
                 position={{