diff --git a/x-pack/legacy/plugins/code/public/components/main/main.scss b/x-pack/legacy/plugins/code/public/components/main/main.scss
index 23eb111981a8a..58776fe1cec6f 100644
--- a/x-pack/legacy/plugins/code/public/components/main/main.scss
+++ b/x-pack/legacy/plugins/code/public/components/main/main.scss
@@ -152,7 +152,6 @@
   margin: 0 $euiSize;
   border-radius: $euiSizeXS;
   cursor: pointer;
-  width: calc(100% - $euiSizeXL);
 
   &:hover {
     background: $euiFocusBackgroundColor;
diff --git a/x-pack/legacy/plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap b/x-pack/legacy/plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap
index ccc69a36a01ec..2b049ba6273e3 100644
--- a/x-pack/legacy/plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap
+++ b/x-pack/legacy/plugins/code/public/components/query_bar/components/__snapshots__/query_bar.test.tsx.snap
@@ -31,10 +31,11 @@ exports[`render correctly with empty query string 1`] = `
       className="euiFlexGroup euiFlexGroup--directionRow"
     >
       <EuiFlexItem
+        className="codeQueryBar__scope"
         grow={false}
       >
         <div
-          className="euiFlexItem euiFlexItem--flexGrowZero"
+          className="euiFlexItem euiFlexItem--flexGrowZero codeQueryBar__scope"
         >
           <ScopeSelector
             onScopeChanged={[Function]}
@@ -100,11 +101,6 @@ exports[`render correctly with empty query string 1`] = `
                   },
                 ]
               }
-              style={
-                Object {
-                  "width": "14.285714285714286rem",
-                }
-              }
               valueOfSelected="default"
             >
               <EuiPopover
@@ -172,11 +168,6 @@ exports[`render correctly with empty query string 1`] = `
                         },
                       ]
                     }
-                    style={
-                      Object {
-                        "width": "14.285714285714286rem",
-                      }
-                    }
                     value="default"
                   />
                 }
@@ -267,11 +258,6 @@ exports[`render correctly with empty query string 1`] = `
                             },
                           ]
                         }
-                        style={
-                          Object {
-                            "width": "14.285714285714286rem",
-                          }
-                        }
                         value="default"
                       >
                         <input
@@ -381,11 +367,6 @@ exports[`render correctly with empty query string 1`] = `
                                 onClick={[Function]}
                                 onKeyDown={[Function]}
                                 role="option"
-                                style={
-                                  Object {
-                                    "width": "14.285714285714286rem",
-                                  }
-                                }
                                 type="button"
                               >
                                 <div>
@@ -517,7 +498,7 @@ exports[`render correctly with empty query string 1`] = `
                       aria-label="Search input"
                       autoComplete="off"
                       autoFocus={true}
-                      className="kuiLocalSearchAssistedInput__input codeSearchBar__input"
+                      className="kuiLocalSearchAssistedInput__input codeQueryBar__input"
                       compressed={false}
                       data-test-subj="queryInput"
                       fullWidth={true}
@@ -552,7 +533,7 @@ exports[`render correctly with empty query string 1`] = `
                                 aria-label="Search input"
                                 autoComplete="off"
                                 autoFocus={true}
-                                className="euiFieldText kuiLocalSearchAssistedInput__input codeSearchBar__input euiFieldText--fullWidth"
+                                className="euiFieldText kuiLocalSearchAssistedInput__input codeQueryBar__input euiFieldText--fullWidth"
                                 data-test-subj="queryInput"
                                 onChange={[Function]}
                                 onClick={[Function]}
@@ -605,11 +586,11 @@ exports[`render correctly with empty query string 1`] = `
                                   className="euiButtonEmpty__text"
                                 >
                                   <EuiNotificationBadge
-                                    className="code-notification-badge"
+                                    className="codeQueryBar__filter-badge"
                                     size="m"
                                   >
                                     <span
-                                      className="euiNotificationBadge euiNotificationBadge--medium code-notification-badge"
+                                      className="euiNotificationBadge euiNotificationBadge--medium codeQueryBar__filter-badge"
                                     >
                                       0
                                     </span>
