diff --git a/assets/css/components/_search-input.scss b/assets/css/components/_search-input.scss
index ac1b94c..4089927 100644
--- a/assets/css/components/_search-input.scss
+++ b/assets/css/components/_search-input.scss
@@ -1,5 +1,5 @@
 .search-input {
-  background-image: url("/images/search-icon.svg");
+  background-image: url("../static/images/search-icon.svg");
   background-position: center right 0.5rem;
   background-repeat: no-repeat;
   border: 1px solid $base-border-color;
diff --git a/assets/css/components/_square.scss b/assets/css/components/_square.scss
index 95b734a..ccbaf4c 100644
--- a/assets/css/components/_square.scss
+++ b/assets/css/components/_square.scss
@@ -103,7 +103,7 @@
   @each $colour in $colours {
     @each $piece in $pieces {
       &.square--#{$colour}.square--#{$piece}::before {
-        background-image: url("/images/#{$piece}_#{$colour}.svg");
+        background-image: url("../static/images/#{$piece}_#{$colour}.svg");
       }
     }
   }
diff --git a/assets/js/app.js b/assets/js/app.js
index 210bb1d..146dad5 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7,6 +7,8 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { createStore } from "redux";
 
+import css from "../css/app.scss";
+
 import Game from "./components/game";
 import OpponentFinder from "./components/opponent-finder";
 import chessBoardReducer from "./reducers/chess-board";
diff --git a/assets/package.json b/assets/package.json
index 95abce6..aca4884 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "deploy": "webpack --mode production",
-    "watch": "webpack --mode development --watch"
+    "watch": "webpack --mode development --watch-stdin"
   },
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
@@ -19,7 +19,8 @@
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "redux": "^4.1.0",
-    "redux-watch": "^1.2.0"
+    "redux-watch": "^1.2.0",
+    "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
index ac2230d..8ce9152 100644
--- a/assets/webpack.config.js
+++ b/assets/webpack.config.js
@@ -31,9 +31,21 @@ module.exports = (env, options) => {
           },
         },
         {
-          test: /\.[s]?css$/,
+          test: /\.s?css$/,
           use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
         },
+        {
+          test: /\.(png|jpg|gif|svg)$/i,
+          use: [
+            {
+              loader: "url-loader",
+              options: {
+                limit: 8192,
+                name: "[name].[hash:7].[ext]",
+              },
+            },
+          ],
+        },
       ],
     },
     plugins: [
diff --git a/assets/yarn.lock b/assets/yarn.lock
index d50baf3..64bc8b9 100644
--- a/assets/yarn.lock
+++ b/assets/yarn.lock
@@ -3123,6 +3123,9 @@ performance-now@^2.1.0:
 "phoenix_html@file:../deps/phoenix_html":
   version "2.14.3"
 
+"phoenix_live_view@file:../deps/phoenix_live_view":
+  version "0.15.3"
+
 picomatch@^2.2.1, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
@@ -4172,6 +4175,15 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+url-loader@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"