diff --git a/x-pack/plugins/code/public/components/diff_page/commit_link.tsx b/x-pack/plugins/code/public/components/diff_page/commit_link.tsx
index 5d066f0c3fbd8..7525dfe6c4884 100644
--- a/x-pack/plugins/code/public/components/diff_page/commit_link.tsx
+++ b/x-pack/plugins/code/public/components/diff_page/commit_link.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { EuiLink } from '@elastic/eui';
+import { EuiBadge, EuiLink } from '@elastic/eui';
 import React from 'react';
 import { DIFF } from '../routes';
 
@@ -15,5 +15,9 @@ interface Props {
 
 export const CommitLink = ({ repoUri, commit, children }: Props) => {
   const href = DIFF.replace(':resource/:org/:repo', repoUri).replace(':commitId', commit);
-  return <EuiLink href={`#${href}`}>{children || commit}</EuiLink>;
+  return (
+    <EuiLink href={`#${href}`}>
+      <EuiBadge color="hollow">{children || commit}</EuiBadge>
+    </EuiLink>
+  );
 };
diff --git a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap
index 56e6b9a19faea..d9be6ed95d17f 100644
--- a/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap
+++ b/x-pack/plugins/code/public/components/file_tree/__snapshots__/file_tree.test.tsx.snap
@@ -80,12 +80,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -98,9 +117,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              android/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                android/
+              </div>
             </span>
           </div>
         </div>
@@ -113,12 +136,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -131,9 +173,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              futures/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                futures/
+              </div>
             </span>
           </div>
         </div>
@@ -146,12 +192,30 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bwzfXH kVxRUe sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_down-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                xlinkHref="#arrow_down-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -164,9 +228,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              guava/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                guava/
+              </div>
             </span>
           </div>
           <div
@@ -181,12 +249,31 @@ exports[`render correctly 1`] = `
                 onClick={[Function]}
                 role="button"
               >
-                <i
-                  className="sc-bdVaJa fsxEnI"
+                <svg
+                  className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+                  focusable="false"
+                  height="16"
                   onClick={[Function]}
-                />
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <defs>
+                    <path
+                      d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                      id="arrow_right-a"
+                    />
+                  </defs>
+                  <use
+                    fillRule="nonzero"
+                    transform="matrix(0 1 1 0 0 0)"
+                    xlinkHref="#arrow_right-a"
+                  />
+                </svg>
                 <svg
-                  className="euiIcon euiIcon--medium"
+                  className="euiIcon euiIcon--medium euiIcon--subdued"
                   focusable="false"
                   height="16"
                   style={null}
@@ -199,9 +286,13 @@ exports[`render correctly 1`] = `
                   />
                 </svg>
                 <span
-                  className="sc-htpNat hyFNl"
+                  className="sc-bdVaJa koZkCM"
                 >
-                  javadoc-link/
+                  <div
+                    className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+                  >
+                    javadoc-link/
+                  </div>
                 </span>
               </div>
             </div>
@@ -215,7 +306,7 @@ exports[`render correctly 1`] = `
                 role="button"
               >
                 <svg
-                  className="euiIcon euiIcon--medium"
+                  className="euiIcon euiIcon--medium euiIcon--subdued"
                   focusable="false"
                   height="16"
                   style={null}
@@ -235,9 +326,13 @@ exports[`render correctly 1`] = `
                   />
                 </svg>
                 <span
-                  className="sc-htpNat hyFNl"
+                  className="sc-bdVaJa koZkCM"
                 >
-                  pom.xml
+                  <div
+                    className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+                  >
+                    pom.xml
+                  </div>
                 </span>
               </div>
             </div>
@@ -250,12 +345,30 @@ exports[`render correctly 1`] = `
                 onClick={[Function]}
                 role="button"
               >
-                <i
-                  className="sc-bwzfXH kVxRUe sc-bdVaJa fsxEnI"
+                <svg
+                  className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+                  focusable="false"
+                  height="16"
                   onClick={[Function]}
-                />
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                >
+                  <defs>
+                    <path
+                      d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                      id="arrow_down-a"
+                    />
+                  </defs>
+                  <use
+                    fillRule="nonzero"
+                    xlinkHref="#arrow_down-a"
+                  />
+                </svg>
                 <svg
-                  className="euiIcon euiIcon--medium"
+                  className="euiIcon euiIcon--medium euiIcon--subdued"
                   focusable="false"
                   height="16"
                   style={null}
@@ -268,9 +381,13 @@ exports[`render correctly 1`] = `
                   />
                 </svg>
                 <span
-                  className="sc-htpNat hyFNl"
+                  className="sc-bdVaJa koZkCM"
                 >
-                  src/com/google/
+                  <div
+                    className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+                  >
+                    src/com/google/
+                  </div>
                 </span>
               </div>
               <div
@@ -285,12 +402,31 @@ exports[`render correctly 1`] = `
                     onClick={[Function]}
                     role="button"
                   >
-                    <i
-                      className="sc-bdVaJa fsxEnI"
+                    <svg
+                      className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+                      focusable="false"
+                      height="16"
                       onClick={[Function]}
-                    />
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                    >
+                      <defs>
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                          id="arrow_right-a"
+                        />
+                      </defs>
+                      <use
+                        fillRule="nonzero"
+                        transform="matrix(0 1 1 0 0 0)"
+                        xlinkHref="#arrow_right-a"
+                      />
+                    </svg>
                     <svg
-                      className="euiIcon euiIcon--medium"
+                      className="euiIcon euiIcon--medium euiIcon--subdued"
                       focusable="false"
                       height="16"
                       style={null}
@@ -303,9 +439,13 @@ exports[`render correctly 1`] = `
                       />
                     </svg>
                     <span
-                      className="sc-htpNat hyFNl"
+                      className="sc-bdVaJa koZkCM"
                     >
-                      common/
+                      <div
+                        className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+                      >
+                        common/
+                      </div>
                     </span>
                   </div>
                 </div>
@@ -318,12 +458,31 @@ exports[`render correctly 1`] = `
                     onClick={[Function]}
                     role="button"
                   >
-                    <i
-                      className="sc-bdVaJa fsxEnI"
+                    <svg
+                      className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+                      focusable="false"
+                      height="16"
                       onClick={[Function]}
-                    />
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlnsXlink="http://www.w3.org/1999/xlink"
+                    >
+                      <defs>
+                        <path
+                          d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                          id="arrow_right-a"
+                        />
+                      </defs>
+                      <use
+                        fillRule="nonzero"
+                        transform="matrix(0 1 1 0 0 0)"
+                        xlinkHref="#arrow_right-a"
+                      />
+                    </svg>
                     <svg
-                      className="euiIcon euiIcon--medium"
+                      className="euiIcon euiIcon--medium euiIcon--subdued"
                       focusable="false"
                       height="16"
                       style={null}
@@ -336,9 +495,13 @@ exports[`render correctly 1`] = `
                       />
                     </svg>
                     <span
-                      className="sc-htpNat hyFNl"
+                      className="sc-bdVaJa koZkCM"
                     >
-                      thirdparty/
+                      <div
+                        className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+                      >
+                        thirdparty/
+                      </div>
                     </span>
                   </div>
                 </div>
@@ -355,12 +518,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -373,9 +555,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              guava-bom/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                guava-bom/
+              </div>
             </span>
           </div>
         </div>
@@ -388,12 +574,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -406,9 +611,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              guava-gwt/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                guava-gwt/
+              </div>
             </span>
           </div>
         </div>
@@ -421,12 +630,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -439,9 +667,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              guava-testlib/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                guava-testlib/
+              </div>
             </span>
           </div>
         </div>
@@ -454,12 +686,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -472,9 +723,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              guava-tests/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                guava-tests/
+              </div>
             </span>
           </div>
         </div>
@@ -487,12 +742,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -505,9 +779,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              refactorings/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                refactorings/
+              </div>
             </span>
           </div>
         </div>
@@ -520,12 +798,31 @@ exports[`render correctly 1`] = `
             onClick={[Function]}
             role="button"
           >
-            <i
-              className="sc-bdVaJa fsxEnI"
+            <svg
+              className="euiIcon euiIcon--small euiIcon--subdued codeFileTree--icon"
+              focusable="false"
+              height="16"
               onClick={[Function]}
-            />
+              style={null}
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlnsXlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                  id="arrow_right-a"
+                />
+              </defs>
+              <use
+                fillRule="nonzero"
+                transform="matrix(0 1 1 0 0 0)"
+                xlinkHref="#arrow_right-a"
+              />
+            </svg>
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -538,9 +835,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              util/
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                util/
+              </div>
             </span>
           </div>
         </div>
@@ -554,7 +855,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -574,9 +875,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              .gitattributes
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                .gitattributes
+              </div>
             </span>
           </div>
         </div>
@@ -590,7 +895,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -610,9 +915,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              .gitignore
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                .gitignore
+              </div>
             </span>
           </div>
         </div>
@@ -626,7 +935,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -646,9 +955,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              .travis.yml
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                .travis.yml
+              </div>
             </span>
           </div>
         </div>
@@ -662,7 +975,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -682,9 +995,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              CONTRIBUTING.md
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                CONTRIBUTING.md
+              </div>
             </span>
           </div>
         </div>
@@ -698,7 +1015,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -718,9 +1035,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              CONTRIBUTORS
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                CONTRIBUTORS
+              </div>
             </span>
           </div>
         </div>
@@ -734,7 +1055,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -754,9 +1075,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              COPYING
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                COPYING
+              </div>
             </span>
           </div>
         </div>
@@ -770,7 +1095,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -790,9 +1115,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              README.md
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                README.md
+              </div>
             </span>
           </div>
         </div>
@@ -806,7 +1135,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -826,9 +1155,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              cycle_whitelist.txt
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                cycle_whitelist.txt
+              </div>
             </span>
           </div>
         </div>
@@ -842,7 +1175,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -862,9 +1195,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              javadoc-stylesheet.css
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                javadoc-stylesheet.css
+              </div>
             </span>
           </div>
         </div>
@@ -878,7 +1215,7 @@ exports[`render correctly 1`] = `
             role="button"
           >
             <svg
-              className="euiIcon euiIcon--medium"
+              className="euiIcon euiIcon--medium euiIcon--subdued"
               focusable="false"
               height="16"
               style={null}
@@ -898,9 +1235,13 @@ exports[`render correctly 1`] = `
               />
             </svg>
             <span
-              className="sc-htpNat hyFNl"
+              className="sc-bdVaJa koZkCM"
             >
-              pom.xml
+              <div
+                className="euiText euiText--small eui-displayInlineBlock euiText--constrainedWidth"
+              >
+                pom.xml
+              </div>
             </span>
           </div>
         </div>
diff --git a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
index 29cac5a87b73e..a0b02107d358e 100644
--- a/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
+++ b/x-pack/plugins/code/public/components/file_tree/file_tree.tsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 
-import { EuiIcon, EuiSideNav } from '@elastic/eui';
+import { EuiIcon, EuiSideNav, EuiText } from '@elastic/eui';
 import classes from 'classnames';
 
 import theme from '@elastic/eui/dist/eui_theme_light.json';
@@ -16,7 +16,6 @@ import { FileTree as Tree, FileTreeItemType } from '../../../model';
 import { closeTreePath, fetchRepoTree, FetchRepoTreePayload } from '../../actions';
 import { EuiSideNavItem, MainRouteParams, PathTypes } from '../../common/types';
 import { RootState } from '../../reducers';
-import { FolderClosedTriangle, FolderOpenTriangle } from '../shared';
 
 const DirectoryNode = styled.span`
   margin-left: ${theme.euiSizeXs};
@@ -93,12 +92,28 @@ export class CodeFileTree extends React.Component<Props> {
             onClick={onClick}
           >
             {forceOpen ? (
-              <FolderOpenTriangle onClick={onFolderClick} />
+              <EuiIcon
+                type="arrowDown"
+                size="s"
+                color="subdued"
+                className="codeFileTree--icon"
+                onClick={onFolderClick}
+              />
             ) : (
-              <FolderClosedTriangle onClick={onFolderClick} />
+              <EuiIcon
+                type="arrowRight"
+                size="s"
+                color="subdued"
+                className="codeFileTree--icon"
+                onClick={onFolderClick}
+              />
             )}
-            <EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} />
-            <DirectoryNode>{`${node.name}/`}</DirectoryNode>
+            <EuiIcon type={forceOpen ? 'folderOpen' : 'folderClosed'} color="subdued" />
+            <DirectoryNode>
+              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                {`${node.name}/`}
+              </EuiText>
+            </DirectoryNode>
           </div>
         );
       }