@@ -621,7 +602,7 @@ exports[`render correctly with empty query string 1`] = `
                                       className="euiTextColor euiTextColor--secondary"
                                     >
                                       <FormattedMessage
-                                        defaultMessage=" {filterCount, plural, one {Search Filter} other {Search Filters}} "
+                                        defaultMessage="{filterCount, plural, one {Advanced Filter} other {Advanced Filters}}"
                                         id="xpack.code.searchBar.searchFilterTitle"
                                         values={
                                           Object {
@@ -630,7 +611,7 @@ exports[`render correctly with empty query string 1`] = `
                                         }
                                       >
                                         <span>
-                                           Search Filters 
+                                          Advanced Filters
                                         </span>
                                       </FormattedMessage>
                                     </span>
@@ -749,10 +730,11 @@ exports[`render correctly with input query string changed 1`] = `
           className="euiFlexGroup euiFlexGroup--directionRow"
         >
           <EuiFlexItem
+            className="codeQueryBar__scope"
             grow={false}
           >
             <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              className="euiFlexItem euiFlexItem--flexGrowZero codeQueryBar__scope"
             >
               <ScopeSelector
                 onScopeChanged={[Function]}
@@ -818,11 +800,6 @@ exports[`render correctly with input query string changed 1`] = `
                       },
                     ]
                   }
-                  style={
-                    Object {
-                      "width": "14.285714285714286rem",
-                    }
-                  }
                   valueOfSelected="default"
                 >
                   <EuiPopover
@@ -890,11 +867,6 @@ exports[`render correctly with input query string changed 1`] = `
                             },
                           ]
                         }
-                        style={
-                          Object {
-                            "width": "14.285714285714286rem",
-                          }
-                        }
                         value="default"
                       />
                     }
@@ -985,11 +957,6 @@ exports[`render correctly with input query string changed 1`] = `
                                 },
                               ]
                             }
-                            style={
-                              Object {
-                                "width": "14.285714285714286rem",
-                              }
-                            }
                             value="default"
                           >
                             <input
@@ -1099,11 +1066,6 @@ exports[`render correctly with input query string changed 1`] = `
                                     onClick={[Function]}
                                     onKeyDown={[Function]}
                                     role="option"
-                                    style={
-                                      Object {
-                                        "width": "14.285714285714286rem",
-                                      }
-                                    }
                                     type="button"
                                   >
                                     <div>
@@ -1235,7 +1197,7 @@ exports[`render correctly with input query string changed 1`] = `
                           aria-label="Search input"
                           autoComplete="off"
                           autoFocus={true}
-                          className="kuiLocalSearchAssistedInput__input codeSearchBar__input"
+                          className="kuiLocalSearchAssistedInput__input codeQueryBar__input"
                           compressed={false}
                           data-test-subj="queryInput"
                           fullWidth={true}
@@ -1270,7 +1232,7 @@ exports[`render correctly with input query string changed 1`] = `
                                     aria-label="Search input"
                                     autoComplete="off"
                                     autoFocus={true}
-                                    className="euiFieldText kuiLocalSearchAssistedInput__input codeSearchBar__input euiFieldText--fullWidth"
+                                    className="euiFieldText kuiLocalSearchAssistedInput__input codeQueryBar__input euiFieldText--fullWidth"
                                     data-test-subj="queryInput"
                                     onChange={[Function]}
                                     onClick={[Function]}
@@ -1323,11 +1285,11 @@ exports[`render correctly with input query string changed 1`] = `
                                       className="euiButtonEmpty__text"
                                     >
                                       <EuiNotificationBadge
-                                        className="code-notification-badge"
+                                        className="codeQueryBar__filter-badge"
                                         size="m"
                                       >
                                         <span
-                                          className="euiNotificationBadge euiNotificationBadge--medium code-notification-badge"
+                                          className="euiNotificationBadge euiNotificationBadge--medium codeQueryBar__filter-badge"
                                         >
                                           0
                                         </span>
