diff --git a/app/all/page.js b/app/all/page.js
index ab68f57..d89c08c 100644
--- a/app/all/page.js
+++ b/app/all/page.js
@@ -8,6 +8,8 @@ import QuestionMarkOutlinedIcon from '@mui/icons-material/QuestionMarkOutlined';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import ItsAvatar from '@/components/modules/ItsAvatar'
 import dynamic from 'next/dynamic'
+import { orderByDistance, getDistance } from 'geolib';
+
 const ShowMyLocation = dynamic(() => import('@/components/modules/ShowMyLocation'), { ssr: false })
 
 
@@ -19,12 +21,13 @@ export default function AllBusinesses() {
   const [businesses, setBusinesses] = useState(false);
   const [latitude, setLatitude] = useState("")
   const [longitude, setLongitude] = useState("")
+  const [businessesOrderByDistance, setBusinessesOrderByDistance] = useState("")
 
   const setLocation = function (latitude, longitude) {
     setLatitude(latitude)
     setLongitude(longitude)
   }
-  console.log("geo", latitude, longitude);
+
   useEffect(() => {
     const getBusinesses = async () => {
       try {
@@ -41,8 +44,19 @@ export default function AllBusinesses() {
     }
     getBusinesses()
     setMounted(true)
+
   }, [])
 
+  useEffect(() => {
+    if (businesses || latitude) {
+      setBusinessesOrderByDistance(orderByDistance({ latitude, longitude },
+        businesses.filter((business) => ( business.latitude)).map((business) => (
+        {
+          latitude: business.latitude, longitude: business.longitude, ...business,
+        }))))
+    };
+  }, [latitude])
+
   const goToIndex = () => {
     router.push("/")
   }
@@ -86,23 +100,44 @@ export default function AllBusinesses() {
             </AccordionDetails>
           </Accordion>
           <ShowMyLocation setLocation={setLocation} />
-          {businesses ? businesses.map((business) => {
-            console.log("business Geo", business.longitude ,business.latitude);
-            return (
-              <List key={business._id} sx={{ width: '100%', maxWidth: 700, bgcolor: 'background.paper' }}>
-                <ListItemButton onClick={() => router.push(`/${business.businessName}`)}>
-                  <ListItemAvatar>
-                    <Avatar>
-                      <ItsAvatar userCodeOrBusinessBrand={business.businessName} isAvatar={business.isAvatar} alt="workers avatar" />
-                    </Avatar>
-                  </ListItemAvatar>
-                  <ListItem dense secondaryAction={<ListItemText sx={{ ml: 5 }} align="right" primary={business.businessBrand} secondary={business.bio} />} >
-                    <ListItemText primary="14" secondary="km" />
-                  </ListItem>
-                </ListItemButton>
-              </List>
-            )
-          }) :
+          {businesses ?
+            businessesOrderByDistance ?
+              businessesOrderByDistance.map((business) => {
+                return (
+                  <List key={business._id} sx={{ width: '100%', maxWidth: 700, bgcolor: 'background.paper' }}>
+                    <ListItemButton onClick={() => router.push(`/${business.businessName}`)}>
+                      <ListItemAvatar>
+                        <Avatar>
+                          <ItsAvatar userCodeOrBusinessBrand={business.businessName} isAvatar={business.isAvatar} alt="workers avatar" />
+                        </Avatar>
+                      </ListItemAvatar>
+                      <ListItem dense secondaryAction={<ListItemText sx={{ ml: 5 }} align="right" primary={business.businessBrand} secondary={business.bio} />} >
+                        <ListItemText
+                          primary={(getDistance({ latitude, longitude }, { latitude: business.latitude, longitude: business.longitude })/1000).toFixed()}
+                          secondary="km"
+                        />
+
+                      </ListItem>
+                    </ListItemButton>
+                  </List>
+                )
+              })
+              :
+              businesses.map((business) => {
+                return (
+                  <List key={business._id} sx={{ width: '100%', maxWidth: 700, bgcolor: 'background.paper' }}>
+                    <ListItemButton onClick={() => router.push(`/${business.businessName}`)}>
+                      <ListItemAvatar>
+                        <Avatar>
+                          <ItsAvatar userCodeOrBusinessBrand={business.businessName} isAvatar={business.isAvatar} alt="workers avatar" />
+                        </Avatar>
+                      </ListItemAvatar>
+                      <ListItem dense secondaryAction={<ListItemText sx={{ ml: 5 }} align="right" primary={business.businessBrand} secondary={business.bio} />} >
+                      </ListItem>
+                    </ListItemButton>
+                  </List>
+                )
+              }) :
             <Typography>کسب و کاری برای نمایش وجود ندارد </Typography>
           }
         </Box>
diff --git a/package-lock.json b/package-lock.json
index 604cbe1..2b2342d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "cookie": "^0.6.0",
         "crypto": "^1.0.1",
         "fastest-validator": "^1.18.0",
+        "geolib": "^3.3.4",
         "jsonwebtoken": "^9.0.2",
         "leaflet": "^1.9.4",
         "leaflet-defaulticon-compatibility": "^0.1.2",
@@ -1969,6 +1970,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/geolib": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/geolib/-/geolib-3.3.4.tgz",
+      "integrity": "sha512-EicrlLLL3S42gE9/wde+11uiaYAaeSVDwCUIv2uMIoRBfNJCn8EsSI+6nS3r4TCKDO6+RQNM9ayLq2at+oZQWQ=="
+    },
     "node_modules/getpass": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
diff --git a/package.json b/package.json
index 0e45f49..8429269 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "cookie": "^0.6.0",
     "crypto": "^1.0.1",
     "fastest-validator": "^1.18.0",
+    "geolib": "^3.3.4",
     "jsonwebtoken": "^9.0.2",
     "leaflet": "^1.9.4",
     "leaflet-defaulticon-compatibility": "^0.1.2",