diff --git a/src/frontend/src/components/loadingComponent/index.tsx b/src/frontend/src/components/loadingComponent/index.tsx
index 3ef0f8ef5..35694820a 100644
--- a/src/frontend/src/components/loadingComponent/index.tsx
+++ b/src/frontend/src/components/loadingComponent/index.tsx
@@ -7,7 +7,7 @@ export default function LoadingComponent({
     <div role="status" className="flex flex-col items-center justify-center">
       <svg
         aria-hidden="true"
-        className={`w-${remSize} h-${remSize} animate-spin fill-almost-medium-blue  text-muted`}
+        className={`w-${remSize} h-${remSize} animate-spin fill-primary  text-muted`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -22,9 +22,7 @@ export default function LoadingComponent({
         />
       </svg>
       <br></br>
-      <span className="animate-pulse text-lg text-almost-medium-blue">
-        Loading...
-      </span>
+      <span className="animate-pulse text-lg text-primary">Loading...</span>
     </div>
   );
 }