diff --git a/app/app/assets/stylesheets/application.postcss.css b/app/app/assets/stylesheets/application.postcss.css
index 91f43eb7..797336c5 100644
--- a/app/app/assets/stylesheets/application.postcss.css
+++ b/app/app/assets/stylesheets/application.postcss.css
@@ -2,5 +2,4 @@
 @forward "uswds-settings.scss";
 @forward "uswds";
 @forward "uswds-overrides.scss";
-@forward "lds-ripple.scss";
 @forward "cbv.scss";
diff --git a/app/app/assets/stylesheets/cbv.scss b/app/app/assets/stylesheets/cbv.scss
index 6bc6c8aa..79a8c42d 100644
--- a/app/app/assets/stylesheets/cbv.scss
+++ b/app/app/assets/stylesheets/cbv.scss
@@ -107,3 +107,12 @@ html {
 .cbv-row-highlight td {
   @include u-bg('yellow-5v');
 }
+
+.rotate {
+  animation: 1s linear infinite rotate-con;
+}
+
+@keyframes rotate-con {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(360deg);}
+}
diff --git a/app/app/assets/stylesheets/lds-ripple.scss b/app/app/assets/stylesheets/lds-ripple.scss
deleted file mode 100644
index 74656c4e..00000000
--- a/app/app/assets/stylesheets/lds-ripple.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * Loading screen ripple
- */
-.lds-ripple,
-.lds-ripple div {
-  box-sizing: border-box;
-}
-.lds-ripple {
-  display: inline-block;
-  position: relative;
-  width: 80px;
-  height: 80px;
-}
-.lds-ripple div {
-  position: absolute;
-  border: 4px solid currentColor;
-  opacity: 1;
-  border-radius: 50%;
-  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-}
-.lds-ripple div:nth-child(2) {
-  animation-delay: -0.5s;
-}
-@keyframes lds-ripple {
-  0% {
-    top: 36px;
-    left: 36px;
-    width: 8px;
-    height: 8px;
-    opacity: 0;
-  }
-  4.9% {
-    top: 36px;
-    left: 36px;
-    width: 8px;
-    height: 8px;
-    opacity: 0;
-  }
-  5% {
-    top: 36px;
-    left: 36px;
-    width: 8px;
-    height: 8px;
-    opacity: 1;
-  }
-  100% {
-    top: 0;
-    left: 0;
-    width: 80px;
-    height: 80px;
-    opacity: 0;
-  }
-}
diff --git a/app/app/views/cbv/synchronizations/_indicator.html.erb b/app/app/views/cbv/synchronizations/_indicator.html.erb
index acd266a0..99a34506 100644
--- a/app/app/views/cbv/synchronizations/_indicator.html.erb
+++ b/app/app/views/cbv/synchronizations/_indicator.html.erb
@@ -1,10 +1,11 @@
-<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+<svg class="in-progress <%= completed ? "display-none" : "" %> usa-icon border-05 rotate border-base-light radius-pill padding-1 usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
   <use
-    class="in-progress <%= in_progress ? "display-none" : "" %>"
     xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#autorenew") %>"
   ></use>
+</svg>
+
+<svg class="completed <%= !completed ? "display-none" : "" %> usa-icon border-05 bg-primary text-white border-primary radius-pill padding-1 usa-icon--size-5" aria-hidden="true" focusable="false" role="img">
   <use
-    class="completed <%= !in_progress ? "display-none" : "" %>"
     xlink:href="<%= asset_path("@uswds/uswds/dist/img/sprite.svg#check") %>"
   ></use>
 </svg>
diff --git a/app/app/views/cbv/synchronizations/show.html.erb b/app/app/views/cbv/synchronizations/show.html.erb
index 8260e2b1..4b758c64 100644
--- a/app/app/views/cbv/synchronizations/show.html.erb
+++ b/app/app/views/cbv/synchronizations/show.html.erb
@@ -19,29 +19,29 @@
         class="grid-col-fill"
         data-cbv-synchronizations-target="employmentJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("employment") } %>
-        <%= t(".jobs.employment") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("employment") } %>
+        <p><%= t(".jobs.employment") %></p>
       </div>
       <div
         class="grid-col-fill"
         data-cbv-synchronizations-target="identityJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("identity") } %>
-        <%= t(".jobs.identity") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("identity") } %>
+        <p><%= t(".jobs.identity") %></p>
       </div>
       <div
         class="grid-col-fill"
         data-cbv-synchronizations-target="paystubsJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("paystubs") } %>
-        <%= t(".jobs.paystubs") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("paystubs") } %>
+        <p><%= t(".jobs.paystubs") %></p>
       </div>
       <div
         class="grid-col-fill"
         data-cbv-synchronizations-target="incomeJob"
       >
-        <%= render partial: "cbv/synchronizations/indicator", locals: { in_progress: job_completed?("income") } %>
-        <%= t(".jobs.income") %>
+        <%= render partial: "cbv/synchronizations/indicator", locals: { completed: job_completed?("income") } %>
+        <p><%= t(".jobs.income") %></p>
       </div>
     </div>
   </div>