diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index 791c9a0..46101ec 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -26,236 +26,236 @@ const env = getClientEnvironment(publicUrl);
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
 module.exports = {
-  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-  // See the discussion in https://github.com/infernojs/create-inferno-app/issues/343.
-  devtool: 'cheap-module-source-map',
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: [
-    // We ship a few polyfills by default:
-    require.resolve('./polyfills'),
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create Inferno App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('inferno-dev-utils/webpackHotDevClient'),
-    // Finally, this is your app's code:
-    paths.appIndexJs,
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
-  output: {
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
-    // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: 'static/js/[name].chunk.js',
-    // This is the URL that app is served from. We use "/" in development.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/infernojs/create-inferno-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/infernojs/create-inferno-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-      // Use development build of inferno for better validations during development process
-      inferno: path.resolve(require.resolve('inferno/dist/index.dev.esm.js')),
+	// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+	// See the discussion in https://github.com/infernojs/create-inferno-app/issues/343.
+	devtool: 'cheap-module-source-map',
+	// These are the "entry points" to our application.
+	// This means they will be the "root" imports that are included in JS bundle.
+	// The first two entry points enable "hot" CSS and auto-refreshes for JS.
+	entry: [
+		// We ship a few polyfills by default:
+		require.resolve('./polyfills'),
+		// Include an alternative client for WebpackDevServer. A client's job is to
+		// connect to WebpackDevServer by a socket and get notified about changes.
+		// When you save a file, the client will either apply hot updates (in case
+		// of CSS changes), or refresh the page (in case of JS changes). When you
+		// make a syntax error, this client will display a syntax error overlay.
+		// Note: instead of the default WebpackDevServer client, we use a custom one
+		// to bring better experience for Create Inferno App users. You can replace
+		// the line below with these two lines if you prefer the stock client:
+		// require.resolve('webpack-dev-server/client') + '?/',
+		// require.resolve('webpack/hot/dev-server'),
+		require.resolve('inferno-dev-utils/webpackHotDevClient'),
+		// Finally, this is your app's code:
+		paths.appIndexJs,
+		// We include the app code last so that if there is a runtime error during
+		// initialization, it doesn't blow up the WebpackDevServer client, and
+		// changing JS code would still trigger a refresh.
+	],
+	output: {
+		// Add /* filename */ comments to generated require()s in the output.
+		pathinfo: true,
+		// This does not produce a real file. It's just the virtual path that is
+		// served by WebpackDevServer in development. This is the JS bundle
+		// containing code from all our entry points, and the Webpack runtime.
+		filename: 'static/js/bundle.js',
+		// There are also additional JS chunk files if you use code splitting.
+		chunkFilename: 'static/js/[name].chunk.js',
+		// This is the URL that app is served from. We use "/" in development.
+		publicPath: publicPath,
+		// Point sourcemap entries to original disk location (format as URL on Windows)
+		devtoolModuleFilenameTemplate: info =>
+			path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+	},
+	resolve: {
+		// This allows you to set a fallback for where Webpack should look for modules.
+		// We placed these paths second because we want `node_modules` to "win"
+		// if there are any conflicts. This matches Node resolution mechanism.
+		// https://github.com/infernojs/create-inferno-app/issues/253
+		modules: ['node_modules', paths.appNodeModules].concat(
+			// It is guaranteed to exist because we tweak it in `env.js`
+			process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+		),
+		// These are the reasonable defaults supported by the Node ecosystem.
+		// We also include JSX as a common component filename extension to support
+		// some tools, although we do not recommend using it, see:
+		// https://github.com/infernojs/create-inferno-app/issues/290
+		// `web` extension prefixes have been added for better support
+		// for React Native Web.
+		extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
+		alias: {
+			// Use development build of inferno for better validations during development process
+			inferno: path.resolve(require.resolve('inferno/dist/index.dev.esm.js')),
 
-    },
-    plugins: [
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-inferno-app/issues/2176.
-      // { parser: { requireEnsure: false } },
+		},
+		plugins: [
+			// Prevents users from importing files from outside of src/ (or node_modules/).
+			// This often causes confusion because we only process files within src/ with babel.
+			// To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+			// please link the files into your node_modules/ and let module-resolution kick in.
+			// Make sure your source files are compiled, as they will not be processed in any way.
+			new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+		],
+	},
+	module: {
+		strictExportPresence: true,
+		rules: [
+			// TODO: Disable require.ensure as it's not a standard language feature.
+			// We are waiting for https://github.com/facebookincubator/create-inferno-app/issues/2176.
+			// { parser: { requireEnsure: false } },
 
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
+			// First, run the linter.
+			// It's important to do this before Babel processes the JS.
+			{
+				test: /\.(js|jsx|mjs)$/,
+				enforce: 'pre',
+				use: [
+					{
+						options: {
+							formatter: eslintFormatter,
+							eslintPath: require.resolve('eslint'),
 
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works like "file" loader except that it embeds assets
-          // smaller than specified limit in bytes as data URLs to avoid requests.
-          // A missing `test` is equivalent to a match.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
+						},
+						loader: require.resolve('eslint-loader'),
+					},
+				],
+				include: paths.appSrc,
+			},
+			{
+				// "oneOf" will traverse all following loaders until one will
+				// match the requirements. When no loader matches it will fall
+				// back to the "file" loader at the end of the loader list.
+				oneOf: [
+					// "url" loader works like "file" loader except that it embeds assets
+					// smaller than specified limit in bytes as data URLs to avoid requests.
+					// A missing `test` is equivalent to a match.
+					{
+						test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+						loader: require.resolve('url-loader'),
+						options: {
+							limit: 10000,
+							name: 'static/media/[name].[hash:8].[ext]',
+						},
+					},
+					// Process JS with Babel.
+					{
+						test: /\.(js|jsx|mjs)$/,
+						include: paths.appSrc,
+						loader: require.resolve('babel-loader'),
+						options: {
 
-              // This is a feature of `babel-loader` for webpack (not Babel itself).
-              // It enables caching results in ./node_modules/.cache/babel-loader/
-              // directory for faster rebuilds.
-              cacheDirectory: true,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
-          // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
-          {
-            test: /\.css$/,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                  // Necessary for external CSS imports to work
-                  // https://github.com/facebookincubator/create-react-app/issues/2677
-                  ident: 'postcss',
-                  plugins: () => [
-                    require('postcss-flexbugs-fixes'),
-                    autoprefixer({
-                      browsers: [
-                        '>1%',
-                        'last 4 versions',
-                        'Firefox ESR',
-                        'not ie < 11',
-                      ],
-                      flexbox: 'no-2009',
-                    }),
-                  ],
-                },
-              },
-            ],
-          },
-          // "file" loader makes sure those assets get served by WebpackDevServer.
-          // When you `import` an asset, you get its (virtual) filename.
-          // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            // Exclude `js` files to keep "css" loader working as it injects
-            // its runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ],
-      },
-      // ** STOP ** Are you adding a new loader?
-      // Make sure to add the new loader(s) before the "file" loader.
-    ],
-  },
-  plugins: [
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env.raw),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-    }),
-    // Add module names to factory functions so they appear in browser profiler.
-    new webpack.NamedModulesPlugin(),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.stringified),
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/infernojs/create-inferno-app/issues/240
-    new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/infernojs/create-inferno-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
-    // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-  ],
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance hints during development because we don't do any
-  // splitting or minification in interest of speed. These warnings become
-  // cumbersome.
-  performance: {
-    hints: false,
-  },
+							// This is a feature of `babel-loader` for webpack (not Babel itself).
+							// It enables caching results in ./node_modules/.cache/babel-loader/
+							// directory for faster rebuilds.
+							cacheDirectory: true,
+						},
+					},
+					// "postcss" loader applies autoprefixer to our CSS.
+					// "css" loader resolves paths in CSS and adds assets as dependencies.
+					// "style" loader turns CSS into JS modules that inject <style> tags.
+					// In production, we use a plugin to extract that CSS to a file, but
+					// in development "style" loader enables hot editing of CSS.
+					{
+						test: /\.css$/,
+						use: [
+							require.resolve('style-loader'),
+							{
+								loader: require.resolve('css-loader'),
+								options: {
+									importLoaders: 1,
+								},
+							},
+							{
+								loader: require.resolve('postcss-loader'),
+								options: {
+									// Necessary for external CSS imports to work
+									// https://github.com/facebookincubator/create-react-app/issues/2677
+									ident: 'postcss',
+									plugins: () => [
+										require('postcss-flexbugs-fixes'),
+										autoprefixer({
+											browsers: [
+												'>1%',
+												'last 4 versions',
+												'Firefox ESR',
+												'not ie < 11',
+											],
+											flexbox: 'no-2009',
+										}),
+									],
+								},
+							},
+						],
+					},
+					// "file" loader makes sure those assets get served by WebpackDevServer.
+					// When you `import` an asset, you get its (virtual) filename.
+					// In production, they would get copied to the `build` folder.
+					// This loader doesn't use a "test" so it will catch all modules
+					// that fall through the other loaders.
+					{
+						// Exclude `js` files to keep "css" loader working as it injects
+						// its runtime that would otherwise processed through "file" loader.
+						// Also exclude `html` and `json` extensions so they get processed
+						// by webpacks internal loaders.
+						exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
+						loader: require.resolve('file-loader'),
+						options: {
+							name: 'static/media/[name].[hash:8].[ext]',
+						},
+					},
+				],
+			},
+			// ** STOP ** Are you adding a new loader?
+			// Make sure to add the new loader(s) before the "file" loader.
+		],
+	},
+	plugins: [
+		// Makes some environment variables available in index.html.
+		// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+		// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+		// In development, this will be an empty string.
+		new InterpolateHtmlPlugin(env.raw),
+		// Generates an `index.html` file with the <script> injected.
+		new HtmlWebpackPlugin({
+			inject: true,
+			template: paths.appHtml,
+		}),
+		// Add module names to factory functions so they appear in browser profiler.
+		new webpack.NamedModulesPlugin(),
+		// Makes some environment variables available to the JS code, for example:
+		// if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
+		new webpack.DefinePlugin(env.stringified),
+		// This is necessary to emit hot updates (currently CSS only):
+		new webpack.HotModuleReplacementPlugin(),
+		// Watcher doesn't work well if you mistype casing in a path so we use
+		// a plugin that prints an error when you attempt to do this.
+		// See https://github.com/infernojs/create-inferno-app/issues/240
+		new CaseSensitivePathsPlugin(),
+		// If you require a missing module and then `npm install` it, you still have
+		// to restart the development server for Webpack to discover it. This plugin
+		// makes the discovery automatic so you don't have to restart.
+		// See https://github.com/infernojs/create-inferno-app/issues/186
+		new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+		// Moment.js is an extremely popular library that bundles large locale files
+		// by default due to how Webpack interprets its code. This is a practical
+		// solution that requires the user to opt into importing specific locales.
+		// https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+		// You can remove this if you don't use Moment.js:
+		new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+	],
+	// Some libraries import Node modules but don't use them in the browser.
+	// Tell Webpack to provide empty mocks for them so importing them works.
+	node: {
+		dgram: 'empty',
+		fs: 'empty',
+		net: 'empty',
+		tls: 'empty',
+		child_process: 'empty',
+	},
+	// Turn off performance hints during development because we don't do any
+	// splitting or minification in interest of speed. These warnings become
+	// cumbersome.
+	performance: {
+		hints: false,
+	},
 };
