diff --git a/extension/iframe.tsx b/extension/iframe.tsx
index 28981638a5..ae91cdaba4 100644
--- a/extension/iframe.tsx
+++ b/extension/iframe.tsx
@@ -6,7 +6,7 @@ import { RouteComponentProps } from 'react-router';
 import { Provider } from 'mobx-react';
 import { configure } from 'mobx';
 import { ListMenu } from 'Component';
-import { dispatcher, C, UtilCommon } from 'Lib'; 
+import { dispatcher, C, UtilCommon, UtilRouter } from 'Lib'; 
 import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, popupStore } from 'Store';
 import Extension from 'json/extension.json';
 
@@ -105,7 +105,7 @@ class Iframe extends React.Component {
 	componentDidMount () {
 		console.log('isIframe', Util.isIframe());
 
-		UtilCommon.init(history);
+		UtilRouter.init(history);
 		commonStore.configSet({ debug: { mw: true } }, false);
 		
 		/* @ts-ignore */
@@ -129,7 +129,7 @@ class Iframe extends React.Component {
 			dispatcher.init(`http://127.0.0.1:${response.ports[1]}`);
 			commonStore.gatewaySet(`http://127.0.0.1:${response.ports[2]}`);
 
-			UtilCommon.route('/create', {});
+			UtilRouter.go('/create', {});
 		});
 	};
 
diff --git a/extension/iframe/create.tsx b/extension/iframe/create.tsx
index 7a4159d7ef..33db807334 100644
--- a/extension/iframe/create.tsx
+++ b/extension/iframe/create.tsx
@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Button, Block, Loader } from 'Component';
 import { I, C, UtilData } from 'Lib';