@@ -1339,7 +1301,7 @@ exports[`render correctly with input query string changed 1`] = `
                                           className="euiTextColor euiTextColor--secondary"
                                         >
                                           <FormattedMessage
-                                            defaultMessage=" {filterCount, plural, one {Search Filter} other {Search Filters}} "
+                                            defaultMessage="{filterCount, plural, one {Advanced Filter} other {Advanced Filters}}"
                                             id="xpack.code.searchBar.searchFilterTitle"
                                             values={
                                               Object {
@@ -1348,7 +1310,7 @@ exports[`render correctly with input query string changed 1`] = `
                                             }
                                           >
                                             <span>
-                                               Search Filters 
+                                              Advanced Filters
                                             </span>
                                           </FormattedMessage>
                                         </span>
diff --git a/x-pack/legacy/plugins/code/public/components/query_bar/components/options.tsx b/x-pack/legacy/plugins/code/public/components/query_bar/components/options.tsx
index 86f74a498ad5f..aa0fa04b726b2 100644
--- a/x-pack/legacy/plugins/code/public/components/query_bar/components/options.tsx
+++ b/x-pack/legacy/plugins/code/public/components/query_bar/components/options.tsx
@@ -133,18 +133,18 @@ export class SearchOptions extends Component<Props, State> {
         >
           <EuiFlyoutHeader>
             <EuiTitle size="s">
-              <h2 id="flyoutSmallTitle" className="">
-                <EuiNotificationBadge size="m" className="code-notification-badge">
+              <EuiFlexGroup id="flyoutSmallTitle" alignItems="center" gutterSize="none">
+                <EuiNotificationBadge size="m" className="codeQueryBar__filter-badge">
                   {repoScope.length}
                 </EuiNotificationBadge>
-                <EuiTextColor color="secondary" className="code-flyout-title">
+                <EuiTextColor color="secondary">
                   <FormattedMessage
                     id="xpack.code.searchBar.searchFilterTitle"
-                    defaultMessage=" {filterCount, plural, one {Search Filter} other {Search Filters}} "
+                    defaultMessage="{filterCount, plural, one {Advanced Filter} other {Advanced Filters}}"
                     values={{ filterCount: repoScope.length }}
                   />
                 </EuiTextColor>
-              </h2>
+              </EuiFlexGroup>
             </EuiTitle>
           </EuiFlyoutHeader>
           <EuiFlyoutBody>
@@ -196,13 +196,13 @@ export class SearchOptions extends Component<Props, State> {
       <div>
         <div className="kuiLocalSearchAssistedInput__assistance">
           <EuiButtonEmpty size="xs" onClick={this.toggleOptionsFlyout}>
-            <EuiNotificationBadge size="m" className="code-notification-badge">
+            <EuiNotificationBadge size="m" className="codeQueryBar__filter-badge">
               {repoScope.length}
             </EuiNotificationBadge>
             <EuiTextColor color="secondary">
               <FormattedMessage
                 id="xpack.code.searchBar.searchFilterTitle"
-                defaultMessage=" {filterCount, plural, one {Search Filter} other {Search Filters}} "
+                defaultMessage="{filterCount, plural, one {Advanced Filter} other {Advanced Filters}}"
                 values={{ filterCount: repoScope.length }}
               />
             </EuiTextColor>
diff --git a/x-pack/legacy/plugins/code/public/components/query_bar/components/query_bar.tsx b/x-pack/legacy/plugins/code/public/components/query_bar/components/query_bar.tsx
index 03a49774e7a15..5bb08f56af42b 100644
--- a/x-pack/legacy/plugins/code/public/components/query_bar/components/query_bar.tsx
+++ b/x-pack/legacy/plugins/code/public/components/query_bar/components/query_bar.tsx
@@ -435,7 +435,7 @@ export class CodeQueryBar extends Component<Props, State> {
       : '';
     return (
       <EuiFlexGroup responsive={false} gutterSize="none">
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem className="codeQueryBar__scope" grow={false}>
           <ScopeSelector scope={this.props.searchScope} onScopeChanged={this.onScopeChange} />
         </EuiFlexItem>
         <EuiFlexItem>
@@ -455,7 +455,7 @@ export class CodeQueryBar extends Component<Props, State> {
                 <div className="kuiLocalSearch" role="search">
                   <div className="kuiLocalSearchAssistedInput">
                     <EuiFieldText
-                      className="kuiLocalSearchAssistedInput__input codeSearchBar__input"
+                      className="kuiLocalSearchAssistedInput__input codeQueryBar__input"
                       placeholder={SearchScopePlaceholderText[this.props.searchScope]}
                       value={this.state.query}
                       onKeyDown={this.onKeyDown}
diff --git a/x-pack/legacy/plugins/code/public/components/query_bar/components/scope_selector.tsx b/x-pack/legacy/plugins/code/public/components/query_bar/components/scope_selector.tsx
index 3f072040a908c..26114ced284f5 100644
--- a/x-pack/legacy/plugins/code/public/components/query_bar/components/scope_selector.tsx
+++ b/x-pack/legacy/plugins/code/public/components/query_bar/components/scope_selector.tsx
@@ -9,7 +9,6 @@ import React, { Component } from 'react';
 
 import { SearchScope } from '../../../../model';
 import { SearchScopeText } from '../../../common/types';
-import { pxToRem } from '../../../style/variables';
 
 interface Props {
   scope: SearchScope;
@@ -57,7 +56,6 @@ export class ScopeSelector extends Component<Props> {
   public render() {
     return (
       <EuiSuperSelect
-        style={{ width: pxToRem(200) }}
         options={this.scopeOptions}
         valueOfSelected={this.props.scope}
         onChange={this.props.onScopeChanged}
diff --git a/x-pack/legacy/plugins/code/public/components/search_page/scope_tabs.tsx b/x-pack/legacy/plugins/code/public/components/search_page/scope_tabs.tsx
deleted file mode 100644
index 8370400bdef8f..0000000000000
--- a/x-pack/legacy/plugins/code/public/components/search_page/scope_tabs.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { EuiTab, EuiTabs } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
-import querystring from 'querystring';
-import React from 'react';
-import url from 'url';
-
-import { SearchScope } from '../../../model';
-import { history } from '../../utils/url';
-
-interface Props {
-  query: string;
-  scope: SearchScope;
-}
-
-export class ScopeTabs extends React.PureComponent<Props> {
-  public onTabClicked = (scope: SearchScope) => {
-    return () => {
-      const { query } = this.props;
-      const queries = querystring.parse(history.location.search.replace('?', ''));
-      history.push(
-        url.format({
-          pathname: '/search',
-          query: {
-            ...queries,
-            q: query,
-            scope,
-          },
-        })
-      );
-    };
-  };
-
-  public render() {
-    return (
-      <div className="codeContainer__tabs">
-        <EuiTabs style={{ height: '100%' }}>
-          <EuiTab
-            className="codeUtility__width--half"
-            isSelected={this.props.scope !== SearchScope.REPOSITORY}
-            onClick={this.onTabClicked(SearchScope.DEFAULT)}
-          >
-            <FormattedMessage
-              id="xpack.code.searchPage.scopeTabs.codeTabLabel"
-              defaultMessage="Code"
-            />
-          </EuiTab>
-          <EuiTab
-            className="codeUtility__width--half"
-            isSelected={this.props.scope === SearchScope.REPOSITORY}
-            onClick={this.onTabClicked(SearchScope.REPOSITORY)}
-          >
-            <FormattedMessage
-              id="xpack.code.searchPage.scopeTabs.repositoryTabLabel"
-              defaultMessage="Repository"
-            />
-          </EuiTab>
-        </EuiTabs>
-      </div>
-    );
-  }
-}
diff --git a/x-pack/legacy/plugins/code/public/components/search_page/search.tsx b/x-pack/legacy/plugins/code/public/components/search_page/search.tsx
index bf4792338616a..457a28ac0adba 100644
--- a/x-pack/legacy/plugins/code/public/components/search_page/search.tsx
+++ b/x-pack/legacy/plugins/code/public/components/search_page/search.tsx
@@ -220,6 +220,13 @@ class SearchPage extends React.PureComponent<Props, State> {
 
     return (
       <div className="codeContainer__root">
+        <SearchBar
+          searchOptions={this.props.searchOptions}
+          query={this.props.query}
+          onSearchScopeChanged={this.props.onSearchScopeChanged}
+          enableSubmitWhenOptionsChanged={true}
+          ref={(element: any) => (this.searchBar = element)}
+        />
         <div className="codeContainer__rootInner">
           <SideBar
             query={this.props.query}
@@ -231,16 +238,7 @@ class SearchPage extends React.PureComponent<Props, State> {
             onLanguageFilterToggled={this.onLanguageFilterToggled}
             onRepositoryFilterToggled={this.onRepositoryFilterToggled}
           />
-          <div className="codeContainer__search--main">
-            <SearchBar
-              searchOptions={this.props.searchOptions}
-              query={this.props.query}
-              onSearchScopeChanged={this.props.onSearchScopeChanged}
-              enableSubmitWhenOptionsChanged={true}
-              ref={(element: any) => (this.searchBar = element)}
-            />
-            {mainComp}
-          </div>
+          <div className="codeContainer__search--main">{mainComp}</div>
         </div>
       </div>
     );
diff --git a/x-pack/legacy/plugins/code/public/components/search_page/side_bar.tsx b/x-pack/legacy/plugins/code/public/components/search_page/side_bar.tsx
index 92b912964442c..3bcc6f9dce3b2 100644
--- a/x-pack/legacy/plugins/code/public/components/search_page/side_bar.tsx
+++ b/x-pack/legacy/plugins/code/public/components/search_page/side_bar.tsx
@@ -9,7 +9,6 @@ import {
   EuiFacetGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSpacer,
   EuiTitle,
   EuiToken,
 } from '@elastic/eui';
@@ -18,7 +17,6 @@ import React from 'react';
 
 import { RepositoryUtils } from '../../../common/repository_utils';
 import { SearchScope } from '../../../model';
-import { ScopeTabs } from './scope_tabs';
 
 interface Props {
   query: string;
@@ -74,15 +72,9 @@ export class SideBar extends React.PureComponent<Props> {
   public render() {
     return (
       <div className="codeSidebar__container">
-        <ScopeTabs query={this.props.query} scope={this.props.scope} />
-        <div className="codeFilter__group">
-          <EuiFlexGroup
-            className="codeFilter__title"
-            gutterSize="s"
-            alignItems="center"
-            style={{ marginBottom: '.5rem' }}
-          >
-            <EuiFlexItem grow={false}>
+        <div className="codeFilter__groups">
+          <EuiFlexGroup className="codeFilter__group" gutterSize="none" alignItems="center">
+            <EuiFlexItem grow={false} className="codeFilter__group-icon">
               <EuiToken iconType="tokenRepo" />
             </EuiFlexItem>
             <EuiFlexItem>
@@ -96,15 +88,9 @@ export class SideBar extends React.PureComponent<Props> {
               </EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>
-          <EuiFacetGroup>{this.renderRepoFacets()}</EuiFacetGroup>
-          <EuiSpacer />
-          <EuiFlexGroup
-            className="codeFilter__title"
-            gutterSize="s"
-            alignItems="center"
-            style={{ marginBottom: '.5rem' }}
-          >
-            <EuiFlexItem grow={false}>
+          <EuiFacetGroup className="codeFilter__group">{this.renderRepoFacets()}</EuiFacetGroup>
+          <EuiFlexGroup className="codeFilter__group" gutterSize="none" alignItems="center">
+            <EuiFlexItem grow={false} className="codeFilter__group-icon">
               <EuiToken
                 iconType="tokenElement"
                 displayOptions={{ color: 'tokenTint07', shape: 'rectangle', fill: true }}
@@ -121,7 +107,10 @@ export class SideBar extends React.PureComponent<Props> {
               </EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>
-          <EuiFacetGroup data-test-subj="codeSearchLanguageFilterList">
+          <EuiFacetGroup
+            className="codeFilter__group"
+            data-test-subj="codeSearchLanguageFilterList"
+          >
             {this.renderLangFacets()}
           </EuiFacetGroup>
         </div>
diff --git a/x-pack/legacy/plugins/code/public/index.scss b/x-pack/legacy/plugins/code/public/index.scss
index 090366342939d..0ea2cdf5b7300 100644
--- a/x-pack/legacy/plugins/code/public/index.scss
+++ b/x-pack/legacy/plugins/code/public/index.scss
@@ -7,6 +7,7 @@
 
 // TODO: Cleanup everything above this line
 
+@import "./style/variables";
 @import "./style/utilities";
 @import "./style/buttons";
 @import "./style/layout";
diff --git a/x-pack/legacy/plugins/code/public/style/_filters.scss b/x-pack/legacy/plugins/code/public/style/_filters.scss
index e360ec75c86ed..5519efa6a722e 100644
--- a/x-pack/legacy/plugins/code/public/style/_filters.scss
+++ b/x-pack/legacy/plugins/code/public/style/_filters.scss
@@ -1,8 +1,15 @@
+.codeFilter__groups {
+  padding: $euiSize;
+}
+
 .codeFilter__group {
-  padding: 0 1rem;
-  margin-top: $euiSizeS;
+  margin-bottom: $euiSizeS;
+}
+
+.codeFilter__group-icon {
+  width: $codeSideBarIndent;
 }
 
-.codeFilter__title {
-  height: 2.25rem;
+.codeFilter__item {
+  margin-left: $codeSideBarIndent;
 }
diff --git a/x-pack/legacy/plugins/code/public/style/_layout.scss b/x-pack/legacy/plugins/code/public/style/_layout.scss
index 632018cdd03ce..f46432a2b9494 100644
--- a/x-pack/legacy/plugins/code/public/style/_layout.scss
+++ b/x-pack/legacy/plugins/code/public/style/_layout.scss
@@ -67,10 +67,6 @@
   overflow: auto;
 }
 
-.codeContainer__searchBar {
-  width: 100%;
-}
-
 .codeContainer__select {
   margin-right: $euiSizeS;
   width: 12rem;
@@ -78,10 +74,6 @@
   flex-shrink: 0;
 }
 
-.codeContainer__tabs {
-  height: 3.5rem;
-}
-
 .codeContainer__search--inner {
   overflow-y: scroll;
   padding: 1rem;
@@ -120,13 +112,13 @@
   flex-grow: 1;
   flex-shrink: 1;
   overflow: auto;
-  max-width: 256px;
-  min-width: 256px;
+  max-width: $codeSideBarWidth;
+  min-width: $codeSideBarWidth;
 }
 
 .codeSearchbar__container {
   height: 3.5rem;
-  padding: $euiSizeS;
+  padding: $codeSearchBarPadding;
   border-bottom: $euiBorderWidthThin solid $euiBorderColor;
 }
 
diff --git a/x-pack/legacy/plugins/code/public/style/_query_bar.scss b/x-pack/legacy/plugins/code/public/style/_query_bar.scss
index ece554e1d9159..7459a8cd41e3a 100644
--- a/x-pack/legacy/plugins/code/public/style/_query_bar.scss
+++ b/x-pack/legacy/plugins/code/public/style/_query_bar.scss
@@ -5,6 +5,14 @@
   text-overflow: ellipsis;
 }
 
-.codeSearchBar__input {
+.codeQueryBar__input {
   padding-right: 10rem;
 }
+
+.codeQueryBar__scope {
+  width: calc(#{$codeSideBarWidth} - #{$codeSearchBarPadding});
+}
+
+.codeQueryBar__filter-badge {
+  margin-right: $euiSizeS;
+}
diff --git a/x-pack/legacy/plugins/code/public/style/_utilities.scss b/x-pack/legacy/plugins/code/public/style/_utilities.scss
index 82c5e17bfdf18..6d0f814670e25 100644
--- a/x-pack/legacy/plugins/code/public/style/_utilities.scss
+++ b/x-pack/legacy/plugins/code/public/style/_utilities.scss
@@ -2,10 +2,6 @@
   cursor: pointer;
 }
 
-.codeUtility__width--half {
-  width: 50%;
-}
-
 .codeMargin__title {
   margin: $euiSizeXS 0 $euiSize $euiSizeM;
 }
diff --git a/x-pack/legacy/plugins/code/public/style/_variables.scss b/x-pack/legacy/plugins/code/public/style/_variables.scss
new file mode 100644
index 0000000000000..c838f8d8e3309
--- /dev/null
+++ b/x-pack/legacy/plugins/code/public/style/_variables.scss
@@ -0,0 +1,3 @@
+$codeSideBarWidth: calc(#{$euiSize} * 16);
+$codeSideBarIndent: $euiSizeXL;
+$codeSearchBarPadding: $euiSizeS;