diff --git a/packages/client/src/components/IndicatorLoader/StyledWrapper.js b/packages/client/src/components/IndicatorLoader/StyledWrapper.js
new file mode 100644
index 0000000000..c731dfddcb
--- /dev/null
+++ b/packages/client/src/components/IndicatorLoader/StyledWrapper.js
@@ -0,0 +1,24 @@
+import styled, { css } from "styled-components";
+import { isMobileOnly } from "react-device-detect";
+
+const StyledWrapper = styled.div`
+  #ipl-progress-indicator {
+    position: fixed;
+    z-index: 390;
+    top: 0;
+    left: -6px;
+    width: 0%;
+    height: 3px;
+    background-color: #eb835f;
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    border-radius: 1px;
+
+    ${isMobileOnly &&
+    css`
+      top: 48px;
+    `}
+  }
+`;
+
+export default StyledWrapper;
diff --git a/packages/client/src/components/IndicatorLoader/index.js b/packages/client/src/components/IndicatorLoader/index.js
index 44940c0a18..4886226ddf 100644
--- a/packages/client/src/components/IndicatorLoader/index.js
+++ b/packages/client/src/components/IndicatorLoader/index.js
@@ -1,32 +1,11 @@
 import React from "react";
-import styled, { css } from "styled-components";
-import { isMobileOnly } from "react-device-detect";
-
-const StyledWrapper = styled.div`
-  #ipl-progress-indicator {
-    position: fixed;
-    z-index: 390;
-    top: 0;
-    left: -6px;
-    width: 0%;
-    height: 3px;
-    background-color: #eb835f;
-    -moz-border-radius: 1px;
-    -webkit-border-radius: 1px;
-    border-radius: 1px;
-
-    ${isMobileOnly &&
-    css`
-      top: 48px;
-    `}
-  }
-`;
+import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
 
 const IndicatorLoader = () => {
   return (
-    <StyledWrapper>
+    <ColorTheme type={ThemeType.IndicatorLoader}>
       <div id="ipl-progress-indicator"></div>
-    </StyledWrapper>
+    </ColorTheme>
   );
 };