Index: frontend/src/screens/CardPaymentScreen.js
===================================================================
--- frontend/src/screens/CardPaymentScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/CardPaymentScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,160 @@
+import React, { useContext, useEffect, useReducer, useState } from "react";
+import Container from "react-bootstrap/Container";
+import { Helmet } from "react-helmet-async";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import { useNavigate, useParams } from "react-router-dom";
+import { Store } from "../Store";
+import axios from "axios";
+import { getError } from "../components/utils";
+import { toast } from "react-toastify";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "CREATE_REQUEST":
+      return { ...state, loading: true };
+    case "CREATE_SUCCESS":
+      return { ...state, loading: false };
+    case "CREATE_FAIL":
+      return { ...state, loading: false };
+    default:
+      return state;
+  }
+};
+
+function CardPaymentScreen() {
+  const [validated, setValidated] = useState(false);
+  const navigate = useNavigate();
+
+  const [{ loading }, dispatch] = useReducer(reducer, {
+    loading: false,
+  });
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart, userInfo } = state;
+
+  const round2 = (num) => Math.round(num * 100 + Number.EPSILON) / 100;
+  cart.itemsPrice = round2(
+    cart.cartItems.reduce((a, c) => a + c.quantity * c.price, 0)
+  );
+  cart.shippingPrice = cart.itemsPrice > 1500 ? round2(0) : round2(150);
+  cart.totalPrice = cart.itemsPrice + cart.shippingPrice;
+
+  const paymentHandler = async (event) => {
+    event.preventDefault();
+    const form = event.currentTarget;
+    if (form.checkValidity() === false) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    setValidated(true);
+    if (form.checkValidity() === true) {
+      try {
+        dispatch({ type: "CREATE_REQUEST" });
+        const { data } = await axios.post(
+          "/api/orders",
+          {
+            orderItems: cart.cartItems,
+            shippingAddress: cart.shippingAddress,
+            paymentMethod: cart.paymentMethod,
+            itemsPrice: cart.itemsPrice,
+            shippingPrice: cart.shippingPrice,
+            totalPrice: cart.totalPrice,
+            isPaid: true,
+            paidAt: Date.now(),
+          },
+          {
+            headers: {
+              authorization: `Bearer ${userInfo.token}`,
+            },
+          }
+        );
+        ctxDispatch({ type: "CART_CLEAR" });
+        dispatch({ type: "CREATE_SUCCESS" });
+        localStorage.removeItem("cartItems");
+        navigate(`/order/${data.order._id}`);
+      } catch (err) {
+        dispatch({ type: "CREATE_FAIL" });
+        toast.error(getError(err));
+      }
+    }
+  };
+
+  return (
+    <div className="pageContainer">
+      <Container className="pageContainer shipPC">
+        <Helmet>
+          <title>Плати нарачка</title>
+        </Helmet>
+        <Form
+          noValidate
+          validated={validated}
+          onSubmit={paymentHandler}
+          className="formCointainer"
+        >
+          <Form.Group id="nameInput">
+            <Form.Label>Име и Презиме</Form.Label>
+            <Form.Control
+              type="text"
+              //value={holderName}
+              // onChange={(e) => setHolderName(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>Број на картичка</Form.Label>
+            <Form.Control
+              type="text"
+              //value={cardNumber}
+              //onChange={(e) => setCardNumber(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>CVV2/CVC2</Form.Label>
+            <Form.Control
+              type="text"
+              //value={cvv}
+              //onChange={(e) => setCvv(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>Рок на важност</Form.Label>
+            <div style={{ display: "flex" }}>
+              <Form.Select style={{ width: "47%", margin: "auto" }}>
+                <option value="01">01</option>
+                <option value="02">02</option>
+                <option value="03">03</option>
+                <option value="04">04</option>
+                <option value="05">05</option>
+                <option value="06">06</option>
+                <option value="07">07</option>
+                <option value="08">08</option>
+                <option value="09">09</option>
+                <option value="10">10</option>
+                <option value="11">11</option>
+                <option value="12">12</option>
+              </Form.Select>
+              <Form.Select style={{ width: "47%", margin: "auto" }}>
+                <option value="01">22</option>
+                <option value="02">23</option>
+                <option value="03">24</option>
+                <option value="04">25</option>
+                <option value="05">26</option>
+              </Form.Select>
+            </div>
+          </Form.Group>
+
+          <div className="submitBtnContainer">
+            <Button variant="danger" size="lg" type="submit">
+              Плати
+            </Button>
+          </div>
+        </Form>
+      </Container>
+    </div>
+  );
+}
+
+export default CardPaymentScreen;
Index: frontend/src/screens/OrderHistoryScreen.js
===================================================================
--- frontend/src/screens/OrderHistoryScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/OrderHistoryScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,108 @@
+import axios from "axios";
+import React, { useContext, useEffect, useReducer } from "react";
+import { Helmet } from "react-helmet-async";
+import { useNavigate } from "react-router-dom";
+import LoadingBox from "../components/LoadingBox";
+import MessageBox from "../components/MessageBox";
+import { getError } from "../components/utils";
+import { Store } from "../Store";
+import Button from "react-bootstrap/Button";
+import CheckIcon from "@mui/icons-material/Check";
+import ClearIcon from "@mui/icons-material/Clear";
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true };
+    case "FETCH_SUCCESS":
+      return { ...state, orders: action.payload, loading: false };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+};
+
+function OrderHistoryScreen() {
+  const { state } = useContext(Store);
+  const { userInfo } = state;
+  const navigate = useNavigate();
+
+  const [{ loading, error, orders }, dispatch] = useReducer(reducer, {
+    loading: true,
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      dispatch({ type: "FETCH_REQUEST" });
+      try {
+        const { data } = await axios.get("/api/orders/mine", {
+          headers: { Authorization: `Bearer ${userInfo.token}` },
+        });
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (error) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(error) });
+      }
+    };
+    fetchData();
+  }, [userInfo]);
+
+  return (
+    <div className="pageContainer shipPC">
+      <Helmet>
+        <title>Историја на нарачки</title>
+      </Helmet>
+      <h1 style={{ marginTop: "20px" }}>Историја на нарачки</h1>
+      {loading ? (
+        <LoadingBox></LoadingBox>
+      ) : error ? (
+        <MessageBox variant="danger">{error}</MessageBox>
+      ) : (
+        <table
+          className="table"
+          style={{ marginTop: "20px", width: "90%", textAlign: "center" }}
+        >
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Дата</th>
+              <th>Вкупно</th>
+              <th>Статус</th>
+              <th>Акции</th>
+            </tr>
+          </thead>
+          <tbody>
+            {orders.map((order) => (
+              <tr key={order._id}>
+                <td>{order._id.substring(0, 6)}</td>
+                <td>{order.createdAt.substring(0, 10)}</td>
+                <td>{order.totalPrice.toFixed(2)}</td>
+
+                <td>
+                  {order.isDelivered ? (
+                    <CheckIcon></CheckIcon>
+                  ) : (
+                    <ClearIcon></ClearIcon>
+                  )}
+                </td>
+                <td>
+                  <Button
+                    type="button"
+                    variant="primary"
+                    onClick={() => {
+                      navigate(`/order/${order._id}`);
+                    }}
+                  >
+                    Детали
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+
+export default OrderHistoryScreen;
Index: frontend/src/screens/OrderScreen.js
===================================================================
--- frontend/src/screens/OrderScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/OrderScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,176 @@
+import axios from "axios";
+import React, { useContext, useEffect, useReducer } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import LoadingBox from "../components/LoadingBox";
+import MessageBox from "../components/MessageBox";
+import { Store } from "../Store";
+import { getError } from "../components/utils";
+import { Helmet } from "react-helmet-async";
+import Row from "react-bootstrap/Row";
+import Card from "react-bootstrap/Card";
+import Col from "react-bootstrap/Col";
+import ListGroup from "react-bootstrap/ListGroup";
+
+function reducer(state, action) {
+  switch (action.type) {
+    case "FETCH_REQUEST":
+      return { ...state, loading: true, error: "" };
+    case "FETCH_SUCCESS":
+      return { ...state, loading: false, order: action.payload, error: "" };
+    case "FETCH_FAIL":
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+}
+
+export default function OrderScreen() {
+  const { state } = useContext(Store);
+  const { userInfo } = state;
+  const params = useParams();
+  const { id: orderId } = params;
+  const navigate = useNavigate();
+
+  const [{ loading, error, order }, dispatch] = useReducer(reducer, {
+    loading: true,
+    order: {},
+    error: "",
+  });
+
+  useEffect(() => {
+    const fetchOrder = async () => {
+      try {
+        dispatch({ type: "FETCH_REQUEST" });
+        const { data } = await axios.get(`/api/orders/${orderId}`, {
+          headers: { authorization: `Bearer ${userInfo.token}` },
+        });
+        dispatch({ type: "FETCH_SUCCESS", payload: data });
+      } catch (err) {
+        dispatch({ type: "FETCH_FAIL", payload: getError(err) });
+      }
+    };
+    if (!userInfo) {
+      return navigate("/login");
+    }
+    if (!order._id || (order._id && order._id !== orderId)) {
+      fetchOrder();
+    }
+  }, [order, userInfo, orderId, navigate]);
+
+  return loading ? (
+    <LoadingBox></LoadingBox>
+  ) : error ? (
+    <MessageBox variant="danger">{error}</MessageBox>
+  ) : (
+    <div className="pageContainer shipPC">
+      <Helmet>
+        <title>Нарачка {orderId}</title>
+      </Helmet>
+      <h1 style={{ marginTop: "20px" }}>Нарачка {orderId}</h1>
+      <Row style={{ width: "90%" }}>
+        <Col md={8}>
+          <Card className="mb-3">
+            <Card.Body>
+              <Card.Title>Испорака</Card.Title>
+              <Card.Text>
+                <strong>Име:</strong> {order.shippingAddress.fullName}
+                <br />
+                <strong>Адреса:</strong> {order.shippingAddress.address},
+                {order.shippingAddress.city},{order.shippingAddress.postalCode},
+                {order.shippingAddress.country}
+              </Card.Text>
+              {order.isDelivered ? (
+                <MessageBox variant="success">
+                  Доставено на {order.deliveredAt}
+                </MessageBox>
+              ) : (
+                <MessageBox variant="danger">Не е доставено</MessageBox>
+              )}
+            </Card.Body>
+          </Card>
+          <Card className="mb-3">
+            <Card.Body>
+              <Card.Title>Плаќање</Card.Title>
+              <Card.Text>
+                <strong>Начин:</strong>{" "}
+                {order.paymentMethod === "Karticka"
+                  ? "Со платежна картичка"
+                  : "Во готово при достава"}
+              </Card.Text>
+              {order.isPaid ? (
+                <MessageBox variant="success">
+                  Платено на {order.paidAt}
+                </MessageBox>
+              ) : (
+                <MessageBox variant="danger">Не е платено</MessageBox>
+              )}
+            </Card.Body>
+          </Card>
+          <Card className="mb-3">
+            <Card.Body>
+              <Card.Title>Продукти</Card.Title>
+              <ListGroup variant="flush">
+                {order.orderItems.map((item) => (
+                  <ListGroup.Item key={item._id}>
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                      }}
+                    >
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        <img
+                          src={item.image}
+                          alt={item.name}
+                          className="img-fluid rounded img-thumbnail"
+                          style={{ margin: "0px" }}
+                        ></img>
+                        <Link to={`/product/${item.slug}`}>{item.name}</Link>
+                      </div>
+
+                      <span>{item.quantity}</span>
+
+                      <span>{item.price} ден</span>
+                    </div>
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+            </Card.Body>
+          </Card>
+        </Col>
+        <Col md={4}>
+          <Card>
+            <Card.Body>
+              <Card.Title>Нарачка</Card.Title>
+              <ListGroup variant="flush">
+                <ListGroup.Item>
+                  <Row>
+                    <Col>Продукти:</Col>
+                    <Col>{order.itemsPrice.toFixed(2)} ден</Col>
+                  </Row>
+                </ListGroup.Item>
+                <ListGroup.Item>
+                  <Row>
+                    <Col>Испорака:</Col>
+                    <Col>{order.shippingPrice.toFixed(2)} ден</Col>
+                  </Row>
+                </ListGroup.Item>
+
+                <ListGroup.Item>
+                  <Row>
+                    <Col>
+                      <strong>Вкупно</strong>
+                    </Col>
+                    <Col>
+                      <strong>{order.totalPrice.toFixed(2)} ден</strong>
+                    </Col>
+                  </Row>
+                </ListGroup.Item>
+              </ListGroup>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}
Index: frontend/src/screens/PaymentMethodScreen.js
===================================================================
--- frontend/src/screens/PaymentMethodScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/PaymentMethodScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,79 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
+import CheckoutSteps from "../components/CheckoutSteps";
+import Container from "react-bootstrap/Container";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import { Store } from "../Store";
+import { useNavigate } from "react-router-dom";
+import CreditCardIcon from "@mui/icons-material/CreditCard";
+
+function PaymentMethodScreen() {
+  const navigate = useNavigate();
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const {
+    cart: { shippingAddress, paymentMethod },
+  } = state;
+  const [paymentMethodName, setPaymentMethod] = useState(
+    paymentMethod || "Karticka"
+  );
+
+  useEffect(() => {
+    if (!shippingAddress.address) {
+      navigate("/shipping");
+    }
+  }, [shippingAddress, navigate]);
+  const submitHandler = (e) => {
+    e.preventDefault();
+    ctxDispatch({ type: "SAVE_PAYMENT_METHOD", payload: paymentMethodName });
+    localStorage.setItem("paymentMethod", paymentMethodName);
+    navigate("/placeorder");
+  };
+  return (
+    <div className="pageContainer shipPC">
+      <CheckoutSteps step1 step2 step3 />
+      <Container className="main">
+        <Helmet>
+          <title>Начин на наплата</title>
+        </Helmet>
+        <h1 style={{ marginTop: "10px" }}>Начин на наплата</h1>
+        <Form
+          onSubmit={submitHandler}
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <div className="radioContainer" style={{ marginTop: "10px" }}>
+            <Form.Check
+              type="radio"
+              id="Karticka"
+              label="Со платежна картичка"
+              value="Karticka"
+              checked={paymentMethodName === "Karticka"}
+              onChange={(e) => setPaymentMethod(e.target.value)}
+            />
+          </div>
+          <div className="radioContainer" style={{ marginTop: "10px" }}>
+            <Form.Check
+              type="radio"
+              id="voGotovo"
+              label="Во готово при достава"
+              value="voGotovo"
+              checked={paymentMethodName === "voGotovo"}
+              onChange={(e) => setPaymentMethod(e.target.value)}
+            />
+          </div>
+          <div style={{ marginTop: "20px" }}>
+            <Button variant="danger" type="submit">
+              Продолжи
+            </Button>
+          </div>
+        </Form>
+      </Container>
+    </div>
+  );
+}
+
+export default PaymentMethodScreen;
Index: frontend/src/screens/PlaceOrderScreen.js
===================================================================
--- frontend/src/screens/PlaceOrderScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/PlaceOrderScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,216 @@
+import React, { useContext, useEffect, useReducer } from "react";
+import Axios from "axios";
+import { Helmet } from "react-helmet-async";
+import CheckoutSteps from "../components/CheckoutSteps";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+import ListGroup from "react-bootstrap/ListGroup";
+import { getError } from "../components/utils";
+import { toast } from "react-toastify";
+import { Store } from "../Store";
+import { Link, useNavigate } from "react-router-dom";
+import LoadingBox from "../components/LoadingBox";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "CREATE_REQUEST":
+      return { ...state, loading: true };
+    case "CREATE_SUCCESS":
+      return { ...state, loading: false };
+    case "CREATE_FAIL":
+      return { ...state, loading: false };
+    default:
+      return state;
+  }
+};
+
+function PlaceOrderScreen() {
+  const navigate = useNavigate();
+
+  const [{ loading }, dispatch] = useReducer(reducer, {
+    loading: false,
+  });
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart, userInfo } = state;
+
+  const round2 = (num) => Math.round(num * 100 + Number.EPSILON) / 100;
+  cart.itemsPrice = round2(
+    cart.cartItems.reduce((a, c) => a + c.quantity * c.price, 0)
+  );
+  cart.shippingPrice = cart.itemsPrice > 1500 ? round2(0) : round2(150);
+  cart.totalPrice = cart.itemsPrice + cart.shippingPrice;
+
+  const paymentHandler = async () => {
+    navigate(`/placeorder/payment`);
+  };
+
+  const placeOrderHandler = async () => {
+    try {
+      dispatch({ type: "CREATE_REQUEST" });
+      const { data } = await Axios.post(
+        "/api/orders",
+        {
+          orderItems: cart.cartItems,
+          shippingAddress: cart.shippingAddress,
+          paymentMethod: cart.paymentMethod,
+          itemsPrice: cart.itemsPrice,
+          shippingPrice: cart.shippingPrice,
+          totalPrice: cart.totalPrice,
+        },
+        {
+          headers: {
+            authorization: `Bearer ${userInfo.token}`,
+          },
+        }
+      );
+      ctxDispatch({ type: "CART_CLEAR" });
+      dispatch({ type: "CREATE_SUCCESS" });
+      localStorage.removeItem("cartItems");
+      navigate(`/order/${data.order._id}`);
+    } catch (err) {
+      dispatch({ type: "CREATE_FAIL" });
+      toast.error(getError(err));
+    }
+  };
+
+  useEffect(() => {
+    if (!cart.paymentMethod) {
+      navigate("/payment");
+    }
+  }, [cart, navigate]);
+
+  return (
+    <div className="pageContainer shipPC">
+      <CheckoutSteps step1 step2 step3 step4 />
+
+      <Helmet>
+        <title>Потврди нарачка</title>
+      </Helmet>
+      <h1 style={{ marginTop: "20px" }}>Потврди нарачка</h1>
+      <Row style={{ width: "90%" }}>
+        <Col md={8}>
+          <Card className="mb-3">
+            <Card.Body>
+              <Card.Title>Испорака</Card.Title>
+              <Card.Text>
+                <strong>Име:</strong> {cart.shippingAddress.fullName}
+                <br />
+                <strong>Адреса:</strong> {cart.shippingAddress.address},
+                {cart.shippingAddress.city},{cart.shippingAddress.postalCode},
+                {cart.shippingAddress.country}
+                <br />
+              </Card.Text>
+              <Link to="/shipping">Измени</Link>
+            </Card.Body>
+          </Card>
+          <Card className="mb-3">
+            <Card.Body>
+              <Card.Title>Плаќање</Card.Title>
+              <Card.Text>
+                <strong>Начин:</strong>{" "}
+                {cart.paymentMethod === "Karticka"
+                  ? "Со платежна картичка"
+                  : "Во готово при достава"}
+              </Card.Text>
+              <Link to="/payment">Измени</Link>
+            </Card.Body>
+          </Card>
+
+          <Card className="mb-3">
+            <Card.Body>
+              <Card.Title>Продукти</Card.Title>
+              <ListGroup variant="flush">
+                {cart.cartItems.map((item) => (
+                  <ListGroup.Item key={item._id}>
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                      }}
+                    >
+                      <div style={{ display: "flex", alignItems: "center" }}>
+                        <img
+                          src={item.image}
+                          alt={item.name}
+                          className="img-fluid rounded img-thumbnail"
+                          style={{ margin: "0px" }}
+                        ></img>
+                        <Link to={`/product/${item.slug}`}>{item.name}</Link>
+                      </div>
+
+                      <span>{item.quantity}</span>
+
+                      <span>{item.price} ден</span>
+                    </div>
+                  </ListGroup.Item>
+                ))}
+              </ListGroup>
+              <Link to="/cart">Измени</Link>
+            </Card.Body>
+          </Card>
+        </Col>
+        <Col md={4}>
+          <Card>
+            <Card.Body>
+              <Card.Title>Нарачка</Card.Title>
+              <ListGroup variant="flush">
+                <ListGroup.Item>
+                  <Row>
+                    <Col>Продукти:</Col>
+                    <Col>{cart.itemsPrice.toFixed(2)} ден</Col>
+                  </Row>
+                </ListGroup.Item>
+                <ListGroup.Item>
+                  <Row>
+                    <Col>Испорака:</Col>
+                    <Col>{cart.shippingPrice.toFixed(2)} ден</Col>
+                  </Row>
+                </ListGroup.Item>
+
+                <ListGroup.Item>
+                  <Row>
+                    <Col>
+                      <strong>Вкупно</strong>
+                    </Col>
+                    <Col>
+                      <strong>{cart.totalPrice.toFixed(2)} ден</strong>
+                    </Col>
+                  </Row>
+                </ListGroup.Item>
+                <ListGroup.Item>
+                  <div className="d-grid">
+                    {cart.paymentMethod === "Karticka" ? (
+                      <Button
+                        type="button"
+                        onClick={paymentHandler}
+                        disabled={cart.cartItems.length === 0}
+                        variant="danger"
+                      >
+                        Плати
+                      </Button>
+                    ) : (
+                      <Button
+                        type="button"
+                        onClick={placeOrderHandler}
+                        disabled={cart.cartItems.length === 0}
+                        variant="danger"
+                      >
+                        Потврди нарачка
+                      </Button>
+                    )}
+                  </div>
+                  {loading && <LoadingBox></LoadingBox>}
+                </ListGroup.Item>
+              </ListGroup>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+}
+
+export default PlaceOrderScreen;
Index: frontend/src/screens/ShippingAddressScreen.js
===================================================================
--- frontend/src/screens/ShippingAddressScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/ShippingAddressScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,118 @@
+import React, { useContext, useEffect, useState } from "react";
+import { Helmet } from "react-helmet-async";
+import Form from "react-bootstrap/Form";
+import Button from "react-bootstrap/Button";
+import Container from "react-bootstrap/Container";
+import { useNavigate } from "react-router-dom";
+import { Store } from "../Store";
+import CheckoutSteps from "../components/CheckoutSteps";
+
+function ShippingAddressScreen() {
+  const navigate = useNavigate();
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const {
+    userInfo,
+    cart: { shippingAddress },
+  } = state;
+  const [fullName, setFullName] = useState(shippingAddress.fullName || "");
+  const [address, setAddress] = useState(shippingAddress.address || "");
+  const [city, setCity] = useState(shippingAddress.city || "");
+  const [postalCode, setPostalCode] = useState(
+    shippingAddress.postalCode || ""
+  );
+  const [country, setCountry] = useState(shippingAddress.country || "");
+
+  useEffect(() => {
+    if (!userInfo) {
+      navigate("/signin");
+    }
+  }, [userInfo, navigate]);
+
+  const submitHandler = (e) => {
+    e.preventDefault();
+    ctxDispatch({
+      type: "SAVE_SHIPPING_ADDRESS",
+      payload: {
+        fullName,
+        address,
+        city,
+        postalCode,
+        country,
+      },
+    });
+    localStorage.setItem(
+      "shippingAddress",
+      JSON.stringify({
+        fullName,
+        address,
+        city,
+        postalCode,
+        country,
+      })
+    );
+    navigate("/payment");
+  };
+
+  return (
+    <div className="pageContainer shipPC">
+      <CheckoutSteps step1 step2 />
+      <Container className="main">
+        <Helmet>
+          <title>Адреса</title>
+        </Helmet>
+
+        <h1 className="my-3">Адреса</h1>
+
+        <Form onSubmit={submitHandler} className="formCointainer">
+          <Form.Group>
+            <Form.Label>Име и Презиме</Form.Label>
+            <Form.Control
+              value={fullName}
+              onChange={(e) => setFullName(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>Адреса</Form.Label>
+            <Form.Control
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>Град</Form.Label>
+            <Form.Control
+              value={city}
+              onChange={(e) => setCity(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>Поштенски код</Form.Label>
+            <Form.Control
+              value={postalCode}
+              onChange={(e) => setPostalCode(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>Држава</Form.Label>
+            <Form.Control
+              value={country}
+              onChange={(e) => setCountry(e.target.value)}
+              required
+            ></Form.Control>
+          </Form.Group>
+          <div className="submitBtnContainer">
+            <Button variant="danger" size="lg" type="submit">
+              Продолжи
+            </Button>
+          </div>
+        </Form>
+      </Container>
+    </div>
+  );
+}
+
+export default ShippingAddressScreen;
Index: frontend/src/screens/SigninScreen.js
===================================================================
--- frontend/src/screens/SigninScreen.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/screens/SigninScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -1,2 +1,3 @@
+import Axios from "axios";
 import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";
@@ -4,11 +5,43 @@
 import Button from "react-bootstrap/Button";
 import "../styles/SigninScreen.css";
-import React from "react";
-import { Link, useLocation } from "react-router-dom";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Store } from "../Store";
+import { toast } from "react-toastify";
+import { getError } from "../components/utils";
 
 function SigninScreen() {
+  const navigate = useNavigate();
   const { search } = useLocation();
   const redirectInUrl = new URLSearchParams(search).get("redirect");
   const redirect = redirectInUrl ? redirectInUrl : "/";
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { userInfo } = state;
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await Axios.post("/api/users/signin", {
+        email,
+        password,
+      });
+      ctxDispatch({ type: "USER_SIGNIN", payload: data });
+      localStorage.setItem("userInfo", JSON.stringify(data));
+      navigate(redirect || "/");
+    } catch (err) {
+      toast.error(getError(err));
+    }
+  };
+
+  useEffect(() => {
+    if (userInfo) {
+      navigate(redirect);
+    }
+  }, [navigate, redirect, userInfo]);
+
   return (
     <div className="pageContainer">
@@ -18,12 +51,20 @@
         </Helmet>
         <h1>Најави се</h1>
-        <Form className="formCointainer">
+        <Form className="formCointainer" onSubmit={submitHandler}>
           <Form.Group controlId="email">
             <Form.Label>Email</Form.Label>
-            <Form.Control type="email" required />
+            <Form.Control
+              type="email"
+              required
+              onChange={(e) => setEmail(e.target.value)}
+            />
           </Form.Group>
           <Form.Group controlId="password">
             <Form.Label>Лозинка</Form.Label>
-            <Form.Control type="email" required />
+            <Form.Control
+              type="password"
+              required
+              onChange={(e) => setPassword(e.target.value)}
+            />
           </Form.Group>
           <div className="submitBtnContainer">
Index: frontend/src/screens/SignupScreen.js
===================================================================
--- frontend/src/screens/SignupScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/screens/SignupScreen.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,118 @@
+import Axios from "axios";
+import Container from "react-bootstrap/Container";
+import Form from "react-bootstrap/Form";
+import { Helmet } from "react-helmet-async";
+import Button from "react-bootstrap/Button";
+import "../styles/SigninScreen.css";
+import React, { useContext, useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Store } from "../Store";
+import { toast } from "react-toastify";
+import { getError } from "../components/utils";
+
+function SignupScreen() {
+  const navigate = useNavigate();
+  const { search } = useLocation();
+  const redirectInUrl = new URLSearchParams(search).get("redirect");
+  const redirect = redirectInUrl ? redirectInUrl : "/";
+
+  const [name, setName] = useState("");
+  const [contact, setContact] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { userInfo } = state;
+
+  const submitHandler = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      toast.error("Лозинките не се совпаѓаат");
+      return;
+    }
+    try {
+      const { data } = await Axios.post("/api/users/signup", {
+        name,
+        contact,
+        email,
+        password,
+      });
+      ctxDispatch({ type: "USER_SIGNIN", payload: data });
+      localStorage.setItem("userInfo", JSON.stringify(data));
+      navigate(redirect || "/");
+    } catch (err) {
+      toast.error(getError(err));
+    }
+  };
+
+  useEffect(() => {
+    if (userInfo) {
+      navigate(redirect);
+    }
+  }, [navigate, redirect, userInfo]);
+
+  return (
+    <div className="pageContainer">
+      <Container className="main">
+        <Helmet>
+          <title>Регистрирај се</title>
+        </Helmet>
+        <h1>Регистрирај се</h1>
+        <Form className="formCointainer" onSubmit={submitHandler}>
+          <Form.Group controlId="name">
+            <Form.Label>Име и Презиме</Form.Label>
+            <Form.Control
+              style={{ textAlign: "left" }}
+              required
+              onChange={(e) => setName(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="contact">
+            <Form.Label>Телефон</Form.Label>
+            <Form.Control
+              type="text"
+              required
+              onChange={(e) => setContact(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="email">
+            <Form.Label>Email</Form.Label>
+            <Form.Control
+              type="email"
+              required
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="password">
+            <Form.Label>Лозинка</Form.Label>
+            <Form.Control
+              type="password"
+              required
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </Form.Group>
+          <Form.Group controlId="confirmPassword">
+            <Form.Label>Потврди Лозинка</Form.Label>
+            <Form.Control
+              type="password"
+              required
+              onChange={(e) => setConfirmPassword(e.target.value)}
+            />
+          </Form.Group>
+          <div className="submitBtnContainer">
+            <Button variant="danger" size="lg" type="submit">
+              Регистрирај се
+            </Button>
+          </div>
+          <div className="registerParagraph">
+            Имате профил?{" "}
+            <Link to={`/signin?redirect=${redirect}`}>Најави се</Link>
+          </div>
+        </Form>
+      </Container>
+    </div>
+  );
+}
+
+export default SignupScreen;
