diff --git a/src/components/adminaddresses/CreateUpdateForm.tsx b/src/components/adminaddresses/CreateUpdateForm.tsx
index 60adfe76..7502e449 100644
--- a/src/components/adminaddresses/CreateUpdateForm.tsx
+++ b/src/components/adminaddresses/CreateUpdateForm.tsx
@@ -1,30 +1,16 @@
-import * as Yup from "yup"
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Card,
-  CardBody,
-  CardHeader,
-  Container,
-  Flex,
-  SimpleGrid,
-  Stack,
-  theme,
-  VStack
-} from "@chakra-ui/react"
-import {InputControl, SwitchControl} from "components/react-hook-form"
-import {Address, AdminAddresses} from "ordercloud-javascript-sdk"
-import {useRouter} from "hooks/useRouter"
+import {Button, ButtonGroup, Card, CardBody, CardHeader, Container, SimpleGrid} from "@chakra-ui/react"
+import {yupResolver} from "@hookform/resolvers/yup"
+import {InputControl} from "components/react-hook-form"
 import {useCreateUpdateForm} from "hooks/useCreateUpdateForm"
+import {useRouter} from "hooks/useRouter"
 import {pick} from "lodash"
-import {IAdminAddress} from "types/ordercloud/IAdminAddress"
+import {Address, AdminAddresses} from "ordercloud-javascript-sdk"
 import {useForm} from "react-hook-form"
-import {yupResolver} from "@hookform/resolvers/yup"
-import SubmitButton from "../react-hook-form/submit-button"
-import ResetButton from "../react-hook-form/reset-button"
 import {TbChevronLeft} from "react-icons/tb"
