diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 23c7b18db..daed4adfb 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -366,7 +366,7 @@ export async function uploadFile(
 }
 
 export async function getProfilePictures(): Promise<ProfilePicturesTypeAPI> {
-  return await api.get(`${BASE_URL_API}files/list/profile_pictures`);
+  return api.get(`${BASE_URL_API}files/list/profile_pictures`);
 }
 
 export async function postCustomComponent(
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
index 9878448aa..da87594c0 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/hooks/use-get-profile-pictures.ts
@@ -1,3 +1,4 @@
+import { reject } from "lodash";
 import { PROFILE_PICTURES_GET_ERROR_ALERT } from "../../../../../../../../../constants/alerts_constants";
 import { getProfilePictures } from "../../../../../../../../../controllers/API";
 
@@ -11,6 +12,7 @@ const useGetProfilePictures = (setErrorData) => {
         title: PROFILE_PICTURES_GET_ERROR_ALERT,
         list: [(error as any)?.response?.data?.detail],
       });
+      throw error;
     }
   };
 
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
index b59521321..e1f0ee209 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
@@ -7,53 +7,71 @@ import {
   BACKEND_URL,
   BASE_URL_API,
 } from "../../../../../../../../constants/constants";
+import HorizontalScrollFadeComponent from "../../../../../../../../components/horizontalScrollFadeComponent";
+import LoadingComponent from "../../../../../../../../components/loadingComponent";
+import Loading from "../../../../../../../../components/ui/loading";
 
 export default function ProfilePictureChooserComponent({ value, onChange }) {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const getProfilePictures = useGetProfilePictures({ setErrorData });
 
   const [profilePictures, setProfilePictures] = useState<string[][]>([]);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    getProfilePictures().then((data) => {
-      if (data) {
-        data.forEach((profile_picture) => {
-          const [folder, path] = profile_picture.split("/");
-          setProfilePictures((prev) => {
-            if (prev[folder]) {
-              prev[folder].push(path);
-            } else {
-              prev[folder] = [path];
-            }
-            return prev;
+    getProfilePictures()
+      .then((data) => {
+        if (data) {
+          data.forEach((profile_picture) => {
+            const [folder, path] = profile_picture.split("/");
+            setProfilePictures((prev) => {
+              if (prev[folder]) {
+                prev[folder].push(path);
+              } else {
+                prev[folder] = [path];
+              }
+              return prev;
+            });
+            setLoading(false);
           });
-        });
-      }
-    });
+        }
+      })
+      .catch(() => {
+        setLoading(false);
+      });
   });
 
   return (
-    <div className="flex flex-wrap items-center justify-start gap-2">
-      {profilePictures.map((folder, idx) => (
-        <Label>
-          <div className="edit-flow-arrangement">
-            <span className="font-medium">{folder}</span>
-          </div>
-          <div className="flex flex-wrap items-center justify-start gap-2">
-            {folder.map((path, idx) => (
-              <img
-                key={idx}
-                src={`${BACKEND_URL.slice(
-                  0,
-                  BACKEND_URL.length - 1,
-                )}${BASE_URL_API}files/images/${folder + "/" + path}`}
-                className="h-12 w-12 rounded-full"
-                onClick={() => onChange(folder + "/" + path)}
-              />
-            ))}
-          </div>
-        </Label>
-      ))}
+    <div className="flex flex-col justify-center gap-2">
+      {loading ? (
+        <Loading />
+      ) : (
+        profilePictures.map((folder, idx) => (
+          <Label>
+            <div className="edit-flow-arrangement">
+              <span className="font-medium">{folder}</span>
+            </div>
+            <HorizontalScrollFadeComponent>
+              {folder.map((path, idx) => (
+                <img
+                  key={idx}
+                  src={`${BACKEND_URL.slice(
+                    0,
+                    BACKEND_URL.length - 1,
+                  )}${BASE_URL_API}files/images/${folder + "/" + path}`}
+                  className={
+                    "h-12 w-12 rounded-full" +
+                    (value === folder + "/" + path
+                      ? " border-2 border-white"
+                      : "")
+                  }
+                  onClick={() => onChange(folder + "/" + path)}
+                />
+              ))}
+            </HorizontalScrollFadeComponent>
+          </Label>
+        ))
+      )}
     </div>
   );
 }