diff --git a/renderer/components/EnvironmentSelector/StyledWrapper.js b/renderer/components/EnvironmentSelector/StyledWrapper.js
index 9ab33dece..a0f5681f5 100644
--- a/renderer/components/EnvironmentSelector/StyledWrapper.js
+++ b/renderer/components/EnvironmentSelector/StyledWrapper.js
@@ -4,6 +4,12 @@ const Wrapper = styled.div`
   .current-enviroment {
     background: #efefef;
     border-radius: 15px;
+
+    .caret {
+      margin-left: 0.25rem;
+      color: rgb(140, 140, 140);
+      fill: rgb(140, 140, 140);
+    }
   }
 `;
 
diff --git a/renderer/components/EnvironmentSelector/index.js b/renderer/components/EnvironmentSelector/index.js
index 2a33161fc..aedd8a492 100644
--- a/renderer/components/EnvironmentSelector/index.js
+++ b/renderer/components/EnvironmentSelector/index.js
@@ -1,8 +1,6 @@
 import React, { useRef, forwardRef } from 'react';
 import Dropdown from 'components/Dropdown';
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconAdjustmentsHorizontal } from '@tabler/icons';
+import { IconAdjustmentsHorizontal, IconCaretDown } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const EnvironmentSelector = () => {
@@ -11,7 +9,8 @@ const EnvironmentSelector = () => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="current-enviroment flex items-center justify-center px-3 py-1 select-none">
-        No Environment <FontAwesomeIcon className="ml-2 text-gray-500" icon={faCaretDown} style={{fontSize: 13}}/>
+        No Environment
+        <IconCaretDown className="caret" size={14} strokeWidth={2}/>
       </div>
     );
   });
diff --git a/renderer/components/QueryUrl/StyledWrapper.js b/renderer/components/QueryUrl/StyledWrapper.js
index b01366b6b..e6c752f7a 100644
--- a/renderer/components/QueryUrl/StyledWrapper.js
+++ b/renderer/components/QueryUrl/StyledWrapper.js
@@ -28,6 +28,13 @@ const Wrapper = styled.div`
       }
     }
   }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+    position: relative;
+    top: 1px;
+  }
 `;
 
 export default Wrapper;
diff --git a/renderer/components/QueryUrl/index.js b/renderer/components/QueryUrl/index.js
index 729b6cd44..fd0d26c0f 100644
--- a/renderer/components/QueryUrl/index.js
+++ b/renderer/components/QueryUrl/index.js
@@ -1,7 +1,6 @@
 import React, { useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconCaretDown } from '@tabler/icons';
 import Dropdown from '../Dropdown';
 import StyledWrapper from './StyledWrapper';
 import SaveRequestButton from '../SaveRequest';
@@ -12,8 +11,8 @@ const QueryUrl = ({value, onChange, handleRun, collections}) => {
 
   const Icon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className="user-icon items-center justify-center pl-3 py-2 select-none">
-        GET <FontAwesomeIcon className="ml-4 mr-1 text-gray-500" icon={faCaretDown} style={{fontSize: 13}}/>
+      <div ref={ref} className="flex items-center justify-center pl-3 py-2 select-none">
+        GET <IconCaretDown className="caret ml-2 mr-1" size={14} strokeWidth={2}/>
       </div>
     );
   });