@@ -110,8 +125,12 @@ export class CodeFileTree extends React.Component<Props> {
             className={classes(className, 'code-file-tree-file')}
             role="button"
           >
-            <EuiIcon type="submodule" />
-            <DirectoryNode>{node.name}</DirectoryNode>
+            <EuiIcon type="submodule" color="subdued" />
+            <DirectoryNode>
+              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                {node.name}
+              </EuiText>
+            </DirectoryNode>
           </div>
         );
       }
@@ -123,8 +142,12 @@ export class CodeFileTree extends React.Component<Props> {
             className={classes(className, 'code-file-tree-file')}
             role="button"
           >
-            <EuiIcon type="symlink" />
-            <DirectoryNode>{node.name}</DirectoryNode>
+            <EuiIcon type="symlink" color="subdued" />
+            <DirectoryNode>
+              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                {node.name}
+              </EuiText>
+            </DirectoryNode>
           </div>
         );
       }
@@ -136,8 +159,12 @@ export class CodeFileTree extends React.Component<Props> {
             className={classes(className, 'code-file-tree-file')}
             role="button"
           >
-            <EuiIcon type="document" />
-            <DirectoryNode>{node.name}</DirectoryNode>
+            <EuiIcon type="document" color="subdued" />
+            <DirectoryNode>
+              <EuiText size="s" grow={false} className="eui-displayInlineBlock">
+                {node.name}
+              </EuiText>
+            </DirectoryNode>
           </div>
         );
       }
diff --git a/x-pack/plugins/code/public/components/main/commit_history.tsx b/x-pack/plugins/code/public/components/main/commit_history.tsx
index c128dd626926e..a282f72c1d737 100644
--- a/x-pack/plugins/code/public/components/main/commit_history.tsx
+++ b/x-pack/plugins/code/public/components/main/commit_history.tsx
@@ -22,15 +22,6 @@ import { CommitLink } from '../diff_page/commit_link';
 
 const COMMIT_ID_LENGTH = 8;
 
-const Dot = styled.div`
-  --dotRadius: ${theme.euiSizeS};
-  width: var(--dotRadius);
-  height: var(--dotRadius);
-  border-radius: calc(var(--dotRadius) / 2);
-  background-color: ${theme.euiBorderColor};
-  margin: auto;
-`;
-
 const CommitMessages = styled.div`
   overflow: auto;
   flex: 1;
@@ -43,33 +34,9 @@ const Header = styled.div`
   justify-content: space-between;
 `;
 
-const TimeLine = styled.div`
-  border-left: ${theme.euiBorderThick};
-  margin-left: ${theme.euiSizeXs};
-  padding: ${theme.paddingSizes.s} 0 ${theme.paddingSizes.s} ${theme.paddingSizes.m};
-`;
-
-const CommitRoot = styled(EuiPanel)`
-  &:not(:first-child) {
-    border-top: none;
-  }
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-const CommitGroupContainer = styled.div`
-  margin: 0 0 ${theme.euiSizeXs} ${theme.euiSizeM};
-`;
-
 const CommitId = styled.div`
-  --height: calc(20rem / 14);
-  width: var(--dotRadius);
-  height: var(--height);
+  height: calc(20rem / 14);
   margin: auto 0;
-  line-height: var(--height);
-  color: black;
-  border: ${theme.euiBorderThin};
   text-align: center;
   flex-shrink: 0;
 `;
