diff --git a/client/src/components/CSVParser.js b/client/src/components/CSVParser.js
index 6d7af2e..8f1b77c 100644
--- a/client/src/components/CSVParser.js
+++ b/client/src/components/CSVParser.js
@@ -34,7 +34,7 @@ function CSVParser({
   setVisiblity,
   CSVFlowVisible,
   setCSVFlowVisible,
-  forceNewGroup
+  forceNewGroup,
 }) {
   const { CSVReader } = useCSVReader();
   const { CSVDownloader, Type } = useCSVDownloader();
@@ -45,7 +45,7 @@ function CSVParser({
   const [createCSVGroup, setCreateCSVGroup] = useState(false); // tracks if group creation from csv is toggled
 
   React.useEffect(async () => {
-    if(group) {
+    if (group) {
       await fetch(`${process.env.REACT_APP_BACKEND_URI}/rows?group=` + group.id).then(
         async (response) => {
           if (response.ok) {
@@ -146,7 +146,7 @@ function CSVParser({
           onUploadAccepted={async (results) => {
             // if we create group from CSV
             setCSVData(results.data);
-            
+
             let headers = Object.keys(results.data[0]);
             headers = headers.map((value) => {
               return { name: value, type: "Text" };
@@ -196,7 +196,7 @@ function CSVParser({
                   </div>
                 ) : null}
                 <div className="radio-div">
-                 {forceNewGroup ?
+                  {forceNewGroup ? (
                     <input
                       type="checkbox"
                       className="create-group-csv-button"
@@ -206,7 +206,7 @@ function CSVParser({
                       checked
                       disabled
                     />
-                    :
+                  ) : (
                     <input
                       type="checkbox"
                       className="create-group-csv-button"
@@ -214,11 +214,11 @@ function CSVParser({
                       value="create-group-csv"
                       onClick={() => setCreateCSVGroup(!createCSVGroup)}
                     />
-                  }
+                  )}
                   <label htmlFor="create-group-csv" className="create-group-csv-label">
                     Create a new group from CSV
                   </label>
-                </div>  
+                </div>
                 <div className="csv-submit-div">
                   <button
                     className="modal-white csv-cancel"
@@ -260,25 +260,25 @@ function CSVParser({
         </CSVReader>
       ) : null}
 
-      {!forceNewGroup && 
-      <div className="csv-parser">
-        <button type="button" onClick={() => setCSVFlowVisible(true)} className="csv-button">
-          <AiOutlineCloudUpload className="csv-icon cloud" /> Upload CSV
-        </button>
-        <CSVDownloader
-          type={Type.Button}
-          className="csv-button download"
-          filename="data"
-          bom
-          config={{
-            delimiter: ";",
-          }}
-          data={tableData}
-        >
-          <AiOutlineDownload className="csv-icon download" /> Download
-        </CSVDownloader>
-      </div>
-      }
+      {!forceNewGroup && (
+        <div className="csv-parser">
+          <button type="button" onClick={() => setCSVFlowVisible(true)} className="csv-button">
+            <AiOutlineCloudUpload className="csv-icon cloud" /> Upload CSV
+          </button>
+          <CSVDownloader
+            type={Type.Button}
+            className="csv-button download"
+            filename="data"
+            bom
+            config={{
+              delimiter: ";",
+            }}
+            data={tableData}
+          >
+            <AiOutlineDownload className="csv-icon download" /> Download
+          </CSVDownloader>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/client/src/components/CreateGroup.js b/client/src/components/CreateGroup.js
index 861cbb7..496d697 100644
--- a/client/src/components/CreateGroup.js
+++ b/client/src/components/CreateGroup.js
@@ -65,7 +65,6 @@ function CreateGroup({ onConfirm, onCancel, editGroup, onDelete, CSVFields }) {
   const [groupNameInvalid, setGroupNameInvalid] = useState(false);
   const fieldsListDiv = useRef(null);
 
-
   /**
    * `fields` is an array of objects representing the group's fields. Each object has a `name` and
    * a `type`, both strings. Each object may also have a boolean `invalid` field, denoting whether
@@ -174,7 +173,7 @@ function CreateGroup({ onConfirm, onCancel, editGroup, onDelete, CSVFields }) {
               />
             ))}
           </div>
-          {!CSVFields ?
+          {!CSVFields ? (
             <button
               className="add-field-button"
               type="button"
@@ -186,9 +185,9 @@ function CreateGroup({ onConfirm, onCancel, editGroup, onDelete, CSVFields }) {
               <img src={AddFieldIcon} className="add-field-svg" alt="add field button icon" />
               Add new field
             </button>
-            :
+          ) : (
             <br />
-          }
+          )}
           <div className="group-submit-div">
             <button className="modal-blue" type="submit">
               {editGroup ? "Save" : "Create"}
diff --git a/client/src/components/CreateGroupFieldRow.js b/client/src/components/CreateGroupFieldRow.js
index 9514e58..e7bce70 100644
--- a/client/src/components/CreateGroupFieldRow.js
+++ b/client/src/components/CreateGroupFieldRow.js
@@ -38,7 +38,7 @@ function CreateGroupFieldRow({ index, fieldName, fieldType, invalid, changeDispa
         <option value="Number">Number</option>
         <option value="Email">Email</option>
       </select>
-      {(index !== 0 && !CSVFields) && (
+      {index !== 0 && !CSVFields && (
         <button
           className="group-field-delete"
           type="button"
diff --git a/client/src/components/TableRow.js b/client/src/components/TableRow.js
index 6d40b6a..af3e1fb 100644
--- a/client/src/components/TableRow.js
+++ b/client/src/components/TableRow.js
@@ -1,6 +1,6 @@
 /**
  * Table row component that displays information in table. Allows for editing, deleting, and row selection.
- * 
+ *
  * @summary table row
  * @author  Navid Boloorian
  */
@@ -36,11 +36,11 @@ export default function TableRow({
     if (newRow) {
       setEditActivated(true);
 
-      // sets the default width of input field to 5 
+      // sets the default width of input field to 5
       setFieldDefaultSize(5);
 
       // sets a blank default value for columns to allow for empty columns
-      for(let i = 0; i < groupFields.length; i++) {
+      for (let i = 0; i < groupFields.length; i++) {
         cellData[groupFields[i].name] = "";
       }
     }
diff --git a/client/src/components/TypeDropdown.js b/client/src/components/TypeDropdown.js
new file mode 100644
index 0000000..2d417b6
--- /dev/null
+++ b/client/src/components/TypeDropdown.js
@@ -0,0 +1,70 @@
+/**
+ * Dropdown menu to manage and select custom types.
+ * Allows to select the current type, edit types, add new types, and delete types.
+ *
+ * @summary Custom type dropdown menu.
+ * @author Alex Zhang
+ */
+
+import React, { useState } from "react";
+import AddIcon from "../images/AddIcon.svg";
+import Pencil from "../images/Pencil";
+import TypeDropdownOption from "./TypeDropdownOption";
+import "../css/TypeDropdown.css";
+
+/**
+ * Renders the type dropdown.
+ * @returns
+ */
+function TypeDropdown() {
+  const [typeField, setTypeField] = useState(false);
+  const [typeFieldValue, setTypeFieldValue] = useState("");
+  const [dropdownItems, setDropdownItems] = useState([]);
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      setDropdownItems((items) => [...items, event.target.value]);
+      setTypeField(false);
+      setTypeFieldValue("");
+    }
+  };
+  const deleteType = (option) => {
+    setDropdownItems(
+      dropdownItems.filter((item) => {
+        return item !== option;
+      })
+    );
+  };
+  return (
+    <div className="type-dropdown-div-wrapper">
+      <div className="type-dropdown-div">
+        <button
+          className="add-type-dropdown-button"
+          type="button"
+          onClick={() => setTypeField(true)}
+        >
+          <img src={AddIcon} className="type-dropdown-add-icon-svg" alt="plus icon on add button" />
+          Add Type
+        </button>
+        {dropdownItems.map((item) => (
+          <TypeDropdownOption value={item} deleteType={deleteType} />
+        ))}
+        {typeField ? (
+          <div className="type-dropdown-option">
+            <input
+              className="type-dropdown-field empty"
+              value={typeFieldValue}
+              placeholder="Type here..."
+              onKeyDown={onKeyDown}
+              onChange={(event) => setTypeFieldValue(event.target.value)}
+              autoFocus="autofocus"
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export default TypeDropdown;
diff --git a/client/src/components/TypeDropdownOption.js b/client/src/components/TypeDropdownOption.js
new file mode 100644
index 0000000..a9b5f61
--- /dev/null
+++ b/client/src/components/TypeDropdownOption.js
@@ -0,0 +1,79 @@
+/**
+ * Components representing rows in the TypeDropdown menu.
+ *
+ * @summary Table display for dashboard page.
+ * @author Alex Zhang
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import Pencil from "../images/Pencil";
+import TrashCan from "../images/TrashCan.svg";
+
+/**
+ * Renders the dropdown option for the custom type menu.
+ * @param {string} value The string value of the type option
+ * @param {function} deleteType Function to remove the type option from the dropdown.
+ * @returns
+ */
+function TypeDropdownOption({ value, deleteType }) {
+  const [fieldValue, setFieldValue] = useState(value);
+  const [editOption, setEditOption] = useState(false);
+  const [editFieldValue, setEditFieldValue] = useState(value);
+  // This useEffect hook manages clicks outside the menu and minimizes the window.
+  const editOptionRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (editOption && editOptionRef.current && !editOptionRef.current.contains(event.target)) {
+        setEditFieldValue(fieldValue);
+        setEditOption(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  });
+
+  const onKeyDown = (event) => {
+    // 'keypress' event misbehaves on mobile so we track 'Enter' key via 'keydown' event
+    if (event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      setFieldValue(editFieldValue);
+      setEditOption(false);
+    }
+  };
+  return (
+    <div className="type-dropdown-option">
+      <button className="type-dropdown-field">{fieldValue}</button>
+      <button
+        className="pencil-button"
+        onClick={() => {
+          setEditOption(true);
+          setEditFieldValue(fieldValue);
+        }}
+      >
+        <Pencil className="type-dropdown-pencil" />
+      </button>
+      {editOption ? (
+        <div className="type-dropdown-edit-div" ref={editOptionRef}>
+          <h1 className="type-dropdown-edit-header">Edit Option</h1>
+          <hr className="type-dropdown-edit-divider" />
+          <input
+            className="type-dropdown-edit-field"
+            value={editFieldValue}
+            onKeyDown={onKeyDown}
+            onChange={(event) => setEditFieldValue(event.target.value)}
+            autoFocus="autofocus"
+          />
+          <button className="type-dropdown-delete-option" onClick={() => deleteType(value)}>
+            <img src={TrashCan} className="type-dropdown-trash-can-svg" alt="Delete Option" />
+            <p className="type-dropdown-delete-option-text">Delete Option</p>
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export default TypeDropdownOption;
diff --git a/client/src/css/CSVParser.css b/client/src/css/CSVParser.css
index bc9c88e..7eb5899 100644
--- a/client/src/css/CSVParser.css
+++ b/client/src/css/CSVParser.css
@@ -165,4 +165,4 @@
   width: max-content;
   margin-bottom: -20px;
   margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/client/src/css/Dashboard.css b/client/src/css/Dashboard.css
index 8cbb492..a2e19fa 100644
--- a/client/src/css/Dashboard.css
+++ b/client/src/css/Dashboard.css
@@ -182,4 +182,4 @@
 
 .no-groups-info-wrapper {
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/client/src/css/TypeDropdown.css b/client/src/css/TypeDropdown.css
new file mode 100644
index 0000000..6862906
--- /dev/null
+++ b/client/src/css/TypeDropdown.css
@@ -0,0 +1,140 @@
+.type-dropdown-div-wrapper {
+  position: relative;
+  left: 50%;
+}
+
+.type-dropdown-div {
+  display: flex;
+  flex-flow: wrap;
+  width: 200px;
+  background: #fafafa;
+  border: 0.2px solid #05204a;
+  box-shadow: 0px 1.5px 12px rgba(0, 0, 0, 0.25);
+  border-radius: 3.5px;
+  justify-content: center;
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.add-type-dropdown-button {
+  display: table-cell;
+  margin-top: 14px;
+  margin-bottom: 12px;
+  width: 170px;
+  height: 35px;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 35px;
+  border-radius: 5px;
+  border: none;
+  background: #05204a;
+  color: #ffffff;
+  cursor: pointer;
+}
+
+.type-dropdown-add-icon-svg {
+  position: relative;
+  top: 3px;
+  padding-right: 8px;
+  width: 15px;
+  justify-self: auto;
+}
+
+.type-dropdown-field {
+  height: 35px;
+  width: 135px;
+  margin-bottom: 12px;
+  text-align: center;
+  border: 0px;
+  background: #f3f3f3;
+  border-radius: 5px;
+  color: #404040;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+}
+
+.type-dropdown-field.empty {
+  width: 170px;
+}
+
+.type-dropdown-option {
+  position: static;
+  width: 170px;
+}
+
+.type-dropdown-pencil {
+  float: right;
+  margin-top: 9px;
+  cursor: pointer;
+}
+
+.type-dropdown-edit-div {
+  position: absolute;
+  left: 13%;
+  z-index: 10;
+  background: #000000;
+  width: 190px;
+  height: 135px;
+  background: #fafafa;
+  border: 0.2px solid #05204a;
+  box-shadow: 0px 1.5px 12px rgba(0, 0, 0, 0.25);
+  border-radius: 3.5px;
+}
+
+.type-dropdown-edit-header {
+  margin-left: 12px;
+  margin-top: 7px;
+  margin-bottom: 7px;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  color: #05204a;
+}
+
+.type-dropdown-edit-divider {
+  width: 160px;
+  border: 0.75px solid #e0dddd;
+  margin: 0px;
+  margin-left: 12px;
+}
+
+.type-dropdown-edit-field {
+  height: 35px;
+  width: 150px;
+  margin: 12px;
+  padding-left: 10px;
+  border: 1px solid #c5c5c5;
+  background: #f3f3f3;
+  border-radius: 5px;
+  color: #404040;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: clip;
+}
+
+.type-dropdown-delete-option {
+  display: inline-block;
+  padding: 0px;
+  background: none;
+  border: none;
+  height: 21px;
+  width: 150px;
+  margin-left: 17px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #c4c4c4;
+  cursor: pointer;
+}
+
+.type-dropdown-trash-can-svg {
+  float: left;
+  margin-right: 9px;
+}
+
+.type-dropdown-delete-option-text {
+  float: left;
+  line-height: 21px;
+  margin: 0px;
+}
diff --git a/client/src/pages/Dashboard.js b/client/src/pages/Dashboard.js
index 5ecbf6f..942c846 100644
--- a/client/src/pages/Dashboard.js
+++ b/client/src/pages/Dashboard.js
@@ -62,7 +62,6 @@ function Dashboard() {
   const [CSVFields, setCSVFields] = useState(null); // stores fields from uploaded csv
   const [CSVData, setCSVData] = useState(null); // tracks if csv for group creation was uploaded
 
-
   /**
    * Fetches the list of groups and populates the options in the group selection dropdown.
    * @returns The new list of options
@@ -420,11 +419,11 @@ function Dashboard() {
 
   /**
    * Hide csv dropdown when click outside of it
-   */  
-  document.addEventListener('mouseup', function(e) {
-    var dropdown = document.getElementById('csv-parser-dropdown');
+   */
+  document.addEventListener("mouseup", function (e) {
+    var dropdown = document.getElementById("csv-parser-dropdown");
     if (!dropdown.contains(e.target)) {
-      setVisibility(false)
+      setVisibility(false);
     }
   });
 
@@ -460,35 +459,46 @@ function Dashboard() {
         <SideNavigation currentPage="/" userInfo={userInfo} />
         <div className="no-groups-div">
           <div className="no-groups-info-wrapper">
-            <img src={CreateIcon} className="no-groups create-icon-svg" alt="create icon" /><br />
+            <img src={CreateIcon} className="no-groups create-icon-svg" alt="create icon" />
+            <br />
             <h1 className="no-groups-header">Start building your dashboard!</h1>
-            <p className="no-groups-text">Click "Create new" to begin adding data to your table.<br />
-            Have previous databases? No worries! You can upload your CSV file as well.</p>
+            <p className="no-groups-text">
+              Click "Create new" to begin adding data to your table.
+              <br />
+              Have previous databases? No worries! You can upload your CSV file as well.
+            </p>
             <button
-                className="create-group clickable"
-                type="button"
-                onClick={() => {
-                  setGroupCreationVisible(true);
-                }}
+              className="create-group clickable"
+              type="button"
+              onClick={() => {
+                setGroupCreationVisible(true);
+              }}
             >
-              <img src={AddIconBlue} className="no-groups add-icon-svg" alt="plus icon on add button" />
+              <img
+                src={AddIconBlue}
+                className="no-groups add-icon-svg"
+                alt="plus icon on add button"
+              />
               Create new
             </button>
             <button
-                className="csv-create-group clickable"
-                type="button"
-                onClick={() => {
-                  setCSVFlowVisible(true);
-                }}
+              className="csv-create-group clickable"
+              type="button"
+              onClick={() => {
+                setCSVFlowVisible(true);
+              }}
             >
               <img src={AddIcon} className="no-groups add-icon-svg" alt="plus icon on add button" />
               Create from CSV
             </button>
-            {(groupCreationVisible && !CSVFields) && (
-                <CreateGroup onConfirm={submitNewGroup} onCancel={() => setGroupCreationVisible(false)} />
+            {groupCreationVisible && !CSVFields && (
+              <CreateGroup
+                onConfirm={submitNewGroup}
+                onCancel={() => setGroupCreationVisible(false)}
+              />
             )}
-            
-            {(groupCreationVisible && CSVFields) && (
+
+            {groupCreationVisible && CSVFields && (
               <CreateGroup
                 onConfirm={submitNewGroup}
                 onCancel={() => {
@@ -499,7 +509,7 @@ function Dashboard() {
                 CSVFields={CSVFields}
               />
             )}
-            </div>
+          </div>
         </div>
       </>
     );
@@ -510,26 +520,30 @@ function Dashboard() {
         <div className="dashboard-div">
           <h1 className="dashboard-header">{orgInfo ? orgInfo.name : userInfo.orgName}</h1>
           <div className="dashboard-top-bar">
-          <Select
-            className="group-select"
-            classNamePrefix="select"
-            options={groupOptions}
-            placeholder="Select Group"
-            styles={selectStyles}
-            components={{ Option: iconOption }}
-            value={selectedGroup}
-            onChange={handleSelectGroup}
-          />
-          {selectedGroup && (
-            <button
-              className="add-row clickable"
-              type="button"
-              onClick={() => setAddingRow(!addingRow)}
-            >
-              <img src={AddIcon} className="dashboard add-icon-svg" alt="plus icon on add button" />
-              Add row
-            </button>
-          )}
+            <Select
+              className="group-select"
+              classNamePrefix="select"
+              options={groupOptions}
+              placeholder="Select Group"
+              styles={selectStyles}
+              components={{ Option: iconOption }}
+              value={selectedGroup}
+              onChange={handleSelectGroup}
+            />
+            {selectedGroup && (
+              <button
+                className="add-row clickable"
+                type="button"
+                onClick={() => setAddingRow(!addingRow)}
+              >
+                <img
+                  src={AddIcon}
+                  className="dashboard add-icon-svg"
+                  alt="plus icon on add button"
+                />
+                Add row
+              </button>
+            )}
             <div className="toggle-csv-menu">
               <button
                 type="button"
@@ -561,61 +575,61 @@ function Dashboard() {
                 ) : null}
               </div>
             </div>
-          <div className="dashboard-search-box">
-            <input
-              type="text"
-              className="dashboard-search"
-              placeholder="Search"
-              value={Search}
-              onChange={(event) => setSearch(event.target.value)}
-            />
-            <img src={SearchIcon} className="dashboard-search-icon" alt="Search" />
+            <div className="dashboard-search-box">
+              <input
+                type="text"
+                className="dashboard-search"
+                placeholder="Search"
+                value={Search}
+                onChange={(event) => setSearch(event.target.value)}
+              />
+              <img src={SearchIcon} className="dashboard-search-icon" alt="Search" />
+            </div>
           </div>
+          {dataLoading ? (
+            <div className="data-loading">
+              <ReactLoading type="spin" color="#05204a" height={100} width={100} />
+            </div>
+          ) : (
+            <Table
+              CSVUploaded={CSVUploaded}
+              setSnackbar={setSnackbar}
+              addingRow={addingRow}
+              group={selectedGroup}
+              data={tableData}
+              elementsPerPage={25}
+              setTableChanged={setTableChanged}
+              rerender={tableChanged}
+            />
+          )}
         </div>
-        {dataLoading ? (
-          <div className="data-loading">
-            <ReactLoading type="spin" color="#05204a" height={100} width={100} />
-          </div>
-        ) : (
-          <Table
-            CSVUploaded={CSVUploaded}
-            setSnackbar={setSnackbar}
-            addingRow={addingRow}
-            group={selectedGroup}
-            data={tableData}
-            elementsPerPage={25}
-            setTableChanged={setTableChanged}
-            rerender={tableChanged}
+        {groupCreationVisible && (
+          <CreateGroup
+            onConfirm={submitNewGroup}
+            onCancel={() => {
+              setGroupCreationVisible(false);
+              setCSVFields(null);
+              setCSVData(null);
+            }}
+            CSVFields={CSVFields}
           />
         )}
-      </div>
-      {groupCreationVisible && (
-        <CreateGroup
-          onConfirm={submitNewGroup}
-          onCancel={() => {
-            setGroupCreationVisible(false);
-            setCSVFields(null);
-            setCSVData(null);
-          }}
-          CSVFields={CSVFields}
-        />
-      )}
-      {groupEditVisible && (
-        <CreateGroup
-          onConfirm={submitEditGroup}
-          editGroup={editGroup}
-          onDelete={submitDeleteGroup}
-          onCancel={() => setGroupEditVisible(false)}
-          CSVFields={null}
-        />
-      )}
-      <div className="snackbar">
-        <Snackbar
-          open={snackbar.open}
-          autoHideDuration={6000}
-          onClose={handleSnackClose}
-          anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
-        >
+        {groupEditVisible && (
+          <CreateGroup
+            onConfirm={submitEditGroup}
+            editGroup={editGroup}
+            onDelete={submitDeleteGroup}
+            onCancel={() => setGroupEditVisible(false)}
+            CSVFields={null}
+          />
+        )}
+        <div className="snackbar">
+          <Snackbar
+            open={snackbar.open}
+            autoHideDuration={6000}
+            onClose={handleSnackClose}
+            anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
+          >
             <Alert
               onClose={handleSnackClose}
               severity={snackbar.severity}