diff --git a/public/components/common/__test__/__snapshots__/header.test.tsx.snap b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
index e24d651..c1dfee0 100644
--- a/public/components/common/__test__/__snapshots__/header.test.tsx.snap
+++ b/public/components/common/__test__/__snapshots__/header.test.tsx.snap
@@ -4,22 +4,13 @@ exports[`Header component Renders header component 1`] = `
 <Header>
   <EuiPanel
     borderRadius="none"
+    color="transparent"
     grow={false}
     hasBorder={false}
     hasShadow={false}
-    style={
-      Object {
-        "borderBottom": "1px solid #D3DAE6",
-      }
-    }
   >
     <div
-      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
     >
       <EuiTitle>
         <h1
diff --git a/public/components/common/header.tsx b/public/components/common/header.tsx
index fe4633c..6fd9503 100644
--- a/public/components/common/header.tsx
+++ b/public/components/common/header.tsx
@@ -15,9 +15,9 @@ export const Header = ({ children }: HeaderProps) => {
     <EuiPanel
       hasBorder={false}
       hasShadow={false}
+      color="transparent"
       grow={false}
       borderRadius="none"
-      style={{ borderBottom: '1px solid #D3DAE6' }}
     >
       <EuiTitle>
         <h1>Compare search results</h1>
diff --git a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
index 0db4cbd..c24021e 100644
--- a/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
+++ b/public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
@@ -5,22 +5,13 @@ exports[`Create index component Renders create index component 1`] = `
   <Header>
     <EuiPanel
       borderRadius="none"
+      color="transparent"
       grow={false}
       hasBorder={false}
       hasShadow={false}
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-        style={
-          Object {
-            "borderBottom": "1px solid #D3DAE6",
-          }
-        }
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
       >
         <EuiTitle>
           <h1
diff --git a/public/components/query_compare/search_result/result_components/result_components.scss b/public/components/query_compare/search_result/result_components/result_components.scss
index 36fb13a..564cfcd 100644
--- a/public/components/query_compare/search_result/result_components/result_components.scss
+++ b/public/components/query_compare/search_result/result_components/result_components.scss
@@ -7,7 +7,7 @@
   min-height: 500px;
 
   &:nth-child(1) {
-    border-right: 1px solid #D3DAE6;
+    border-right: 1px solid $euiBorderColor;
   }
 }
   
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
index 3068541..36d1e46 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
@@ -314,7 +314,7 @@ exports[`Flyout component Renders flyout component 1`] = `
             }
             showPrintMargin={false}
             tabSize={2}
-            theme="sql_console"
+            theme="textmate"
             value="{}"
             width="100%"
           >
@@ -416,7 +416,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                 showPrintMargin={false}
                 style={Object {}}
                 tabSize={2}
-                theme="sql_console"
+                theme="textmate"
                 value="{}"
                 width="100%"
                 wrapEnabled={false}
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index 84c7825..163ffbb 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -32,23 +32,13 @@ exports[`Flyout component Renders flyout component 1`] = `
   >
     <EuiPanel
       borderRadius="none"
+      className="left-right-borders"
       color="transparent"
       grow={false}
-      hasBorder={false}
       hasShadow={false}
-      style={
-        Object {
-          "borderBottom": "1px solid #D3DAE6",
-        }
-      }
     >
       <div
-        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
-        style={
-          Object {
-            "borderBottom": "1px solid #D3DAE6",
-          }
-        }
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero left-right-borders"
       >
         <EuiFlexGroup>
           <div
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
index 65ce294..4896324 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.scss
@@ -6,6 +6,10 @@
 .search-relevance-config:nth-child(1) {
   margin: 0;
   padding: 12px;
-  border-right: 1px solid #D3DAE6;
+  border-right: 1px solid $euiBorderColor;
 }
-  
\ No newline at end of file
+
+.left-right-borders {
+  border-left: 0;
+  border-right: 0;
+}
\ No newline at end of file
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
index 09d2800..2ed9af5 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_configs.tsx
@@ -44,11 +44,10 @@ export const SearchConfigsPanel = ({
   return (
     <EuiPanel
       hasShadow={false}
-      hasBorder={false}
       color="transparent"
       grow={false}
       borderRadius="none"
-      style={{ borderBottom: '1px solid #D3DAE6' }}
+      className="left-right-borders"
     >
       <EuiFlexGroup>
         <EuiFlexItem className="search-relevance-config">