-import AdminUserXpCard from "../adminusers/AdminUserXpCard"
+import {IAdminAddress} from "types/ordercloud/IAdminAddress"
+import * as Yup from "yup"
+import ResetButton from "../react-hook-form/reset-button"
+import SubmitButton from "../react-hook-form/submit-button"
 
 export {CreateUpdateForm}
 interface CreateUpdateFormProps {
diff --git a/src/components/adminusers/AdminUserXpCard.tsx b/src/components/adminusers/AdminUserXpCard.tsx
deleted file mode 100644
index 82a9fcca..00000000
--- a/src/components/adminusers/AdminUserXpCard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {useEffect, useState} from "react"
-import {AdminUsers, User} from "ordercloud-javascript-sdk"
-import {useRouter} from "hooks/useRouter"
-import XpCard from "../card/XpCard"
-import {IAdminUser, IAdminUserXp} from "types/ordercloud/IAdminUser"
-
-type AdminUserDataProps = {
-  user: User & {xp?: unknown}
-}
-
-export default function AdminUserXpCard({user}: AdminUserDataProps) {
-  const [isEditingBasicData, setIsEditingBasicData] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [formValues, setFormValues] = useState<IAdminUserXp>(Object.assign({}, user?.xp))
-  const [xpsToBeDeleted, setXpsToBeDeleted] = useState<string[]>([])
-  let router = useRouter()
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, user?.xp))
-  }, [user?.xp])
-
-  const onUserSave = async () => {
-    setIsLoading(true)
-    if (isDeleting) {
-      var newUser: IAdminUser = user
-      delete newUser.xp
-      var tempXPs = Object.assign({}, formValues)
-      xpsToBeDeleted.forEach((e) => delete tempXPs[e])
-      newUser["xp"] = tempXPs
-      await AdminUsers.Save<IAdminUser>(user?.ID, newUser)
-      setIsDeleting(false)
-      setXpsToBeDeleted([])
-    } else {
-      const newUser: IAdminUser = {
-        ...user,
-        xp: formValues
-      }
-      await AdminUsers.Patch<IAdminUser>(user?.ID, newUser)
-    }
-
-    setIsEditingBasicData(false)
-    setIsLoading(false)
-    router.back()
-  }
-
-  return (
-    <>
-      <XpCard
-        data={user}
-        formValues={formValues}
-        setFormValues={setFormValues}
-        isLoading={isLoading}
-        setIsLoading={setIsLoading}
-        isEditingBasicData={isEditingBasicData}
-        setIsEditingBasicData={setIsEditingBasicData}
-        setIsDeleting={setIsDeleting}
-        xpsToBeDeleted={xpsToBeDeleted}
-        setXpsToBeDeleted={setXpsToBeDeleted}
-        onSave={onUserSave}
-      />
-    </>
-  )
-}
diff --git a/src/components/adminusers/CreateUpdateForm.tsx b/src/components/adminusers/CreateUpdateForm.tsx
index a4f2cf41..2a9399a0 100644
--- a/src/components/adminusers/CreateUpdateForm.tsx
+++ b/src/components/adminusers/CreateUpdateForm.tsx
@@ -16,6 +16,7 @@ import {
   TableContainer,
   Tbody,
   Td,
+  Text,
   theme,
   Tr,
   VStack
@@ -29,7 +30,6 @@ import {textHelper} from "utils"
 import {appPermissions} from "constants/app-permissions.config"
 import {isEqual, sortBy, difference, pick} from "lodash"
 import {IAdminUser} from "types/ordercloud/IAdminUser"
-import AdminUserXpCard from "./AdminUserXpCard"
 import {useForm} from "react-hook-form"
 import {yupResolver} from "@hookform/resolvers/yup"
 import SubmitButton from "../react-hook-form/submit-button"
@@ -197,7 +197,7 @@ function CreateUpdateForm({user, assignedPermissions}: CreateUpdateFormProps) {
         </CardBody>
       </Card>
       <Card mt={6}>
-        <AdminUserXpCard user={user} />
+        <Text>Under construction</Text>
       </Card>
     </Container>
   )
diff --git a/src/components/card/XpCard.tsx b/src/components/card/XpCard.tsx
deleted file mode 100644
index b146960b..00000000
--- a/src/components/card/XpCard.tsx
+++ /dev/null
@@ -1,408 +0,0 @@
-import {
-  Heading,
-  Box,
-  Text,
-  Card,
-  Button,
-  HStack,
-  Tooltip,
-  Center,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-  Select,
-  Input,
-  Textarea,
-  CheckboxGroup,
-  Checkbox
-} from "@chakra-ui/react"
-import {ChangeEvent, MouseEventHandler, useEffect, useState} from "react"
-import BrandedSpinner from "../branding/BrandedSpinner"
-import TagContainer from "../generic/tagContainer"
-import {useErrorToast} from "hooks/useToast"
-
-type DataProps<T> = {
-  data: T & {xp?: unknown}
-  formValues: unknown
-  setFormValues: Function
-  isLoading: boolean
-  setIsLoading: Function
-  isEditingBasicData: boolean
-  setIsEditingBasicData: Function
-  setIsDeleting: Function
-  xpsToBeDeleted: string[]
-  setXpsToBeDeleted: Function
-  onSave: MouseEventHandler<HTMLButtonElement>
-}
-
-export default function XpCard<T>({
-  data,
-  formValues,
-  setFormValues,
-  isLoading,
-  setIsLoading,
-  isEditingBasicData,
-  setIsEditingBasicData,
-  setIsDeleting,
-  xpsToBeDeleted,
-  setXpsToBeDeleted,
-  onSave
-}: DataProps<T>) {
-  const {isOpen: isOpenAddXP, onOpen: onOpenAddXP, onClose: onCloseAddXP} = useDisclosure()
-  const {isOpen: isOpenEditXP, onOpen: onOpenEditXP, onClose: onCloseEditXP} = useDisclosure()
-
-  const [isAdding, setIsAdding] = useState(false)
-  const [newXpFormName, setNewXpFormName] = useState<string>("")
-  const [newXpFormType, setNewXpFormType] = useState<string>("text")
-  const [newXpFormValue, setNewXpFormValue] = useState<string | number>("")
-  const [expanded, setExpanded] = useState(true)
-  const [editing, setEditing] = useState("")
-  //const [editingType, setEditingType] = useState("text")
-  const errorToast = useErrorToast()
-  const tags = ["1", "2", "3", "4", "5", "6"]
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, data?.xp))
-  }, [data?.xp, setFormValues])
-
-  const onEditClicked = (e) => {
-    e.preventDefault()
-    setFormValues(Object.assign({}, data?.xp))
-    setIsEditingBasicData(true)
-    setExpanded(true)
-  }
-
-  const onAbortClicked = (e) => {
-    e.preventDefault()
-    setIsDeleting(false)
-    setIsEditingBasicData(false)
-    setFormValues(Object.assign({}, data?.xp))
-    setXpsToBeDeleted([])
-  }
-
-  const handleXPChange = (name: string) => {
-    setEditing(name)
-    setNewXpFormValue(formValues[name])
-    onOpenEditXP()
-  }
-  const onEditProductXP = () => {
-    setIsLoading(true)
-    formValues[editing] = newXpFormValue
-    onEditProductXPClosed()
-    setIsLoading(false)
-    return
-  }
-
-  const handleInputChange =
-    (fieldKey: string) => (e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => {
-      var newVal = e.target.type == "number" ? Number(e.target.value) : e.target.value
-      var tmpXPs = formValues
-      tmpXPs[fieldKey] = newVal
-      setFormValues(tmpXPs)
-    }
-
-  const handleEditXP = (e) => {
-    if (editing.endsWith("###")) {
-      var strValues = newXpFormValue.toString()
-      var tempValues = strValues.includes(",") ? strValues.split(",") : [strValues]
-      tempValues = tempValues.includes(e.target.value)
-        ? tempValues.filter((ele) => ele !== e.target.value)
-        : [...tempValues, e.target.value]
-      setNewXpFormValue(tempValues.length > 1 ? tempValues.join(",") : tempValues[0])
-    } else setNewXpFormValue(typeof formValues[editing] == "string" ? e.target.value : Number(e.target.value))
-  }
-  const handleNewXPChange = (e) => {
-    switch (e.target.name) {
-      case "name":
-        setNewXpFormName(e.target.value)
-        break
-      case "type":
-        setNewXpFormType(e.target.value)
-        break
-      case "value":
-        if (newXpFormType == "tag") {
-          var strValues = newXpFormValue.toString()
-          var tempValues = strValues.includes(",") ? strValues.split(",") : [strValues]
-          tempValues = tempValues.includes(e.target.value)
-            ? tempValues.filter((ele) => ele !== e.target.value)
-            : [...tempValues, e.target.value]
-          setNewXpFormValue(tempValues.length > 1 ? tempValues.join(",") : tempValues[0])
-        } else {
-          setNewXpFormValue(newXpFormType == "number" ? Number(e.target.value) : e.target.value)
-        }
-
-        break
-      default:
-        return
-    }
-  }
-
-  const onDeleteProductXPClicked = (key: string) => async (e) => {
-    setIsLoading(true)
-    setIsDeleting(true)
-    const tempDeleted = xpsToBeDeleted.includes(key)
-      ? xpsToBeDeleted.filter((thing) => thing !== key)
-      : [...xpsToBeDeleted, key]
-    setXpsToBeDeleted(tempDeleted)
-    setIsLoading(false)
-  }
-
-  const onNewProductXP = async () => {
-    const TempXpFormName = newXpFormType == "tag" ? newXpFormName + "###" : newXpFormName
-    if (formValues[TempXpFormName] !== undefined) {
-      errorToast({
-        title: "Validation Error",
-        description: "Extended property of that name already exists"
-      })
-      return
-    }
-    setIsLoading(true)
-
-    formValues[TempXpFormName] = newXpFormValue
-    onNewProductXPClosed()
-    setIsLoading(false)
-  }
-  const onNewProductXPClosed = async () => {
-    setNewXpFormName("")
-    setNewXpFormType("text")
-    setNewXpFormValue("")
-
-    onCloseAddXP()
-  }
-  const onEditProductXPClosed = async () => {
-    setEditing("")
-    onCloseEditXP()
-  }
-  const renderCurrentSelection = () => {
-    switch (newXpFormType) {
-      case "text":
-        return (
-          <>
-            <Text pt={"20px"}>Value:</Text>
-            <Input type={"text"} name={"value"} onChange={handleNewXPChange} />
-          </>
-        )
-      case "number":
-        return (
-          <>
-            <Text pt={"20px"}>Value:</Text>
-            <Input type={"number"} name={"value"} onChange={handleNewXPChange} />
-          </>
-        )
-      case "tag":
-        return (
-          <>
-            <Text pt={"20px"}>Value:</Text>
-            <CheckboxGroup>
-              {tags.map((x, key) => {
-                return (
-                  <Checkbox name={"value"} key={key} value={x} onChange={handleNewXPChange}>
-                    {x}
-                  </Checkbox>
-                )
-              })}
-            </CheckboxGroup>
-          </>
-        )
-      default:
-        return ""
-    }
-  }
-  const renderCurrentEditing = () => {
-    const editingType = editing.endsWith("###") ? "tag" : typeof formValues[editing] == "string" ? "text" : "number"
-    switch (editingType) {
-      case "text":
-        if (formValues[editing].length > 60)
-          return (
-            <>
-              <Text pt={"20px"}>Value:</Text>
-              <Textarea
-                w={"100%"}
-                h={"300"}
-                resize={"none"}
-                name={"value"}
-                defaultValue={formValues[editing]}
-                onChange={handleEditXP}
-              />
-            </>
-          )
-        else
-          return (
-            <>
-              <Text pt={"20px"}>Value:</Text>
-              <Input type={"text"} name={"value"} defaultValue={formValues[editing]} onChange={handleEditXP} />
-            </>
-          )
-
-      case "number":
-        return (
-          <>
-            <Text pt={"20px"}>Value:</Text>
-            <Input type={"number"} name={"value"} defaultValue={formValues[editing]} onChange={handleEditXP} />
-          </>
-        )
-      case "tag":
-        return (
-          <>
-            <Text pt={"20px"}>Value:</Text>
-            <CheckboxGroup
-              defaultValue={formValues[editing]?.includes(",") ? formValues[editing].split(",") : [formValues[editing]]}
-            >
-              {tags.map((x, key) => {
-                return (
-                  <Checkbox onChange={handleEditXP} name={"value"} key={key} value={x}>
-                    {x}
-                  </Checkbox>
-                )
-              })}
-            </CheckboxGroup>
-          </>
-        )
-      default:
-        return ""
-    }
-  }
-  const renderEditType = () => {
-    const myType = editing.endsWith("###") ? "tag" : typeof formValues[editing]
-    switch (myType) {
-      case "string":
-        return <Input type={"text"} name={"type"} value={"text"} readOnly />
-      case "number":
-        return <Input type={"text"} name={"type"} value={"number"} readOnly />
-      case "tag":
-        return <Input type={"text"} name={"type"} value={"tag"} readOnly />
-      default:
-        return ""
-    }
-  }
-
-  return (
-    <Card p={6}>
-      <>
-        <Heading size={{base: "sm", md: "md", lg: "md"}} mb={6}>
-          Extended Properties
-        </Heading>
-
-        {(isLoading || !formValues) && expanded ? (
-          <Box pt={6} textAlign={"center"} pb="50">
-            Updating... <BrandedSpinner />
-          </Box>
-        ) : (
-          <>
-            <TagContainer
-              tags={formValues}
-              toBeDeleted={xpsToBeDeleted}
-              isEditing={isEditingBasicData}
-              onNameClicked={handleXPChange}
-              onDeleteClicked={onDeleteProductXPClicked}
-            />
-          </>
-        )}
-        {isEditingBasicData /*&&
-                  formValues?.images[formValues?.images?.length - 1]?.Url != ""*/ ? (
-          <Tooltip label="Add new Extended Property">
-            <Button colorScheme="accent" alignSelf={"flex-start"} variant="ghost" onClick={onOpenAddXP} minW="80px">
-              Add XP
-            </Button>
-          </Tooltip>
-        ) : (
-          <></>
-        )}
-      </>
-      {isEditingBasicData ? (
-        <HStack justifyContent="flex-end" alignItems="flex-end">
-          <Tooltip label="Save">
-            <Button variant="solid" colorScheme="primary" aria-label="Save" onClick={onSave} mr={2}>
-              Save
-            </Button>
-          </Tooltip>
-          <Tooltip label="Cancel">
-            <Button aria-label="Cancel" variant="outline" onClick={onAbortClicked}>
-              Cancel
-            </Button>
-          </Tooltip>
-        </HStack>
-      ) : (
-        <Button
-          aria-label="Edit"
-          mt={4}
-          alignSelf="flex-end"
-          colorScheme="accent"
-          variant="ghost"
-          onClick={onEditClicked}
-          minW="80px"
-        >
-          Edit
-        </Button>
-      )}
-
-      <Modal isOpen={isOpenAddXP} onClose={onNewProductXPClosed} size={"xl"}>
-        <ModalOverlay backdropFilter="blur(10px) hue-rotate(90deg)" />
-        <ModalContent>
-          {isAdding ? (
-            <ModalHeader textAlign={"center"}>
-              Adding... <BrandedSpinner />
-            </ModalHeader>
-          ) : (
-            <>
-              <ModalHeader>Add a new Extended Property</ModalHeader>
-
-              <ModalBody mb={"10px"}>
-                <Text>Name:</Text>
-                <Input type={"text"} name={"name"} onChange={handleNewXPChange} />
-                <Text pt={"20px"}>Field Type:</Text>
-                <Select onChange={handleNewXPChange} name={"type"}>
-                  <option value="text">text</option>
-                  <option value="number">number</option>
-                  <option value="tag">tag</option>
-                </Select>
-                {renderCurrentSelection()}
-                <HStack justifyContent="space-between" w="100%">
-                  <Button variant="outline" onClick={onNewProductXPClosed}>
-                    Cancel
-                  </Button>
-                  <Button variant="solid" colorScheme="primary" mr={3} onClick={onNewProductXP}>
-                    Save
-                  </Button>
-                </HStack>
-              </ModalBody>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-      <Modal isOpen={isOpenEditXP} onClose={onEditProductXPClosed} size={"xl"}>
-        <ModalOverlay backdropFilter="blur(10px) hue-rotate(90deg)" />
-        <ModalContent>
-          {isAdding ? (
-            <ModalHeader textAlign={"center"}>
-              Saving... <BrandedSpinner />
-            </ModalHeader>
-          ) : (
-            <>
-              <ModalHeader>Edit Extended Property</ModalHeader>
-
-              <ModalBody mb={"10px"}>
-                <Text>Name:</Text>
-                <Input type={"text"} name={"name"} value={editing.replace("###", "")} readOnly />
-                <Text pt={"20px"}>Field Type:</Text>
-                {renderEditType()}
-                {renderCurrentEditing()}
-                <HStack justifyContent="space-between" w="100%">
-                  <Button variant="outline" onClick={onEditProductXPClosed}>
-                    Cancel
-                  </Button>
-                  <Button variant="solid" colorScheme="primary" mr={3} onClick={onEditProductXP}>
-                    Save
-                  </Button>
-                </HStack>
-              </ModalBody>
-            </>
-          )}
-        </ModalContent>
-      </Modal>
-    </Card>
-  )
-}
diff --git a/src/components/catalogs/CatalogXpCard.tsx b/src/components/catalogs/CatalogXpCard.tsx
deleted file mode 100644
index 4e368c3b..00000000
--- a/src/components/catalogs/CatalogXpCard.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {useEffect, useState} from "react"
-import {Catalog, Catalogs} from "ordercloud-javascript-sdk"
-import {useRouter} from "hooks/useRouter"
-import XpCard from "../card/XpCard"
-import {IAdminUserXp} from "types/ordercloud/IAdminUser"
-import {ICatalog} from "types/ordercloud/ICatalog"
-
-type CatalogDataProps = {
-  catalog: Catalog & {xp?: unknown}
-}
-
-export default function CatalogXpCard({catalog}: CatalogDataProps) {
-  const [isEditingBasicData, setIsEditingBasicData] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [formValues, setFormValues] = useState<IAdminUserXp>(Object.assign({}, catalog?.xp))
-  const [xpsToBeDeleted, setXpsToBeDeleted] = useState<string[]>([])
-  let router = useRouter()
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, catalog?.xp))
-  }, [catalog?.xp])
-
-  const onCatalogSave = async () => {
-    setIsLoading(true)
-    if (isDeleting) {
-      var newCatalog: ICatalog = catalog
-      delete newCatalog.xp
-      var tempXPs = Object.assign({}, formValues)
-      xpsToBeDeleted.forEach((e) => delete tempXPs[e])
-      newCatalog["xp"] = tempXPs
-      await Catalogs.Save<ICatalog>(catalog?.ID, newCatalog)
-      setIsDeleting(false)
-      setXpsToBeDeleted([])
-    } else {
-      const newCatalog: ICatalog = {
-        ...catalog,
-        xp: formValues
-      }
-      await Catalogs.Patch<ICatalog>(catalog?.ID, newCatalog)
-    }
-
-    setIsEditingBasicData(false)
-    setIsLoading(false)
-    router.back()
-  }
-
-  return (
-    <>
-      <XpCard
-        data={catalog}
-        formValues={formValues}
-        setFormValues={setFormValues}
-        isLoading={isLoading}
-        setIsLoading={setIsLoading}
-        isEditingBasicData={isEditingBasicData}
-        setIsEditingBasicData={setIsEditingBasicData}
-        setIsDeleting={setIsDeleting}
-        xpsToBeDeleted={xpsToBeDeleted}
-        setXpsToBeDeleted={setXpsToBeDeleted}
-        onSave={onCatalogSave}
-      />
-    </>
-  )
-}
diff --git a/src/components/catalogs/CreateUpdateForm.tsx b/src/components/catalogs/CreateUpdateForm.tsx
index 9a2a2f5b..a3d9097d 100644
--- a/src/components/catalogs/CreateUpdateForm.tsx
+++ b/src/components/catalogs/CreateUpdateForm.tsx
@@ -1,4 +1,4 @@
-import {Button, ButtonGroup, Card, CardBody, CardHeader, Container} from "@chakra-ui/react"
+import {Button, ButtonGroup, Card, CardBody, CardHeader, Container, Text} from "@chakra-ui/react"
 import {yupResolver} from "@hookform/resolvers/yup"
 import {InputControl, SwitchControl, TextareaControl} from "components/react-hook-form"
 import {useCreateUpdateForm} from "hooks/useCreateUpdateForm"
