diff --git a/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts b/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts
index 9365cbb1..2e091495 100644
--- a/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts
+++ b/packages/main/src/components/DataViews/components/Metrics/useMetricsList.ts
@@ -44,7 +44,9 @@ export function useMetricsList(id: any, value: any, start, stop) {
             const url = `${dataSource.url}/api/v1/series?start=${timeParams.start}&end=${timeParams.end}&${valueFormatter}`;
             const apiRequest = async () => {
                 try {
-                    const req = await axios.get(url, metricsHeaders);
+                    const req = await axios.get(url, {
+                        ...metricsHeaders.options,
+                    });
                     if (req?.status === 200) {
                         setMetricNames(req?.data?.data || []);
                     }
diff --git a/packages/main/src/components/DataViews/components/Metrics/useValuesFromMetrics.ts b/packages/main/src/components/DataViews/components/Metrics/useValuesFromMetrics.ts
index 2e054b14..75957473 100644
--- a/packages/main/src/components/DataViews/components/Metrics/useValuesFromMetrics.ts
+++ b/packages/main/src/components/DataViews/components/Metrics/useValuesFromMetrics.ts
@@ -34,7 +34,9 @@ export function useValuesFromMetrics(id: any, start, stop) {
                 // setLoading(true);
 
                 try {
-                    const req = await axios.get(url, metricsHeaders);
+                    const req = await axios.get(url, 
+                       metricsHeaders,
+                );
                     if (req?.status === 200) {
                         setMetricNames(req?.data?.data || []);
                     }
diff --git a/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx b/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx
index 33b9ffee..3be6d9fc 100644
--- a/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx
+++ b/packages/main/src/components/DataViews/components/QueryBuilder/hooks/useMetricsList.tsx
@@ -43,7 +43,9 @@ export function useMetricsList(id: string, value: string, start, stop) {
             const url = `${dataSource.url}/api/v1/series?start=${timeParams.start}&end=${timeParams.end}&${valueFormatter}`;
             const apiRequest = async () => {
                 try {
-                    const req = await axios.get(url, metricsHeaders);
+                    const req = await axios.get(url, {
+                        ...metricsHeaders.options,
+                    });
                     if (req?.status === 200) {
                         setMetricNames(req?.data?.data || []);
                     }
diff --git a/packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx b/packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx
index 438171e2..4b409d6b 100644
--- a/packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx
+++ b/packages/main/src/components/QueryTypeBar/components/QueryTypeSwitch.tsx
@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
+import { type QrynTheme } from "@ui/theme/types";
 const Label: any = styled.div`
     color: ${(props: any) => props.theme.contrast};
     background: ${(props: any) => props.theme.shadow};
@@ -22,14 +23,12 @@ const QuerySwitchCont: any = styled.div`
     margin-right: 10px;
 `;
 
-const QuerySwitchBtn: any = styled.div`
+const QuerySwitchBtn: any = styled.div<{ theme: QrynTheme; selected: boolean }>`
     cursor: pointer;
     display: flex;
     align-items: center;
-    background: ${(props: any) =>
-        props.selected
-            ? props.theme.neutral
-            : props.theme.shadow};
+    background: ${(props) =>
+        props.selected ? props.theme.alphaPlusNeutral : props.theme.shadow};
     border-left: ${(props: any) =>
         props.position === "last"
             ? `1px solid ${props.theme.accentNeutral}`
@@ -42,8 +41,8 @@ const QuerySwitchBtn: any = styled.div`
         position === "first"
             ? "3px 0px 0px 3px"
             : position === "last"
-            ? "0px 3px 3px 0px"
-            : "0px"};
+              ? "0px 3px 3px 0px"
+              : "0px"};
     flex: 1;
     height: 90%;
 
diff --git a/packages/main/views/Main/helpers.ts b/packages/main/views/Main/helpers.ts
index 9f36f04e..35c1917f 100644
--- a/packages/main/views/Main/helpers.ts
+++ b/packages/main/views/Main/helpers.ts
@@ -18,7 +18,9 @@ export function updateDataSourcesWithUrl(
     let apiUrl = "";
     let basicAuth = false;
     let urlApi = false;
+    let hasToken = false;
     let cookieAuth: any = {};
+    let tokenHeader: any = {};
 
     if (haveUrl) {
         urlApi = true;
@@ -45,7 +47,16 @@ export function updateDataSourcesWithUrl(
 
         let [user, pass] = auth.split(":");
 
-        if (user !== "" && pass !== "") {
+        if (user === "token") {
+            hasToken = true;
+            basicAuth = false;
+            tokenHeader = {
+                header: "x-api-token",
+                value: pass,
+            };
+        }
+
+        if (user !== "" && pass !== "" && user !== "token") {
             cookieAuth = { user, password: pass };
             basicAuth = true;
         }
@@ -67,6 +78,7 @@ export function updateDataSourcesWithUrl(
     const newDs = prevDs?.map((m: any) => ({
         ...m,
         url: urlApi ? apiUrl : m.url,
+        headers: hasToken ? [...m.headers, { ...tokenHeader }] : [...m.headers],
         auth: {
             ...m.auth,
             basicAuth: { ...m.auth.basicAuth, value: basicAuth },
@@ -181,8 +193,8 @@ export async function checkLocalAPI(
                     true
                 );
 
-                // activate web vitals 
-           
+                // activate web vitals
+
                 isReady = true;
             } else {
                 setResponseType(ResponseEnum.NODE);
@@ -195,9 +207,9 @@ export async function checkLocalAPI(
                     "Query Item",
                     "Cardinality View",
                     false
-                )
+                );
 
-                // deactivate web vitals 
+                // deactivate web vitals
                 isReady = true;
             }
         }