diff --git a/package-lock.json b/package-lock.json
index 7166229..408bcb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,9 +17,8 @@
                 "@babel/preset-react": "^7.16.0",
                 "babel-loader": "^8.2.0",
                 "babel-plugin-styled-components": "^2.0.0",
-                "css-loader": "^6.6.0",
                 "html-webpack-plugin": "^5.5.0",
-                "style-loader": "^3.3.0",
+                "url-loader": "^4.1.1",
                 "webpack": "^5.69.0",
                 "webpack-cli": "^4.9.0",
                 "webpack-dev-server": "^4.7.0"
@@ -3140,47 +3139,6 @@
                 "node": ">=4"
             }
         },
-        "node_modules/css-loader": {
-            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.6.0.tgz",
-            "integrity": "sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg==",
-            "dev": true,
-            "dependencies": {
-                "icss-utils": "^5.1.0",
-                "postcss": "^8.4.5",
-                "postcss-modules-extract-imports": "^3.0.0",
-                "postcss-modules-local-by-default": "^4.0.0",
-                "postcss-modules-scope": "^3.0.0",
-                "postcss-modules-values": "^4.0.0",
-                "postcss-value-parser": "^4.2.0",
-                "semver": "^7.3.5"
-            },
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^5.0.0"
-            }
-        },
-        "node_modules/css-loader/node_modules/semver": {
-            "version": "7.3.5",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-            "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-            "dev": true,
-            "dependencies": {
-                "lru-cache": "^6.0.0"
-            },
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/css-select": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
@@ -3221,18 +3179,6 @@
                 "url": "https://github.com/sponsors/fb55"
             }
         },
-        "node_modules/cssesc": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-            "dev": true,
-            "bin": {
-                "cssesc": "bin/cssesc"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/debug": {
             "version": "2.6.9",
             "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -4271,18 +4217,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/icss-utils": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-            "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-            "dev": true,
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
         "node_modules/ignore": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -4706,18 +4640,6 @@
                 "tslib": "^2.0.3"
             }
         },
-        "node_modules/lru-cache": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-            "dev": true,
-            "dependencies": {
-                "yallist": "^4.0.0"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
         "node_modules/make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -4900,18 +4822,6 @@
             "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
             "dev": true
         },
-        "node_modules/nanoid": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-            "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
-            "dev": true,
-            "bin": {
-                "nanoid": "bin/nanoid.cjs"
-            },
-            "engines": {
-                "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-            }
-        },
         "node_modules/negotiator": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -5304,101 +5214,12 @@
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
             "dev": true
         },
-        "node_modules/postcss": {
-            "version": "8.4.7",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
-            "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
-            "dev": true,
-            "dependencies": {
-                "nanoid": "^3.3.1",
-                "picocolors": "^1.0.0",
-                "source-map-js": "^1.0.2"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >=14"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/postcss/"
-            }
-        },
-        "node_modules/postcss-modules-extract-imports": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-            "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-            "dev": true,
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
-        "node_modules/postcss-modules-local-by-default": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-            "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-            "dev": true,
-            "dependencies": {
-                "icss-utils": "^5.0.0",
-                "postcss-selector-parser": "^6.0.2",
-                "postcss-value-parser": "^4.1.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
-        "node_modules/postcss-modules-scope": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-            "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-            "dev": true,
-            "dependencies": {
-                "postcss-selector-parser": "^6.0.4"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
-        "node_modules/postcss-modules-values": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-            "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-            "dev": true,
-            "dependencies": {
-                "icss-utils": "^5.0.0"
-            },
-            "engines": {
-                "node": "^10 || ^12 || >= 14"
-            },
-            "peerDependencies": {
-                "postcss": "^8.1.0"
-            }
-        },
-        "node_modules/postcss-selector-parser": {
-            "version": "6.0.9",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
-            "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
-            "dev": true,
-            "dependencies": {
-                "cssesc": "^3.0.0",
-                "util-deprecate": "^1.0.2"
-            },
-            "engines": {
-                "node": ">=4"
-            }
-        },
         "node_modules/postcss-value-parser": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "node_modules/pretty-error": {
             "version": "4.0.0",
@@ -6024,15 +5845,6 @@
                 "node": ">=0.10.0"
             }
         },
-        "node_modules/source-map-js": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-            "dev": true,
-            "engines": {
-                "node": ">=0.10.0"
-            }
-        },
         "node_modules/spdy": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -6171,22 +5983,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/style-loader": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-            "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-            "dev": true,
