diff --git a/client/src/asset/icons/user1.png b/client/src/asset/icons/user1.png
index 9be1ea5c..88507b70 100644
Binary files a/client/src/asset/icons/user1.png and b/client/src/asset/icons/user1.png differ
diff --git a/client/src/components/Nav/Controls/Control.css b/client/src/components/Nav/Controls/Control.css
index f836e187..3dca3bc5 100644
--- a/client/src/components/Nav/Controls/Control.css
+++ b/client/src/components/Nav/Controls/Control.css
@@ -1,39 +1,52 @@
-
+/* Control.css */
 
 .control__bar__container {
     height: auto;
-    width: 200px;
-    margin: auto;
+    width: auto; /* Allow width to be determined by content or parent */
+    margin: auto; /* This centers the container if its parent allows */
     display: flex;
-    justify-content: center;
+    justify-content: flex-end; /* Align the controls to the right of the header */
     align-items: center;
     position: relative;
     z-index: 1000;
+    padding-right: 15px; /* Adds space from the right edge of the viewport/parent */
 }
 
 .controls__container {
     display: flex;
-    justify-content: space-around;
+    justify-content: flex-end; /* Align items to the right within this inner container */
     align-items: center;
     flex-direction: row;
-    width: 80%;
-    height: 50px;
+    width: auto; /* Allow width to be determined by content */
+    height: 50px; /* Keep consistent height for the bar containing controls */
+    gap: 10px; /* This adds 10px spacing BETWEEN the LOGIN, Heart, and Cart buttons */
+    /* Adjust this 'gap' value as needed to get your desired separation */
 }
 
+/* The .control class is now effectively redundant for styling the buttons themselves.
+   You can remove it entirely or keep it only if it serves some other non-visual purpose
+   (e.g., a common selector for JavaScript events not tied to the Button component).
+   For visual styling, stick to Mui Button's sx prop. */
+
+/* If you delete the .control class from your JSX, you can remove this CSS block */
+/*
 .control {
-    width: 45px;
-    height: 45px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-style: solid;
-    border-color: #FFE26E;
-    border-radius: 10px;
-    cursor: pointer;
-    margin: 5px;
+    // These styles are now handled by the Mui Button's sx prop
+    // width: 45px;
+    // height: 45px;
+    // display: flex;
+    // justify-content: center;
+    // align-items: center;
+    // border-style: solid;
+    // border-color: #FFE26E;
+    // border-radius: 10px;
+    // cursor: pointer;
+    // margin: 5px; // Replaced by 'gap' on controls__container
 }
 
 .control:hover {
-    background-color: #FFE26E;
-    color: black;
+    // Handled by Mui Button's sx prop hover state
+    // background-color: #FFE26E;
+    // color: black;
 }
+*/
\ No newline at end of file
diff --git a/client/src/components/Nav/Controls/Control.js b/client/src/components/Nav/Controls/Control.js
index 57a25a69..ac15f313 100644
--- a/client/src/components/Nav/Controls/Control.js
+++ b/client/src/components/Nav/Controls/Control.js
@@ -1,37 +1,109 @@
-import './Control.css'
-import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
+import './Control.css' // Keep your custom CSS file for overall layout
+// REMOVED: import PersonOutlineIcon from '@mui/icons-material/PersonOutline'; // Remove if not used elsewhere
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined'; // Assuming this is your cart icon, ensure it's imported
 import Badge from '@mui/material/Badge';
 import { Link } from 'react-router-dom';
-import Cart from '../../Card/Cart/Cart';
+// REMOVED: import Cart from '../../Card/Cart/Cart'; // We'll use a direct icon for consistency unless Cart handles more
 import { useContext } from 'react';
 import { WishItemsContext } from '../../../Context/WishItemsContext';
 
