diff --git a/package.json b/package.json
index 4f437f7..b2b3a91 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@babel/preset-react": "^7.16.7",
     "babel-loader": "^8.2.3",
     "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
     "express": "^4.17.3",
     "html-critical-webpack-plugin": "^2.1.0",
@@ -24,6 +25,8 @@
     "html-webpack-plugin": "^5.5.0",
     "image-minimizer-webpack-plugin": "^3.2.3",
     "mini-css-extract-plugin": "^2.6.0",
+    "postcss-loader": "^6.2.1",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
diff --git a/src/components/App.jsx b/src/components/App.jsx
index c5d2f6b..667b754 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -27,12 +27,17 @@ const Box = (props) => {
 
 const App = () => {
   return (
-    <Canvas>
-      <ambientLight />
-      <pointLight position={[10, 10, 10]} />
-      <Box position={[-1.2, 0, 0]} />
-      <Box position={[1.2, 0, 0]} />
-    </Canvas>
+    <>
+      <nav>
+        nav
+      </nav>
+      <Canvas>
+        <ambientLight />
+        <pointLight position={[10, 10, 10]} />
+        <Box position={[-1.2, 0, 0]} />
+        <Box position={[1.2, 0, 0]} />
+      </Canvas>
+    </>
   );
 };
 
diff --git a/webpack.prod.js b/webpack.prod.js
index 3e99312..629e821 100644
--- a/webpack.prod.js
+++ b/webpack.prod.js
@@ -10,7 +10,7 @@ const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 module.exports = merge(commonConfiguration, {
   mode: 'production',
   entry: {
-    popshop: path.resolve(__dirname, './src/scripts/app.js'),
+    portfolio: path.resolve(__dirname, './src/scripts/app.js'),
   },
   devtool: 'source-map',
   output: {