diff --git a/package.json b/package.json
index e60ebab..c0aec78 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,10 @@
     "inferno": "^5.0.1",
     "inferno-bootstrap": "^5.0.0",
     "inferno-dev-utils": "^5.3.0",
-    "inferno-router": "^5.0.1"
+    "inferno-router": "^5.0.1",
+    "isomorphic-ws": "^4.0.0",
+    "lodash": "^4.17.5",
+    "ws": "^5.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^8.2.0",
@@ -19,6 +22,7 @@
     "babel-loader": "^7.1.4",
     "babel-preset-inferno-app": "^7.1.0",
     "babel-runtime": "6.26.0",
+    "bootstrap": "^4",
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "2.3.2",
     "css-loader": "^0.28.11",
@@ -42,6 +46,7 @@
     "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "jest": "^22.4.3",
+    "jquery": "^3.3.1",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.3.0",
     "postcss-loader": "^2.1.3",
diff --git a/public/css/app.css b/public/css/app.css
index 590f01d..bcba87b 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -44,3 +44,110 @@ bs-jumbotron {
 }
 
 /*! Ids */
+
+/* -----------------------------------------------------------------------------
+	CSS loading icon
+------------------------------------------------------------------------------*/
+
+cssload-loader {
+	display: flex;
+	/* position: relative;
+	left: calc(50% - 50px); */
+	justify-content: center;
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	perspective: 780px;
+	margin: auto;
+}
+
+.cssload-inner {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	margin: auto;
+	box-sizing: border-box;
+	border-radius: 50%;
+}
+
+cssload-one {
+	left: 0%;
+	top: 0%;
+	animation: cssload-rotate-one 1.15s linear infinite;
+	border-bottom: 3px solid rgb(0,0,0);
+}
+
+cssload-two {
+	right: 0%;
+	top: 0%;
+	animation: cssload-rotate-two 1.15s linear infinite;
+	border-right: 3px solid rgb(0,0,0);
+}
+
+cssload-three {
+	right: 0%;
+	bottom: 0%;
+	animation: cssload-rotate-three 1.15s linear infinite;
+	border-top: 3px solid rgb(0,0,0);
+}
+
+@keyframes cssload-rotate-one {
+	0% {
+		transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+	}
+}
+
+@keyframes cssload-rotate-two {
+	0% {
+		transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+	}
+}
+
+@keyframes cssload-rotate-three {
+	0% {
+		transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+	}
+	100% {
+		transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+	}
+}
+
+/* ----------------------------------------------------------------------------
+	Loading overlay
+-----------------------------------------------------------------------------*/
+#loading-shadow {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0,0,0,0.8);
+	z-index: 500;
+}
+
+	#loading-shadow loading-wrapper {
+		position: fixed;
+		z-index: 501;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display:flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	#loading-shadow loading-content {
+		position: relative;
+		color: #fff
+	}
+
+	loading-content .cssload-inner {
+		border-color: #fff
+	}
diff --git a/src/App.js b/src/App.js
index 08c59d8..88a6df8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,8 @@
+import * as _ from 'lodash';
+import { Component } from 'inferno';
 import { BrowserRouter, Link, NavLink } from 'inferno-router';
