diff --git a/backend/config.js b/backend/config.js
index 4467a7d..5af10c8 100644
--- a/backend/config.js
+++ b/backend/config.js
@@ -4,7 +4,7 @@ dotenv.config();
 
 export default {
   PORT: process.env.PORT || 5000,
-  MONGODB_URL: process.env.MONGODB_URL || 'mongodb://localhost/amazona',
+  MONGODB_URL: process.env.MONGO_URI || 'mongodb://localhost/amazona',
   JWT_SECRET: process.env.JWT_SECRET || 'somethingsecret',
   PAYPAL_CLIENT_ID: process.env.PAYPAL_CLIENT_ID || 'sb',
   accessKeyId: process.env.accessKeyId || 'accessKeyId',
diff --git a/backend/routes/orderRoute.js b/backend/routes/orderRoutes.js
similarity index 95%
rename from backend/routes/orderRoute.js
rename to backend/routes/orderRoutes.js
index ad9181a..b6d33fc 100644
--- a/backend/routes/orderRoute.js
+++ b/backend/routes/orderRoutes.js
@@ -1,6 +1,6 @@
 import express from 'express';
-import Order from '../models/orderModel';
-import { isAuth, isAdmin } from '../util';
+import Order from '../models/orderModel.js';
+import { isAuth, isAdmin } from '../util.js';
 
 const router = express.Router();
 
diff --git a/backend/routes/productRoute.js b/backend/routes/productRoutes.js
similarity index 97%
rename from backend/routes/productRoute.js
rename to backend/routes/productRoutes.js
index 8bc2799..8a6db44 100644
--- a/backend/routes/productRoute.js
+++ b/backend/routes/productRoutes.js
@@ -1,6 +1,6 @@
 import express from 'express';
-import Product from '../models/productModel';
-import { isAuth, isAdmin } from '../util';
+import Product from '../models/productModel.js';
+import { isAuth, isAdmin } from '../util.js';
 
 const router = express.Router();
 
diff --git a/backend/routes/uploadRoute.js b/backend/routes/uploadRoutes.js
similarity index 96%
rename from backend/routes/uploadRoute.js
rename to backend/routes/uploadRoutes.js
index c962954..a2b1bf0 100644
--- a/backend/routes/uploadRoute.js
+++ b/backend/routes/uploadRoutes.js
@@ -2,7 +2,7 @@ import express from 'express';
 import multer from 'multer';
 import multerS3 from 'multer-s3';
 import aws from 'aws-sdk';
-import config from '../config';
+import config from '../config.js';
 
 const storage = multer.diskStorage({
   destination(req, file, cb) {
diff --git a/backend/routes/userRoute.js b/backend/routes/userRoutes.js
similarity index 95%
rename from backend/routes/userRoute.js
rename to backend/routes/userRoutes.js
index 40ab7d4..e71dbdf 100644
--- a/backend/routes/userRoute.js
+++ b/backend/routes/userRoutes.js
@@ -1,6 +1,6 @@
 import express from 'express';
-import User from '../models/userModel';
-import { getToken, isAuth } from '../util';
+import User from '../models/userModel.js';
+import { getToken, isAuth } from '../util.js';
 
 const router = express.Router();
 
diff --git a/backend/server.js b/backend/server.js
index f3abd1c..75bab1d 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -2,11 +2,17 @@ import express from 'express';
 import path from 'path';
 import mongoose from 'mongoose';
 import bodyParser from 'body-parser';
-import config from './config';
-import userRoute from './routes/userRoute';
-import productRoute from './routes/productRoute';
-import orderRoute from './routes/orderRoute';
-import uploadRoute from './routes/uploadRoute';
+import config from './config.js';
+import userRoute from './routes/userRoutes.js';
+import productRoute from './routes/productRoutes.js';
+import orderRoute from './routes/orderRoutes.js';
+import uploadRoute from './routes/uploadRoutes.js';
+
+
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 const mongodbUrl = config.MONGODB_URL;
 mongoose
@@ -27,9 +33,9 @@ app.get('/api/config/paypal', (req, res) => {
   res.send(config.PAYPAL_CLIENT_ID);
 });
 app.use('/uploads', express.static(path.join(__dirname, '/../uploads')));
-app.use(express.static(path.join(__dirname, '/../frontend/build')));
+app.use(express.static(path.join(__dirname, '/../frontend/public')));
 app.get('*', (req, res) => {
-  res.sendFile(path.join(`${__dirname}/../frontend/build/index.html`));
+  res.sendFile(path.join(`${__dirname}/../frontend/public/index.html`));
 });
 
 app.listen(config.PORT, () => {
diff --git a/backend/util.js b/backend/util.js
index 36504db..ba960c0 100644
--- a/backend/util.js
+++ b/backend/util.js
@@ -1,5 +1,5 @@
 import jwt from 'jsonwebtoken';
-import config from './config';
+import config from './config.js';
 const getToken = (user) => {
   return jwt.sign(
     {
diff --git a/frontend/package.json b/frontend/package.json
index d8b2e58..e54c7b0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,12 +17,13 @@
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
+ "scripts": {
+  "start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
+  "build": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
+  "test": "react-scripts test",
+  "eject": "react-scripts eject"
+},
+
   "eslintConfig": {
     "extends": "react-app"
   },
diff --git a/frontend/src/index.css b/frontend/src/index.css
index ed41da3..eac8683 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -69,18 +69,19 @@ a:hover {
 /* Home Screen */
 .products {
   display: flex;
-  justify-content: center;
-  align-items: center;
   flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
 }
+
 .products li {
   list-style-type: none;
+  margin: 0.5rem;
   padding: 0;
-  flex: 0 1 34rem;
-  margin: 1rem;
-  height: 50rem;
-  border-bottom: 0.1rem #c0c0c0 solid;
+  flex: 1 1 100%; 
+  max-width: 100%;
 }
+
 .product {
   display: flex;
   flex-direction: column;
@@ -100,9 +101,13 @@ a:hover {
   font-weight: bold;
 }
 .product-image {
-  max-width: 34rem;
-  max-height: 34rem;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  display: block;
 }
+
+
 .product-rating {
   margin-bottom: 1rem;
 }
@@ -463,3 +468,23 @@ tbody > tr:nth-child(odd) {
 .categories a:hover {
   background-color: #c0c0c0;
 }
+@media (min-width: 360px) {
+  .products li {
+    flex: 1 1 48%; 
+    max-width: 48%;
+  }
+}
+
+@media (min-width: 768px) {
+  .products li {
+    flex: 1 1 30%; /* 3 items per row */
+    max-width: 30%;
+  }
+}
+
+@media (min-width: 1024px) {
+  .products li {
+    flex: 1 1 22%; /* 4 items per row */
+    max-width: 22%;
+  }
+}