-import { blockStore } from 'Store';
+import { blockStore, commonStore } from 'Store';
 
 interface State {
 	isLoading: boolean;
@@ -69,7 +69,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 		this.setState({ isLoading: true });
 
 		UtilData.createsSubscriptions(() => {
-			C.ObjectOpen(ROOT_ID, '', (message: any) => {
+			C.ObjectOpen(ROOT_ID, '', commonStore.space, (message: any) => {
 				if (message.error.code) {
 					return;
 				};
diff --git a/extension/popup.tsx b/extension/popup.tsx
index ca7f3728aa..0a62d37b88 100644
--- a/extension/popup.tsx
+++ b/extension/popup.tsx
@@ -6,7 +6,7 @@ import { RouteComponentProps } from 'react-router';
 import { Provider } from 'mobx-react';
 import { configure } from 'mobx';
 import { ListMenu } from 'Component';
-import { dispatcher, C, UtilCommon } from 'Lib'; 
+import { dispatcher, C, UtilCommon, UtilRouter } from 'Lib'; 
 import { commonStore, authStore, blockStore, detailStore, dbStore, menuStore, popupStore, extensionStore } from 'Store';
 import Extension from 'json/extension.json';
 
@@ -112,7 +112,7 @@ class Popup extends React.Component {
 	componentDidMount () {
 		console.log('isPopup', Util.isPopup());
 
-		UtilCommon.init(history);
+		UtilRouter.init(history);
 		commonStore.configSet({ debug: { mw: true } }, false);
 
 		/* @ts-ignore */
diff --git a/extension/popup/create.tsx b/extension/popup/create.tsx
index a467aa1c30..4887eb5cf6 100644
--- a/extension/popup/create.tsx
+++ b/extension/popup/create.tsx
@@ -4,7 +4,7 @@ import { observable } from 'mobx';
 import arrayMove from 'array-move';
 import { getRange, setRange } from 'selection-ranges';
 import { Label, Input, Button, Select, Loader, Error, DragBox, Tag, Textarea } from 'Component';
-import { I, C, UtilCommon, UtilData, Relation, keyboard, UtilObject } from 'Lib';
+import { I, C, UtilCommon, UtilData, Relation, keyboard, UtilObject, UtilRouter } from 'Lib';
 import { dbStore, detailStore, commonStore, menuStore, extensionStore } from 'Store';
 import Constant from 'json/constant.json';
 import Util from '../lib/util';
@@ -55,7 +55,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 
 	render () {
 		const { isLoading, error } = this.state;
-		const { workspace } = commonStore;
+		const { space } = commonStore;
 		const tags = this.getTagsValue();
 
 		return (
@@ -92,7 +92,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 							<Select 
 								id="select-type" 
 								ref={ref => this.refType = ref}
-								readonly={!workspace}
+								readonly={!space}
 								value="" 
 								options={[]}
 								onChange={this.onTypeChange}
@@ -183,7 +183,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 			return;
 		};
 
-		const space = commonStore.workspace || spaces[0].id;
+		const space = commonStore.space || spaces[0].targetSpaceId;
 
 		this.refSpace.setOptions(spaces);
 		this.refSpace.setValue(space);
@@ -191,16 +191,16 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 	};
 
 	initType () {
-		const types = this.getTypes();
+		const options = this.getTypes().map(it => ({ ...it, id: it.uniqueKey }));
 
-		if (!this.refType || !types.length) {
+		if (!this.refType || !options.length) {
 			return;
 		};
 
-		const type = this.details.type || types[0].id;
+		const value = this.details.type || options[0].id;
 
-		this.refType.setOptions(types);
-		this.refType.setValue(type);
+		this.refType.setOptions(options);
+		this.refType.setValue(value);
 	};
 
 	initName () {
@@ -247,7 +247,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 	};
 
 	onSpaceChange (id: string): void {
-		commonStore.workspaceSet(id);
+		commonStore.spaceSet(id);
 		UtilData.createsSubscriptions(() => this.forceUpdate());
 	};
 
@@ -425,8 +425,11 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 		this.setState({ isLoading: true, error: '' });
 
 		const details = Object.assign({ name: this.refName?.getValue() }, this.details);
+		const type = details.type;
 
-		C.ObjectCreate(details, [], '', (message: any) => {
+		delete(details.type);
+
+		C.ObjectCreate(details, [], '', type, commonStore.space, (message: any) => {
 			this.setState({ isLoading: false });
 
 			if (message.error.code) {
@@ -434,7 +437,7 @@ const Create = observer(class Create extends React.Component<I.PageComponent, St
 			} else {
 				extensionStore.createdObject = message.details;
 
-				UtilCommon.route('/success', {});
+				UtilRouter.go('/success', {});
 			};
 
 			this.isCreating = false;
diff --git a/extension/popup/index.tsx b/extension/popup/index.tsx
index 3462b2c254..e9ee3926c0 100644
--- a/extension/popup/index.tsx
+++ b/extension/popup/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Label, Button, Error } from 'Component';
-import { I, UtilCommon, UtilData, dispatcher } from 'Lib';
+import { I, UtilRouter, UtilData, dispatcher } from 'Lib';
 import { authStore, commonStore } from 'Store';
 import Url from 'json/url.json';
 
@@ -55,7 +55,7 @@ const Index = observer(class Index extends React.Component<I.PageComponent, Stat
 			commonStore.gatewaySet(`http://127.0.0.1:${response.ports[2]}`);
 
 			UtilData.createsSubscriptions(() => {
-				UtilCommon.route('/create', {});
+				UtilRouter.go('/create', {});
 			});
 		});
 	};
diff --git a/extension/scss/popup.scss b/extension/scss/popup.scss
index 17c837e02c..1a42cf6575 100644
--- a/extension/scss/popup.scss
+++ b/extension/scss/popup.scss
@@ -26,7 +26,7 @@ html.anytypeWebclipper-popup { width: 268px; }
 		.row { margin: 0px 0px 10px 0px; }
 		.row:last-child { margin: 0px; }
 
-		.label { @include text-small; color: $colorDarkGrey; margin: 0px 0px 4px 0px; }
+		.label { @include text-small; color: $colorTextSecondary; margin: 0px 0px 4px 0px; }
 
 		.box { border: 1px solid $colorShapeSecondary; border-radius: 1px; min-height: 32px; }
 		.box {