+import WS from 'isomorphic-ws';
+import { Loader } from './components';
 import {
 	Container,
 	Nav,
@@ -8,24 +12,70 @@ import {
 } from './components/Bootstrap';
 import { Routes } from './Routes';
 
-export const App = () => (
-	<BrowserRouter>
-		<Container className="full-height" tag="bs-container">
-			<Navbar className="static-top" color="dark" dark expandable="sm">
-				<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
-				<Nav fill pills>
-					<NavItem>
-						<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
-					</NavItem>
-					<NavItem>
-						<NavLink className="nav-link" to="/film/add">Films</NavLink>
-					</NavItem>
-					<NavItem>
-						<NavLink className="nav-link" to="/oops">Oops</NavLink>
-					</NavItem>
-				</Nav>
-			</Navbar>
-			<Routes />
-		</Container>
-	</BrowserRouter>
-);
+export class App extends Component {
+	constructor (props) {
+		super(props);
+
+		this.state = {
+			webSocketLoaded: false,
+		};
+
+		_.bindAll(this, [
+			'onWebSocketOpen',
+			'onWebSocketClose',
+		]);
+	}
+
+	componentDidMount () {
+		window.clientWS = new WS('ws://localhost:65432/');
+
+		window.clientWS.addEventListener('open', this.onWebSocketOpen);
+		window.clientWS.addEventListener('message', console);
+		window.clientWS.addEventListener('close', this.onWebSocketClose);
+	}
+
+	componentWillUnmount () {
+		if (window.clientWS) {
+			window.clientWS.close();
+		}
+	}
+
+	onWebSocketOpen () {
+		this.setState({
+			webSocketLoaded: true,
+		});
+
+		window.clientWS.onmessage = console.info;
+
+		console.info(window.clientWS);
+	}
+
+	onWebSocketClose () {
+		console.log('WebSocket closed');
+	}
+
+	render () {
+		return (
+			<BrowserRouter>
+				<Container className="full-height" tag="bs-container">
+					<Navbar className="static-top" color="dark" dark expandable="sm">
+						<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
+						<Nav fill pills>
+							<NavItem>
+								<NavLink className="nav-link" to="/camera/list">Cameras</NavLink>
+							</NavItem>
+							<NavItem>
+								<NavLink className="nav-link" to="/film/add">Films</NavLink>
+							</NavItem>
+							<NavItem>
+								<NavLink className="nav-link" to="/oops">Oops</NavLink>
+							</NavItem>
+						</Nav>
+					</Navbar>
+					<Routes />
+					<Loader title="Connecting to WebSocket" hidden={this.state.webSocketLoaded} />
+				</Container>
+			</BrowserRouter>
+		);
+	}
+}
diff --git a/src/components/Loader.js b/src/components/Loader.js
new file mode 100644
index 0000000..ac7731d
--- /dev/null
+++ b/src/components/Loader.js
@@ -0,0 +1,24 @@
+/**
+ * Overlay loader component
+ *
+ * @param {object} props
+ * @param {boolean} props.hidden
+ * @param {string} props.title
+ */
+export const Loader = (props) => {
+	return (
+		<section id="loading-shadow" hidden={props.hidden}>
+			<loading-wrapper>
+				<loading-content>
+					<h3>{props.title}</h3>
+					<br />
+					<cssload-loader>
+						<cssload-one className="cssload-inner" />
+						<cssload-two className="cssload-inner" />
+						<cssload-three className="cssload-inner" />
+					</cssload-loader>
+				</loading-content>
+			</loading-wrapper>
+		</section>
+	);
+};
diff --git a/src/components/index.js b/src/components/index.js
index e2e999f..d21b4b3 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,2 +1,3 @@
 export * from './Bootstrap';
 export * from './Form';
+export * from './Loader';
diff --git a/src/electron/events.js b/src/electron/events.js
deleted file mode 100644
index b458da6..0000000
--- a/src/electron/events.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const { ipcMain } = require('electron');
-
-ipcMain.on('dropped-files', () => {
-
-});
diff --git a/src/electron/preload.js b/src/electron/preload.js
new file mode 100644
index 0000000..40d7ecf
--- /dev/null
+++ b/src/electron/preload.js
@@ -0,0 +1 @@
+window.ipcRenderer = require('electron').ipcRenderer;
diff --git a/src/electron/starter.js b/src/electron/starter.js
index 055ae2c..f5610eb 100644
--- a/src/electron/starter.js
+++ b/src/electron/starter.js
@@ -4,6 +4,8 @@ const app = electron.app;
 // Module to create native browser window.
 const BrowserWindow = electron.BrowserWindow;
 
+const WS = require('isomorphic-ws');
+
 const path = require('path');
 const url = require('url');
 
@@ -31,9 +33,9 @@ const createWindow = () => {
 	});
 	mainWindow.loadURL(startUrl);
 	// Open the DevTools.
