diff --git a/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts b/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts
index 4394c04e012..adc6c5fc135 100644
--- a/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts
+++ b/src/frontend/src/controllers/API/queries/api-keys/use-post-add-api-key.ts
@@ -8,9 +8,10 @@ interface IPostAddApiKey {
 }
 
 // add types for error handling and success
-export const usePostAddApiKey: useMutationFunctionType<IPostAddApiKey> = (
-  options,
-) => {
+export const usePostAddApiKey: useMutationFunctionType<
+  undefined,
+  IPostAddApiKey
+> = (options) => {
   const { mutate } = UseRequestProcessor();
 
   const postAddApiKeyFn = async (payload: IPostAddApiKey): Promise<any> => {
diff --git a/src/frontend/src/controllers/API/queries/auth/use-add-user.ts b/src/frontend/src/controllers/API/queries/auth/use-add-user.ts
index 11af8fd6109..3bc8cc069f6 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-add-user.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-add-user.ts
@@ -5,7 +5,7 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useAddUser: useMutationFunctionType<UserInputType> = (
+export const useAddUser: useMutationFunctionType<undefined, UserInputType> = (
   options?,
 ) => {
   const { mutate } = UseRequestProcessor();
diff --git a/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts b/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts
index 9eedf558fd7..68aa10a8c76 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-delete-users.ts
@@ -8,9 +8,10 @@ interface DeleteUserParams {
   user_id: string;
 }
 
-export const useDeleteMessages: useMutationFunctionType<DeleteUserParams> = (
-  options?,
-) => {
+export const useDeleteMessages: useMutationFunctionType<
+  undefined,
+  DeleteUserParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const deleteMessage = async ({ user_id }: DeleteUserParams): Promise<any> => {
diff --git a/src/frontend/src/controllers/API/queries/auth/use-login-user.ts b/src/frontend/src/controllers/API/queries/auth/use-login-user.ts
index d97395b0362..27c1ca5e2be 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-login-user.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-login-user.ts
@@ -4,7 +4,9 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useLoginUser: useMutationFunctionType<LoginType> = (options?) => {
+export const useLoginUser: useMutationFunctionType<undefined, LoginType> = (
+  options?,
+) => {
   const { mutate } = UseRequestProcessor();
 
   async function updateUser({ password, username }: LoginType): Promise<any> {
diff --git a/src/frontend/src/controllers/API/queries/auth/use-logout.ts b/src/frontend/src/controllers/API/queries/auth/use-logout.ts
index 30db3c32fb0..893d752d173 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-logout.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-logout.ts
@@ -5,12 +5,17 @@ import {
   useMutationFunctionType,
 } from "@/types/api";
 import { UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useLogout: useMutationFunctionType = (options?) => {
+export const useLogout: useMutationFunctionType<undefined, void> = (
+  options?,
+) => {
   const { mutate } = UseRequestProcessor();
+  const navigate = useNavigate();
+  const logout = useAuthStore((state) => state.logout);
 
   async function logoutUser(): Promise<any> {
     const autoLogin = useAuthStore.getState().autoLogin;
@@ -21,7 +26,16 @@ export const useLogout: useMutationFunctionType = (options?) => {
     return res.data;
   }
 
-  const mutation = mutate(["useLogout"], logoutUser, options);
+  const mutation = mutate(["useLogout"], logoutUser, {
+    onSuccess: () => {
+      logout();
+      navigate("/login");
+    },
+    onError: (error) => {
+      console.error(error);
+    },
+    ...options,
+  });
 
   return mutation;
 };
diff --git a/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts b/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts
index c330a0ca90c..5a6c344964e 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-refresh-access.ts
@@ -4,7 +4,9 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-export const useRefrshAccessToken: useMutationFunctionType = (options?) => {
+export const useRefreshAccessToken: useMutationFunctionType<undefined, any> = (
+  options?,
+) => {
   const { mutate } = UseRequestProcessor();
 
   async function refreshAccess(): Promise<any> {
diff --git a/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts b/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts
index 899fe44b083..b6a55753933 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-reset-password.ts
@@ -13,9 +13,10 @@ interface resetPasswordParams {
   password: resetPasswordType;
 }
 
-export const useResetPassword: useMutationFunctionType<resetPasswordParams> = (
-  options?,
-) => {
+export const useResetPassword: useMutationFunctionType<
+  undefined,
+  resetPasswordParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   async function resetPassword({
diff --git a/src/frontend/src/controllers/API/queries/auth/use-update-user.ts b/src/frontend/src/controllers/API/queries/auth/use-update-user.ts
index 5cf671e5003..8193018eb42 100644
--- a/src/frontend/src/controllers/API/queries/auth/use-update-user.ts
+++ b/src/frontend/src/controllers/API/queries/auth/use-update-user.ts
@@ -9,9 +9,10 @@ interface UpdateUserParams {
   user: changeUser;
 }
 
-export const useUpdateUser: useMutationFunctionType<UpdateUserParams> = (
-  options?,
-) => {
+export const useUpdateUser: useMutationFunctionType<
+  undefined,
+  UpdateUserParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   async function updateUser({ user_id, user }: UpdateUserParams): Promise<any> {
diff --git a/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts b/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts
index b2f1da13532..e2488c0f1df 100644
--- a/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts
+++ b/src/frontend/src/controllers/API/queries/files/use-get-profile-pictures.ts
@@ -4,15 +4,13 @@ import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
-interface ProfilePicturesQueryParams {}
-
-export interface ProfilePicturesQueryResponse {
+export interface ProfilePicturesQueryResponse extends Record<string, string[]> {
   files: string[];
 }
 
 export const useGetProfilePicturesQuery: useQueryFunctionType<
-  ProfilePicturesQueryParams,
-  { [key: string]: string[] }
+  undefined,
+  ProfilePicturesQueryResponse
 > = () => {
   const { query } = UseRequestProcessor();
 
diff --git a/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts b/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts
index 532476c126d..21bca9bacfe 100644
--- a/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts
+++ b/src/frontend/src/controllers/API/queries/files/use-post-upload-file.ts
@@ -9,9 +9,10 @@ interface IPostUploadFile {
   id: string;
 }
 
-export const usePostUploadFile: useMutationFunctionType<IPostUploadFile> = (
-  options?,
-) => {
+export const usePostUploadFile: useMutationFunctionType<
+  undefined,
+  IPostUploadFile
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const postUploadFileFn = async (payload: IPostUploadFile): Promise<any> => {
diff --git a/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts
index bdff094cffb..1f577f072eb 100644
--- a/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts
+++ b/src/frontend/src/controllers/API/queries/messages/use-delete-messages.ts
@@ -9,6 +9,7 @@ interface DeleteMessagesParams {
 }
 
 export const useDeleteMessages: useMutationFunctionType<
+  undefined,
   DeleteMessagesParams
 > = (options?) => {
   const { mutate } = UseRequestProcessor();
diff --git a/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts b/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts
index 0ad5edb8484..9f931e35a35 100644
--- a/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts
+++ b/src/frontend/src/controllers/API/queries/messages/use-update-messages.ts
@@ -9,9 +9,10 @@ interface UpdateMessageParams {
   message: Message;
 }
 
-export const useUpdateMessage: useMutationFunctionType<UpdateMessageParams> = (
-  options?,
-) => {
+export const useUpdateMessage: useMutationFunctionType<
+  undefined,
+  UpdateMessageParams
+> = (options?) => {
   const { mutate } = UseRequestProcessor();
 
   const updateMessageApi = async (data: Message) => {
diff --git a/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts b/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts
index a6bac715236..1fca6b4bd62 100644
--- a/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts
+++ b/src/frontend/src/controllers/API/queries/store/use-post-like-component.ts
@@ -8,6 +8,7 @@ interface IPostLikeComponent {
 }
 
 export const usePostLikeComponent: useMutationFunctionType<
+  undefined,
   IPostLikeComponent
 > = (options) => {
   const { mutate } = UseRequestProcessor();
diff --git a/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx b/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx
index 2b90daea265..a757ed6cf83 100644
--- a/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx
+++ b/src/frontend/src/controllers/API/queries/vertex/use-post-retrieve-vertex-order.tsx
@@ -20,6 +20,7 @@ interface retrieveGetVerticesOrderResponse {
 
 // add types for error handling and success
 export const usePostRetrieveVertexOrder: useMutationFunctionType<
+  undefined,
   retrieveGetVerticesOrder,
   retrieveGetVerticesOrderResponse
 > = (options) => {
diff --git a/src/frontend/src/hooks/logout.tsx b/src/frontend/src/hooks/logout.tsx
deleted file mode 100644
index 688b521ee12..00000000000
--- a/src/frontend/src/hooks/logout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useLogout } from "@/controllers/API/queries/auth/use-logout";
-import useAuthStore from "@/stores/authStore";
-import { useNavigate } from "react-router-dom";
-
-export function useLogoutHook() {
-  const navigate = useNavigate();
-  const logout = useAuthStore((state) => state.logout);
-  const { mutate } = useLogout({
-    onSuccess: () => {
-      logout();
-      navigate("/login");
-    },
-    onError: (error) => {
-      console.error(error);
-    },
-  });
-
-  return { logout: () => mutate({}) };
-}
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 923222bbfb6..0788e30532e 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
@@ -1,3 +1,4 @@
+import { ProfilePicturesQueryResponse } from "@/controllers/API/queries/files";
 import { useEffect, useRef, useState } from "react";
 import { Button } from "../../../../../../../../components/ui/button";
 import Loading from "../../../../../../../../components/ui/loading";
@@ -7,7 +8,7 @@ import { cn } from "../../../../../../../../utils/utils";
 import usePreloadImages from "./hooks/use-preload-images";
 
 type ProfilePictureChooserComponentProps = {
-  profilePictures: { [key: string]: string[] } | undefined;
+  profilePictures: ProfilePicturesQueryResponse | undefined;
   loading: boolean;
   value: string;
   onChange: (value: string) => void;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
index d0522ebe922..cd800e2b337 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/index.tsx
@@ -1,6 +1,6 @@
-import { useGetProfilePicturesQuery } from "@/controllers/API/queries/files";
+import { ProfilePicturesQueryResponse } from "@/controllers/API/queries/files";
 import * as Form from "@radix-ui/react-form";
-import { useEffect, useState } from "react";
+import { UseQueryResult } from "@tanstack/react-query";
 import { Button } from "../../../../../../components/ui/button";
 import {
   Card,
@@ -17,7 +17,7 @@ type ProfilePictureFormComponentProps = {
   profilePicture: string;
   handleInput: (event: any) => void;
   handlePatchProfilePicture: (gradient: string) => void;
-  handleGetProfilePictures: () => undefined;
+  handleGetProfilePictures: UseQueryResult<ProfilePicturesQueryResponse>;
   userData: any;
 };
 const ProfilePictureFormComponent = ({
@@ -27,7 +27,7 @@ const ProfilePictureFormComponent = ({
   handleGetProfilePictures,
   userData,
 }: ProfilePictureFormComponentProps) => {
-  const { data: response, isFetching } = useGetProfilePicturesQuery({});
+  const { data: response, isFetching } = handleGetProfilePictures;
 
   return (
     <Form.Root
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
index 956b242b9c3..20598ba31c7 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/index.tsx
@@ -53,10 +53,7 @@ export const GeneralPage = () => {
     setErrorData,
   );
 
-  const handleGetProfilePictures = () => {
-    const { data } = useGetProfilePicturesQuery({});
-    return data;
-  };
+  const handleGetProfilePictures = useGetProfilePicturesQuery();
 
   const { handlePatchProfilePicture } = usePatchProfilePicture(
     setSuccessData,
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index c805325faca..a14277ce7c4 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -260,9 +260,21 @@ export type MutationFunctionType = (
 ) => UseMutationResult<any, any, any, any>;
 
 export type useMutationFunctionType<
+  Params,
   Variables = any,
   Data = any,
   Error = any,
-> = (
-  options?: Omit<UseMutationOptions<Data, Error>, "mutationFn" | "mutationKey">,
-) => UseMutationResult<Data, Error, Variables>;
+> = Params extends undefined
+  ? (
+      options?: Omit<
+        UseMutationOptions<Data, Error>,
+        "mutationFn" | "mutationKey"
+      >,
+    ) => UseMutationResult<Data, Error, Variables>
+  : (
+      params: Params,
+      options?: Omit<
+        UseMutationOptions<Data, Error>,
+        "mutationFn" | "mutationKey"
+      >,
+    ) => UseMutationResult<Data, Error, Variables>;