diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx
index 271304cc..86fe5f86 100644
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreation.tsx
@@ -14,9 +14,14 @@ import { useNavigate } from 'react-router-dom';
 import { CheckIcon } from '@patternfly/react-icons';
 import { WorkspaceCreationImageSelection } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageSelection';
 import { WorkspaceCreationKindSelection } from '~/app/pages/Workspaces/Creation/kind/WorkspaceCreationKindSelection';
-import { WorkspaceCreationPropertiesSelection } from '~/app/pages/Workspaces/Creation/WorkspaceCreationPropertiesSelection';
+import { WorkspaceCreationPropertiesSelection } from '~/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection';
 import { WorkspaceCreationPodConfigSelection } from '~/app/pages/Workspaces/Creation/podConfig/WorkspaceCreationPodConfigSelection';
-import { WorkspaceImage, WorkspaceKind, WorkspacePodConfig } from '~/shared/types';
+import {
+  WorkspaceImage,
+  WorkspaceKind,
+  WorkspacePodConfig,
+  WorkspaceProperties,
+} from '~/shared/types';
 
 enum WorkspaceCreationSteps {
   KindSelection,
@@ -32,6 +37,7 @@ const WorkspaceCreation: React.FunctionComponent = () => {
   const [selectedKind, setSelectedKind] = useState<WorkspaceKind | undefined>();
   const [selectedImage, setSelectedImage] = useState<WorkspaceImage | undefined>();
   const [selectedPodConfig, setSelectedPodConfig] = useState<WorkspacePodConfig | undefined>();
+  const [selectedProperties, setSelectedProperties] = useState<WorkspaceProperties | undefined>();
 
   const getStepVariant = useCallback(
     (step: WorkspaceCreationSteps) => {
@@ -62,6 +68,7 @@ const WorkspaceCreation: React.FunctionComponent = () => {
     setSelectedKind(newWorkspaceKind);
     setSelectedImage(undefined);
     setSelectedPodConfig(undefined);
+    setSelectedProperties(undefined)
   }, []);
 
   return (
@@ -155,7 +162,9 @@ const WorkspaceCreation: React.FunctionComponent = () => {
           />
         )}
         {currentStep === WorkspaceCreationSteps.Properties && (
-          <WorkspaceCreationPropertiesSelection />
+          <WorkspaceCreationPropertiesSelection
+            selectedImage={selectedImage}
+          />
         )}
       </PageSection>
       <PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }}>
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreationPropertiesSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreationPropertiesSelection.tsx
deleted file mode 100644
index 131425bd..00000000
--- a/workspaces/frontend/src/app/pages/Workspaces/Creation/WorkspaceCreationPropertiesSelection.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as React from 'react';
-import { Content } from '@patternfly/react-core';
-
-const WorkspaceCreationPropertiesSelection: React.FunctionComponent = () => (
-  <Content>
-    <p>Configure properties for your workspace.</p>
-  </Content>
-);
-
-export { WorkspaceCreationPropertiesSelection };
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx
new file mode 100644
index 00000000..8e115286
--- /dev/null
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesSelection.tsx
@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { useMemo, useState } from 'react';
+import {
+  TextInput,
+  Checkbox,
+  Form,
+  FormGroup,
+  ExpandableSection,
+  Divider,
+  Split,
+  SplitItem,
+  Content,
+} from '@patternfly/react-core';
+import { WorkspaceCreationImageDetails } from '~/app/pages/Workspaces/Creation/image/WorkspaceCreationImageDetails';
+import { WorkspaceCreationPropertiesVolumes } from '~/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumesProps';
+import { WorkspaceImage, WorkspaceVolumes, WorkspaceVolume } from '~/shared/types';
+
+interface WorkspaceCreationImageSelectionProps {
+  selectedImage: WorkspaceImage | undefined;
+}
+
+const WorkspaceCreationPropertiesSelection: React.FunctionComponent<
+  WorkspaceCreationImageSelectionProps
+> = ({ selectedImage }) => {
+  const [workspaceName, setWorkspaceName] = useState('');
+  const [deferUpdates, setDeferUpdates] = useState(false);
+  const [homeDirectory, setHomeDirectory] = useState('');
+  const [volumes, setVolumes] = useState<WorkspaceVolumes>({ home: '', data: [] });
+  const [volumesData, setVolumesData] = useState<WorkspaceVolume[]>([]);
+  const [isVolumesExpanded, setIsVolumesExpanded] = useState(false);
+
+  React.useEffect(() => {
+    setVolumes((prev) => ({
+      ...prev,
+      data: volumesData,
+    }));
+  }, [volumesData]);
+
+  const imageDetailsContent = useMemo(
+    () => <WorkspaceCreationImageDetails workspaceImage={selectedImage} />,
+    [selectedImage],
+  );
+
+  return (
+    <Content style={{ height: '100%' }}>
+      <p>Configure properties for your workspace.</p>
+      <Divider />
+      <Split hasGutter>
+        <SplitItem style={{ minWidth: '200px' }}>{imageDetailsContent}</SplitItem>
+        <SplitItem isFilled>
+          <div className="pf-u-p-lg pf-u-max-width-xl">
+            <Form>
+              <FormGroup
+                label="Workspace Name"
+                isRequired
+                fieldId="workspace-name"
+                style={{ width: 520 }}
+              >
+                <TextInput
+                  isRequired
+                  type="text"
+                  value={workspaceName}
+                  onChange={(_, value) => setWorkspaceName(value)}
+                  id="workspace-name"
+                />
+              </FormGroup>
+              <FormGroup fieldId="defer-updates">
+                <Checkbox
+                  label="Defer Updates"
+                  isChecked={deferUpdates}
+                  onChange={() => setDeferUpdates((prev) => !prev)}
+                  id="defer-updates"
+                />
+              </FormGroup>
+              <Divider />
+              <div className="pf-u-mb-0">
+                <ExpandableSection
+                  toggleText="Volumes"
+                  onToggle={() => setIsVolumesExpanded((prev) => !prev)}
+                  isExpanded={isVolumesExpanded}
+                  isIndented
+                >
+                  {isVolumesExpanded && (
+                    <>
+                      <FormGroup
+                        label="Home Directory"
+                        fieldId="home-directory"
+                        style={{ width: 500 }}
+                      >
+                        <TextInput
+                          value={homeDirectory}
+                          onChange={(_, value) => {
+                            setHomeDirectory(value);
+                            setVolumes((prev) => ({ ...prev, home: value }));
+                          }}
+                          id="home-directory"
+                        />
+                      </FormGroup>
+
+                      <FormGroup fieldId="volumes-table" style={{ marginTop: '1rem' }}>
+                        <WorkspaceCreationPropertiesVolumes
+                          volumes={volumesData}
+                          setVolumes={setVolumesData}
+                        />
+                      </FormGroup>
+                    </>
+                  )}
+                </ExpandableSection>
+              </div>
+              {!isVolumesExpanded && (
+                <div style={{ paddingLeft: '36px', marginTop: '-10px' }}>
+                  <div>Workspace volumes enable your project data to persist.</div>
+                  <div className="pf-u-font-size-sm">
+                    <strong>{volumes.data.length} added</strong>
+                  </div>
+                </div>
+              )}
+            </Form>
+          </div>
+        </SplitItem>
+      </Split>
+    </Content>
+  );
+};
+
+export { WorkspaceCreationPropertiesSelection };
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumesProps.tsx b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumesProps.tsx
new file mode 100644
index 00000000..40403fc0
--- /dev/null
+++ b/workspaces/frontend/src/app/pages/Workspaces/Creation/properties/WorkspaceCreationPropertiesVolumesProps.tsx
@@ -0,0 +1,205 @@
+import React, { useCallback, useState } from 'react';
+import { EllipsisVIcon } from '@patternfly/react-icons';
+import { Table, Thead, Tbody, Tr, Th, Td, TableVariant } from '@patternfly/react-table';
+import {
+  Button,
+  Modal,
+  ModalVariant,
+  TextInput,
+  Switch,
+  Dropdown,
+  DropdownItem,
+  MenuToggle,
+  ModalBody,
+  ModalFooter,
+  Form,
+  FormGroup,
+  ModalHeader,
+} from '@patternfly/react-core';
+import { WorkspaceVolume } from '~/shared/types';
+
+interface WorkspaceCreationPropertiesVolumesProps {
+  volumes: WorkspaceVolume[];
+  setVolumes: React.Dispatch<React.SetStateAction<WorkspaceVolume[]>>;
+}
+
+export const WorkspaceCreationPropertiesVolumes: React.FC<
+  WorkspaceCreationPropertiesVolumesProps
+> = ({ volumes, setVolumes }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [formData, setFormData] = useState<WorkspaceVolume>({ pvcName: '', mountPath: '', readOnly: false });
+  const [editIndex, setEditIndex] = useState<number | null>(null);
+  const [deleteIndex, setDeleteIndex] = useState<number | null>(null);
+  const [dropdownOpen, setDropdownOpen] = useState<number | null>(null);
+
+  const resetForm = useCallback(() => {
+    setFormData({ pvcName: '', mountPath: '', readOnly: false });
+    setEditIndex(null);
+    setIsModalOpen(false);
+  }, []);
+
+  const handleAddOrEdit = useCallback(() => {
+    if (!formData.pvcName || !formData.mountPath) {
+      return;
+    }
+    if (editIndex !== null) {
+      const updated = [...volumes];
+      updated[editIndex] = formData;
+      setVolumes(updated);
+    } else {
+      setVolumes([...volumes, formData]);
+    }
+    resetForm();
+  }, [formData, editIndex, volumes, setVolumes, resetForm]);
+
+  const handleEdit = useCallback(
+    (index: number) => {
+      setFormData(volumes[index]);
+      setEditIndex(index);
+      setIsModalOpen(true);
+    },
+    [volumes],
+  );
+
+  const openDetachModal = useCallback((index: number) => {
+    setDeleteIndex(index);
+    setIsDeleteModalOpen(true);
+  }, []);
+
+  const handleDelete = useCallback(() => {
+    if (deleteIndex !== null) {
+      setVolumes(volumes.filter((_, i) => i !== deleteIndex));
+      setIsDeleteModalOpen(false);
+      setDeleteIndex(null);
+    }
+  }, [deleteIndex, volumes, setVolumes]);
+
+  return (
+    <>
+      {volumes.length > 0 && (
+        <Table variant={TableVariant.compact} aria-label="Volumes Table">
+          <Thead>
+            <Tr>
+              <Th>PVC Name</Th>
+              <Th>Mount Path</Th>
+              <Th>Read Only</Th>
+              <Th />
+            </Tr>
+          </Thead>
+          <Tbody>
+            {volumes.map((volume, index) => (
+              <Tr key={index}>
+                <Td>{volume.pvcName}</Td>
+                <Td>{volume.mountPath}</Td>
+                <Td>
+                  <Switch
+                    id={`readonly-switch-${index}`}
+                    isChecked={volume.readOnly}
+                    onChange={() => {
+                      const updated = [...volumes];
+                      updated[index].readOnly = !updated[index].readOnly;
+                      setVolumes(updated);
+                    }}
+                  />
+                </Td>
+                <Td isActionCell>
+                  <Dropdown
+                    toggle={(toggleRef) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        isExpanded={dropdownOpen === index}
+                        onClick={() => setDropdownOpen(dropdownOpen === index ? null : index)}
+                        variant="plain"
+                        aria-label="plain kebab"
+                      >
+                        <EllipsisVIcon />
+                      </MenuToggle>
+                    )}
+                    isOpen={dropdownOpen === index}
+                    onSelect={() => setDropdownOpen(null)}
+                    popperProps={{ position: 'right' }}
+                  >
+                    <DropdownItem onClick={() => handleEdit(index)}>Edit</DropdownItem>
+                    <DropdownItem onClick={() => openDetachModal(index)}>Detach</DropdownItem>
+                  </Dropdown>
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      )}
+      <Button
+        variant="primary"
+        onClick={() => setIsModalOpen(true)}
+        style={{ marginTop: '1rem' }}
+        className="pf-u-mt-md"
+      >
+        Create Volume
+      </Button>
+
+      <Modal isOpen={isModalOpen} onClose={resetForm} variant={ModalVariant.small}>
+        <ModalHeader
+          title={editIndex !== null ? 'Edit Volume' : 'Create Volume'}
+          description="Add a volume and optionally connect it with an existing workspace."
+        />
+        <ModalBody>
+          <Form>
+            <FormGroup label="PVC Name" isRequired fieldId="pvc-name">
+              <TextInput
+                name="pvcName"
+                isRequired
+                type="text"
+                value={formData.pvcName}
+                onChange={(_, val) => setFormData({ ...formData, pvcName: val })}
+                id="pvc-name"
+              />
+            </FormGroup>
+            <FormGroup label="Mount Path" isRequired fieldId="mount-path">
+              <TextInput
+                name="mountPath"
+                isRequired
+                type="text"
+                value={formData.mountPath}
+                onChange={(_, val) => setFormData({ ...formData, mountPath: val })}
+                id="mount-path"
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            key="confirm"
+            onClick={handleAddOrEdit}
+            isDisabled={!formData.pvcName || !formData.mountPath}
+          >
+            {editIndex !== null ? 'Save' : 'Create'}
+          </Button>
+          <Button key="cancel" variant="link" onClick={resetForm}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+      <Modal
+        isOpen={isDeleteModalOpen}
+        onClose={() => setIsDeleteModalOpen(false)}
+        variant={ModalVariant.small}
+      >
+        <ModalHeader
+          title="Detach Volume?"
+          description="The volume and all of its resources will be detached from the workspace."
+        />
+        <ModalFooter>
+          <Button key="detach" variant="danger" onClick={handleDelete}>
+            Detach
+          </Button>
+          <Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};
+
+export default WorkspaceCreationPropertiesVolumesProps;
diff --git a/workspaces/frontend/src/shared/style/MUI-theme.scss b/workspaces/frontend/src/shared/style/MUI-theme.scss
index c983407b..8fb14129 100644
--- a/workspaces/frontend/src/shared/style/MUI-theme.scss
+++ b/workspaces/frontend/src/shared/style/MUI-theme.scss
@@ -751,8 +751,8 @@
 }
 
 .mui-theme .pf-v6-c-modal-box {
-  --pf-v6-c-modal-box--BorderRadius: 0;
-  border: 2px solid var(--mui-palette-common-black);
+  --pf-v6-c-modal-box--BorderRadius: var(--mui-shape-borderRadius);
+  --pf-v6-c-modal-box--BoxShadow: var(--mui-shadows-24);
 }
 
 .mui-theme .pf-v6-c-button.pf-m-plain {
diff --git a/workspaces/frontend/src/shared/types.ts b/workspaces/frontend/src/shared/types.ts
index a88fe8ad..8249ac80 100644
--- a/workspaces/frontend/src/shared/types.ts
+++ b/workspaces/frontend/src/shared/types.ts
@@ -20,6 +20,32 @@ export interface WorkspaceImage {
   };
 }
 
+export interface WorkspaceVolume {
+  pvcName: string;
+  mountPath: string;
+  readOnly: boolean;
+}
+
+export interface WorkspaceVolumes {
+  home: string;
+  data: WorkspaceVolume[];
+}
+
+export interface WorkspaceProperties {
+  workspaceName: string;
+  deferUpdates: boolean;
+  homeDirectory: string;
+  volumes: boolean;
+  isVolumesExpanded: boolean
+  redirect?: {
+    to: string;
+    message: {
+      text: string;
+      level: string;
+    };
+  };
+}
+
 export interface WorkspacePodConfig {
   id: string;
   displayName: string;
@@ -106,14 +132,7 @@ export interface Workspace {
       labels: string[];
       annotations: string[];
     };
-    volumes: {
-      home: string;
-      data: {
-        pvcName: string;
-        mountPath: string;
-        readOnly: boolean;
-      }[];
-    };
+    volumes: WorkspaceVolumes;
     endpoints: {
       displayName: string;
       port: string;