diff --git a/src/frontend/src/alerts/error/index.tsx b/src/frontend/src/alerts/error/index.tsx
index 31980dc6b..93f30484b 100644
--- a/src/frontend/src/alerts/error/index.tsx
+++ b/src/frontend/src/alerts/error/index.tsx
@@ -39,19 +39,19 @@ export default function ErrorAlert({
             removeAlert(id);
           }, 500);
         }}
-        className="mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl"
+        className="error-build-message"
       >
         <div className="flex">
           <div className="flex-shrink-0">
-            <XCircle className="h-5 w-5 text-status-red" aria-hidden="true" />
+            <XCircle className="error-build-message-circle" aria-hidden="true" />
           </div>
           <div className="ml-3">
-            <h3 className="text-sm font-medium text-error-foreground">
+            <h3 className="error-build-foreground">
               {title}
             </h3>
             {list.length !== 0 ? (
-              <div className="mt-2 text-sm text-error-foreground">
-                <ul className="list-disc space-y-1 pl-5">
+              <div className="error-build-message-div">
+                <ul className="error-build-message-list">
                   {list.map((item, index) => (
                     <li key={index}>{item}</li>
                   ))}
diff --git a/src/frontend/src/alerts/success/index.tsx b/src/frontend/src/alerts/success/index.tsx
index 88fc79962..e943feb8c 100644
--- a/src/frontend/src/alerts/success/index.tsx
+++ b/src/frontend/src/alerts/success/index.tsx
@@ -34,17 +34,17 @@ export default function SuccessAlert({
           setShow(false);
           removeAlert(id);
         }}
-        className="mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl"
+        className="success-alert"
       >
         <div className="flex">
           <div className="flex-shrink-0">
             <CheckCircle2
-              className="h-5 w-5 text-status-green"
+              className="success-alert-icon"
               aria-hidden="true"
             />
           </div>
           <div className="ml-3">
-            <p className="text-sm font-medium text-success-foreground">
+            <p className="success-alert-message">
               {title}
             </p>
           </div>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 84398be78..37b26ab1c 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -351,4 +351,40 @@ The cursor: default; property value restores the browser's default cursor style
   .generic-node-desc-text {
     @apply w-full px-5 pb-3 text-sm text-muted-foreground
   }
+
+  .alert-icon {
+    @apply h-5 w-5
+  } /*error-build-message-circle*/
+  .alert-font-size {
+    @apply text-sm font-medium
+  }
+
+  .error-build-message {
+    @apply mt-6 w-96 cursor-pointer rounded-md bg-error-background  p-4 shadow-xl
+  }
+  .error-build-message-circle {
+    @apply text-status-red alert-icon
+  }
+  .error-build-text {
+    @apply text-error-foreground
+  }
+  .error-build-foreground {
+    @apply error-build-text alert-font-size
+  }
+  .error-build-message-div {
+    @apply mt-2 text-sm error-build-text
+  }
+  .error-build-message-list {
+    @apply list-disc space-y-1 pl-5
+  }
+
+  .success-alert {
+    @apply mt-6 w-96 rounded-md bg-success-background p-4 shadow-xl
+  }
+  .success-alert-icon {
+    @apply alert-icon text-status-green
+  }
+  .success-alert-message {
+    @apply alert-font-size text-success-foreground
+  }
 }
\ No newline at end of file