diff --git a/src/frontend/src/components/gradientChooserComponent/index.tsx b/src/frontend/src/components/gradientChooserComponent/index.tsx
index 1209e6064..dccb93c68 100644
--- a/src/frontend/src/components/gradientChooserComponent/index.tsx
+++ b/src/frontend/src/components/gradientChooserComponent/index.tsx
@@ -6,7 +6,7 @@ export default function GradientChooserComponent({value, onChange}){
     return (
         <div className="flex flex-wrap gap-4 justify-center items-center">
             {gradients.map((gradient, idx) => 
-            <div onClick={() => {onChange(gradient)}} className={"w-12 h-12 rounded-full transition-all duration-400 " + gradient + (value === gradient ?  " shadow-lg ring-2 ring-primary" : "")} key={idx}></div>
+            <div onClick={() => {onChange(gradient)}} className={"cursor-pointer w-12 h-12 rounded-full transition-all duration-400 " + gradient + (value === gradient ?  " shadow-lg ring-2 ring-primary" : "")} key={idx}></div>
             )}
             </div>
     )
diff --git a/src/frontend/src/components/headerComponent/index.tsx b/src/frontend/src/components/headerComponent/index.tsx
index 7b0e32373..c73943e0c 100644
--- a/src/frontend/src/components/headerComponent/index.tsx
+++ b/src/frontend/src/components/headerComponent/index.tsx
@@ -139,7 +139,7 @@ export default function Header(): JSX.Element {
                   <button
                     className={
                       "h-7 w-7 rounded-full focus-visible:outline-0 " +
-                      (userData!.profile_image ?? gradients[parseInt(userData!.id ?? "", 30) % gradients.length])
+                      (userData?.profile_image ?? gradients[parseInt(userData?.id ?? "", 30) % gradients.length])
                     }
                   />
                 </DropdownMenuTrigger>
diff --git a/src/frontend/src/pages/ProfileSettingsPage/index.tsx b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
index 4ddac280f..5bf63b807 100644
--- a/src/frontend/src/pages/ProfileSettingsPage/index.tsx
+++ b/src/frontend/src/pages/ProfileSettingsPage/index.tsx
@@ -1,4 +1,5 @@
 import * as Form from "@radix-ui/react-form";
+import { cloneDeep } from "lodash";
 import { useContext, useEffect, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import GradientChooserComponent from "../../components/gradientChooserComponent";
@@ -27,7 +28,7 @@ export default function ProfileSettingsPage(): JSX.Element {
     setTabId("");
   }, []);
   const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { userData } = useContext(AuthContext);
+  const { userData, setUserData } = useContext(AuthContext);
   const { password, cnfPassword, gradient } = inputState;
 
   function handlePatchUser() {
@@ -38,12 +39,21 @@ export default function ProfileSettingsPage(): JSX.Element {
       });
       return;
     }
-    try{
-      updateUser(userData!.id, { password, profile_image: gradient }).then(() => {setSuccessData({title: "Changes saved successfully!"})});
-    } catch (error) {
-      setErrorData({title: "Error saving changes", list: [error as string]});
-    }
+    try {
+      updateUser(userData!.id, { password, profile_image: gradient }).then(
+        () => {
+          setSuccessData({ title: "Changes saved successfully!" });
+          if (gradient !== "") {
+            let newUserData = cloneDeep(userData);
+            newUserData!.profile_image = gradient;
 
+            setUserData(newUserData);
+          }
+        }
+      );
+    } catch (error) {
+      setErrorData({ title: "Error saving changes", list: [error as string] });
+    }
   }
 
   function handleInput({
@@ -130,12 +140,19 @@ export default function ProfileSettingsPage(): JSX.Element {
               </Form.Label>
 
               <div className="mt-4 w-[1010px]">
-              <GradientChooserComponent
-                value={gradient == "" ? (userData!.profile_image ?? gradients[parseInt(userData!.id ?? "", 30) % gradients.length]) : gradient}
-                onChange={(value) => {
-                  handleInput({ target: { name: "gradient", value } });
-                }}
-              />
+                <GradientChooserComponent
+                  value={
+                    gradient == ""
+                      ? userData!.profile_image ??
+                        gradients[
+                          parseInt(userData!.id ?? "", 30) % gradients.length
+                        ]
+                      : gradient
+                  }
+                  onChange={(value) => {
+                    handleInput({ target: { name: "gradient", value } });
+                  }}
+                />
               </div>
             </Form.Field>
           </div>