-            "engines": {
-                "node": ">= 12.13.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/webpack"
-            },
-            "peerDependencies": {
-                "webpack": "^5.0.0"
-            }
-        },
         "node_modules/styled-components": {
             "version": "5.3.3",
             "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
@@ -6444,6 +6240,62 @@
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/url-loader": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+            "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+            "dev": true,
+            "dependencies": {
+                "loader-utils": "^2.0.0",
+                "mime-types": "^2.1.27",
+                "schema-utils": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "file-loader": "*",
+                "webpack": "^4.0.0 || ^5.0.0"
+            },
+            "peerDependenciesMeta": {
+                "file-loader": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/url-loader/node_modules/json5": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+            "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+            "dev": true,
+            "dependencies": {
+                "minimist": "^1.2.5"
+            },
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/url-loader/node_modules/loader-utils": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+            "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+            "dev": true,
+            "dependencies": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+            },
+            "engines": {
+                "node": ">=8.9.0"
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -6900,12 +6752,6 @@
                     "optional": true
                 }
             }
-        },
-        "node_modules/yallist": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-            "dev": true
         }
     },
     "dependencies": {
@@ -9264,33 +9110,6 @@
             "dev": true,
             "peer": true
         },
-        "css-loader": {
-            "version": "6.6.0",
-            "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.6.0.tgz",
-            "integrity": "sha512-FK7H2lisOixPT406s5gZM1S3l8GrfhEBT3ZiL2UX1Ng1XWs0y2GPllz/OTyvbaHe12VgQrIXIzuEGVlbUhodqg==",
-            "dev": true,
-            "requires": {
-                "icss-utils": "^5.1.0",
-                "postcss": "^8.4.5",
-                "postcss-modules-extract-imports": "^3.0.0",
-                "postcss-modules-local-by-default": "^4.0.0",
-                "postcss-modules-scope": "^3.0.0",
-                "postcss-modules-values": "^4.0.0",
-                "postcss-value-parser": "^4.2.0",
-                "semver": "^7.3.5"
-            },
-            "dependencies": {
-                "semver": {
-                    "version": "7.3.5",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-                    "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-                    "dev": true,
-                    "requires": {
-                        "lru-cache": "^6.0.0"
-                    }
-                }
-            }
-        },
         "css-select": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
@@ -9322,12 +9141,6 @@
             "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
             "dev": true
         },
-        "cssesc": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-            "dev": true
-        },
         "debug": {
             "version": "2.6.9",
             "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -10121,13 +9934,6 @@
                 "safer-buffer": ">= 2.1.2 < 3"
             }
         },
-        "icss-utils": {
-            "version": "5.1.0",
-            "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-            "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-            "dev": true,
-            "requires": {}
-        },
         "ignore": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -10433,15 +10239,6 @@
                 "tslib": "^2.0.3"
             }
         },
-        "lru-cache": {
-            "version": "6.0.0",
-            "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-            "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-            "dev": true,
-            "requires": {
-                "yallist": "^4.0.0"
-            }
-        },
         "make-dir": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -10579,12 +10376,6 @@
             "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
             "dev": true
         },
-        "nanoid": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz",
-            "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==",
-            "dev": true
-        },
         "negotiator": {
             "version": "0.6.3",
             "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -10880,68 +10671,12 @@
                 }
             }
         },
-        "postcss": {
-            "version": "8.4.7",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.7.tgz",
-            "integrity": "sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A==",
-            "dev": true,
-            "requires": {
-                "nanoid": "^3.3.1",
-                "picocolors": "^1.0.0",
-                "source-map-js": "^1.0.2"
-            }
-        },
-        "postcss-modules-extract-imports": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-            "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-            "dev": true,
-            "requires": {}
-        },
-        "postcss-modules-local-by-default": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-            "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-            "dev": true,
-            "requires": {
-                "icss-utils": "^5.0.0",
-                "postcss-selector-parser": "^6.0.2",
-                "postcss-value-parser": "^4.1.0"
-            }
-        },
-        "postcss-modules-scope": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-            "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-            "dev": true,
-            "requires": {
-                "postcss-selector-parser": "^6.0.4"
-            }
-        },
-        "postcss-modules-values": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-            "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-            "dev": true,
-            "requires": {
-                "icss-utils": "^5.0.0"
-            }
-        },
-        "postcss-selector-parser": {
-            "version": "6.0.9",
-            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz",
-            "integrity": "sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==",
-            "dev": true,
-            "requires": {
-                "cssesc": "^3.0.0",
-                "util-deprecate": "^1.0.2"
-            }
-        },
         "postcss-value-parser": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-            "dev": true
