diff --git a/client/src/components/MessageWrapper.tsx b/client/src/components/MessageWrapper.tsx
index 2a65d09..455e8ee 100644
--- a/client/src/components/MessageWrapper.tsx
+++ b/client/src/components/MessageWrapper.tsx
@@ -1,12 +1,18 @@
 import Message from "./Message";
-import { useMessages } from "@controllers/MessageController";
+import { getMessages } from "@controllers/MessageController";
+import { useQuery } from "@tanstack/react-query";
+import { toastError } from "@controllers/Toasts";
 
 const MessageWrapper = () => {
-  const {messages, isLoading} = useMessages();
+  const { data: messages, isLoading, isError } = useQuery(["messages"], getMessages, {
+    onError: (error) => {
+      toastError(error as string);
+    },
+  });
 
   return (
     <main className="messages-wrapper flex flex-col gap-4 pb-6 pt-4 -mb-4 overflow-scroll w-full max-w-3xl rounded-md">
-      {isLoading ? '' : messages?.map((message: any) => (
+      {isLoading ? '' : isError ? '' : messages?.map((message: any) => (
         <Message message={message} key={message.id}/>
       ))}
     </main>
diff --git a/client/src/controllers/MessageController.ts b/client/src/controllers/MessageController.ts
index 3133781..ba813a2 100644
--- a/client/src/controllers/MessageController.ts
+++ b/client/src/controllers/MessageController.ts
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Cookies } from 'react-cookie';
 
 const getMessages = async () => {
@@ -10,32 +9,10 @@ const getMessages = async () => {
     },
   });
   const data = await response.json();
-  return data;
-};
-
-const useMessages = () => {
-  const [messages, setMessages] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isError, setIsError] = useState(false);
-  const [error, setError] = useState<unknown>(null);
-
-  const fetchMessages = () => {
-    getMessages()
-      .then((messagesData) => {
-        setMessages(messagesData);
-        setIsLoading(false);
-      })
-      .catch((errorMsg) => {
-        setIsError(true);
-        setError(errorMsg);
-      });
-  };
-
-  if (isLoading) {
-    fetchMessages();
+  if (data.error) {
+    throw data.error;
   }
-
-  return { messages, isLoading, isError, error };
+  return data;
 };
 
 const newMessage = async (data: FormData) => {
@@ -75,4 +52,4 @@ const editMessage = async (id: string, data: FormData) => {
   return response.json();
 };
 
-export { getMessages, newMessage, deleteMessage, editMessage, useMessages };
+export { getMessages, newMessage, deleteMessage, editMessage };