diff --git a/admin-panel/body-page-editor/element-editor.jsx b/admin-panel/body-page-editor/element-editor.jsx
--- a/admin-panel/body-page-editor/element-editor.jsx
+++ b/admin-panel/body-page-editor/element-editor.jsx
@@ -13,17 +13,19 @@
 		let propsControls = components_map[componentName].propsControls();
 
 		for (const prop in propsControls) {
-			let formControlName = propsControls[prop];
-
+			let { control: formControlName, label } = propsControls[prop];
 			controls.push(
-				formControls[formControlName]({
-					name: prop,
-					key: prop,
-					value: componentProps[prop] || '',
-					onChange: newValue => {
-						onChange({ ...componentProps, [prop]: newValue });
-					},
-				})
+				<label>
+					{label}:
+					{formControls[formControlName]({
+						name: prop,
+						key: prop,
+						value: componentProps[prop] || '',
+						onChange: newValue => {
+							onChange({ ...componentProps, [prop]: newValue });
+						},
+					})}
+				</label>
 			);
 		}
 
diff --git a/admin-panel/form-controls/form-controls.jsx b/admin-panel/form-controls/form-controls.jsx
--- a/admin-panel/form-controls/form-controls.jsx
+++ b/admin-panel/form-controls/form-controls.jsx
@@ -1,13 +1,14 @@
 const date = require('./date.jsx');
 const text = require('./text.jsx');
 const textarea = require('./textarea.jsx');
-// const bodyPageEditor = require('../body-page-editor/body-page-editor.jsx');
+const image = require('./image.jsx');
 
 module.exports = {};
 module.exports.text = text;
 module.exports.date = date;
 module.exports.slug = text;
 module.exports.textarea = textarea;
+module.exports.image = image;
 module.exports[
 	'array-of-objects'
 ] = require('../body-page-editor/body-page-editor.jsx');
diff --git a/admin-panel/form-controls/image.jsx b/admin-panel/form-controls/image.jsx
new file mode 100644
--- /dev/null
+++ b/admin-panel/form-controls/image.jsx
@@ -0,0 +1,38 @@
+const React = require('react');
+const { useState } = React;
+
+module.exports = function date(props) {
+	const [imagePreviewUrl, setImagePreviewUrl] = useState(null);
+	const [imageFile, setImageFile] = useState(null);
+
+	return (
+		<div>
+			<input
+				id={props.name}
+				name={props.name}
+				onChange={function onChange(e) {
+					const reader = new FileReader();
+					const file = e.target.files[0];
+					reader.onloadend = () => {
+						setImageFile(file);
+						setImagePreviewUrl(reader.result);
+					};
+					reader.readAsDataURL(file);
+					return props.onChange(e.target.value);
+				}}
+				required={props.required}
+				accept={'image/*'}
+				type={'file'}
+				value={props.value}
+			/>
+			<img
+				src={imagePreviewUrl}
+				style={{
+					height: '100px',
+					width: '100px',
+					objectFit: 'contain',
+				}}
+			/>
+		</div>
+	);
+};
diff --git a/admin-panel/index.jsx b/admin-panel/index.jsx
--- a/admin-panel/index.jsx
+++ b/admin-panel/index.jsx
@@ -6,35 +6,78 @@
 import Collections from './collections/collections.jsx';
 import useCollections from './collections/use-collections.js';
 
+class ErrorBoundary extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = { hasError: false, error: null };
+	}
+
+	static getDerivedStateFromError(error) {
+		return { hasError: true, error: error };
+	}
+
+	componentDidCatch(error, info) {
+		console.error(error, info);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			// You can render any custom fallback UI
+			return (
+				<div>
+					<h1>Something went wrong.</h1>
+					<code>
+						<pre>
+							<strong>{this.state.error.message}</strong>
+							{'\n'}
+							{this.state.error.stack}
+						</pre>
+					</code>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}
+
 function AppRouter() {
 	const collections = useCollections();
 	return (
-		<HashRouter basename="/#">
-			<div>
-				<Link to="/">
-					<h1>Sealpage</h1>
-				</Link>
-				<nav>
-					<ul>
-						{collections.map(collection => (
-							<li key={collection.name}>
-								<Link to={`/collections/${collection.name}`}>
-									{collection.name}
-								</Link>
-							</li>
-						))}
-					</ul>
-					<Link to={'/body-page-editor'}>BodyPageEditor</Link>
-				</nav>
-
-				<hr />
-				<Route path="/" exact component={() => <h2>Admin panel</h2>} />
-				<Route path="/collections" component={Collections} />
-
-				{/* it's only for mockup testing  */}
-				{/* <Route path="/body-page-editor" component={BodyPageEditor} /> */}
-			</div>
-		</HashRouter>
+		<ErrorBoundary>
+			<HashRouter basename="/#">
+				<div>
+					<Link to="/">
+						<h1>Sealpage</h1>
+					</Link>
+					<nav>
+						<ul>
+							{collections.map(collection => (
+								<li key={collection.name}>
+									<Link
+										to={`/collections/${collection.name}`}
+									>
+										{collection.name}
+									</Link>
+								</li>
+							))}
+						</ul>
+						<Link to={'/body-page-editor'}>BodyPageEditor</Link>
+					</nav>
+
+					<hr />
+					<Route
+						path="/"
+						exact
+						component={() => <h2>Admin panel</h2>}
+					/>
+					<Route path="/collections" component={Collections} />
+
+					{/* it's only for mockup testing  */}
+					{/* <Route path="/body-page-editor" component={BodyPageEditor} /> */}
+				</div>
+			</HashRouter>
+		</ErrorBoundary>
 	);
 }
 
diff --git a/components/download-file-button/download-file-button.js b/components/download-file-button/download-file-button.js
--- a/components/download-file-button/download-file-button.js
+++ b/components/download-file-button/download-file-button.js
@@ -28,7 +28,7 @@
 		/* eslint-enable indent */
 	}
 	static propsControls() {
-		return { text: 'text' };
+		return { text: { control: 'text', label: 'Button text' } };
 	}
 }
 
diff --git a/components/markdown/markdown.html.js b/components/markdown/markdown.html.js
--- a/components/markdown/markdown.html.js
+++ b/components/markdown/markdown.html.js
@@ -7,7 +7,9 @@
 	}
 
 	static propsControls() {
-		return { markdown_source: 'textarea' };
+		return {
+			markdown_source: { label: 'Markdown source', control: 'textarea' },
+		};
 	}
 }
 
diff --git a/components/navbar/navbar.html.js b/components/navbar/navbar.html.js
--- a/components/navbar/navbar.html.js
+++ b/components/navbar/navbar.html.js
@@ -7,7 +7,9 @@
 		`;
 	}
 	static propsControls() {
-		return { title: 'text' };
+		return {
+			title: { label: 'Title', control: 'text' },
+		};
 	}
 }
 
diff --git a/components/responsive-image/responsive-image.js b/components/responsive-image/responsive-image.js
--- a/components/responsive-image/responsive-image.js
+++ b/components/responsive-image/responsive-image.js
@@ -71,7 +71,7 @@
 		`;
 	}
 	static propsControls() {
-		return {};
+		return { source_image: { control: 'image', label: 'Source image' } };
 	}
 }