diff --git a/lib/Controller/WorkspaceController.php b/lib/Controller/WorkspaceController.php
index 381c1cd38..6d6397598 100644
--- a/lib/Controller/WorkspaceController.php
+++ b/lib/Controller/WorkspaceController.php
@@ -86,8 +86,8 @@ private function deleteBlankSpaceName(string $spaceName): string {
 	 * @GeneralManagerRequired
 	 * @param string $spaceName
 	 */
-	public function createWorkspace(string $spaceName): JSONResponse {
-		$workspace = $this->spaceManager->create($spaceName);
+	public function createWorkspace(string $spaceName, ?string $colorCode = null, int $quota = -3): JSONResponse {
+		$workspace = $this->spaceManager->create($spaceName, $colorCode, $quota);
 
 		return new JSONResponse(
 			array_merge(
diff --git a/lib/Space/SpaceManager.php b/lib/Space/SpaceManager.php
index f94b5de78..685b1553b 100644
--- a/lib/Space/SpaceManager.php
+++ b/lib/Space/SpaceManager.php
@@ -82,7 +82,7 @@ public function __construct(
 	) {
 	}
 
-	public function create(string $spacename): array {
+	public function create(string $spacename, ?string $colorCode = null, int $quota = -3): array {
 		if ($spacename === false
 			|| $spacename === null
 			|| $spacename === ''
@@ -102,10 +102,18 @@ public function create(string $spacename): array {
 
 		$folderId = $this->folderHelper->createFolder($spacename);
 
+		if ($quota !== -3) {
+			$this->folderHelper->setFolderQuota($folderId, $quota);
+		}
+
+		if ($colorCode === null) {
+			$colorCode = $this->colorCode->generate();
+		}
+
 		$space = new Space();
 		$space->setSpaceName($spacename);
 		$space->setGroupfolderId($folderId);
-		$space->setColorCode($this->colorCode->generate());
+		$space->setColorCode($colorCode);
 		$this->spaceMapper->insert($space);
 
 
@@ -154,7 +162,7 @@ public function create(string $spacename): array {
 				$newSpaceUsersGroup
 			]),
 			'added_groups' => (object)[],
-			'quota' => $groupfolder['quota'],
+			'quota' => $quota,
 			'size' => $groupfolder['size'],
 			'acl' => $groupfolder['acl'],
 			'manage' => $groupfolder['manage'],
diff --git a/src/LeftSidebar.vue b/src/LeftSidebar.vue
index 2ffdb7611..fcb04490f 100644
--- a/src/LeftSidebar.vue
+++ b/src/LeftSidebar.vue
@@ -20,55 +20,68 @@
 	along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-	<NcAppNavigation
-		aria-label="workspace navigation">
-		<ul class="ws-navigation-header">
-			<NcAppNavigationNewItem v-if="$root.$data.isUserGeneralAdmin || $root.$data.isSpaceManager"
-				class="input-new-item"
-				:class="isDarkTheme ? 'btn-dark' : 'btn-light'"
-				icon="icon-add"
-				:name="t('workspace', 'New workspace')"
-				@new-item="createSpace" />
-			<li class="ws-navigation-spacer" />
-			<NcAppNavigationItem
-				:name="t('workspace', 'All workspaces')"
-				:to="{ name: 'space.table' }">
-				<template #counter>
-					<NcCounterBubble :count="$store.state.countTotalWorkspaces" />
-				</template>
-			</NcAppNavigationItem>
-		</ul>
-		<NcAppNavigationSearch v-model="workspacesSearchQuery"
-			:label="t('workspace', 'Search workspaces...')" />
-		<template #list>
-			<SpaceMenuItem
-				v-for="(space, spaceName) in $store.state.spaces"
-				:key="space.id"
-				:space="space"
-				:space-name="spaceName" />
-			<!-- <div id="app-settings">
-					<div id="app-settings-header">
-						<button v-if="$root.$data.isUserGeneralAdmin"
-							icon="icon-settings-dark"
-							class="settings-button"
-							data-apps-slide-toggle="#app-settings-content">
-							{{ t('workspace', 'Settings') }}
-						</button>
-					</div>
-					<div id="app-settings-content">
-						<NcActionButton v-if="$root.$data.isUserGeneralAdmin"
-							:close-after-click="true"
-							:title="t('workspace', 'Convert Team folders')"
-							@click="toggleShowSelectGroupfoldersModal" />
-					</div>
-				</div> -->
-			<div v-if="Object.keys($store.state.spaces).length">
-				<PageLoader v-if="nextPage"
-					v-element-visibility="next"
-					:message="messageLoader" />
-			</div>
-		</template>
-	</NcAppNavigation>
+	<div>
+		<NcAppNavigation
+			aria-label="workspace navigation">
+			<ul class="ws-navigation-header">
+				<li class="ws-navigation-spacer" />
+				<NcButton v-if="$root.$data.isUserGeneralAdmin || $root.$data.isSpaceManager"
+					:class="isDarkTheme ? 'btn-dark' : 'btn-light'"
+					:aria-label="t('workspace', 'New workspace')"
+					:text="t('workspace', 'New workspace')"
+					:wide="true"
+					@click="openModal">
+					<template #icon>
+						<Plus />
+					</template>
+				</NcButton>
+				<NcAppNavigationSpacer />
+				<NcAppNavigationItem
+					:name="t('workspace', 'All workspaces')"
+					:to="{ name: 'space.table' }">
+					<template #counter>
+						<NcCounterBubble :count="$store.state.countTotalWorkspaces" />
+					</template>
+				</NcAppNavigationItem>
+			</ul>
+			<NcAppNavigationSearch v-model="workspacesSearchQuery"
+				:label="t('workspace', 'Search workspaces...')" />
+			<template #list>
+				<SpaceMenuItem
+					v-for="(space, spaceName) in $store.state.spaces"
+					:key="space.id"
+					:space="space"
+					:space-name="spaceName" />
+				<!-- <div id="app-settings">
+						<div id="app-settings-header">
+							<button v-if="$root.$data.isUserGeneralAdmin"
+								icon="icon-settings-dark"
+								class="settings-button"
+								data-apps-slide-toggle="#app-settings-content">
+								{{ t('workspace', 'Settings') }}
+							</button>
+						</div>
+						<div id="app-settings-content">
+							<NcActionButton v-if="$root.$data.isUserGeneralAdmin"
+								:close-after-click="true"
+								:title="t('workspace', 'Convert Team folders')"
+								@click="toggleShowSelectGroupfoldersModal" />
+						</div>
+					</div> -->
+				<div v-if="Object.keys($store.state.spaces).length">
+					<PageLoader v-if="nextPage"
+						v-element-visibility="next"
+						:message="messageLoader" />
+				</div>
+			</template>
+		</NcAppNavigation>
+		<FormWorkspace v-if="showFormWorkspaceModal"
+			:title="t('workspace', 'New workspace')"
+			:place-holder-workspace="t('workspace', 'Workspace name')"
+			:button-name="t('workspace', 'Create')"
+			@click-action="createSpace"
+			@close="closeModal" />
+	</div>
 </template>
 
 <script>
@@ -76,7 +89,7 @@ import { createSpace } from './services/spaceService.js'
 import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
 import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
 import NcAppNavigationSearch from '@nextcloud/vue/components/NcAppNavigationSearch'
-import NcAppNavigationNewItem from '@nextcloud/vue/components/NcAppNavigationNewItem'
+import NcButton from '@nextcloud/vue/components/NcButton'
 import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import showNotificationError from './services/Notifications/NotificationError.js'
 import SpaceMenuItem from './SpaceMenuItem.vue'
@@ -88,22 +101,29 @@ import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { LIMIT_WORKSPACES_PER_PAGE } from './constants.js'
 import { t } from '@nextcloud/l10n'
+import Plus from 'vue-material-design-icons/Plus.vue'
+import NcAppNavigationSpacer from '@nextcloud/vue/components/NcAppNavigationSpacer'
+import FormWorkspace from './components/Modals/FormWorkspace.vue'
 
 export default {
 	name: 'LeftSidebar',
 	components: {
 		NcAppNavigation,
-		NcAppNavigationNewItem,
 		NcAppNavigationItem,
+		NcAppNavigationSpacer,
+		NcButton,
 		NcCounterBubble,
 		SpaceMenuItem,
 		PageLoader,
 		NcAppNavigationSearch,
+		Plus,
+		FormWorkspace,
 	},
 	mixins: [WorkspacesLoader],
 	data() {
 		return {
 			workspacesSearchQuery: this.$store.getters.searchWorkspace || '',
+			showFormWorkspaceModal: false,
 		}
 	},
 	computed: {
@@ -153,13 +173,17 @@ export default {
 				})
 		},
 		// Creates a new space and navigates to its details page
-		async createSpace(name) {
-			if (name === '') {
+		async createSpace(payload) {
+			if (payload.name === '') {
 				showNotificationError(t('workspace', 'Error'), t('workspace', 'Please specify a name.'), 3000)
 				return
 			}
 
-			const workspace = await createSpace(name, this)
+			const workspace = await createSpace({
+				name: payload.name,
+				quota: payload.quota,
+				colorCode: payload.colorCode,
+			}, this)
 
 			this.$store.commit('addSpace', {
 				color: workspace.color,
@@ -168,7 +192,7 @@ export default {
 				isOpen: false,
 				id: workspace.id_space,
 				groupfolderId: workspace.folder_id,
-				name,
+				name: payload.name,
 				quota: workspace.quota,
 				users: {},
 				size: 0,
@@ -184,38 +208,34 @@ export default {
 					space: workspace.id_space,
 				},
 			})
+			this.closeModal()
+		},
+		toggleshowFormWorkspaceModal() {
+			this.showFormWorkspaceModal = !this.showFormWorkspaceModal
+		},
+		openModal() {
+			this.showFormWorkspaceModal = true
+		},
+		closeModal() {
+			this.showFormWorkspaceModal = false
 		},
 	},
 }
 </script>
 
 <style scoped>
-.input-new-item :deep(.app-navigation-entry-button) {
-	align-items: center;
-}
-
-.input-new-item :deep(.button-vue--icon-only) {
-	height: 20px;
-}
-
-.input-new-item :deep(.app-navigation-input-confirm form) {
-	align-items: center;
-}
-
-.input-new-item :deep(.app-navigation-entry-button .app-navigation-entry-icon) {
-	margin-right: 4px;
-}
-
-.btn-light :deep(.app-navigation-entry-button) {
+.btn-light {
 	background-color: var(--color-main-background);
 }
 
-.btn-dark :deep(.app-navigation-entry-button) {
+.btn-dark {
 	background-color: var(--color-background-dark);
 }
 
-.btn-light :deep(.app-navigation-entry-button):hover,
-.btn-dark :deep(.app-navigation-entry-button):hover {
+.btn-light :hover,
+.btn-light :deep(span):hover
+.btn-dark :hover,
+.btn-dark :deep(span):hover {
 	background-color: var(--color-background-hover);
 }
 
diff --git a/src/SpaceDetails.vue b/src/SpaceDetails.vue
index 0c13ce603..b91942361 100644
--- a/src/SpaceDetails.vue
+++ b/src/SpaceDetails.vue
@@ -87,7 +87,7 @@
 				<NcActions>
 					<NcActionButton v-if="$root.$data.isUserGeneralAdmin"
 						icon="icon-rename"
-						@click="toggleShowEditWorkspaceModal">
+						@click="openFormWorkspaceModal">
 						{{ t('workspace', 'Edit the workspace') }}
 					</NcActionButton>
 				</NcActions>
@@ -128,14 +128,19 @@
 			@close="toggleShowDelWorkspaceModal"
 			@handle-cancel="toggleShowDelWorkspaceModal"
 			@handle-delete="deleteSpace" />
-		<EditWorkspace v-if="showEditWorkspaceModal"
+		<FormWorkspace v-if="showFormWorkspaceModal"
 			:space="$store.getters.getSpaceByNameOrId($route.params.space)"
-			@close="toggleShowEditWorkspaceModal" />
+			:title="t('workspace', 'Edit the workspace')"
+			:place-holder-workspace="t('workspace', 'Rename your workspace')"
+			:button-name="t('workspace', 'Save')"
+			:progress-bar="true"
+			@click-action="save"
+			@close="closeFormWorkspaceModal" />
 	</div>
 </template>
 
 <script>
-import EditWorkspace from './components/Modals/EditWorkspace.vue'
+import FormWorkspace from './components/Modals/FormWorkspace.vue'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
@@ -144,7 +149,7 @@ import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 import SelectConnectedGroups from './SelectConnectedGroups.vue'
 import RemoveSpace from './RemoveSpace.vue'
 import UserTable from './UserTable.vue'
-import { removeWorkspace } from './services/spaceService.js'
+import { removeWorkspace, renameSpace } from './services/spaceService.js'
 import AddUsersTabs from './AddUsersTabs.vue'
 import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
@@ -153,12 +158,15 @@ import AddedGroupBlack from '../img/added_group_black.svg?raw'
 import AddedGroupWhite from '../img/added_group_white.svg?raw'
 import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
 import NcPopover from '@nextcloud/vue/components/NcPopover'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import showNotificationError from './services/Notifications/NotificationError.js'
 
 export default {
 	name: 'SpaceDetails',
 	components: {
 		AddUsersTabs,
-		EditWorkspace,
+		FormWorkspace,
 		NcActions,
 		NcCounterBubble,
 		NcEmptyContent,
@@ -183,7 +191,7 @@ export default {
 			showSelectUsersModal: false, // true to display user selection Modal windows
 			showDelWorkspaceModal: false,
 			showSelectConnectedGroups: false,
-			showEditWorkspaceModal: false,
+			showFormWorkspaceModal: false,
 			isESR: false,
 			space: undefined,
 			mdiAccountMultiple,
@@ -286,8 +294,126 @@ export default {
 		toggleShowConnectedGroups() {
 			this.showSelectConnectedGroups = !this.showSelectConnectedGroups
 		},
-		toggleShowEditWorkspaceModal() {
-			this.showEditWorkspaceModal = !this.showEditWorkspaceModal
+		openFormWorkspaceModal() {
+			this.showFormWorkspaceModal = true
+		},
+		closeFormWorkspaceModal() {
+			this.showFormWorkspaceModal = false
+		},
+		async save(payload) {
+			const oldSpace = this.$store.getters.getSpaceByNameOrId(this.$route.params.space)
+			const oldSpaceName = oldSpace.name
+			const space = { ...oldSpace }
+
+			if (payload.colorCode !== space.color) {
+				axios.post(generateUrl(`/apps/workspace/workspaces/${oldSpace.id}/color`),
+					{
+						colorCode: payload.colorCode,
+					})
+					.then(resp => {
+						this.$store.dispatch('updateColor', {
+							name: oldSpaceName,
+							colorCode: payload.colorCode,
+						})
+					})
+					.catch(err => {
+						const text = t('workspace', 'A network error occurred when trying to change the workspace\'s color.<br>Error: {error}', { error: err })
+						showNotificationError(t('workspace', 'Network error'), text, 3000)
+					})
+			}
+
+			if ((oldSpaceName !== payload.name) && (payload.name !== '')) {
+				let responseRename = await renameSpace(oldSpace.id, payload.name)
+				responseRename = responseRename.data
+
+				if (responseRename.statuscode === 204) {
+					const spaceBeforeRenamed = { ...oldSpace }
+					spaceBeforeRenamed.name = responseRename.space
+					space.name = responseRename.space
+
+					this.$store.dispatch('updateSpace', {
+						space: spaceBeforeRenamed,
+					})
+					this.$store.dispatch('removeSpace', {
+						space: oldSpace,
+					})
+
+					const groupKeys = Object.keys(spaceBeforeRenamed.groups)
+					groupKeys.forEach(key => {
+						const group = spaceBeforeRenamed.groups[key]
+						if (!this.checkSpaceNameIsEqual(group.displayName, oldSpaceName)) {
+							group.displayName = this.replaceSpaceName(group.displayName, oldSpaceName)
+						}
+						const newDisplayName = group.displayName.replace(oldSpaceName, payload.name)
+						// Renames group
+						this.$store.dispatch('renameGroup', {
+							name: payload.name,
+							gid: group.gid,
+							newGroupName: newDisplayName,
+						})
+					})
+				}
+			}
+
+			if (space.quota !== payload.quota) {
+				this.$store.dispatch('setSpaceQuota', {
+					name: space.name,
+					quota: payload.quota,
+				})
+			}
+
+			this.closeFormWorkspaceModal()
+
+		},
+		/**
+		 * @param {string} groupname the displayname from a group
+		 * @param {string} oldSpaceName the currently space name
+		 * To fix a bug from release 3.0.2
+		 */
+		checkSpaceNameIsEqual(groupname, oldSpaceName) {
+			let spaceNameFiltered = ''
+
+			if (groupname.startsWith('U-')) {
+				spaceNameFiltered = groupname.replace('U-', '')
+			}
+
+			if (groupname.startsWith('WM-')) {
+				spaceNameFiltered = groupname.replace('WM-', '')
+			} else if (groupname.startsWith('GE-')) {
+				spaceNameFiltered = groupname.replace('GE-', '')
+			}
+
+			if (groupname.startsWith('G-')) {
+				spaceNameFiltered = groupname.replace('G-', '')
+			}
+
+			if (spaceNameFiltered === oldSpaceName) {
+				return true
+			}
+
+			return false
+		},
+		/**
+		 * @param {string} groupname the displayname from a group
+		 * @param {string} oldSpaceName the currently space name
+		 * To fix a bug from release 3.0.2
+		 */
+		replaceSpaceName(groupname, oldSpaceName) {
+			const spaceNameSplit = groupname
+				.split('-')
+				.filter(element => element)
+
+			if (spaceNameSplit[0] === 'WM'
+					|| spaceNameSplit[0] === 'U') {
+				spaceNameSplit[1] = oldSpaceName
+			}
+
+			if (spaceNameSplit[0] === 'G') {
+				const lengthMax = spaceNameSplit.length - 1
+				spaceNameSplit[lengthMax] = oldSpaceName
+			}
+
+			return spaceNameSplit.join('-')
 		},
 	},
 }
diff --git a/src/components/Modals/EditWorkspace.vue b/src/components/Modals/FormWorkspace.vue
similarity index 53%
rename from src/components/Modals/EditWorkspace.vue
rename to src/components/Modals/FormWorkspace.vue
index baa623075..a1b20266e 100644
--- a/src/components/Modals/EditWorkspace.vue
+++ b/src/components/Modals/FormWorkspace.vue
@@ -6,7 +6,7 @@
 		class="modal"
 		@close="close">
 		<div class="modal__container">
-			<h1>{{ t('workspace', 'Edit the workspace') }}</h1>
+			<h1>{{ title }}</h1>
 			<h2>{{ t('workspace', 'Appearance') }}</h2>
 			<div class="content-appearance">
 				<NcColorPicker ref="colorPicker"
@@ -18,7 +18,7 @@
 				</NcColorPicker>
 				<NcTextField v-model="spacename"
 					class="input-spacename"
-					:placeholder="t('workspace', 'Rename your workspace')"
+					:placeholder="placeHolderWorkspace"
 					type="text"
 					@update:value="updateSpacename" />
 			</div>
@@ -38,22 +38,24 @@
 					:clearable="false"
 					:options="['1 GB', '5 GB', '10 GB', t('workspace','unlimited')]"
 					@option:selected="updateQuota" />
-				<p class="max-contrast"
-					v-html="getQuotaMessage" />
-				<NcProgressBar v-if="quota !== -3"
-					class="progress-bar"
-					size="medium"
-					:value="calculPercentSize"
-					:error="isError" />
-				<NcNoteCard v-if="isError"
-					type="warning">
-					<p>{{ t('workspace', 'Please note that the quota you have selected is less than the space currently used by your workspace. You will no longer be able to add or modify files.') }}</p>
-				</NcNoteCard>
+				<div v-if="progressBar">
+					<p class="max-contrast"
+						v-html="getQuotaMessage" />
+					<NcProgressBar v-if="quota !== -3"
+						class="progress-bar"
+						size="medium"
+						:value="calculPercentSize"
+						:error="isError" />
+					<NcNoteCard v-if="isError"
+						type="warning">
+						<p>{{ t('workspace', 'Please note that the quota you have selected is less than the space currently used by your workspace. You will no longer be able to add or modify files.') }}</p>
+					</NcNoteCard>
+				</div>
 			</div>
 			<NcButton aria-label="Save"
 				class="btn-save"
-				@click="save">
-				{{ t('workspace', 'Save') }}
+				@click="handleClick">
+				{{ buttonName }}
 				<template #icon>
 					<Check />
 				</template>
@@ -63,8 +65,6 @@
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
 import Check from 'vue-material-design-icons/Check.vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
@@ -73,12 +73,12 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcProgressBar from '@nextcloud/vue/components/NcProgressBar'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
-import { renameSpace } from '../../services/spaceService.js'
 import showNotificationError from '../../services/Notifications/NotificationError.js'
 import { t } from '@nextcloud/l10n'
+import { generateColor } from '../../services/colorService.js'
 
 export default {
-	name: 'EditWorkspace',
+	name: 'FormWorkspace',
 	components: {
 		Check,
 		NcButton,
@@ -92,7 +92,35 @@ export default {
 	props: {
 		space: {
 			type: Object,
+			required: false,
+			default() {
+				return {
+					color: generateColor(),
+					name: '',
+					quota: -3,
+					size: 0,
+				}
+			},
+		},
+		title: {
+			type: String,
+			required: false,
+			default: '',
+		},
+		placeHolderWorkspace: {
+			type: String,
+			required: false,
+			default: 'Workspace name',
+		},
+		buttonName: {
+			type: String,
 			required: true,
+			default: t('workspace', 'Save'),
+		},
+		progressBar: {
+			type: Boolean,
+			required: false,
+			default: false,
 		},
 	},
 	data() {
@@ -149,121 +177,6 @@ export default {
 		close() {
 			this.$emit('close')
 		},
-		async save() {
-			const oldSpace = this.$store.getters.getSpaceByNameOrId(this.$route.params.space)
-			const oldSpaceName = oldSpace.name
-			const space = { ...oldSpace }
-
-			if (this.color !== space.color) {
-				axios.post(generateUrl(`/apps/workspace/workspaces/${oldSpace.id}/color`),
-					{
-						colorCode: this.color,
-					})
-					.then(resp => {
-						this.$store.dispatch('updateColor', {
-							name: oldSpaceName,
-							colorCode: this.color,
-						})
-					})
-					.catch(err => {
-						const text = t('workspace', 'A network error occurred when trying to change the workspace\'s color.<br>Error: {error}', { error: err })
-						showNotificationError(t('workspace', 'Network error'), text, 3000)
-					})
-			}
-
-			if ((oldSpaceName !== this.spacename) && (this.spacename !== '')) {
-				let responseRename = await renameSpace(oldSpace.id, this.spacename)
-				responseRename = responseRename.data
-
-				if (responseRename.statuscode === 204) {
-					const spaceBeforeRenamed = { ...oldSpace }
-					spaceBeforeRenamed.name = responseRename.space
-					space.name = responseRename.space
-
-					this.$store.dispatch('updateSpace', {
-						space: spaceBeforeRenamed,
-					})
-					this.$store.dispatch('removeSpace', {
-						space: oldSpace,
-					})
-
-					const groupKeys = Object.keys(spaceBeforeRenamed.groups)
-					groupKeys.forEach(key => {
-						const group = spaceBeforeRenamed.groups[key]
-						if (!this.checkSpaceNameIsEqual(group.displayName, oldSpaceName)) {
-							group.displayName = this.replaceSpaceName(group.displayName, oldSpaceName)
-						}
-						const newDisplayName = group.displayName.replace(oldSpaceName, this.spacename)
-						// Renames group
-						this.$store.dispatch('renameGroup', {
-							name: this.spacename,
-							gid: group.gid,
-							newGroupName: newDisplayName,
-						})
-					})
-				}
-			}
-
-			if (space.quota !== this.quota) {
-				this.$store.dispatch('setSpaceQuota', {
-					name: space.name,
-					quota: this.quota,
-				})
-			}
-
-			this.$emit('close')
-
-		},
-		/**
-		 * @param {string} groupname the displayname from a group
-		 * @param {string} oldSpaceName the currently space name
-		 * To fix a bug from release 3.0.2
-		 */
-		checkSpaceNameIsEqual(groupname, oldSpaceName) {
-			let spaceNameFiltered = ''
-
-			if (groupname.startsWith('U-')) {
-				spaceNameFiltered = groupname.replace('U-', '')
-			}
-
-			if (groupname.startsWith('WM-')) {
-				spaceNameFiltered = groupname.replace('WM-', '')
-			} else if (groupname.startsWith('GE-')) {
-				spaceNameFiltered = groupname.replace('GE-', '')
-			}
-
-			if (groupname.startsWith('G-')) {
-				spaceNameFiltered = groupname.replace('G-', '')
-			}
-
-			if (spaceNameFiltered === oldSpaceName) {
-				return true
-			}
-
-			return false
-		},
-		/**
-		 * @param {string} groupname the displayname from a group
-		 * @param {string} oldSpaceName the currently space name
-		 * To fix a bug from release 3.0.2
-		 */
-		replaceSpaceName(groupname, oldSpaceName) {
-			const spaceNameSplitted = groupname
-				.split('-')
-				.filter(element => element)
-
-			if (spaceNameSplitted[0] === 'WM'
-					|| spaceNameSplitted[0] === 'U') {
-				spaceNameSplitted[1] = oldSpaceName
-			}
-
-			if (spaceNameSplitted[0] === 'G') {
-				const lengthMax = spaceNameSplitted.length - 1
-				spaceNameSplitted[lengthMax] = oldSpaceName
-			}
-
-			return spaceNameSplitted.join('-')
-		},
 		updateColor(e) {
 			this.color = e
 		},
@@ -288,6 +201,13 @@ export default {
 		updateSpacename(spacename) {
 			this.spacename = spacename
 		},
+		handleClick() {
+			this.$emit('click-action', {
+				name: this.spacename,
+				quota: this.quota,
+				colorCode: this.color,
+			})
+		},
 	},
 }
 </script>
diff --git a/src/services/spaceService.js b/src/services/spaceService.js
index 711cb12ae..01679bb96 100644
--- a/src/services/spaceService.js
+++ b/src/services/spaceService.js
@@ -29,14 +29,17 @@ import showNotificationError, { showCreatingWorkspaceNotification } from './Noti
 import AddGroupToGroupfolderError from '../Errors/Groupfolders/AddGroupToGroupfolderError.js'
 
 /**
-	* @param {string} spaceName it's a name for the space to create
+	* @param {object} space a space object with required properties (quota, space name and quota)
 	* @param {object} vueInstance it's an instance of vue
 	* @return {object}
 	*/
-export function createSpace(spaceName, vueInstance = undefined) {
+export function createSpace(space, vueInstance = undefined) {
+	console.debug('createSpace - space', space)
 	const result = axios.post(generateUrl('/apps/workspace/spaces'),
 		{
-			spaceName,
+			spaceName: space.name,
+			colorCode: space.colorCode,
+			quota: space.quota,
 		})
 		.then(resp => {
 			if (typeof (resp.data) !== 'object') {