diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProjectProvision.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProjectProvision.tsx
index d200f9d31..45ec182c6 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProjectProvision.tsx
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProjectProvision.tsx
@@ -1,4 +1,6 @@
 import {
+  FluentProvider,
+  IdPrefixProvider,
   Menu,
   MenuButtonProps,
   MenuItem,
@@ -9,23 +11,23 @@ import {
   SkeletonItem,
   SplitButton,
   Toaster,
-  useId,
   useRestoreFocusTarget,
   useToastController
 } from '@fluentui/react-components'
 import React, { FC } from 'react'
 import { IProjectProvisionProps } from './types'
-import { getFluentIcon } from 'pp365-shared-library'
+import { customLightTheme, getFluentIcon } from 'pp365-shared-library'
 import { ProvisionStatus } from './ProvisionStatus'
 import { useProjectProvision } from './useProjectProvision'
 import { ProjectProvisionContext } from './context'
 import { ProvisionDrawer } from './ProvisionDrawer'
 import strings from 'PortfolioWebPartsStrings'
+import { ProvisionSettings } from './ProvisionSettings'
 
 export const ProjectProvision: FC<IProjectProvisionProps> = (props) => {
-  const { state, setState, column, setColumn } = useProjectProvision(props)
+  const { state, setState, column, setColumn, toasterId, fluentProviderId } =
+    useProjectProvision(props)
   const restoreFocusTargetAttribute = useRestoreFocusTarget()
-  const toasterId = useId('saveToaster')
   const { dispatchToast } = useToastController(toasterId)
 
   if (state.loading) {
@@ -38,39 +40,52 @@ export const ProjectProvision: FC<IProjectProvisionProps> = (props) => {
 
   return (
     <ProjectProvisionContext.Provider value={{ props, state, setState, column, setColumn }}>
-      <ProvisionDrawer toast={dispatchToast} />
-      <Menu positioning='below-end'>
-        <MenuTrigger disableButtonEnhancement>
-          {(triggerProps: MenuButtonProps) => (
-            <SplitButton
-              menuButton={triggerProps}
-              primaryActionButton={{
-                onClick: () => setState({ showProvisionDrawer: true })
-              }}
-              icon={getFluentIcon('Add')}
-              appearance='primary'
-              size='large'
-            >
-              {strings.Provision.ProvisionButtonLabel}
-            </SplitButton>
-          )}
-        </MenuTrigger>
-        <MenuPopover>
-          <MenuList>
-            <MenuItem
-              {...restoreFocusTargetAttribute}
-              onClick={() => {
-                setState({ showProvisionStatus: true })
-              }}
-            >
-              {strings.Provision.StatusMenuLabel}
-            </MenuItem>
-            <MenuItem>{strings.Provision.IdeaMenuLabel}</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
-      <ProvisionStatus />
-      <Toaster toasterId={toasterId} />
+      <IdPrefixProvider value={fluentProviderId}>
+        <FluentProvider theme={customLightTheme}>
+          <ProvisionDrawer toast={dispatchToast} />
+          <Menu positioning='below-end'>
+            <MenuTrigger disableButtonEnhancement>
+              {(triggerProps: MenuButtonProps) => (
+                <SplitButton
+                  menuButton={triggerProps}
+                  primaryActionButton={{
+                    onClick: () => setState({ showProvisionDrawer: true })
+                  }}
+                  icon={getFluentIcon('Add')}
+                  appearance='primary'
+                  size='large'
+                >
+                  {strings.Provision.ProvisionButtonLabel}
+                </SplitButton>
+              )}
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem
+                  {...restoreFocusTargetAttribute}
+                  onClick={() => {
+                    setState({ showProvisionStatus: true })
+                  }}
+                >
+                  {strings.Provision.StatusMenuLabel}
+                </MenuItem>
+                <MenuItem
+                  {...restoreFocusTargetAttribute}
+                  onClick={() => {
+                    setState({ showProvisionSettings: true })
+                  }}
+                >
+                  {strings.Provision.SettingsMenuLabel}
+                </MenuItem>
+                <MenuItem disabled>{strings.Provision.IdeaMenuLabel}</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+          <ProvisionStatus toast={dispatchToast} />
+          <ProvisionSettings toast={dispatchToast} />
+          <Toaster toasterId={toasterId} />
+        </FluentProvider>
+      </IdPrefixProvider>
     </ProjectProvisionContext.Provider>
   )
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/ProvisionDrawer.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/ProvisionDrawer.tsx
index e8a85490e..f1b53e72a 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/ProvisionDrawer.tsx
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/ProvisionDrawer.tsx
@@ -21,7 +21,9 @@ import {
   Tooltip,
   Toast,
   ToastBody,
-  ToastTitle
+  ToastTitle,
+  IdPrefixProvider,
+  FluentProvider
 } from '@fluentui/react-components'
 import {
   ArrowLeft24Regular,
@@ -30,13 +32,12 @@ import {
   Dismiss24Regular
 } from '@fluentui/react-icons'
 import strings from 'PortfolioWebPartsStrings'
-import { FieldContainer } from 'pp365-shared-library'
+import { FieldContainer, customLightTheme } from 'pp365-shared-library'
 import { SiteType } from './SiteType'
 import { useProvisionDrawer } from './useProvisionDrawer'
 import styles from './ProvisionDrawer.module.scss'
 import { User } from './User'
 import { Guest } from './Guest'
-import { DebugModel } from './DebugModel'
 
 export const ProvisionDrawer = (props: { toast: any }) => {
   const {
@@ -50,346 +51,392 @@ export const ProvisionDrawer = (props: { toast: any }) => {
     context,
     onSave,
     isSaveDisabled,
+    siteExists,
+    setSiteExists,
     namingConvention,
     urlPrefix,
-    aliasSuffix
+    aliasSuffix,
+    fluentProviderId
   } = useProvisionDrawer()
 
   return (
-    <OverlayDrawer
-      role='panel'
-      position='end'
-      open={context.state.showProvisionDrawer}
-      size='medium'
-      onOpenChange={(_, { open }) => context.setState({ showProvisionDrawer: open })}
-    >
-      <DrawerHeader>
-        <DrawerHeaderNavigation>
-          <Toolbar className={styles.toolbar}>
-            <ToolbarGroup>
-              {toolbarBackIconMotion.canRender && (
-                <ToolbarButton
-                  ref={toolbarBackIconMotion.ref}
-                  className={mergeClasses(
-                    motionStyles.toolbarButton,
-                    toolbarBackIconMotion.active && motionStyles.toolbarButtonVisible
+    <IdPrefixProvider value={fluentProviderId}>
+      <FluentProvider theme={customLightTheme}>
+        <OverlayDrawer
+          role='panel'
+          position='end'
+          open={context.state.showProvisionDrawer}
+          size='medium'
+          onOpenChange={(_, { open }) => context.setState({ showProvisionDrawer: open })}
+        >
+          <DrawerHeader>
+            <DrawerHeaderNavigation>
+              <Toolbar className={styles.toolbar}>
+                <ToolbarGroup>
+                  {toolbarBackIconMotion.canRender && (
+                    <ToolbarButton
+                      ref={toolbarBackIconMotion.ref}
+                      className={mergeClasses(
+                        motionStyles.toolbarButton,
+                        toolbarBackIconMotion.active && motionStyles.toolbarButtonVisible
+                      )}
+                      title={strings.Aria.Back}
+                      appearance='subtle'
+                      icon={<ArrowLeft24Regular />}
+                      onClick={() => setLevel2(false)}
+                    />
                   )}
-                  title={strings.Aria.Back}
-                  appearance='subtle'
-                  icon={<ArrowLeft24Regular />}
-                  onClick={() => setLevel2(false)}
-                />
-              )}
-            </ToolbarGroup>
-            <ToolbarGroup>
-              {toolbarCalendarIconMotion.canRender && (
-                <ToolbarButton
-                  ref={toolbarCalendarIconMotion.ref}
-                  className={mergeClasses(
-                    motionStyles.toolbarButton,
-                    toolbarCalendarIconMotion.active && motionStyles.toolbarButtonVisible
+                </ToolbarGroup>
+                <ToolbarGroup>
+                  {toolbarCalendarIconMotion.canRender && (
+                    <ToolbarButton
+                      ref={toolbarCalendarIconMotion.ref}
+                      className={mergeClasses(
+                        motionStyles.toolbarButton,
+                        toolbarCalendarIconMotion.active && motionStyles.toolbarButtonVisible
+                      )}
+                      appearance='subtle'
+                      icon={<DataUsage24Regular />}
+                      onClick={() => setLevel2(true)}
+                    />
                   )}
-                  appearance='subtle'
-                  icon={<DataUsage24Regular />}
-                  onClick={() => setLevel2(true)}
-                />
-              )}
 
-              <ToolbarButton
-                appearance='subtle'
-                title={strings.Aria.Settings}
-                icon={<Settings24Regular />}
-              />
-              <ToolbarButton
-                title={strings.Aria.Close}
-                appearance='subtle'
-                icon={<Dismiss24Regular />}
-                onClick={() => context.setState({ showProvisionDrawer: false })}
-              />
-            </ToolbarGroup>
-          </Toolbar>
-        </DrawerHeaderNavigation>
-      </DrawerHeader>
-      <div className={styles.body}>
-        {level1Motion.canRender && (
-          <DrawerBody
-            ref={level1Motion.ref}
-            className={mergeClasses(
-              styles.level,
-              motionStyles.level,
-              motionStyles.level1,
-              level1Motion.active && motionStyles.levelVisible
-            )}
-          >
-            <DrawerHeaderTitle>{strings.Provision.DrawerLevel1HeaderText}</DrawerHeaderTitle>
-            <p>{strings.Provision.DrawerLevel1DescriptionText}</p>
-            <div className={styles.content}>
-              {/* {DEBUG && <DebugModel />} */}
-              <FieldContainer iconName='AppsList' label={strings.Provision.SiteTypeFieldLabel}>
-                <div className={styles.sitetypes}>
-                  {context.state.types.map((type) => (
-                    <SiteType
-                      key={type.title}
-                      title={type.title}
-                      description={type.description}
-                      image={type.image?.Url}
-                      type={type.type}
-                    />
-                  ))}
-                </div>
-              </FieldContainer>
-              <FieldContainer
-                iconName='TextNumberFormat'
-                label={strings.Provision.SiteNameFieldLabel}
-                description={strings.Provision.SiteNameFieldDescription}
-                required={true}
-                // validationState='success'
-                // validationMessage='Navnet er ledig'
-              >
-                <Input
-                  value={context.column.get('name')}
-                  onChange={(_, data) => {
-                    context.setColumn('name', data.value)
-                  }}
-                  contentBefore={
-                    namingConvention.prefixText && (
-                      <Tooltip
-                        withArrow
-                        content={strings.Provision.SiteNamePrefixTooltipText}
-                        relationship='label'
-                      >
-                        <Tag size='small'>{namingConvention.prefixText}</Tag>
-                      </Tooltip>
-                    )
-                  }
-                  contentAfter={
-                    namingConvention.suffixText && (
-                      <Tooltip
-                        withArrow
-                        content={strings.Provision.SiteNameSuffixTooltipText}
-                        relationship='label'
-                      >
-                        <Tag size='small'>{namingConvention.suffixText}</Tag>
-                      </Tooltip>
-                    )
-                  }
-                  placeholder={strings.Placeholder.SiteName}
-                />
-              </FieldContainer>
-              <FieldContainer
-                iconName='TextAlignLeft'
-                label={strings.Provision.SiteDescriptionFieldLabel}
-                description={strings.Provision.SiteDescriptionFieldDescription}
-              >
-                <Textarea
-                  value={context.column.get('description')}
-                  onChange={(_, data) => context.setColumn('description', data.value)}
-                  rows={2}
-                  placeholder={strings.Placeholder.SiteDescription}
-                />
-              </FieldContainer>
-              <FieldContainer
-                iconName='TextAlignLeft'
-                label={strings.Provision.BusinessJustificationFieldLabel}
-                description={strings.Provision.BusinessJustificationFieldDescription}
-                required={true}
-              >
-                <Textarea
-                  value={context.column.get('justification')}
-                  onChange={(_, data) => context.setColumn('justification', data.value)}
-                  rows={2}
-                  placeholder={strings.Placeholder.BusinessJustificationField}
-                />
-              </FieldContainer>
-              <Divider />
-              <FieldContainer
-                iconName='Person'
-                label={strings.Provision.OwnerFieldLabel}
-                description={strings.Provision.OwnerFieldDescription}
-                required={true}
+                  <ToolbarButton
+                    appearance='subtle'
+                    title={strings.Aria.Settings}
+                    icon={<Settings24Regular />}
+                  />
+                  <ToolbarButton
+                    title={strings.Aria.Close}
+                    appearance='subtle'
+                    icon={<Dismiss24Regular />}
+                    onClick={() => context.setState({ showProvisionDrawer: false })}
+                  />
+                </ToolbarGroup>
+              </Toolbar>
+            </DrawerHeaderNavigation>
+          </DrawerHeader>
+          <div className={styles.body}>
+            {level1Motion.canRender && (
+              <DrawerBody
+                ref={level1Motion.ref}
+                className={mergeClasses(
+                  styles.level,
+                  motionStyles.level,
+                  motionStyles.level1,
+                  level1Motion.active && motionStyles.levelVisible
+                )}
               >
-                <User type='owner' />
-              </FieldContainer>
-              <FieldContainer
-                iconName='People'
-                label={strings.Provision.MemberFieldLabel}
-                description={strings.Provision.MemberFieldDescription}
-              >
-                {/* Members can not be the same as the owner */}
-                <User type='member' />
-              </FieldContainer>
-              <Divider />
-              <FieldContainer iconName='TextNumberFormat' label={strings.Provision.AliasFieldLabel}>
-                <Input
-                  disabled
-                  value={context.column.get('alias')}
-                  contentAfter={<Tag size='small'>{aliasSuffix}</Tag>}
-                />
-              </FieldContainer>
-              <FieldContainer iconName='Link' label={strings.Provision.UrlFieldLabel}>
-                <Input
-                  disabled
-                  value={context.column.get('alias')}
-                  contentBefore={<Tag size='small'>{urlPrefix}</Tag>}
-                />
-              </FieldContainer>
-            </div>
-          </DrawerBody>
-        )}
+                <DrawerHeaderTitle>{strings.Provision.DrawerLevel1HeaderText}</DrawerHeaderTitle>
+                <p>{strings.Provision.DrawerLevel1DescriptionText}</p>
+                <div className={styles.content}>
+                  <FieldContainer iconName='AppsList' label={strings.Provision.SiteTypeFieldLabel}>
+                    <div className={styles.sitetypes}>
+                      {context.state.types.map((type) => {
+                        if (
+                          !type.visibleTo ||
+                          type.visibleTo?.some((user) =>
+                            user?.EMail?.includes(context.props?.pageContext?.user?.loginName)
+                          )
+                        ) {
+                          return (
+                            <SiteType
+                              key={type.title}
+                              title={type.title}
+                              description={type.description}
+                              image={type.image?.Url}
+                              type={type.type}
+                            />
+                          )
+                        }
+                      })}
+                    </div>
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='TextNumberFormat'
+                    label={strings.Provision.SiteNameFieldLabel}
+                    required={true}
+                    validationState={
+                      context.column.get('name').length
+                        ? siteExists
+                          ? 'error'
+                          : 'success'
+                        : 'none'
+                    }
+                    validationMessage={
+                      context.column.get('name').length
+                        ? siteExists
+                          ? strings.Provision.SiteNameValidationErrorMessage
+                          : strings.Provision.SiteNameValidationSuccessMessage
+                        : strings.Provision.SiteNameFieldDescription
+                    }
+                  >
+                    <Input
+                      value={context.column.get('name')}
+                      onChange={async (_, data) => {
+                        context.setColumn('name', data.value)
 
-        {level2Motion.canRender && (
-          <DrawerBody
-            ref={level2Motion.ref}
-            className={mergeClasses(
-              styles.level,
-              motionStyles.level,
-              motionStyles.level2,
-              level2Motion.active && motionStyles.levelVisible
+                        if (data.value) {
+                          setTimeout(async () => {
+                            const alias = data.value
+                              .replace(/ /g, '')
+                              .replace(/[^a-z-A-Z0-9-]/g, '')
+
+                            setSiteExists(
+                              await context.props.dataAdapter.siteExists(`${urlPrefix}${alias}`)
+                            )
+                          }, 500)
+                        }
+                      }}
+                      contentBefore={
+                        namingConvention?.prefixText && (
+                          <Tooltip
+                            withArrow
+                            content={strings.Provision.SiteNamePrefixTooltipText}
+                            relationship='label'
+                          >
+                            <Tag size='small'>{namingConvention?.prefixText}</Tag>
+                          </Tooltip>
+                        )
+                      }
+                      contentAfter={
+                        namingConvention?.suffixText && (
+                          <Tooltip
+                            withArrow
+                            content={strings.Provision.SiteNameSuffixTooltipText}
+                            relationship='label'
+                          >
+                            <Tag size='small'>{namingConvention?.suffixText}</Tag>
+                          </Tooltip>
+                        )
+                      }
+                      placeholder={strings.Placeholder.SiteName}
+                    />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='TextAlignLeft'
+                    label={strings.Provision.SiteDescriptionFieldLabel}
+                    description={strings.Provision.SiteDescriptionFieldDescription}
+                  >
+                    <Textarea
+                      value={context.column.get('description')}
+                      onChange={(_, data) => context.setColumn('description', data.value)}
+                      rows={2}
+                      placeholder={strings.Placeholder.SiteDescription}
+                    />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='TextAlignLeft'
+                    label={strings.Provision.BusinessJustificationFieldLabel}
+                    description={strings.Provision.BusinessJustificationFieldDescription}
+                    required={true}
+                  >
+                    <Textarea
+                      value={context.column.get('justification')}
+                      onChange={(_, data) => context.setColumn('justification', data.value)}
+                      rows={2}
+                      placeholder={strings.Placeholder.BusinessJustificationField}
+                    />
+                  </FieldContainer>
+                  <Divider />
+                  <FieldContainer
+                    iconName='Person'
+                    label={strings.Provision.OwnerFieldLabel}
+                    description={strings.Provision.OwnerFieldDescription}
+                    required={true}
+                  >
+                    <User type='owner' />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='People'
+                    label={strings.Provision.MemberFieldLabel}
+                    description={strings.Provision.MemberFieldDescription}
+                  >
+                    {/* Members can not be the same as the owner */}
+                    <User type='member' />
+                  </FieldContainer>
+                  <Divider />
+                  <FieldContainer
+                    iconName='TextNumberFormat'
+                    label={strings.Provision.AliasFieldLabel}
+                  >
+                    <Input
+                      disabled
+                      value={context.column.get('alias')}
+                      contentAfter={<Tag size='small'>{aliasSuffix}</Tag>}
+                    />
+                  </FieldContainer>
+                  <FieldContainer iconName='Link' label={strings.Provision.UrlFieldLabel}>
+                    <Input
+                      disabled
+                      value={context.column.get('alias')}
+                      contentBefore={<Tag size='small'>{urlPrefix}</Tag>}
+                    />
+                  </FieldContainer>
+                </div>
+              </DrawerBody>
             )}
-          >
-            <DrawerHeaderTitle>{strings.Provision.DrawerLevel2HeaderText}</DrawerHeaderTitle>
-            <p>{strings.Provision.DrawerLevel2DescriptionText}</p>
-            <div className={styles.content}>
-              {DEBUG && <DebugModel />}
-              <FieldContainer
-                iconName='PeopleTeam'
-                label={strings.Provision.TeamifyFieldLabel}
-                description={strings.Provision.TeamifyFieldDescription}
-              >
-                <Switch
-                  checked={context.column.get('teamify')}
-                  value={context.column.get('teamify')}
-                  onChange={(_, data) => {
-                    context.setColumn('teamify', data.checked)
-                  }}
-                />
-              </FieldContainer>
-              <FieldContainer
-                iconName='BoxToolbox'
-                label={strings.Provision.ConfidentialFieldLabel}
-                description={strings.Provision.ConfidentialFieldDescription}
-              >
-                <Switch
-                  checked={context.column.get('isConfidential')}
-                  value={context.column.get('isConfidential')}
-                  onChange={(_, data) => {
-                    context.setColumn('isConfidential', data.checked)
 
-                    if (data.checked) {
-                      context.setColumn('privacy', strings.Provision.PrivacyFieldOptionPrivate)
-                    }
-                  }}
-                />
-              </FieldContainer>
-              <FieldContainer
-                iconName='Eye'
-                label={strings.Provision.PrivacyFieldLabel}
-                description={strings.Provision.PrivacyFieldDescription}
-              >
-                <Dropdown
-                  defaultValue={context.column.get('privacy')}
-                  selectedOptions={[context.column.get('privacy')]}
-                  value={context.column.get('privacy')}
-                  defaultSelectedOptions={[context.column.get('privacy')]}
-                  onOptionSelect={(_, data) => {
-                    context.setColumn('privacy', data.optionValue)
-                  }}
-                  disabled={context.column.get('isConfidential')}
-                >
-                  <Option value={strings.Provision.PrivacyFieldOptionPrivate}>
-                    {strings.Provision.PrivacyFieldOptionPrivate}
-                  </Option>
-                  <Option value={strings.Provision.PrivacyFieldOptionPublic}>
-                    {strings.Provision.PrivacyFieldOptionPublic}
-                  </Option>
-                </Dropdown>
-              </FieldContainer>
-              <FieldContainer
-                iconName='Guest'
-                label={strings.Provision.ExternalSharingFieldLabel}
-                description={strings.Provision.ExternalSharingFieldDescription}
+            {level2Motion.canRender && (
+              <DrawerBody
+                ref={level2Motion.ref}
+                className={mergeClasses(
+                  styles.level,
+                  motionStyles.level,
+                  motionStyles.level2,
+                  level2Motion.active && motionStyles.levelVisible
+                )}
               >
-                <Switch
-                  checked={context.column.get('externalSharing')}
-                  value={context.column.get('externalSharing')}
-                  onChange={(_, data) => {
-                    context.setColumn('externalSharing', data.checked)
+                <DrawerHeaderTitle>{strings.Provision.DrawerLevel2HeaderText}</DrawerHeaderTitle>
+                <p>{strings.Provision.DrawerLevel2DescriptionText}</p>
+                <div className={styles.content}>
+                  {/* {DEBUG && <DebugModel />} */}
+                  <FieldContainer
+                    iconName='PeopleTeam'
+                    label={strings.Provision.TeamifyFieldLabel}
+                    description={strings.Provision.TeamifyFieldDescription}
+                  >
+                    <Switch
+                      checked={context.column.get('teamify')}
+                      value={context.column.get('teamify')}
+                      onChange={(_, data) => {
+                        context.setColumn('teamify', data.checked)
+                      }}
+                    />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='BoxToolbox'
+                    label={strings.Provision.ConfidentialFieldLabel}
+                    description={strings.Provision.ConfidentialFieldDescription}
+                  >
+                    <Switch
+                      checked={context.column.get('isConfidential')}
+                      value={context.column.get('isConfidential')}
+                      onChange={(_, data) => {
+                        context.setColumn('isConfidential', data.checked)
 
-                    if (!data.checked) {
-                      context.setColumn('guest', [])
-                    }
-                  }}
-                />
-              </FieldContainer>
-              <FieldContainer
-                iconName='People'
-                label={strings.Provision.GuestFieldLabel}
-                description={strings.Provision.GuestFieldDescription}
-                hidden={!context.column.get('externalSharing')}
-              >
-                <Guest />
-              </FieldContainer>
-              <FieldContainer iconName='LocalLanguage' label={strings.Provision.LanguageFieldLabel}>
-                <Dropdown
-                  defaultValue={context.column.get('language')}
-                  defaultSelectedOptions={[context.column.get('language')]}
-                  disabled
-                />
-              </FieldContainer>
-              <FieldContainer iconName='Clock' label={strings.Provision.TimeZoneFieldLabel}>
-                <Dropdown
-                  defaultValue={context.column.get('timeZone')}
-                  defaultSelectedOptions={[context.column.get('timeZone')]}
-                  disabled
-                />
-              </FieldContainer>
-              <FieldContainer iconName='Database' label={strings.Provision.HubSiteFieldLabel}>
-                <Dropdown
-                  defaultValue={context.column.get('hubSiteTitle')}
-                  defaultSelectedOptions={[context.column.get('hubSiteTitle')]}
-                  disabled
-                />
-              </FieldContainer>
-              <p className={styles.ignoreGap}>{strings.Provision.DrawerFooterDescriptionText}</p>
-            </div>
-          </DrawerBody>
-        )}
-      </div>
-      <DrawerFooter className={styles.footer}>
-        <Button appearance='subtle' disabled={!level2} onClick={() => setLevel2(false)}>
-          {strings.Provision.PreviousButtonLabel}
-        </Button>
-        <Button
-          appearance='primary'
-          disabled={level2 && isSaveDisabled}
-          onClick={() => {
-            level2
-              ? onSave().then((response) => {
-                  if (response) {
-                    props.toast(
-                      <Toast>
-                        <ToastTitle>{strings.Provision.ToastCreatedTitle}</ToastTitle>
-                        <ToastBody>{strings.Provision.ToastCreatedBody}</ToastBody>
-                      </Toast>,
-                      { intent: 'success' }
-                    )
-                    context.setState({ showProvisionDrawer: false, properties: {} })
-                  } else {
-                    props.toast(
-                      <Toast>
-                        <ToastTitle>{strings.Provision.ToastCreatedErrorTitle}</ToastTitle>
-                        <ToastBody>{strings.Provision.ToastCreatedErrorBody}</ToastBody>
-                      </Toast>,
-                      { intent: 'error' }
-                    )
-                  }
-                })
-              : setLevel2(true)
-          }}
-        >
-          {level2 ? strings.Provision.ProvisionButtonLabel : strings.Provision.NextButtonLabel}
-        </Button>
-      </DrawerFooter>
-    </OverlayDrawer>
+                        if (data.checked) {
+                          context.setColumn('privacy', strings.Provision.PrivacyFieldOptionPrivate)
+                        }
+                      }}
+                    />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='Eye'
+                    label={strings.Provision.PrivacyFieldLabel}
+                    description={strings.Provision.PrivacyFieldDescription}
+                  >
+                    <Dropdown
+                      defaultValue={context.column.get('privacy')}
+                      selectedOptions={[context.column.get('privacy')]}
+                      value={context.column.get('privacy')}
+                      defaultSelectedOptions={[context.column.get('privacy')]}
+                      onOptionSelect={(_, data) => {
+                        context.setColumn('privacy', data.optionValue)
+                      }}
+                      disabled={context.column.get('isConfidential')}
+                    >
+                      <Option value={strings.Provision.PrivacyFieldOptionPrivate}>
+                        {strings.Provision.PrivacyFieldOptionPrivate}
+                      </Option>
+                      <Option value={strings.Provision.PrivacyFieldOptionPublic}>
+                        {strings.Provision.PrivacyFieldOptionPublic}
+                      </Option>
+                    </Dropdown>
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='Guest'
+                    label={strings.Provision.ExternalSharingFieldLabel}
+                    description={strings.Provision.ExternalSharingFieldDescription}
+                  >
+                    <Switch
+                      checked={context.column.get('externalSharing')}
+                      value={context.column.get('externalSharing')}
+                      onChange={(_, data) => {
+                        context.setColumn('externalSharing', data.checked)
+
+                        if (!data.checked) {
+                          context.setColumn('guest', [])
+                        }
+                      }}
+                    />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='People'
+                    label={strings.Provision.GuestFieldLabel}
+                    description={strings.Provision.GuestFieldDescription}
+                    hidden={!context.column.get('externalSharing')}
+                  >
+                    <Guest />
+                  </FieldContainer>
+                  <FieldContainer
+                    iconName='LocalLanguage'
+                    label={strings.Provision.LanguageFieldLabel}
+                  >
+                    <Dropdown
+                      defaultValue={context.column.get('language')}
+                      defaultSelectedOptions={[context.column.get('language')]}
+                      disabled
+                    />
+                  </FieldContainer>
+                  <FieldContainer iconName='Clock' label={strings.Provision.TimeZoneFieldLabel}>
+                    <Dropdown
+                      defaultValue={context.column.get('timeZone')}
+                      defaultSelectedOptions={[context.column.get('timeZone')]}
+                      disabled
+                    />
+                  </FieldContainer>
+                  <FieldContainer iconName='Database' label={strings.Provision.HubSiteFieldLabel}>
+                    <Dropdown
+                      defaultValue={context.column.get('hubSiteTitle')}
+                      defaultSelectedOptions={[context.column.get('hubSiteTitle')]}
+                      disabled
+                    />
+                  </FieldContainer>
+                  <p className={styles.ignoreGap}>
+                    {strings.Provision.DrawerFooterDescriptionText}
+                  </p>
+                </div>
+              </DrawerBody>
+            )}
+          </div>
+          <DrawerFooter className={styles.footer}>
+            <Button appearance='subtle' disabled={!level2} onClick={() => setLevel2(false)}>
+              {strings.Provision.PreviousButtonLabel}
+            </Button>
+            <Button
+              appearance='primary'
+              disabled={level2 && isSaveDisabled}
+              onClick={() => {
+                level2
+                  ? onSave().then((response) => {
+                      if (response) {
+                        props.toast(
+                          <Toast appearance='inverted'>
+                            <ToastTitle>{strings.Provision.ToastCreatedTitle}</ToastTitle>
+                            <ToastBody>{strings.Provision.ToastCreatedBody}</ToastBody>
+                          </Toast>,
+                          { intent: 'success' }
+                        )
+                        context.setState({ showProvisionDrawer: false, properties: {} })
+                      } else {
+                        props.toast(
+                          <Toast appearance='inverted'>
+                            <ToastTitle>{strings.Provision.ToastCreatedErrorTitle}</ToastTitle>
+                            <ToastBody>{strings.Provision.ToastCreatedErrorBody}</ToastBody>
+                          </Toast>,
+                          { intent: 'error' }
+                        )
+                      }
+                    })
+                  : setLevel2(true)
+              }}
+            >
+              {level2 ? strings.Provision.ProvisionButtonLabel : strings.Provision.NextButtonLabel}
+            </Button>
+          </DrawerFooter>
+        </OverlayDrawer>
+      </FluentProvider>
+    </IdPrefixProvider>
   )
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/useProvisionDrawer.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/useProvisionDrawer.ts
index 362eff144..0aa23e55b 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/useProvisionDrawer.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionDrawer/useProvisionDrawer.ts
@@ -5,6 +5,7 @@ import { useMotionStyles } from './motionStyles'
 import { ProjectProvisionContext } from '../context'
 import { getGUID } from '@pnp/core'
 import { IProvisionRequestItem } from 'interfaces/IProvisionRequestItem'
+import { useId } from '@fluentui/react-components'
 
 /**
  * Component logic hook for `ProvisionDrawer`. This hook is responsible for
@@ -12,7 +13,6 @@ import { IProvisionRequestItem } from 'interfaces/IProvisionRequestItem'
  */
 export const useProvisionDrawer = () => {
   const context = useContext(ProjectProvisionContext)
-
   const [level2, setLevel2] = useState(false)
   const motionStyles = useMotionStyles()
   const toolbarBackIconMotion = useMotion<HTMLButtonElement>(level2)
@@ -20,11 +20,18 @@ export const useProvisionDrawer = () => {
   const level1Motion = useMotion<HTMLDivElement>(!level2)
   const level2Motion = useMotion<HTMLDivElement>(level2)
 
-  /**
-   * Saves the request to the Provision Requests list.
-   */
+  const useNamingConventions = context.state.settings.find(
+    (t) => t.title === 'UseNamingConventions'
+  )?.value
+
+  const namingConvention = useNamingConventions
+    ? context.state.settings.find((t) => t.title === 'NamingConvention')?.value
+    : context.state.types.find((t) => t.type === context.column.get('type'))?.namingConvention
+
+  const urlPrefix = `${context.props.webAbsoluteUrl.split('sites')[0]}sites/`
+  const aliasSuffix = '@' + context.props.pageContext.user.loginName.split('@')[1]
+
   const onSave = async (): Promise<boolean> => {
-    const namingConvention = context.state.settings.get('NamingConvention')
     const baseUrl = `${context.props.webAbsoluteUrl.split('sites')[0]}sites/`
 
     const requestItem: IProvisionRequestItem = {
@@ -32,7 +39,7 @@ export const useProvisionDrawer = () => {
       SpaceDisplayName: context.column.get('name'),
       Description: context.column.get('description'),
       BusinessJustification: context.column.get('justification'),
-      SpaceType: 'Prosjektområde',
+      SpaceType: context.column.get('typeTitle'),
       SpaceTypeInternal: context.column.get('type'),
       Teamify: context.column.get('teamify'),
       OwnersId: context.state.properties.owner,
@@ -52,8 +59,8 @@ export const useProvisionDrawer = () => {
       JoinHub: true,
       HubSiteTitle: context.props.pageContext.web.title,
       HubSite: context.props.pageContext.legacyPageContext.hubSiteId,
-      Prefix: namingConvention.prefixText,
-      Suffix: namingConvention.suffixText,
+      Prefix: namingConvention?.prefixText,
+      Suffix: namingConvention?.suffixText,
       Status: 'Submitted',
       Stage: 'Submitted',
       RequestKey: getGUID()
@@ -65,17 +72,15 @@ export const useProvisionDrawer = () => {
     )
   }
 
-  /**
-   * Save is disabled if the column name or field name is less than 2 characters.
-   */
+  const [siteExists, setSiteExists] = useState(false)
+
   const isSaveDisabled =
     context.column.get('name')?.length < 2 ||
     context.column.get('justification')?.length < 2 ||
-    context.column.get('owner')?.length < 1
+    context.column.get('owner')?.length < 1 ||
+    siteExists
 
-  const namingConvention = context.state.settings.get('NamingConvention')
-  const urlPrefix = `${context.props.webAbsoluteUrl.split('sites')[0]}sites/`
-  const aliasSuffix = '@' + context.props.pageContext.user.loginName.split('@')[1]
+  const fluentProviderId = useId('fp-provision-drawer')
 
   return {
     level2,
@@ -88,8 +93,11 @@ export const useProvisionDrawer = () => {
     context,
     onSave,
     isSaveDisabled,
+    siteExists,
+    setSiteExists,
     namingConvention,
     urlPrefix,
-    aliasSuffix
+    aliasSuffix,
+    fluentProviderId
   }
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/Commands.module.scss b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/Commands.module.scss
new file mode 100644
index 000000000..b2bd04c24
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/Commands.module.scss
@@ -0,0 +1,16 @@
+.commands {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  .search {
+    width: 100%;
+    max-width: 100%;
+
+    .searchBox {
+      box-shadow: var(--shadow2);
+      width: inherit;
+      max-width: inherit;
+    }
+  }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/Commands.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/Commands.tsx
new file mode 100644
index 000000000..72182cf8d
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/Commands.tsx
@@ -0,0 +1,34 @@
+import { SearchBox } from '@fluentui/react-components'
+import _ from 'lodash'
+import { Toolbar } from 'pp365-shared-library'
+import React, { FC, useContext } from 'react'
+import styles from './Commands.module.scss'
+import { useCommands } from './useCommands'
+import { ProjectProvisionContext } from 'components/ProjectProvision/context'
+import strings from 'PortfolioWebPartsStrings'
+
+export const Commands: FC = () => {
+  const context = useContext(ProjectProvisionContext)
+  const { toolbarItems } = useCommands()
+  return (
+    <div className={styles.commands}>
+      <div className={styles.search}>
+        <SearchBox
+          className={styles.searchBox}
+          disabled={context.state.loading || _.isEmpty(context.state.requests)}
+          value={context.state.searchTerm}
+          placeholder={strings.Provision.SettingsSearchLabel}
+          aria-label={strings.Provision.SettingsSearchLabel}
+          title={strings.Provision.SettingsSearchLabel}
+          size='large'
+          onChange={(_, { value }) => context.setState({ searchTerm: value })}
+          contentAfter={{
+            onClick: () => context.setState({ searchTerm: '' })
+          }}
+          appearance='filled-lighter'
+        />
+      </div>
+      <Toolbar items={toolbarItems} />
+    </div>
+  )
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/index.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/index.ts
new file mode 100644
index 000000000..aad501dd2
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/index.ts
@@ -0,0 +1 @@
+export * from './Commands'
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/useCommands.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/useCommands.tsx
new file mode 100644
index 000000000..ad16945f2
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/Commands/useCommands.tsx
@@ -0,0 +1,23 @@
+import { ListMenuItem } from 'pp365-shared-library'
+import { useContext } from 'react'
+import { ProjectProvisionContext } from 'components/ProjectProvision/context'
+import strings from 'PortfolioWebPartsStrings'
+
+/**
+ * Component logic hook for `Commands`. This hook is responsible for
+ * rendering the toolbar and handling its actions.
+ */
+export function useCommands() {
+  const context = useContext(ProjectProvisionContext)
+
+  const toolbarItems = [
+    new ListMenuItem(null, strings.Provision.UpdateLabel).setIcon('ArrowSync').setOnClick(() => {
+      context.setState({
+        isRefetching: true,
+        refetch: new Date().getTime()
+      })
+    })
+  ]
+
+  return { toolbarItems }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/ProvisionSettings.module.scss b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/ProvisionSettings.module.scss
new file mode 100644
index 000000000..854624982
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/ProvisionSettings.module.scss
@@ -0,0 +1,31 @@
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+.deletePopover {
+  display: flex;
+  gap: 8px;
+  max-width: 110px;
+  flex-direction: column;
+  align-items: center;
+}
+
+div[role="dialog"] {
+  min-width: 1140px;
+  min-height: 420px;
+  max-height: calc(100vh - 180px);
+  overflow: hidden;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .message {
+    display: flex;
+    justify-content: center;
+    padding: 60px;
+  }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/ProvisionSettings.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/ProvisionSettings.tsx
new file mode 100644
index 000000000..a5b9f9f79
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/ProvisionSettings.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react'
+import { Dismiss24Regular } from '@fluentui/react-icons'
+import {
+  DataGridBody,
+  DataGridRow,
+  DataGrid,
+  DataGridHeader,
+  DataGridHeaderCell,
+  DataGridCell,
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogSurface,
+  DialogTitle,
+  DialogTrigger,
+  FluentProvider,
+  IdPrefixProvider,
+  Spinner
+} from '@fluentui/react-components'
+import { useProvisionSettings } from './useProvisionSettings'
+import { customLightTheme } from 'pp365-shared-library'
+import { Commands } from './Commands'
+import styles from './ProvisionSettings.module.scss'
+import strings from 'PortfolioWebPartsStrings'
+
+export const ProvisionSettings = (props: { toast: any }) => {
+  const {
+    context,
+    settings,
+    columns,
+    columnSizingOptions,
+    defaultSortState,
+    getCellFocusMode,
+    fluentProviderId
+  } = useProvisionSettings(props.toast)
+
+  return (
+    <IdPrefixProvider value={fluentProviderId}>
+      <FluentProvider theme={customLightTheme}>
+        <Dialog
+          modalType='modal'
+          open={context.state.showProvisionSettings}
+          onOpenChange={(_, data) => {
+            context.setState({ showProvisionSettings: data.open })
+          }}
+        >
+          <DialogSurface>
+            <DialogBody style={{ maxHeight: 'calc(100vh - 236px)' }}>
+              <DialogTitle
+                action={
+                  <DialogTrigger action='close'>
+                    <Button appearance='subtle' title='Lukk' icon={<Dismiss24Regular />} />
+                  </DialogTrigger>
+                }
+              >
+                {strings.Provision.SettingsDialogTitle}
+              </DialogTitle>
+              <DialogContent className={styles.content}>
+                <div>{strings.Provision.SettingsDialogDescription}</div>
+                {context.state.isRefetching ? (
+                  <Spinner
+                    size='extra-tiny'
+                    label={strings.Provision.SettingsDialogSpinnerLabel}
+                    style={{ padding: 10, minHeight: '20px' }}
+                  />
+                ) : (
+                  <Commands />
+                )}
+                <DataGrid
+                  items={settings}
+                  columns={columns}
+                  defaultSortState={defaultSortState}
+                  sortable
+                  resizableColumns
+                  columnSizingOptions={columnSizingOptions}
+                  resizableColumnsOptions={{
+                    autoFitColumns: false
+                  }}
+                >
+                  <DataGridHeader>
+                    <DataGridRow>
+                      {({ renderHeaderCell }) => (
+                        <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+                      )}
+                    </DataGridRow>
+                  </DataGridHeader>
+                  {settings.length === 0 ? (
+                    <>
+                      {context.state.searchTerm ? (
+                        <div className={styles.message}>
+                          {strings.Provision.SettingsDialogNoSearchResultsLabel}
+                        </div>
+                      ) : (
+                        <div className={styles.message}>
+                          {strings.Provision.SettingsDialogNoResultsLabel}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <DataGridBody>
+                      {({ item, rowId }) => (
+                        <DataGridRow key={rowId}>
+                          {({ renderCell, columnId }) => (
+                            <DataGridCell focusMode={getCellFocusMode(columnId)}>
+                              {renderCell(item)}
+                            </DataGridCell>
+                          )}
+                        </DataGridRow>
+                      )}
+                    </DataGridBody>
+                  )}
+                </DataGrid>
+              </DialogContent>
+            </DialogBody>
+          </DialogSurface>
+        </Dialog>
+      </FluentProvider>
+    </IdPrefixProvider>
+  )
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/index.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/index.ts
new file mode 100644
index 000000000..03d9244a0
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/index.ts
@@ -0,0 +1,2 @@
+export * from './ProvisionSettings'
+export * from './types'
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/types.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/types.ts
new file mode 100644
index 000000000..f240c8ad0
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/types.ts
@@ -0,0 +1,6 @@
+export interface IRequestSettingsItem {
+  id: number
+  title: string
+  description: string
+  value: string
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/useColumns.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/useColumns.tsx
new file mode 100644
index 000000000..702ddb54a
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/useColumns.tsx
@@ -0,0 +1,105 @@
+/* eslint-disable no-console */
+import {
+  Button,
+  TableCellLayout,
+  TableColumnDefinition,
+  createTableColumn,
+  Text
+} from '@fluentui/react-components'
+import React, { useContext } from 'react'
+import styles from './ProvisionSettings.module.scss'
+import { ProjectProvisionContext } from '../context'
+import { getFluentIcon } from 'pp365-shared-library'
+import { IRequestSettingsItem } from './types'
+import strings from 'PortfolioWebPartsStrings'
+
+export const useColumns = (toast: any): TableColumnDefinition<IRequestSettingsItem>[] => {
+  const context = useContext(ProjectProvisionContext)
+
+  return [
+    createTableColumn<IRequestSettingsItem>({
+      columnId: 'title',
+      compare: (a, b) => {
+        if (a.title) {
+          return a.title.localeCompare(b.title)
+        }
+        return null
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.SettingLabel
+      },
+      renderCell: (setting) => {
+        return (
+          <TableCellLayout style={{ overflow: 'hidden' }}>
+            <Text truncate wrap={true}>
+              {setting.title}
+            </Text>
+          </TableCellLayout>
+        )
+      }
+    }),
+    createTableColumn<IRequestSettingsItem>({
+      columnId: 'description',
+      compare: (a, b) => {
+        if (a.description) {
+          return a.description.localeCompare(b.description)
+        }
+        return null
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.DescriptionLabel
+      },
+      renderCell: (setting) => {
+        return (
+          <TableCellLayout style={{ overflow: 'hidden' }}>
+            <Text truncate wrap={true}>
+              {setting.description}
+            </Text>
+          </TableCellLayout>
+        )
+      }
+    }),
+    createTableColumn<IRequestSettingsItem>({
+      columnId: 'value',
+      compare: (a, b) => {
+        if (a.value) {
+          return a.value.localeCompare(b.value)
+        }
+        return null
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.ValueLabel
+      },
+      renderCell: (setting) => {
+        if (
+          setting.title !== 'NamingConvention' &&
+          setting.title !== 'DefaultExternalSharingSetting'
+        )
+          return (
+            <TableCellLayout style={{ overflow: 'hidden' }}>
+              <Text truncate wrap={true}>
+                {setting.value}
+              </Text>
+            </TableCellLayout>
+          )
+      }
+    }),
+    createTableColumn<IRequestSettingsItem>({
+      columnId: 'actions',
+      renderHeaderCell: () => null,
+      renderCell: (setting) => {
+        return (
+          <div className={styles.actions}>
+            <Button
+              appearance='subtle'
+              onClick={() => console.log(`edit request ${setting.title}`)} // Add edit functionality for settings
+              disabled
+              title={strings.Provision.EditLabel}
+              icon={getFluentIcon('Edit')}
+            />
+          </div>
+        )
+      }
+    })
+  ]
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/useProvisionSettings.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/useProvisionSettings.ts
new file mode 100644
index 000000000..960ca7ee7
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionSettings/useProvisionSettings.ts
@@ -0,0 +1,85 @@
+import {
+  DataGridCellFocusMode,
+  SortDirection,
+  TableColumnId,
+  useId
+} from '@fluentui/react-components'
+import { useContext } from 'react'
+import { useColumns } from './useColumns'
+import _ from 'underscore'
+import { ProjectProvisionContext } from '../context'
+
+export function useProvisionSettings(toast: any) {
+  const context = useContext(ProjectProvisionContext)
+  const columns = useColumns(toast)
+
+  const columnSizingOptions = {
+    title: {
+      minWidth: 120,
+      defaultWidth: 200
+    },
+    description: {
+      minWidth: 220,
+      defaultWidth: 400
+    },
+    value: {
+      minWidth: 120,
+      defaultWidth: 340
+    },
+    actions: {
+      minWidth: 30,
+      defaultWidth: 30
+    }
+  }
+
+  const defaultSortState = { sortColumn: 'title', sortDirection: 'ascending' as SortDirection }
+
+  const getCellFocusMode = (columnId: TableColumnId): DataGridCellFocusMode => {
+    switch (columnId) {
+      case 'actions':
+        return 'group'
+      default:
+        return 'cell'
+    }
+  }
+
+  /**
+   * Filter settings based on the `filter` function from the `selectedVertical`
+   * and the `searchTerm`. Then sort the settings based on the `sort` state.
+   *
+   * @param settings - settings
+   */
+  function filterSettings(settings: any[]) {
+    return settings.filter((request) =>
+      _.any(Object.values(request), (value) => {
+        if (Array.isArray(value) && value.length > 0) {
+          return value.join(', ').toLowerCase().includes(context.state.searchTerm.toLowerCase())
+        } else if (typeof value === 'object' && value !== null) {
+          return Object.values(value)
+            .join(', ')
+            .toLowerCase()
+            .includes(context.state.searchTerm.toLowerCase())
+        } else if (typeof value === 'string') {
+          return value.toLowerCase().includes(context.state.searchTerm.toLowerCase())
+        }
+        return false
+      })
+    )
+  }
+
+  const settings = !context.state.loading
+    ? filterSettings(context.state.settings)
+    : context.state.settings
+
+  const fluentProviderId = useId('fp-provision-settings')
+
+  return {
+    context,
+    settings,
+    columns,
+    columnSizingOptions,
+    defaultSortState,
+    getCellFocusMode,
+    fluentProviderId
+  }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/Commands.module.scss b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/Commands.module.scss
new file mode 100644
index 000000000..b2bd04c24
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/Commands.module.scss
@@ -0,0 +1,16 @@
+.commands {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+
+  .search {
+    width: 100%;
+    max-width: 100%;
+
+    .searchBox {
+      box-shadow: var(--shadow2);
+      width: inherit;
+      max-width: inherit;
+    }
+  }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/Commands.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/Commands.tsx
new file mode 100644
index 000000000..13427be6d
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/Commands.tsx
@@ -0,0 +1,34 @@
+import { SearchBox } from '@fluentui/react-components'
+import _ from 'lodash'
+import { Toolbar } from 'pp365-shared-library'
+import React, { FC, useContext } from 'react'
+import styles from './Commands.module.scss'
+import { useCommands } from './useCommands'
+import { ProjectProvisionContext } from 'components/ProjectProvision/context'
+import strings from 'PortfolioWebPartsStrings'
+
+export const Commands: FC = () => {
+  const context = useContext(ProjectProvisionContext)
+  const { toolbarItems } = useCommands()
+  return (
+    <div className={styles.commands}>
+      <div className={styles.search}>
+        <SearchBox
+          className={styles.searchBox}
+          disabled={context.state.loading || _.isEmpty(context.state.requests)}
+          value={context.state.searchTerm}
+          placeholder={strings.Provision.StatusSearchLabel}
+          aria-label={strings.Provision.StatusSearchLabel}
+          title={strings.Provision.StatusSearchLabel}
+          size='large'
+          onChange={(_, { value }) => context.setState({ searchTerm: value })}
+          contentAfter={{
+            onClick: () => context.setState({ searchTerm: '' })
+          }}
+          appearance='filled-lighter'
+        />
+      </div>
+      <Toolbar items={toolbarItems} />
+    </div>
+  )
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/index.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/index.ts
new file mode 100644
index 000000000..aad501dd2
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/index.ts
@@ -0,0 +1 @@
+export * from './Commands'
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/useCommands.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/useCommands.tsx
new file mode 100644
index 000000000..a654d92fe
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/Commands/useCommands.tsx
@@ -0,0 +1,29 @@
+import { ListMenuItem } from 'pp365-shared-library'
+import strings from 'PortfolioWebPartsStrings'
+import { useContext } from 'react'
+import { ProjectProvisionContext } from 'components/ProjectProvision/context'
+
+/**
+ * Component logic hook for `Commands`. This hook is responsible for
+ * rendering the toolbar and handling its actions.
+ */
+export function useCommands() {
+  const context = useContext(ProjectProvisionContext)
+
+  const toolbarItems = [
+    new ListMenuItem(null, strings.FilterText)
+      .setIcon('Filter')
+      .setDisabled(true)
+      .setOnClick(() => {
+        // TODO: Add filter options for statuses
+      }),
+    new ListMenuItem(null, strings.Provision.UpdateLabel).setIcon('ArrowSync').setOnClick(() => {
+      context.setState({
+        isRefetching: true,
+        refetch: new Date().getTime()
+      })
+    })
+  ]
+
+  return { toolbarItems }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.module.scss b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.module.scss
index 467b8d8e9..854624982 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.module.scss
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.module.scss
@@ -3,6 +3,29 @@
   gap: 8px;
 }
 
+.deletePopover {
+  display: flex;
+  gap: 8px;
+  max-width: 110px;
+  flex-direction: column;
+  align-items: center;
+}
+
 div[role="dialog"] {
-  min-width: 1120px;
+  min-width: 1140px;
+  min-height: 420px;
+  max-height: calc(100vh - 180px);
+  overflow: hidden;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .message {
+    display: flex;
+    justify-content: center;
+    padding: 60px;
+  }
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.tsx
index 878e70705..d841760eb 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.tsx
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/ProvisionStatus.tsx
@@ -1,394 +1,121 @@
 import * as React from 'react'
+import { Dismiss24Regular } from '@fluentui/react-icons'
 import {
-  SparkleCircleRegular,
-  LightbulbCircleRegular,
-  ApprovalsAppRegular,
-  CheckmarkCircleRegular,
-  ErrorCircleRegular,
-  DeleteRegular,
-  EditRegular,
-  CopyAddRegular,
-  Dismiss24Regular
-} from '@fluentui/react-icons'
-import {
-  PresenceBadgeStatus,
-  Avatar,
   DataGridBody,
   DataGridRow,
   DataGrid,
   DataGridHeader,
   DataGridHeaderCell,
   DataGridCell,
-  TableCellLayout,
-  TableColumnDefinition,
-  createTableColumn,
-  TableRowId,
-  DataGridProps,
-  Tag,
-  tokens,
-  Link,
   Button,
-  DataGridCellFocusMode,
-  TableColumnId,
   Dialog,
   DialogBody,
   DialogContent,
   DialogSurface,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
+  FluentProvider,
+  IdPrefixProvider,
+  Spinner
 } from '@fluentui/react-components'
+import { useProvisionStatus } from './useProvisionStatus'
+import { customLightTheme } from 'pp365-shared-library'
+import { Commands } from './Commands'
 import styles from './ProvisionStatus.module.scss'
-import { useContext } from 'react'
-import { ProjectProvisionContext } from '../context'
-
-type OrderDateCell = {
-  label: string
-  timestamp: number
-}
+import strings from 'PortfolioWebPartsStrings'
 
-type StatusCell = {
-  label: string
-  icon: JSX.Element
-  type: 'success' | 'denied' | 'configuring' | 'info'
-}
-
-type ApproverCell = {
-  label: string
-  status: PresenceBadgeStatus
-}
-
-type Item = {
-  site: string
-  orderDate: OrderDateCell
-  approver: ApproverCell
-  approveStatus: StatusCell
-  status: StatusCell
-}
-
-const items: Item[] = [
-  {
-    site: 'Ny frisbee-golfbane i Grimstad',
-    orderDate: { label: '7 timer siden', timestamp: 1 },
-    approver: { label: 'Tarjei E. Ormestøyl', status: 'available' },
-    approveStatus: {
-      label: 'Avventer',
-      type: 'info',
-      icon: <ApprovalsAppRegular />
-    },
-    status: {
-      label: 'Ikke startet',
-      type: 'info',
-      icon: <LightbulbCircleRegular />
-    }
-  },
-  {
-    site: 'Nytt padelsenter i Grimstad',
-    orderDate: { label: 'Igår, 12:30', timestamp: 2 },
-    approver: { label: 'Jan Lindset', status: 'busy' },
-    approveStatus: {
-      label: 'Godkjent',
-      type: 'success',
-      icon: <CheckmarkCircleRegular />
-    },
-    status: {
-      label: 'Konfigurerer',
-      type: 'configuring',
-      icon: <SparkleCircleRegular />
-    }
-  },
-  {
-    site: 'Ny svømmehall i Grimstad',
-    orderDate: { label: 'Igår, 09:45', timestamp: 2 },
-    approver: { label: 'Stian Grepperud', status: 'away' },
-    approveStatus: {
-      label: 'Avslått',
-      type: 'denied',
-      icon: <ErrorCircleRegular />
-    },
-    status: {
-      label: 'Avsluttet',
-      type: 'denied',
-      icon: <ErrorCircleRegular />
-    }
-  },
-  {
-    site: 'Dampskipsbrygga i Grimstad',
-    orderDate: { label: 'Tirsdag, 09:30', timestamp: 3 },
-    approver: { label: 'Sindre Furulund', status: 'offline' },
-    approveStatus: {
-      label: 'Godkjent',
-      type: 'success',
-      icon: <CheckmarkCircleRegular />
-    },
-    status: {
-      label: 'Klar til bruk',
-      type: 'success',
-      icon: <CheckmarkCircleRegular />
-    }
-  }
-]
-
-const columns: TableColumnDefinition<Item>[] = [
-  createTableColumn<Item>({
-    columnId: 'site',
-    compare: (a, b) => {
-      return a.site.localeCompare(b.site)
-    },
-    renderHeaderCell: () => {
-      return 'Bestilling'
-    },
-    renderCell: (item) => {
-      return (
-        <TableCellLayout>
-          {item.status.type === 'success' ? (
-            <Link
-              href='https://puzzlepart.sharepoint.com/sites/Grimstadpadelsenter-Solcelleanlegg'
-              onClick={() => {
-                /* close dialog */
-              }}
-            >
-              {item.site}
-            </Link>
-          ) : (
-            item.site
-          )}
-        </TableCellLayout>
-      )
-    }
-  }),
-  createTableColumn<Item>({
-    columnId: 'orderDate',
-    compare: (a, b) => {
-      return a.orderDate.timestamp - b.orderDate.timestamp
-    },
-    renderHeaderCell: () => {
-      return 'Dato'
-    },
-
-    renderCell: (item) => {
-      return item.orderDate.label
-    }
-  }),
-  createTableColumn<Item>({
-    columnId: 'approver',
-    compare: (a, b) => {
-      return a.approver.label.localeCompare(b.approver.label)
-    },
-    renderHeaderCell: () => {
-      return 'Godkjenner'
-    },
-    renderCell: (item) => {
-      return (
-        <TableCellLayout
-          media={
-            <Avatar
-              aria-label={item.approver.label}
-              name={item.approver.label}
-              badge={{ status: item.approver.status }}
-            />
-          }
-        >
-          {item.approver.label}
-        </TableCellLayout>
-      )
-    }
-  }),
-  createTableColumn<Item>({
-    columnId: 'approveStatus',
-    compare: (a, b) => {
-      return a.approveStatus.label.localeCompare(b.approveStatus.label)
-    },
-    renderHeaderCell: () => {
-      return 'Godkjenning'
-    },
-    renderCell: (item) => {
-      return (
-        <TableCellLayout>
-          <Tag
-            icon={item.approveStatus.icon}
-            style={{
-              backgroundColor:
-                item.approveStatus.type === 'success'
-                  ? tokens.colorStatusSuccessBackground2
-                  : item.approveStatus.type === 'denied'
-                  ? tokens.colorStatusDangerBackground2
-                  : item.approveStatus.type === 'configuring'
-                  ? tokens.colorStatusWarningBackground2
-                  : tokens.colorNeutralBackground6
-            }}
-          >
-            {item.approveStatus.label}
-          </Tag>
-        </TableCellLayout>
-      )
-    }
-  }),
-  createTableColumn<Item>({
-    columnId: 'status',
-    compare: (a, b) => {
-      return a.status.label.localeCompare(b.status.label)
-    },
-    renderHeaderCell: () => {
-      return 'Status'
-    },
-    renderCell: (item) => {
-      return (
-        <TableCellLayout>
-          <Tag
-            icon={item.status.icon}
-            style={{
-              backgroundColor:
-                item.status.type === 'success'
-                  ? tokens.colorStatusSuccessBackground2
-                  : item.status.type === 'denied'
-                  ? tokens.colorStatusDangerBackground2
-                  : item.status.type === 'configuring'
-                  ? tokens.colorStatusWarningBackground2
-                  : tokens.colorNeutralBackground6
-            }}
-          >
-            {item.status.label}
-          </Tag>
-        </TableCellLayout>
-      )
-    }
-  }),
-  createTableColumn<Item>({
-    columnId: 'actions',
-    renderHeaderCell: () => {
-      return 'Actions'
-    },
-    renderCell: () => {
-      return (
-        <div className={styles.actions}>
-          <Button aria-label='Dupliser' icon={<CopyAddRegular />} />
-          <Button aria-label='Rediger' icon={<EditRegular />} />
-          <Button aria-label='Fjern' icon={<DeleteRegular />} />
-        </div>
-      )
-    }
-  })
-]
-
-export const ProvisionStatus = () => {
-  const context = useContext(ProjectProvisionContext)
-
-  const [selectedRows, setSelectedRows] = React.useState(new Set<TableRowId>([]))
-  const onSelectionChange: DataGridProps['onSelectionChange'] = (e, data) => {
-    setSelectedRows(data.selectedItems)
-  }
-
-  const columnSizingOptions = {
-    site: {
-      minWidth: 120,
-      defaultWidth: 240
-    },
-    orderDate: {
-      minWidth: 80,
-      defaultWidth: 120
-    },
-    approver: {
-      defaultWidth: 180,
-      minWidth: 120
-    },
-    approveStatus: {
-      minWidth: 80,
-      defaultWidth: 120
-    },
-    status: {
-      minWidth: 80,
-      defaultWidth: 120
-    },
-    actions: {
-      minWidth: 120,
-      defaultWidth: 120
-    }
-  }
-
-  const defaultSortState = React.useMemo<Parameters<NonNullable<DataGridProps['onSortChange']>>[1]>(
-    () => ({ sortColumn: 'orderDate', sortDirection: 'ascending' }),
-    []
-  )
-
-  const getCellFocusMode = (columnId: TableColumnId): DataGridCellFocusMode => {
-    switch (columnId) {
-      case 'actions':
-        return 'group'
-      default:
-        return 'cell'
-    }
-  }
+export const ProvisionStatus = (props: { toast: any }) => {
+  const {
+    context,
+    requests,
+    columns,
+    columnSizingOptions,
+    defaultSortState,
+    getCellFocusMode,
+    fluentProviderId
+  } = useProvisionStatus(props.toast)
 
   return (
-    <Dialog
-      modalType='modal'
-      open={context.state.showProvisionStatus}
-      onOpenChange={(_, data) => {
-        context.setState({ showProvisionStatus: data.open })
-      }}
-    >
-      <DialogSurface>
-        <DialogBody>
-          <DialogTitle
-            action={
-              <DialogTrigger action='close'>
-                <Button appearance='subtle' aria-label='close' icon={<Dismiss24Regular />} />
-              </DialogTrigger>
-            }
-          >
-            Mine bestillinger
-          </DialogTitle>
-          <DialogContent>
-            <p>
-              Her kan du se status på dine bestillinger, hvem som er godkjenner og
-              godkjenningsstatus. Dersom en bestilling blir avslått, kan du velge å bestille på nytt
-              basert på en tidligere bestilling eller fjerne bestillingen fra listen.
-            </p>
-            <DataGrid
-              items={items}
-              columns={columns}
-              selectionMode='multiselect'
-              selectedItems={selectedRows}
-              onSelectionChange={onSelectionChange}
-              defaultSortState={defaultSortState}
-              sortable
-              resizableColumns
-              columnSizingOptions={columnSizingOptions}
-              resizableColumnsOptions={{
-                autoFitColumns: false
-              }}
-            >
-              <DataGridHeader>
-                <DataGridRow
-                  selectionCell={{
-                    checkboxIndicator: { 'aria-label': 'Select all rows' }
+    <IdPrefixProvider value={fluentProviderId}>
+      <FluentProvider theme={customLightTheme}>
+        <Dialog
+          modalType='modal'
+          open={context.state.showProvisionStatus}
+          onOpenChange={(_, data) => {
+            context.setState({ showProvisionStatus: data.open })
+          }}
+        >
+          <DialogSurface>
+            <DialogBody style={{ maxHeight: 'calc(100vh - 236px)' }}>
+              <DialogTitle
+                action={
+                  <DialogTrigger action='close'>
+                    <Button appearance='subtle' title='Lukk' icon={<Dismiss24Regular />} />
+                  </DialogTrigger>
+                }
+              >
+                {strings.Provision.StatusDialogTitle}
+              </DialogTitle>
+              <DialogContent className={styles.content}>
+                <div>{strings.Provision.StatusDialogDescription}</div>
+                {context.state.isRefetching ? (
+                  <Spinner
+                    size='extra-tiny'
+                    label={strings.Provision.StatusDialogSpinnerLabel}
+                    style={{ padding: 10 }}
+                  />
+                ) : (
+                  <Commands />
+                )}
+                <DataGrid
+                  items={requests}
+                  columns={columns}
+                  defaultSortState={defaultSortState}
+                  sortable
+                  resizableColumns
+                  columnSizingOptions={columnSizingOptions}
+                  resizableColumnsOptions={{
+                    autoFitColumns: false
                   }}
                 >
-                  {({ renderHeaderCell }) => (
-                    <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+                  <DataGridHeader>
+                    <DataGridRow>
+                      {({ renderHeaderCell }) => (
+                        <DataGridHeaderCell>{renderHeaderCell()}</DataGridHeaderCell>
+                      )}
+                    </DataGridRow>
+                  </DataGridHeader>
+                  {requests.length === 0 ? (
+                    <>
+                      {context.state.searchTerm ? (
+                        <div className={styles.message}>
+                          {strings.Provision.StatusDialogNoSearchResultsLabel}
+                        </div>
+                      ) : (
+                        <div className={styles.message}>
+                          {strings.Provision.StatusDialogNoResultsLabel}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <DataGridBody>
+                      {({ item, rowId }) => (
+                        <DataGridRow key={rowId}>
+                          {({ renderCell, columnId }) => (
+                            <DataGridCell focusMode={getCellFocusMode(columnId)}>
+                              {renderCell(item)}
+                            </DataGridCell>
+                          )}
+                        </DataGridRow>
+                      )}
+                    </DataGridBody>
                   )}
-                </DataGridRow>
-              </DataGridHeader>
-              <DataGridBody<Item>>
-                {({ item, rowId }) => (
-                  <DataGridRow<Item>
-                    key={rowId}
-                    selectionCell={{
-                      checkboxIndicator: { 'aria-label': 'Select row' }
-                    }}
-                  >
-                    {({ renderCell, columnId }) => (
-                      <DataGridCell focusMode={getCellFocusMode(columnId)}>
-                        {renderCell(item)}
-                      </DataGridCell>
-                    )}
-                  </DataGridRow>
-                )}
-              </DataGridBody>
-            </DataGrid>
-          </DialogContent>
-        </DialogBody>
-      </DialogSurface>
-    </Dialog>
+                </DataGrid>
+              </DialogContent>
+            </DialogBody>
+          </DialogSurface>
+        </Dialog>
+      </FluentProvider>
+    </IdPrefixProvider>
   )
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/index.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/index.ts
index 82140c641..747fe8bb3 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/index.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/index.ts
@@ -1 +1,2 @@
 export * from './ProvisionStatus'
+export * from './types'
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/types.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/types.ts
new file mode 100644
index 000000000..83c7cada6
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/types.ts
@@ -0,0 +1,22 @@
+export interface IRequestItem {
+  id: number
+  displayName: string
+  title: string
+  siteUrl: string
+  created: Date
+  status: string
+  type: string
+}
+
+export enum Status {
+  NotSubmitted = 'Not Submitted',
+  Submitted = 'Submitted',
+  Approved = 'Approved',
+  Rejected = 'Rejected',
+  PendingApproval = 'Pending Approval',
+  SpaceCreationFailed = 'Space Creation Failed',
+  SpaceAlreadyExists = 'Space Already Exists',
+  TeamRequested = 'Team Requested',
+  SpaceCreation = 'Space Creation',
+  SpaceCreated = 'Space Created'
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/useColumns.tsx b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/useColumns.tsx
new file mode 100644
index 000000000..cd9480784
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/useColumns.tsx
@@ -0,0 +1,261 @@
+/* eslint-disable no-console */
+import {
+  Button,
+  Link,
+  TableCellLayout,
+  TableColumnDefinition,
+  Tag,
+  createTableColumn,
+  tokens,
+  Text,
+  Popover,
+  PopoverSurface,
+  PopoverTrigger,
+  Toast,
+  ToastTitle,
+  ToastBody
+} from '@fluentui/react-components'
+import React, { useContext } from 'react'
+import {
+  SparkleCircleRegular,
+  LightbulbCircleRegular,
+  CheckmarkCircleRegular,
+  ErrorCircleRegular,
+  PeopleTeamRegular,
+  ArrowClockwiseDashesRegular,
+  ApprovalsAppRegular,
+  HourglassHalfRegular
+} from '@fluentui/react-icons'
+import styles from './ProvisionStatus.module.scss'
+import { ProjectProvisionContext } from '../context'
+import { formatDate, getFluentIcon } from 'pp365-shared-library'
+import { IRequestItem, Status } from './types'
+import strings from 'PortfolioWebPartsStrings'
+import { format } from '@fluentui/react'
+
+export const useColumns = (toast: any): TableColumnDefinition<IRequestItem>[] => {
+  const context = useContext(ProjectProvisionContext)
+  return [
+    createTableColumn<IRequestItem>({
+      columnId: 'displayName',
+      compare: (a, b) => {
+        if (a.displayName) {
+          return a.displayName.localeCompare(b.displayName)
+        }
+        return null
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.SiteNameFieldLabel
+      },
+      renderCell: (request) => {
+        return (
+          <TableCellLayout style={{ overflow: 'hidden' }}>
+            {request.status === Status.SpaceCreated ? (
+              <Link
+                href={request.siteUrl}
+                onClick={() => {
+                  context.setState({ showProvisionStatus: false })
+                }}
+              >
+                <Text truncate wrap={true}>
+                  {request.displayName}
+                </Text>
+              </Link>
+            ) : (
+              <Text truncate wrap={true}>
+                {request.displayName}
+              </Text>
+            )}
+          </TableCellLayout>
+        )
+      }
+    }),
+    createTableColumn<IRequestItem>({
+      columnId: 'type',
+      compare: (a, b) => {
+        return a.type.localeCompare(b.type)
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.SiteTypeFieldLabel
+      },
+      renderCell: (request) => {
+        return (
+          <TableCellLayout style={{ overflow: 'hidden' }}>
+            <Text truncate wrap={true}>
+              {request.type}
+            </Text>
+          </TableCellLayout>
+        )
+      }
+    }),
+    createTableColumn<IRequestItem>({
+      columnId: 'status',
+      compare: (a, b) => {
+        return a.status.localeCompare(b.status)
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.StatusLabel
+      },
+      renderCell: (request) => {
+        let statusIcon, statusColor, statusText
+
+        switch (request.status) {
+          case Status.Submitted:
+            statusIcon = <SparkleCircleRegular />
+            statusColor = tokens.colorStatusWarningBackground2
+            statusText = strings.Provision.SubmittedLabel
+            break
+          case Status.Approved:
+            statusIcon = <ApprovalsAppRegular />
+            statusColor = tokens.colorStatusSuccessBackground2
+            statusText = strings.Provision.ApprovedLabel
+            break
+          case Status.Rejected:
+            statusIcon = <ErrorCircleRegular />
+            statusColor = tokens.colorStatusDangerBackground2
+            statusText = strings.Provision.RejectedLabel
+            break
+          case Status.PendingApproval:
+            statusIcon = <ArrowClockwiseDashesRegular />
+            statusColor = tokens.colorStatusWarningBackground2
+            statusText = strings.Provision.PendingApprovalLabel
+            break
+          case Status.SpaceCreationFailed:
+            statusIcon = <ErrorCircleRegular />
+            statusColor = tokens.colorStatusDangerBackground2
+            statusText = strings.Provision.SpaceCreationFailedLabel
+            break
+          case Status.SpaceAlreadyExists:
+            statusIcon = <ErrorCircleRegular />
+            statusColor = tokens.colorStatusDangerBackground2
+            statusText = strings.Provision.SpaceAlreadyExistsLabel
+            break
+          case Status.TeamRequested:
+            statusIcon = <PeopleTeamRegular />
+            statusColor = tokens.colorStatusWarningBackground2
+            statusText = strings.Provision.TeamRequestedLabel
+            break
+          case Status.SpaceCreation:
+            statusIcon = <HourglassHalfRegular />
+            statusColor = tokens.colorStatusWarningBackground2
+            statusText = strings.Provision.SpaceCreationLabel
+            break
+          case Status.SpaceCreated:
+            statusIcon = <CheckmarkCircleRegular />
+            statusColor = tokens.colorStatusSuccessBackground2
+            statusText = strings.Provision.SpaceCreatedLabel
+            break
+          default:
+            statusIcon = <LightbulbCircleRegular />
+            statusColor = tokens.colorNeutralBackground6
+            statusText = strings.Provision.NotSubmittedLabel
+            break
+        }
+
+        return (
+          <TableCellLayout>
+            <Tag
+              icon={statusIcon}
+              style={{
+                backgroundColor: statusColor
+              }}
+            >
+              {statusText}
+            </Tag>
+          </TableCellLayout>
+        )
+      }
+    }),
+    createTableColumn<IRequestItem>({
+      columnId: 'created',
+      compare: (a, b) => {
+        return new Date(a.created).getTime() - new Date(b.created).getTime()
+      },
+      renderHeaderCell: () => {
+        return strings.Provision.SubmittedDateLabel
+      },
+      renderCell: (request) => {
+        return formatDate(request.created)
+      }
+    }),
+    createTableColumn<IRequestItem>({
+      columnId: 'actions',
+      renderHeaderCell: () => null,
+      renderCell: (request) => {
+        const canDelete =
+          request.status === Status.NotSubmitted ||
+          request.status === Status.SpaceCreationFailed ||
+          request.status === Status.SpaceAlreadyExists
+
+        return (
+          <div className={styles.actions}>
+            {canDelete && (
+              <Popover>
+                <PopoverTrigger disableButtonEnhancement>
+                  <Button
+                    appearance='subtle'
+                    title={strings.Provision.DeleteSubmissionLabel}
+                    icon={getFluentIcon('Delete')}
+                  />
+                </PopoverTrigger>
+                <PopoverSurface tabIndex={-1}>
+                  <div className={styles.deletePopover}>
+                    <div>{strings.Provision.DeleteSubmissionConfirmationLabel}</div>
+                    <div>
+                      <Button
+                        appearance='subtle'
+                        onClick={() => {
+                          context.props.dataAdapter
+                            .deleteProvisionRequest(request.id, context.props.provisionUrl)
+                            .then((response) => {
+                              if (response) {
+                                context.setState({
+                                  isRefetching: true,
+                                  refetch: new Date().getTime()
+                                })
+                                toast(
+                                  <Toast appearance='inverted'>
+                                    <ToastTitle>
+                                      {strings.Provision.DeletedSubmissionToastTitle}
+                                    </ToastTitle>
+                                    <ToastBody>
+                                      {format(
+                                        strings.Provision.DeletedSubmissionToastBody,
+                                        request.displayName
+                                      )}
+                                    </ToastBody>
+                                  </Toast>,
+                                  { intent: 'success' }
+                                )
+                                context.setState({ showProvisionDrawer: false, properties: {} })
+                              } else {
+                                toast(
+                                  <Toast appearance='inverted'>
+                                    <ToastTitle>
+                                      {strings.Provision.DeletedSubmissionErrorToastTitle}
+                                    </ToastTitle>
+                                    <ToastBody>
+                                      {strings.Provision.DeletedSubmissionErrorToastBody}
+                                    </ToastBody>
+                                  </Toast>,
+                                  { intent: 'error' }
+                                )
+                              }
+                            })
+                        }}
+                        title={strings.Provision.DeleteSubmissionLabel}
+                        icon={getFluentIcon('Delete')}
+                      >
+                        {strings.Provision.DeleteLabel}
+                      </Button>
+                    </div>
+                  </div>
+                </PopoverSurface>
+              </Popover>
+            )}
+          </div>
+        )
+      }
+    })
+  ]
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/useProvisionStatus.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/useProvisionStatus.ts
new file mode 100644
index 000000000..161c9b1a3
--- /dev/null
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/ProvisionStatus/useProvisionStatus.ts
@@ -0,0 +1,89 @@
+import {
+  DataGridCellFocusMode,
+  SortDirection,
+  TableColumnId,
+  useId
+} from '@fluentui/react-components'
+import { useContext } from 'react'
+import { useColumns } from './useColumns'
+import _ from 'underscore'
+import { ProjectProvisionContext } from '../context'
+
+export function useProvisionStatus(toast: any) {
+  const context = useContext(ProjectProvisionContext)
+  const columns = useColumns(toast)
+
+  const columnSizingOptions = {
+    displayName: {
+      minWidth: 220,
+      defaultWidth: 340
+    },
+    created: {
+      minWidth: 80,
+      defaultWidth: 140
+    },
+    status: {
+      minWidth: 220,
+      defaultWidth: 220
+    },
+    type: {
+      minWidth: 120,
+      defaultWidth: 180
+    },
+    actions: {
+      minWidth: 60,
+      defaultWidth: 60
+    }
+  }
+
+  const defaultSortState = { sortColumn: 'created', sortDirection: 'descending' as SortDirection }
+
+  const getCellFocusMode = (columnId: TableColumnId): DataGridCellFocusMode => {
+    switch (columnId) {
+      case 'actions':
+        return 'group'
+      default:
+        return 'cell'
+    }
+  }
+
+  /**
+   * Filter requests based on the `filter` function from the `selectedVertical`
+   * and the `searchTerm`. Then sort the requests based on the `sort` state.
+   *
+   * @param requests - requests
+   */
+  function filterRequests(requests: any[]) {
+    return requests.filter((request) =>
+      _.any(Object.values(request), (value) => {
+        if (Array.isArray(value) && value.length > 0) {
+          return value.join(', ').toLowerCase().includes(context.state.searchTerm.toLowerCase())
+        } else if (typeof value === 'object' && value !== null) {
+          return Object.values(value)
+            .join(', ')
+            .toLowerCase()
+            .includes(context.state.searchTerm.toLowerCase())
+        } else if (typeof value === 'string') {
+          return value.toLowerCase().includes(context.state.searchTerm.toLowerCase())
+        }
+        return false
+      })
+    )
+  }
+
+  const requests = !context.state.loading
+    ? filterRequests(context.state.requests)
+    : context.state.requests
+
+  const fluentProviderId = useId('fp-provision-status')
+
+  return {
+    context,
+    requests,
+    columns,
+    columnSizingOptions,
+    defaultSortState,
+    getCellFocusMode,
+    fluentProviderId
+  }
+}
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/types.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/types.ts
index 9afc7360a..0e1f869d3 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/types.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/types.ts
@@ -8,7 +8,12 @@ export interface IProjectProvisionState {
   loading: boolean
   showProvisionDrawer: boolean
   showProvisionStatus: boolean
-  settings: Map<string, any>
+  showProvisionSettings: boolean
+  settings: any[]
   types?: Record<string, any>
+  requests?: any[]
   properties: Record<string, any>
+  refetch?: number
+  isRefetching?: boolean
+  searchTerm?: string
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useEditableColumn.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useEditableColumn.ts
index f4799f8dd..9fed84e6f 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useEditableColumn.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useEditableColumn.ts
@@ -11,8 +11,19 @@ export function useEditableColumn(
   state: IProjectProvisionState,
   setState: (newState: Partial<IProjectProvisionState>) => void
 ) {
+  const defaultType =
+    !state.loading &&
+    state.types
+      .sort((a, b) => a.sortOrder - b.sortOrder)
+      .filter(
+        (type) =>
+          !type.visibleTo ||
+          type.visibleTo?.some((user) => user?.EMail?.includes(props?.pageContext?.user?.loginName))
+      )[0]
+
   const initialColumn = new Map<string, any>([
     ['type', 'Project'],
+    ['typeTitle', 'Prosjektområde'],
     ['name', ''],
     ['description', ''],
     ['justification', ''],
@@ -33,10 +44,6 @@ export function useEditableColumn(
 
   const [column, $setColumn] = useState<Map<string, any>>(initialColumn)
 
-  useEffect(() => {
-    $setColumn(initialColumn)
-  }, [])
-
   /**
    * Transform value for the field returning the transformed value.
    *
@@ -100,7 +107,7 @@ export function useEditableColumn(
     const transformedValue = await transformValue(value, key)
 
     if (key === 'name') {
-      const alias = value.replace(/[^a-zA-Z0-9-_ÆØÅæøå ]/g, '')
+      const alias = value.replace(/ /g, '').replace(/[^a-z-A-Z0-9-]/g, '')
       $setColumn((prev) => {
         const newColumn = new Map(prev)
         newColumn.set('alias', alias)
@@ -123,6 +130,51 @@ export function useEditableColumn(
     setState({ properties: {} })
   }
 
+  useEffect(() => {
+    $setColumn((prev) => {
+      const newColumn = new Map(prev)
+      newColumn.set('type', defaultType.type)
+      newColumn.set('typeTitle', defaultType.title)
+
+      setState({
+        properties: {
+          ...state.properties,
+          type: defaultType.type
+        }
+      })
+      return newColumn
+    })
+  }, [state.loading])
+
+  useEffect(() => {
+    const defaultConfidentialData =
+      !state.loading &&
+      state.types.find((t) => t.type === state.properties.type || defaultType.type)
+        ?.defaultConfidentialData
+
+    const defaultVisibility =
+      !state.loading &&
+      state.types.find((t) => t.type === state.properties.type || defaultType.type)
+        ?.defaultVisibility === 'Public'
+        ? strings.Provision.PrivacyFieldOptionPublic
+        : strings.Provision.PrivacyFieldOptionPrivate
+
+    $setColumn((prev) => {
+      const newColumns = new Map(prev)
+      newColumns.set('isConfidential', defaultConfidentialData)
+      newColumns.set('privacy', defaultVisibility)
+
+      setState({
+        properties: {
+          ...state.properties,
+          isConfidential: defaultConfidentialData,
+          privacy: defaultVisibility
+        }
+      })
+      return newColumns
+    })
+  }, [state.properties.type])
+
   return {
     column,
     setColumn,
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvision.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvision.ts
index 312945ace..cb5cbc9a6 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvision.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvision.ts
@@ -3,6 +3,7 @@ import { useProjectProvisionState } from './useProjectProvisionState'
 import { useProjectProvisionDataFetch } from './useProjectProvisionDataFetch'
 import { IProjectProvisionProps } from './types'
 import { useEditableColumn } from './useEditableColumn'
+import { useId } from '@fluentui/react-components'
 
 /**
  * Component logic hook for `ProjectProvision`. This hook is responsible for
@@ -12,14 +13,20 @@ import { useEditableColumn } from './useEditableColumn'
  */
 export const useProjectProvision = (props: IProjectProvisionProps) => {
   const { state, setState } = useProjectProvisionState()
+
+  useProjectProvisionDataFetch(props, state.refetch, setState)
+
   const { column, setColumn } = useEditableColumn(props, state, setState)
 
-  useProjectProvisionDataFetch(props, setState)
+  const toasterId = useId('toaster')
+  const fluentProviderId = useId('fp-project-provision')
 
   return {
     state,
     setState,
     column,
-    setColumn
+    setColumn,
+    toasterId,
+    fluentProviderId
   }
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionDataFetch.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionDataFetch.ts
index 36ab50210..5fb236c51 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionDataFetch.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionDataFetch.ts
@@ -6,23 +6,27 @@ import { IProjectProvisionProps, IProjectProvisionState } from './types'
  * fetching data and setting state.
  *
  * @param props Props
- * @param verticals Verticals
+ * @param refetch Timestamp for refetch. Changes to this variable refetches the data in `useEffect`
  * @param setState Set state callback
  */
 export function useProjectProvisionDataFetch(
   props: IProjectProvisionProps,
+  refetch: number,
   setState: (newState: Partial<IProjectProvisionState>) => void
 ) {
   useEffect(() => {
     Promise.all([
       props.dataAdapter.getProvisionRequestSettings(props.provisionUrl),
-      props.dataAdapter.getProvisionTypes(props.provisionUrl)
-    ]).then(([settings, types]) => {
+      props.dataAdapter.getProvisionTypes(props.provisionUrl),
+      props.dataAdapter.fetchProvisionRequests(props.pageContext.user.email, props.provisionUrl)
+    ]).then(([settings, types, requests]) => {
       setState({
         settings,
         types,
-        loading: false
+        requests,
+        loading: false,
+        isRefetching: false
       })
     })
-  }, [])
+  }, [refetch])
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionState.ts b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionState.ts
index fc496c22f..d00d36739 100644
--- a/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionState.ts
+++ b/SharePointFramework/PortfolioWebParts/src/components/ProjectProvision/useProjectProvisionState.ts
@@ -12,11 +12,14 @@ export function useProjectProvisionState() {
     loading: true,
     showProvisionDrawer: false,
     showProvisionStatus: false,
-    settings: new Map<string, any>(),
+    showProvisionSettings: false,
+    settings: [],
     types: {},
-    properties: {
-      type: 'Project'
-    }
+    requests: [],
+    properties: {},
+    refetch: new Date().getTime(),
+    searchTerm: '',
+    isRefetching: false
   })
 
   /**
diff --git a/SharePointFramework/PortfolioWebParts/src/data/index.ts b/SharePointFramework/PortfolioWebParts/src/data/index.ts
index 5f487dbf9..810129198 100644
--- a/SharePointFramework/PortfolioWebParts/src/data/index.ts
+++ b/SharePointFramework/PortfolioWebParts/src/data/index.ts
@@ -626,7 +626,7 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
   }
 
   /**
-   * Checks if the current is in the specified SharePoint group.
+   * Checks if the current user is in the specified SharePoint group.
    *
    * @param groupName Group name
    */
@@ -810,8 +810,7 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
     return items.filter(({ secondaryText }) => !_.findWhere(selectedItems, { secondaryText }))
   }
 
-  public async getProvisionRequestSettings(provisionUrl: string): Promise<Map<string, string>> {
-    const intialMap = new Map<string, string>()
+  public async getProvisionRequestSettings(provisionUrl: string): Promise<any[]> {
     try {
       const provisionSite = Web([this._sp.web, provisionUrl])
       const settingsList = provisionSite.lists.getByTitle('Provisioning Request Settings')
@@ -830,8 +829,9 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
           'ExternalSharingSetting'
         )
         .using(DefaultCaching)()
-      return spItems.reduce((acc, item) => {
-        let value = item.Value
+
+      return spItems.map((item) => {
+        let value = item.Value === 'true' ? true : item.Value === 'false' ? false : item.Value
         if (item.Title === 'NamingConvention') {
           value = {
             value: item.Value,
@@ -848,11 +848,15 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
             externalSharingSetting: item.ExternalSharingSetting
           }
         }
-        acc.set(item.Title, value)
-        return acc
-      }, intialMap)
+
+        return {
+          title: item.Title,
+          value,
+          description: item.Description
+        }
+      })
     } catch (error) {
-      return intialMap
+      return []
     }
   }
 
@@ -861,18 +865,47 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
       const provisionSite = Web([this._sp.web, provisionUrl])
       const typesList = provisionSite.lists.getByTitle('Provisioning Types')
       const spItems = await typesList.items
-        .select('Id', 'Title', 'SortOrder', 'Description', 'Allowed', 'Image', 'InternalTitle')
+        .select(
+          'Id',
+          'Title',
+          'SortOrder',
+          'Description',
+          'Allowed',
+          'Image',
+          'InternalTitle',
+          'PrefixText',
+          'PrefixUseAttribute',
+          'PrefixAttribute',
+          'SuffixText',
+          'SuffixUseAttribute',
+          'SuffixAttribute',
+          'VisibleTo/EMail',
+          'DefaultVisibility',
+          'DefaultConfidentialData'
+        )
+        .expand('VisibleTo')
         .using(DefaultCaching)()
       return spItems
         .filter((item) => item.Allowed)
         .sort((a, b) => (a.SortOrder > b.SortOrder ? 1 : -1))
         .map((item) => {
           return {
-            title: item.Title,
             order: item.SortOrder,
+            title: item.Title,
             description: item.Description,
             image: item.Image,
-            type: item.InternalTitle
+            type: item.InternalTitle,
+            namingConvention: {
+              prefixText: item.PrefixText,
+              prefixUseAttribute: item.PrefixUseAttribute,
+              prefixAttribute: item.PrefixAttribute,
+              suffixText: item.SuffixText,
+              suffixUseAttribute: item.SuffixUseAttribute,
+              suffixAttribute: item.SuffixAttribute
+            },
+            visibleTo: item.VisibleTo,
+            defaultVisibility: item.DefaultVisibility,
+            defaultConfidentialData: item.DefaultConfidentialData
           }
         })
     } catch (error) {
@@ -908,27 +941,67 @@ export class DataAdapter implements IPortfolioWebPartsDataAdapter {
     }
   }
 
-  public async fetchProvisionRequests(
-    queryTemplate: string,
-    selectProperties: string[],
-    batchSize = 500,
-    additionalQuery: Record<string, any> = {}
-  ): Promise<ISearchResult[]> {
-    const query: SearchQueryInit = {
-      QueryTemplate: `${queryTemplate}`,
-      Querytext: '*',
-      RowLimit: batchSize,
-      TrimDuplicates: false,
-      SelectProperties: [...selectProperties, 'Title'],
-      ...additionalQuery
+  public async deleteProvisionRequest(requestId: number, provisionUrl: string): Promise<boolean> {
+    try {
+      const provisionSite = Web([this._sp.web, provisionUrl])
+      const provisionRequestsList = provisionSite.lists.getByTitle('Provisioning Requests')
+      await provisionRequestsList.items.getById(requestId).delete()
+      return true
+    } catch (error) {
+      return false
     }
-    const { PrimarySearchResults, TotalRows } = await this._sp.search(query)
-    const results = [...PrimarySearchResults]
-    while (results.length < TotalRows) {
-      const response = await this._sp.search({ ...query, StartRow: results.length })
-      results.push(...response.PrimarySearchResults)
+  }
+
+  public async fetchProvisionRequests(user: string, provisionUrl: string): Promise<any[]> {
+    try {
+      const provisionSite = Web([this._sp.web, provisionUrl])
+      const provisionRequestsList = provisionSite.lists.getByTitle('Provisioning Requests')
+      const spItems = await provisionRequestsList.items
+        .select(
+          'Id',
+          'Title',
+          'SpaceDisplayName',
+          'SpaceType',
+          'SiteURL',
+          'Status',
+          'Stage',
+          'Comments',
+          'ApprovedDate',
+          'Created',
+          'Author/EMail'
+        )
+        .expand('Author')
+        .getAll()
+      return spItems
+        .filter((item) => item.Author?.EMail === user)
+        .sort((a, b) => (a.Created > b.Created ? 1 : -1))
+        .map((item) => {
+          return {
+            id: item.Id,
+            title: item.Title,
+            displayName: item.SpaceDisplayName,
+            type: item.SpaceType,
+            siteUrl: item.SiteURL?.Url,
+            status: item.Status,
+            stage: item.Stage,
+            comments: item.Comments,
+            approvedDate: item.ApprovedDate,
+            created: item.Created,
+            author: item.Author?.EMail
+          }
+        })
+    } catch (error) {
+      return []
+    }
+  }
+
+  public async siteExists(siteUrl: string): Promise<boolean> {
+    try {
+      const exists = await this._sp.site.exists(siteUrl)
+      return exists
+    } catch (error) {
+      return false
     }
-    return results
   }
 }
 
diff --git a/SharePointFramework/PortfolioWebParts/src/data/types.ts b/SharePointFramework/PortfolioWebParts/src/data/types.ts
index b453b1125..59219d8ea 100644
--- a/SharePointFramework/PortfolioWebParts/src/data/types.ts
+++ b/SharePointFramework/PortfolioWebParts/src/data/types.ts
@@ -300,9 +300,9 @@ export interface IPortfolioWebPartsDataAdapter {
   /**
    * Retrieves the provision request settings from the "Provisioning Request Settings" list
    *
-   * @returns A Promise that resolves to a Map containing the settings.
+   * @returns A Promise that resolves to an array containing the provision request settings.
    */
-  getProvisionRequestSettings?(provisionUrl: string): Promise<Map<string, string>>
+  getProvisionRequestSettings?(provisionUrl: string): Promise<any[]>
 
   /**
    * Retrieves the provision types from the "Provisioning Types" list
@@ -314,7 +314,7 @@ export interface IPortfolioWebPartsDataAdapter {
   /**
    * Ensure users in the provision site and return their IDs.
    *
-   * @param user User
+   * @param users Users to ensure
    */
   getProvisionUsers?(users: any[], provisionUrl: string): Promise<Promise<number | null>[]>
 
@@ -328,19 +328,29 @@ export interface IPortfolioWebPartsDataAdapter {
   addProvisionRequests?(properties: IProvisionRequestItem, provisionUrl: string): Promise<boolean>
 
   /**
-   * Fetch provision requests from the provision requests list and their status
-   * Uses `this._sp.search` using the specified `{queryTemplate}` and `{selectProperties}`.
-   * Uses a `while` loop to fetch all items in batches of `{batchSize}`.
+   * Deletes a provision request item from the provisioning requests list
+   *
+   * @param requestId Id of the request to delete
+   * @param provisionUrl Url for the provisioning site
    *
-   * @param queryTemplate Query template
-   * @param selectProperties Select properties
-   * @param batchSize Batch size (default: 500)
-   * @param additionalQuery Additional query parameters
    */
-  fetchProvisionRequests?(
-    queryTemplate: string,
-    selectProperties: string[],
-    batchSize: number,
-    additionalQuery: Record<string, any>
-  ): Promise<any[]>
+  deleteProvisionRequest?(requestId: number, provisionUrl: string): Promise<boolean>
+
+  /**
+   * Retrieves the provision types from the "Provisioning Requests" list
+   *
+   * @param user User to fetch the provision requests for
+   * @param provisionUrl Url for the provisioning site
+   *
+   * @returns A Promise that resolves to an array of containing provision requests.
+   */
+  fetchProvisionRequests?(user: any, provisionUrl: string): Promise<any[]>
+
+  /**
+   * Checks if a site exists based on its proposed URL
+   *
+   * @param siteUrl Site URL
+   *
+   */
+  siteExists?(siteUrl: string): Promise<boolean>
 }
diff --git a/SharePointFramework/PortfolioWebParts/src/interfaces/IProvisionRequestItem.ts b/SharePointFramework/PortfolioWebParts/src/interfaces/IProvisionRequestItem.ts
index bb8cccdc4..f8675d991 100644
--- a/SharePointFramework/PortfolioWebParts/src/interfaces/IProvisionRequestItem.ts
+++ b/SharePointFramework/PortfolioWebParts/src/interfaces/IProvisionRequestItem.ts
@@ -1,4 +1,5 @@
 export interface IProvisionRequestItem {
+  Id?: number
   Title?: string
   SpaceDisplayName?: string
   Description?: string
diff --git a/SharePointFramework/PortfolioWebParts/src/loc/mystrings.d.ts b/SharePointFramework/PortfolioWebParts/src/loc/mystrings.d.ts
index 6885403d4..dfe60e84d 100644
--- a/SharePointFramework/PortfolioWebParts/src/loc/mystrings.d.ts
+++ b/SharePointFramework/PortfolioWebParts/src/loc/mystrings.d.ts
@@ -28,7 +28,9 @@ declare interface IPortfolioWebPartsStrings {
     SiteNameFieldLabel: string,
     SiteNameFieldDescription: string,
     SiteNamePrefixTooltipText: string,
-    SiteNameSuffixTooltipText: string,
+    SiteNameSuffixTooltipText: string
+    SiteNameValidationErrorMessage: string,
+    SiteNameValidationSuccessMessage: string,
     SiteDescriptionFieldLabel: string,
     SiteDescriptionFieldDescription: string,
     BusinessJustificationFieldLabel: string,
@@ -67,7 +69,44 @@ declare interface IPortfolioWebPartsStrings {
     ToastCreatedErrorTitle: string
     ToastCreatedErrorBody: string
     StatusMenuLabel: string
+    SettingsMenuLabel: string
     IdeaMenuLabel: string
+    SettingsSearchLabel: string
+    SettingsDialogTitle: string
+    SettingsDialogDescription: string
+    SettingsDialogSpinnerLabel: string
+    SettingsDialogNoSearchResultsLabel: string
+    SettingsDialogNoResultsLabel: string
+    SettingLabel: string
+    DescriptionLabel: string
+    ValueLabel: string
+    EditLabel: string
+    StatusSearchLabel: string
+    UpdateLabel: string
+    StatusDialogTitle: string
+    StatusDialogDescription: string
+    StatusDialogSpinnerLabel: string
+    StatusDialogNoSearchResultsLabel: string
+    StatusDialogNoResultsLabel: string
+    StatusLabel: string
+    SubmittedLabel: string
+    ApprovedLabel: string
+    RejectedLabel: string
+    PendingApprovalLabel: string
+    SpaceCreationFailedLabel: string
+    SpaceAlreadyExistsLabel: string
+    TeamRequestedLabel: string
+    SpaceCreationLabel: string
+    SpaceCreatedLabel: string
+    NotSubmittedLabel: string
+    SubmittedDateLabel: string
+    DeleteLabel: string
+    DeleteSubmissionLabel: string
+    DeleteSubmissionConfirmationLabel: string
+    DeletedSubmissionToastTitle: string
+    DeletedSubmissionToastBody: string
+    DeletedSubmissionErrorToastTitle: string
+    DeletedSubmissionErrorToastBody: string
   },
   AddColumnLabel: string
   AllProjectsHeaderText: string
diff --git a/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js b/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js
index edda31602..fd46aef90 100644
--- a/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js
+++ b/SharePointFramework/PortfolioWebParts/src/loc/nb-no.js
@@ -30,6 +30,8 @@ define([], function () {
       SiteNameFieldDescription: 'Velg et unikt navn som følger organisasjonens navngivningsstandarder.',
       SiteNamePrefixTooltipText: 'Dette er et prefiks som legges til foran områdenavnet.',
       SiteNameSuffixTooltipText: 'Dette er et suffiks som legges til i enden av områdenavnet.',
+      SiteNameValidationErrorMessage: 'Navnet oppgitt er ikke ledig. Prøv å endre navnet.',
+      SiteNameValidationSuccessMessage: 'Navnet er ledig',
       SiteDescriptionFieldLabel: 'Beskrivelse',
       SiteDescriptionFieldDescription: 'Beskrivelsen er valgfri, men nyttig for at folk skal forstå hva området ditt er for.',
       BusinessJustificationFieldLabel: 'Forretningsmessig begrunnelse',
@@ -68,7 +70,44 @@ define([], function () {
       ToastCreatedErrorTitle: 'Feil ved bestilling',
       ToastCreatedErrorBody: 'Det oppstod en feil ved bestilling av området. Vennligst prøv igjen, eller kontakt administrator.',
       StatusMenuLabel: 'Mine bestillinger',
+      SettingsMenuLabel: 'Innstillinger',
       IdeaMenuLabel: 'Registrer ide',
+      SettingsSearchLabel: 'Søk i bestillinger',
+      SettingsDialogTitle: 'Innstillinger for Bestillingsportalen',
+      SettingsDialogDescription: 'Her har du en oversikt over alle innstillinger for Bestillingsportalen. Du kan endre innstillinger ved å klikke på redigeringsknappen til høyre for hver rad.',
+      SettingsDialogSpinnerLabel: 'Oppdaterer og henter innstillinger...',
+      SettingsDialogNoSearchResultsLabel: 'Ingen innstillinger samsvarer med søket.',
+      SettingsDialogNoResultsLabel: 'Det finnes ingen innstillinger for Bestillingsportalen.',
+      SettingLabel: 'Innstilling',
+      DescriptionLabel: 'Beskrivelse',
+      ValueLabel: 'Verdi',
+      EditLabel: 'Rediger',
+      StatusSearchLabel: 'Søk i bestillinger',
+      UpdateLabel: 'Oppdater',
+      StatusDialogTitle: 'Mine bestillinger',
+      StatusDialogDescription: 'Her kan du se status på dine bestillinger, hvilke områdetype, status og dato for bestillingen.Det er også mulig slette bestillinger som ikke er sendt inn.',
+      StatusDialogSpinnerLabel: 'Oppdaterer og henter bestillinger...',
+      StatusDialogNoSearchResultsLabel: 'Ingen bestillinger samsvarer med søket.',
+      StatusDialogNoResultsLabel: 'Du har ingen bestillinger, opprett en ny bestilling for å se status her.',
+      StatusLabel: 'Status',
+      SubmittedLabel: 'Sendt inn',
+      ApprovedLabel: 'Godkjent',
+      RejectedLabel: 'Avslått',
+      PendingApprovalLabel: 'Venter på godkjenning',
+      SpaceCreationFailedLabel: 'Områdeopprettelse feilet',
+      SpaceAlreadyExistsLabel: 'Området eksisterer allerede',
+      TeamRequestedLabel: 'Team forespurt',
+      SpaceCreationLabel: 'Området opprettes',
+      SpaceCreatedLabel: 'Området er opprettet',
+      NotSubmittedLabel: 'Ikke sendt inn',
+      SubmittedDateLabel: 'Bestillingsdato',
+      DeleteLabel: 'Slett',
+      DeleteSubmissionLabel: 'Slett bestilling',
+      DeleteSubmissionConfirmationLabel: 'Er du sikker på at du vil slette bestillingen?',
+      DeletedSubmissionToastTitle: 'Slettet bestilling',
+      DeletedSubmissionToastBody: 'Bestillingen, {0}, er nå slettet.',
+      DeletedSubmissionErrorToastTitle: 'Feil ved sletting',
+      DeletedSubmissionErrorToastBody: 'Det oppstod en feil ved sletting av bestillingen. Vennligst prøv igjen, eller kontakt administrator.',
     },
     AddColumnLabel: 'Legg til en kolonne',
     AllProjectsHeaderText: 'Alle prosjekter/program',
diff --git a/SharePointFramework/shared-library/src/components/FieldContainer/FieldContainer.tsx b/SharePointFramework/shared-library/src/components/FieldContainer/FieldContainer.tsx
index 9c58dda74..abb915e75 100644
--- a/SharePointFramework/shared-library/src/components/FieldContainer/FieldContainer.tsx
+++ b/SharePointFramework/shared-library/src/components/FieldContainer/FieldContainer.tsx
@@ -18,6 +18,8 @@ export const FieldContainer: FC<IFieldContainerProps> = (props) => {
         label={label}
         required={props.required}
         hint={props.description ?? props.hint}
+        validationState={props.validationState}
+        validationMessage={props.validationMessage}
       >
         {props.children}
       </Field>