@@ -10,7 +10,6 @@ import {ICatalog} from "types/ordercloud/ICatalog"
 import * as Yup from "yup"
 import ResetButton from "../react-hook-form/reset-button"
 import SubmitButton from "../react-hook-form/submit-button"
-import CatalogXpCard from "./CatalogXpCard"
 
 export {CreateUpdateForm}
 
@@ -88,7 +87,7 @@ function CreateUpdateForm({catalog}: CreateUpdateFormProps) {
           </CardBody>
         </Card>
         <Card mt={6}>
-          <CatalogXpCard catalog={catalog} />
+          <Text>Under construction</Text>
         </Card>
       </Container>
     </>
diff --git a/src/components/categories/CategoryXpCard.tsx b/src/components/categories/CategoryXpCard.tsx
deleted file mode 100644
index e26168ac..00000000
--- a/src/components/categories/CategoryXpCard.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import {useEffect, useState} from "react"
-import {Categories, Category} from "ordercloud-javascript-sdk"
-import {useRouter} from "hooks/useRouter"
-import XpCard from "../card/XpCard"
-import {ICategory, ICategoryXp} from "types/ordercloud/ICategoryXp"
-
-type CategoryDataProps = {
-  catalogID: string
-  category: Category & {xp?: unknown}
-}
-
-export default function CategoryXpCard({catalogID, category}: CategoryDataProps) {
-  const [isEditingBasicData, setIsEditingBasicData] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [formValues, setFormValues] = useState<ICategoryXp>(Object.assign({}, category?.xp))
-  const [xpsToBeDeleted, setXpsToBeDeleted] = useState<string[]>([])
-  let router = useRouter()
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, category?.xp))
-  }, [category?.xp])
-
-  const onCategorySave = async () => {
-    setIsLoading(true)
-    if (isDeleting) {
-      var newCategory: ICategory = category
-      delete newCategory.xp
-      var tempXPs = Object.assign({}, formValues)
-      xpsToBeDeleted.forEach((e) => delete tempXPs[e])
-      newCategory["xp"] = tempXPs
-      await Categories.Save<ICategory>(catalogID, category?.ID, newCategory)
-      setIsDeleting(false)
-      setXpsToBeDeleted([])
-    } else {
-      const newCategory: ICategory = {
-        ...category,
-        xp: formValues
-      }
-      await Categories.Patch<ICategory>(catalogID, category?.ID, newCategory)
-    }
-
-    setIsEditingBasicData(false)
-    setIsLoading(false)
-    router.back()
-  }
-
-  return (
-    <>
-      <XpCard
-        data={category}
-        formValues={formValues}
-        setFormValues={setFormValues}
-        isLoading={isLoading}
-        setIsLoading={setIsLoading}
-        isEditingBasicData={isEditingBasicData}
-        setIsEditingBasicData={setIsEditingBasicData}
-        setIsDeleting={setIsDeleting}
-        xpsToBeDeleted={xpsToBeDeleted}
-        setXpsToBeDeleted={setXpsToBeDeleted}
-        onSave={onCategorySave}
-      />
-    </>
-  )
-}
diff --git a/src/components/categories/CreateUpdateForm.tsx b/src/components/categories/CreateUpdateForm.tsx
index a713466e..75ec38ed 100644
--- a/src/components/categories/CreateUpdateForm.tsx
+++ b/src/components/categories/CreateUpdateForm.tsx
@@ -1,11 +1,10 @@
 import * as Yup from "yup"
