diff --git a/frontend/src/components/ProductCard.tsx b/frontend/src/components/ProductCard.tsx
index d7a3cadd77156bc07c4ad322cb777ccc297f4f3c..683a181b1e31847eb6726296d43c409163155218 100644
--- a/frontend/src/components/ProductCard.tsx
+++ b/frontend/src/components/ProductCard.tsx
@@ -34,8 +34,7 @@ interface Tenant {
 
 export default function ProductCard({ data }: { data: ProductCardProps[] }) {
     const { getItemQuantity, increaseItemQuantity, removeItem, cartItems } = useShoppingCart();
-    const [isAdded, setIsAdded] = useLocalStorage<boolean>(`product`, false);
-    const [tenantData, setTenantData] = useState<Tenant[]>([]);
+    const [tenantData, setTenantData] = useLocalStorage<Tenant[]>(`tenant`, []);
 
     const getTenantData = async () => {
         const tenantResponse = await Axios.get(`http://localhost:8000/tenants`);
@@ -60,7 +59,7 @@ export default function ProductCard({ data }: { data: ProductCardProps[] }) {
 
     console.log(tenantData);
 
-    const [productData, setProductData] = useState<Product[]>([]);
+    const [productData, setProductData] = useLocalStorage<Product[]>(`product`, []);
 
     const getProductData = async () => {
         const productResponse = await Axios.get("http://localhost:8000/products");
@@ -95,8 +94,7 @@ export default function ProductCard({ data }: { data: ProductCardProps[] }) {
         return tenant?.id || 0;
     }
 
-    const [productStates, setProductStates] = useState<{ [key: number]: { isAdded: boolean, quantity: number } }>({});
-
+    const [productStates, setProductStates] = useLocalStorage<{ [key: number]: { isAdded: boolean, quantity: number } }>(`product`, {});
     const getQuantityAndIsAdded = (id: number) => {
         const quantity = getItemQuantity(id);
         const isAdded = productStates[id] ? productStates[id].isAdded : quantity > 0;
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 8c91ba0f65f5c18ec606c7a11c6310e8e97dbb91..c45e8d88d371675c58e9c7d8b29e44abe0736750 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -123,13 +123,39 @@ export default function Sidebar(props: any) {
                     </ul>
                 </div>
                 {props.customer === true ? (
-                    <div className="flex flex-col px-10 py-3.5 mt-auto mb-10">
+                    <div className="flex flex-col px-10 py-3.5 mt-auto mb-8">
                         <button
                             type="button"
                             className="flex text-mealshub-red bg-white hover:bg-mealshub-red hover:text-white font-medium rounded-2xl p-4 inline-flex group"
                         >
-                            <div className="flex flex-col w-52">
-                                <span className="flex whitespace-nowrap text-lg text-left">
+                            <div className="flex flex-col justify-center w-52">
+                                <div className="absolute group text-mealshub-red">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 28 33"
+                                        className="h-auto w-7 text-mealshub-red group-hover:hidden"
+                                    >
+                                        <path
+                                            fillRule="evenodd"
+                                            clipRule="evenodd"
+                                            d="M15.5554 24.0346L17.7292 26.2083L25.4375 18.5L17.7292 10.7917L15.5554 12.9654L19.5329 16.9583H4.625V20.0417H19.5329L15.5554 24.0346ZM29.2917 4.625H7.70833C6.89058 4.625 6.10632 4.94985 5.52809 5.52809C4.94985 6.10632 4.625 6.89058 4.625 7.70833V13.875H7.70833V7.70833H29.2917V29.2917H7.70833V23.125H4.625V29.2917C4.625 30.1094 4.94985 30.8937 5.52809 31.4719C6.10632 32.0501 6.89058 32.375 7.70833 32.375H29.2917C30.9875 32.375 32.375 30.9875 32.375 29.2917V7.70833C32.375 6.0125 30.9875 4.625 29.2917 4.625Z"
+                                            fill="currentcolor"
+                                        />
+                                    </svg>
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 0 28 33"
+                                        className="h-auto w-7 text-white hidden group-hover:block group-hover:shadow-xl"
+                                    >
+                                        <path
+                                            fillRule="evenodd"
+                                            clipRule="evenodd"
+                                            d="M15.5554 24.0346L17.7292 26.2083L25.4375 18.5L17.7292 10.7917L15.5554 12.9654L19.5329 16.9583H4.625V20.0417H19.5329L15.5554 24.0346ZM29.2917 4.625H7.70833C6.89058 4.625 6.10632 4.94985 5.52809 5.52809C4.94985 6.10632 4.625 6.89058 4.625 7.70833V13.875H7.70833V7.70833H29.2917V29.2917H7.70833V23.125H4.625V29.2917C4.625 30.1094 4.94985 30.8937 5.52809 31.4719C6.10632 32.0501 6.89058 32.375 7.70833 32.375H29.2917C30.9875 32.375 32.375 30.9875 32.375 29.2917V7.70833C32.375 6.0125 30.9875 4.625 29.2917 4.625Z"
+                                            fill="currentcolor"
+                                        />
+                                    </svg>
+                                </div>
+                                <span className="flex ms-14 whitespace-nowrap text-lg text-left">
                                     Log Out
                                 </span>
                             </div>