diff --git a/apps/frontend/src/components/floatingAlert.tsx b/apps/frontend/src/components/floatingAlert.tsx
new file mode 100644
index 000000000..0257b0b36
--- /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 e33792c73..389fd2537 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;
@@ -24,6 +25,8 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 }) => {
   const [items, setItems] = useState<DonationItem[]>([]);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   const donationId = donation.donationId;
 
   useEffect(() => {
@@ -37,7 +40,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
 
         setItems(itemsData);
       } catch (err) {
-        alert('Error fetching donation details: ' + err);
+        setAlertMessage('Error fetching donation details: ' + err);
       }
     };
 
@@ -60,6 +63,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 309e15998..ce5e22f11 100644
--- a/apps/frontend/src/components/forms/orderDetailsModal.tsx
+++ b/apps/frontend/src/components/forms/orderDetailsModal.tsx
@@ -3,6 +3,7 @@ import { Text, Dialog, CloseButton, Textarea, Field } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { FoodRequest, OrderSummary } from 'types/types';
 import { formatDate } from '@utils/utils';
+import { FloatingAlert } from '@components/floatingAlert';
 import { TagGroup } from './tagGroup';
 
 interface OrderDetailsModalProps {
@@ -18,6 +19,8 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
 }) => {
   const [foodRequest, setFoodRequest] = useState<FoodRequest | null>(null);
 
+  const [alertMessage, setAlertMessage] = useState<string>('');
+
   useEffect(() => {
     if (isOpen) {
       const fetchData = async () => {
@@ -27,7 +30,7 @@ const OrderDetailsModal: React.FC<OrderDetailsModalProps> = ({
           );
           setFoodRequest(foodRequestData);
         } catch (error) {
-          alert('Error fetching food request details:' + error);
+          setAlertMessage('Error fetching food request details:' + error);
         }
       };
 
@@ -44,6 +47,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 04d8cfb67..4d27bfdea 100644
--- a/apps/frontend/src/components/forms/requestFormModal.tsx
+++ b/apps/frontend/src/components/forms/requestFormModal.tsx
@@ -17,6 +17,7 @@ import {
   RequestSize,
 } from '../../types/types';
 import { ChevronDownIcon } from 'lucide-react';
+import { FloatingAlert } from '@components/floatingAlert';
 import apiClient from '@api/apiClient';
 import { TagGroup } from './tagGroup';
 
@@ -38,8 +39,13 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
   const [selectedItems, setSelectedItems] = useState<string[]>([]);
   const [requestedSize, setRequestedSize] = useState<string>('');
   const [additionalNotes, setAdditionalNotes] = useState<string>('');
-
-  const [alertMessage, setAlertMessage] = useState<string>('');
+  const [alert, setAlert] = useState<{
+    isError: boolean;
+    message: string;
+  }>({
+    isError: true,
+    message: '',
+  });
 
   const isFormValid = requestedSize !== '' && selectedItems.length > 0;
 
@@ -67,10 +73,11 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
 
     try {
       await apiClient.createFoodRequest(foodRequestData);
+      setAlert({ isError: false, message: 'Request Submitted' });
       onClose();
       onSuccess();
     } catch {
-      setAlertMessage('Failed to submit food request');
+      setAlert({ isError: true, message: 'Request could not be submitted.' });
     }
   };
 
@@ -83,10 +90,11 @@ 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>
+      {alert.message && alert.isError && (
+        <FloatingAlert message={alert.message} status="error" timeout={6000} />
+      )}
+      {alert.message && !alert.isError && (
+        <FloatingAlert message={alert.message} status="info" timeout={6000} />
       )}
       <Dialog.Backdrop />
       <Dialog.Positioner>
@@ -263,7 +271,10 @@ const FoodRequestFormModal: React.FC<FoodRequestFormModalProps> = ({
                     if (words.length <= 250) {
                       setAdditionalNotes(e.target.value);
                     } else {
-                      alert('Exceeded word limit');
+                      setAlert({
+                        isError: true,
+                        message: 'Exceeded word limit',
+                      });
                     }
                   }}
                 />
diff --git a/apps/frontend/src/components/forms/resetPasswordModal.tsx b/apps/frontend/src/components/forms/resetPasswordModal.tsx
index fa11904af..8649a9174 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 c444803bb..9c9a761f3 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 849e25b9a..e45f0df1b 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[];
@@ -137,7 +140,7 @@ const AdminOrderManagement: React.FC = () => {
         };
         setCurrentPages(initialPages);
       } catch (error) {
-        alert('Error fetching orders: ' + error);
+        setAlertMessage('Error fetching orders: ' + error);
       }
     };
 
@@ -162,6 +165,10 @@ const AdminOrderManagement: React.FC = () => {
         Order Management
       </Heading>
 
+      {alertMessage && (
+        <FloatingAlert message={alertMessage} status="error" timeout={6000} />
+      )}
+
       {Object.values(OrderStatus).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 2d77ec0e2..574bfdc3e 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 48f9793c1..7e704da34 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 faea914cf..43cff158f 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>