+            "dev": true,
+            "peer": true
         },
         "pretty-error": {
             "version": "4.0.0",
@@ -11424,12 +11159,6 @@
             "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
             "dev": true
         },
-        "source-map-js": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-            "dev": true
-        },
         "spdy": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -11529,13 +11258,6 @@
             "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
             "dev": true
         },
-        "style-loader": {
-            "version": "3.3.1",
-            "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-            "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
-            "dev": true,
-            "requires": {}
-        },
         "styled-components": {
             "version": "5.3.3",
             "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.3.tgz",
@@ -11715,6 +11437,39 @@
                 "punycode": "^2.1.0"
             }
         },
+        "url-loader": {
+            "version": "4.1.1",
+            "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
+            "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^2.0.0",
+                "mime-types": "^2.1.27",
+                "schema-utils": "^3.0.0"
+            },
+            "dependencies": {
+                "json5": {
+                    "version": "2.2.0",
+                    "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+                    "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+                    "dev": true,
+                    "requires": {
+                        "minimist": "^1.2.5"
+                    }
+                },
+                "loader-utils": {
+                    "version": "2.0.2",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
+                    "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+                    "dev": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                }
+            }
+        },
         "util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -12032,12 +11787,6 @@
             "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
             "dev": true,
             "requires": {}
-        },
-        "yallist": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-            "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-            "dev": true
         }
     }
 }
diff --git a/package.json b/package.json
index bcea51e..8dec3d4 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,7 @@
         "@babel/preset-react": "^7.16.0",
         "babel-loader": "^8.2.0",
         "babel-plugin-styled-components": "^2.0.0",
-        "css-loader": "^6.6.0",
-        "style-loader": "^3.3.0",
+        "url-loader": "^4.1.1",
         "html-webpack-plugin": "^5.5.0",
         "webpack-dev-server": "^4.7.0",
         "webpack": "^5.69.0",
diff --git a/src/img/photo.jpg b/src/img/photo.jpg
new file mode 100644
index 0000000..0d88b2f
Binary files /dev/null and b/src/img/photo.jpg differ
diff --git a/src/index.html b/src/index.html
index 805c6ab..4ede4de 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,11 +5,14 @@
     
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
-    <link href="https://fonts.googleapis.com/css?family=Raleway" 
-            rel="stylesheet"/>
     <script defer src="bundle.js"></script>
     <style type="text/css">
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+                'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+                sans-serif;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
             background: #005e6f linear-gradient(223deg, #005e6f 20%, #001d7a);
             height: 100vh;
             width: 100vw;
diff --git a/src/js/components/About.jsx b/src/js/components/About.jsx
new file mode 100644
index 0000000..2a479c5
--- /dev/null
+++ b/src/js/components/About.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+/**
+ * A component that displays a name and biography.
+ *
+ * @author James Manes (admin@jmanes.com)
+ */
+const About = () => {
+
+    const About = styled.div`
+        
+    `
+    const Link = styled.a`
+        color: white;
+    `
+    const Header = styled.h1`
+        margin: 0;
+    `
+
+    const Biography = styled.p`
+    `
+
+    const Paragraph = styled.p`
+        margin-bottom: 4px;
+        :last-child {
+            margin-top: 2px;
+        }
+    `
+
+    return(
+        <About>
+            <Header>James Manes</Header>
+            <div>
+                <Biography>
+                    Senior Software Engineer passionate about clean code and concise
+                    documentation.
+                </Biography>
+                <Paragraph>
+                🎓 Bachelor & Master of Science from <Link rel="noopener noreferrer" 
+                        href="https://ucmo.edu" target="_blank">UCM</Link>.
+                </Paragraph>
+                <Paragraph>
+                💼 Currently employed at <Link rel="noopener noreferrer" 
+                        href="https://www.cerner.com/" target="_blank">Cerner Corporation</Link>.
+                </Paragraph>
+            </div>
+        </About>
+    );
+}
+
+export default About;
\ No newline at end of file
diff --git a/src/js/components/AboutPane.jsx b/src/js/components/AboutPane.jsx
deleted file mode 100644
index 7103d94..0000000
--- a/src/js/components/AboutPane.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-/**
- * Represents the about view which displays a photo and biography.
- *
- * @author James Manes
- */
-const AboutPane = () => {
-
-    const About = styled.div`
-        
-    `
-    const Link = styled.a`
-        color: white;
-    `
-
-    return(
-        <About>
-            <div id="photo"></div>
-            <h1>James Manes</h1>
-            <div id="biography">
-                <p>
-                Software Engineer with a passion for clean code and concise
-                documentation. Proficient with React JS, HTML/CSS and Java.
-                </p>
-                <p>
-                Master of Science from <Link rel="noopener noreferrer" 
-                href="https://ucmo.edu" target="_blank">UCM</Link>.
-                <br/>
-                Currently employed at <Link rel="noopener noreferrer" 
-                href="https://www.cerner.com/" target="_blank">Cerner 
-                Corporation</Link>.
-                </p>
-            </div>
-        </About>
-    );
-}
-
-export default AboutPane;
\ No newline at end of file
diff --git a/src/js/components/App.jsx b/src/js/components/App.jsx
index f1f54d5..23c7407 100644
--- a/src/js/components/App.jsx
+++ b/src/js/components/App.jsx
@@ -1,16 +1,37 @@
 import React from 'react';
