diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
index 84fc53d91..4cbc432c6 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
index 84fc53d91..4cbc432c6 100644
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/StyledWrapper.js
@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
index 42a764874..44b1420a7 100644
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/StyledWrapper.js
@@ -35,8 +35,8 @@ const StyledWrapper = styled.div`
 
   .react-tabs__tab--selected {
     border: none;
-    color: #322e2c !important;
-    border-bottom: solid 2px var(--color-tab-active-border) !important;
+    color: ${(props) => props.theme.tabs.active.color} !important;
+    border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
     border-color: var(--color-tab-active-border) !important;
     background: inherit;
     outline: none !important;
@@ -50,7 +50,7 @@ const StyledWrapper = styled.div`
       border: none;
       outline: none !important;
       box-shadow: none !important;
-      border-bottom: solid 2px var(--color-tab-active-border) !important;
+      border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       border-color: var(--color-tab-active-border) !important;
       background: inherit;
       outline: none !important;
diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
index 4f7edd43a..d78558bf7 100644
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/StyledWrapper.js
@@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        color: #322e2c !important;
-        border-bottom: solid 2px var(--color-tab-active-border) !important;
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
     }
   }
diff --git a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
index 84fc53d91..4cbc432c6 100644
--- a/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/MultipartFormParams/StyledWrapper.js
@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
index ba312fc77..fbcaabd28 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryParams/StyledWrapper.js
@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
index ef62c4a2b..c1e06a621 100644
--- a/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestHeaders/StyledWrapper.js
@@ -8,11 +8,11 @@ const Wrapper = styled.div`
 
     thead,
     td {
-      border: 1px solid #efefef;
+      border: 1px solid ${(props) => props.theme.table.border};
     }
 
     thead {
-      color: #616161;
+      color: ${(props) => props.theme.table.thead.color};;
       font-size: 0.8125rem;
       user-select: none;
     }
diff --git a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
index a33c9f8a8..9ebb11081 100644
--- a/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/StyledWrapper.js
@@ -18,11 +18,11 @@ const StyledWrapper = styled.div`
       display: flex;
       height: 100%;
       width: 1px;
-      border-left: solid 1px var(--color-request-dragbar-background);
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.border};
     }
 
     &:hover div.drag-request-border {
-      border-left: solid 1px var(--color-request-dragbar-background-active);
+      border-left: solid 1px ${(props) => props.theme.requestTabPanel.dragbar.activeBorder};
     }
   }
 `;
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
index 71f04f6bc..49d37f001 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/StyledWrapper.js
@@ -19,7 +19,7 @@ const StyledWrapper = styled.div`
 
     .close-icon {
       display: none;
-      color: #9f9f9f;
+      color: ${(props) => props.theme.requestTabs.icon.color};
       width: 8px;
       padding-bottom: 6px;
       padding-top: 6px;
@@ -27,8 +27,8 @@ const StyledWrapper = styled.div`
 
     &:hover,
     &:hover .close-icon {
-      background-color: #eaeaea;
-      color: rgb(76 76 76);
+      color: ${(props) => props.theme.requestTabs.icon.hoverColor};
+      background-color: ${(props) => props.theme.requestTabs.icon.hoverBg};
     }
 
     .has-changes-icon {
diff --git a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
index 06007075c..b9b8706ab 100644
--- a/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
+++ b/packages/bruno-app/src/components/RequestTabs/RequestTab/index.js
@@ -85,7 +85,7 @@ const RequestTab = ({ tab, collection }) => {
         <span className="tab-method uppercase" style={{ color: getMethodColor(method), fontSize: 12 }}>
           {method}
         </span>
-        <span className="text-gray-700 ml-1 tab-name" title={item.name}>
+        <span className="ml-1 tab-name" title={item.name}>
           {item.name}
         </span>
       </div>
diff --git a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
index 047dd76f2..553843c77 100644
--- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid var(--color-request-dragbar-background);
+  border-bottom: 1px solid ${(props) => props.theme.requestTabs.borromBorder};
 
   ul {
     padding: 0;
@@ -28,7 +28,8 @@ const Wrapper = styled.div`
       height: 38px;
 
       margin-right: 6px;
-      background: #f7f7f7;
+      color: ${(props) => props.theme.requestTabs.color};
+      background: ${(props) => props.theme.requestTabs.bg};
       border-radius: 0;
 
       .tab-container {
@@ -36,7 +37,7 @@ const Wrapper = styled.div`
       }
 
       &.active {
-        background: #e7e7e7;
+        background: ${(props) => props.theme.requestTabs.active.bg};
         font-weight: 500;
       }
 
@@ -60,9 +61,9 @@ const Wrapper = styled.div`
         padding: 3px 0px;
         display: inline-flex;
         justify-content: center;
-        color: rgb(117 117 117);
+        color: ${(props) => props.theme.requestTabs.shortTab.color};
+        background-color: ${(props) => props.theme.requestTabs.shortTab.bg};
         position: relative;
-        background-color: white;
         top: -1px;
 
         > div {
@@ -85,8 +86,8 @@ const Wrapper = styled.div`
 
         &:hover {
           > div {
-            background-color: #eaeaea;
-            color: rgb(76 76 76);
+            background-color: ${(props) => props.theme.requestTabs.shortTab.hoverBg};
+            color: ${(props) => props.theme.requestTabs.shortTab.hoverColor};
             border-radius: 3px;
           }
         }
diff --git a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
index 4f7edd43a..d78558bf7 100644
--- a/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/StyledWrapper.js
@@ -20,8 +20,8 @@ const StyledWrapper = styled.div`
       }
 
       &.active {
-        color: #322e2c !important;
-        border-bottom: solid 2px var(--color-tab-active-border) !important;
+        color: ${(props) => props.theme.tabs.active.color} !important;
+        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
       }
     }
   }