-	/* mainWindow.webContents.openDevTools({
+	mainWindow.webContents.openDevTools({
 		mode: 'bottom',
-	}); */
+	});
 
 	// Emitted when the window is closed.
 	mainWindow.on('closed', () => {
@@ -66,6 +68,10 @@ app.on('activate', () => {
 	}
 });
 
+const wss = new WS.Server({
+	port: 65432,
+});
+
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
-require('./events');
+require('./websocket-events')(wss);
diff --git a/src/electron/websocket-events.js b/src/electron/websocket-events.js
new file mode 100644
index 0000000..8cccd0b
--- /dev/null
+++ b/src/electron/websocket-events.js
@@ -0,0 +1,13 @@
+/**
+ * Websocket event handlers
+ */
+
+module.exports = (wss) => {
+	wss.on('open', ws => {
+		wss.send('server-log', 'Connected to client!');
+
+		wss.on('dropped-files', e => {
+			wss.send('recieved-dropped-files', e);
+		});
+	});
+};
diff --git a/src/views/HomeView.js b/src/views/HomeView.js
index 835e5a7..80324d4 100644
--- a/src/views/HomeView.js
+++ b/src/views/HomeView.js
@@ -8,6 +8,9 @@ function handleDrop (e) {
 	e.preventDefault();
 	e.stopPropagation();
 
+	// console.log(e.dataTransfer.files);
+	window.clientWS.send('dropped-files', e.dataTransfer.files);
+
 	for (const f of e.dataTransfer.files) {
 		console.log('Dragged files', f.path);
 	}
diff --git a/yarn.lock b/yarn.lock
index 0b0596a..ab8119d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1062,7 +1062,7 @@ babel-preset-jest@^22.4.3:
 
 babel-register@^6.26.0:
   version "6.26.0"
-  resolved "https://registry.npmjs.org/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
+  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
   dependencies:
     babel-core "^6.26.0"
     babel-runtime "^6.26.0"
@@ -1238,6 +1238,10 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
+bootstrap@^4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.0.tgz#110b05c31a236d56dbc9adcda6dd16f53738a28a"
+
 boxen@^1.2.1:
   version "1.3.0"
   resolved "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz#55c6c39a8ba58d9c61ad22cd877532deb665a20b"
@@ -4463,6 +4467,10 @@ isomorphic-fetch@^2.1.1:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
 
+isomorphic-ws@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-ws/-/isomorphic-ws-4.0.0.tgz#7b528b238c920eeb3f5fe429ac416df669ea4cba"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -4800,6 +4808,10 @@ jest@^22.4.3:
     import-local "^1.0.0"
     jest-cli "^22.4.3"
 
+jquery@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"
@@ -5102,7 +5114,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
 
@@ -8175,6 +8187,12 @@ ws@^4.0.0:
     async-limiter "~1.0.0"
     safe-buffer "~5.1.0"
 
+ws@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.1.1.tgz#1d43704689711ac1942fd2f283e38f825c4b8b95"
+  dependencies:
+    async-limiter "~1.0.0"
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"