-import {Box, Button, ButtonGroup, Flex, HStack, Stack} from "@chakra-ui/react"
+import {Box, Button, ButtonGroup, Flex, HStack, Stack, Text} from "@chakra-ui/react"
 import {Categories, Category} from "ordercloud-javascript-sdk"
 import {InputControl, SwitchControl, TextareaControl} from "components/react-hook-form"
 import {useRouter} from "hooks/useRouter"
 import {useCreateUpdateForm} from "hooks/useCreateUpdateForm"
 import {ICategory} from "types/ordercloud/ICategoryXp"
-import CategoryXpCard from "./CategoryXpCard"
 import Card from "../card/Card"
 import {yupResolver} from "@hookform/resolvers/yup"
 import {useForm} from "react-hook-form"
@@ -136,7 +135,7 @@ function CreateUpdateForm({category, headerComponent, parentId, onSuccess}: Crea
           </Box>
           {!isCreating && (
             <Card variant="primaryCard" h={"100%"} closedText="Extended Properties Cards">
-              <CategoryXpCard catalogID={catalogID} category={category} />
+              <Text>Under construction</Text>
             </Card>
           )}
         </Flex>
diff --git a/src/components/products/ProductXpCard.tsx b/src/components/products/ProductXpCard.tsx
deleted file mode 100644
index 48bbca3b..00000000
--- a/src/components/products/ProductXpCard.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import {ComposedProduct, GetComposedProduct} from "../../services/ordercloud.service"
-import {Products} from "ordercloud-javascript-sdk"
-import {useEffect, useState} from "react"
-import {IProduct, IProductXp} from "types/ordercloud/IProduct"
-import XpCard from "../card/XpCard"
-
-type ProductDataProps = {
-  composedProduct: ComposedProduct
-  setComposedProduct: React.Dispatch<React.SetStateAction<ComposedProduct>>
-}
-
-export default function ProductXpCard({composedProduct, setComposedProduct}: ProductDataProps) {
-  const [isEditingBasicData, setIsEditingBasicData] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [formValues, setFormValues] = useState<IProductXp>(Object.assign({}, composedProduct?.Product?.xp))
-  const [xpsToBeDeleted, setXpsToBeDeleted] = useState<string[]>([])
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, composedProduct?.Product?.xp))
-  }, [composedProduct?.Product?.xp])
-
-  const onProductSave = async () => {
-    setIsLoading(true)
-    if (isDeleting) {
-      var newProduct: IProduct = composedProduct.Product
-      delete newProduct.xp
-      var tempXPs = Object.assign({}, formValues)
-      xpsToBeDeleted.forEach((e) => delete tempXPs[e])
-      newProduct["xp"] = tempXPs
-      await Products.Save<IProduct>(composedProduct?.Product?.ID, newProduct)
-      setIsDeleting(false)
-      setXpsToBeDeleted([])
-    } else {
-      const newProduct: IProduct = {
-        Name: composedProduct?.Product?.Name,
-        xp: formValues
-      }
-      await Products.Patch<IProduct>(composedProduct?.Product?.ID, newProduct)
-    }
-
-    // Hack to ensure Data are loaded before showing -> AWAIT is not enough
-    setTimeout(async () => {
-      var product = await GetComposedProduct(composedProduct?.Product?.ID)
-      setComposedProduct(product)
-      setTimeout(() => {
-        setIsEditingBasicData(false)
-        setIsLoading(false)
-      }, 1000)
-    }, 4500)
-  }
-
-  return (
-    <>
-      <XpCard
-        data={composedProduct?.Product}
-        formValues={formValues}
-        setFormValues={setFormValues}
-        isLoading={isLoading}
-        setIsLoading={setIsLoading}
-        isEditingBasicData={isEditingBasicData}
-        setIsEditingBasicData={setIsEditingBasicData}
-        setIsDeleting={setIsDeleting}
-        xpsToBeDeleted={xpsToBeDeleted}
-        setXpsToBeDeleted={setXpsToBeDeleted}
-        onSave={onProductSave}
-      />
-    </>
-  )
-}
diff --git a/src/components/products/detail/ProductDetail.tsx b/src/components/products/detail/ProductDetail.tsx
index dc36dc5e..2fdf988d 100644
--- a/src/components/products/detail/ProductDetail.tsx
+++ b/src/components/products/detail/ProductDetail.tsx
@@ -1,49 +1,54 @@
 import {
-  Heading,
-  Tabs,
-  TabList,
-  TabPanel,
-  TabPanels,
+  Box,
+  Button,
+  ButtonGroup,
   Card,
   CardBody,
   CardHeader,
-  Box,
-  Flex,
-  Divider,
   Container,
+  Divider,
+  Flex,
+  Heading,
+  Hide,
   Icon,
+  IconButton,
   SimpleGrid,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
   Text,
-  Button
+  useDisclosure
 } from "@chakra-ui/react"