+// Import Material-UI components
+import Button from '@mui/material/Button';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+import Box from '@mui/material/Box'; // For flexible container and spacing
+
 const Control = () => {
-    const wishItems = useContext(WishItemsContext)
+    const wishItems = useContext(WishItemsContext);
+    // If you have a CartContext for the badge, uncomment and import:
+    // const cartItems = useContext(CartContext);
+
+    // Define common button styles using a single object for consistency
+    const commonButtonStyle = {
+        backgroundColor: '#FFE082', // Yellowish background color
+        color: 'black',             // Text/icon color
+        borderRadius: '15px',       // Rounded corners
+        border: '1px solid #FFC107', // Border to mimic the outline
+        minWidth: 'unset',          // Allow button to shrink to content
+        height: '45px',             // Consistent height for all buttons
+        display: 'flex',            // Use flex to center content
+        alignItems: 'center',       // Center content vertically
+        justifyContent: 'center',   // Center content horizontally
+        '&:hover': {
+            backgroundColor: '#FFD700', // Slightly darker yellow on hover
+            // You might want to remove the border on hover if it looks better:
+            // border: '1px solid #FFD700',
+        },
+    };
+
+    // Styles for buttons that only contain an icon (Heart and Cart)
+    const iconButtonStyle = {
+        ...commonButtonStyle, // Inherit common styles
+        width: '45px',       // Make them square
+        padding: '0',        // No internal padding for icon-only buttons
+    };
 
-    return ( 
+    return (
         <div className="control__bar__container">
             <div className="controls__container">
-                <div className="control">
-                    <Link to="/account/login">
-                        <PersonOutlineIcon color="black" size="large" sx={{ width: '35px'}}/>
+
+                {/* LOGIN Button */}
+                {/* Wrap in Box if you need individual item spacing not handled by gap on controls__container */}
+                <Box>
+                    <Link to="/account/login" style={{ textDecoration: 'none' }}>
+                        <Button
+                            variant="contained"
+                            sx={{
+                                ...commonButtonStyle, // Apply base styles
+                                padding: '6px 15px', // Specific padding for text+icon button to make it wider
+                            }}
+                            startIcon={<LockOutlinedIcon sx={{ color: 'black' }} />}
+                        >
+                            LOGIN
+                        </Button>
+                    </Link>
+                </Box>
+
+                {/* Wishlist Button (Heart Icon) */}
+                <Box>
+                    <Link to="/wishlist" style={{ textDecoration: 'none' }}>
+                        <Badge badgeContent={wishItems.items.length} color="error" overlap="circular">
+                            <Button
+                                variant="contained"
+                                sx={iconButtonStyle} // Apply square icon button styles
+                                aria-label="Wishlist" // Good for accessibility
+                            >
+                                <FavoriteBorderIcon sx={{ color: 'black', fontSize: '24px' }}/>
+                            </Button>
+                        </Badge>
                     </Link>
-                </div>
-                <div className="control">
-                    <Link to="/wishlist">
-                        <Badge badgeContent={wishItems.items.length} color="error">
-                            <FavoriteBorderIcon color="black" sx={{ width: '35px'}}/>
+                </Box>
+
+                {/* Cart Button (Shopping Cart Icon) */}
+                <Box>
+                    {/* Assuming '/cart' is the path for the cart page */}
+                    <Link to="/cart" style={{ textDecoration: 'none' }}>
+                        <Badge
+                            badgeContent={/* cartItems.items.length || */ 0} // Replace 0 with actual cart item count
+                            color="error"
+                            overlap="circular"
+                            showZero // Show badge even if count is 0
+                        >
+                            <Button
+                                variant="contained"
+                                sx={iconButtonStyle} // Apply square icon button styles
+                                aria-label="Shopping Cart" // Good for accessibility
+                            >
+                                {/* Using ShoppingCartOutlinedIcon directly for consistency */}
+                                <ShoppingCartOutlinedIcon sx={{ color: 'black', fontSize: '24px' }}/>
+                            </Button>
                         </Badge>
                     </Link>
-                </div>
-                <div className="control">
-                    <Cart />
-                </div>
-                
+                </Box>
+
             </div>
         </div>
-     );
+    );
 }
- 
+
 export default Control;
\ No newline at end of file