diff --git a/src/App.js b/src/App.js
index f9e81e0..f0938c8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,5 @@
 import './App.css';
-
+import { getCoordinate } from './utils/checkCoordinatesDistance';
 import {useEffect, useState} from 'react';
 
 import Post from './Post';
@@ -17,6 +17,7 @@ function App() {
       })
     }
     renderElements();
+    getCoordinate();
   },[])
   return (
     <div className="App">
diff --git a/src/Post.js b/src/Post.js
index 7c6cf6f..404ef62 100644
--- a/src/Post.js
+++ b/src/Post.js
@@ -1,6 +1,6 @@
 import PostCard from './components/PostCard/index'
-import { checkCoordinatesDistance } from './utils/checkCoordinatesDistance';
-
+import { checkCoordinatesDistance, getCurrentLocation } from './utils/checkCoordinatesDistance';
+import './index.css';
 // Task 1: Form the photo/video layout based on the available resources from `props.data.resources` (Refer notion link)
 
 // Task 2: Show the distance of the post from the user’s location
@@ -9,18 +9,43 @@ import { checkCoordinatesDistance } from './utils/checkCoordinatesDistance';
 // 3. Supply both the latitude and longitude to checkCoordinatesDistance() util function to get the distance in kilometers
 
 // These are hardcoded coordinates of Jaipur and Lucknow.
-const lat1 = 26.9124; // replace with user latitude
-const lon1 = 75.7873; // replace with user longitude
-const lat2 = 26.8467; // replace with post latitude
-const lon2 = 80.9462; // replace with post longitude
+//const lat1 = 26.9124; // replace with user latitude
+//const lon1 = 75.7873; // replace with user longitude
+// const lat2 = 26.8467; // replace with post latitude
+// const lon2 = 80.9462; // replace with post longitude
+
 export default function Post(props){
-    const distance = checkCoordinatesDistance(lat1,lon1,lat2,lon2);
+    const coordinates= props.data.location && JSON.parse(props.data.location).coordinates;
+    const currentCoordinate = getCurrentLocation();
+    const distance = checkCoordinatesDistance(currentCoordinate.lat1,currentCoordinate.lon1,coordinates[0],coordinates[1]);
     const milk = props.data.highestMilk ? props.data.highestMilk : props.data.currentMilk;
     const tel = `tel:${props.data.contact}`;
+    const images = props.data.resources;
+    
+    const getClassName = (index) =>{
+        if(images.length === 1){
+            return 'height_100 width_100'
+        }
+        else if(images.length === 2 ){
+            return 'height_50 width_100'
+        }else if(images.length === 3){
+             if(index ===  0){
+                 return 'height_50 width_100'
+             }else {
+                 return 'height_50 width_50'
+             }
+        }else{
+            return 'height_50 width_50'
+        }
+    }
     return (
         <PostCard>
             <PostCard.Resources>
-                <PostCard.Image src={JSON.parse(props.data.resources[0]).url} resource={JSON.parse(props.data.resources[0])}/>
+                <div style={{display:'flex',flexWrap:'wrap'}}>
+                {images.map((image, index) => {
+                   return (<div className={`${getClassName(index)} extra_props`} key={index}><PostCard.Image  src={JSON.parse(image).url} resource={JSON.parse(image)}/></div>)
+                })}
+                </div>
             </PostCard.Resources>
             <PostCard.Group>
                 <PostCard.Date>
diff --git a/src/components/PostCard/styles/post.js b/src/components/PostCard/styles/post.js
index 2587825..12a6555 100644
--- a/src/components/PostCard/styles/post.js
+++ b/src/components/PostCard/styles/post.js
@@ -29,12 +29,12 @@ export const Resources = styled.div`
     width: 100%;
     background: #eee;
     margin-bottom: 10px;
+    overflow:hidden;
 `;
 
 export const Image = styled.img`
     width: 100%;
-    height: 100%;
-    object-fit: contain;
+    height:100%;
 `;
 
 export const PostDescription = styled.div`
diff --git a/src/index.css b/src/index.css
index ec2585e..697d56a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,37 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+
+.height_50 {
+  height: 75px;
+}
+
+.width_50 {
+  width: 50%;
+}
+
+.height_100 {
+  height: 100%
+}
+.margin_left{
+  margin-left:5px;
+}
+.margin_right {
+  margin-right: 5px;
+}
+.margin_top {
+  margin-top: 5px;
+}
+.margin_bottom {
+  margin-bottom: 5px;
+}
+
+
+.width_100 {
+  width: 100%
+}
+.extra_props{
+  border-radius:8px;
+  overflow: hidden;
+}
diff --git a/src/utils/checkCoordinatesDistance.js b/src/utils/checkCoordinatesDistance.js
index 9f0dd9d..a067c57 100644
--- a/src/utils/checkCoordinatesDistance.js
+++ b/src/utils/checkCoordinatesDistance.js
@@ -11,4 +11,18 @@ export function checkCoordinatesDistance(lat1,lon1,lat2,lon2){
         d = R * c; // Distance in km
     }
     return d;
+}
+let post ={lat1:0,lon1:0}
+const showPosition = (position) =>{
+    post.lat1 = position.coords.latitude;
+    post.lon1 = position.coords.longitude;
+}
+export const getCoordinate = () => {
+    post= {lat1:0,lon1:0}
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(showPosition);
+    }
+}
+export const getCurrentLocation = () =>{
+    return post;
 }
\ No newline at end of file