diff --git a/apps/frontend/src/components/floatingAlert.tsx b/apps/frontend/src/components/floatingAlert.tsx
new file mode 100644
index 00000000..0257b0b3
--- /dev/null
+++ b/apps/frontend/src/components/floatingAlert.tsx
@@ -0,0 +1,57 @@
+import { Alert } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+
+type FloatingAlertProps = {
+  message?: string | null;
+  status?: 'info' | 'error';
+  timeout?: number;
+};
+
+export function FloatingAlert({
+  message,
+  status,
+  timeout,
+}: FloatingAlertProps) {
+  const [visible, setVisible] = useState(!!message);
+
+  useEffect(() => {
+    if (!message) {
+      setVisible(false);
+      return;
+    }
+
+    setVisible(true);
+
+    if (!timeout) return;
+
+    const timer = setTimeout(() => {
+      setVisible(false);
+    }, timeout);
+
+    return () => clearTimeout(timer);
+  }, [message, timeout]);
+
+  if (!message || !visible) return null;
+
+  return (
+    <Alert.Root
+      color={status === 'info' ? 'neutral.800' : 'red'}
+      status="info"
+      bg="white"
+      variant="subtle"
+      boxShadow="lg"
+      position="fixed"
+      zIndex="toast"
+      top="12px"
+      right="12px"
+      w="fit-content"
+      maxW="400px"
+      p={2}
+    >
+      <Alert.Indicator />
+      <Alert.Title textStyle="p2" fontWeight={500}>
+        {message}
+      </Alert.Title>
+    </Alert.Root>
+  );
+}
diff --git a/apps/frontend/src/components/forms/donationDetailsModal.tsx b/apps/frontend/src/components/forms/donationDetailsModal.tsx
index a3aa1731..dfee2bb2 100644
--- a/apps/frontend/src/components/forms/donationDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/donationDetailsModal.tsx
@@ -10,6 +10,7 @@ import {
 import ApiClient from '@api/apiClient';
 import { Donation, DonationItem, FoodType } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 interface DonationDetailsModalProps {
   donation: Donation;
@@ -25,6 +26,8 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   const [loadedDonation, setLoadedDonation] = useState<Donation>();
   const [items, setItems] = useState<DonationItem[]>([]);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const donationId = donation.donationId;
 
   useEffect(() => {
@@ -40,7 +43,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
         setLoadedDonation(donationData);
         setItems(itemsData);
       } catch (err) {
-        alert('Error fetching donation details: ' + err);
+        setAlertMessage('Error fetching donation details: ' + err);
       }
     };
 
@@ -63,6 +66,9 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
       closeOnInteractOutside
       scrollBehavior="inside"
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Portal>
         <Dialog.Backdrop bg="blackAlpha.300" />
 
diff --git a/apps/frontend/src/components/forms/orderDetailsModal.tsx b/apps/frontend/src/components/forms/orderDetailsModal.tsx
index 917bc484..6635b9e7 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -11,6 +11,7 @@ import {
 import ApiClient from '@api/apiClient';
 import { FoodRequest, OrderSummary } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 interface OrderDetailsModalProps {
   order: OrderSummary;
@@ -25,6 +26,8 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
 }) => {
   const [foodRequest, setFoodRequest] = useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   useEffect(() => {
     if (isOpen) {
       const fetchData = async () => {
@@ -34,7 +37,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
           );
           setFoodRequest(foodRequestData);
         } catch (error) {
-          alert('Error fetching food request details:' + error);
+          setAlertMessage('Error fetching food request details:' + error);
         }
       };
 
@@ -51,6 +54,9 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
       }}
       closeOnInteractOutside
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
         <Dialog.Content maxW={650}>
diff --git a/apps/frontend/src/components/forms/requestFormModal.tsx b/apps/frontend/src/components/forms/requestFormModal.tsx
index db321db3..fe313798 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -23,6 +23,7 @@ import {
   RequestSize,
 } from '../../types/types';
 import { ChevronDownIcon } from 'lucide-react';
+import { FloatingAlert } from '@components/floatingAlert';
 import apiClient from '@api/apiClient';
 
 interface FoodRequestFormModalProps {
@@ -89,9 +90,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
       closeOnInteractOutside
     >
       {alertMessage && (
-        // TODO: add Justin's alert component/uncomment below out and remove text component
-        // <FloatingAlert message={alertMessage} status="error" timeout={6000} />
-        <Text>{alertMessage}</Text>
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
       )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
@@ -293,7 +292,7 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     if (words.length <= 250) {
                       setAdditionalNotes(e.target.value);
                     } else {
-                      alert('Exceeded word limit');
+                      setAlertMessage('Exceeded word limit');
                     }
                   }}
                 />
diff --git a/apps/frontend/src/components/forms/resetPasswordModal.tsx b/apps/frontend/src/components/forms/resetPasswordModal.tsx
index fa11904a..8649a917 100644
--- a/apps/frontend/src/components/forms/resetPasswordModal.tsx
+++ b/apps/frontend/src/components/forms/resetPasswordModal.tsx
@@ -10,6 +10,7 @@ import {
   Field,
 } from '@chakra-ui/react';
 import { resetPassword, confirmResetPassword } from 'aws-amplify/auth';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const ResetPasswordModal: React.FC = () => {
   const [email, setEmail] = useState<string>('');
@@ -17,6 +18,7 @@ const ResetPasswordModal: React.FC = () => {
   const [step, setStep] = useState<'reset' | 'new'>('reset');
   const [password, setPassword] = useState<string>('');
   const [confirmPassword, setConfirmPassword] = useState<string>('');
+  const [alertMessage, setAlertMessage] = useState<string>('');
 
   const navigate = useNavigate();
 
@@ -25,27 +27,26 @@ const ResetPasswordModal: React.FC = () => {
       await resetPassword({ username: email });
       setStep('new');
     } catch (error) {
-      alert(error || 'Failed to send verification code');
+      setAlertMessage('Failed to send verification code: ' + error);
     }
   };
 
   const handleResendCode = async () => {
     try {
       await resetPassword({ username: email });
-      alert('Successfully sent verification code');
     } catch (error) {
-      alert(error || 'Failed to send verification code');
+      setAlertMessage('Failed to send verification code: ' + error);
     }
   };
 
   const handleResetPassword = async () => {
     if (password !== confirmPassword) {
-      alert('Passwords need to match');
+      setAlertMessage('Passwords need to match');
       return;
     }
 
     if (password.length < 8) {
-      alert('Password needs to be at least 8 characters');
+      setAlertMessage('Password needs to be at least 8 characters');
       return;
     }
 
@@ -55,10 +56,9 @@ const ResetPasswordModal: React.FC = () => {
         confirmationCode: code,
         newPassword: password,
       });
-      alert('Password reset successful!');
       navigate('/login');
     } catch (error) {
-      alert(error || 'Failed to set new password');
+      setAlertMessage('Failed to set new password: ' + error);
     }
   };
 
@@ -92,6 +92,9 @@ const ResetPasswordModal: React.FC = () => {
       borderRadius="xl"
       boxShadow="xl"
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <VStack gap={5} align="stretch">
         <Box mb={4}>
           <Text textStyle="h1">
diff --git a/apps/frontend/src/containers/adminDonation.tsx b/apps/frontend/src/containers/adminDonation.tsx
index c444803b..9c9a761f 100644
--- a/apps/frontend/src/containers/adminDonation.tsx
+++ b/apps/frontend/src/containers/adminDonation.tsx
@@ -15,6 +15,7 @@ import { Donation } from 'types/types';
 import DonationDetailsModal from '@components/forms/donationDetailsModal';
 import ApiClient from '@api/apiClient';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const AdminDonation: React.FC = () => {
   const [donations, setDonations] = useState<Donation[]>([]);
@@ -28,13 +29,15 @@ const AdminDonation: React.FC = () => {
     null,
   );
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   useEffect(() => {
     const fetchDonations = async () => {
       try {
         const data = await ApiClient.getAllDonations();
         setDonations(data);
       } catch (error) {
-        alert('Error fetching donations: ' + error);
+        setAlertMessage('Error fetching donations: ' + error);
       }
     };
     fetchDonations();
@@ -99,6 +102,9 @@ const AdminDonation: React.FC = () => {
       <Heading textStyle="h1" color="gray.600" mb={6}>
         Donation Management
       </Heading>
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Box display="flex" gap={2} mb={6} fontFamily="'Inter', sans-serif">
         <Box position="relative">
           <Button
diff --git a/apps/frontend/src/containers/adminOrderManagement.tsx b/apps/frontend/src/containers/adminOrderManagement.tsx
index 6edc9289..700d62c4 100644
--- a/apps/frontend/src/containers/adminOrderManagement.tsx
+++ b/apps/frontend/src/containers/adminOrderManagement.tsx
@@ -24,6 +24,7 @@ import { capitalize, formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
 import { OrderStatus, OrderSummary } from '../types/types';
 import OrderDetailsModal from '@components/forms/orderDetailsModal';
+import { FloatingAlert } from '@components/floatingAlert';
 
 // Extending the OrderSummary type to include assignee color for display
 type OrderWithColor = OrderSummary & { assigneeColor?: string };
@@ -50,6 +51,8 @@ const AdminOrderManagement: React.FC = () => {
     },
   );
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   // State to hold filter state per status
   type FilterState = {
     selectedPantries: string[];
@@ -143,7 +146,7 @@ const AdminOrderManagement: React.FC = () => {
         };
         setCurrentPages(initialPages);
       } catch (error) {
-        alert('Error fetching orders: ' + error);
+        setAlertMessage('Error fetching orders: ' + error);
       }
     };
 
@@ -168,6 +171,10 @@ const AdminOrderManagement: React.FC = () => {
         Order Management
       </Heading>
 
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
+
       {STATUS_ORDER.map((status) => {
         const allOrders = statusOrders[status] || [];
         const filterState = filterStates[status];
diff --git a/apps/frontend/src/containers/formRequests.tsx b/apps/frontend/src/containers/formRequests.tsx
index 2d77ec0e..574bfdc3 100644
--- a/apps/frontend/src/containers/formRequests.tsx
+++ b/apps/frontend/src/containers/formRequests.tsx
@@ -19,6 +19,7 @@ import { OrderStatus, FoodRequest } from '../types/types';
 import RequestDetailsModal from '@components/forms/requestDetailsModal';
 import { formatDate } from '@utils/utils';
 import ApiClient from '@api/apiClient';
+import { FloatingAlert } from '@components/floatingAlert';
 import { useAuthenticator } from '@aws-amplify/ui-react';
 
 const FormRequests: React.FC = () => {
@@ -36,6 +37,8 @@ const FormRequests: React.FC = () => {
   const [openReadOnlyRequest, setOpenReadOnlyRequest] =
     useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const pageSize = 10;
 
   const fetchRequests = useCallback(async () => {
@@ -52,10 +55,10 @@ const FormRequests: React.FC = () => {
           setPreviousRequest(sortedData[0]);
         }
       } catch (error) {
-        console.log(error);
+        setAlertMessage('Error fetching requests: ' + error);
       }
     } else {
-      alert('No pantry associated with this account.');
+      setAlertMessage('No pantry associated with this account.');
     }
   }, []);
 
@@ -74,6 +77,9 @@ const FormRequests: React.FC = () => {
       <Text textStyle="h1" color="#515151">
         Food Request Management
       </Text>
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <HStack gap={3} my={5}>
         <Button
           fontFamily="ibm"
diff --git a/apps/frontend/src/containers/loginPage.tsx b/apps/frontend/src/containers/loginPage.tsx
index 48f9793c..7e704da3 100644
--- a/apps/frontend/src/containers/loginPage.tsx
+++ b/apps/frontend/src/containers/loginPage.tsx
@@ -14,11 +14,13 @@ import {
 } from '@chakra-ui/react';
 import loginBackground from '../assets/login_background.png';
 import { Eye, EyeOff } from 'lucide-react';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const LoginPage: React.FC = () => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
   const [showPassword, setShowPassword] = useState(false);
+  const [alertMessage, setAlertMessage] = useState<string>('');
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -29,7 +31,7 @@ const LoginPage: React.FC = () => {
       await signIn({ username: email, password });
       navigate(from, { replace: true });
     } catch (error) {
-      alert(error || 'Login failed');
+      setAlertMessage('Login failed: ' + error);
     }
   };
 
@@ -58,6 +60,9 @@ const LoginPage: React.FC = () => {
       alignItems="center"
       justifyContent="center"
     >
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
       <Box
         maxW="500px"
         w="full"
diff --git a/apps/frontend/src/containers/volunteerManagement.tsx b/apps/frontend/src/containers/volunteerManagement.tsx
index faea914c..43cff158 100644
--- a/apps/frontend/src/containers/volunteerManagement.tsx
+++ b/apps/frontend/src/containers/volunteerManagement.tsx
@@ -10,13 +10,13 @@ import {
   Pagination,
   ButtonGroup,
   IconButton,
-  Alert,
   Link,
 } from '@chakra-ui/react';
 import { SearchIcon, ChevronRight, ChevronLeft } from 'lucide-react';
 import { User } from '../types/types';
 import ApiClient from '@api/apiClient';
 import NewVolunteerModal from '@components/forms/addNewVolunteerModal';
+import { FloatingAlert } from '@components/floatingAlert';
 
 const VolunteerManagement: React.FC = () => {
   const [currentPage, setCurrentPage] = useState<number>(1);
@@ -36,8 +36,7 @@ const VolunteerManagement: React.FC = () => {
         const allVolunteers = await ApiClient.getVolunteers();
         setVolunteers(allVolunteers);
       } catch (error) {
-        alert('Error fetching volunteers');
-        console.error('Error fetching volunteers: ', error);
+        setAlertMessage('Error fetching volunteers: ' + error);
       }
     };
 
@@ -70,24 +69,13 @@ const VolunteerManagement: React.FC = () => {
         Volunteer Management
       </Text>
       {alertMessage && (
-        <Alert.Root
-          color={submitSuccess ? 'neutral.800' : 'red'}
-          status="info"
-          bg="white"
-          variant="subtle"
-          boxShadow="lg"
-          position="absolute"
-          top="12px"
-          right="12px"
-          w="fit-content"
-          maxW="400px"
-        >
-          <Alert.Indicator />
-          <Alert.Title textStyle="p2" fontWeight={500}>
-            {alertMessage}
-          </Alert.Title>
-        </Alert.Root>
+        <FloatingAlert
+          message={alertMessage}
+          status={submitSuccess ? 'info' : 'error'}
+          timeout={6000}
+        />
       )}
+
       <Box
         mt={3}
         display="block"
@@ -119,12 +107,10 @@ const VolunteerManagement: React.FC = () => {
               onSubmitSuccess={() => {
                 setAlertMessage('Volunteer added.');
                 setSubmitSuccess(true);
-                setTimeout(() => setAlertMessage(''), 3000);
               }}
               onSubmitFail={() => {
                 setAlertMessage('Volunteer could not be added.');
                 setSubmitSuccess(false);
-                setTimeout(() => setAlertMessage(''), 3000);
               }}
             />
           </Flex>