diff --git a/src/assets/logos/Phone_lost.png b/src/assets/logos/Phone_lost.png
index 6d05337..24d6c66 100644
Binary files a/src/assets/logos/Phone_lost.png and b/src/assets/logos/Phone_lost.png differ
diff --git a/src/components/CreateModal/CreateModal.jsx b/src/components/CreateModal/CreateModal.jsx
index 0c3ee83..79871f5 100644
--- a/src/components/CreateModal/CreateModal.jsx
+++ b/src/components/CreateModal/CreateModal.jsx
@@ -26,6 +26,7 @@ import {
   useSteps,
   Box,
   ModalCloseButton,
+  Textarea,
 } from "@chakra-ui/react";
 // import logo from "../../assets/images/small_logo.png";
 import { storage } from "../../firebase";
@@ -53,6 +54,7 @@ export default function CreateModal({
   uploadImg,
   upload,
 }) {
+  const oldNewAddedItem = newAddedItem;
   const { user } = UserAuth();
   const { onLoginModalOpen } = useContext(DataContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -85,8 +87,8 @@ export default function CreateModal({
   const [date, setDate] = useState(new Date());
 
   const steps = [
-    { title: "First", description: "Enter Item Info" },
-    { title: "Second", description: "Select Item Type" },
+    { title: "First", description: "Enter Info" },
+    { title: "Second", description: "Select Type" },
     { title: "Third", description: "Choose Date" },
     { title: "Fourth", description: "File Upload" },
     { title: "Fifth", description: "Check Info" },
@@ -161,11 +163,11 @@ export default function CreateModal({
           setIsEdit(false);
           onClose();
         }}
-        size="5xl"
+        size="4xl"
         closeOnOverlayClick={false}
       >
         <ModalOverlay>
-          <ModalContent>
+          <ModalContent minHeight="50vh">
             <Flex padding={"2%"} flexDir={"column"}>
               {/* stepper */}
               <Stepper size="lg" index={activeStep} flex={1}>
@@ -193,36 +195,37 @@ export default function CreateModal({
               <Flex width="100%" justifyContent={"center"} mt="5%" mb="3%">
                 {/* first step */}
                 {activeStep === 0 && (
-                  <FormControl>
-                    <FormLabel py="10px">
-                      Enter your information below:{" "}
-                    </FormLabel>
+                  <Flex width="50%">
+                    <FormControl>
+                      <FormLabel>Enter your item below: </FormLabel>
 
-                    <Input
-                      variant="outline"
-                      placeholder="Item Name"
-                      mb="2"
-                      value={newAddedItem.name}
-                      onChange={(e) =>
-                        setNewAddedItem((prev) => ({
-                          ...prev,
-                          name: e.target.value,
-                        }))
-                      }
-                    />
-                    <Input
-                      variant="outline"
-                      placeholder="Description of Item"
-                      mb="2"
-                      value={newAddedItem.description}
-                      onChange={(e) =>
-                        setNewAddedItem((prev) => ({
-                          ...prev,
-                          description: e.target.value,
-                        }))
-                      }
-                    />
-                  </FormControl>
+                      <Input
+                        variant="outline"
+                        placeholder="Item Name"
+                        mb="10px"
+                        value={newAddedItem.name}
+                        onChange={(e) =>
+                          setNewAddedItem((prev) => ({
+                            ...prev,
+                            name: e.target.value,
+                          }))
+                        }
+                      />
+                      <Textarea
+                        variant="outline"
+                        placeholder="Description of Item"
+                        mb="2"
+                        value={newAddedItem.description}
+                        onChange={(e) =>
+                          setNewAddedItem((prev) => ({
+                            ...prev,
+                            description: e.target.value,
+                          }))
+                        }
+                        rows="5"
+                      />
+                    </FormControl>
+                  </Flex>
                 )}
                 {/* first step */}
 
@@ -235,30 +238,16 @@ export default function CreateModal({
                     alignItems={"center"}
                   >
                     <FormControl>
-                      <FormLabel>Select Item Type:</FormLabel>
+                      <FormLabel fontSize="xl">Select Item Type:</FormLabel>
                     </FormControl>
-                    {/* <Select
-                        placeholder="Select option"
-                        onChange={(e) =>
-                          setNewAddedItem((prev) => ({
-                            ...prev,
-                            type: e.target.value,
-                          }))
-                        }
-                      >
-                        <option value="headphone">Headphones</option>
-                        <option value="wallet">Wallet</option>
-                        <option value="key">Keys</option>
-                        <option value="phone">Phone</option>
-                        <option value="others">Others</option>
-                      </Select> */}
+
                     <TypeSelector
                       setNewAddedItem={setNewAddedItem}
                       newAddedItem={newAddedItem}
                     />
                     <FormControl>
                       <Flex flexDir={"column"}>
-                        <FormLabel htmlFor="lost-item">
+                        <FormLabel htmlFor="lost-item" fontSize="xl">
                           Lost or Found Item?
                         </FormLabel>
 
@@ -294,24 +283,15 @@ export default function CreateModal({
                 {/* third step */}
                 {activeStep === 2 && (
                   <FormControl>
-                    <FormLabel py="10px">
+                    <FormLabel px="10%" fontSize="xl">
                       {newAddedItem.islost ? "Lost Date:" : "Found Date:"}
                     </FormLabel>
-                    {/* <Input
-                      variant="outline"
-                      mb="2"
-                      type="date"
-                      onChange={(e) =>
-                        setNewAddedItem((prev) => ({
-                          ...prev,
-                          itemDate: e.target.value,
-                        }))
-                      }
-                    /> */}
+
                     <Flex
                       w="100%"
                       alignItems={"center"}
                       justifyContent={"center"}
+                      px="10%"
                     >
                       <Calendar
                         className={"react-calendar"}
@@ -334,18 +314,38 @@ export default function CreateModal({
                 {activeStep === 3 && (
                   <FormControl>
                     <FormLabel>File Upload:</FormLabel>
-                    <Flex mb={3} alignItems="center" flexDirection="row">
-                      <Input
-                        type="file"
-                        placeholder="Image URL"
-                        onChange={(e) => {
-                          setNewAddedItem((prev) => ({
-                            ...prev,
-                            image: e.target.files[0],
-                          }));
-                        }}
-                      />
-                      <Button onClick={uploadFile}>Confirm</Button>
+                    <Flex
+                      gap={5}
+                      alignItems="center"
+                      flexDirection="column"
+                      justifyContent="center"
+                    >
+                      <Flex justifyContent="center" alignItems="center" gap={3}>
+                        <Input
+                          type="file"
+                          multiple
+                          width="60%"
+                          sx={{
+                            "::file-selector-button": {
+                              height: 10,
+                              padding: 0,
+                              mr: 4,
+                              background: "none",
+                              border: "none",
+                              fontWeight: "bold",
+                            },
+                          }}
+                          onChange={(e) => {
+                            setNewAddedItem((prev) => ({
+                              ...prev,
+                              image: e.target.files[0],
+                            }));
+                          }}
+                        />
+
+                        <Button onClick={uploadFile}>Confirm</Button>
+                      </Flex>
+                      <Image width="40%" src={uploadImg} />
                     </Flex>
                   </FormControl>
                 )}
@@ -423,7 +423,7 @@ export default function CreateModal({
                 {activeStep > 0 ? (
                   <Button
                     variant={"solid"}
-                    colorScheme="blue"
+                    colorScheme="red"
                     size="lg"
                     onClick={() => {
                       setActiveStep((prevStep) => prevStep - 1);
@@ -437,10 +437,14 @@ export default function CreateModal({
                     size="lg"
                     onClick={() => {
                       setIsEdit(!isEdit);
-                      setNewAddedItem((prev) => ({
-                        ...prev,
+                      setNewAddedItem({
+                        image: "",
+                        type: "",
                         islost: true,
-                      }));
+                        name: "",
+                        description: "",
+                        itemDate: "",
+                      });
                       setUploadImg("");
                       onClose();
                     }}
@@ -490,180 +494,6 @@ export default function CreateModal({
                 )}
               </Flex>
             </Flex>
-            {/* <Flex width="100%" justifyContent="center" padding="10px">
-              <Stack minH={"70vh"} direction={{ base: "column", md: "row" }}>
-                <Flex align={"center"} justify={"center"} ml={10}>
-                  <Flex
-                    flexDirection="column"
-                    justifyContent="center"
-                    align="center"
-                    gap={2}
-                  >
-                    <Heading fontSize={"2xl"} py="10px" textAlign="center">
-                      {newAddedItem.islost
-                        ? "Oh no! Post here so anteaters can help you! 😥😭"
-                        : "WHAT A LIFE SAVER! 😇😸"}
-                    </Heading>
-                    <form
-                      onSubmit={(e) => {
-                        e.preventDefault();
-                        setUploadImg("");
-                        onClose();
-                        setIsCreate(!isCreate);
-                      }}
-                    >
-                      <FormControl isRequired>
-                        <FormLabel>File Upload:</FormLabel>
-                        <Flex mb={3} alignItems="center" flexDirection="row">
-                          <Input
-                            type="file"
-                            placeholder="Image URL"
-                            onChange={(e) => {
-                              setNewAddedItem((prev) => ({
-                                ...prev,
-                                image: e.target.files[0],
-                              }));
-                            }}
-                          />
-                          <Button onClick={uploadFile}>Confirm</Button>
-                        </Flex>
-                      </FormControl>
-                      <FormControl isRequired mb="3">
-                        <FormLabel>Select Item Type:</FormLabel>
-                        <Select
-                          placeholder="Select option"
-                          onChange={(e) =>
-                            setNewAddedItem((prev) => ({
-                              ...prev,
-                              type: e.target.value,
-                            }))
-                          }
-                        >
-                          <option value="headphone">Headphones</option>
-                          <option value="wallet">Wallet</option>
-                          <option value="key">Keys</option>
-                          <option value="phone">Phone</option>
-                          <option value="others">Others</option>
-                        </Select>
-                      </FormControl>
-
-                      <FormControl>
-                        <Flex justifyContent={"space-between"} mb="0">
-                          <FormLabel htmlFor="lost-item">
-                            Lost or Found Item?
-                          </FormLabel>
-                          <Switch
-                            id="lost-switch"
-                            size="lg"
-                            colorScheme="red"
-                            onChange={() =>
-                              setNewAddedItem((prev) => ({
-                                ...prev,
-                                islost: !prev.islost,
-                              }))
-                            }
-                          />
-                        </Flex>
-                        <Flex justifyContent="flex-end" mt={0}>
-                          <FormHelperText fontSize="20px">
-                            {newAddedItem.islost ? "Lost" : "Found"}
-                          </FormHelperText>
-                        </Flex>
-                      </FormControl>
-
-                      <FormControl isRequired>
-                        <FormLabel py="10px">
-                          Enter your information below:{" "}
-                        </FormLabel>
-
-                        <Input
-                          variant="outline"
-                          placeholder="Item Name"
-                          mb="2"
-                          value={newAddedItem.name}
-                          onChange={(e) =>
-                            setNewAddedItem((prev) => ({
-                              ...prev,
-                              name: e.target.value,
-                            }))
-                          }
-                        />
-                        <Input
-                          variant="outline"
-                          placeholder="Description of Item"
-                          mb="2"
-                          onChange={(e) =>
-                            setNewAddedItem((prev) => ({
-                              ...prev,
-                              description: e.target.value,
-                            }))
-                          }
-                        />
-
-                        <FormLabel py="10px">
-                          {newAddedItem.islost ? "Lost Date" : "Found Date"}
-                        </FormLabel>
-                        <Input
-                          variant="outline"
-                          mb="2"
-                          type="date"
-                          value={newAddedItem.itemDate}
-                          onChange={(e) =>
-                            setNewAddedItem((prev) => ({
-                              ...prev,
-                              itemDate: e.target.value,
-                            }))
-                          }
-                          // onChange={(e) => console.log(e.target.value)}
-                        />
-                      </FormControl>
-
-                      <Flex gap={3} justifyContent="center" mt="10px" mb="10px">
-                        <Button
-                          colorScheme="red"
-                          size="lg"
-                          onClick={() => {
-                            setIsEdit(!isEdit);
-                            setNewAddedItem((prev) => ({
-                              ...prev,
-                              islost: true,
-                            }));
-                            setUploadImg("");
-                            onClose();
-                          }}
-                        >
-                          Cancel
-                        </Button>
-                        <Button
-                          isDisabled={
-                            uploadImg === upload ||
-                            newAddedItem.image === "" ||
-                            newAddedItem.type === "" ||
-                            newAddedItem.name === "" ||
-                            newAddedItem.description === ""
-                          }
-                          variant={"solid"}
-                          type="submit"
-                          colorScheme="green"
-                          size="lg"
-                        >
-                          Continue
-                        </Button>
-                      </Flex>
-                    </form>
-                  </Flex>
-                  <Flex width="50%" justifyContent="center">
-                    <Image
-                      sizeBox="100%"
-                      src={newAddedItem.image === "" ? upload : uploadImg}
-                      width="90%"
-                      borderRadius="30px"
-                    />
-                  </Flex>
-                </Flex>
-                <Flex flex={1}></Flex>
-              </Stack>
-            </Flex> */}
           </ModalContent>
         </ModalOverlay>
       </Modal>
diff --git a/src/components/Map/MapIcons.js b/src/components/Map/MapIcons.js
index ee7aaba..cf872e6 100644
--- a/src/components/Map/MapIcons.js
+++ b/src/components/Map/MapIcons.js
@@ -20,56 +20,67 @@ import fly_img from "../../assets/images/fly_img.png";
 const headphoneLost = L.icon({
   iconUrl: headphone_lost,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const headphoneFound = L.icon({
   iconUrl: headphone_found,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const phoneLost = L.icon({
   iconUrl: phone_lost,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const phoneFound = L.icon({
   iconUrl: phone_found,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const keyLost = L.icon({
   iconUrl: key_lost,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const keyFound = L.icon({
   iconUrl: key_found,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const walletLost = L.icon({
   iconUrl: wallet_lost,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const walletFound = L.icon({
   iconUrl: wallet_found,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const othersLost = L.icon({
   iconUrl: others_lost,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 const othersFound = L.icon({
   iconUrl: others_found,
   iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 export const othersDrag = L.icon({
   iconUrl: others_black,
-  iconSize: [60, 70],
+  iconSize: [60, 60],
+  iconAnchor: [30, 50],
 });
 
 export const flyImg = L.icon({
diff --git a/src/components/Type/TypeCard.jsx b/src/components/Type/TypeCard.jsx
index 6a50449..e329b55 100644
--- a/src/components/Type/TypeCard.jsx
+++ b/src/components/Type/TypeCard.jsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Flex, Image, Text } from "@chakra-ui/react";
+import { Flex, Image, Text, Button } from "@chakra-ui/react";
 
 export default function TypeCard({
   type,
   icon,
   setNewAddedItem,
-  newAddedItem
+  newAddedItem,
 }) {
   const handleOnClick = () => {
     setNewAddedItem((prev) => ({
@@ -15,20 +15,22 @@ export default function TypeCard({
   };
 
   return (
-    <Flex
-      backgroundColor={newAddedItem.type === type ? "#787092" : "#a698d8"}
-      w="11vw"
-      h="11vw"
-      m="2%"
-      borderRadius={"5%"}
+    <Button
+      backgroundColor={newAddedItem.type === type ? "#787092" : "white"}
+      variant="outline"
+      border="5px rgb(166, 152, 216) solid"
+      w="7vw"
+      h="7vw"
+      borderRadius="20px"
       alignItems={"center"}
       justifyContent={"center"}
       flexDir={"column"}
       onClick={handleOnClick}
-      _hover={{cursor: "pointer"}}
     >
-      <Text as="b" mb="5%">{type.toUpperCase()}</Text>
-      <Image src={icon} w="5vw" h="5vw" alt="test"/>
-    </Flex>
+      <Text as="b" mb="5%" color={newAddedItem.type === type && "white"}>
+        {type.toUpperCase()}
+      </Text>
+      <Image src={icon} w="4vw" h="4vw" alt="test" />
+    </Button>
   );
 }
diff --git a/src/components/TypeSelector/TypeSelector.jsx b/src/components/TypeSelector/TypeSelector.jsx
index 7081407..8b3a406 100644
--- a/src/components/TypeSelector/TypeSelector.jsx
+++ b/src/components/TypeSelector/TypeSelector.jsx
@@ -1,5 +1,5 @@
 import { React } from "react";
-import { Flex} from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
 import TypeCard from "../Type/TypeCard";
 import { iconsMap } from "../Map/MapIcons";
 
@@ -13,7 +13,13 @@ export default function TypeSelector(props) {
   };
 
   const typeContainers = Object.keys(types).map((type) => (
-    <TypeCard key={type} type={type} icon={types[type]} newAddedItem={props.newAddedItem} setNewAddedItem={props.setNewAddedItem}/>
+    <TypeCard
+      key={type}
+      type={type}
+      icon={types[type]}
+      newAddedItem={props.newAddedItem}
+      setNewAddedItem={props.setNewAddedItem}
+    />
   ));
 
   return (
@@ -22,6 +28,8 @@ export default function TypeSelector(props) {
       flexWrap={"wrap"}
       alignItems={"center"}
       justifyContent={"center"}
+      paddingX="20%"
+      gap={10}
       m={0}
     >
       {typeContainers}