@@ -84,12 +51,12 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) =>
     .slice(0, COMMIT_ID_LENGTH)
     .join('');
   return (
-    <CommitRoot>
+    <EuiPanel className="code-timeline__commit--root">
       <CommitContainer>
-        <EuiText>
+        <EuiText size="s">
           <p>{message}</p>
         </EuiText>
-        <EuiText>
+        <EuiText size="xs">
           <EuiTextColor color="subdued">
             {committer} · {date}
           </EuiTextColor>
@@ -98,7 +65,7 @@ const Commit = (props: { commit: CommitInfo; date: string; repoUri: string }) =>
       <CommitId>
         <CommitLink repoUri={props.repoUri} commit={commitId} />
       </CommitId>
-    </CommitRoot>
+    </EuiPanel>
   );
 };
 
@@ -107,10 +74,10 @@ const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: stri
     <Commit commit={commit} key={commit.id} date={props.date} repoUri={props.repoUri} />
   ));
   return (
-    <CommitGroupContainer>
+    <div className="code-timeline__commit-container">
       <EuiFlexGroup justifyContent="flexStart" gutterSize="s">
         <EuiFlexItem grow={false}>
-          <Dot />
+          <div className="code-timeline__marker" />
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiText>
@@ -120,8 +87,8 @@ const CommitGroup = (props: { commits: CommitInfo[]; date: string; repoUri: stri
           </EuiText>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <TimeLine>{commitList}</TimeLine>
-    </CommitGroupContainer>
+      <div className="code-timeline">{commitList}</div>
+    </div>
   );
 };
 
diff --git a/x-pack/plugins/code/public/components/main/directory.tsx b/x-pack/plugins/code/public/components/main/directory.tsx
index 15d4165f871d5..1ff99fbc2281b 100644
--- a/x-pack/plugins/code/public/components/main/directory.tsx
+++ b/x-pack/plugins/code/public/components/main/directory.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiIcon, EuiTitle, IconType } from '@elastic/eui';
+import { EuiIcon, EuiText, EuiTitle, IconType } from '@elastic/eui';
 import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
@@ -46,15 +46,6 @@ const Container = styled.div`
   }
 `;
 