-import {DescriptionForm} from "./forms/DescriptionForm/DescriptionForm"
-import {DetailsForm} from "./forms/DetailsForm/DetailsForm"
-import {InventoryForm} from "./forms/InventoryForm/InventoryForm"
-import {ShippingForm} from "./forms/ShippingForm/ShippingForm"
-import {UnitOfMeasureForm} from "./forms/UnitOfMeasureForm/UnitOfMeasureForm"
-import ImagePreview from "./ImagePreview"
-import {withDefaultValuesFallback, getObjectDiff, makeNestedObject} from "utils"
+import {yupResolver} from "@hookform/resolvers/yup"
+import {useRouter} from "hooks/useRouter"
+import {useErrorToast, useSuccessToast} from "hooks/useToast"
 import {cloneDeep, invert} from "lodash"
 import {PriceSchedules, Products} from "ordercloud-javascript-sdk"
-import {defaultValues, validationSchema} from "./forms/meta"
-import ProductDetailToolbar from "./ProductDetailToolbar"
-import {useErrorToast, useSuccessToast} from "hooks/useToast"
-import {IProduct} from "types/ordercloud/IProduct"
-import {useRouter} from "hooks/useRouter"
-import {useState} from "react"
-import {yupResolver} from "@hookform/resolvers/yup"
+import {useEffect, useState} from "react"
 import {useForm} from "react-hook-form"
-import {PricingForm} from "./forms/PricingForm/PricingForm"
-import {ProductDetailTab} from "./ProductDetailTab"
+import {TbCactus, TbEdit, TbTrash} from "react-icons/tb"
 import {IPriceSchedule} from "types/ordercloud/IPriceSchedule"
-import {TbCactus} from "react-icons/tb"
+import {IProduct} from "types/ordercloud/IProduct"
+import {IProductFacet} from "types/ordercloud/IProductFacet"
 import {ISpec} from "types/ordercloud/ISpec"
-import ProductSpecs from "../ProductSpecs"
 import {IVariant} from "types/ordercloud/IVariant"
+import {getObjectDiff, makeNestedObject, withDefaultValuesFallback} from "utils"
+import ProductSpecs from "../ProductSpecs"
 import ProductVariants from "../ProductVariants"
+import ProductXpModal from "../modals/ProductXpModal"
+import ImagePreview from "./ImagePreview"
+import {ProductDetailTab} from "./ProductDetailTab"
+import ProductDetailToolbar from "./ProductDetailToolbar"
+import {DescriptionForm} from "./forms/DescriptionForm/DescriptionForm"
+import {DetailsForm} from "./forms/DetailsForm/DetailsForm"
 import {FacetsForm} from "./forms/FacetsForm/FacetsForm"
-import {IProductFacet} from "types/ordercloud/IProductFacet"
+import {InventoryForm} from "./forms/InventoryForm/InventoryForm"
 import {MediaForm} from "./forms/MediaForm/MediaForm"
+import {PricingForm} from "./forms/PricingForm/PricingForm"
+import {ShippingForm} from "./forms/ShippingForm/ShippingForm"
+import {UnitOfMeasureForm} from "./forms/UnitOfMeasureForm/UnitOfMeasureForm"
+import {defaultValues, tabFieldNames, validationSchema} from "./forms/meta"
 
 export type ProductDetailTab = "Details" | "Pricing" | "Variants" | "Media" | "Facets" | "Customization"
 
