diff --git a/src/components/collapsible/index.tsx b/src/components/collapsible/index.tsx
index 9dfaa43..80d5977 100644
--- a/src/components/collapsible/index.tsx
+++ b/src/components/collapsible/index.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { useState, useRef } from "react";
-import './collapsible.css';
+import "./collapsible.css";
 import { FaAngleDown, FaAngleUp } from "react-icons/fa";
+import { Collapse } from "react-bootstrap";
 
 //This is collapsible component, use it as if you are using any pre-designed component
 //Specify the Style of collapsible component as if you were styling a div using style prompt
@@ -49,8 +50,8 @@ const Collapsible = (props: PropTypes) => {
                 style={{ height: isOpen ? `fit-content` : '0px' }}>
                 <div className="container" style={props.containerStyle}>{props.children}</div>
             </div>
-        </div >
-    )
-}
+        </div>
+    );
+};
 
 export default Collapsible;
diff --git a/src/components/dashboard/AddProvider.tsx b/src/components/dashboard/AddProvider.tsx
index 6dfa60d..73ba6a3 100644
--- a/src/components/dashboard/AddProvider.tsx
+++ b/src/components/dashboard/AddProvider.tsx
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from "react";
 import Steps, { Step } from "rc-steps";
 import "rc-steps/assets/index.css";
 import "rc-steps/assets/iconfont.css";
-import 'bootstrap/dist/css/bootstrap.min.css';
+import "bootstrap/dist/css/bootstrap.min.css";
 import Form from "react-bootstrap/Form";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
@@ -27,8 +27,6 @@ import { storage } from "../../store";
 import { Store } from "reducers/types";
 const { v4: uuidv4 } = require("uuid");
 
