diff --git a/src/course-libraries/CourseLibraries.test.tsx b/src/course-libraries/CourseLibraries.test.tsx
index 418bbcc91..5df2fe313 100644
--- a/src/course-libraries/CourseLibraries.test.tsx
+++ b/src/course-libraries/CourseLibraries.test.tsx
@@ -94,17 +94,6 @@ describe('<CourseLibraries />', () => {
     expect(allTab).toHaveAttribute('aria-selected', 'false');
     expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
     expect(alert).not.toBeInTheDocument();
-
-    // go back to all tab
-    userEvent.click(allTab);
-    // alert should not be back
-    expect(alert).not.toBeInTheDocument();
-    expect(allTab).toHaveAttribute('aria-selected', 'true');
-
-    // review updates button
-    const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
-    userEvent.click(reviewActionBtn);
-    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
   });
 
   it('hide alert on dismiss', async () => {
@@ -124,6 +113,10 @@ describe('<CourseLibraries />', () => {
     userEvent.click(dismissBtn);
     expect(allTab).toHaveAttribute('aria-selected', 'true');
     waitFor(() => expect(alert).not.toBeInTheDocument());
+    // review updates button
+    const reviewActionBtn = await screen.findByRole('button', { name: 'Review Updates' });
+    userEvent.click(reviewActionBtn);
+    expect(await screen.findByRole('tab', { name: 'Review Content Updates 5' })).toHaveAttribute('aria-selected', 'true');
   });
 });
 
diff --git a/src/course-libraries/OutOfSyncAlert.tsx b/src/course-libraries/OutOfSyncAlert.tsx
index 17b9d33e5..cb7aeddef 100644
--- a/src/course-libraries/OutOfSyncAlert.tsx
+++ b/src/course-libraries/OutOfSyncAlert.tsx
@@ -13,9 +13,17 @@ interface OutOfSyncAlertProps {
   onDismiss?: () => void;
   onReview: () => void;
 }
-/*
-Shows an alert when library components used in the current course were updated and the blocks in course can be updated.
-Dismiss or review action is persisted using localStorage to avoid displaying the alert on every refresh.
+/**
+* Shows an alert when library components used in the current course were updated and the blocks
+* in course can be updated. Following are the conditions for displaying the alert.
+*
+* * The alert is displayed if components are out of sync.
+* * If the user clicks on dismiss button, the state is stored in localstorage of user
+*   in this format: outOfSyncCountAlert-${courseId} = <number of out of sync components>.
+* * If the number of sync components don't change for the course and the user opens outline
+*   in the same browser, they don't see the alert again.
+* * If the number changes, i.e., if a new component is out of sync or the user updates or ignores
+*   a component, the alert is displayed again.
 */
 export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
   showAlert,
@@ -48,11 +56,6 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
     onDismiss?.();
   };
 
-  const reviewAlert = () => {
-    dismissAlert();
-    onReview();
-  };
-
   return (
     <AlertMessage
       title={intl.formatMessage(messages.outOfSyncCountAlertTitle, { outOfSyncCount })}
@@ -63,7 +66,7 @@ export const OutOfSyncAlert: React.FC<OutOfSyncAlertProps> = ({
       onClose={dismissAlert}
       actions={[
         <Button
-          onClick={reviewAlert}
+          onClick={onReview}
         >
           {intl.formatMessage(messages.outOfSyncCountAlertReviewBtn)}
         </Button>,