diff --git a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js
index 3156a418c..b81097d82 100644
--- a/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Workspaces/WorkspaceSelector/StyledWrapper.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   .current-workspace {
     margin-inline: 0.5rem;
-    background-color:  ${(props) => props.theme.sidebar.workspace.bg};
+    background-color: ${(props) => props.theme.sidebar.workspace.bg};
     border-radius: 5px;
 
     .caret {
diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js
index 0cdc7ae5b..b08ca0464 100644
--- a/packages/bruno-app/src/themes/dark.js
+++ b/packages/bruno-app/src/themes/dark.js
@@ -57,6 +57,10 @@ const darkTheme = {
     url: {
       bg: '#3D3D3D',
       icon: 'rgb(204, 204, 204)'
+    },
+    dragbar: {
+      border: '#444',
+      activeBorder: '#8a8a8a'
     }
   },
 
@@ -99,25 +103,29 @@ const darkTheme = {
   },
 
   tabs: {
-    color: '',
-    bg: '',
-    borromBorder: '',
     active: {
-      color: '',
-      bg: '',
-      borromBorder: ''
+      color: '#ccc',
+      border: '#569cd6'
     }
   },
 
-
   requestTabs: {
-    color: '',
-    bg: '',
-    borromBorder: '',
+    color: '#ccc',
+    bg: '#2A2D2F',
+    borromBorder: '#444',
+    icon: {
+      color: '#9f9f9f',
+      hoverColor: 'rgb(204, 204, 204)',
+      hoverBg: '#1e1e1e'
+    },
     active: {
-      color: '',
-      bg: '',
-      borromBorder: ''
+      bg: '#3D3D3D'
+    },
+    shortTab: {
+      color: '#ccc',
+      bg: 'transparent',
+      hoverColor: '#ccc',
+      hoverBg: '#3D3D3D'
     }
   },
 
@@ -126,7 +134,10 @@ const darkTheme = {
   },
 
   table: {
-    border: '',
+    border: '#333',
+    thead : {
+      color: 'rgb(204, 204, 204)'
+    }
   },
 
   'primary-text': '#ffffff',
diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js
index 49064bb19..55aed4863 100644
--- a/packages/bruno-app/src/themes/light.js
+++ b/packages/bruno-app/src/themes/light.js
@@ -57,6 +57,10 @@ const lightTheme = {
     url: {
       bg: '#f3f3f3',
       icon: '#515151'
+    },
+    dragbar: {
+      border: '#efefef',
+      activeBorder: 'rgb(200, 200, 200)'
     }
   },
 
@@ -99,24 +103,29 @@ const lightTheme = {
   },
 
   tabs: {
-    color: '',
-    bg: '',
-    borromBorder: '',
     active: {
-      color: '',
-      bg: '',
-      borromBorder: ''
+      color: '${(props) => props.theme.tabs.active.color}',
+      border: '#546de5'
     }
   },
 
   requestTabs: {
-    color: '',
-    bg: '',
-    borromBorder: '',
+    color: 'rgb(52, 52, 52)',
+    bg: '#f7f7f7',
+    borromBorder: '#efefef',
+    icon: {
+      color: '#9f9f9f',
+      hoverColor: 'rgb(76 76 76)',
+      hoverBg: 'rgb(234, 234, 234)'
+    },
     active: {
-      color: '',
-      bg: '',
-      borromBorder: ''
+      bg: '#e7e7e7'
+    },
+    shortTab: {
+      color: 'rgb(117 117 117)',
+      bg: 'white',
+      hoverColor: 'rgb(76 76 76)',
+      hoverBg: '#eaeaea'
     }
   },
 
@@ -125,7 +134,10 @@ const lightTheme = {
   },
 
   table: {
-    border: '',
+    border: '#efefef',
+    thead : {
+      color: '#616161'
+    }
   },
   
   'primary-text': 'rgb(52 52 52)',