diff --git a/client/src/components/OfflineWarning/offline-warning.tsx b/client/src/components/OfflineWarning/offline-warning.tsx
index 42d3605a282..4754c2c5916 100644
--- a/client/src/components/OfflineWarning/offline-warning.tsx
+++ b/client/src/components/OfflineWarning/offline-warning.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
+import { Alert, Spacer } from '@freecodecamp/ui';
 
 import './offline-warning.css';
 
@@ -43,8 +44,10 @@ function OfflineWarning({
 
   return showWarning ? (
     <>
-      <div className='offline-warning alert-info'>{message}</div>
-      <div style={{ height: `38px` }} />
+      <Alert variant='info' className='offline-warning'>
+        {message}
+      </Alert>
+      <Spacer size='m' />
     </>
   ) : null;
 }