-import Container from './Container';
-import AboutPane from './AboutPane';
+import styled from 'styled-components';
+import About from './About';
 import Navigation from './Navigation';
-import BackgroundGrid from './BackgroundGrid';
+import Avatar from './Avatar';
 
+/**
+ * Main application component.
+ */
 const App = () => {
+    const Container = styled.div`
+        background-color: rgba(255, 255, 255, 0.1);
+        font-family: "Raleway", sans-serif;
+        border-radius: 14px;
+        font-size: 11pt;
+        width: 350px;
+        color: white;
+        padding: 20px;
+        margin: 20px;
+    `
+    const OuterContainer = styled.div`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `
 
     return (
-        <Container>
-            <AboutPane/>
-            <Navigation/>
-        </Container>
+        <OuterContainer>
+            <Avatar/>
+            <Container>
+                <About/>
+                <Navigation/>
+            </Container>
+        </OuterContainer>
     )
 }
 
diff --git a/src/js/components/Avatar.jsx b/src/js/components/Avatar.jsx
new file mode 100644
index 0000000..fb6ed2a
--- /dev/null
+++ b/src/js/components/Avatar.jsx
@@ -0,0 +1,32 @@
+import styled, { keyframes} from 'styled-components';
+import Image from '../../img/photo.jpg';
+
+const rotate = keyframes`
+    to {
+        transform: rotate(360deg);
+    }
+`
+
+const Avatar = styled.div`
+    background-image: url(${Image});
+    background-size: 100%;
+    outline-offset: 10px;
+    border-radius: 100%;
+    margin-right: 20px;
+    width: 150px;
+    height: 150px;
+    position: relative;
+    :before {
+        animation: ${rotate} 60s linear infinite;
+        outline: 4px dotted rgba(255, 255, 255, 0.1);
+        postion: absolute;
+        display: block;
+        border-radius: 100%;
+        outline-offset: 10px;
+        width: 150px;
+        height: 150px;
+        content: '';
+    }
+`
+
+export default Avatar;
\ No newline at end of file
diff --git a/src/js/components/Button.jsx b/src/js/components/Button.jsx
new file mode 100644
index 0000000..8da6806
--- /dev/null
+++ b/src/js/components/Button.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Button = ({ children, angle, href }) => {
+    const OuterButton = styled.a`
+        border-radius: 10px;
+        display: inline-block;
+        background: rgba(240, 0, 20, 0.4);
+        text-decoration: none;
+        text-align: center;
+        line-height: 30px;
+        min-width: 100px;
+        margin-left: 20px;
+        user-select: none;
+        color: white;
+        transform: rotate(${props => props.angle}deg);
+        transition: transform .2s;
+        :first-child {
+            margin-left: 0;
+        }
+        :hover {
+            text-decoration: underline;
+            transform: scale(1.2);
+            cursor: pointer;
+        }
+        :focus {
+            outline: 4px solid rgba(0, 0, 0, 0.3);
+        }
+    `
+    const InnerButton = styled.div`
+        border-radius: 5px;
+        background: rgba(0, 0, 0, 0.3);
+        margin: 6px;
+        transform: rotate(-${props => props.angle}deg);
+
+    `
+
+    return (
+        <OuterButton angle={angle} href={href} rel="noopener noreferrer" target="_blank">
+            <InnerButton angle={angle}>
+                {children}
+            </InnerButton>
+        </OuterButton>
+    )
+}
+
+export default Button;
\ No newline at end of file
diff --git a/src/js/components/Container.jsx b/src/js/components/Container.jsx
deleted file mode 100644
index 5780d93..0000000
--- a/src/js/components/Container.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const Container = styled.div`
-    background-color: rgba(255, 255, 255, 0.1);
-    font-family: "Raleway", sans-serif;
-    font-size: 11pt;
-    color: white;
-    width: 300px;
-    border-radius: 10px;
-    padding: 20px;
-`
-
-export default Container;
\ No newline at end of file
diff --git a/src/js/components/MainView.jsx b/src/js/components/MainView.jsx
deleted file mode 100644
index 8193d26..0000000
--- a/src/js/components/MainView.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from "react";
-import Navigation from "./Navigation.jsx";
-import AboutPane from "./AboutPane.jsx";
-
-/**
- * Represents the main view that can interchange dynamic panes of information.
- *
- * @author James Manes (admin@jmanes.com)
- */
-export default class MainView extends React.Component {
-    constructor(props) {
-        super(props);
-        this.centerContentY = this.centerContentY.bind(this);
-        this.paneRef = React.createRef();
-        this.state = {
-            currentHeight: 0
-        }
-    }
-
-    /**
-     * Centers the main view pane on the screen vertically using
-     * translate Y.
-     */
-    centerContentY() {
-        if(window.innerHeight !== this.state.currentHeight) {
-            var offset = (window.innerHeight / 2) - (this.paneRef.current
-                    .offsetHeight / 2);
-            var translateY = "translateY(" + offset + "px)";
-
-            this.paneRef.current.style.transform = translateY;
-
-            this.setState({
-                currentHeight: window.innerHeight
-            });
-        }
-    }
-
-    /**
-     * React JS method for handling post-render logic.
-     */
-    componentDidMount() {
-        window.addEventListener("resize", this.centerContentY);
-        this.centerContentY();
-    }
-
-    /**
-     * React JS method for rendering the DOM element(s).
-     *
-     * @returns {Object} The virtual DOM element.
-     */
-    render() {
-        return(
-            <div id="main-view-pane" ref={this.paneRef}>
-                <AboutPane/>
-                <Navigation/>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/js/components/Navigation.jsx b/src/js/components/Navigation.jsx
index 17c380d..cde1359 100644
--- a/src/js/components/Navigation.jsx
+++ b/src/js/components/Navigation.jsx
@@ -1,57 +1,31 @@
 import React from 'react';
-import styled, { keyframes} from 'styled-components';
+import styled from 'styled-components';
+import Button from './Button';
 
 /**
- * Represents the navigation bar.
+ * Navigation bar component.
  *
  * @author James Manes (admin@jmanes.com)
  */
 const Navigation = () => {
 
     const randomAngle = () => {
-        return Math.floor((Math.random() * 3) + 1);
+        return Math.floor((Math.random() * 4) + 1);
     }
 
-    const angle1 = randomAngle();
-    const angle2 = randomAngle();
-
-    const Button = styled.a`
-        border-radius: 10px;
-        display: inline-block;
-        background: rgba(240, 0, 20, 0.4);
-        text-decoration: none;
-        text-align: center;
-        line-height: 30px;
-        min-width: 100px;
-        margin-right: 8px;
-        margin-left: 8px;
-        user-select: none;
-        color: white;
-        transform: rotate(${props => props.angle}deg);
-    `
-    const InnerButton = styled.div`
-        border-radius: 5px;
-        background: rgba(0, 0, 0, 0.3);
-        margin: 6px;
-        transform: rotate(-${props => props.angle}deg);
-
+    const ButtonContainer = styled.div`
+        margin-top: 20px
     `
 
     return(
-        <div id="navigation">
+        <ButtonContainer>
             <Button href="http://stackoverflow.com/story/jmanes" 
-                    rel="noopener noreferrer" target="_blank"
-                    className="navigation-item"
-                    angle={angle1}>
-                <InnerButton angle={angle1}>History</InnerButton>
-            </Button>
+                    angle={randomAngle()}>History</Button>
             <Button href="https://www.linkedin.com/in/jamesmanes" 
-                    rel="noopener noreferrer" target="_blank" 
-                    className="navigation-item"
-                    angle={angle2}>
-                <InnerButton angle={angle2}>LinkedIn</InnerButton>
-            </Button>
-        </div>
+                    angle={randomAngle()}>LinkedIn</Button>
+            <Button href="https://jmanes.blog" 
+                    angle={randomAngle()}>Blog</Button>
+        </ButtonContainer>
     );
 }
 
diff --git a/webpack.common.js b/webpack.common.js
index dbd2794..70afa66 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -35,9 +35,12 @@ module.exports = {
 				}
 			},
 			{
-				test: /\.css$/i,
-				exclude: /node_modules/,
-				use: ['style-loader', 'css-loader']
+				test: /\.jpg$/i,
+				use: [
+					{
+						loader: 'url-loader'
+					}
+				]
 			}
 		]
 	},