-const DirectoryNode = styled.div`
-  width: calc(200rem / 14);
-  margin: 0 ${theme.euiSizeS} ${theme.euiSizeM};
-  :hover {
-    background-color: ${theme.euiColorHighlight};
-    cursor: pointer;
-  }
-`;
-
 interface DirectoryNodesProps {
   title: string;
   nodes: FileTree[];
@@ -69,17 +60,21 @@ const DirectoryNodes = (props: DirectoryNodesProps) => {
     [FileTreeItemType.Submodule]: 'submodule',
   };
   const nodes = props.nodes.map(n => (
-    <Link
-      className="code-link"
-      key={n.path}
-      to={props.getUrl(n.path!)}
-      data-test-subj={`codeFileExplorerNode-${n.name}`}
-    >
-      <DirectoryNode>
-        <EuiIcon type={typeIconMap[n.type]} color="black" />
-        <NodeName>{n.name}</NodeName>
-      </DirectoryNode>
-    </Link>
+    <div className="code-directory__node" key={n.path}>
+      <Link
+        className="code-link"
+        key={n.path}
+        to={props.getUrl(n.path!)}
+        data-test-subj={`codeFileExplorerNode-${n.name}`}
+      >
+        <EuiIcon type={typeIconMap[n.type]} color="subdued" />
+        <NodeName>
+          <EuiText size="s" className="eui-displayInlineBlock">
+            {n.name}
+          </EuiText>
+        </NodeName>
+      </Link>
+    </div>
   ));
   return (
     <Container>
diff --git a/x-pack/plugins/code/public/components/main/main.scss b/x-pack/plugins/code/public/components/main/main.scss
index a203ab80d4d9b..fba10d0029b0e 100644
--- a/x-pack/plugins/code/public/components/main/main.scss
+++ b/x-pack/plugins/code/public/components/main/main.scss
@@ -25,6 +25,212 @@
   margin: auto;
 }
 
+.code-navigation__sidebar {
+  width: calc(256rem / 14);
+  border-right: $euiBorderThin;
+  display: flex;
+  flex-direction: column;
+  & > div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    & > div:first-child {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+    & > div:not(:first-child) {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      flex-shrink: 1;
+    }
+  }
+}
+
+.codeFileTree--container {
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  padding: $euiSizeM;
+  background-color: $euiColorLightestShade;
+}
+
+.codeFileTree--icon {
+  margin-right: $euiSizeS;
+}
+
+.code-directory__node {
+  width: calc(200rem / 14);
+  margin: 0 $euiSizeXS $euiSizeS;
+  padding: $euiSizeXS;
+  border-radius: $euiBorderRadius;
+  a {
+    color: $euiColorDarkestShade;
+  }
+  &:hover {
+    background-color: rgba($euiColorGhost, .10);
+    cursor: pointer;
+  }
+}
+.code-timeline {
+  border-left: $euiBorderThick;
+  margin-left: $euiSizeXS;
+  padding: $euiSizeS 0 $euiSizeS $euiSizeS;
+}
+
+.code-timeline__marker {
+  width: $euiSizeS;
+  height: $euiSizeS;
+  border-radius: $euiSizeS / 2;
+  background-color: $euiBorderColor;
+  margin: auto;
+}
+
+.code-timeline__commit-container {
+  margin: 0 0 $euiSizeXS $euiSizeM;
+  .euiPanel:not(:first-of-type), .euiPanel:not(:last-of-type) {
+    border-radius: 0;
+  }
+}
+
+.euiPanel.code-timeline__commit--root {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  &:not(:first-child) {
+    border-top: none;
+  }
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  &:first-child {
+    border-radius: $euiSizeXS $euiSizeXS 0 0;
+  }
+  &:last-child {
+    border-radius: 0 0 $euiSizeXS $euiSizeXS;
+  }
+  &:only-child{
+    border-radius: $euiSizeXS
+  }
+}
+
+.code-top-bar__container {
+  box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: $euiSizeS;
+  min-height: 80px;
+  border-bottom: $euiBorderThin;
+  nav {
+    a {
+      display: inline;
+    }
+    div {
+      vertical-align: baseline;
+    }
+  }
+}
+
+.codeSearch__suggestion-item {
+  background: $euiColorLightestShade;
+  height: 3rem;
+  margin: 0 $euiSize;
+  border-radius: $euiSizeXS;
+  cursor: pointer;
+  width: calc(100% - $euiSizeXL);
+
+  &:hover {
+    background: $euiColorLightShade;
+  }
+}
+
+.codeSearch__suggestion--active {
+  background: $euiColorLightShade;
+}
+
+.codeSearch-suggestion--inner {
+  display: flex;
+  align-items: stretch;
+  flex-grow: 1;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.codeSearch__suggestion-text {
+  color: $euiColorFullShade;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  flex-basis: auto;
+  font-family: $euiCodeFontFamily;
+  margin-right: $euiSizeXL;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: $euiSizeXS $euiSizeS;
+  font-size: $euiFontSizeS;
+}
+
+.codeSearch__full-text-button {
+  border-top: $euiBorderWidthThin solid $euiBorderColor;
+  padding: $euiSizeS;
+  text-align: center;
+  font-weight: bold;
+  background: $euiColorLightShade;
+  margin: $euiSizeS;
+  padding: $euiSizeS;
+  font-size: $euiFontSizeS;
+}
+
+.kbnTypeahead .kbnTypeahead__popover .kbnTypeahead__items {
+  overflow-x: hidden;
+}
+
+.codeSearch-suggestion__group-header {
+  padding: $euiSizeL;
+  border-top: $euiBorderThin;
+}
+.codeSearch-suggestion__group-title {
+  margin-left: $euiSizeS;
+  display: inline-block;
+}
+
+.codeSearch-suggestion__link {
+  height: $euiSize;
+  line-height: $euiSize;
+  text-align: center;
+  font-size: $euiFontSizeXS;
+  margin: $euiSizeS;
+}
+
+.codeSearch-suggestion__description {
+  flex-grow: 1;
+  flex-basis: 0%;
+  display: flex;
+  flex-direction: column;
+  color: $euiColorDarkShade;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: $euiFontSizeXS;
+  padding: $euiSizeXS $euiSize;
+}
+
+.codeSearch-suggestion__token {
+  color: $euiColorFullShade;
+  box-sizing: border-box;
+  flex-grow: 0;
+  flex-basis: auto;
+  width: $euiSizeXL;
+  height: $euiSizeXL;
+  text-align: center;
+  overflow: hidden;
+  padding: $euiSizeXS;
+  justify-content: center;
+  align-items: center;
+  margin-left: $euiSizeXS;
+}
+
 .code-link {
   &:focus {
     box-shadow: none;
diff --git a/x-pack/plugins/code/public/components/main/side_tabs.tsx b/x-pack/plugins/code/public/components/main/side_tabs.tsx
index 0b2793ba7e9b8..dae3a1f0ce532 100644
--- a/x-pack/plugins/code/public/components/main/side_tabs.tsx
+++ b/x-pack/plugins/code/public/components/main/side_tabs.tsx
@@ -5,11 +5,9 @@
  */
 
 import { EuiTabbedContent } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import { parse as parseQuery } from 'querystring';
 import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import styled from 'styled-components';
 import { QueryString } from 'ui/utils/query_string';
 import { MainRouteParams, PathTypes } from '../../common/types';
 import { FileTree } from '../file_tree/file_tree';
@@ -21,38 +19,6 @@ enum Tabs {
   structure = 'structure',
 }
 
-const Container = styled.div`
-  width: calc(256rem / 14);
-  border-right: ${theme.euiBorderThin};
-  display: flex;
-  flex-grow: 0;
-  flex-shrink: 0;
-  flex-direction: column;
-  & > div {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    & > div:first-child {
-      flex-shrink: 0;
-      flex-grow: 0;
-    }
-    & > div:not(:first-child) {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      flex-shrink: 1;
-    }
-  }
-`;
-
-const FileTreeContainer = styled.div`
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: auto;
-  padding: ${theme.paddingSizes.l} ${theme.paddingSizes.m};
-  background-color: ${theme.euiColorLightestShade};
-`;
-
 class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRouteParams>> {
   public get sideTab(): Tabs {
     const { search } = this.props.location;
@@ -70,9 +36,9 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
         id: Tabs.file,
         name: 'File',
         content: (
-          <FileTreeContainer>
+          <div className="codeFileTree--container">
             <FileTree />
-          </FileTreeContainer>
+          </div>
         ),
         isSelected: Tabs.file === this.sideTab,
         'data-test-subj': 'codeFileTreeTab',
@@ -97,7 +63,7 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
 
   public render() {
     return (
-      <Container>
+      <div className="code-navigation__sidebar">
         <EuiTabbedContent
           tabs={this.tabs}
           initialSelectedTab={this.tabs.find(t => t.id === this.sideTab)}
@@ -109,7 +75,7 @@ class CodeSideTabs extends React.PureComponent<RouteComponentProps<MainRoutePara
           help="Toggle tree and symbol view in sidebar"
           onPress={this.toggleTab}
         />
-      </Container>
+      </div>
     );
   }
   private toggleTab = () => {
diff --git a/x-pack/plugins/code/public/components/main/top_bar.tsx b/x-pack/plugins/code/public/components/main/top_bar.tsx
index 4c1afcdcfd50f..9857b0c30df8f 100644
--- a/x-pack/plugins/code/public/components/main/top_bar.tsx
+++ b/x-pack/plugins/code/public/components/main/top_bar.tsx
@@ -5,32 +5,12 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React from 'react';
-import styled from 'styled-components';
 import { SearchScope } from '../../../model';
 import { MainRouteParams } from '../../common/types';
 import { Breadcrumb } from './breadcrumb';
 import { SearchBar } from './search_bar';
 
-const TopBarContainer = styled.div`
-  box-sizing: content-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: ${theme.paddingSizes.s};
-  min-height: 80px;
-  border-bottom: ${theme.euiBorderThick};
-  nav {
-    a {
-      display: inline;
-    }
-    div {
-      vertical-align: baseline;
-    }
-  }
-`;
-
 interface Props {
   routeParams: MainRouteParams;
   onSearchScopeChanged: (s: SearchScope) => void;
@@ -41,18 +21,20 @@ interface Props {
 export class TopBar extends React.Component<Props> {
   public render() {
     return (
-      <TopBarContainer>
+      <div className="code-top-bar__container">
         <SearchBar
           onSearchScopeChanged={this.props.onSearchScopeChanged}
           repoScope={this.props.repoScope}
         />
-        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween">
+        <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false}>
             <Breadcrumb routeParams={this.props.routeParams} />
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>{this.props.buttons}</EuiFlexItem>
+          <EuiFlexItem grow={false} style={{ marginRight: '-.5rem' }}>
+            {this.props.buttons}
+          </EuiFlexItem>
         </EuiFlexGroup>
-      </TopBarContainer>
+      </div>
     );
   }
 }
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
index cd572cc0523dc..8e783dd8e806c 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
+++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
@@ -19,64 +19,38 @@ exports[`render file item 1`] = `
     }
   }
 >
-  <styled.div
-    active={false}
+  <div
     aria-selected={false}
+    className="codeSearch__suggestion-item "
     id="suggestion-1-1"
     onClick={[Function]}
     onMouseEnter={[Function]}
     role="option"
   >
     <div
-      aria-selected={false}
-      className="sc-bdVaJa jlNfAS"
-      id="suggestion-1-1"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      role="option"
+      className="codeSearch-suggestion--inner"
     >
-      <styled.div>
+      <div>
         <div
-          className="sc-bwzfXH dIdIHh"
+          className="codeSearch__suggestion-text"
+          data-test-subj="codeTypeaheadItem"
         >
-          <div>
-            <Styled(styled.div)
-              data-test-subj="codeTypeaheadItem"
-            >
-              <styled.div
-                className="sc-ifAKCX byMHiA"
-                data-test-subj="codeTypeaheadItem"
-              >
-                <div
-                  className="sc-ifAKCX byMHiA sc-htpNat bUoeMH"
-                  data-test-subj="codeTypeaheadItem"
-                >
-                  <span>
-                    src/foo/
-                    <strong>
-                      bar
-                    </strong>
-                    .java
-                  </span>
-                </div>
-              </styled.div>
-            </Styled(styled.div)>
-            <Styled(styled.div)>
-              <styled.div
-                className="sc-EHOje iasAWb"
-              >
-                <div
-                  className="sc-EHOje iasAWb sc-htpNat bUoeMH"
-                >
-                  This is a file
-                </div>
-              </styled.div>
-            </Styled(styled.div)>
-          </div>
+          <span>
+            src/foo/
+            <strong>
+              bar
+            </strong>
+            .java
+          </span>
         </div>
-      </styled.div>
+        <div
+          className="codeSearch-suggestion__description"
+        >
+          This is a file
+        </div>
+      </div>
     </div>
-  </styled.div>
+  </div>
 </Component>
 `;
 
@@ -99,61 +73,35 @@ exports[`render repository item 1`] = `
     }
   }
 >
-  <styled.div
-    active={false}
+  <div
     aria-selected={false}
+    className="codeSearch__suggestion-item "
     id="suggestion-1-1"
     onClick={[Function]}
     onMouseEnter={[Function]}
     role="option"
   >
     <div
-      aria-selected={false}
-      className="sc-bdVaJa jlNfAS"
-      id="suggestion-1-1"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      role="option"
+      className="codeSearch-suggestion--inner"
     >
-      <styled.div>
+      <div>
         <div
-          className="sc-bwzfXH dIdIHh"
+          className="codeSearch__suggestion-text"
+          data-test-subj="codeTypeaheadItem"
         >
-          <div>
-            <Styled(styled.div)
-              data-test-subj="codeTypeaheadItem"
-            >
-              <styled.div
-                className="sc-ifAKCX byMHiA"
-                data-test-subj="codeTypeaheadItem"
-              >
-                <div
-                  className="sc-ifAKCX byMHiA sc-htpNat bUoeMH"
-                  data-test-subj="codeTypeaheadItem"
-                >
-                  <span>
-                    elastic/
-                    <strong>
-                      kibana
-                    </strong>
-                  </span>
-                </div>
-              </styled.div>
-            </Styled(styled.div)>
-            <Styled(styled.div)>
-              <styled.div
-                className="sc-EHOje iasAWb"
-              >
-                <div
-                  className="sc-EHOje iasAWb sc-htpNat bUoeMH"
-                />
-              </styled.div>
-            </Styled(styled.div)>
-          </div>
+          <span>
+            elastic/
+            <strong>
+              kibana
+            </strong>
+          </span>
         </div>
-      </styled.div>
+        <div
+          className="codeSearch-suggestion__description"
+        />
+      </div>
     </div>
-  </styled.div>
+  </div>
 </Component>
 `;
 
@@ -176,111 +124,79 @@ exports[`render symbol item 1`] = `
     }
   }
 >
-  <styled.div
-    active={false}
+  <div
     aria-selected={false}
+    className="codeSearch__suggestion-item "
     id="suggestion-1-1"
     onClick={[Function]}
     onMouseEnter={[Function]}
     role="option"
   >
     <div
-      aria-selected={false}
-      className="sc-bdVaJa jlNfAS"
-      id="suggestion-1-1"
-      onClick={[Function]}
-      onMouseEnter={[Function]}
-      role="option"
+      className="codeSearch-suggestion--inner"
     >
-      <styled.div>
-        <div
-          className="sc-bwzfXH dIdIHh"
+      <div
+        className="codeSearch-suggestion__token"
+      >
+        <EuiToken
+          displayOptions={Object {}}
+          iconType="tokenClass"
+          size="s"
         >
-          <Styled(styled.div)>
-            <styled.div
-              className="sc-bxivhb goHlpn"
+          <div
+            className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
+          >
+            <EuiIcon
+              size="m"
+              type="tokenClass"
             >
-              <div
-                className="sc-bxivhb goHlpn sc-htpNat bUoeMH"
+              <tokenClass
+                className="euiIcon euiIcon--medium"
+                focusable="false"
+                height="16"
+                style={null}
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <EuiToken
-                  displayOptions={Object {}}
-                  iconType="tokenClass"
-                  size="s"
+                <svg
+                  className="euiIcon euiIcon--medium"
+                  focusable="false"
+                  height="16"
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <div
-                    className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
-                  >
-                    <EuiIcon
-                      size="m"
-                      type="tokenClass"
-                    >
-                      <tokenClass
-                        className="euiIcon euiIcon--medium"
-                        focusable="false"
-                        height="16"
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          className="euiIcon euiIcon--medium"
-                          focusable="false"
-                          height="16"
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M11.333 7.027H9.375c-.056-.708-.48-1.187-1.222-1.187-.972 0-1.5.806-1.5 2.16 0 1.43.545 2.16 1.486 2.16.708 0 1.139-.415 1.236-1.08l1.958.015C11.236 10.418 10.181 12 8.097 12c-1.958 0-3.43-1.41-3.43-4 0-2.6 1.514-4 3.43-4 1.792 0 3.084 1.095 3.236 3.027z"
-                            fillRule="evenodd"
-                          />
-                        </svg>
-                      </tokenClass>
-                    </EuiIcon>
-                  </div>
-                </EuiToken>
-              </div>
-            </styled.div>
-          </Styled(styled.div)>
-          <div>
-            <Styled(styled.div)
-              data-test-subj="codeTypeaheadItem"
-            >
-              <styled.div
-                className="sc-ifAKCX byMHiA"
-                data-test-subj="codeTypeaheadItem"
-              >
-                <div
-                  className="sc-ifAKCX byMHiA sc-htpNat bUoeMH"
-                  data-test-subj="codeTypeaheadItem"
-                >
-                  <span>
-                    java.lang.
-                    <strong>
-                      String
-                    </strong>
-                  </span>
-                </div>
-              </styled.div>
-            </Styled(styled.div)>
-            <Styled(styled.div)>
-              <styled.div
-                className="sc-EHOje iasAWb"
-              >
-                <div
-                  className="sc-EHOje iasAWb sc-htpNat bUoeMH"
-                >
-                  elastic/elasticsearch &gt; src/foo/bar.java
-                </div>
-              </styled.div>
-            </Styled(styled.div)>
+                  <path
+                    d="M11.333 7.027H9.375c-.056-.708-.48-1.187-1.222-1.187-.972 0-1.5.806-1.5 2.16 0 1.43.545 2.16 1.486 2.16.708 0 1.139-.415 1.236-1.08l1.958.015C11.236 10.418 10.181 12 8.097 12c-1.958 0-3.43-1.41-3.43-4 0-2.6 1.514-4 3.43-4 1.792 0 3.084 1.095 3.236 3.027z"
+                    fillRule="evenodd"
+                  />
+                </svg>
+              </tokenClass>
+            </EuiIcon>
           </div>
+        </EuiToken>
+      </div>
+      <div>
+        <div
+          className="codeSearch__suggestion-text"
+          data-test-subj="codeTypeaheadItem"
+        >
+          <span>
+            java.lang.
+            <strong>
+              String
+            </strong>
+          </span>
+        </div>
+        <div
+          className="codeSearch-suggestion__description"
+        >
+          elastic/elasticsearch &gt; src/foo/bar.java
         </div>
-      </styled.div>
+      </div>
     </div>
-  </styled.div>
+  </div>
 </Component>
 `;
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
index 19067e797b837..a013a9cbdbc4a 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
+++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
@@ -139,13 +139,30 @@ exports[`render full suggestions component 1`] = `
               onScroll={[Function]}
               role="listbox"
             >
-              <styled.div>
+              <EuiFlexGroup
+                alignItems="stretch"
+                className="codeSearch-suggestion__group-header"
+                component="div"
+                direction="row"
+                gutterSize="l"
+                justifyContent="spaceBetween"
+                responsive={true}
+                wrap={false}
+              >
                 <div
-                  className="sc-htoDjs chDvrV"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive codeSearch-suggestion__group-header"
                 >
-                  <styled.div>
+                  <EuiFlexGroup
+                    alignItems="center"
+                    component="div"
+                    direction="row"
+                    gutterSize="none"
+                    justifyContent="flexStart"
+                    responsive={true}
+                    wrap={false}
+                  >
                     <div
-                      className="sc-dnqmqq iFsitv"
+                      className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                     >
                       <EuiToken
                         displayOptions={Object {}}
@@ -185,25 +202,25 @@ exports[`render full suggestions component 1`] = `
                           </EuiIcon>
                         </div>
                       </EuiToken>
-                      <styled.span>
-                        <span
-                          className="sc-iwsKbI eRUloI"
+                      <EuiText
+                        className="codeSearch-suggestion__group-title"
+                        grow={true}
+                        size="m"
+                      >
+                        <div
+                          className="euiText euiText--medium codeSearch-suggestion__group-title"
                         >
                           Symbols
-                        </span>
-                      </styled.span>
-                    </div>
-                  </styled.div>
-                  <styled.div>
-                    <div
-                      className="sc-gZMcBi doiTLD"
-                    >
-                      1
-                       Result
+                        </div>
+                      </EuiText>
                     </div>
-                  </styled.div>
+                  </EuiFlexGroup>
+                  <div>
+                    1
+                     Result
+                  </div>
                 </div>
-              </styled.div>
+              </EuiFlexGroup>
               <Component
                 ariaId="suggestion-0-0"
                 innerRef={[Function]}
@@ -223,112 +240,80 @@ exports[`render full suggestions component 1`] = `
                   }
                 }
               >
-                <styled.div
-                  active={true}
+                <div
                   aria-selected={true}
+                  className="codeSearch__suggestion-item codeSearch__suggestion-item--active"
                   id="suggestion-0-0"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   role="option"
                 >
                   <div
-                    aria-selected={true}
-                    className="sc-htpNat hJjmYy"
-                    id="suggestion-0-0"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    role="option"
+                    className="codeSearch-suggestion--inner"
                   >
-                    <styled.div>
-                      <div
-                        className="sc-bxivhb jzTuee"
+                    <div
+                      className="codeSearch-suggestion__token"
+                    >
+                      <EuiToken
+                        displayOptions={Object {}}
+                        iconType="tokenClass"
+                        size="s"
                       >
-                        <Styled(styled.div)>
-                          <styled.div
-                            className="sc-EHOje iMawIB"
-                          >
-                            <div
-                              className="sc-EHOje iMawIB sc-ifAKCX bMxzXt"
-                            >
-                              <EuiToken
-                                displayOptions={Object {}}
-                                iconType="tokenClass"
-                                size="s"
-                              >
-                                <div
-                                  className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
-                                >
-                                  <EuiIcon
-                                    size="m"
-                                    type="tokenClass"
-                                  >
-                                    <tokenClass
-                                      className="euiIcon euiIcon--medium"
-                                      focusable="false"
-                                      height="16"
-                                      style={null}
-                                      viewBox="0 0 16 16"
-                                      width="16"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        className="euiIcon euiIcon--medium"
-                                        focusable="false"
-                                        height="16"
-                                        style={null}
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M11.333 7.027H9.375c-.056-.708-.48-1.187-1.222-1.187-.972 0-1.5.806-1.5 2.16 0 1.43.545 2.16 1.486 2.16.708 0 1.139-.415 1.236-1.08l1.958.015C11.236 10.418 10.181 12 8.097 12c-1.958 0-3.43-1.41-3.43-4 0-2.6 1.514-4 3.43-4 1.792 0 3.084 1.095 3.236 3.027z"
-                                          fillRule="evenodd"
-                                        />
-                                      </svg>
-                                    </tokenClass>
-                                  </EuiIcon>
-                                </div>
-                              </EuiToken>
-                            </div>
-                          </styled.div>
-                        </Styled(styled.div)>
-                        <div>
-                          <Styled(styled.div)
-                            data-test-subj="codeTypeaheadItem"
+                        <div
+                          className="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
+                        >
+                          <EuiIcon
+                            size="m"
+                            type="tokenClass"
                           >
-                            <styled.div
-                              className="sc-bZQynM iALzZw"
-                              data-test-subj="codeTypeaheadItem"
-                            >
-                              <div
-                                className="sc-bZQynM iALzZw sc-ifAKCX bMxzXt"
-                                data-test-subj="codeTypeaheadItem"
-                              >
-                                <span>
-                                  java.lang.
-                                  <strong>
-                                    String
-                                  </strong>
-                                </span>
-                              </div>
-                            </styled.div>
-                          </Styled(styled.div)>
-                          <Styled(styled.div)>
-                            <styled.div
-                              className="sc-gzVnrw kzVDXi"
+                            <tokenClass
+                              className="euiIcon euiIcon--medium"
+                              focusable="false"
+                              height="16"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <div
-                                className="sc-gzVnrw kzVDXi sc-ifAKCX bMxzXt"
+                              <svg
+                                className="euiIcon euiIcon--medium"
+                                focusable="false"
+                                height="16"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width="16"
+                                xmlns="http://www.w3.org/2000/svg"
                               >
-                                elastic/elasticsearch &gt; src/foo/bar.java
-                              </div>
-                            </styled.div>
-                          </Styled(styled.div)>
+                                <path
+                                  d="M11.333 7.027H9.375c-.056-.708-.48-1.187-1.222-1.187-.972 0-1.5.806-1.5 2.16 0 1.43.545 2.16 1.486 2.16.708 0 1.139-.415 1.236-1.08l1.958.015C11.236 10.418 10.181 12 8.097 12c-1.958 0-3.43-1.41-3.43-4 0-2.6 1.514-4 3.43-4 1.792 0 3.084 1.095 3.236 3.027z"
+                                  fillRule="evenodd"
+                                />
+                              </svg>
+                            </tokenClass>
+                          </EuiIcon>
                         </div>
+                      </EuiToken>
+                    </div>
+                    <div>
+                      <div
+                        className="codeSearch__suggestion-text"
+                        data-test-subj="codeTypeaheadItem"
+                      >
+                        <span>
+                          java.lang.
+                          <strong>
+                            String
+                          </strong>
+                        </span>
+                      </div>
+                      <div
+                        className="codeSearch-suggestion__description"
+                      >
+                        elastic/elasticsearch &gt; src/foo/bar.java
                       </div>
-                    </styled.div>
+                    </div>
                   </div>
-                </styled.div>
+                </div>
               </Component>
             </div>
             <div
@@ -339,13 +324,30 @@ exports[`render full suggestions component 1`] = `
               onScroll={[Function]}
               role="listbox"
             >
-              <styled.div>
+              <EuiFlexGroup
+                alignItems="stretch"
+                className="codeSearch-suggestion__group-header"
+                component="div"
+                direction="row"
+                gutterSize="l"
+                justifyContent="spaceBetween"
+                responsive={true}
+                wrap={false}
+              >
                 <div
-                  className="sc-htoDjs chDvrV"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive codeSearch-suggestion__group-header"
                 >
-                  <styled.div>
+                  <EuiFlexGroup
+                    alignItems="center"
+                    component="div"
+                    direction="row"
+                    gutterSize="none"
+                    justifyContent="flexStart"
+                    responsive={true}
+                    wrap={false}
+                  >
                     <div
-                      className="sc-dnqmqq iFsitv"
+                      className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                     >
                       <EuiToken
                         displayOptions={Object {}}
@@ -385,25 +387,25 @@ exports[`render full suggestions component 1`] = `
                           </EuiIcon>
                         </div>
                       </EuiToken>
-                      <styled.span>
-                        <span
-                          className="sc-iwsKbI eRUloI"
+                      <EuiText
+                        className="codeSearch-suggestion__group-title"
+                        grow={true}
+                        size="m"
+                      >
+                        <div
+                          className="euiText euiText--medium codeSearch-suggestion__group-title"
                         >
                           Files
-                        </span>
-                      </styled.span>
-                    </div>
-                  </styled.div>
-                  <styled.div>
-                    <div
-                      className="sc-gZMcBi doiTLD"
-                    >
-                      1
-                       Result
+                        </div>
+                      </EuiText>
                     </div>
-                  </styled.div>
+                  </EuiFlexGroup>
+                  <div>
+                    1
+                     Result
+                  </div>
                 </div>
-              </styled.div>
+              </EuiFlexGroup>
               <Component
                 ariaId="suggestion-1-0"
                 innerRef={[Function]}
@@ -423,58 +425,32 @@ exports[`render full suggestions component 1`] = `
                   }
                 }
               >
-                <styled.div
-                  active={false}
+                <div
                   aria-selected={false}
+                  className="codeSearch__suggestion-item "
                   id="suggestion-1-0"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   role="option"
                 >
                   <div
-                    aria-selected={false}
-                    className="sc-htpNat kxKXpI"
-                    id="suggestion-1-0"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    role="option"
+                    className="codeSearch-suggestion--inner"
                   >
-                    <styled.div>
+                    <div>
                       <div
-                        className="sc-bxivhb jzTuee"
+                        className="codeSearch__suggestion-text"
+                        data-test-subj="codeTypeaheadItem"
                       >
-                        <div>
-                          <Styled(styled.div)
-                            data-test-subj="codeTypeaheadItem"
-                          >
-                            <styled.div
-                              className="sc-bZQynM iALzZw"
-                              data-test-subj="codeTypeaheadItem"
-                            >
-                              <div
-                                className="sc-bZQynM iALzZw sc-ifAKCX bMxzXt"
-                                data-test-subj="codeTypeaheadItem"
-                              >
-                                src/foo/bar.java
-                              </div>
-                            </styled.div>
-                          </Styled(styled.div)>
-                          <Styled(styled.div)>
-                            <styled.div
-                              className="sc-gzVnrw kzVDXi"
-                            >
-                              <div
-                                className="sc-gzVnrw kzVDXi sc-ifAKCX bMxzXt"
-                              >
-                                This is a file
-                              </div>
-                            </styled.div>
-                          </Styled(styled.div)>
-                        </div>
+                        src/foo/bar.java
+                      </div>
+                      <div
+                        className="codeSearch-suggestion__description"
+                      >
+                        This is a file
                       </div>
-                    </styled.div>
+                    </div>
                   </div>
-                </styled.div>
+                </div>
               </Component>
             </div>
             <div
@@ -485,13 +461,30 @@ exports[`render full suggestions component 1`] = `
               onScroll={[Function]}
               role="listbox"
             >
-              <styled.div>
+              <EuiFlexGroup
+                alignItems="stretch"
+                className="codeSearch-suggestion__group-header"
+                component="div"
+                direction="row"
+                gutterSize="l"
+                justifyContent="spaceBetween"
+                responsive={true}
+                wrap={false}
+              >
                 <div
-                  className="sc-htoDjs chDvrV"
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive codeSearch-suggestion__group-header"
                 >
-                  <styled.div>
+                  <EuiFlexGroup
+                    alignItems="center"
+                    component="div"
+                    direction="row"
+                    gutterSize="none"
+                    justifyContent="flexStart"
+                    responsive={true}
+                    wrap={false}
+                  >
                     <div
-                      className="sc-dnqmqq iFsitv"
+                      className="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
                     >
                       <EuiToken
                         displayOptions={Object {}}
@@ -532,26 +525,26 @@ exports[`render full suggestions component 1`] = `
                           </EuiIcon>
                         </div>
                       </EuiToken>
-                      <styled.span>
-                        <span
-                          className="sc-iwsKbI eRUloI"
+                      <EuiText
+                        className="codeSearch-suggestion__group-title"
+                        grow={true}
+                        size="m"
+                      >
+                        <div
+                          className="euiText euiText--medium codeSearch-suggestion__group-title"
                         >
                           Repos
-                        </span>
-                      </styled.span>
-                    </div>
-                  </styled.div>
-                  <styled.div>
-                    <div
-                      className="sc-gZMcBi doiTLD"
-                    >
-                      2
-                       Result
-                      s
+                        </div>
+                      </EuiText>
                     </div>
-                  </styled.div>
+                  </EuiFlexGroup>
+                  <div>
+                    2
+                     Result
+                    s
+                  </div>
                 </div>
-              </styled.div>
+              </EuiFlexGroup>
               <Component
                 ariaId="suggestion-2-0"
                 innerRef={[Function]}
@@ -571,56 +564,30 @@ exports[`render full suggestions component 1`] = `
                   }
                 }
               >
-                <styled.div
-                  active={false}
+                <div
                   aria-selected={false}
+                  className="codeSearch__suggestion-item "
                   id="suggestion-2-0"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   role="option"
                 >
                   <div
-                    aria-selected={false}
-                    className="sc-htpNat kxKXpI"
-                    id="suggestion-2-0"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    role="option"
+                    className="codeSearch-suggestion--inner"
                   >
-                    <styled.div>
+                    <div>
                       <div
-                        className="sc-bxivhb jzTuee"
+                        className="codeSearch__suggestion-text"
+                        data-test-subj="codeTypeaheadItem"
                       >
-                        <div>
-                          <Styled(styled.div)
-                            data-test-subj="codeTypeaheadItem"
-                          >
-                            <styled.div
-                              className="sc-bZQynM iALzZw"
-                              data-test-subj="codeTypeaheadItem"
-                            >
-                              <div
-                                className="sc-bZQynM iALzZw sc-ifAKCX bMxzXt"
-                                data-test-subj="codeTypeaheadItem"
-                              >
-                                elastic/kibana
-                              </div>
-                            </styled.div>
-                          </Styled(styled.div)>
-                          <Styled(styled.div)>
-                            <styled.div
-                              className="sc-gzVnrw kzVDXi"
-                            >
-                              <div
-                                className="sc-gzVnrw kzVDXi sc-ifAKCX bMxzXt"
-                              />
-                            </styled.div>
-                          </Styled(styled.div)>
-                        </div>
+                        elastic/kibana
                       </div>
-                    </styled.div>
+                      <div
+                        className="codeSearch-suggestion__description"
+                      />
+                    </div>
                   </div>
-                </styled.div>
+                </div>
               </Component>
               <Component
                 ariaId="suggestion-2-1"
@@ -641,88 +608,52 @@ exports[`render full suggestions component 1`] = `
                   }
                 }
               >
-                <styled.div
-                  active={false}
+                <div
                   aria-selected={false}
+                  className="codeSearch__suggestion-item "
                   id="suggestion-2-1"
                   onClick={[Function]}
                   onMouseEnter={[Function]}
                   role="option"
                 >
                   <div
-                    aria-selected={false}
-                    className="sc-htpNat kxKXpI"
-                    id="suggestion-2-1"
-                    onClick={[Function]}
-                    onMouseEnter={[Function]}
-                    role="option"
+                    className="codeSearch-suggestion--inner"
                   >
-                    <styled.div>
+                    <div>
                       <div
-                        className="sc-bxivhb jzTuee"
+                        className="codeSearch__suggestion-text"
+                        data-test-subj="codeTypeaheadItem"
                       >
-                        <div>
-                          <Styled(styled.div)
-                            data-test-subj="codeTypeaheadItem"
-                          >
-                            <styled.div
-                              className="sc-bZQynM iALzZw"
-                              data-test-subj="codeTypeaheadItem"
-                            >
-                              <div
-                                className="sc-bZQynM iALzZw sc-ifAKCX bMxzXt"
-                                data-test-subj="codeTypeaheadItem"
-                              >
-                                elastic/elasticsearch
-                              </div>
-                            </styled.div>
-                          </Styled(styled.div)>
-                          <Styled(styled.div)>
-                            <styled.div
-                              className="sc-gzVnrw kzVDXi"
-                            >
-                              <div
-                                className="sc-gzVnrw kzVDXi sc-ifAKCX bMxzXt"
-                              />
-                            </styled.div>
-                          </Styled(styled.div)>
-                        </div>
+                        elastic/elasticsearch
                       </div>
-                    </styled.div>
+                      <div
+                        className="codeSearch-suggestion__description"
+                      />
+                    </div>
                   </div>
-                </styled.div>
-              </Component>
-              <styled.div>
-                <div
-                  className="sc-gqjmRU bqMCCt"
-                >
-                  <Link
-                    replace={false}
-                    to="/search?q=string"
-                  >
-                    <a
-                      href="/search?q=string"
-                      onClick={[Function]}
-                    >
-                      View More
-                    </a>
-                  </Link>
                 </div>
-              </styled.div>
-            </div>
-            <styled.div>
+              </Component>
               <div
-                className="sc-VigVT hKgARx"
+                className="codeSearch-suggestion__link"
               >
-                <styled.div>
-                  <div
-                    className="sc-jTzLTM eaoLEj"
+                <Link
+                  replace={false}
+                  to="/search?q=string"
+                >
+                  <a
+                    href="/search?q=string"
+                    onClick={[Function]}
                   >
-                    Press ⮐ Return for Full Text Search
-                  </div>
-                </styled.div>
+                    View More
+                  </a>
+                </Link>
               </div>
-            </styled.div>
+            </div>
+            <div
+              className="codeSearch__full-text-button"
+            >
+              Press ⮐ Return for Full Text Search
+            </div>
           </div>
         </div>
       </div>
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx
index 4af9d750a0865..89befae7cbf07 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx
+++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestion_component.tsx
@@ -5,10 +5,7 @@
  */
 
 import { EuiToken, IconType } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
 import React, { SFC } from 'react';
-import styled from 'styled-components';
-
 import { AutocompleteSuggestion } from '../..';
 
 interface Props {
@@ -21,64 +18,6 @@ interface Props {
   ariaId: string;
 }
 
-const SuggestionItem = styled.div`
-  background: ${(props: any) => (props.active ? theme.euiColorHighlight : 'white')};
-  height: calc(48rem / 14);
-  margin: 0 ${theme.euiSize};
-  border-radius: ${theme.euiSizeXs} ${theme.euiSizeXs} ${theme.euiSizeXs} ${theme.euiSizeXs};
-  cursor: pointer;
-`;
-
-const SuggestionItemInner = styled.div`
-  display: flex;
-  align-items: stretch;
-  flex-grow: 1;
-  align-items: center;
-  white-space: nowrap;
-`;
-
-const SuggestionItemBase = styled.div`
-  flex-grow: 1;
-  flex-basis: 0%;
-  display: flex;
-  flex-direction: column;
-`;
-
-const SuggestionItemToken = styled(SuggestionItemBase)`
-  color: ${theme.euiColorFullShade};
-  flex-grow: 0;
-  flex-basis: auto;
-  width: ${theme.euiSizeXl};
-  height: ${theme.euiSizeXl};
-  text-align: center;
-  overflow: hidden;
-  padding: ${theme.euiSizeXs};
-  justify-content: center;
-  align-items: center;
-`;
-
-const SuggestionItemText = styled(SuggestionItemBase)`
-  color: ${theme.euiColorFullShade};
-  flex-grow: 0;
-  flex-basis: auto;
-  font-family: ${theme.euiCodeFontFamily};
-  margin-right: ${theme.euiSizeXl};
-  width: auto;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: ${theme.euiSizeXs} ${theme.euiSizeS};
-  color: #111;
-  font-size: ${theme.euiFontSizeS};
-`;
-
-const SuggestionItemDescription = styled(SuggestionItemBase)`
-  color: ${theme.euiColorDarkShade};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: ${theme.euiFontSizeXs};
-  padding: ${theme.euiSizeXs} ${theme.euiSizeS};
-`;
-
 export const SuggestionComponent: SFC<Props> = props => {
   const click = () => props.onClick(props.suggestion);
 
@@ -107,31 +46,35 @@ export const SuggestionComponent: SFC<Props> = props => {
   };
 
   const icon = props.suggestion.tokenType ? (
-    <SuggestionItemToken>
+    <div className="codeSearch-suggestion__token">
       <EuiToken iconType={props.suggestion.tokenType as IconType} />
-    </SuggestionItemToken>
+    </div>
   ) : null;
 
   return (
-    <SuggestionItem
+    <div
+      className={
+        'codeSearch__suggestion-item ' +
+        (props.selected ? 'codeSearch__suggestion-item--active' : '')
+      }
       role="option"
       onClick={click}
-      active={props.selected}
+      // active={props.selected}
       onMouseEnter={props.onMouseEnter}
       // @ts-ignore
       ref={props.innerRef}
       id={props.ariaId}
       aria-selected={props.selected}
     >
-      <SuggestionItemInner>
+      <div className="codeSearch-suggestion--inner">
         {icon}
         <div>
-          <SuggestionItemText data-test-subj={`codeTypeaheadItem`}>
+          <div className="codeSearch__suggestion-text" data-test-subj={`codeTypeaheadItem`}>
             {renderMatchingText(props.suggestion.text)}
-          </SuggestionItemText>
-          <SuggestionItemDescription>{props.suggestion.description}</SuggestionItemDescription>
+          </div>
+          <div className="codeSearch-suggestion__description">{props.suggestion.description}</div>
         </div>
-      </SuggestionItemInner>
-    </SuggestionItem>
+      </div>
+    </div>
   );
 };
diff --git a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
index b78287e5d2cec..f09bfab62494f 100644
--- a/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
+++ b/x-pack/plugins/code/public/components/query_bar/components/typeahead/suggestions_component.tsx
@@ -4,12 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiToken, IconType } from '@elastic/eui';
-import theme from '@elastic/eui/dist/eui_theme_light.json';
+import { EuiFlexGroup, EuiText, EuiToken, IconType } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
 import Url from 'url';
 
 import {
@@ -30,46 +28,6 @@ interface Props {
   loadMore: () => void;
 }
 
-const SuggestionGroupHeader = styled.div`
-  border-top: ${theme.euiBorderWidthThin} solid ${theme.euiBorderColor};
-  display: flex;
-  justify-content: space-between;
-  padding: ${theme.euiSize};
-`;
-
-const SuggestionGroupHeaderTitle = styled.div`
-  display: flex;
-`;
-
-const SuggestionGroupHeaderTitleText = styled.span`
-  margin-left: ${theme.euiSizeS};
-`;
-
-const SuggestionGroupHeaderResult = styled.div`
-  color: ${theme.euiColorDarkShade};
-`;
-
-const ViewMore = styled.div`
-  height: ${theme.euiSize};
-  line-height: ${theme.euiSize};
-  text-align: center;
-  font-size: ${theme.euiFontSizeXs};
-  margin: ${theme.euiSizeS};
-`;
-
-const PressReturn = styled.div`
-  border-top: ${theme.euiBorderWidthThin} solid ${theme.euiBorderColor};
-  padding: ${theme.euiSizeS};
-  text-align: center;
-  font-weight: bold;
-`;
-
-const PressReturnText = styled.div`
-  background: ${theme.euiColorLightShade};
-  margin: ${theme.euiSizeS};
-  padding: ${theme.euiSizeS};
-`;
-
 export class SuggestionsComponent extends Component<Props> {
   private childNodes: HTMLDivElement[] = [];
   private parentNode: HTMLDivElement | null = null;
@@ -84,9 +42,7 @@ export class SuggestionsComponent extends Component<Props> {
         <div className="kbnTypeahead">
           <div className="kbnTypeahead__popover">
             {this.renderSuggestionGroups()}
-            <PressReturn>
-              <PressReturnText>Press ⮐ Return for Full Text Search</PressReturnText>
-            </PressReturn>
+            <div className="codeSearch__full-text-button">Press ⮐ Return for Full Text Search</div>
           </div>
         </div>
       </div>
@@ -129,18 +85,21 @@ export class SuggestionsComponent extends Component<Props> {
         );
 
         const groupHeader = (
-          <SuggestionGroupHeader>
-            <SuggestionGroupHeaderTitle>
+          <EuiFlexGroup
+            justifyContent="spaceBetween"
+            className="codeSearch-suggestion__group-header"
+          >
+            <EuiFlexGroup direction="row" gutterSize="none" alignItems="center">
               <EuiToken iconType={this.getGroupTokenType(group.type) as IconType} />
-              <SuggestionGroupHeaderTitleText>
+              <EuiText className="codeSearch-suggestion__group-title">
                 {this.getGroupTitle(group.type)}
-              </SuggestionGroupHeaderTitleText>
-            </SuggestionGroupHeaderTitle>
-            <SuggestionGroupHeaderResult>
+              </EuiText>
+            </EuiFlexGroup>
+            <div>
               {total} Result
               {total === 1 ? '' : 's'}
-            </SuggestionGroupHeaderResult>
-          </SuggestionGroupHeader>
+            </div>
+          </EuiFlexGroup>
         );
 
         const viewMoreUrl = Url.format({
@@ -150,9 +109,9 @@ export class SuggestionsComponent extends Component<Props> {
           },
         });
         const viewMore = (
-          <ViewMore>
+          <div className="codeSearch-suggestion__link">
             <Link to={viewMoreUrl}>View More</Link>
-          </ViewMore>
+          </div>
         );
 
         return (