diff --git a/packages/bruno-app/src/components/CollectionSettings/index.js b/packages/bruno-app/src/components/CollectionSettings/index.js
index a4d011be3..8c639256b 100644
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -15,17 +15,9 @@ import Test from './Tests';
 import Presets from './Presets';
 import StyledWrapper from './StyledWrapper';
 import Vars from './Vars/index';
-import DotIcon from 'components/Icons/Dot';
+import { ContentIndicator } from 'components/Indicators';
 import Overview from './Overview/index';
 
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
-
 const CollectionSettings = ({ collection }) => {
   const dispatch = useDispatch();
   const tab = collection.settingsSelectedTab;
diff --git a/packages/bruno-app/src/components/FolderSettings/index.js b/packages/bruno-app/src/components/FolderSettings/index.js
index 621ae6815..6aa1e4b57 100644
--- a/packages/bruno-app/src/components/FolderSettings/index.js
+++ b/packages/bruno-app/src/components/FolderSettings/index.js
@@ -9,17 +9,9 @@ import StyledWrapper from './StyledWrapper';
 import Vars from './Vars';
 import Documentation from './Documentation';
 import Auth from './Auth';
-import DotIcon from 'components/Icons/Dot';
+import { ContentIndicator } from 'components/Indicators';
 import get from 'lodash/get';
 
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
-
 const FolderSettings = ({ collection, folder }) => {
   const dispatch = useDispatch();
   let tab = 'headers';
diff --git a/packages/bruno-app/src/components/Indicators/index.js b/packages/bruno-app/src/components/Indicators/index.js
new file mode 100644
index 000000000..c7f7d158d
--- /dev/null
+++ b/packages/bruno-app/src/components/Indicators/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import DotIcon from 'components/Icons/Dot';
+
+// base indicator – add extra tailwind/utility classes through `colorClass`
+
+const DotIndicator = ({ colorClass = '' }) => (
+  <sup className={`ml-[.125rem] opacity-80 font-medium ${colorClass}`}>
+    <DotIcon width="10" />
+  </sup>
+);
+
+export const ContentIndicator = () => <DotIndicator />;
+export const ErrorIndicator = () => <DotIndicator colorClass="text-red-500" />;
+
+export default ContentIndicator;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
index 6a4dfb071..8bfb6d5a3 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -7,7 +7,6 @@ import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
 import Auth from 'components/RequestPane/Auth';
-import DotIcon from 'components/Icons/Dot';
 import Vars from 'components/RequestPane/Vars';
 import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
@@ -17,22 +16,7 @@ import { find, get } from 'lodash';
 import Documentation from 'components/Documentation/index';
 import HeightBoundContainer from 'ui/HeightBoundContainer';
 import { useEffect } from 'react';
-
-const ContentIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium">
-      <DotIcon width="10"></DotIcon>
-    </sup>
-  );
-};
-
-const ErrorIndicator = () => {
-  return (
-    <sup className="ml-[.125rem] opacity-80 font-medium text-red-500">
-      <DotIcon width="10" ></DotIcon>
-    </sup>
-  );
-};
+import { ContentIndicator, ErrorIndicator } from 'components/Indicators';
 
 const HttpRequestPane = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -153,8 +137,8 @@ const HttpRequestPane = ({ item, collection }) => {
         <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
           Script
           {(script.req || script.res) && (
-            item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage ? 
-            <ErrorIndicator /> : 
+            item.preRequestScriptErrorMessage || item.postResponseScriptErrorMessage ?
+            <ErrorIndicator /> :
             <ContentIndicator />
           )}
         </div>
@@ -165,8 +149,8 @@ const HttpRequestPane = ({ item, collection }) => {
         <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
           Tests
           {tests && tests.length > 0 && (
-            item.testScriptErrorMessage ? 
-              <ErrorIndicator /> : 
+            item.testScriptErrorMessage ?
+              <ErrorIndicator /> :
               <ContentIndicator />
           )}
         </div>