@@ -78,6 +83,9 @@ export default function ProductDetail({
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
   const [tabIndex, setTabIndex] = useState(tabIndexMap[initialTab])
+  const [liveXp, setLiveXp] = useState<{[key: string]: any}>(product?.xp)
+  const [nonUiXp, setNonUiXp] = useState<{[key: string]: any}>({})
+  const xpDisclosure = useDisclosure()
   const isCreatingNew = !Boolean(product?.ID)
   const initialViewVisibility: Record<ProductDetailTab, boolean> = {
     Details: true,
@@ -88,6 +96,8 @@ export default function ProductDetail({
     Customization: true
   }
   const [viewVisibility, setViewVisibility] = useState(initialViewVisibility)
+  const [xpPropertyNameToEdit, setXpPropertyNameToEdit] = useState<string>(null)
+  const [xpPropertyValueToEdit, setXpPropertyValueToEdit] = useState<string>(null)
 
   const createFormFacets = (facetList: IProductFacet[] = [], facetsOnProduct: any) => {
     const formattedFacets = facetList.map((facet) => {
@@ -119,17 +129,17 @@ export default function ProductDetail({
       )
     : makeNestedObject(defaultValues)
 
-  const handleTabsChange = (index) => {
-    router.push({query: {...router.query, tab: inverseTabIndexMap[index]}}, undefined, {shallow: true})
-    setTabIndex(index)
-  }
-
   const {handleSubmit, control, reset, trigger} = useForm({
     resolver: yupResolver(validationSchema),
     defaultValues: initialValues,
     mode: "onBlur"
   })
 
+  const handleTabsChange = (index) => {
+    router.push({query: {...router.query, tab: inverseTabIndexMap[index]}}, undefined, {shallow: true})
+    setTabIndex(index)
+  }
+
   const generateUpdatedFacets = (facets = []) => {
     const updatedFacetsOnProduct = {}
 
@@ -204,6 +214,21 @@ export default function ProductDetail({
     errorToast({title: "Form errors", description: "Please resolve the errors and try again."})
   }
 
+  const handleXpRemoval = async (key: string) => {
+    const newXp = cloneDeep(liveXp)
+    delete newXp[key]
+    // First patch xp to null
+    await Products.Patch(product?.ID, {xp: null})
+    // Then patch xp back to the state without the respective removed key
+    const patchedProduct = await Products.Patch(product?.ID, {xp: newXp})
+    // Then set nonUiXp again with the new state.
+    successToast({
+      description: "Extended property successfully removed. It may take up to 10 minutes to see the change propagate."
+    })
+    setNonUiXp(getNonUiXp(patchedProduct.xp))
+    setLiveXp(patchedProduct.xp)
+  }
+
   const SimpleCard = (props: {title?: string; children: React.ReactElement}) => (
     <Card>
       <CardHeader>{props.title && <Heading size="md">{props.title}</Heading>}</CardHeader>
@@ -211,6 +236,128 @@ export default function ProductDetail({
     </Card>
   )
 
+  const xpCard = (): JSX.Element => {
+    return (
+      <Card w="100%">
+        <CardHeader display="flex" alignItems={"center"} flexWrap="wrap" gap={4}>
+          <Text fontSize="sm" color="gray.400" fontWeight="normal">
+            Define custom properties for your product
+          </Text>
+          <Button variant="outline" colorScheme="accent" ml={{md: "auto"}} onClick={() => xpDisclosure.onOpen()}>
+            Add additional property
+          </Button>
+        </CardHeader>
+        <CardBody
+          p={6}
+          display="flex"
+          flexDirection={"column"}
+          alignItems={"flex-start"}
+          justifyContent={"center"}
+          minH={"xs"}
+        >
+          {Object.values(nonUiXp).map((xp, idx) => {
+            return (
+              <Box
+                key={idx}
+                display="grid"
+                gridTemplateColumns={"auto 2fr 2fr"}
+                justifyContent="flex-start"
+                w={"full"}
+                maxW={{xl: "75%"}}
+              >
+                <Hide below="lg">
+                  <ButtonGroup size="xs" mr={2} alignItems="center">
+                    <Button
+                      onClick={() => {
+                        setXpPropertyNameToEdit(Object.keys(nonUiXp)[idx])
+                        setXpPropertyValueToEdit(xp)
+                        xpDisclosure.onOpen()
+                      }}
+                    >
+                      Edit
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      colorScheme="red"
+                      onClick={() => handleXpRemoval(Object.keys(nonUiXp)[idx])}
+                    >
+                      Delete
+                    </Button>
+                  </ButtonGroup>
+                </Hide>
+                <Hide above="lg">
+                  <ButtonGroup
+                    size="sm"
+                    mr={{base: 3, md: 6}}
+                    flexDirection={{base: "column", md: "row"}}
+                    padding={{base: 1, md: 0}}
+                    alignItems={{base: "flex-start", md: "center"}}
+                    gap={2}
+                    alignSelf="center"
+                  >
+                    <IconButton
+                      icon={<TbEdit size="1rem" />}
+                      aria-label="edit"
+                      onClick={() => {
+                        setXpPropertyNameToEdit(Object.keys(nonUiXp)[idx])
+                        setXpPropertyValueToEdit(xp)
+                        xpDisclosure.onOpen()
+                      }}
+                    >
+                      Edit
+                    </IconButton>
+                    <IconButton
+                      ml={"0 !important"}
+                      icon={<TbTrash size="1rem" />}
+                      variant="outline"
+                      borderColor="red.300"
+                      color="red.300"
+                      aria-label="delete"
+                      onClick={() => handleXpRemoval(Object.keys(nonUiXp)[idx])}
+                    >
+                      Delete
+                    </IconButton>
+                  </ButtonGroup>
+                </Hide>
+                <Flex borderWidth={1} borderColor="gray.100" mt={"-1px"} px={4} py={2} alignItems="center">
+                  <Text
+                    fontSize="0.8rem"
+                    fontWeight="bold"
+                    color="blackAlpha.500"
+                    textTransform="uppercase"
+                    letterSpacing={1}
+                    wordBreak={"break-word"}
+                  >
+                    {Object.keys(nonUiXp)[idx]}
+                  </Text>
+                </Flex>
+                <Flex borderWidth={1} borderColor="gray.100" px={4} py={2} mt={"-1px"} ml={"-1px"} alignItems="center">
+                  <Text whiteSpace="pre-wrap" wordBreak="break-word">
+                    {xp}
+                  </Text>
+                </Flex>
+              </Box>
+            )
+          })}
+        </CardBody>
+      </Card>
+    )
+  }
+
+  useEffect(() => {
+    const productXp = getNonUiXp(product?.xp)
+    setNonUiXp(productXp)
+  }, [product])
+
+  const getNonUiXp = (xp: {[key: string]: any}): {[key: string]: any} => {
+    const uiXpFields = Object.values(tabFieldNames)
+      .flat()
+      .filter((field) => field.includes(".xp."))
+      .map((xp) => xp?.split(".")?.at(2))
+    const productXp = cloneDeep(xp)
+    uiXpFields.forEach((f) => delete productXp[f])
+    return productXp
+  }
   return (
     <Container maxW="100%" bgColor="st.mainBackgroundColor" flexGrow={1} p={[4, 6, 8]}>
       <Box as="form" noValidate onSubmit={handleSubmit(onSubmit, onInvalid)}>
@@ -362,31 +509,7 @@ export default function ProductDetail({
               )}
               {viewVisibility.Customization && (
                 <TabPanel p={0} mt={6}>
-                  <Card w="100%">
-                    <CardHeader display="flex" alignItems={"center"}>
-                      <Text fontSize="sm" color="gray.400" fontWeight="normal">
-                        Add options like shirt text and sign verbiage to enable further product customization.
-                      </Text>
-                      <Button variant="outline" colorScheme="accent" ml="auto">
-                        Create option
-                      </Button>
-                    </CardHeader>
-                    <CardBody>
-                      <Box
-                        p={6}
-                        display="flex"
-                        flexDirection={"column"}
-                        alignItems={"center"}
-                        justifyContent={"center"}
-                        minH={"xs"}
-                      >
-                        <Icon as={TbCactus} fontSize={"5xl"} strokeWidth={"2px"} color="accent.500" />
-                        <Heading colorScheme="secondary" fontSize="xl">
-                          Nothing created yet...
-                        </Heading>
-                      </Box>
-                    </CardBody>
-                  </Card>
+                  {xpCard()}
                 </TabPanel>
               )}
             </TabPanels>
@@ -449,16 +572,24 @@ export default function ProductDetail({
                 <CardBody>Facets under construction</CardBody>
               </Card>
             )}
-            {viewVisibility.Customization && (
-              <Card width={{base: "100%", xl: "50%"}}>
-                <CardHeader>
-                  <Heading>Customization</Heading>
-                </CardHeader>
-                <CardBody>Customization under construction</CardBody>
-              </Card>
-            )}
+            {viewVisibility.Customization && xpCard()}
           </Flex>
         )}
+        <ProductXpModal
+          productID={product?.ID}
+          nonUiXp={nonUiXp}
+          disclosure={xpDisclosure}
+          existingPropertyName={xpPropertyNameToEdit}
+          existingPropertyValue={xpPropertyValueToEdit}
+          clearExistingPropertyValues={() => {
+            setXpPropertyNameToEdit(null)
+            setXpPropertyValueToEdit(null)
+          }}
+          onSuccess={(patchResponse) => {
+            setNonUiXp(getNonUiXp(patchResponse.xp))
+            setLiveXp(patchResponse.xp)
+          }}
+        />
       </Box>
     </Container>
   )
diff --git a/src/components/products/modals/ProductXpModal.tsx b/src/components/products/modals/ProductXpModal.tsx
new file mode 100644
index 00000000..623ddb94
--- /dev/null
+++ b/src/components/products/modals/ProductXpModal.tsx
@@ -0,0 +1,184 @@
+import {
+  Alert,
+  Button,
+  ButtonGroup,
+  Center,
+  FormControl,
+  Heading,
+  HStack,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Spinner,
+  UseDisclosureProps
+} from "@chakra-ui/react"
+import {Products} from "ordercloud-javascript-sdk"
+import {FC, useEffect, useState} from "react"
+import {IProduct} from "types/ordercloud/IProduct"
+
+interface IProductXpModal {
+  productID: string
+  disclosure: UseDisclosureProps
+  nonUiXp: {[key: string]: any}
+  existingPropertyName?: string
+  existingPropertyValue?: string
+  clearExistingPropertyValues: () => void
+  onSuccess: (patchedProduct: IProduct) => void
+}
+
+const ProductXpModal: FC<IProductXpModal> = ({
+  productID,
+  disclosure,
+  nonUiXp,
+  existingPropertyName,
+  existingPropertyValue,
+  clearExistingPropertyValues,
+  onSuccess
+}) => {
+  const {isOpen, onClose} = disclosure
+  const [loading, setLoading] = useState(false)
+  const [propertyName, setPropertyName] = useState<string>(existingPropertyName ?? "")
+  const [dataType, setDataType] = useState<string>("string")
+  const [value, setValue] = useState<any>(existingPropertyValue ?? "")
+  const [errors, setErrors] = useState<string[]>([])
+  const [isEditing, setIsEditing] = useState<boolean>(false)
+
+  const handleDataTypeChange = (type: string) => () => {
+    setValue("")
+    setDataType(type)
+  }
+
+  useEffect(() => {
+    if (!isOpen) {
+      setLoading(false)
+      setErrors([])
+      setPropertyName("")
+      setValue("")
+      clearExistingPropertyValues()
+      setIsEditing(false)
+    }
+    setPropertyName(existingPropertyName)
+    setValue(existingPropertyValue)
+    setDataType(existingPropertyValue ? typeof existingPropertyValue : "string")
+    if (existingPropertyName || existingPropertyValue) setIsEditing(true)
+  }, [isOpen, existingPropertyName, existingPropertyValue])
+
+  const validate = (): string[] => {
+    const errors = []
+    if (Object.keys(nonUiXp).includes(propertyName) && !isEditing)
+      errors.push(`The property name "${propertyName}" already exists on extended properties`)
+    if (!propertyName || propertyName === "") errors.push("You must set a property name")
+    if (!value || value === "") errors.push("You must set a property value")
+    return errors
+  }
+
+  const handleSubmit = () => {
+    setErrors([])
+    const errors = validate()
+    if (errors?.length > 0) {
+      setErrors(errors)
+      return
+    }
+    const request = {
+      xp: {
+        [propertyName]: dataType == "number" ? Number(value) : value
+      }
+    }
+    setLoading(true)
+    Products.Patch(productID, request)
+      .then((res) => {
+        onSuccess(res)
+        onClose()
+      })
+      .catch((err) => setErrors([err]))
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        {loading && (
+          <Center
+            rounded="md"
+            position="absolute"
+            left={0}
+            w="full"
+            h="full"
+            bg="whiteAlpha.500"
+            zIndex={2}
+            color="teal"
+          >
+            <Spinner></Spinner>
+          </Center>
+        )}
+        <ModalHeader>{isEditing ? "Edit" : "New"} Extended Property</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          {errors.map((e, idx) => (
+            <Alert key={idx} my={3} status="error" variant="subtle">
+              {e}
+            </Alert>
+          ))}
+          <Heading size="sm" as="h5" mb={5}>
+            Property name
+          </Heading>
+          <FormControl>
+            <Input
+              type="string"
+              value={propertyName ?? ""}
+              onChange={(e) => setPropertyName(e.target.value)}
+              isDisabled={isEditing}
+            />
+          </FormControl>
+          <Heading size="sm" as="h5" mb={3} mt={7}>
+            Property type
+          </Heading>
+          <ButtonGroup w="full" isAttached variant="outline">
+            <Button
+              flexGrow={1}
+              onClick={handleDataTypeChange("string")}
+              isActive={dataType === "string"}
+              isDisabled={isEditing}
+            >
+              String
+            </Button>
+            <Button
+              flexGrow={1}
+              onClick={handleDataTypeChange("number")}
+              isActive={dataType === "number"}
+              isDisabled={isEditing}
+            >
+              Number
+            </Button>
+          </ButtonGroup>
+          <Heading size="sm" as="h5" mb={3} mt={7}>
+            Property value
+          </Heading>
+          <FormControl>
+            <Input type={dataType} value={value ?? ""} onChange={(e) => setValue(e.target.value)} />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter as={HStack} justifyContent="space-between">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="solid"
+            colorScheme="primary"
+            isDisabled={propertyName == "" || value == ""}
+            onClick={handleSubmit}
+          >
+            {existingPropertyValue ? "Update" : "Save"} Property
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default ProductXpModal
diff --git a/src/components/promotions/CreateUpdateForm.tsx b/src/components/promotions/CreateUpdateForm.tsx
index 6c71ec00..48ad3c5b 100644
--- a/src/components/promotions/CreateUpdateForm.tsx
+++ b/src/components/promotions/CreateUpdateForm.tsx
@@ -27,7 +27,8 @@ import {
   Container,
   Flex,
   FormControl,
-  VStack
+  VStack,
+  Text
 } from "@chakra-ui/react"
 import {DeleteIcon} from "@chakra-ui/icons"
 import {InputControl, RadioGroupControl, SwitchControl, TextareaControl} from "components/react-hook-form"
@@ -40,7 +41,6 @@ import {Promotion, Promotions} from "ordercloud-javascript-sdk"
 import {useRouter} from "hooks/useRouter"
 import {useCreateUpdateForm} from "hooks/useCreateUpdateForm"
 import {IPromotion} from "types/ordercloud/IPromotion"
-import PromotionXpCard from "./PromotionXpCard"
 import {yupResolver} from "@hookform/resolvers/yup"
 import {useForm} from "react-hook-form"
 import {emptyStringToNull} from "utils"
@@ -310,7 +310,7 @@ function CreateUpdateForm({promotion}: CreateUpdateFormProps) {
                     </Card>
                   </TabPanel>
                   <TabPanel p={0}>
-                    <PromotionXpCard promotion={promotion} />
+                    <Text>Under construction</Text>
                     {/* <Card p={6}>
                       <SimpleGrid columns={2} spacing={10}>
                       </SimpleGrid>
diff --git a/src/components/promotions/PromotionXpCard.tsx b/src/components/promotions/PromotionXpCard.tsx
deleted file mode 100644
index 985c80d5..00000000
--- a/src/components/promotions/PromotionXpCard.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import {useEffect, useState} from "react"
-import {Promotion, Promotions} from "ordercloud-javascript-sdk"
-import {useRouter} from "hooks/useRouter"
-import XpCard from "../card/XpCard"
-import {IPromotion, IPromotionXp} from "types/ordercloud/IPromotion"
-
-type PromotionDataProps = {
-  promotion: Promotion & {xp?: unknown}
-}
-
-export default function PromotionXpCard({promotion}: PromotionDataProps) {
-  const [isEditingBasicData, setIsEditingBasicData] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [formValues, setFormValues] = useState<IPromotionXp>(Object.assign({}, promotion?.xp))
-  const [xpsToBeDeleted, setXpsToBeDeleted] = useState<string[]>([])
-  let router = useRouter()
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, promotion?.xp))
-  }, [promotion?.xp])
-
-  const onPromotionSave = async () => {
-    setIsLoading(true)
-    if (isDeleting) {
-      var newPromotion: IPromotion = promotion
-      delete newPromotion.xp
-      var tempXPs = Object.assign({}, formValues)
-      xpsToBeDeleted.forEach((e) => delete tempXPs[e])
-      newPromotion["xp"] = tempXPs
-      await Promotions.Save<IPromotion>(promotion?.ID, newPromotion)
-      setIsDeleting(false)
-      setXpsToBeDeleted([])
-    } else {
-      const newPromotion: IPromotion = {
-        ...promotion,
-        xp: formValues
-      }
-      await Promotions.Patch<IPromotion>(promotion?.ID, newPromotion)
-    }
-
-    setIsEditingBasicData(false)
-    setIsLoading(false)
-    router.back()
-  }
-
-  return (
-    <>
-      <XpCard
-        data={promotion}
-        formValues={formValues}
-        setFormValues={setFormValues}
-        isLoading={isLoading}
-        setIsLoading={setIsLoading}
-        isEditingBasicData={isEditingBasicData}
-        setIsEditingBasicData={setIsEditingBasicData}
-        setIsDeleting={setIsDeleting}
-        xpsToBeDeleted={xpsToBeDeleted}
-        setXpsToBeDeleted={setXpsToBeDeleted}
-        onSave={onPromotionSave}
-      />
-    </>
-  )
-}
diff --git a/src/components/users/CreateUpdateForm.tsx b/src/components/users/CreateUpdateForm.tsx
index 1d6d9c5b..98ce3176 100644
--- a/src/components/users/CreateUpdateForm.tsx
+++ b/src/components/users/CreateUpdateForm.tsx
@@ -11,14 +11,14 @@ import {
   HStack,
   List,
   ListIcon,
-  ListItem
+  ListItem,
+  Text
 } from "@chakra-ui/react"
 import {MdCheckCircle} from "react-icons/md"
 import {User} from "ordercloud-javascript-sdk"
 import {useRouter} from "hooks/useRouter"
 import {useState} from "react"
 import {useCreateUpdateForm} from "hooks/useCreateUpdateForm"
-import UserXpCard from "./UserXpCard"
 import {yupResolver} from "@hookform/resolvers/yup"
 import {useForm} from "react-hook-form"
 import {DataTable} from "../data-table/DataTable"
@@ -138,7 +138,7 @@ function CreateUpdateForm({user, ocService}: CreateUpdateFormProps) {
             </Flex>
           </Card>
           <Card h={"100%"}>
-            <UserXpCard organizationID={parentId} user={user} />
+            <Text>Under construction</Text>
           </Card>
         </>
       )}
diff --git a/src/components/users/UserXpCard.tsx b/src/components/users/UserXpCard.tsx
deleted file mode 100644
index f14c0f91..00000000
--- a/src/components/users/UserXpCard.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {useEffect, useState} from "react"
-import {Users} from "ordercloud-javascript-sdk"
-import {ISupplierUser, ISupplierUserXp} from "types/ordercloud/ISupplierUser"
-import {IBuyerUser, IBuyerUserXp} from "types/ordercloud/IBuyerUser"
-import {useRouter} from "hooks/useRouter"
-import XpCard from "../card/XpCard"
-
-type UserDataProps = {
-  organizationID: string
-  user: (IBuyerUser | ISupplierUser) & {xp?: unknown}
-}
-
-export default function UserXpCard({organizationID, user}: UserDataProps) {
-  const [isEditingBasicData, setIsEditingBasicData] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [formValues, setFormValues] = useState<ISupplierUserXp | IBuyerUserXp>(Object.assign({}, user?.xp))
-  const [xpsToBeDeleted, setXpsToBeDeleted] = useState<string[]>([])
-  let router = useRouter()
-
-  useEffect(() => {
-    setFormValues(Object.assign({}, user?.xp))
-  }, [user?.xp])
-
-  const onUserSave = async () => {
-    setIsLoading(true)
-    if (isDeleting) {
-      var newUser: IBuyerUser | ISupplierUser = user
-      delete newUser.xp
-      var tempXPs = Object.assign({}, formValues)
-      xpsToBeDeleted.forEach((e) => delete tempXPs[e])
-      newUser["xp"] = tempXPs
-      await Users.Save<IBuyerUser | ISupplierUser>(organizationID, user?.ID, newUser)
-      setIsDeleting(false)
-      setXpsToBeDeleted([])
-    } else {
-      const newUser: IBuyerUser | ISupplierUser = {
-        ...user,
-        xp: formValues
-      }
-      await Users.Patch<IBuyerUser | ISupplierUser>(organizationID, user?.ID, newUser)
-    }
-
-    setIsEditingBasicData(false)
-    setIsLoading(false)
-    router.back()
-  }
-
-  return (
-    <>
-      <XpCard
-        data={user}
-        formValues={formValues}
-        setFormValues={setFormValues}
-        isLoading={isLoading}
-        setIsLoading={setIsLoading}
-        isEditingBasicData={isEditingBasicData}
-        setIsEditingBasicData={setIsEditingBasicData}
-        setIsDeleting={setIsDeleting}
-        xpsToBeDeleted={xpsToBeDeleted}
-        setXpsToBeDeleted={setXpsToBeDeleted}
-        onSave={onUserSave}
-      />
-    </>
-  )
-}
diff --git a/src/pages/products/old/[id].tsx b/src/pages/products/old/[id].tsx
index 5604abd0..379463b3 100644
--- a/src/pages/products/old/[id].tsx
+++ b/src/pages/products/old/[id].tsx
@@ -57,7 +57,6 @@ import ProductPriceScheduleAssignments from "components/products/ProductPriceSch
 import ProductSpecs from "components/products/ProductSpecs"
 import ProductSuppliers from "components/products/ProductSupllier"
 import ProductVariants from "components/products/ProductVariants"
-import ProductXpCard from "@/components/products/ProductXpCard"
 import ProtectedContent from "components/auth/ProtectedContent"
 import React from "react"
 import {appPermissions} from "constants/app-permissions.config"
@@ -307,11 +306,6 @@ const ProductDetails = () => {
                     />
                   </Card>
                 </GridItem>
-                <GridItem rowSpan={1} colSpan={2}>
-                  <Card variant="primaryCard" h={"100%"} closedText="Extended Properties Cards">
-                    <ProductXpCard composedProduct={composedProduct} setComposedProduct={setComposedProduct} />
-                  </Card>
-                </GridItem>
                 <GridItem rowSpan={1} colSpan={{base: 6, md: 6, sm: 6, lg: 4, xl: 2}}>
                   <Card variant="primaryCard" h={"100%"} closedText="Catalog Assignments">
                     <ProductCatalogAssignments