Index: frontend/src/components/CheckoutSteps.js
===================================================================
--- frontend/src/components/CheckoutSteps.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
+++ frontend/src/components/CheckoutSteps.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -0,0 +1,16 @@
+import React from "react";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+
+function CheckoutSteps(props) {
+  return (
+    <Row className="checkout-steps">
+      <Col className={props.step1 ? "active" : ""}>Најава</Col>
+      <Col className={props.step2 ? "active" : ""}>Адреса</Col>
+      <Col className={props.step3 ? "active" : ""}>Плаќање</Col>
+      <Col className={props.step4 ? "active" : ""}>Потврди</Col>
+    </Row>
+  );
+}
+
+export default CheckoutSteps;
Index: frontend/src/components/Header.js
===================================================================
--- frontend/src/components/Header.js	(revision b612ab199d55e75ecec5afcec894a7ed2f3d32ec)
+++ frontend/src/components/Header.js	(revision 16237c49c48dec4a9921c2dd8bd19ccf9e9fb846)
@@ -16,5 +16,5 @@
 import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Link } from "react-router-dom";
+import { Link, NavLink, useNavigate } from "react-router-dom";
 import logo2 from "../Images/logo2.png";
 import Badge from "react-bootstrap/Badge";
@@ -22,6 +22,8 @@
 import { Store } from "../Store";
 import { useContext } from "react";
+import NavDropdown from "react-bootstrap/NavDropdown";
 
 const toggleMenu = (event) => {
+  event.stopPropagation();
   let menu = document.querySelector(".mobile-menu-container");
   menu.classList.remove("hidden");
@@ -30,4 +32,5 @@
 
 const toggleSubMenu = (event) => {
+  event.stopPropagation();
   let menu = document.querySelector(".subDropdown");
   menu.classList.remove("hidden");
@@ -68,6 +71,15 @@
 
 function Header() {
-  const { state } = useContext(Store);
-  const { cart } = state;
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart, userInfo } = state;
+  const navigate = useNavigate();
+
+  const signoutHandler = () => {
+    ctxDispatch({ type: "USER_SIGNOUT" });
+    localStorage.removeItem("userInfo");
+    localStorage.removeItem("shippingAddress");
+    localStorage.removeItem("paymentMethod");
+  };
+
   return (
     <div className="header">
@@ -78,5 +90,12 @@
           onClick={toggleMenu}
         />
-        <img className="header__icon" src={logo2} alt="logo"></img>
+        <img
+          className="header__icon"
+          src={logo2}
+          alt="logo"
+          onClick={() => {
+            navigate("/");
+          }}
+        ></img>
       </div>
       <div className="mobile-menu-container hidden">
@@ -85,5 +104,11 @@
         </div>
         <ul className="mobile-menu">
-          <li>Почетна</li>
+          <Link
+            to="/"
+            style={{ textDecoration: "none", color: "black" }}
+            onClick={closeMenu}
+          >
+            <li>Почетна</li>
+          </Link>
           <li onClick={toggleSubMenu} className="subMenu">
             Производи <ArrowDropDownIcon />
@@ -492,8 +517,57 @@
       <div className="header__right">
         <div className="header__buttons">
-          <span>
-            <AccountCircleIcon className="header__login" fontSize="large" />
-            <p>Најави се</p>
-          </span>
+          {userInfo ? (
+            <NavDropdown
+              title={
+                <span>
+                  <AccountCircleIcon
+                    className="header__login"
+                    fontSize="large"
+                  />
+                  <p>{userInfo.name}</p>
+                </span>
+              }
+              id="basic-nav-dropdown"
+            >
+              <NavDropdown.Item
+                onClick={() => {
+                  navigate("/profile");
+                }}
+              >
+                Профил
+              </NavDropdown.Item>
+
+              <NavDropdown.Item
+                onClick={() => {
+                  navigate("/orderhistory");
+                }}
+              >
+                Нарачки
+              </NavDropdown.Item>
+
+              <NavDropdown.Divider />
+              <Link
+                className="drowdown-item"
+                to="#signout"
+                onClick={signoutHandler}
+              >
+                Одјави се
+              </Link>
+            </NavDropdown>
+          ) : (
+            <Link
+              to={"/signin"}
+              className="link"
+              onClick={() => {
+                navigate("/orderhistory");
+              }}
+            >
+              <span>
+                <AccountCircleIcon className="header__login" fontSize="large" />
+                <p>Најави се</p>
+              </span>
+            </Link>
+          )}
+
           <Link to="/cart" className="badgee">
             <span>