-import { SimpleEditor } from "./TextComponent/SimpleEditor";
-
 let steps = [
     "Map",
     "Hours",
@@ -50,7 +48,9 @@ function AddProvider(props) {
     const [descriptions, setDescriptions] = useState(null);
     const [single, setSingle] = useState(null);
     const [error, setError] = useState("");
-    const [content, setContent] = useState('ex. "Changing lives one bit at a time..."');
+    const [content, setContent] = useState(
+        'ex. "Changing lives one bit at a time..."'
+    );
     const handleUpdate = (updatedContent: string) => {
         setContent(updatedContent);
     };
@@ -115,7 +115,6 @@ function AddProvider(props) {
 
     useEffect(() => {
         function updateSteps() {
-            console.log(filters)
             if (filters && !Object.keys(filters).length) {
                 const delIndex = steps.indexOf("Tag");
                 delIndex !== -1 && steps.splice(delIndex, 1);
@@ -140,7 +139,7 @@ function AddProvider(props) {
                 const delIndex = steps.indexOf("Toggle");
                 delIndex !== -1 && steps.splice(delIndex, 1);
             }
-            
+
             if (single && Object.keys(single).length) {
                 const delIndex = steps.indexOf("Toggle");
                 delIndex == -1 && steps.push("Toggle");
@@ -149,22 +148,51 @@ function AddProvider(props) {
         updateSteps();
     }, [filters, descriptions, single]);
 
-    // function updateSteps() {
-    //   if (filters && !Object.keys(filters).length) {
-    //     const delIndex = steps.indexOf("Tag");
-    //     delIndex !== -1 && steps.splice(delIndex, 1);
-    //   }
-
-    //   if (descriptions && !Object.keys(descriptions).length) {
-    //     const delIndex = steps.indexOf("Text");
-    //     delIndex !== -1 && steps.splice(delIndex, 1);
-    //   }
+    const validateComponents = (i) => {
+        if (!i.content) {
+            return true;
+        }
+        const components = (i.content?.sections ?? []).flatMap(
+            (section) => section.components
+        );
+        return components.every((component) => {
+            return validateComponent(component);
+        });
+    };
 
-    //   if (categories && !Object.keys(categories).length) {
-    //     const delIndex = steps.indexOf("Toggle");
-    //     delIndex !== -1 && steps.splice(delIndex, 1);
-    //   }
-    // }
+    const validateComponent = (component) => {
+        const { type, data } = component;
+        switch (type) {
+            case "Chart":
+                switch (data.type) {
+                    case "donut":
+                        return !!(data.data.donutData?.length > 0);
+                    case "progress":
+                        return (
+                            data.data.current != null &&
+                            !isNaN(data.data.current) &&
+                            data.data.total != null &&
+                            !isNaN(data.data.total)
+                        );
+                    case "line":
+                        return !!(data.data.lineData?.length > 0);
+                    default:
+                        return true;
+                }
+            case "Gallery":
+                return data.slidesArray.every((slide) => {
+                    return slide.title !== "";
+                });
+            case "Directory":
+                return data.items.every((item) => {
+                    return item.name !== "";
+                });
+            case "Embed":
+                return data.embedLink !== "";
+            default:
+                return true;
+        }
+    };
 
     async function addFirestore() {
         setIsLoading(true);
@@ -182,9 +210,9 @@ function AddProvider(props) {
                     fetch(
                         `https://maps.googleapis.com/maps/api/geocode/json?address=${i.address[0].replace(
                             /\s/g,
-                            "%20",
-                        )}&key=${GOOGLE_API_KEY}`,
-                    ),
+                            "%20"
+                        )}&key=${GOOGLE_API_KEY}`
+                    )
                 );
                 const responseJson = await response.json();
                 if (
@@ -196,7 +224,7 @@ function AddProvider(props) {
                 }
                 if (!i.imageURL) {
                     const res = await fetch(
-                        `https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`,
+                        `https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`
                     );
                     const blob = await res.blob();
                     const filename = i.facilityName + ".jpeg";
@@ -212,15 +240,15 @@ function AddProvider(props) {
             }
             await promiseWithTimeout(
                 5000,
-                props.firestore.set(
-                    { collection: "providers", doc: i.id },
-                    i,
-                ),
+                props.firestore.set({
+                    collection: "providers",
+                    doc: i.id
+                }, i)
             );
             props.history.push(providerRoute);
         } catch (e) {
             setError(
-                "Failed to save changes. Please check your network connection or try again later.",
+                "Failed to save changes. Please check your network connection or try again later."
             );
         } finally {
             setIsLoading(false);
@@ -239,8 +267,8 @@ function AddProvider(props) {
                 const response = await fetch(
                     `https://maps.googleapis.com/maps/api/geocode/json?address=${i.address[0].replace(
                         /\s/g,
-                        "%20",
-                    )}&key=${GOOGLE_API_KEY}`,
+                        "%20"
+                    )}&key=${GOOGLE_API_KEY}`
                 );
                 const responseJson = await response.json();
                 if (
@@ -252,7 +280,7 @@ function AddProvider(props) {
                 }
                 if (!i.imageURL) {
                     const res = await fetch(
-                        `https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`,
+                        `https://maps.googleapis.com/maps/api/streetview?size=500x500&location=${i.latitude},${i.longitude}&fov=80&heading=70&pitch=0&key=${GOOGLE_API_KEY}`
                     );
                     const blob = await res.blob();
                     const filename = i.facilityName + ".jpeg";
@@ -274,7 +302,7 @@ function AddProvider(props) {
                     querySnapshot.forEach((doc) => {
                         firestore.update(
                             { collection: "providers", doc: doc.id },
-                            i,
+                            i
                         );
                     });
                 });
@@ -282,7 +310,7 @@ function AddProvider(props) {
             props.history.push(providerRoute);
         } catch (e) {
             setError(
-                "Failed to save changes. Please check your network connection or try again later.",
+                "Failed to save changes. Please check your network connection or try again later."
             );
         } finally {
             setIsLoading(false);
@@ -343,13 +371,13 @@ function AddProvider(props) {
                                     disabled={!completed}
                                     onClick={
                                         props.selected &&
-                                        props.selected.facilityName
+                                            props.selected.facilityName
                                             ? updateFirestore
                                             : addFirestore
                                     }
                                 >
                                     {props.selected &&
-                                    props.selected.facilityName
+                                        props.selected.facilityName
                                         ? "Edit"
                                         : "Add"}{" "}
                                     Provider
@@ -366,7 +394,12 @@ function AddProvider(props) {
                         )}
                     </div>
                 </Col>
-                <Col xs={12} md={8} lg={9} style={{overflow: "scroll", height: "100vh"}}>
+                <Col
+                    xs={12}
+                    md={8}
+                    lg={9}
+                    style={{ overflow: "scroll", height: "100vh" }}
+                >
                     <Flipper flipKey={step}>
                         <Flipped flipId="form">
                             <div className="bg-white p-3">
@@ -389,10 +422,10 @@ function AddProvider(props) {
                                                     <Button
                                                         onClick={
                                                             step ===
-                                                            steps.length - 1
+                                                                steps.length - 1
                                                                 ? props.selected &&
-                                                                  props.selected
-                                                                      .facilityName
+                                                                    props.selected
+                                                                        .facilityName
                                                                     ? updateFirestore
                                                                     : addFirestore
                                                                 : next
@@ -400,15 +433,15 @@ function AddProvider(props) {
                                                         disabled={
                                                             !completed &&
                                                             step ===
-                                                                steps.length - 1
+                                                            steps.length - 1
                                                         }
                                                         variant="primary"
                                                     >
                                                         {step ===
-                                                        steps.length - 1
+                                                            steps.length - 1
                                                             ? props.selected &&
-                                                              props.selected
-                                                                  .facilityName
+                                                                props.selected
+                                                                    .facilityName
                                                                 ? "Edit Provider"
                                                                 : "Add Provider"
                                                             : "Next"}
@@ -434,9 +467,12 @@ function AddProvider(props) {
                                                             isValidNumberForRegion(
                                                                 parseIncompletePhoneNumber(
                                                                     i
-                                                                        .phoneNum[0],
+                                                                        .phoneNum[0]
                                                                 ),
-                                                                "US",
+                                                                "US"
+                                                            ) &&
+                                                            validateComponents(
+                                                                i
                                                             );
                                                         setItem(i);
                                                         setCompleted(c);
@@ -465,5 +501,5 @@ export default compose<any>(
         firebase: state.firebase,
         selected: state.item.selected,
         team: state.item.team,
-    })),
+    }))
 )(AddProvider);
diff --git a/src/components/dashboard/ContentForm.module.css b/src/components/dashboard/ContentForm.module.css
index e15ae66..9712a57 100644
--- a/src/components/dashboard/ContentForm.module.css
+++ b/src/components/dashboard/ContentForm.module.css
@@ -52,3 +52,19 @@
 .editableLabel::-webkit-scrollbar-thumb:hover {
     background-color: gray;
 }
+/* .card {
+
+} */
+.card::-webkit-scrollbar {
+    width: 5px;
+}
+.card::-webkit-scrollbar-track {
+    background-color: transparent;
+}
+.card::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: #a9a9a9;
+}
+.card::-webkit-scrollbar-thumb:hover {
+    background-color: gray;
+}
\ No newline at end of file
diff --git a/src/components/dashboard/ContentForm.tsx b/src/components/dashboard/ContentForm.tsx
index 4aaa7dd..f7c1b84 100644
--- a/src/components/dashboard/ContentForm.tsx
+++ b/src/components/dashboard/ContentForm.tsx
@@ -102,9 +102,164 @@ const SectionCard = ({
     isEditing,
     setIsEditing,
 }) => {
-    const [components, setComponents] = useState([]);
+    // const [components, setComponents] = useState(section.components);
+    // const [componentStates, setComponentStates] = useState({});
+    /* 
+        components = [{
+            type: "Chart",
+            data: {},
+        }]
+    */
+    const { components } = section;
+
+    const getDefaultData = (componentType) => {
+        switch (componentType) {
+            case "Chart":
+                return {
+                    type: "donut",
+                    title: "",
+                    data: {
+                        showNumber: true,
+                    },
+                };
+            case "Directory":
+                return {
+                    items: [
+                        { name: "", description: "", details: "", image: "" },
+                    ],
+                };
+            case "Embed":
+                return {
+                    embedLink: "",
+                    title: "",
+                };
+            case "Gallery":
+                return {
+                    slidesArray: [
+                        {
+                            title: "",
+                            description: "",
+                            imgLink: "",
+                        },
+                    ],
+                };
+            case "Text":
+                return {
+                    title: "Text",
+                    description: '<p>ex. "Changing lives one bit at a time..."</p>'
+                }
+            default:
+                return {};
+        }
+    };
+
+    const addComponent = (componentType) => {
+        const componentObject = {
+            type: componentType,
+            data: getDefaultData(componentType),
+        };
+        updateComponents([...components, componentObject]);
+    };
+    const updateIthComponent = (newData, i) => {
+        // console.log("here");
+        // console.log(newData);
+        const newComponents = components.map((component, iterator) => {
+            return iterator === i
+                ? { ...components[i], data: newData }
+                : component;
+        });
+        updateComponents(newComponents);
+    };
+    const deleteIthComponent = (i) => {
+        const newComponents = components.filter((_, iterator) => {
+            return iterator !== i;
+        });
+        updateComponents(newComponents);
+    };
+    const updateComponents = (newComponents) => {
+        const newSections = sections.map((sec, i) => {
+            return i === index
+                ? { ...section, components: newComponents }
+                : sec;
+        });
+        // console.log(newSections);
+        setSections(newSections);
+        // console.log(sect)
+        // console.log(sections);
+    };
+
+    const switchRender = (type, data, i) => {
+        switch (type) {
+            case "Chart":
+                return (
+                    <ChartComponentForm
+                        chartState={data}
+                        setChartState={(newState) => {
+                            updateIthComponent(newState, i);
+                        }}
+                        deleteComponent={() => {
+                            deleteIthComponent(i);
+                        }}
+                    ></ChartComponentForm>
+                );
+            case "Directory":
+                return (
+                    <DirectoryForm
+                        directoryState={data}
+                        setDirectoryState={(newState) => {
+                            updateIthComponent(newState, i);
+                        }}
+                        deleteComponent={() => {
+                            deleteIthComponent(i);
+                        }}
+                    ></DirectoryForm>
+                );
+            case "Embed":
+                return (
+                    <EmbedForm
+                        embedState={data}
+                        setEmbedState={(newState) => {
+                            updateIthComponent(newState, i);
+                        }}
+                        deleteComponent={() => {
+                            deleteIthComponent(i);
+                        }}
+                    ></EmbedForm>
+                );
+            case "Gallery":
+                return (
+                    <ProviderGallery
+                        galleryState={data}
+                        setGalleryState={(newState) => {
+                            updateIthComponent(newState, i);
+                        }}
+                        deleteComponent={() => {
+                            deleteIthComponent(i);
+                        }}
+                    ></ProviderGallery>
+                );
+            case "Text":
+                return (
+                    <SimpleEditor
+                        editorState={data}
+                        setEditorState={(newState) => {
+                            updateIthComponent(newState, i);
+                        }}
+                        deleteComponent={() => {
+                            deleteIthComponent(i);
+                        }}
+                    ></SimpleEditor>
+                );
+            default:
+                return <></>;
+        }
+    };
     return (
-        <Container fluid className="p-0 h-100 d-flex flex-column" style={{ overflowY: "scroll" }}>
+        <Container
+            fluid
+            className={`${styles.card} p-0 h-100 d-flex flex-column`}
+            style={{ overflowY: "scroll" }}
+        >
             <Row
                 className=" w-100 d-inline-flex flex-row align-items-center justify-content-between"
                 style={{
@@ -112,6 +267,9 @@ const SectionCard = ({
                     margin: "0px 0px 16px 0px",
                     // whiteSpace: "nowrap",
                     // overflow: "hidden",
+                    paddingLeft: "5px",
+                    paddingTop: "5px",
+                    paddingRight: "5px",
                 }}
             >
                 <EditableText
@@ -137,7 +295,7 @@ const SectionCard = ({
                     }}
                     onClick={() => {
                         setSelectedSection(null);
-                        setSections((sections) =>
+                        setSections(
                             sections.filter((_, i) => i !== index)
                         );
                     }}
@@ -145,14 +303,24 @@ const SectionCard = ({
                     Delete Section
                 </button>
             </Row>
-            {components.map((v, i) =>
+            {components.map((v, i) => (
                 <Row className="flex-fill m-0 w-100" key={i}>
-                    {v}
+                    <Collapsible
+                        style={{ width: "100%" }}
+                        titleStyle={{
+                            background: "white",
+                            color: "var(--chart-blue)",
+                            fontSize: "1.25rem",
+                            fontStyle: "normal",
+                            lineHeight: "24px",
+                        }}
+                        label={v.type}
+                    >
+                        {switchRender(v.type, v.data, i)}
+                    </Collapsible>
                 </Row>
-            )}
-            <Row
-                className="flex-fill m-0 w-100"
-            >
+            ))}
+            <Row className="flex-fill m-0 w-100">
                 <Dropdown>
                     <Dropdown.Toggle
                         style={{
@@ -160,85 +328,35 @@ const SectionCard = ({
                             fontSize: "16px",
                             fontWeight: "500",
                             fontFamily: "Inter, sans-serif",
-                        }} id="dropdown-basic">
+                        }}
+                        id="dropdown-basic"
+                    >
                         + Add Filter
                     </Dropdown.Toggle>
 
                     <Dropdown.Menu>
-                        <Dropdown.Item onClick={() =>
-                            setComponents([...components,
-                                <Collapsible
-                                    titleStyle={{
-                                        background: "white",
-                                        color: "var(--chart-blue)",
-                                        fontSize: "1.25rem",
-                                        fontStyle: "normal",
-                                        lineHeight: "24px"
-                                    }}
-                                    label={"Chart"}>
-                                    <ChartComponentForm />
-                                </Collapsible>
-                        ])}>Chart</Dropdown.Item>
-                        <Dropdown.Item onClick={() =>
-                            setComponents([...components,
-                            <Collapsible
-                                style={{width: "100%"}}
-                                titleStyle={{
-                                    background: "white",
-                                    color: "var(--chart-blue)",
-                                    fontSize: "1.25rem",
-                                    fontStyle: "normal",
-                                    lineHeight: "24px"
-                                }}
-                                label={"Gallery"}>
-                                <ProviderGallery />
-                            </Collapsible>
-                            ])}>Gallery</Dropdown.Item>
-                        <Dropdown.Item onClick={() =>
-                            setComponents([...components,
-                            <Collapsible
-                                style={{ width: "100%" }}
-                                titleStyle={{
-                                    background: "white",
-                                    color: "var(--chart-blue)",
-                                    fontSize: "1.25rem",
-                                    fontStyle: "normal",
-                                    lineHeight: "24px"
-                                }}
-                                label={"Directory"}>
-                                <DirectoryForm items={[]} />
-                            </Collapsible>
-                            ])}>Directory</Dropdown.Item>
-                        <Dropdown.Item onClick={() =>
-                            setComponents([...components,
-                            <Collapsible
-                                style={{ width: "100%" }}
-                                titleStyle={{
-                                    background: "white",
-                                    color: "var(--chart-blue)",
-                                    fontSize: "1.25rem",
-                                    fontStyle: "normal",
-                                    lineHeight: "24px"
-                                }}
-                                label={"Embed"}>
-                                <EmbedForm/>
-                            </Collapsible>
-                            ])}>Embed</Dropdown.Item>
-                        <Dropdown.Item onClick={() =>
-                            setComponents([...components,
-                            <Collapsible
-                                style={{ width: "100%" }}
-                                titleStyle={{
-                                    background: "white",
-                                    color: "var(--chart-blue)",
-                                    fontSize: "1.25rem",
-                                    fontStyle: "normal",
-                                    lineHeight: "24px"
-                                }}
-                                label={"Text"}>
-                                <SimpleEditor />
-                            </Collapsible>
-                            ])}>Text</Dropdown.Item>
+                        <Dropdown.Item
+                            onClick={() => {
+                                // console.log("")
+                                addComponent("Chart");
+                            }}
+                        >
+                            Chart
+                        </Dropdown.Item>
+                        <Dropdown.Item
+                            onClick={() => addComponent("Directory")}
+                        >
+                            Directory
+                        </Dropdown.Item>
+                        <Dropdown.Item onClick={() => addComponent("Embed")}>
+                            Embed
+                        </Dropdown.Item>
+                        <Dropdown.Item onClick={() => addComponent("Gallery")}>
+                            Gallery
+                        </Dropdown.Item>
+                        <Dropdown.Item onClick={() => addComponent("Text")}>
+                            Text
+                        </Dropdown.Item>
                     </Dropdown.Menu>
                 </Dropdown>
             </Row>
@@ -322,6 +440,7 @@ const ContentForm = ({ content, onChange }) => {
 
     const updateSections = (newSections) => {
         setSections(newSections);
+        console.log("Sections:", newSections);
         onChange(newSections);
     };
 
@@ -385,7 +504,7 @@ const ContentForm = ({ content, onChange }) => {
                 style={{
                     backgroundColor: "#E3E9F5",
                     padding: "16px 16px 28px 16px",
-                    width: "calc(100% - 264px)"
+                    width: "calc(100% - 264px)",
                 }}
             >
                 {selectedSection === null ? null : (
diff --git a/src/components/dashboard/DirectoryForm.module.css b/src/components/dashboard/DirectoryForm.module.css
index e7b60e5..c28e03b 100644
--- a/src/components/dashboard/DirectoryForm.module.css
+++ b/src/components/dashboard/DirectoryForm.module.css
@@ -1,12 +1,10 @@
 .directory::-webkit-scrollbar {
     width: 5px;
 }
-
 .directory::-webkit-scrollbar-track {
     background-color: transparent;
 }
 .directory::-webkit-scrollbar-thumb {
-    /* border: 15px solid transparent; */
     border-radius: 4px;
     background-color: #a9a9a9;
 }
@@ -16,10 +14,9 @@
 
 .addButton {
     border: 1px solid #226dff;
-    background: var(--drop-down-fill, #1346aa0f);
+    background: transparent;
     color: #226dff;
     font-size: 16px;
-    margin-top: 16px;
     width: 100px;
     height: 40px;
     font-weight: 600;
diff --git a/src/components/dashboard/DirectoryForm.tsx b/src/components/dashboard/DirectoryForm.tsx
index 1b420aa..12ce89e 100644
--- a/src/components/dashboard/DirectoryForm.tsx
+++ b/src/components/dashboard/DirectoryForm.tsx
@@ -48,6 +48,7 @@ const DirectoryFormItem = ({
             .child(filename)
             .getDownloadURL()
             .then((url) => {
+                console.log(url);
                 newItem = { ...newItem, image: url };
                 updateItem(newItem);
             });
@@ -56,7 +57,7 @@ const DirectoryFormItem = ({
     return (
         <div
             className="directoryItem"
-            style={{ display: "flex", flexDirection: "column" }}
+            style={{ display: "flex", flexDirection: "column", marginBottom: "8px"}}
         >
             <div
                 style={{
@@ -75,7 +76,7 @@ const DirectoryFormItem = ({
                     placeholder="ex. Hannah"
                     value={item.name}
                     onChange={handleNameChange}
-                    style={{marginLeft: "2px"}}
+                    style={{ marginLeft: "2px" }}
                 />
             </Form.Group>
             <Form.Group>
@@ -121,9 +122,11 @@ const DirectoryFormItem = ({
                     fontWeight: "500",
                 }}
                 onClick={() => {
-                    setDirectoryItems((directoryItems) =>
-                        directoryItems.filter((_, i) => i !== index)
+                    const filterItems = directoryItems.filter(
+                        (_, i) => i !== index
                     );
+                    // console.log(filterItems);
+                    setDirectoryItems(filterItems);
                 }}
             >
                 Delete
@@ -132,8 +135,19 @@ const DirectoryFormItem = ({
     );
 };
 
-const DirectoryForm = ({ items }) => {
-    const [isOpen, setIsOpen] = useState(false);
+interface DirectoryState {
+    items: DirectoryItem[];
+}
+
+const DirectoryForm = ({
+    directoryState,
+    setDirectoryState,
+    deleteComponent,
+}: {
+    directoryState: DirectoryState;
+    setDirectoryState: (newState: DirectoryState) => void;
+    deleteComponent: () => void;
+}) => {
     const defaultDirectoryItem: DirectoryItem = {
         name: "",
         description: "",
@@ -141,7 +155,16 @@ const DirectoryForm = ({ items }) => {
         image: "",
     };
     //might have to lift this state later to avoid one shared state
-    const [directoryItems, setDirectoryItems] = useState<DirectoryItem[]>(items);
+    // const [directoryItems, setDirectoryItems] = useState<DirectoryItem[]>(
+    //     data.items
+    // );
+    const { items: directoryItems } = directoryState;
+
+    const setDirectoryItems = (newItems) => {
+        // console.log(newItems);
+        setDirectoryState({ ...directoryState, items: newItems });
+    };
+
     /*
     directoryItem
     {
@@ -156,7 +179,6 @@ const DirectoryForm = ({ items }) => {
             style={{
                 width: "100%",
                 height: "100%",
-                padding: "16px",
                 display: "flex",
                 flexDirection: "column",
             }}
@@ -164,34 +186,54 @@ const DirectoryForm = ({ items }) => {
             <div
                 className={`${styles.directory}`}
                 style={{
-                    paddingRight: "5px",
-                    marginTop: "16px",
-                    overflowY: "scroll",
+                    // paddingRight: "5px",
+                    // marginTop: "16px",
+                    // overflow: "auto",
                 }}
             >
                 {/* {directoryItems.length} */}
-                {directoryItems.map((directoryItem, index) => (
-                    // console.log()
-                    <DirectoryFormItem
-                        key={index}
-                        index={index}
-                        item={directoryItem}
-                        directoryItems={directoryItems}
-                        setDirectoryItems={setDirectoryItems}
-                    ></DirectoryFormItem>
-                ))}
-                <button
-                    className={`addButton ${styles.addButton}`}
-                    type="button"
-                    onClick={() => {
-                        setDirectoryItems([
-                            ...directoryItems,
-                            defaultDirectoryItem,
-                        ]);
-                    }}
+                {directoryItems.map((directoryItem, index) => {
+                    return (
+                        // console.log()
+                        <DirectoryFormItem
+                            key={index}
+                            index={index}
+                            item={directoryItem}
+                            directoryItems={directoryItems}
+                            setDirectoryItems={setDirectoryItems}
+                        ></DirectoryFormItem>
+                    );
+                })}
+                {/* < */}
+                <div
+                    style={{ display: "flex", justifyContent: "space-between", marginTop: "16px"}}
                 >
-                    + Add Item
-                </button>
+                    <button
+                        className={`addButton ${styles.addButton}`}
+                        type="button"
+                        onClick={() => {
+                            setDirectoryItems([
+                                ...directoryItems,
+                                defaultDirectoryItem,
+                            ]);
+                        }}
+                    >
+                        + Add Item
+                    </button>
+                    <button
+                        type="button"
+                        id="delete"
+                        style={{
+                            color: "red",
+                            border: "1px solid red",
+                            padding: "5px",
+                            borderRadius: "4px",
+                        }}
+                        onClick={deleteComponent}
+                    >
+                        Delete Component
+                    </button>
+                </div>
             </div>
         </div>
     );
diff --git a/src/components/dashboard/EventInfoComponent.css b/src/components/dashboard/EventInfoComponent.css
index f0adb71..7a3c319 100644
--- a/src/components/dashboard/EventInfoComponent.css
+++ b/src/components/dashboard/EventInfoComponent.css
@@ -10,7 +10,6 @@
   .event-description {
     font-family: Arial, sans-serif;
     font-size: 16px;
-    color: #7f8c8d;
     line-height: 1.6;
     margin-bottom: 12px;
   }
diff --git a/src/components/dashboard/EventInfoComponent.tsx b/src/components/dashboard/EventInfoComponent.tsx
index 682db54..a0d4744 100644
--- a/src/components/dashboard/EventInfoComponent.tsx
+++ b/src/components/dashboard/EventInfoComponent.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import './EventInfoComponent.css';
-import Collapsible from 'components/collapsible';
 
 interface EventInfoComponentProps {
   description: string;
@@ -8,7 +7,7 @@ interface EventInfoComponentProps {
 
 const EventInfoComponent: React.FC<EventInfoComponentProps> = ({ description }) => {
   return (
-      <p className="event-description">{description}</p>
+    <p dangerouslySetInnerHTML={{ __html: description }} className="event-description"/>
   );
 };
 
diff --git a/src/components/dashboard/ProviderGallery.tsx b/src/components/dashboard/ProviderGallery.tsx
index a444f20..af661fe 100644
--- a/src/components/dashboard/ProviderGallery.tsx
+++ b/src/components/dashboard/ProviderGallery.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Provider } from "react";
 import ProviderGallerySlide from "./ProviderGallerySlide";
 import { storage } from "../../store";
+import { Button } from "react-bootstrap";
 
 interface GallerySlide {
     title: string;
@@ -8,12 +9,24 @@ interface GallerySlide {
     imgLink: string;
 }
 
+interface GalleryState {
+    slidesArray: GallerySlide[];
+}
+
 export default function ProviderGallery({
-    slidesArray = [],
+    galleryState,
+    setGalleryState,
+    deleteComponent,
 }: {
-    slidesArray?: GallerySlide[];
+    galleryState: GalleryState;
+    setGalleryState: (newState: GalleryState) => void;
+    deleteComponent: () => void;
 }) {
-    const [slides, setSlides] = useState<GallerySlide[]>(slidesArray);
+    const { slidesArray: slides } = galleryState;
+
+    const setSlides = (newSlides) => {
+        setGalleryState({ ...galleryState, slidesArray: newSlides });
+    };
 
     const defaultSlide: GallerySlide = {
         title: "",
@@ -21,12 +34,6 @@ export default function ProviderGallery({
         imgLink: "",
     };
 
-    useEffect(() => {
-        if (!slides || slides.length === 0) {
-            setSlides([{ ...defaultSlide }]);
-        }
-    }, [slides]);
-
     const handleSlideDataChange = (
         index: number,
         field: keyof GallerySlide,
@@ -39,10 +46,8 @@ export default function ProviderGallery({
     };
 
     const handleDelete = (index: number) => {
-        if (slides.length > 1) {
-            const newSlides = slides.filter((_, i) => i !== index);
-            setSlides(newSlides);
-        }
+        const newSlides = slides.filter((_, i) => i !== index);
+        setSlides(newSlides);
     };
 
     const handleAdd = (index: number) => {
@@ -85,12 +90,46 @@ export default function ProviderGallery({
     };
 
     return (
-        <div style={{ width: "100%", margin: "0px" }}>
+        <div
+            style={{
+                width: "100%",
+                margin: "0px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+            }}
+        >
             {renderSlides()}
-            {/*TO BE DELETED */}
-            <div>
-                <h4>Current Data:</h4>
-                <pre>{JSON.stringify(slides, null, 2)}</pre>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+                <Button
+                    onClick={() => handleAdd(slides.length - 1)}
+                    style={{
+                        backgroundColor: "white",
+                        color: "#226DFF",
+                        fontWeight: "500",
+                        letterSpacing: "-0.176px",
+                        lineHeight: "150%",
+                        fontSize: "1rem",
+                        padding: "8px",
+                        border: "border: 1px solid #226DFF",
+                        width: "fit-content",
+                    }}
+                >
+                    + Add slide
+                </Button>
+                <button
+                    type="button"
+                    id="delete"
+                    style={{
+                        color: "red",
+                        border: "1px solid red",
+                        padding: "5px",
+                        borderRadius: "4px",
+                    }}
+                    onClick={deleteComponent}
+                >
+                    Delete Component
+                </button>
             </div>
         </div>
     );
diff --git a/src/components/dashboard/ProviderGallerySlide.tsx b/src/components/dashboard/ProviderGallerySlide.tsx
index a79440a..2f77985 100644
--- a/src/components/dashboard/ProviderGallerySlide.tsx
+++ b/src/components/dashboard/ProviderGallerySlide.tsx
@@ -64,13 +64,18 @@ export default function ProviderGallerySlide({
             </Form>
             <div
                 style={{
-                    marginBottom: "24px",
+                    marginBottom: "16px",
                     display: "flex",
                     flexDirection: "column",
                     gap: "16px",
                 }}
             >
-                <div style={{ display: "flex", justifyContent: "end" }}>
+                <div
+                    style={{
+                        display: "flex",
+                        justifyContent: "end",
+                    }}
+                >
                     <Button
                         onClick={() => handleDelete(index)}
                         style={{
@@ -82,22 +87,6 @@ export default function ProviderGallerySlide({
                         Delete
                     </Button>
                 </div>
-                <Button
-                    onClick={() => handleAdd(index)}
-                    style={{
-                        backgroundColor: "white",
-                        color: "#226DFF",
-                        fontWeight: "500",
-                        letterSpacing: "-0.176px",
-                        lineHeight: "150%",
-                        fontSize: "1rem",
-                        padding: "8px",
-                        border: "border: 1px solid #226DFF",
-                        width: "fit-content",
-                    }}
-                >
-                    + Add slide
-                </Button>
             </div>
         </div>
     );
diff --git a/src/components/dashboard/RowForm.tsx b/src/components/dashboard/RowForm.tsx
index d563522..b2643fb 100644
--- a/src/components/dashboard/RowForm.tsx
+++ b/src/components/dashboard/RowForm.tsx
@@ -64,7 +64,7 @@ const RowForm = (props) => {
         address: [],
         description: "",
         buildingNum: [],
-        stationNum: [],
+        stationNum: "",
         childcare: [false],
         epic: [false],
         hours: {},
@@ -386,7 +386,7 @@ const RowForm = (props) => {
                                 <Form.Control
                                     name="stationNum"
                                     type="number"
-                                    value={item.stationNum[0]}
+                                    value={item.stationNum}
                                     onChange={handleInputChange}
                                     placeholder="#"
                                     style={{ width: '100px' }}
diff --git a/src/components/dashboard/TextComponent/SimpleEditor.tsx b/src/components/dashboard/TextComponent/SimpleEditor.tsx
index 1a83e2f..4f87ad7 100644
--- a/src/components/dashboard/TextComponent/SimpleEditor.tsx
+++ b/src/components/dashboard/TextComponent/SimpleEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState} from "react";
+import React, { useCallback, useState } from "react";
 import classNames from "classnames";
 import "./styles.css";
 import { useEditor, EditorContent, Editor, BubbleMenu } from "@tiptap/react";
@@ -17,7 +17,7 @@ import TextAlign from "@tiptap/extension-text-align";
 import * as Icons from "./Icons";
 import { LinkModal } from "./LinkModal";
 import CustomDropdown from "./CustomDropdown";
-import { TextColor } from "./TextColor/TextColor"; 
+import { TextColor } from "./TextColor/TextColor";
 import ColorPickerButton from "./TextColor/ColorPickerButton";
 import BulletList from "@tiptap/extension-bullet-list";
 import ListItem from "@tiptap/extension-list-item";
@@ -26,8 +26,18 @@ import Image from "@tiptap/extension-image";
 import Blockquote from "@tiptap/extension-blockquote";
 import bqSVG from "../../../assets/svg/blockquote.svg"
 
-
-export function SimpleEditor() {
+interface EditorState {
+  title: string;
+  description: string;
+};
+
+export function SimpleEditor(
+  { editorState, setEditorState, deleteComponent }:
+    {
+      editorState: EditorState;
+      setEditorState: (newState: EditorState) => void;
+      deleteComponent: () => void;
+    }) {
   const CustomImage = Image.extend({
     addAttributes() {
       return {
@@ -60,7 +70,13 @@ export function SimpleEditor() {
       CustomImage,
       Blockquote
     ],
-    content: '<p>ex. "Changing lives one bit at a time..."</p>',
+    content: editorState.description,
+    onUpdate: ({ editor }) => {
+      setEditorState({
+        ...editorState,
+        description: editor.getHTML()
+      });
+    }
   }) as Editor;
 
   const [modalIsOpen, setIsOpen] = useState(false);
@@ -129,7 +145,7 @@ export function SimpleEditor() {
   const addImage = useCallback(() => {
     const imageUrl: string | null = prompt("Enter the image URL");
     if (imageUrl) {
-      editor.chain().focus().setImage({ src: imageUrl }).run(); 
+      editor.chain().focus().setImage({ src: imageUrl }).run();
     }
   }, [editor]);
 
@@ -169,7 +185,7 @@ export function SimpleEditor() {
       </BubbleMenu>
 
       <div className="inner-box" style={{ overflow: "scroll" }}>
-        
+
         <div className="menu">
           <button
             type="button"
@@ -182,7 +198,7 @@ export function SimpleEditor() {
           >
             <Icons.RotateLeft />
           </button>
-          
+
           <button
             type="button"
             className="menu-button"
@@ -296,7 +312,7 @@ export function SimpleEditor() {
               editor.chain().focus().toggleBulletList().run();
             }}
           >
-            <Icons.BulletListIcon /> 
+            <Icons.BulletListIcon />
           </button>
 
           <button
@@ -306,7 +322,7 @@ export function SimpleEditor() {
             })}
             onClick={() => editor.chain().focus().toggleOrderedList().run()}
           >
-            <Icons.NumberedListIcon /> 
+            <Icons.NumberedListIcon />
           </button>
 
           <button
@@ -323,9 +339,9 @@ export function SimpleEditor() {
           </button>
 
           <button
-          type="button"
-          className="menu-button"
-          onClick={addImage}
+            type="button"
+            className="menu-button"
+            onClick={addImage}
           >
             <Icons.ImageIcon />
           </button>
@@ -341,8 +357,8 @@ export function SimpleEditor() {
             }}
           >
             <img src={bqSVG} alt="Blockquote" style={{ width: 20, height: 20 }} />
-            </button>
-            
+          </button>
+
         </div>
         <EditorContent editor={editor} />
       </div>
@@ -357,6 +373,24 @@ export function SimpleEditor() {
         onSaveLink={saveLink}
         onRemoveLink={removeLink}
       />
+
+      <div
+        style={{ display: "flex", justifyContent: "end", marginTop: "16px" }}
+      >
+        <button
+          type="button"
+          id="delete"
+          style={{
+            color: "red",
+            border: "1px solid red",
+            padding: "5px",
+            borderRadius: "4px",
+          }}
+          onClick={deleteComponent}
+        >
+          Delete Component
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/dashboard/embed-component/EmbedComponent.tsx b/src/components/dashboard/embed-component/EmbedComponent.tsx
index 7221680..5a02709 100644
--- a/src/components/dashboard/embed-component/EmbedComponent.tsx
+++ b/src/components/dashboard/embed-component/EmbedComponent.tsx
@@ -4,7 +4,7 @@ import ReactPlayer from 'react-player';
 interface EventInfo {
   title: string,
   videoUrl: string;
-  thumbnail: string;
+  // thumbnail: string;
 }
 
 interface EmbedComponentProps {
@@ -13,6 +13,7 @@ interface EmbedComponentProps {
 
 const EmbedComponent: React.FC<EmbedComponentProps> = ({ eventInfo }) => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const DEFAULT_THUMBNAIL = "https://joeferry.com/wp-content/plugins/video-thumbnails/default.jpg";
 
   const handlePlayVideo = () => {
     setIsPlaying(true);
@@ -22,7 +23,7 @@ const EmbedComponent: React.FC<EmbedComponentProps> = ({ eventInfo }) => {
       <div style={styles.innerContent}>
         {!isPlaying ? (
           <div style={styles.videoThumbnail} onClick={handlePlayVideo}>
-            <img src={eventInfo.thumbnail} alt="Video thumbnail" style={styles.thumbnail} />
+            <img src={DEFAULT_THUMBNAIL} alt="Video thumbnail" style={styles.thumbnail} />
             <div style={styles.playButtonOverlay}>
               <div style={styles.circleButton}>
                 <span style={styles.triangle}></span>
diff --git a/src/components/dashboard/embed-component/EmbedForm.tsx b/src/components/dashboard/embed-component/EmbedForm.tsx
index f2b4acb..b5d5ed1 100644
--- a/src/components/dashboard/embed-component/EmbedForm.tsx
+++ b/src/components/dashboard/embed-component/EmbedForm.tsx
@@ -1,98 +1,123 @@
-import React, { useState } from 'react';
+import React from "react";
+interface EmbedState {
+    embedLink: string;
+    title: string;
+}
 
-const EmbedForm: React.FC = () => {
-  const [embedLink, setEmbedLink] = useState<string>('');
-  const [title, setTitle] = useState<string>('');
+const EmbedForm = ({
+    embedState,
+    setEmbedState,
+    deleteComponent,
+}: {
+    embedState: EmbedState;
+    setEmbedState: (newState: EmbedState) => void;
+    deleteComponent: () => void;
+}) => {
+    const { embedLink, title } = embedState;
 
-  return (
-    <div style={styles.formContainer}>
-      <div style={styles.formGroup}>
-        <label>Title</label>
-        <input
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          style={styles.input}
-        />
-      </div>
+    const setEmbedLink = (newEmbedLink) => {
+        setEmbedState({ ...embedState, embedLink: newEmbedLink });
+    };
+    const setTitle = (newTitle) => {
+        setEmbedState({ ...embedState, title: newTitle });
+    };
 
-      <div style={styles.formGroup}>
-        <label>Embed Link *</label>
-        <textarea
-          placeholder="ex. <iframe>...</iframe>"
-          value={embedLink}
-          onChange={(e) => setEmbedLink(e.target.value)}
-          style={styles.textarea}
-        />
-      </div>
+    return (
+        <div style={styles.formContainer}>
+            <div style={styles.formGroup}>
+                <label>Title</label>
+                <input
+                    type="text"
+                    value={title}
+                    onChange={(e) => setTitle(e.target.value)}
+                    style={styles.input}
+                />
+            </div>
 
-      <label style={styles.deleteLabel}>Delete</label>
-    </div>
-  );
+            <div style={styles.formGroup}>
+                <label>Embed Link *</label>
+                <textarea
+                    placeholder="ex. <iframe>...</iframe>"
+                    value={embedLink}
+                    onChange={(e) => setEmbedLink(e.target.value)}
+                    style={styles.textarea}
+                />
+            </div>
+
+            <button type="button" style={styles.deleteLabel} onClick={deleteComponent}>
+                Delete Component
+            </button>
+        </div>
+    );
 };
 
 const styles: { [key: string]: React.CSSProperties } = {
-  formContainer: {
-    width: '100%',
-    maxWidth: '800px',
-    height: '220px',
-    position: 'relative',
-  },
-  header: {
-    fontSize: '18px',
-    marginBottom: '10px',
-    color: '#226DFF',
-  },
-  formGroup: {
-    marginBottom: '15px',
-  },
-  input: {
-    width: '100%',
-    padding: '8px',
-    fontSize: '14px',
-    borderRadius: '4px',
-    border: '1px solid #ccc',
-  },
-  textarea: {
-    width: '100%',
-    padding: '8px',
-    fontSize: '14px',
-    height: '60px',
-    borderRadius: '4px',
-    border: '1px solid #ccc',
-  },
-  info: {
-    fontSize: '12px',
-    color: '#F0F4FA',
-    marginBottom: '15px',
-  },
-  dimensionsContainer: {
-    display: 'flex',
-    justifyContent: 'flex-start',
-    gap: '20px',
-    marginBottom: '15px',
-  },
-  dimensionGroup: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-  dimensionInput: {
-    width: '80px',
-    padding: '6px',
-    fontSize: '14px',
-    borderRadius: '4px',
-    border: '1px solid #ccc',
-    textAlign: 'center',
-    marginTop: '5px',
-  },
-  deleteLabel: {
-    position: 'absolute',
-    bottom: '0px',
-    right: '20px',
-    fontWeight: '500',
-    cursor: 'pointer',
-  }
+    formContainer: {
+        width: "100%",
+        maxWidth: "800px",
+        height: "220px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+    },
+    header: {
+        fontSize: "18px",
+        marginBottom: "10px",
+        color: "#226DFF",
+    },
+    formGroup: {
+        marginBottom: "15px",
+    },
+    input: {
+        width: "100%",
+        padding: "8px",
+        fontSize: "14px",
+        borderRadius: "4px",
+        border: "1px solid #ccc",
+    },
+    textarea: {
+        width: "100%",
+        padding: "8px",
+        fontSize: "14px",
+        height: "60px",
+        borderRadius: "4px",
+        border: "1px solid #ccc",
+    },
+    info: {
+        fontSize: "12px",
+        color: "#F0F4FA",
+        marginBottom: "15px",
+    },
+    dimensionsContainer: {
+        display: "flex",
+        justifyContent: "flex-start",
+        gap: "20px",
+        marginBottom: "15px",
+    },
+    dimensionGroup: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-start",
+    },
+    dimensionInput: {
+        width: "80px",
+        padding: "6px",
+        fontSize: "14px",
+        borderRadius: "4px",
+        border: "1px solid #ccc",
+        textAlign: "center",
+        marginTop: "5px",
+    },
+    deleteLabel: {
+        fontWeight: "500",
+        cursor: "pointer",
+        alignSelf: "end",
+        padding: "5px",
+        background: "transparent",
+        borderRadius: "4px",
+        border: "1px solid red",
+        color: "red",
+    },
 };
 
 export default EmbedForm;
diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx
index 4f11356..cf118bf 100644
--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@@ -9,10 +9,8 @@ import Col from "react-bootstrap/Col";
 import Dropdown from "react-bootstrap/Dropdown";
 import Form from "react-bootstrap/Form";
 import InputGroup from "react-bootstrap/InputGroup";
-import Modal from "react-bootstrap/Modal";
 import Pagination from "react-bootstrap/Pagination";
 import Row from "react-bootstrap/Row";
-import { FaRegQuestionCircle, FaTimesCircle } from "react-icons/fa";
 import { connect } from "react-redux";
 import { isEmpty, isLoaded, withFirestore } from "react-redux-firebase";
 import { Store } from "reducers/types";
@@ -20,22 +18,17 @@ import { compose } from "redux";
 import { GOOGLE_API_KEY } from "../../config/keys";
 import localizationStrings from "../../utils/Localization";
 import ProviderInfo from "../subcomponents/ProviderInfo";
-import ProviderInfoMobile from "../subcomponents/ProviderInfoMobile";
 import GoogleMap from "./GoogleMap";
 import ProviderCell from "./ProviderCell";
-import { Tooltip as ReactTooltip } from "react-tooltip";
 import searchIcon from "../../assets/img/searchicon.png";
 import x from "../../assets/img/x.png";
 import dropdownIcon from "../../assets/svg/chevron-down.svg";
 import Switch from "react-switch";
-import { func } from "prop-types";
 import { MdChevronRight } from "react-icons/md";
 import ProgressBar from "components/subcomponents/chartcomponents/ProgressBar";
 import DonutChart from "components/subcomponents/chartcomponents/DonutChart";
 import LineChart from "components/subcomponents/chartcomponents/LineChart";
 import backArrow from '../../assets/img/back-arrow.png';
-import ChartComponentForm from "components/subcomponents/chartcomponents/ChartComponentForm";
-import Collapsible from "components/collapsible";
 
 const frame = require("../../assets/svg/Frame.svg");
 
@@ -77,11 +70,6 @@ const getWidth = () =>
 const Map = (props) => {
     const { setIsOpen } = useTour();
     const [upperPageBound, setUpperPageBound] = useState(PAGE_SIZE);
-    // const [filterActive, setFilterActive] = useState(false);
-    const [filtersActive, setFiltersActive] = useState({
-        filter1: [],
-        filter2: [],
-    });
     const [filterActiveState, setFilterActiveState] = useState({
         filter1: false,
         filter2: false,
@@ -89,8 +77,6 @@ const Map = (props) => {
     const [lowerPageBound, setLowerPageBound] = useState(0);
     const [currPage, setCurrPage] = useState(1);
     const [providers, setProviders] = useState([]);
-    const [showModal, setShowModal] = useState(false);
-    const [moreFilter, setMoreFilter] = useState(false);
     const [defaultView, setDefaultView] = useState(true);
     const [isLoading, setIsLoading] = useState(true);
     const [selectedIndex, setSelectedIndex] = useState(0);
@@ -99,12 +85,9 @@ const Map = (props) => {
     const [, setZipProviders] = useState([]);
     const [searchName, setSearchName] = useState("");
     const [searchZip, setSearchZip] = useState("");
-    // const [name, setName] = useState(null);
-    // const [markers, setMarkers] = useState(null);
     const [currmarker, setCurrmarker] = useState(-1);
     const [point, setPoint] = useState(true);
     const [distances, setDistances] = useState({});
-    //const [prevSearchLen, setPrevSearchLen] = useState(0);
 
     const [primaryColor, setPrimaryColor] = useState("");
     const [, setSecondaryColor] = useState("");
@@ -115,7 +98,6 @@ const Map = (props) => {
     const [filtersState, setFiltersState] = useState({});
     const [filtersData, setFiltersData] = useState({});
     const [categories, setCategories] = useState([]);
-    const [isOpen, setOpen] = useState(false);
 
     const [showInfo, setShowInfo] = useState(false)
 
@@ -1028,7 +1010,7 @@ const Map = (props) => {
                                             >
                                                 <img src={backArrow} alt="Back" style={{ width: '80%', height: '80%', marginBottom: '8px' }} />      
                                             </a>                                          
-                                            <h4 style={{fontWeight: "bold",}}>{providers[selectedIndex].facilityName}</h4>
+                                            <h4 style={{ fontWeight: "bold", }}>{providers[selectedIndex].facilityName + " #" + providers[selectedIndex].stationNum}</h4>
                                             </div>
                                         ) : (
                                             <InputGroup className="mb-3">
@@ -1170,12 +1152,7 @@ const Map = (props) => {
                                                     <div className="content d-flex flex-column">
                                                         <ProviderInfo item={activeProviders[selectedIndex]} categories={categories} />
                                                         <div className="mt-2">
-                                                            
-                                                            <Collapsible label={"Graph"} containerStyle={{placeItems: "flex-start"}}>
-                                                                <ChartComponentForm/>
-                                                            </Collapsible>
-                                                        </div>
-                                                        
+                                                        </div>                              
                                                     </div>
                                                 </div>
                                             </div>
diff --git a/src/components/subcomponents/ProviderInfo.tsx b/src/components/subcomponents/ProviderInfo.tsx
index 14c775f..c82befe 100644
--- a/src/components/subcomponents/ProviderInfo.tsx
+++ b/src/components/subcomponents/ProviderInfo.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import Container from "react-bootstrap/Container";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
@@ -12,126 +12,156 @@ import Linkify from "react-linkify";
 import ProviderGalleryCarousel from "components/dashboard/ProviderGalleryCarousel";
 import Collapsible from "components/collapsible";
 import Directory from "components/dashboard/Directory";
-import EmbedForm from "components/dashboard/embed-component/EmbedForm";
 import EmbedComponent from "components/dashboard/embed-component/EmbedComponent";
-import EventInfoComponent from "components/dashboard/EventInfoComponent";
+import DonutChart from "./chartcomponents/DonutChart";
+import ProgressBar from "./chartcomponents/ProgressBar";
+import LineChart from "./chartcomponents/LineChart";
 import GeneralInfo from "components/dashboard/GeneralInfo";
-
-{
-    /*TO BE DELETED */
-}
-const eventInfo2 = {
-    title: "Compnent TEXTTT",
-    description: "Sample content",
-};
-const galleryData = [
-    {
-        title: "Urban Tree Fundraiser",
-        description:
-            "Last Friday, we gathered for food, fun, and giving back at Urban Tree cidery. All proceeds from the evening went to our Bereavement fund. Everyone remembered to bring a sweater because the back deck got cold. We enjoyed drinks, games, and more!",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal2",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal3",
-        description: "testing testing",
-        imgLink:
-            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
-    },
-    {
-        title: "testVal4",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal1",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal2",
-        description: "testing testing",
-        imgLink:
-            "https://static.vecteezy.com/system/resources/thumbnails/005/857/332/small_2x/funny-portrait-of-cute-corgi-dog-outdoors-free-photo.jpg",
-    },
-    {
-        title: "testVal3",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-    {
-        title: "testVal4",
-        description: "testing testing",
-        imgLink:
-            "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-    },
-];
-const directoryData =
-    [
-        {
-            name: "bob",
-            description: "firefighter",
-            details: "bob@gmail.com",
-            image: "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-        },
-        {
-            name: "bob",
-            description: "firefighter",
-            details: "bob@gmail.com",
-            image: "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-        },
-        {
-            name: "bob",
-            description: "firefighter",
-            details: "bob@gmail.com",
-            image: "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-        },
-        {
-            name: "bob",
-            description: "firefighter",
-            details: "bob@gmail.com",
-            image: "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-        },
-        {
-            name: "bob",
-            description: "firefighter",
-            details: "bob@gmail.com",
-            image: "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-        },
-        {
-            name: "bob",
-            description: "firefighter",
-            details: "bob@gmail.com",
-            image: "https://images.squarespace-cdn.com/content/v1/54822a56e4b0b30bd821480c/45ed8ecf-0bb2-4e34-8fcf-624db47c43c8/Golden+Retrievers+dans+pet+care.jpeg",
-        }
-    ];
-const eventInfo = {
-    title: "Tour Our Station",
-    videoUrl: "https://www.youtube.com/watch?v=oZcKTf4RLQ8&ab_channel=HorizonsHealth",
-    thumbnail: "https://picsum.photos/200",
-};
+import ReadMoreAndLess from "react-read-more-less";
+import EventInfoComponent from "components/dashboard/EventInfoComponent";
 
 const ProviderInfo = (props) => {
     const [image, setImage] = useState("bog");
     const [streetView, setStreetView] = useState("bog");
     const [isLoading, setIsLoading] = useState(true);
+    const sections = props.item.content?.sections ?? [];
+
+    const components = useMemo(() => {
+        return sections.flatMap((section) => section.components);
+    }, [sections]);
+
+    const renderComponent = (component) => {
+        const { type, data } = component;
+        // console.log(data);
+        switch (type) {
+            case "Chart":
+                switch (data.type) {
+                    case "donut":
+                        return (
+                            <Collapsible
+                                label={type}
+                                style={{
+                                    maxWidth: "1000px",
+                                    marginLeft: "auto",
+                                    marginRight: "auto",
+                                }}
+                            >
+                                <DonutChart
+                                    data={data.data.donutData}
+                                    buttonLink={data.data.buttonLink}
+                                    buttonLabel={data.data.buttonLabel}
+                                ></DonutChart>
+                            </Collapsible>
+                        );
+                    case "progress":
+                        return (
+                            <Collapsible
+                                label={type}
+                                style={{
+                                    maxWidth: "1000px",
+                                    marginLeft: "auto",
+                                    marginRight: "auto",
+                                }}
+                            >
+                                <ProgressBar
+                                    current={data.data.current}
+                                    total={data.data.total}
+                                    units={data.data.units}
+                                    buttonLink={data.data.buttonLink}
+                                    buttonLabel={data.data.buttonLabel}
+                                ></ProgressBar>
+                            </Collapsible>
+                        );
+                    case "line":
+                        return (
+                            <Collapsible
+                                label={type}
+                                style={{
+                                    maxWidth: "1000px",
+                                    marginLeft: "auto",
+                                    marginRight: "auto",
+                                }}
+                            >
+                                <LineChart
+                                    title={data.title}
+                                    data={data.data.lineData}
+                                ></LineChart>
+                            </Collapsible>
+                        );
+                    default:
+                        return <></>;
+                }
+            case "Gallery":
+                return (
+                    <Collapsible
+                        label={type}
+                        style={{
+                            maxWidth: "1000px",
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                        }}
+                    >
+                        <ProviderGalleryCarousel
+                            slidesArray={data.slidesArray}
+                        ></ProviderGalleryCarousel>
+                    </Collapsible>
+                );
+            case "Directory":
+                return (
+                    <Collapsible
+                        label={type}
+                        style={{
+                            maxWidth: "1000px",
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                        }}
+                    >
+                        <Directory directoryItems={data.items}></Directory>
+                    </Collapsible>
+                );
+            case "Embed":
+                const eventInfo = {
+                    title: data.title,
+                    videoUrl: data.embedLink,
+                }
+                return (
+                    <Collapsible
+                        label={eventInfo.title}
+                        style={{
+                            maxWidth: "1000px",
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                        }}
+                    >
+                        <EmbedComponent eventInfo={eventInfo}></EmbedComponent>
+                    </Collapsible>
+                );
+            case "Text":
+                return (
+                    <Collapsible
+                        label={data.title}
+                        style={{
+                            maxWidth: "1000px",
+                            marginLeft: "auto",
+                            marginRight: "auto",
+                        }}
+                    >
+                        <EventInfoComponent description={data.description}></EventInfoComponent>
+                    </Collapsible>
+                );
+            default:
+                return <></>;
+        }
+    };
 
     useEffect(() => {
+        // console.log(props.item.content);
         async function fetchData() {
             setIsLoading(true);
             try {
                 const res2 = await fetch(
                     `https://maps.googleapis.com/maps/api/staticmap?center=${props.item.latitude},${props.item.longitude}&zoom=16&scale=2&size=335x250&maptype=roadmap&key=${GOOGLE_API_KEY}&format=png&visual_refresh=true` +
-                    `&markers=${props.item.latitude},${props.item.longitude}`,
+                    `&markers=${props.item.latitude},${props.item.longitude}`
                 );
                 setStreetView(res2.url);
                 setImage(props.item.imageURL);
@@ -153,7 +183,7 @@ const ProviderInfo = (props) => {
 
     const categoriesToUse = props.categories || [];
 
-    
+
 
     return (
         <Container fluid className="provider-info-container">
@@ -164,8 +194,6 @@ const ProviderInfo = (props) => {
                     </LazyLoad>
                 </Card>
             </Row>
-            {/* Sample components that in the future should be added dynamically
-            based on the response from firebase */}
             <Row className="info-rows">
                 <Col md={12}>
                     <Collapsible
@@ -181,75 +209,22 @@ const ProviderInfo = (props) => {
                     </Collapsible>
                 </Col>
             </Row>
-            {/* Sample components that in the future should be added dynamically
-            based on the response from firebase */}
-            <Row className="info-rows" >
-                <Col md={12} >
-                    <Collapsible
-                        label={"Gallery"}
-                        style={{
-                            maxWidth: "1000px",
-                            marginLeft: "auto",
-                            marginRight: "auto"
-                        }}
-                    >
-                        {/*TO BE DELETED */}
-                        <ProviderGalleryCarousel slidesArray={galleryData} />
-                    </Collapsible>
-                </Col>
-            </Row>
-            <Row className="info-rows">
-                <Col md={12}>
-                    <Collapsible
-                        label={"Directory"}
-                        style={{
-                            maxWidth: "1000px",
-                            marginLeft: "auto",
-                            marginRight: "auto"
-                        }}
-                    >
-                        <Directory
-                            directoryItems={directoryData}
-                        ></Directory>
-                    </Collapsible>
-                </Col>
-            </Row>
-            <Row className="info-rows">
-                <Col md={12}>
-                    <Collapsible
-                        label={"Sample Embedded title"}
-                        style={{
-                            maxWidth: "1000px",
-                            marginLeft: "auto",
-                            marginRight: "auto"
-                        }}
-                    >
-                        <EmbedComponent eventInfo={eventInfo} />
-                    </Collapsible>
-                </Col>
-            </Row>
-            <Row className="info-rows">
-                <Col md={12}>
-                    <Collapsible
-                        label={eventInfo2.title}
-                        style={{
-                            maxWidth: "1000px",
-                            marginLeft: "auto",
-                            marginRight: "auto"
-                        }}
-                    >
-                        <EventInfoComponent
-                            description={eventInfo2.description}
-                        />
-                    </Collapsible>
-                </Col>
-            </Row>
+            {components.map((component) => {
+                // console.log(component);
+                return (
+                    <Row className="info-rows">
+                        <Col md={12}>
+                            {renderComponent(component)}
+                        </Col>
+                    </Row>
+                );
+            })}
             <div className="modalHeader">
                 {categoriesToUse
                     .filter(
                         (category) =>
                             props.item[category.id] &&
-                            props.item[category.id].length,
+                            props.item[category.id].length
                     )
                     .map((category) => (
                         <div>
@@ -275,7 +250,7 @@ const ProviderInfo = (props) => {
                                                     {selected}
                                                 </div>
                                             );
-                                        },
+                                        }
                                     )
                                 ) : (
                                     <Linkify>
@@ -287,7 +262,7 @@ const ProviderInfo = (props) => {
                         </div>
                     ))}
             </div>
-        </Container>
+        </Container >
     );
 };
 
@@ -296,5 +271,5 @@ export default compose<any>(
     connect((state: Storage) => ({
         providers: state.firestore.ordered.providers,
         firebase: state.firebase,
-    })),
+    }))
 )(ProviderInfo);
diff --git a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
index 2f04b2f..a72ca2a 100644
--- a/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
+++ b/src/components/subcomponents/chartcomponents/ChartComponentForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import "./styles/ChartComponentForm.css";
 
 type ChartType = "donut" | "progress" | "line";
@@ -33,14 +33,20 @@ interface ChartForm {
     data: ChartData;
 }
 
-const ChartComponentForm = () => {
-    const [chartState, setChartState] = useState<ChartForm>({
-        type: "donut",
-        title: "",
-        data: {
-            showNumber: true,
-        },
-    });
+const ChartComponentForm = ({
+    chartState,
+    setChartState,
+    deleteComponent,
+}: {
+    chartState: ChartForm;
+    setChartState: (newState: ChartForm) => void;
+    deleteComponent: () => void;
+}) => {
+    // const [chartState, setChartState] = useState<ChartForm>(data);
+
+    // useEffect(() => {
+    //     setData(chartState);
+    // }, [chartState]);
 
     const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
 
@@ -68,10 +74,10 @@ const ChartComponentForm = () => {
     };
 
     const handleDataChange = (key: string, value: string | number) => {
-        setChartState((prev) => ({
-            ...prev,
-            data: { ...prev.data, [key]: value },
-        }));
+        setChartState({
+            ...chartState,
+            data: { ...chartState.data, [key]: value },
+        });
     };
 
     const handleDataViewChange = () => {
@@ -89,49 +95,53 @@ const ChartComponentForm = () => {
         key: string,
         value: string | number
     ) => {
-        setChartState((prev) => {
-            const newData =
-                prev.type === "donut"
-                    ? [...(prev.data.donutData || [])]
-                    : [...(prev.data.lineData || [])];
-            newData[index] = { ...newData[index], [key]: value };
+        const newData =
+            chartState.type === "donut"
+                ? [...(chartState.data.donutData || [])]
+                : [...(chartState.data.lineData || [])];
+        newData[index] = { ...newData[index], [key]: value };
 
-            if (newData.length > 0 && chartState.type === "donut") {
-                let sum = 0;
-                newData.forEach((row) => {
-                    sum += row.number;
-                });
-                newData.forEach((row) => {
-                    row.percentage = ((row.number / sum) * 100).toFixed(1) + "%";
-                });
-            }
-            return {
-                ...prev,
-                data: {
-                    ...prev.data,
-                    [prev.type === "donut" ? "donutData" : "lineData"]: newData,
-                },
-            };
+        //handles update to percentage column for DonutData
+        if (newData.length > 0 && chartState.type === "donut") {
+            let sum = 0;
+            newData.forEach((row) => {
+                sum += row.number;
+            });
+            newData.forEach((row) => {
+                row.percentage = ((row.number / sum) * 100).toFixed(1) + "%";
+            });
+        }
+
+        setChartState({
+            ...chartState,
+            data: {
+                ...chartState.data,
+                [chartState.type === "donut" ? "donutData" : "lineData"]:
+                    newData,
+            },
         });
     };
 
     const addDataRow = () => {
-        setChartState((prev) => {
-            if (prev.type === "donut") {
-                const donutData = [
-                    ...(prev.data.donutData || []),
-                    { label: "Item X", number: 0, percentage: "0%" },
-                ];
-                return { ...prev, data: { ...prev.data, donutData } };
-            } else if (prev.type === "line") {
-                const lineData = [
-                    ...(prev.data.lineData || []),
-                    { x: "Item X", y: 0 },
-                ];
-                return { ...prev, data: { ...prev.data, lineData } };
-            }
-            return prev;
-        });
+        if (chartState.type === "donut") {
+            const donutData = [
+                ...(chartState.data.donutData || []),
+                { label: "Item X", number: 0, percentage: "0%" },
+            ];
+            setChartState({
+                ...chartState,
+                data: { ...chartState.data, donutData },
+            });
+        } else if (chartState.type === "line") {
+            const lineData = [
+                ...(chartState.data.lineData || []),
+                { x: "Item X", y: 0 },
+            ];
+            setChartState({
+                ...chartState,
+                data: { ...chartState.data, lineData },
+            });
+        }
     };
 
     const renderDataTable = () => {
@@ -358,7 +368,19 @@ const ChartComponentForm = () => {
             </div>
             {renderFields()}
             <div className="footer">
-                <button id="delete">Delete</button>
+                <button
+                    type="button"
+                    id="delete"
+                    style={{
+                        color: "red",
+                        border: "1px solid red",
+                        padding: "5px",
+                        borderRadius: "4px",
+                    }}
+                    onClick={deleteComponent}
+                >
+                    Delete Component
+                </button>
             </div>
         </div>
     );