diff --git a/src/components/CreateModal/Calendar.css b/src/components/CreateModal/Calendar.css
index 2aea323..d4db3d2 100644
--- a/src/components/CreateModal/Calendar.css
+++ b/src/components/CreateModal/Calendar.css
@@ -107,16 +107,16 @@
   
   .react-calendar__tile:enabled:hover,
   .react-calendar__tile:enabled:focus {
-    background-color: #e6e6e6;
+    background-color: #accdee;
   }
   
   /* .react-calendar__tile--now {
-    background: #ffff76;
-  }
+    background: #accdee;
+  } */
   
-  .react-calendar__tile--now:enabled:hover,
+  /* .react-calendar__tile--now:enabled:hover,
   .react-calendar__tile--now:enabled:focus {
-    background: #ffffa9;
+    background: #accdee;
   } */
   
   .react-calendar__tile--hasActive {
diff --git a/src/components/CreateModal/CreateModal.jsx b/src/components/CreateModal/CreateModal.jsx
index b2b9686..0c3ee83 100644
--- a/src/components/CreateModal/CreateModal.jsx
+++ b/src/components/CreateModal/CreateModal.jsx
@@ -25,9 +25,9 @@ import {
   Stepper,
   useSteps,
   Box,
+  ModalCloseButton,
 } from "@chakra-ui/react";
 // import logo from "../../assets/images/small_logo.png";
-import upload from "../../assets/images/download.png";
 import { storage } from "../../firebase";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 import { UserAuth } from "../../context/AuthContext";
@@ -49,11 +49,13 @@ export default function CreateModal({
   setIsEdit,
   setPosition,
   centerPosition,
+  setUploadImg,
+  uploadImg,
+  upload,
 }) {
   const { user } = UserAuth();
   const { onLoginModalOpen } = useContext(DataContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const [uploadImg, setUploadImg] = useState(upload);
 
   const uploadFile = () => {
     if (!newAddedItem.image) return;
@@ -71,7 +73,7 @@ export default function CreateModal({
             "https://firebasestorage.googleapis.com/v0/b/zotnfound2.appspot.com/o/zotnfound2%2Fimages%2FNaN"
           )
         ) {
-          setUploadImg(upload);
+          setUploadImg("");
         } else {
           setUploadImg(url);
           setNewAddedItem((prev) => ({ ...prev, image: url }));
@@ -144,7 +146,21 @@ export default function CreateModal({
       )}
       <Modal
         isOpen={isOpen}
-        onClose={onClose}
+        onClose={() => {
+          setNewAddedItem({
+            image: "",
+            type: "",
+            islost: true,
+            name: "",
+            description: "",
+            itemDate: "",
+          });
+          setUploadImg("");
+          setActiveStep(0);
+          setIsCreate(true);
+          setIsEdit(false);
+          onClose();
+        }}
         size="5xl"
         closeOnOverlayClick={false}
       >
@@ -154,7 +170,7 @@ export default function CreateModal({
               {/* stepper */}
               <Stepper size="lg" index={activeStep} flex={1}>
                 {steps.map((step, index) => (
-                  <Step key={index} onClick={() => setActiveStep(index)}>
+                  <Step key={index}>
                     <StepIndicator>
                       <StepStatus
                         complete={<StepIcon />}
@@ -172,6 +188,7 @@ export default function CreateModal({
                   </Step>
                 ))}
               </Stepper>
+              <ModalCloseButton color={"#c43232"} />
               {/* steppper */}
               <Flex width="100%" justifyContent={"center"} mt="5%" mb="3%">
                 {/* first step */}
@@ -185,6 +202,7 @@ export default function CreateModal({
                       variant="outline"
                       placeholder="Item Name"
                       mb="2"
+                      value={newAddedItem.name}
                       onChange={(e) =>
                         setNewAddedItem((prev) => ({
                           ...prev,
@@ -196,6 +214,7 @@ export default function CreateModal({
                       variant="outline"
                       placeholder="Description of Item"
                       mb="2"
+                      value={newAddedItem.description}
                       onChange={(e) =>
                         setNewAddedItem((prev) => ({
                           ...prev,
@@ -233,7 +252,10 @@ export default function CreateModal({
                         <option value="phone">Phone</option>
                         <option value="others">Others</option>
                       </Select> */}
-                    <TypeSelector setNewAddedItem={setNewAddedItem} />
+                    <TypeSelector
+                      setNewAddedItem={setNewAddedItem}
+                      newAddedItem={newAddedItem}
+                    />
                     <FormControl>
                       <Flex flexDir={"column"}>
                         <FormLabel htmlFor="lost-item">
@@ -246,6 +268,7 @@ export default function CreateModal({
                             size="lg"
                             colorScheme="red"
                             mr="2%"
+                            isChecked={newAddedItem.islost}
                             onChange={() =>
                               setNewAddedItem((prev) => ({
                                 ...prev,
@@ -362,40 +385,30 @@ export default function CreateModal({
                       </Text>
 
                       <Flex mb="10%" ml="1%">
-                        <MdDriveFileRenameOutline size={"1.3em"}/>
+                        <MdDriveFileRenameOutline size={"1.3em"} />
                         <Text maxW="20vw" ml="2%" fontSize={15}>
                           {newAddedItem.name}
-                          Lorem ipsum dolor sit amet consectetur adipisicing
-                          elit. Aut libero quis possimus numquam alias, ipsum
-                          perferendis animi laboriosam quasi minus eligendi
-                          culpa magnam nostrum non tenetur doloremque explicabo
-                          vitae porro?
                         </Text>
                       </Flex>
 
                       <Flex mb="10%">
-                        <MdOutlineDescription size={"1.3em"}/>
+                        <MdOutlineDescription size={"1.3em"} />
                         <Text maxW="20vw" ml="2%" fontSize={15}>
                           {newAddedItem.description}
-                          Lorem ipsum dolor sit amet consectetur adipisicing
-                          elit. Exercitationem tempore sunt cupiditate quaerat
-                          blanditiis delectus natus culpa ad est aliquam nihil
-                          omnis ipsum incidunt, magnam beatae earum neque, sint
-                          nostrum?
                         </Text>
                       </Flex>
 
                       <Flex mb="10%">
-                        <FaMagnifyingGlass size={"1.3em"}/>
+                        <FaMagnifyingGlass size={"1.3em"} />
                         <Text maxW="20vw" ml="2%" fontSize={15}>
                           {newAddedItem.islost ? "LOST" : "FOUND"}
                           {", "}
-                          {newAddedItem.type}
+                          {newAddedItem.type.toUpperCase()}
                         </Text>
                       </Flex>
 
                       <Flex mb="10%">
-                        <SlCalender size={"1.3em"}/>
+                        <SlCalender size={"1.3em"} />
                         <Text maxW="20vw" ml="2%" fontSize={15}>
                           {newAddedItem.itemDate}
                         </Text>
@@ -437,6 +450,13 @@ export default function CreateModal({
                 )}
                 {activeStep < 4 ? (
                   <Button
+                    isDisabled={
+                      (activeStep === 0 && newAddedItem.name === "") ||
+                      newAddedItem.description === "" ||
+                      (activeStep === 1 && newAddedItem.type === "") ||
+                      (activeStep === 2 && newAddedItem.itemDate === "") ||
+                      (activeStep === 3 && uploadImg === "")
+                    }
                     variant={"solid"}
                     colorScheme="blue"
                     size="lg"
diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx
index cfc9f65..5224d25 100644
--- a/src/components/Home/Home.jsx
+++ b/src/components/Home/Home.jsx
@@ -35,14 +35,13 @@ import {
 } from "@chakra-ui/react";
 import { SettingsIcon, ChevronDownIcon, StarIcon } from "@chakra-ui/icons";
 import logo from "../../assets/images/small_logo.png";
+import upload from "../../assets/images/download.png";
 
 import logout from "../../assets/logos/logout.svg";
 import userlogo from "../../assets/logos/userlogo.svg";
 import yourposts from "../../assets/logos/yourposts.svg";
 import axios from "axios";
 
-
-
 export default function Home() {
   const [search, setSearch] = useState("");
   const [data, setData] = useState([]);
@@ -103,6 +102,7 @@ export default function Home() {
   const [position, setPosition] = useState(centerPosition);
   const [focusLocation, setFocusLocation] = useState();
   const [screenWidth, setScreenWidth] = useState(window.screen.width);
+  const [uploadImg, setUploadImg] = useState("");
 
   // LOGIN MODAL
   const {
@@ -143,7 +143,6 @@ export default function Home() {
     getData();
   }, []);
 
-
   window.onresize = () => {
     setScreenWidth(window.screen.width);
   };
@@ -318,6 +317,9 @@ export default function Home() {
               centerPosition={centerPosition}
               newAddedItem={newAddedItem}
               setNewAddedItem={setNewAddedItem}
+              setUploadImg={setUploadImg}
+              uploadImg={uploadImg}
+              upload={upload}
             />
           </Flex>
         </Flex>
@@ -468,6 +470,9 @@ export default function Home() {
             setPosition={setPosition}
             focusLocation={focusLocation}
             setFocusLocation={setFocusLocation}
+            setUploadImg={setUploadImg}
+            uploadImg={uploadImg}
+            upload={upload}
           />
         </Flex>
         <Flex
diff --git a/src/components/Map/Map.jsx b/src/components/Map/Map.jsx
index 554433c..8aef208 100644
--- a/src/components/Map/Map.jsx
+++ b/src/components/Map/Map.jsx
@@ -39,14 +39,16 @@ export default function Map({
   setPosition,
   focusLocation,
   setFocusLocation,
+  setUploadImg,
+  uploadImg,
+  upload
 }) {
   const { user } = UserAuth();
   const { data, setLoading } = useContext(DataContext);
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [itemData, setItemData] = useState({});
   const [showDonut, setShowDonut] = useState(false);
-  console.log(showDonut);
-  console.log(focusLocation);
+
   const allowedBounds = [
     [33.656487295651, -117.85412222020983],
     [33.65580858123096, -117.82236486775658],
@@ -91,6 +93,7 @@ export default function Map({
     .map((item) => {
       return (
         <Marker
+          key={item.location}
           position={item.location}
           eventHandlers={{
             click: () => {
@@ -169,6 +172,7 @@ export default function Map({
           itemDate: "",
         });
         setIsCreate(!isCreate);
+        setUploadImg("")
       })
       .catch((err) => console.log(err));
 
diff --git a/src/components/Type/TypeCard.jsx b/src/components/Type/TypeCard.jsx
index 8695d8d..6a50449 100644
--- a/src/components/Type/TypeCard.jsx
+++ b/src/components/Type/TypeCard.jsx
@@ -4,12 +4,10 @@ import { Flex, Image, Text } from "@chakra-ui/react";
 export default function TypeCard({
   type,
   icon,
-  pressed,
-  setPressed,
   setNewAddedItem,
+  newAddedItem
 }) {
   const handleOnClick = () => {
-    setPressed(type);
     setNewAddedItem((prev) => ({
       ...prev,
       type: type,
@@ -18,7 +16,7 @@ export default function TypeCard({
 
   return (
     <Flex
-      backgroundColor={pressed === type ? "#787092" : "#a698d8"}
+      backgroundColor={newAddedItem.type === type ? "#787092" : "#a698d8"}
       w="11vw"
       h="11vw"
       m="2%"
@@ -29,8 +27,8 @@ export default function TypeCard({
       onClick={handleOnClick}
       _hover={{cursor: "pointer"}}
     >
-      <Text>{type}</Text>
-      <Image src={icon} w="5vw" h="5vw" />
+      <Text as="b" mb="5%">{type.toUpperCase()}</Text>
+      <Image src={icon} w="5vw" h="5vw" alt="test"/>
     </Flex>
   );
 }
diff --git a/src/components/TypeSelector/TypeSelector.jsx b/src/components/TypeSelector/TypeSelector.jsx
index a00ea4f..6b138be 100644
--- a/src/components/TypeSelector/TypeSelector.jsx
+++ b/src/components/TypeSelector/TypeSelector.jsx
@@ -1,22 +1,20 @@
 import { React, useState } from "react";
-import { Flex } from "@chakra-ui/react";
+import { Flex} from "@chakra-ui/react";
 import TypeCard from "../Type/TypeCard";
 import { iconsMap } from "../Map/MapIcons";
-import logo from "../../assets/images/small_logo.png";
 
 export default function TypeSelector(props) {
   const [pressed, setPressed] = useState("");
-
   const types = {
-    headphone: iconsMap["headphone"][true],
-    phone: iconsMap["phone"][true],
-    wallet: iconsMap["wallet"][true],
-    key: iconsMap["key"][true],
-    others: iconsMap["others"][true],
+    headphone: iconsMap["headphone"][props.newAddedItem.islost].options.iconUrl,
+    phone: iconsMap["phone"][props.newAddedItem.islost].options.iconUrl,
+    wallet: iconsMap["wallet"][props.newAddedItem.islost].options.iconUrl,
+    key: iconsMap["key"][props.newAddedItem.islost].options.iconUrl,
+    others: iconsMap["others"][props.newAddedItem.islost].options.iconUrl,
   };
 
   const typeContainers = Object.keys(types).map((type) => (
-    <TypeCard key={type} type={type} icon={logo} pressed={pressed} setPressed={setPressed} setNewAddedItem={props.setNewAddedItem}/>
+    <TypeCard key={type} type={type} icon={types[type]} newAddedItem={props.newAddedItem} setNewAddedItem={props.setNewAddedItem}/>
   ));
 
   return (