diff --git a/ashes/src/components/custom-properties/custom-properties.css b/ashes/src/components/custom-properties/custom-properties.css
new file mode 100644
index 0000000000..348f0289c3
--- /dev/null
+++ b/ashes/src/components/custom-properties/custom-properties.css
@@ -0,0 +1,50 @@
+
+.controls {
+  position: absolute;
+  right: 21px;
+
+  & > i {
+    margin: 0 5px;
+    cursor: pointer;
+  }
+}
+
+:global .fc-save-cancel {
+  display: flex;
+  justify-content: flex-end;
+}
+
+:global .fc-save-cancel__cancel {
+  background-color: transparent;
+  text-decoration: underline;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.addProperty {
+  display: flex;
+  align-items: center;
+  margin: 30px -20px -20px -20px;
+  padding: 20px;
+  border-top: 1px solid #d9d9d9;
+  cursor: pointer;
+  transition: all .2s;
+
+  &:hover {
+    background-color: #f7f7f7;
+  }
+}
+
+.buttonTitle {
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.icon {
+  font-size: 10px;
+}
+
+
diff --git a/ashes/src/components/custom-properties/custom-properties.jsx b/ashes/src/components/custom-properties/custom-properties.jsx
new file mode 100644
index 0000000000..30e8c3abc5
--- /dev/null
+++ b/ashes/src/components/custom-properties/custom-properties.jsx
@@ -0,0 +1,247 @@
+// @flow
+
+// libs
+import React, { Component, Element } from 'react';
+import { autobind } from 'core-decorators';
+import { get, keys, omit } from 'lodash';
+
+// components
+import CustomPropertyModal from './custom-property-modal';
+import ConfirmationDialog from '../modal/confirmation-dialog';
+
+// style
+import s from './custom-properties.css';
+
+type Props = {
+  canAddProperty?: boolean,
+  attributes: Attributes,
+  onChange: (attributes: Attributes) => void,
+  schema?: Object,
+  children: Element<*>
+};
+
+type State = {
+  isAddingProperty: boolean,
+  isEditingProperty: boolean,
+  isDeletingProperty: boolean,
+  errors: { [id: string]: any },
+  currentEdit: {
+    name: string,
+    type: string,
+    value: any,
+  },
+  propertyToDelete: string,
+}
+
+export default class CustomProperties extends Component {
+  props: Props;
+
+  state: State = {
+    isAddingProperty: false,
+    isEditingProperty: false,
+    isDeletingProperty: false,
+    errors: {},
+    currentEdit: {
+      name: '',
+      type: '',
+      value: '',
+    },
+    propertyToDelete: '',
+  };
+
+  get customPropertyForm() {
+    if (this.state.isAddingProperty) {
+      return (
+        <CustomPropertyModal
+          isVisible={true}
+          onSave={this.handleCreateProperty}
+          onCancel={() => this.setState({ isAddingProperty: false })}
+        />
+      );
+    }
+
+    if (this.state.isEditingProperty) {
+      return (
+        <CustomPropertyModal
+          isVisible={true}
+          currentEdit={this.state.currentEdit}
+          onSave={this.handleEditProperty}
+          onCancel={() => this.setState({ isEditingProperty: false })}
+        />
+      );
+    }
+  }
+
+  get deletePropertyForm() {
+    if (this.state.isDeletingProperty) {
+      return (
+        <ConfirmationDialog
+          header="Delete Custom Property?"
+          body="Are you sure you want to delete the custom property?"
+          cancel="Cancel"
+          confirm="Yes, Delete"
+          isVisible={true}
+          confirmAction={this.handleDeleteProperty}
+          onCancel={() => this.setState({ isDeletingProperty: false }) }
+        />
+      );
+    }
+  }
+
+  @autobind
+  controlButtons(name: string, type: string, value: any) {
+    const defaultProperties = keys(get(this.props.schema, 'properties', {}));
+
+    if (defaultProperties.includes(name)) {
+      return null;
+    }
+
+    return (
+      <div className={s.controls}>
+        <i className="icon-edit" onClick={() => this.onEdit(name, type, value)} />
+        <i className="icon-trash" onClick={() => this.onDelete(name)} />
+      </div>
+    );
+  }
+
+  @autobind
+  handleCreateProperty(property: { fieldLabel: string, propertyType: string }) {
+    const { fieldLabel, propertyType } = property;
+    const label = fieldLabel.toLowerCase();
+    // TODO show error message, if fieldLabel is not unique
+    if (!this.isUnique(label)) {
+      return null;
+    }
+
+    const value = (() => {
+      switch (propertyType) {
+        case('date'):
+          return new Date().toString();
+        case('bool'):
+          return false;
+        default:
+          return '';
+      }
+    })();
+    this.setState({
+      isAddingProperty: false
+    }, () => this.handleChange(label, propertyType, value));
+  }
+
+  @autobind
+  handleEditProperty(property: { fieldLabel: string, propertyType: string, fieldValue: any }) {
+    const { attributes } = this.props;
+    const { currentEdit: { name } } = this.state;
+    const { fieldLabel, propertyType, fieldValue } = property;
+
+    const preparedObject = omit(attributes, name);
+    const newAttributes = {
+      ...preparedObject,
+      [fieldLabel]: {
+        t: propertyType,
+        v: fieldValue,
+      }
+    };
+
+    this.setState({
+      isEditingProperty: false,
+      currentEdit: {
+        name: '',
+        type: '',
+        value: ''
+      }
+    }, this.props.onChange(newAttributes));
+  }
+
+  @autobind
+  handleDeleteProperty() {
+    const newAttributes = omit(this.props.attributes, this.state.propertyToDelete);
+    this.setState({ isDeletingProperty: false }, this.props.onChange(newAttributes));
+  }
+
+  @autobind
+  handleChange(name: string, type: string, value: any) {
+    const { attributes } = this.props;
+    const newAttributes = {
+      ...attributes,
+      [name]: {
+        t: type,
+        v: value,
+      }
+    };
+
+    this.props.onChange(newAttributes);
+  }
+
+  @autobind
+  isUnique(fieldLabel: string) {
+    const reservedNames = keys(get(this.props, 'attributes', {}));
+    const unique = !reservedNames.includes(fieldLabel);
+    return unique;
+  }
+
+  @autobind
+  processAttr(content: Element<*>, name: string, type: string, value: any) {
+    return (
+      <div key={name}>
+        {this.controlButtons(name, type, value)}
+        {content}
+      </div>
+    );
+  }
+
+  @autobind
+  handleAddProperty() {
+    this.setState({ isAddingProperty: true });
+  }
+
+  @autobind
+  onEdit(name: string, type: string, value: any) {
+    this.setState({
+      isEditingProperty: true,
+      currentEdit: {
+        name,
+        type,
+        value
+      },
+    });
+  }
+
+  @autobind
+  onDelete(name: string) {
+    this.setState({
+      isDeletingProperty: true,
+      propertyToDelete: name
+    });
+  }
+
+  get addCustomProperty() {
+    if (this.props.canAddProperty) {
+      return (
+        <div className={s.addProperty} onClick={this.handleAddProperty}>
+          <span className={s.buttonTitle}>Custom Property</span>
+          <a className={s.icon}>
+            <i className="icon-add" />
+          </a>
+        </div>
+      );
+    }
+  }
+
+  get children(): Element<*> {
+    return React.cloneElement((this.props.children), {
+      processAttr: this.processAttr,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.children}
+        {this.addCustomProperty}
+        {this.customPropertyForm}
+        {this.deletePropertyForm}
+      </div>
+    );
+  }
+}
diff --git a/ashes/src/components/custom-properties/custom-property-modal.css b/ashes/src/components/custom-properties/custom-property-modal.css
new file mode 100644
index 0000000000..d830d88f8a
--- /dev/null
+++ b/ashes/src/components/custom-properties/custom-property-modal.css
@@ -0,0 +1,12 @@
+.modal {
+  min-width: 575px;
+}
+
+:global .fc-dropdown {
+  max-width: 100%;
+  margin-bottom: 10px;
+}
+
+:global .fc-content-box {
+  margin-bottom: 0;
+}
diff --git a/ashes/src/components/products/custom-property.jsx b/ashes/src/components/custom-properties/custom-property-modal.jsx
similarity index 57%
rename from ashes/src/components/products/custom-property.jsx
rename to ashes/src/components/custom-properties/custom-property-modal.jsx
index cc26fba0b8..2e9a507866 100644
--- a/ashes/src/components/products/custom-property.jsx
+++ b/ashes/src/components/custom-properties/custom-property-modal.jsx
@@ -3,16 +3,20 @@
  */
 
 // libs
-import React, { Component, Element } from 'react';
+import { isEmpty, map, upperFirst } from 'lodash';
 import { autobind } from 'core-decorators';
-import _ from 'lodash';
+import React, { Component, Element } from 'react';
 
 // components
-import { Dropdown } from '../dropdown';
-import { FormField } from '../forms';
-import wrapModal from '../modal/wrapper';
-import ContentBox from '../content-box/content-box';
+import { Dropdown } from 'components/dropdown';
+import { FormField } from 'components/forms';
+import wrapModal from 'components/modal/wrapper';
+import ContentBox from 'components/content-box/content-box';
 import SaveCancel from 'components/core/save-cancel';
+import renderers from 'components/object-form/renderers';
+
+//style
+import s from './custom-property-modal.css';
 
 const propertyTypes = {
   string: 'Text',
@@ -20,28 +24,42 @@ const propertyTypes = {
   date: 'Date',
   price: 'Price',
   bool: 'Yes/No',
+  color: 'Color',
+  image: 'Image'
 };
 
 type Props = {
-  onSave: (state: State) => void,
-  onCancel: () => void,
+  onSave: (state: State) => any,
+  onCancel: () => any,
+  currentEdit?: {
+    name: string,
+    type: string,
+    value: any,
+  }
 };
 
 type State = {
   fieldLabel: string,
   propertyType: string,
+  fieldValue: any,
 };
 
-class CustomProperty extends Component<void, Props, State> {
+class CustomPropertyModal extends Component<void, Props, State> {
   props: Props;
-  state: State;
+
+  state: State = {
+    fieldLabel: '',
+    propertyType: '',
+    fieldValue: '',
+  };
 
   constructor(props: Props) {
     super(props);
-    this.state = {
-      fieldLabel: '',
-      propertyType: '',
-    };
+    Object.keys(propertyTypes).map((type) => {
+      if (Object.keys(renderers).indexOf(`render${upperFirst(type)}`) === -1) {
+        console.warn(`Custom property type: "${type}", does not have renderer!`);
+      }
+    });
   }
 
   componentDidMount() {
@@ -49,6 +67,14 @@ class CustomProperty extends Component<void, Props, State> {
     if (fieldLabelInput) {
       fieldLabelInput.focus();
     }
+
+    if (this.props.currentEdit) {
+      this.setState({
+        fieldLabel: this.props.currentEdit.name,
+        propertyType: this.props.currentEdit.type,
+        fieldValue: this.props.currentEdit.value,
+      });
+    }
   }
 
   get closeAction(): Element<*> {
@@ -56,21 +82,37 @@ class CustomProperty extends Component<void, Props, State> {
   }
 
   get propertyTypes(): Array<Element<*>> {
-    return _.map(propertyTypes, (type, key) => [key, type]);
+    return map(propertyTypes, (type, key) => [key, type]);
   }
 
   get saveDisabled(): boolean {
-    return _.isEmpty(this.state.fieldLabel) || _.isEmpty(this.state.propertyType);
+    return isEmpty(this.state.fieldLabel) || isEmpty(this.state.propertyType);
   }
 
   @autobind
-  handleUpdateLabel({target}) {
+  handleUpdateLabel({ target }) {
     this.setState({ fieldLabel: target.value });
   }
 
   @autobind
   handleUpdateType(value) {
-    this.setState({ propertyType: value });
+    const fieldValue = (() => {
+      switch (value) {
+        case('date'):
+          return new Date().toString();
+        case('bool'):
+          return false;
+        case('image'):
+          return {};
+        default:
+          return '';
+      }
+    })();
+
+    this.setState({
+      propertyType: value,
+      fieldValue: fieldValue
+    });
   }
 
   @autobind
@@ -80,7 +122,7 @@ class CustomProperty extends Component<void, Props, State> {
   }
 
   @autobind
-  handleKeyPress(event){
+  handleKeyPress(event) {
     if (!this.saveDisabled && event.keyCode === 13 /*enter*/) {
       event.preventDefault();
       this.props.onSave(this.state);
@@ -88,10 +130,12 @@ class CustomProperty extends Component<void, Props, State> {
   }
 
   render() {
+    const title = this.props.currentEdit ? 'Edit Custom Property' : 'New Custom Property';
+
     return (
-      <div className="fc-product-details__custom-property">
+      <div className={s.modal}>
         <div className="fc-modal-container" onKeyDown={this.handleKeyPress}>
-          <ContentBox title="New Custom Property" actionBlock={this.closeAction}>
+          <ContentBox title={title} actionBlock={this.closeAction}>
             <FormField
               className="fc-product-details__field"
               label="Field Label"
@@ -129,6 +173,6 @@ class CustomProperty extends Component<void, Props, State> {
   }
 }
 
-const Wrapped: Class<Component<void, Props, State>> = wrapModal(CustomProperty);
+const Wrapped: Class<Component<void, Props, State>> = wrapModal(CustomPropertyModal);
 
 export default Wrapped;
diff --git a/ashes/src/components/image-card/image-card.css b/ashes/src/components/image-card/image-card.css
index 0a65962805..b20f33f89d 100644
--- a/ashes/src/components/image-card/image-card.css
+++ b/ashes/src/components/image-card/image-card.css
@@ -21,6 +21,7 @@
 .actions {
   position: absolute;
   width: 100%;
+  height: 60px;
   background: #333a44;
   opacity: .86;
   text-align: right;
@@ -34,7 +35,7 @@
     color: #fff;
     opacity: .76;
     font-size: 18px;
-    margin: 23px 10px;
+    margin: 18px 10px;
     cursor: pointer;
     transition: opacity .2s;
 
diff --git a/ashes/src/components/image-card/image-card.jsx b/ashes/src/components/image-card/image-card.jsx
index 14d955b32b..06c966700b 100644
--- a/ashes/src/components/image-card/image-card.jsx
+++ b/ashes/src/components/image-card/image-card.jsx
@@ -10,7 +10,7 @@ import { autobind } from 'core-decorators';
 import React, { Component, Element } from 'react';
 
 // components
-import Image from '../image/image';
+import ImageLoader from '../image/image';
 
 export type Action = {
   name: string,
@@ -21,10 +21,11 @@ type Props = {
   id: number,
   src: string,
   actions: Array<Action>,
-  title: string,
+  title?: string,
   loading: boolean,
   secondaryTitle?: string,
   className?: string,
+  imageComponent?: string,
 };
 
 type State = {
@@ -96,13 +97,16 @@ export default class ImageCard extends Component {
     );
   }
 
-  render() {
-    const { id, src, className } = this.props;
+  get imageLoader(): ?Element<*> {
+    const { id, src, imageComponent, loading } = this.props;
+    return !loading ? <ImageLoader id={id} src={src} imageComponent={imageComponent} /> : null;
+  }
 
+  render() {
     return (
-      <div className={classNames(styles.card, className)}>
+      <div className={classNames(styles.card, this.props.className)}>
         <div className={styles.image} onMouseOver={this.showActions} onMouseOut={this.hideActions}>
-          <Image id={id} src={src} />
+          { this.imageLoader }
         </div>
         {this.actions}
         {this.description}
diff --git a/ashes/src/components/image/image.jsx b/ashes/src/components/image/image.jsx
index a18b60997d..06b61d1011 100644
--- a/ashes/src/components/image/image.jsx
+++ b/ashes/src/components/image/image.jsx
@@ -11,12 +11,12 @@ import Transition from 'react-transition-group/CSSTransitionGroup';
 
 // components
 import WaitAnimation from '../common/wait-animation';
-import ProductImage from 'components/imgix/product-image';
 
 type Props = {
   id: number,
   src: string,
-  loader?: string|Element<*>;
+  loader?: string | Element<*>,
+  imageComponent: string,
 }
 
 type State = {
@@ -33,6 +33,10 @@ export default class ImageLoader extends Component {
     error: false,
   };
 
+  static defaultProps = {
+    imageComponent: 'img',
+  };
+
   img: ?Image;
   showTransition: boolean = true;
 
@@ -94,14 +98,18 @@ export default class ImageLoader extends Component {
   }
 
   get image(): ?Element<*> {
-    return this.state.ready ? (
-      <ProductImage
+    const ImageComponent = this.props.imageComponent;
+
+    if (!this.state.ready) return null;
+
+    return (
+      <ImageComponent
         src={this.state.src}
         width={286}
         height={286}
         key={this.props.id}
       />
-    ) : null;
+    );
   }
 
   wrapToTransition(img: ?Element<*>) {
diff --git a/ashes/src/components/images/album.jsx b/ashes/src/components/images/album.jsx
index 35c18d1c51..925852b5cb 100644
--- a/ashes/src/components/images/album.jsx
+++ b/ashes/src/components/images/album.jsx
@@ -8,8 +8,9 @@ import { autobind, debounce } from 'core-decorators';
 import React, { Component, Element } from 'react';
 
 // components
-import ConfirmationDialog from '../modal/confirmation-dialog';
-import Alert from '../alerts/alert';
+import ConfirmationDialog from 'components/modal/confirmation-dialog';
+import Alert from 'components/alerts/alert';
+import ProductImage from 'components/imgix/product-image';
 import AlbumWrapper from './album-wrapper/album-wrapper';
 import EditAlbum from './edit-album';
 import Upload from '../upload/upload';
@@ -51,7 +52,7 @@ export default class Album extends Component {
   };
 
   _uploadRef: Upload;
-  idsToKey: { [key:any]: string };
+  idsToKey: { [key: any]: string };
 
   constructor(...args: Array<any>) {
     super(...args);
@@ -137,12 +138,13 @@ export default class Album extends Component {
     const { album, loading } = this.props;
 
     return (
-      <EditAlbum className={styles.modal}
-                 isVisible={this.state.editMode}
-                 album={album}
-                 loading={loading}
-                 onCancel={this.handleCancelEditAlbum}
-                 onSave={this.handleConfirmEditAlbum}
+      <EditAlbum
+        className={styles.modal}
+        isVisible={this.state.editMode}
+        album={album}
+        loading={loading}
+        onCancel={this.handleCancelEditAlbum}
+        onSave={this.handleConfirmEditAlbum}
       />
     );
   }
@@ -163,14 +165,15 @@ export default class Album extends Component {
     );
 
     return (
-      <ConfirmationDialog className={styles.modal}
-                          isVisible={this.state.archiveMode}
-                          header='Archive Album'
-                          body={body}
-                          cancel='Cancel'
-                          confirm='Yes, Archive'
-                          onCancel={this.handleCancelArchiveAlbum}
-                          confirmAction={this.handleConfirmArchiveAlbum}
+      <ConfirmationDialog
+        className={styles.modal}
+        isVisible={this.state.archiveMode}
+        header='Archive Album'
+        body={body}
+        cancel='Cancel'
+        confirm='Yes, Archive'
+        onCancel={this.handleCancelArchiveAlbum}
+        confirmAction={this.handleConfirmArchiveAlbum}
       />
     );
   }
@@ -194,12 +197,13 @@ export default class Album extends Component {
         onDrop={this.handleNewFiles}
         empty={album.images.length == 0}
       >
-        <SortableTiles itemWidth={298}
-                       itemHeight={372}
-                       gutter={10}
-                       gutterY={40}
-                       loading={loading}
-                       onSort={this.handleSortImages}
+        <SortableTiles
+          itemWidth={298}
+          itemHeight={372}
+          gutter={10}
+          gutterY={40}
+          loading={loading}
+          onSort={this.handleSortImages}
         >
           {album.images.map((image: ImageFile, idx: number) => {
             if (image.key && image.id) this.idsToKey[image.id] = image.key;
@@ -210,6 +214,7 @@ export default class Album extends Component {
                 imagePid={imagePid}
                 editImage={(form: ImageInfo) => this.props.editImage(idx, form)}
                 deleteImage={() => this.props.deleteImage(idx)}
+                imageComponent={ProductImage}
                 key={imagePid}
               />
             );
@@ -222,13 +227,15 @@ export default class Album extends Component {
       <div>
         {this.editAlbumDialog}
         {this.archiveAlbumDialog}
-        <AlbumWrapper title={album.name}
-                      titleWrapper={(title: string) => this.renderTitle(title, album.images.length)}
-                      position={position}
-                      albumsCount={albumsCount}
-                      contentClassName={styles.albumContent}
-                      onSort={this.handleMove}
-                      actions={this.getAlbumActions()}
+
+        <AlbumWrapper
+          title={album.name}
+          titleWrapper={(title: string) => this.renderTitle(title, album.images.length)}
+          position={position}
+          albumsCount={albumsCount}
+          contentClassName={styles.albumContent}
+          onSort={this.handleMove}
+          actions={this.getAlbumActions()}
         >
           {albumContent}
         </AlbumWrapper>
diff --git a/ashes/src/components/images/edit-image.jsx b/ashes/src/components/images/edit-image.jsx
index 273f76a089..6817e50e3a 100644
--- a/ashes/src/components/images/edit-image.jsx
+++ b/ashes/src/components/images/edit-image.jsx
@@ -29,6 +29,14 @@ class EditImage extends Component {
     alt: this.props.image.alt,
   };
 
+  componentWillReceiveProps(nextProps: Props) {
+    this.setState({
+      src: nextProps.image.src || '',
+      title: nextProps.image.title || '',
+      alt: nextProps.image.alt || '',
+    });
+  }
+
   get closeAction() {
     return <a onClick={this.props.onCancel}>&times;</a>;
   }
diff --git a/ashes/src/components/images/image.jsx b/ashes/src/components/images/image.jsx
index 340455c7e1..8e0610911c 100644
--- a/ashes/src/components/images/image.jsx
+++ b/ashes/src/components/images/image.jsx
@@ -22,15 +22,20 @@ export type Props = {
   image: ImageFile;
   editImage: (info: ImageInfo) => Promise<*>;
   deleteImage: () => Promise<*>;
-  imagePid: string|number;
+  imagePid: string | number;
+  imageComponent?: string;
 };
 
+type DefaultProps = {
+  imageComponent: string;
+}
+
 type State = {
   editMode: boolean;
   deleteMode: boolean;
 };
 
-export default class Image extends Component<void, Props, State> {
+export default class Image extends Component<DefaultProps, Props, State> {
   props: Props;
 
   state: State = {
@@ -38,6 +43,10 @@ export default class Image extends Component<void, Props, State> {
     deleteMode: false,
   };
 
+  static defaultProps: DefaultProps = {
+    imageComponent: 'img',
+  };
+
   @autobind
   handleEditImage(): void {
     this.setState({ editMode: true });
@@ -122,7 +131,7 @@ export default class Image extends Component<void, Props, State> {
   }
 
   render() {
-    const { image, imagePid } = this.props;
+    const { image, imagePid, imageComponent } = this.props;
 
     return (
       <div>
@@ -136,6 +145,7 @@ export default class Image extends Component<void, Props, State> {
           actions={this.getImageActions()}
           loading={image.loading}
           key={`${imagePid}`}
+          imageComponent={imageComponent}
         />
       </div>
     );
diff --git a/ashes/src/components/images/images.jsx b/ashes/src/components/images/images.jsx
index 8093356dbe..bd7624bd42 100644
--- a/ashes/src/components/images/images.jsx
+++ b/ashes/src/components/images/images.jsx
@@ -10,7 +10,7 @@ import { autobind } from 'core-decorators';
 import React, { Component, Element } from 'react';
 
 // components
-import WaitAnimation from '../common/wait-animation';
+import WaitAnimation from 'components/common/wait-animation';
 import { AddButton } from 'components/core/button';
 import EditAlbum from './edit-album';
 import Album from './album';
@@ -80,13 +80,14 @@ class Images extends Component {
     const album = { name: '', images: [] };
 
     return (
-      <EditAlbum className={styles.modal}
-                 isVisible={this.state.newAlbumMode}
-                 album={album}
-                 loading={this.props.addAlbumInProgress}
-                 onCancel={this.handleCancelEditAlbum}
-                 onSave={this.addNewAlbum}
-                 isNew={true}
+      <EditAlbum
+        className={styles.modal}
+        isVisible={this.state.newAlbumMode}
+        album={album}
+        loading={this.props.addAlbumInProgress}
+        onCancel={this.handleCancelEditAlbum}
+        onSave={this.addNewAlbum}
+        isNew={true}
       />
     );
   }
@@ -106,18 +107,19 @@ class Images extends Component {
         </div>
         {albums.map((album: TAlbum, i: number) => {
           return (
-            <Album album={album}
-                   loading={editAlbumInProgress}
-                   upload={(files: Array<ImageFile>) => this.props.uploadImages(context, album.id, files)}
-                   editImage={(idx: number, form: ImageInfo) => this.props.editImage(context, album.id, idx, form)}
-                   deleteImage={(idx: number) => this.props.deleteImage(context, album.id, idx)}
-                   editAlbum={(album: TAlbum) => this.props.editAlbum(context, album.id, album)}
-                   moveAlbum={(position: number) => this.props.moveAlbum(context, entityId, album.id, position)}
-                   archiveAlbum={(id: number) => this.props.archiveAlbum(context, id)}
-                   position={i}
-                   albumsCount={albums.length}
-                   key={album.id}
-                   fetchAlbums={() => this.props.fetchAlbums(context, entityId)}
+            <Album
+              album={album}
+              loading={editAlbumInProgress}
+              upload={(files: Array<ImageFile>) => this.props.uploadImages(context, album.id, files)}
+              albumsCount={albums.length}
+              editImage={(idx: number, form: ImageInfo) => this.props.editImage(context, album.id, idx, form)}
+              deleteImage={(idx: number) => this.props.deleteImage(context, album.id, idx)}
+              editAlbum={(album: TAlbum) => this.props.editAlbum(context, album.id, album)}
+              moveAlbum={(position: number) => this.props.moveAlbum(context, entityId, album.id, position)}
+              archiveAlbum={(id: number) => this.props.archiveAlbum(context, id)}
+              fetchAlbums={() => this.props.fetchAlbums(context, entityId)}
+              position={i}
+              key={album.id}
             />
           );
         })}
diff --git a/ashes/src/components/object-form/form-field.jsx b/ashes/src/components/object-form/form-field.jsx
new file mode 100644
index 0000000000..aa9e5ae2c3
--- /dev/null
+++ b/ashes/src/components/object-form/form-field.jsx
@@ -0,0 +1,18 @@
+/* @flow */
+
+import React from 'react';
+import { FormField } from 'components/forms';
+
+// TODO: fix content type
+export default function renderFormField(name: string, content: any, options: AttrOptions) {
+  return (
+    <FormField
+      {...options}
+      className="fc-object-form__field"
+      labelClassName="fc-object-form__field-label"
+      key={`object-form-attribute-${name}`}
+    >
+      {content}
+    </FormField>
+  );
+}
diff --git a/ashes/src/components/object-form/object-form-inner.jsx b/ashes/src/components/object-form/object-form-inner.jsx
index ff242d9582..a54db1471e 100644
--- a/ashes/src/components/object-form/object-form-inner.jsx
+++ b/ashes/src/components/object-form/object-form-inner.jsx
@@ -2,21 +2,16 @@
  * @flow
  */
 
+// libs
 import React, { Component } from 'react';
 import _ from 'lodash';
 import { autobind } from 'core-decorators';
 import classNames from 'classnames';
+import invariant from 'invariant';
 import { stripTags } from 'lib/text-utils';
 import { isDefined } from 'lib/utils';
 
-import { FormField, FormFieldError } from '../forms';
-import { SliderCheckbox } from '../checkbox/checkbox';
-import CurrencyInput from '../forms/currency-input';
-import CustomProperty from '../products/custom-property';
-import DatePicker from '../datepicker/datepicker';
-import RichTextEditor from '../rich-text-editor/rich-text-editor';
-import { Dropdown } from '../dropdown';
-import SwatchInput from '../forms/swatch-input';
+import renderers from './renderers';
 
 import type { AttrSchema } from 'paragons/object';
 
@@ -28,103 +23,24 @@ type Props = {
   onChange: (attributes: Attributes) => void,
   schema?: Object,
   className?: string,
+  processAttr?: Function,
 };
 
 type State = {
-  isAddingProperty: boolean,
-  errors: {[id:string]: any},
+  errors: { [id: string]: any }
 };
 
-type AttrOptions = {
-  required: boolean,
-  label: string,
-  isDefined: (value: any) => boolean,
-  disabled?: boolean,
-};
-
-const inputClass = 'fc-object-form__field-value';
-
 function formatLabel(label: string): string {
   return _.snakeCase(label).split('_').reduce((res, val) => {
     return `${res} ${_.capitalize(val)}`;
   });
 }
 
-// TODO: fix content type
-export function renderFormField(name: string, content: any, options: AttrOptions) {
-  return (
-    <FormField
-      {...options}
-      className="fc-object-form__field"
-      labelClassName="fc-object-form__field-label"
-      key={`object-form-attribute-${name}`}
-    >
-      {content}
-    </FormField>
-  );
-}
-
-function guessType(value: any): string {
-  const typeOf = typeof value;
-  switch (typeOf) {
-    case 'string':
-    case 'number':
-    case 'boolean':
-      return typeOf;
-    default:
-      return 'string';
-  }
-}
-
 export default class ObjectFormInner extends Component {
   props: Props;
-  state: State = { isAddingProperty: false, errors: {} };
-
-  get addCustomProperty() {
-    if (this.props.canAddProperty) {
-      return (
-        <div className="fc-object-form__add-custom-property">
-          Custom Property
-          <a id="fct-add-btn__custom-property" className="fc-object-form__add-custom-property-icon"
-             onClick={this.handleAddProperty}>
-            <i className="icon-add" />
-          </a>
-        </div>
-      );
-    }
-  }
-
-  get customPropertyForm() {
-    if (this.state.isAddingProperty) {
-      return (
-        <CustomProperty
-          isVisible={true}
-          onSave={this.handleCreateProperty}
-          onCancel={() => this.setState({ isAddingProperty: false })}
-        />
-      );
-    }
-  }
-
-  @autobind
-  handleAddProperty() {
-    this.setState({ isAddingProperty: true });
-  }
-
-  @autobind
-  handleCreateProperty(property: { fieldLabel: string, propertyType: string }) {
-    const { fieldLabel, propertyType } = property;
-    const value = (() => {
-      switch(propertyType) {
-        case('date'): return new Date().toString();
-        case('bool'): return false;
-        default: return '';
-      }
-    })();
-    this.setState({
-      isAddingProperty: false
-    }, () => this.handleChange(fieldLabel, propertyType, value));
-  }
+  state: State = {
+    errors: {},
+  };
 
   @autobind
   handleChange(name: string, type: string, value: any) {
@@ -149,160 +65,6 @@ export default class ObjectFormInner extends Component {
     this.props.onChange(newAttributes);
   }
 
-  renderBoolean(name: string, value: boolean, options: AttrOptions) {
-    const onChange = () => this.handleChange(name, 'bool', !value);
-    const sliderCheckbox = (
-      <SliderCheckbox
-        id={name}
-        checked={value}
-        onChange={onChange}
-      />
-    );
-
-    return renderFormField(name, sliderCheckbox, options);
-  }
-
-  renderBool(...args: Array<any>) {
-    return this.renderBoolean(...args);
-  }
-
-  renderElement(name: string, value: any, options: AttrOptions) {
-    return renderFormField(name, value, options);
-  }
-
-  renderDate(name: string, value: string, options: AttrOptions) {
-    const dateValue = new Date(value);
-    const onChange = (v: Date) => this.handleChange(name, 'date', v.toISOString());
-    const dateInput = <DatePicker date={dateValue} onChange={onChange} />;
-    return renderFormField(name, dateInput, options);
-  }
-
-  renderPrice(name: string, value: any, options: AttrOptions) {
-    const priceValue: string = _.get(value, 'value', '');
-    const priceCurrency: string = _.get(value, 'currency', 'USD');
-    const onChange = value => this.handleChange(name, 'price', {
-      currency: priceCurrency,
-      value: Number(value)
-    });
-    const currencyInput = (
-      <CurrencyInput
-        inputClass={inputClass}
-        inputName={name}
-        value={priceValue}
-        onChange={onChange}
-      />
-    );
-
-    return renderFormField(name, currencyInput, options);
-  }
-
-  renderRichText(name: string, value: any, options: AttrOptions) {
-    const onChange = v => this.handleChange(name, 'richText', v);
-    const error = _.get(this.state, ['errors', name]);
-    const classForContainer = classNames('fc-object-form__field', {
-      '_has-error': error != null,
-    });
-    const nameVal = _.kebabCase(name);
-
-    return (
-      <div className={classForContainer}>
-        <RichTextEditor
-          className={`fc-rich-text__name-${nameVal}`}
-          label={options.label}
-          value={value}
-          onChange={onChange}
-        />
-        {error && <FormFieldError error={error} />}
-      </div>
-    );
-  }
-
-  renderString(name: string, value: string = '', options: AttrOptions) {
-    const onChange = ({target}) => {
-      return this.handleChange(name, 'string', target.value);
-    };
-    const stringInput = (
-      <input
-        className={inputClass}
-        type="text"
-        name={name}
-        value={value || ''}
-        onChange={onChange}
-        disabled={options.disabled}
-      />
-    );
-
-    return renderFormField(name, stringInput, options);
-  }
-
-  renderNumber(name: string, value: ?number = null, options: AttrOptions) {
-    const onChange = ({target}) => {
-      return this.handleChange(name, 'number', target.value == '' ? null : Number(target.value));
-    };
-    const stringInput = (
-      <input
-        className={inputClass}
-        type="number"
-        name={name}
-        value={value == null ? '' : value}
-        onChange={onChange}
-      />
-    );
-
-    return renderFormField(name, stringInput, options);
-  }
-
-  renderOptions(name: string, value: any, options: AttrOptions) {
-    const fieldOptions = this.props.fieldsOptions && this.props.fieldsOptions[name];
-    if (!fieldOptions) throw new Error('You must define fieldOptions for options fields');
-
-    const onChange = v => this.handleChange(name, 'options', v);
-    const error = _.get(this.state, ['errors', name]);
-
-    return (
-      <div className="fc-object-form_field">
-        <div className="fc-object-form__field-label">{options.label}</div>
-        <Dropdown
-          value={value}
-          items={fieldOptions}
-          onChange={onChange}
-        />
-        {error && <FormFieldError error={error} />}
-      </div>
-    );
-  }
-
-  renderText(name: string, value: string = '', options: AttrOptions) {
-    const onChange = ({target}) => {
-      return this.handleChange(name, 'text', target.value);
-    };
-    const textInput = (
-      <textarea
-        className={inputClass}
-        name={name}
-        onChange={onChange}
-        value={value}
-      />
-    );
-
-    return renderFormField(name, textInput, options);
-  }
-
-  renderColor(name: string, value: string = '', options: AttrOptions) {
-    const label = _.upperFirst(options.label);
-    const onChange = v => this.handleChange(name, 'color', v);
-
-    return (
-      <div>
-        <label className="fc-object-form__field-label">{label}</label>
-        <SwatchInput
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-    );
-  }
-
   shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
     const attributesChanged = !_.eq(this.props.attributes, nextProps.attributes);
     const stateChanged = !_.eq(this.state, nextState);
@@ -315,24 +77,34 @@ export default class ObjectFormInner extends Component {
     return schema ? _.includes(schema.required, name) : false;
   }
 
-  guessRenderName(schema: ?AttrSchema, attribute: ?Attribute): string {
+  getTypeFromSchema(schema: AttrSchema): string {
+    if (schema.widget) {
+      return schema.widget;
+    }
+
+    return _.isArray(schema.type) ? _.first(schema.type) : schema.type;
+  }
+
+  getType(schema: ?AttrSchema, attribute: ?Attribute): ?string {
     let name = null;
 
     if (attribute) {
       name = attribute.t;
     }
-    if (name == null && schema) {
-      name = schema.widget || schema.type;
+    if (name === null && schema) {
+      name = this.getTypeFromSchema(schema);
     }
-    if (name == 'integer') {
+    if (name === 'integer') {
       name = 'number';
     }
 
-    let renderName = `render${_.upperFirst(name)}`;
-    if (!(renderName in this)) {
-      renderName = 'renderString';
-    }
-    return renderName;
+    return name;
+  }
+
+  guessRenderName(schema: ?AttrSchema, attribute: ?Attribute): string {
+    let type = this.getType(schema, attribute);
+
+    return `render${_.upperFirst(type)}`;
   }
 
   getAttrOptions(name: string,
@@ -343,7 +115,7 @@ export default class ObjectFormInner extends Component {
       isDefined: isDefined,
       disabled: schema && schema.disabled,
     };
-    if (schema && schema.widget == 'richText') {
+    if (schema && schema.widget === 'richText') {
       options.isDefined = value => isDefined(stripTags(value));
     }
 
@@ -361,15 +133,26 @@ export default class ObjectFormInner extends Component {
 
       const renderName = this.guessRenderName(attrSchema, attribute);
       const attrOptions = this.getAttrOptions(name, attrSchema);
-      // $FlowFixMe: guessRenderName is enough
-      return React.cloneElement(this[renderName](name, attribute && attribute.v, attrOptions), { key: name });
+
+      const renderFn = renderers[renderName];
+      const type = this.getType(schema, attribute);
+
+      invariant(type, `There is no type defined for field "${name}".`);
+      invariant(renderFn, `There is no method for render "${type}" type.`);
+
+      const renderer = renderFn(this.state.errors, this.handleChange);
+      const content = React.cloneElement(renderer(name, attribute && attribute.v, attrOptions), { key: name });
+
+      if (this.props.processAttr) {
+        return this.props.processAttr(content, name, attribute && attribute.t, attribute && attribute.v);
+      }
+
+      return content;
     });
 
     return (
       <div className={classNames('fc-object-form', className)}>
         {renderedAttributes}
-        {this.addCustomProperty}
-        {this.customPropertyForm}
       </div>
     );
   }
diff --git a/ashes/src/components/object-form/renderers/boolean.jsx b/ashes/src/components/object-form/renderers/boolean.jsx
new file mode 100644
index 0000000000..ae2090dae4
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/boolean.jsx
@@ -0,0 +1,29 @@
+/* @flow */
+
+// libs
+import noop from 'lodash/noop';
+import React from 'react';
+
+// components
+import renderFormField from '../form-field';
+import { SliderCheckbox } from 'components/checkbox/checkbox';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderBoolean(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function (name: string, value: boolean, options: AttrOptions) {
+    const handler = () => onChange(name, 'bool', !value);
+
+    const sliderCheckbox = (
+      <SliderCheckbox
+        id={name}
+        checked={value}
+        onChange={handler}
+      />
+    );
+
+    return renderFormField(name, sliderCheckbox, options);
+  };
+}
+
+
diff --git a/ashes/src/components/object-form/renderers/color.jsx b/ashes/src/components/object-form/renderers/color.jsx
new file mode 100644
index 0000000000..880abfc6fe
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/color.jsx
@@ -0,0 +1,25 @@
+/* @flow */
+
+// libs
+import noop from 'lodash/noop';
+import React from 'react';
+
+// components
+import renderFormField from '../form-field';
+import SwatchInput from 'components/forms/swatch-input';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderColor(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function(name: string, value: any, options: AttrOptions) {
+    const handler = v => onChange(name, 'color', v);
+    const colorSwatch = (
+      <SwatchInput
+        value={value}
+        onChange={handler}
+      />
+    );
+
+    return renderFormField(name, colorSwatch, options);
+  };
+}
diff --git a/ashes/src/components/object-form/renderers/date.jsx b/ashes/src/components/object-form/renderers/date.jsx
new file mode 100644
index 0000000000..399e67deea
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/date.jsx
@@ -0,0 +1,23 @@
+/* @flow */
+
+// libs
+import noop from 'lodash/noop';
+import React from 'react';
+
+// components
+import renderFormField from '../form-field';
+import DatePicker from 'components/datepicker/datepicker';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderDate(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function (name: string, value: string, options: AttrOptions) {
+    const dateValue = new Date(value);
+    const handler = (v: Date) => onChange(name, 'date', v.toISOString());
+    const dateInput = <DatePicker date={dateValue} onChange={handler} />;
+
+    return renderFormField(name, dateInput, options);
+  };
+}
+
+
diff --git a/ashes/src/components/object-form/renderers/image.css b/ashes/src/components/object-form/renderers/image.css
new file mode 100644
index 0000000000..bca76acc2f
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/image.css
@@ -0,0 +1,8 @@
+
+.uploadContainer {
+  margin: 25px 0 40px;
+}
+
+.imageCard {
+  width: 298px;
+}
diff --git a/ashes/src/components/object-form/renderers/image.jsx b/ashes/src/components/object-form/renderers/image.jsx
new file mode 100644
index 0000000000..485fa83b9f
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/image.jsx
@@ -0,0 +1,105 @@
+/* @flow */
+
+// libs
+import React, { Component, Element } from 'react';
+import { isEmpty, first, get, noop } from 'lodash';
+import { autobind } from 'core-decorators';
+
+// components
+import Upload from 'components/upload/upload';
+import Image from 'components/images/image';
+
+// helpers
+import { uploadImages } from 'paragons/image';
+
+// style
+import s from './image.css';
+
+// types
+import type { FieldErrors, ChangeHandler } from './index';
+import type { ImageFile } from '../../../modules/images';
+
+export default function renderImage(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function (name: string, value: any, options: AttrOptions) {
+    return (
+      <ImageRenderer name={name} value={value} onChange={onChange} />
+    );
+  };
+}
+
+type Props = {
+  name: string,
+  value: Object,
+  onChange: ChangeHandler,
+}
+
+class ImageRenderer extends Component {
+  props: Props;
+
+  @autobind
+  addFile(images: Array<ImageFile>) {
+    const { name, onChange } = this.props;
+
+    // upload just one image
+    const image = first(images);
+
+    const newImage = {
+      title: get(image, 'file.name'),
+      alt: get(image, 'file.name'),
+      src: get(image, 'src'),
+      file: get(image, 'file'),
+      key: get(image, 'key'),
+      loading: true,
+    };
+
+    onChange(name, 'image', newImage);
+
+    uploadImages([newImage]).then(res => {
+      onChange(name, 'image', res[0]);
+    });
+  }
+
+  @autobind
+  deleteFile(): Promise<*> {
+    const { name, onChange } = this.props;
+
+    return Promise.resolve(onChange(name, 'image', ''));
+  }
+
+  @autobind
+  handleSave(obj) {
+    const newObject = {
+      ...this.props.value,
+      ...obj
+    };
+
+    return Promise.resolve(this.props.onChange(this.props.name, 'image', newObject));
+  }
+
+  render() {
+    const { value, name } = this.props;
+    const empty = isEmpty(value);
+
+    return (
+      <div>
+        <label className="fc-object-form__field-label">{name}</label>
+        <div className={s.uploadContainer}>
+          <Upload
+            empty={empty}
+            onDrop={(image) => this.addFile(image, name)}>
+            <div className={s.imageCard}>
+              <Image
+                name={name}
+                image={value}
+                imagePid={value.id}
+                deleteImage={this.deleteFile}
+                editImage={this.handleSave}
+              />
+            </div>
+          </Upload>
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/ashes/src/components/object-form/renderers/index.js b/ashes/src/components/object-form/renderers/index.js
new file mode 100644
index 0000000000..beddbaca1b
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/index.js
@@ -0,0 +1,36 @@
+/* @flow */
+
+import { Element } from 'react';
+
+import renderString from './string';
+import renderRichText from './richText';
+import renderBoolean from './boolean';
+import renderDate from './date';
+import renderPrice from './price';
+import renderColor from './color';
+import renderText from './text';
+import renderNumber from './number';
+import renderOptions from './options';
+import renderImage from './image';
+
+// types
+export type ChangeHandler = (name: string, type: string, value: any) => any;
+export type FieldErrors = { [id: string]: any };
+export type FieldRenderer = (errors: FieldErrors, onChange: ChangeHandler) =>
+  (name: string, value: any, options: AttrOptions) => Element<any>;
+
+const renderers: { [key: string]: FieldRenderer } = {
+  renderString,
+  renderRichText,
+  renderBoolean,
+  renderBool: renderBoolean,
+  renderDate,
+  renderPrice,
+  renderColor,
+  renderText,
+  renderNumber,
+  renderOptions,
+  renderImage,
+};
+
+export default renderers;
diff --git a/ashes/src/components/object-form/renderers/number.jsx b/ashes/src/components/object-form/renderers/number.jsx
new file mode 100644
index 0000000000..05bd5207c5
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/number.jsx
@@ -0,0 +1,29 @@
+/* @flow */
+
+// libs
+import noop from 'lodash/noop';
+import React from 'react';
+
+// components
+import renderFormField from '../form-field';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderNumber(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function(name: string, value: ?number = null, options: AttrOptions) {
+    const handler = ({ target }) => {
+      return onChange(name, 'number', target.value == '' ? null : Number(target.value));
+    };
+    const stringInput = (
+      <input
+        className='fc-object-form__field-value'
+        type="number"
+        name={name}
+        value={value == null ? '' : value}
+        onChange={handler}
+      />
+    );
+
+    return renderFormField(name, stringInput, options);
+  };
+}
diff --git a/ashes/src/components/object-form/renderers/options.jsx b/ashes/src/components/object-form/renderers/options.jsx
new file mode 100644
index 0000000000..bfcf5e757c
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/options.jsx
@@ -0,0 +1,32 @@
+/* @flow */
+
+// libs
+import { noop, get } from 'lodash/noop';
+import React from 'react';
+
+// components
+import { Dropdown } from 'components/dropdown';
+import renderFormField from '../form-field';
+
+// types
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderOptions(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function (name: string, value: any, options: AttrOptions) {
+    const fieldOptions = this.props.fieldsOptions && this.props.fieldsOptions[name];
+    if (!fieldOptions) throw new Error('You must define fieldOptions for options fields');
+
+    const handler = v => onChange(name, 'options', v);
+    options.error = get(errors, name);
+
+    const dropdown = (
+      <Dropdown
+        value={value}
+        items={fieldOptions}
+        onChange={handler}
+      />
+    );
+
+    return renderFormField(name, dropdown, options);
+  };
+}
diff --git a/ashes/src/components/object-form/renderers/price.jsx b/ashes/src/components/object-form/renderers/price.jsx
new file mode 100644
index 0000000000..b9ace10348
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/price.jsx
@@ -0,0 +1,34 @@
+/* @flow */
+
+// libs
+import React from 'react';
+import { noop, get } from 'lodash';
+
+// components
+import renderFormField from '../form-field';
+import CurrencyInput from 'components/forms/currency-input';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderPrice(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function(name: string, value: any, options: AttrOptions) {
+    const priceValue: string = get(value, 'value', '');
+    const priceCurrency: string = get(value, 'currency', 'USD');
+    const handler = value => onChange(name, 'price', {
+      currency: priceCurrency,
+      value: Number(value)
+    });
+    const currencyInput = (
+      <CurrencyInput
+        inputClass='fc-object-form__field-value'
+        inputName={name}
+        value={priceValue}
+        onChange={handler}
+      />
+    );
+
+    return renderFormField(name, currencyInput, options);
+  };
+}
+
+
diff --git a/ashes/src/components/object-form/renderers/richText.jsx b/ashes/src/components/object-form/renderers/richText.jsx
new file mode 100644
index 0000000000..3a481aea94
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/richText.jsx
@@ -0,0 +1,36 @@
+/* @flow */
+
+// libs
+import classNames from 'classnames';
+import { get, kebabCase, noop } from 'lodash';
+import React from 'react';
+
+// components
+import { FormFieldError } from 'components/forms';
+import RichTextEditor from 'components/rich-text-editor/rich-text-editor';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderRichText(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function (name: string, value: string = '', options: AttrOptions) {
+    const handler = v => onChange(name, 'richText', v);
+
+    const error = get(errors, name);
+    const classForContainer = classNames('fc-object-form__field', {
+      '_has-error': error != null,
+    });
+    const nameVal = kebabCase(name);
+
+    return (
+      <div className={classForContainer}>
+        <RichTextEditor
+          className={`fc-rich-text__name-${nameVal}`}
+          label={options.label}
+          value={value}
+          onChange={handler}
+        />
+        {error && <FormFieldError error={error} />}
+      </div>
+    );
+  };
+}
diff --git a/ashes/src/components/object-form/renderers/string.jsx b/ashes/src/components/object-form/renderers/string.jsx
new file mode 100644
index 0000000000..22e0648854
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/string.jsx
@@ -0,0 +1,31 @@
+/* @flow */
+
+// libs
+import noop from 'lodash/noop';
+import React from 'react';
+
+// components
+import renderFormField from '../form-field';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderString(errors: FieldErrors, onChange: ChangeHandler = noop) {
+  return function (name: string, value: string = '', options: AttrOptions) {
+    const handler = ({ target }) => {
+      return onChange(name, 'string', target.value);
+    };
+
+    const stringInput = (
+      <input
+        className='fc-object-form__field-value'
+        type="text"
+        name={name}
+        value={value || ''}
+        onChange={handler}
+        disabled={options.disabled}
+      />
+    );
+
+    return renderFormField(name, stringInput, options);
+  };
+}
diff --git a/ashes/src/components/object-form/renderers/text.jsx b/ashes/src/components/object-form/renderers/text.jsx
new file mode 100644
index 0000000000..dbb48fc097
--- /dev/null
+++ b/ashes/src/components/object-form/renderers/text.jsx
@@ -0,0 +1,28 @@
+/* @flow */
+
+// libs
+import noop from 'lodash/noop';
+import React from 'react';
+
+// components
+import renderFormField from '../form-field';
+
+import type { FieldErrors, ChangeHandler } from './index';
+
+export default function renderText(errors: FieldErrors = {}, onChange: ChangeHandler = noop) {
+  return function(name: string, value: string = '', options: AttrOptions) {
+    const handler = ({ target }) => {
+      return onChange(name, 'text', target.value);
+    };
+    const textInput = (
+      <textarea
+        className='fc-object-form__field-value'
+        name={name}
+        onChange={handler}
+        value={value}
+      />
+    );
+
+    return renderFormField(name, textInput, options);
+  };
+}
diff --git a/ashes/src/components/object-page/object-details-deux.jsx b/ashes/src/components/object-page/object-details-deux.jsx
index 4b6d4a96da..a4ad2737f7 100644
--- a/ashes/src/components/object-page/object-details-deux.jsx
+++ b/ashes/src/components/object-page/object-details-deux.jsx
@@ -18,6 +18,7 @@ import ObjectFormInner from 'components/object-form/object-form-inner';
 import ObjectScheduler from 'components/object-scheduler/object-scheduler';
 import Tags from 'components/tags/tags';
 import ParticipantsPanel from 'components/participants';
+import CustomProperties from 'components/custom-properties/custom-properties';
 
 import styles from './object-details.css';
 
@@ -99,14 +100,24 @@ export default class ObjectDetailsDeux extends Component {
   renderFields(fields: Fields, section: Array<NodeDesc>) {
     const fieldsToRender = this.calcFieldsToRender(fields, section);
     const attrsSchema = this.schema.properties.attributes;
+    const commonProps = {
+      onChange: this.handleObjectChange,
+      attributes: this.attributes,
+      schema: attrsSchema
+    };
 
-    return (
+    const children = (
       <ObjectFormInner
-        canAddProperty={fields.canAddProperty}
-        onChange={this.handleObjectChange}
+        {...commonProps}
         fieldsToRender={fieldsToRender}
-        attributes={this.attributes}
-        schema={attrsSchema}
+      />
+    );
+
+    return (
+      <CustomProperties
+        {...commonProps}
+        canAddProperty={fields.canAddProperty}
+        children={children}
       />
     );
   }
diff --git a/ashes/src/components/object-page/object-details.jsx b/ashes/src/components/object-page/object-details.jsx
index a459e5c2e3..321e44cfbc 100644
--- a/ashes/src/components/object-page/object-details.jsx
+++ b/ashes/src/components/object-page/object-details.jsx
@@ -17,6 +17,7 @@ import ObjectScheduler from '../object-scheduler/object-scheduler';
 import { Form } from '../forms';
 import Tags from '../tags/tags';
 import ParticipantsPanel from '../participants';
+import CustomProperties from 'components/custom-properties/custom-properties';
 
 type Layout = {
   content: Array<Object>,
@@ -107,14 +108,24 @@ export default class ObjectDetails extends Component {
   renderFields(fields: Fields, section: Array<NodeDesc>): Element<*> {
     const fieldsToRender = this.calcFieldsToRender(fields, section);
     const attrsSchema = this.schema.properties.attributes;
+    const commonProps = {
+      onChange: this.handleObjectChange,
+      attributes: this.attributes,
+      schema: attrsSchema
+    };
 
-    return (
+    const children = (
       <ObjectFormInner
-        canAddProperty={fields.canAddProperty}
-        onChange={this.handleObjectChange}
+        {...commonProps}
         fieldsToRender={fieldsToRender}
-        attributes={this.attributes}
-        schema={attrsSchema}
+      />
+    );
+
+    return (
+      <CustomProperties
+        {...commonProps}
+        canAddProperty={fields.canAddProperty}
+        children={children}
       />
     );
   }
diff --git a/ashes/src/components/products/product-form.jsx b/ashes/src/components/products/product-form.jsx
index e8c9fe936a..5ddfbc9f81 100644
--- a/ashes/src/components/products/product-form.jsx
+++ b/ashes/src/components/products/product-form.jsx
@@ -14,7 +14,7 @@ import OptionList from './options/option-list';
 import SkuContentBox from './skus/sku-content-box';
 import TaxonomiesListWidget from '../taxonomies/widget/taxonomies-list-widget';
 
-import { renderFormField } from 'components/object-form/object-form-inner';
+import renderFormField from 'components/object-form/form-field';
 
 import { autoAssignVariants, deleteVariantCombination, addSkusForVariants } from 'paragons/variants';
 
diff --git a/ashes/src/components/skus/layout.json b/ashes/src/components/skus/layout.json
index a8ff5d17c2..a7dbd06ded 100644
--- a/ashes/src/components/skus/layout.json
+++ b/ashes/src/components/skus/layout.json
@@ -16,7 +16,8 @@
           "activeFrom",
           "activeTo",
           "tags",
-          "context"
+          "context",
+          "taxonomies"
         ]
       }
     },
diff --git a/ashes/src/components/upload/upload.css b/ashes/src/components/upload/upload.css
index 0651d728d7..05913dad2b 100644
--- a/ashes/src/components/upload/upload.css
+++ b/ashes/src/components/upload/upload.css
@@ -1,21 +1,23 @@
 .upload {
   transition: border-color .3s;
-  padding: 15px 5px;
   margin: -15px -5px;
 
   &:global(._empty) {
     border: 3px dashed #CED2D5;
-    margin: -18px -8px;
+    padding: 15px 5px;
+    margin: -18px 0;
+
+    & .container {
+      min-height: 372px;
+    }
   }
 
   &:global(._dragPossible) {
     border: 3px dashed #9bc1ca;
-    margin: -18px -8px;
   }
 
   &:global(._dragActive) {
     border: 3px dashed #49C2CA;
-    margin: -18px -8px;
   }
 
   &:global(._disabled) {
@@ -28,24 +30,32 @@
     display: flex;
     align-items: center;
   }
+
+  & .drag-label {
+    margin: 10px 0;
+  }
 }
 
 .container {
-  min-height: 420px;
 }
 
 .empty {
   text-align: center;
   margin: 0 auto;
   font-weight: bold;
-  color: #CED2D5;
-  opacity: .5;
+  color: #E6E8EA;
+  display: flex;
+  flex-direction: column;
 
   & i {
     display: block;
     font-size: 96px;
     line-height: .8;
   }
+
+  & :global(.fc-btn) {
+    margin-top: 15px;
+  }
 }
 
 .input {
diff --git a/ashes/src/components/upload/upload.jsx b/ashes/src/components/upload/upload.jsx
index 41f1c79873..8ce9fa5cde 100644
--- a/ashes/src/components/upload/upload.jsx
+++ b/ashes/src/components/upload/upload.jsx
@@ -8,7 +8,9 @@ import _ from 'lodash';
 import { autobind, debounce } from 'core-decorators';
 import classNames from 'classnames';
 import React, { Component, Element } from 'react';
-import { findDOMNode } from 'react-dom';
+
+// components
+import { Button } from 'components/core/button';
 
 import type { FileInfo } from '../../modules/images';
 
@@ -153,7 +155,9 @@ export default class Upload extends Component {
   get emptyContent() {
     return (
       <div className={styles.empty}>
-        <i className="icon-upload" /> Drag & Drop to upload
+        <i className="icon-upload" />
+        <span styleName="drag-label">Drag & Drop to upload</span>
+        <Button onClick={() => this.openUploadDialog()}>or select file</Button>
       </div>
     );
   }
diff --git a/ashes/src/interfaces/renderers.js b/ashes/src/interfaces/renderers.js
new file mode 100644
index 0000000000..226cbbb0f0
--- /dev/null
+++ b/ashes/src/interfaces/renderers.js
@@ -0,0 +1,7 @@
+declare type AttrOptions = {
+  required: boolean,
+  label: string,
+  isDefined: (value: any) => boolean,
+  disabled?: boolean,
+  error?: string,
+};
diff --git a/ashes/src/less/modules/_object-form.less b/ashes/src/less/modules/_object-form.less
index 4d4158cfdf..923e5a3f63 100644
--- a/ashes/src/less/modules/_object-form.less
+++ b/ashes/src/less/modules/_object-form.less
@@ -17,21 +17,10 @@
     }
   }
 
-  &__field-label,
-  &__add-custom-property {
+  &__field-label {
     #label();
   }
 
-  &__add-custom-property {
-    .margin-top(40px);
-    display: flex;
-  }
-
-  &__add-custom-property-icon {
-    .margin-left(10px);
-    font-size: 10px;
-  }
-
   &__field-value {
     align-items: center;
     background: transparent;
@@ -39,19 +28,6 @@
     flex-direction: row;
     .padding-left(20px);
   }
-
-  &__custom-property {
-    min-width: 575px;
-
-    .fc-content-box {
-      .margin-bottom(0);
-    }
-
-    .fc-dropdown {
-      max-width: 100%;
-      .margin-bottom(10px);
-    }
-  }
 }
 
 .fc-object-form__field._has-error {
diff --git a/ashes/src/less/modules/_product-details.less b/ashes/src/less/modules/_product-details.less
index c7ff4ec0c8..4fb1391d2f 100644
--- a/ashes/src/less/modules/_product-details.less
+++ b/ashes/src/less/modules/_product-details.less
@@ -7,23 +7,13 @@
     flex-direction: column;
   }
 
-  &__field-label, &__add-custom-property {
+  &__field-label {
     line-height: 24px;
     margin-bottom: 10px;
     color: @color-decor1;
     text-transform: capitalize;
   }
 
-  &__add-custom-property {
-    margin-top: 40px;
-    display: flex;
-  }
-
-  &__add-custom-property-icon {
-    margin-left: 10px;
-    font-size: 10px;
-  }
-
   &__field-value {
     align-items: center;
     background: transparent;
@@ -33,16 +23,4 @@
     .padding-left(20px);
   }
 
-  &__custom-property {
-    min-width: 575px;
-
-    .fc-content-box {
-      margin-bottom: 0;
-    }
-
-    .fc-dropdown {
-      max-width: 100%;
-      margin-bottom: 10px;
-    }
-  }
 }
diff --git a/ashes/src/paragons/image.js b/ashes/src/paragons/image.js
new file mode 100644
index 0000000000..adb9642980
--- /dev/null
+++ b/ashes/src/paragons/image.js
@@ -0,0 +1,18 @@
+// @flow
+
+// lib
+import Api from 'lib/api';
+
+// types
+import type { ImageFile } from '../modules/images';
+
+export const uploadImages = (files: Array<ImageFile>) => {
+
+  const formData = new FormData();
+
+  files.forEach((file: ImageFile) => {
+    formData.append('upload-file', file.file);
+  });
+
+  return Api.post(`/images/default`, formData);
+};