diff --git a/restapi/src/builders/locationBuilder.ts b/restapi/src/builders/locationBuilder.ts
index 55bcfe4..deb69bc 100644
--- a/restapi/src/builders/locationBuilder.ts
+++ b/restapi/src/builders/locationBuilder.ts
@@ -16,10 +16,11 @@ export function thingToLocation(locationThing:Thing) : Location {
         latitude: getDecimal(locationThing, SCHEMA_INRUPT.latitude)!,
         longitude: getDecimal(locationThing, SCHEMA_INRUPT.longitude)!,
         isShared: false,
-        isOwnLocation: false
+        isOwnLocation: false,
+        owner:""
     }
 }
-
+//TODO: añadir owner
 export function locationToThing(location:Location):Thing{
     return buildThing(createThing())
         .addStringNoLocale(SCHEMA_INRUPT.name, location.name)
diff --git a/restapi/src/types.d.ts b/restapi/src/types.d.ts
index cac0b87..b092363 100644
--- a/restapi/src/types.d.ts
+++ b/restapi/src/types.d.ts
@@ -7,14 +7,16 @@ export type Location = {
     latitude:number,
     longitude:number
     isShared:boolean,
-    isOwnLocation:boolean
+    isOwnLocation:boolean,
+    owner:string
 };
 
 export type Review = {
     markerId:string,
     comment:string,
     score:double,
-    encodedPhoto:string
+    encodedPhoto:string,
+    owner:string
 }
 
 export type Friend = {
diff --git a/webapp/src/components/FriendsPage/FriendsView.tsx b/webapp/src/components/FriendsPage/FriendsView.tsx
index 86c324c..0d8684e 100644
--- a/webapp/src/components/FriendsPage/FriendsView.tsx
+++ b/webapp/src/components/FriendsPage/FriendsView.tsx
@@ -1,25 +1,23 @@
 import React, { ReactNode } from 'react';
 import {
-  Stack,
-  Container,
-  Box,
-  Flex,
-  Text,
-  Heading,
-  SimpleGrid,
-  Grid,
-  Table,
-  Thead,
-  Th,
-  Tr,
-  Tbody,
-  useColorModeValue,
-  FormControl,
-  Input,
-  FormLabel,
-  Button,
-  HStack,
-  Spinner,
+    Stack,
+    Container,
+    Box,
+    Text,
+    Heading,
+    Grid,
+    Table,
+    Thead,
+    Th,
+    Tr,
+    Tbody,
+    useColorModeValue,
+    FormControl,
+    Input,
+    FormLabel,
+    Button,
+    HStack,
+    Spinner, useToast,
 } from '@chakra-ui/react';
 import {useGetFriendsQuery, useAddFriendMutation} from "../../app/services/Friend";
 import {Friend} from '../../types';
@@ -29,6 +27,7 @@ export function AddFriendsView(){
   let [addFriendMutation, {isLoading, isError, error}] = useAddFriendMutation();
   let [webId, setWebId] = React.useState('');
   let [nickName, setNickName] = React.useState('');
+    const toast = useToast();
 
   return (
       <Stack spacing={4} bg={useColorModeValue('gray.50', 'gray.800')} paddingBottom={'1'} paddingTop={'1'}>
@@ -38,27 +37,45 @@ export function AddFriendsView(){
           <HStack maxW={'100vw'}>
               <form id={"addFriend"} onSubmit={
                   (event) => {
-                      event.preventDefault();
-                      const newFriend: Friend = {
-                          webId: webId, nickName: nickName,
-                          loMapOnly: false, name: "", profilePic: "",
-                      };
-                      const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+                      if(webId.trim().length>0 && nickName.trim().length>0) {
                           event.preventDefault();
-                          addFriendMutation(newFriend);
-
-                      };
-                      handleSubmit(event)
-                      /* TODO:
-                      Right now when we do this, the textfield is not restored so:
-                       - visually there is something written
-                       - You can submit the form because the is something written
-                       - But the field that is sent is empty
-                       - We need to restore the textfield someway or dont erase the content here
-
-                      setWebId("");
-                      setNickName("");
-                       */
+                          setWebId('');
+                          setNickName('');
+                          const newFriend: Friend = {
+                              webId: webId, nickName: nickName,
+                              loMapOnly: false, name: "", profilePic: "",
+                          };
+                          const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+                              event.preventDefault();
+                              addFriendMutation(newFriend);
+                              if (!isError) {
+                                  toast({
+                                      title: 'Friend Added',
+                                      description: "The friend has been added successfully.",
+                                      status: 'success',
+                                      duration: 7000,
+                                      isClosable: true,
+                                  });
+                              } else {
+                                  toast({
+                                      title: 'Friend not added',
+                                      description: "There has been an error adding the friend.",
+                                      status: 'error',
+                                      duration: 7000,
+                                      isClosable: true,
+                                  });
+                              }
+                          };
+                          handleSubmit(event)
+                      } else {
+                          toast({
+                              title: 'Fields not correctly filled',
+                              description: "Please fill both fields before submitting.",
+                              status: 'warning',
+                              duration: 7000,
+                              isClosable: true,
+                          });
+                      }
                   }}/>
                   <Box>
                       <FormControl isRequired>
@@ -67,6 +84,7 @@ export function AddFriendsView(){
                                  placeholder="asdfghjkl123456"
                                  _placeholder={{color: 'gray.500'}}
                                  type="text"
+                                 value={webId}
                                  onChange={(e) => setWebId(e.currentTarget.value)}
                           />
                       </FormControl>
@@ -78,6 +96,7 @@ export function AddFriendsView(){
                                  placeholder="Motosarius"
                                  _placeholder={{color: 'gray.500'}}
                                  type="text"
+                                 value={nickName}
                                  onChange={(e) => setNickName(e.currentTarget.value)}
                           />
                       </FormControl>
@@ -90,9 +109,10 @@ export function AddFriendsView(){
                   _hover={{
                       bg: 'orange.500',
                   }}>
-                  { isLoading? <Spinner /> : "Add" }
+                  {isLoading ?
+                      ( <Spinner ></Spinner>) :
+                      (<p>Add</p>)}
               </Button>
-
           </HStack>
       </Stack>
 
@@ -124,7 +144,7 @@ export default function FriendsView(): JSX.Element {
             Your friends
           </Heading>
           {isLoading
-              ? (<h2>Cargando amigos <Spinner></Spinner> </h2>)
+              ? (<h2>Loading friends <Spinner></Spinner> </h2>)
               : (<Table variant="striped" colorScheme="black" size="sm">
                             <Thead>
                               <Tr>
diff --git a/webapp/src/components/Map.tsx b/webapp/src/components/Map.tsx
index e0e2a25..a04990a 100644
--- a/webapp/src/components/Map.tsx
+++ b/webapp/src/components/Map.tsx
@@ -25,32 +25,34 @@ import {
     Text,
     useDisclosure,
     CardFooter,
-    ButtonGroup
+    ButtonGroup, Spinner, AlertIcon, AlertTitle, AlertDescription, Alert, useToast, createStandaloneToast
 } from '@chakra-ui/react';
 import "../css/react_leaflet.css";
 import 'leaflet/dist/leaflet.css';
 import {Icon, LatLngExpression} from 'leaflet';
 import markerIconPng from "leaflet/dist/images/marker-icon.png";
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch} from 'react-redux';
 import {useAddLocationMutation, useGetLocationsQuery} from "../app/services/Location";
 import type {MapMarker} from '../types';
 import {LocationType} from "../locationType";
 import DetailsDrawer from './mapComponents/LocationReviewsView'
 
+
 export function LocationMarkerWithStore() {
-    // const [position, setPosition] : LatLng = {lat: 0, lng: 0};
     const dispatch = useDispatch();
     const [lati, setLat] = useState(0);
     const [lngi, setLng] = useState(0);
     const {isOpen, onClose, onOpen} = useDisclosure();
     let [addLocationMutation, {isLoading, isError, error}] = useAddLocationMutation();
 
+
+
     const initialRef = React.useRef(null)
     var [name, setName] = React.useState('')
     var [category, setCategory] = React.useState('bar')
-    var [details, setDetails] = React.useState('')
     var [isShared, setShared] = React.useState(false)
 
+    const toast = useToast();
 
     const map = useMapEvents({
         click: (e) => {
@@ -60,16 +62,28 @@ export function LocationMarkerWithStore() {
             onOpen();
             setName('')
             setCategory('bar')
-            setDetails('')
             setShared(false)
         },
 
     })
-
+    const checkAndClose = () => {
+        if(name.trim().length > 0 && category.trim().length > 0) {
+            onClose();
+        } else {
+            toast({
+                title: 'Marker not added',
+                description: "Locations must have a non blank name, please try again.",
+                status: 'warning',
+                duration: 7000,
+                isClosable: true,
+            });
+        }
+    };
     //Use .map to iterate and generate the corresponding markers
     //This need to be optimiced because I think it generates again
     //all the markers on top of each other
     return  (
+        <>
         <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={initialRef} isCentered={true} size={'lg'}>
             <ModalOverlay>
                 <ModalContent>
@@ -77,31 +91,49 @@ export function LocationMarkerWithStore() {
                         <ModalCloseButton/>
                     </ModalHeader>
                     <ModalBody>
-                        <form id={"formMarker"} onSubmit = {
+                        <form id={"formMarker"} onSubmit={
                             (event) => {
+                            if(name.trim().length > 0 && category.trim().length > 0) {
                                 event.preventDefault();
-                                const marker : MapMarker = {latitude : lati, longitude : lngi,
-                                    name: name,locationType: category as LocationType, id: lati + " - " + lngi,isShared: isShared};
+                                const marker: MapMarker = {
+                                    latitude: lati,
+                                    longitude: lngi,
+                                    name: name,
+                                    locationType: category as LocationType,
+                                    id: lati + " - " + lngi,
+                                    isShared: isShared,
+                                    owner: "",
+                                    isOwnLocation:true
+                                };
 
                                 const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
                                     event.preventDefault();
                                     addLocationMutation(marker);
+                                    toast({
+                                        title: 'Marker Added',
+                                        description: "The location has been added successfully",
+                                        status: 'success',
+                                        duration: 3000,
+                                        isClosable: true,
+                                    });
                                 };
                                 handleSubmit(event)
                                 setName('')
                                 setCategory('bar')
-                                setDetails('')
                                 setShared(false)
-                            }}>
+                            }}}>
                             <Stack spacing={2} direction='column'>
                                 <FormControl isRequired={true}>
                                     <FormLabel>Name</FormLabel>
+                                    <Input value={name} type={"text"} ref={initialRef}
+                                           onChange={(e) => setName(e.currentTarget.value)}/>
                                     <Input data-testid="form-add-location-input" value={name} type={"text"} ref={initialRef}
                                            onChange={(e)=>setName(e.currentTarget.value)}/>
                                 </FormControl>
                                 <FormControl isRequired={true}>
                                     <FormLabel>Category</FormLabel>
-                                    <Select value={category} onChange={(e)=>setCategory(e.currentTarget.value)}>
+                                    <Select value={category}
+                                            onChange={(e) => setCategory(e.currentTarget.value)}>
                                         <option>bar</option>
                                         <option>restaurant</option>
                                         <option>shop</option>
@@ -111,7 +143,7 @@ export function LocationMarkerWithStore() {
                                 </FormControl>
                                 <FormControl isRequired={false}>
                                     <Checkbox isChecked={isShared}
-                                        onChange={(e) => setShared(e.target.checked)}>
+                                              onChange={(e) => setShared(e.target.checked)}>
                                         Public
                                     </Checkbox>
                                 </FormControl>
@@ -119,11 +151,12 @@ export function LocationMarkerWithStore() {
                         </form>
                     </ModalBody>
                     <ModalFooter>
-                        <Button form={"formMarker"} type={"submit"} onClick={onClose}>Place Marker</Button>
+                        <Button form={"formMarker"} type={"submit"} onClick={checkAndClose}>Place Marker</Button>
                     </ModalFooter>
                 </ModalContent>
             </ModalOverlay>
         </Modal>
+        </>
     );
 }
 
@@ -137,7 +170,8 @@ export default function MapElement(): JSX.Element {
     const [showShops, setShowShops] = useState(true)
     const [showSights, setShowSights] = useState(true)
     const [showMonuments, setShowMonuments] = useState(true)
-    const [showSharedLocations, setShowSharedLocations] = useState(true)
+    const [showMyLocations, setShowMyLocations] = useState(true)
+    const [showFriendLocations, setShowFriendLocations] = useState(true)
 
     return (
         <Flex
@@ -153,7 +187,8 @@ export default function MapElement(): JSX.Element {
                         showShops={() => showShops} setShowShops={setShowShops}
                         showSights={() => showSights} setShowSights={setShowSights}
                         showMonuments={() => showMonuments} setShowMonuments={setShowMonuments}
-                        showSharedLocations={() => showSharedLocations} setShowSharedLocations={setShowSharedLocations}
+                        showMyLocations={() => showMyLocations} setShowMyLocations={setShowMyLocations}
+                        showFriendLocations={() => showFriendLocations} setShowFriendLocations={setShowFriendLocations}
                     />
                 </Flex>
                 <MapContainer center={escuela} zoom={13} scrollWheelZoom={true} >
@@ -161,10 +196,20 @@ export default function MapElement(): JSX.Element {
                     <TileLayer
                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright%22%3EOpenStreetMap</a> contributors'
                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        noWrap={true}
+                        maxZoom={19}
                     />
-
-                    {locations?.filter( loc => {
-                        if(loc.isShared && showSharedLocations == false) return false
+                    {isLoading
+                        ?
+                        (<Alert zIndex={'1400'} status={'info'} variant='solid'>
+                            <AlertIcon  height='50px'/>
+                            <AlertTitle fontSize={17}>Loading markers </AlertTitle>
+                            <AlertDescription> <Spinner thickness='3.2px' size={'lg'}></Spinner></AlertDescription>
+                        </Alert>) :
+                    <>
+                    ({locations?.filter( loc => {
+                        if(loc.isOwnLocation && showMyLocations == false) return false
+                        if(loc.isOwnLocation == false && showFriendLocations == false) return false
                         if(loc.locationType == LocationType.restaurant && showRestaurants) return true
                         if(loc.locationType == LocationType.bar && showBars) return true
                         if(loc.locationType == LocationType.shop && showShops) return true
@@ -183,10 +228,14 @@ export default function MapElement(): JSX.Element {
                                               latitude={location.latitude}
                                               longitude={location.longitude}
                                               isShared={location.isShared}
+                                              owner={location.owner}
+                                              isOwnLocation={location.isOwnLocation}
                                 />
                             </Popup>
                         </Marker>
-                    ))}
+                    ))})
+                    </>
+                    }
                 </MapContainer>
             </Stack>
         </Flex>
@@ -204,8 +253,10 @@ interface FilterModalProps {
     setShowSights : React.Dispatch<React.SetStateAction<boolean>>,
     showMonuments : () => boolean,
     setShowMonuments  : React.Dispatch<React.SetStateAction<boolean>>,
-    showSharedLocations  : () => boolean,
-    setShowSharedLocations : React.Dispatch<React.SetStateAction<boolean>>,
+    showMyLocations  : () => boolean,
+    setShowMyLocations : React.Dispatch<React.SetStateAction<boolean>>,
+    showFriendLocations  : () => boolean,
+    setShowFriendLocations : React.Dispatch<React.SetStateAction<boolean>>,
 }
 
 export const FilterModal : FC<FilterModalProps> = ( props ) : JSX.Element => {
@@ -218,12 +269,13 @@ export const FilterModal : FC<FilterModalProps> = ( props ) : JSX.Element => {
             { id: "shops", name: "Shops", value: props.showShops, onChange: props.setShowShops },
             { id: "sights", name: "Sights", value: props.showSights, onChange: props.setShowSights },
             { id: "monuments", name: "Monuments", value: props.showMonuments, onChange: props.setShowMonuments },
-            { id: "sharedLocations", name: "Shared Locations", value: props.showSharedLocations, onChange: props.setShowSharedLocations }
+            { id: "myLocations", name: "My Locations", value: props.showMyLocations, onChange: props.setShowMyLocations },
+            { id: "friendLocations", name: "Friend Locations", value: props.showFriendLocations, onChange: props.setShowFriendLocations }
         ]
     };
 
     const propsChecked = (props.showBars() && props.showRestaurants() && props.showShops()
-    && props.showMonuments() && props.showSharedLocations() && props.showSights());
+    && props.showMonuments() && props.showSights());
 
     return (
         <div role={"dialog"}>
@@ -268,38 +320,49 @@ export const FilterModal : FC<FilterModalProps> = ( props ) : JSX.Element => {
 }
 
 export function PopupContent(marker: MapMarker){
+
     return(
-        <Card size={'sm'}>
-            <CardBody>
-                <Stack divider={<StackDivider />} spacing='4' minWidth={'sm'}>
-                    <Box>
-                        <Heading size='sm' textTransform='uppercase'>
-                            Name
-                        </Heading>
-                        <Text pt='2' fontSize='sm'>
-                            {marker.name}
-                        </Text>
-                    </Box>
-                    <Box>
-                        <Heading size='sm' textTransform='uppercase'>
-                            Category
-                        </Heading>
-                        <Text pt='2' fontSize='sm'>
-                            {marker.locationType}
-                        </Text>
-                    </Box>
-                </Stack>
-            </CardBody>
-            <CardFooter>
-                <ButtonGroup spacing='2'>
-                    <DetailsDrawer name={marker.name}
-                                   locationType={marker.locationType}
-                                   id={marker.id}
-                                   latitude={marker.latitude}
-                                   longitude={marker.longitude}
-                                   isShared={marker.isShared}/>
-                </ButtonGroup>
-            </CardFooter>
-        </Card>
+            <Card size={'sm'}>
+                <CardBody>
+                    <Stack divider={<StackDivider />} spacing='4' minWidth={'sm'}>
+                        <Box>
+                            <Heading size='sm' textTransform='uppercase'>
+                                Name
+                            </Heading>
+                            <Text pt='2' fontSize='md'>
+                                {marker.name}
+                            </Text>
+                        </Box>
+                        <Box>
+                            <Heading size='sm' textTransform='uppercase'>
+                                Category
+                            </Heading>
+                            <Text pt='2' fontSize='md'>
+                                {marker.locationType}
+                            </Text>
+                        </Box>
+                        <Box>
+                            <Heading size='sm' textTransform='uppercase'>
+                                Created by
+                            </Heading>
+                            <Text pt='2' fontSize='md'>
+                                {marker.owner}
+                            </Text>
+                        </Box>
+                    </Stack>
+                </CardBody>
+                <CardFooter>
+                    <ButtonGroup spacing='2'>
+                        <DetailsDrawer name={marker.name}
+                                       locationType={marker.locationType}
+                                       id={marker.id}
+                                       latitude={marker.latitude}
+                                       longitude={marker.longitude}
+                                       isShared={marker.isShared}
+                                       owner={marker.owner}
+                                       isOwnLocation={marker.isOwnLocation}/>
+                    </ButtonGroup>
+                </CardFooter>
+            </Card>
     )
-}
\ No newline at end of file
+}
diff --git a/webapp/src/components/mapComponents/LocationReviewsView.tsx b/webapp/src/components/mapComponents/LocationReviewsView.tsx
index a167d79..d03946c 100644
--- a/webapp/src/components/mapComponents/LocationReviewsView.tsx
+++ b/webapp/src/components/mapComponents/LocationReviewsView.tsx
@@ -9,15 +9,32 @@ import {
     DrawerHeader,
     DrawerOverlay,
     FormControl,
-    FormLabel, Heading, Input,
+    FormLabel,
+    Heading,
+    Input,
     Modal,
     ModalBody,
     ModalCloseButton,
-    ModalContent, ModalFooter,
+    ModalContent,
+    ModalFooter,
     ModalHeader,
     ModalOverlay,
-    Stack, Text, Textarea, Image,
-    useDisclosure, Flex, DrawerFooter, Spacer, Popover, PopoverTrigger, PopoverContent, PopoverArrow, PopoverHeader, PopoverBody, PopoverCloseButton
+    Stack,
+    Text,
+    Textarea,
+    Image,
+    useDisclosure,
+    Flex,
+    DrawerFooter,
+    Spacer,
+    Popover,
+    PopoverTrigger,
+    PopoverContent,
+    PopoverArrow,
+    PopoverHeader,
+    PopoverBody,
+    PopoverCloseButton,
+    Spinner, createStandaloneToast
 } from "@chakra-ui/react";
 import React, {ChangeEvent, useState} from "react";
 // @ts-ignore
@@ -51,17 +68,23 @@ export default function DetailsDrawer(marker: MapMarker) {
                     <DrawerBody>
                         <Stack spacing='24px'>
                             <Box>
-                                <h1>Reviews</h1>
-                                <Stack spacing={'24px'} direction='column'>
-                                    {reviews?.map( (review) => (
+                                {isLoading
+                                    ? (<h2>Loading reviews <Spinner></Spinner> </h2>) :
+                                    (<Stack spacing={'24px'} direction='column'>
+                                        ({reviews?.map((review) => (
                                         <Box maxW='sm' borderWidth='1px' borderRadius='lg' overflow='hidden'>
-                                            {review.encodedPhoto!="" ?<Image src={`data:image/jpg;base64,${review.encodedPhoto}`} loading={"lazy"} fallbackSrc='https://via.placeholder.com/150'/> : <></> }
-                                            {review.score >0 ? <ReactStars count={5} value={review.score} isHalf={true} size={28} activeColor="#ffd700" edit={false}/> : <></> }
+                                            <Box borderWidth='0.5px' fontSize={15} fontWeight={"semibold"}>{review.owner}</Box>
+                                            {review.encodedPhoto!="" ?<Box borderWidth='0.5px' >
+                                                <Image src={`data:image/jpg;base64,${review.encodedPhoto}`} loading={"lazy"}
+                                                    fallbackSrc='https://via.placeholder.com/150'/></Box> : <></> }
+                                            {review.score >0 ? <Box borderWidth='0.5px' ><ReactStars count={5}
+                                                value={review.score} isHalf={true} size={28} activeColor="#ffd700" edit={false}/></Box> : <></> }
                                             {review.comment.length != 0 ?<Box borderWidth='0.5px' >{review.comment}</Box> : <></> }
 
                                         </Box>
                                         ))}
-                                </Stack>
+                                    </Stack>)
+                                }
                             </Box>
                         </Stack>
                     </DrawerBody>
@@ -71,7 +94,9 @@ export default function DetailsDrawer(marker: MapMarker) {
                                          id={marker.id}
                                          latitude={marker.latitude}
                                          longitude={marker.longitude}
-                                         isShared={marker.isShared}/>
+                                         isShared={marker.isShared}
+                                         owner={marker.owner}
+                                         isOwnLocation={marker.isOwnLocation}/>
                     </DrawerFooter>
                 </DrawerContent>
             </Drawer>
@@ -95,6 +120,10 @@ export function AddCommentForm(marker: MapMarker) {
         }
     };
 
+    var [reviewAdded, setReviewAdded] = React.useState(false)
+    const { ToastContainer, toast } = createStandaloneToast()
+    const idToast = 'addedRevSuccess-Toast'
+
     const resetAndOpen = () => {
         onOpen()
         setTextComment("");
@@ -109,8 +138,7 @@ export function AddCommentForm(marker: MapMarker) {
             <Button colorScheme='teal' onClick={resetAndOpen}>
                 Add a Review
             </Button>
-
-            <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={initialRef} isCentered={true} size={'lg'}>
+                <Modal isOpen={isOpen} onClose={onClose} initialFocusRef={initialRef} isCentered={true} size={'lg'}>
                 <ModalOverlay>
                     <ModalContent>
                         <ModalHeader fontSize={24}>
@@ -123,7 +151,7 @@ export function AddCommentForm(marker: MapMarker) {
                             <form id={"formMarker"} onSubmit = {
                                 (event) => {
                                     event.preventDefault();
-                                    const review : Review = {markerId:marker.id, comment:textComment, photo: file ,score:rating, encodedPhoto: ""};
+                                    const review : Review = {markerId:marker.id, comment:textComment, photo: file ,score:rating, encodedPhoto: "", owner:""};
 
                                     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
                                         event.preventDefault();
@@ -132,6 +160,13 @@ export function AddCommentForm(marker: MapMarker) {
                                                 .then(result => {
                                                     review.encodedPhoto = result;
                                                     addReviewMutation(review);
+                                                    toast({
+                                                        title: 'Review Added',
+                                                        description: "Your review has been added successfully",
+                                                        status: 'success',
+                                                        duration: 7000,
+                                                        isClosable: true,
+                                                    });
                                                 })
                                                 .catch(err => {
                                                     console.log(err);
@@ -154,10 +189,6 @@ export function AddCommentForm(marker: MapMarker) {
 
                                     handleSubmit(event)
                                 }}>
-                                {(file.name != "") &&
-                                    <Image src={URL.createObjectURL(file)} loading={"lazy"}
-                                           fallbackSrc='https://via.placeholder.com/150'/>
-                                }
                                 <Box borderColor="gray.300" borderStyle="dashed" borderWidth="2px"
                                     rounded="md" shadow="sm" role="group" transition="all 150ms ease-in-out"
                                     _hover={{
@@ -165,7 +196,8 @@ export function AddCommentForm(marker: MapMarker) {
                                     }}
                                 >
                                     <Box position="relative" height="100%" width="100%">
-                                        <Box
+                                        {file.name == "" ?
+                                        (<Box
                                             position="relative"
                                             top="0" left="0"
                                             height="100%" width="100%"
@@ -182,7 +214,10 @@ export function AddCommentForm(marker: MapMarker) {
                                                     <Text fontWeight="light">or click to upload an image</Text>
                                                 </Stack>
                                             </Stack>
-                                        </Box>
+                                        </Box>) :
+                                            (<Image src={URL.createObjectURL(file)} loading={"lazy"}
+                                                    fallbackSrc='https://via.placeholder.com/150'/>)
+                                        }
                                         <Input
                                             type="File"
                                             height="100%" width="100%"
@@ -240,7 +275,7 @@ export function InformationPopup(){
                     <PopoverArrow />
                     <PopoverCloseButton />
                     <PopoverHeader>Adding Reviews</PopoverHeader>
-                    <PopoverBody>While adding a review you can upload an image, add a score or/and add
+                    <PopoverBody fontSize={'17'}>While adding a review you can upload an image, add a score or/and add
                     a text comment without or adding any of the other two but you must submit at least one.</PopoverBody>
                 </PopoverContent>
             </Popover>
diff --git a/webapp/src/types.d.ts b/webapp/src/types.d.ts
index bad4dfa..c06b6cd 100644
--- a/webapp/src/types.d.ts
+++ b/webapp/src/types.d.ts
@@ -6,15 +6,18 @@ export type MapMarker = {
     locationType:LocationType,
     latitude:number,
     longitude:number,
-    isShared: boolean
+    isShared: boolean,
+    owner: string,
+    isOwnLocation: boolean
 };
 
 export type Review = {
     markerId:string,
     comment:string,
     photo:File,
-    score:double
-    encodedPhoto:string
+    score:double,
+    encodedPhoto:string,
+    owner:string
 }