diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
index 6f5f53e710518..816074bd840a0 100644
--- a/packages/kbn-babel-preset/styled_components_files.js
+++ b/packages/kbn-babel-preset/styled_components_files.js
@@ -402,26 +402,6 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]exceptions[\/\\]pages[\/\\]shared_lists[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]paginated_table[\/\\]index.test.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]paginated_table[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]components[\/\\]stat_items[\/\\]utils.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]hosts[\/\\]pages[\/\\]display.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]hosts[\/\\]pages[\/\\]hosts.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]arrows[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]embeddable.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]embedded_map.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]map_tool_tip[\/\\]line_tool_tip_content.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]embeddables[\/\\]map_tool_tip[\/\\]tooltip_footer.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]flow_target_select_connected[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]country_flag.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]geo_fields.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]ip_with_port.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]label.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]network.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]components[\/\\]source_destination[\/\\]source_destination_arrows.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]pages[\/\\]navigation[\/\\]conditional_flex_group.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]pages[\/\\]navigation[\/\\]network_routes_loading.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]network[\/\\]pages[\/\\]network.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]explore[\/\\]users[\/\\]pages[\/\\]users.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]investigation_guide_view.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]response_details.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]document_details[\/\\]left[\/\\]components[\/\\]threat_details_view_enrichment_button_content.tsx/,
diff --git a/x-pack/solutions/security/plugins/security_solution/emotion.d.ts b/x-pack/solutions/security/plugins/security_solution/emotion.d.ts
new file mode 100644
index 0000000000000..213178080e536
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/emotion.d.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends UseEuiTheme {}
+}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx
index f0393cf5cc71c..986c9f4e92a52 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/display.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/display.tsx
index a907f1fdb5997..89caffb24e32a 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/display.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/display.tsx
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
-export const Display = styled.div<{ show: boolean }>`
-  ${({ show }) => (show ? '' : 'display: none;')};
-`;
+export const Display = styled.div<{ show: boolean }>(({ show }) => ({
+  display: show ? undefined : 'none',
+}));
 
 Display.displayName = 'Display';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/hosts.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/hosts.tsx
index 0fe710e2cc920..4f1b221a6f61e 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/hosts.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/hosts/pages/hosts.tsx
@@ -6,7 +6,7 @@
  */
 
 import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/__snapshots__/index.test.tsx.snap
index 7702695520790..64bf33f3db0ae 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/__snapshots__/index.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/__snapshots__/index.test.tsx.snap
@@ -1,17 +1,1102 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`arrows ArrowBody renders correctly against snapshot 1`] = `
-.c0 {
-  background-color: #343741;
-  height: 3px;
-  width: 25px;
-}
-
 <ArrowBody
   height={3}
 >
+  <Insertion
+    cache={
+      Object {
+        "compat": true,
+        "insert": [Function],
+        "inserted": Object {
+          "4ieeuw-euiColorMode-LIGHT": true,
+          "4rtwwc": true,
+        },
+        "key": "css",
+        "nonce": undefined,
+        "registered": Object {
+          "css-4ieeuw-euiColorMode-LIGHT": "
+        label: euiColorMode-LIGHT;
+        color: #343741;
+      ",
+        },
+        "sheet": StyleSheet {
+          "_alreadyInsertedOrderInsensitiveRule": true,
+          "_insertTag": [Function],
+          "before": null,
+          "container": <head>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1sgx2gt{inline-size:150px;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1sgx2gt .euiKeyPadMenuItem__label{white-space:nowrap;overflow:hidden;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1f5ny76{position:absolute;top:-8px;right:-8px;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1x9dy39{}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1x9dy39 .euiSuperSelectControl__placeholder{color:#0077cc;margin-right:4px;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1lec23r{height:32px;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1lec23r .euiSuperSelectControl{border:none;box-shadow:none;background:none;padding-left:0;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1lec23r .euiFormControlLayoutIcons{right:14px;top:2px;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-8kffb{margin-right:8px;overflow:hidden;text-overflow:ellipsis;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1kcx8qm{}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-1kcx8qm .euiAccordion__childWrapper{-webkit-transition:none;transition:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              *,*:before,*:after{box-sizing:border-box;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:none;vertical-align:baseline;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              h1,h2,h3,h4,h5,h6,p{font-family:inherit;font-weight:inherit;font-size:inherit;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              a[href],button,[role='button']{cursor:pointer;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              button{background:none;border:none;padding:0;margin:0;color:inherit;border-radius:0;font-size:inherit;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              input{margin:0;padding:0;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              input:disabled{opacity:1;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              ol,ul{list-style:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              blockquote,q{quotes:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              blockquote:before,blockquote:after,q:before,q:after{content:'';}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              table{border-collapse:collapse;border-spacing:0;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              hr{margin:0;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              fieldset{min-inline-size:auto;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              svg text{letter-spacing:normal!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              html{scrollbar-width:auto;scrollbar-color:rgba(105,112,125,0.5) #f0f1f4;font-family:'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;font-size:0.875rem;line-height:1.1428571428571428;font-weight:400;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-kerning:normal;block-size:100%;background-color:#f7f8fc;color:#343741;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              html::-webkit-scrollbar{inline-size:16px;block-size:16px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              html::-webkit-scrollbar-thumb{background-color:rgba(105,112,125,0.5);background-clip:content-box;border-radius:16px;border:4px solid #f0f1f4;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              html::-webkit-scrollbar-corner,html::-webkit-scrollbar-track{background-color:#f0f1f4;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              code,pre,kbd,samp{font-family:'Roboto Mono',Menlo,Courier,monospace;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              input,textarea,select{font-family:'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.1428571428571428;font-weight:400;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              select:disabled{opacity:1;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              button{font-family:'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              em{font-style:italic;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              strong{font-weight:700;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              *:focus{outline:2px solid currentColor;outline-offset:-1px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              *:focus:focus-visible{outline-style:auto;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              *:focus:not(:focus-visible){outline:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              ::selection{background:rgba(0,119,204,0.1);}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              a{color:#006bb8;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              a,a:hover,a:focus{-webkit-text-decoration:none;text-decoration:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .euiBody-hasPortalContent{position:relative;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .euiScreenReaderOnly{position:absolute;inset-block-start:auto;inset-inline-start:-10000px;inline-size:1px;block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;margin:-1px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-alignBaseline{vertical-align:baseline!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-alignBottom{vertical-align:bottom!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-alignMiddle{vertical-align:middle!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-alignTop{vertical-align:top!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-displayBlock{display:block!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-displayInline{display:inline!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-displayInlineBlock{display:inline-block!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-fullWidth{display:block!important;inline-size:100%!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-fullHeight{block-size:100%;flex:1 1 auto;overflow:hidden;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textCenter{text-align:center!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textLeft{text-align:start!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textRight{text-align:end!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textNoWrap{white-space:nowrap!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textInheritColor{color:inherit!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textBreakWord{overflow-wrap:break-word!important;word-break:break-word;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textTruncate{max-inline-size:100%;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-textNumber{font-feature-settings:'calt' 1,'kern' 1,'liga' 1,'tnum' 1;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-scrollBar{scrollbar-width:thin;scrollbar-color:rgba(105,112,125,0.5) transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-scrollBar::-webkit-scrollbar{inline-size:16px;block-size:16px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-scrollBar::-webkit-scrollbar-thumb{background-color:rgba(105,112,125,0.5);background-clip:content-box;border-radius:16px;border:calc(8px * 0.75) solid transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-scrollBar::-webkit-scrollbar-corner,.eui-scrollBar::-webkit-scrollbar-track{background-color:transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScroll{scrollbar-width:thin;scrollbar-color:rgba(105,112,125,0.5) transparent;block-size:100%;overflow-y:auto;overflow-block:auto;overflow-x:hidden;overflow-inline:hidden;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScroll::-webkit-scrollbar{inline-size:16px;block-size:16px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScroll::-webkit-scrollbar-thumb{background-color:rgba(105,112,125,0.5);background-clip:content-box;border-radius:16px;border:calc(8px * 0.75) solid transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScroll::-webkit-scrollbar-corner,.eui-yScroll::-webkit-scrollbar-track{background-color:transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScroll:focus{outline:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScroll{scrollbar-width:thin;scrollbar-color:rgba(105,112,125,0.5) transparent;overflow-x:auto;overflow-inline:auto;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScroll::-webkit-scrollbar{inline-size:16px;block-size:16px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScroll::-webkit-scrollbar-thumb{background-color:rgba(105,112,125,0.5);background-clip:content-box;border-radius:16px;border:calc(8px * 0.75) solid transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScroll::-webkit-scrollbar-corner,.eui-xScroll::-webkit-scrollbar-track{background-color:transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScroll:focus{outline:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScrollWithShadows{scrollbar-width:thin;scrollbar-color:rgba(105,112,125,0.5) transparent;block-size:100%;overflow-y:auto;overflow-block:auto;overflow-x:hidden;overflow-inline:hidden;-webkit-mask-image:linear-gradient(to bottom, 
+  rgba(255,0,0,0.1) 0%,
+  rgb(255,0,0) 8px
+  , 
+  rgb(255,0,0) calc(100% - 8px),
+  rgba(255,0,0,0.1) 100%
+  );mask-image:linear-gradient(to bottom, 
+  rgba(255,0,0,0.1) 0%,
+  rgb(255,0,0) 8px
+  , 
+  rgb(255,0,0) calc(100% - 8px),
+  rgba(255,0,0,0.1) 100%
+  );transform:translateZ(0);}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScrollWithShadows::-webkit-scrollbar{inline-size:16px;block-size:16px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScrollWithShadows::-webkit-scrollbar-thumb{background-color:rgba(105,112,125,0.5);background-clip:content-box;border-radius:16px;border:calc(8px * 0.75) solid transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScrollWithShadows::-webkit-scrollbar-corner,.eui-yScrollWithShadows::-webkit-scrollbar-track{background-color:transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-yScrollWithShadows:focus{outline:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScrollWithShadows{scrollbar-width:thin;scrollbar-color:rgba(105,112,125,0.5) transparent;overflow-x:auto;overflow-inline:auto;-webkit-mask-image:linear-gradient(to right, 
+  rgba(255,0,0,0.1) 0%,
+  rgb(255,0,0) 8px
+  , 
+  rgb(255,0,0) calc(100% - 8px),
+  rgba(255,0,0,0.1) 100%
+  );mask-image:linear-gradient(to right, 
+  rgba(255,0,0,0.1) 0%,
+  rgb(255,0,0) 8px
+  , 
+  rgb(255,0,0) calc(100% - 8px),
+  rgba(255,0,0,0.1) 100%
+  );transform:translateZ(0);}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScrollWithShadows::-webkit-scrollbar{inline-size:16px;block-size:16px;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScrollWithShadows::-webkit-scrollbar-thumb{background-color:rgba(105,112,125,0.5);background-clip:content-box;border-radius:16px;border:calc(8px * 0.75) solid transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScrollWithShadows::-webkit-scrollbar-corner,.eui-xScrollWithShadows::-webkit-scrollbar-track{background-color:transparent;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-xScrollWithShadows:focus{outline:none;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              [class*='eui-showFor']{display:none!important;}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-hideFor--xl{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 1200px){.eui-hideFor--xl{display:none!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xl{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 1200px){.eui-showFor--xl{display:inline!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xl--block{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 1200px){.eui-showFor--xl--block{display:block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xl--inlineBlock{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 1200px){.eui-showFor--xl--inlineBlock{display:inline-block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xl--flex{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 1200px){.eui-showFor--xl--flex{display:flex!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-hideFor--l{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 992px) and (max-width: 1199px){.eui-hideFor--l{display:none!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--l{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 992px) and (max-width: 1199px){.eui-showFor--l{display:inline!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--l--block{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 992px) and (max-width: 1199px){.eui-showFor--l--block{display:block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--l--inlineBlock{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 992px) and (max-width: 1199px){.eui-showFor--l--inlineBlock{display:inline-block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--l--flex{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 992px) and (max-width: 1199px){.eui-showFor--l--flex{display:flex!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-hideFor--m{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 768px) and (max-width: 991px){.eui-hideFor--m{display:none!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--m{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 768px) and (max-width: 991px){.eui-showFor--m{display:inline!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--m--block{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 768px) and (max-width: 991px){.eui-showFor--m--block{display:block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--m--inlineBlock{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 768px) and (max-width: 991px){.eui-showFor--m--inlineBlock{display:inline-block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--m--flex{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 768px) and (max-width: 991px){.eui-showFor--m--flex{display:flex!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-hideFor--s{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 575px) and (max-width: 767px){.eui-hideFor--s{display:none!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--s{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 575px) and (max-width: 767px){.eui-showFor--s{display:inline!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--s--block{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 575px) and (max-width: 767px){.eui-showFor--s--block{display:block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--s--inlineBlock{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 575px) and (max-width: 767px){.eui-showFor--s--inlineBlock{display:inline-block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--s--flex{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (min-width: 575px) and (max-width: 767px){.eui-showFor--s--flex{display:flex!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-hideFor--xs{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (max-width: 574px){.eui-hideFor--xs{display:none!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xs{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (max-width: 574px){.eui-showFor--xs{display:inline!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xs--block{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (max-width: 574px){.eui-showFor--xs--block{display:block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xs--inlineBlock{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (max-width: 574px){.eui-showFor--xs--inlineBlock{display:inline-block!important;}}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              .eui-showFor--xs--flex{}
+            </style>
+            <style
+              data-emotion="css-global"
+              data-s=""
+            >
+              
+              @media only screen and (max-width: 574px){.eui-showFor--xs--flex{display:flex!important;}}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-4ieeuw-euiColorMode-LIGHT{color:#343741;}
+            </style>
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-4rtwwc{background-color:#D3DAE6;height:3px;width:25px;}
+            </style>
+            <style
+              data-rfd-always="0"
+              type="text/css"
+            >
+               [data-rfd-drag-handle-context-id="0"] { 
+          -webkit-touch-callout: none;
+          -webkit-tap-highlight-color: rgba(0,0,0,0);
+          touch-action: manipulation;
+         } [data-rfd-droppable-context-id="0"] { overflow-anchor: none; } 
+            </style>
+            <style
+              data-rfd-dynamic="0"
+              type="text/css"
+            >
+               [data-rfd-drag-handle-context-id="0"] { 
+      cursor: -webkit-grab;
+      cursor: grab;
+     }  
+            </style>
+            <style
+              data-styled="active"
+              data-styled-version="5.3.11"
+            />
+          </head>,
+          "ctr": 2,
+          "insertionPoint": undefined,
+          "isSpeedy": false,
+          "key": "css",
+          "nonce": undefined,
+          "prepend": undefined,
+          "speedy": [Function],
+          "tags": Array [
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-4ieeuw-euiColorMode-LIGHT{color:#343741;}
+            </style>,
+            <style
+              data-emotion="css"
+              data-s=""
+            >
+              
+              .css-4rtwwc{background-color:#D3DAE6;height:3px;width:25px;}
+            </style>,
+          ],
+        },
+      }
+    }
+    isStringTag={true}
+    serialized={
+      Object {
+        "map": undefined,
+        "name": "4rtwwc",
+        "next": undefined,
+        "styles": "
+  background-color: #D3DAE6;
+  height: 3px;
+  width: 25px;
+",
+        "toString": [Function],
+      }
+    }
+  />
   <span
-    className="c0"
+    className="css-4rtwwc"
     height={3}
   />
 </ArrowBody>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/index.tsx
index 4acfc6de98f20..c7a4ff7cfd7d8 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/index.tsx
@@ -7,11 +7,11 @@
 
 import { EuiIcon } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 /** Renders the body (non-pointy part) of an arrow */
 export const ArrowBody = styled.span<{ height: number }>`
-  background-color: ${(props) => props.theme.eui.euiColorLightShade};
+  background-color: ${(props) => props.theme.euiTheme.colors.lightShade};
   height: ${({ height }) => `${height}px`};
   width: 25px;
 `;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embeddable.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embeddable.tsx
index 55950b2bffff5..3d6941f92fff2 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embeddable.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embeddable.tsx
@@ -8,7 +8,7 @@
 import { EuiPanel } from '@elastic/eui';
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const Panel = styled(EuiPanel)`
   overflow: hidden;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx
index bdd86a09ba231..6aa55916a40fd 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx
@@ -11,7 +11,8 @@ import { EuiAccordion, EuiLink, EuiText } from '@elastic/eui';
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { createHtmlPortalNode, InPortal, OutPortal } from 'react-reverse-portal';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import type { Filter, Query } from '@kbn/es-query';
 import { isEqual } from 'lodash/fp';
 import type { MapApi, RenderTooltipContentParams } from '@kbn/maps-plugin/public';
@@ -37,23 +38,19 @@ interface EmbeddableMapProps {
   maintainRatio?: boolean;
 }
 
-const EmbeddableMapRatioHolder = styled.div.attrs(() => ({
-  className: 'siemEmbeddable__map',
-}))<EmbeddableMapProps>`
+const EmbeddableMapRatioHolder = styled.div<EmbeddableMapProps>`
   .mapToolbarOverlay__button {
     display: none;
   }
-
-  ${({ maintainRatio }) =>
+  ${({ maintainRatio, theme: { euiTheme } }) =>
     maintainRatio &&
     css`
       padding-top: calc(3 / 4 * 100%); /* 4:3 (standard) ratio */
       position: relative;
 
-      @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
+      @media only screen and (min-width: ${euiTheme.breakpoint.m}) {
         padding-top: calc(9 / 32 * 100%); /* 32:9 (ultra widescreen) ratio */
       }
-
       @media only screen and (min-width: 1441px) and (min-height: 901px) {
         padding-top: calc(9 / 21 * 100%); /* 21:9 (ultrawide) ratio */
       }
@@ -188,7 +185,7 @@ export const EmbeddedMapComponent = ({
         <MapToolTip />
       </InPortal>
       <EmbeddableMapWrapper>
-        <EmbeddableMapRatioHolder maintainRatio={!isIndexError} />
+        <EmbeddableMapRatioHolder className="siemEmbeddable__map" maintainRatio={!isIndexError} />
         {isIndexError ? (
           <IndexPatternsMissingPrompt data-test-subj="missing-prompt" />
         ) : (
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
index fb6d0dc6898d5..858dac720b9de 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/line_tool_tip_content.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import type { ITooltipProperty } from '@kbn/maps-plugin/public/classes/tooltips/tooltip_property';
 import { SourceDestinationArrows } from '../../source_destination/source_destination_arrows';
 import {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/tooltip_footer.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
index fd57256602aa5..7d5e55a0172a7 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/map_tool_tip/tooltip_footer.tsx
@@ -15,7 +15,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { euiLightVars as theme } from '@kbn/ui-theme';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import * as i18n from '../translations';
 
 export const Icon = styled(EuiIcon)`
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_target_select_connected/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_target_select_connected/index.tsx
index b175f44a5532b..742e715915fe7 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_target_select_connected/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/flow_target_select_connected/index.tsx
@@ -9,7 +9,7 @@ import type { Location } from 'history';
 import { EuiFlexItem } from '@elastic/eui';
 import React, { useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import * as i18nIp from '../details/translations';
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/country_flag.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/country_flag.tsx
index 2a991dfa35fcb..0e2a4f00a02ac 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/country_flag.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/country_flag.tsx
@@ -10,7 +10,7 @@ import { isEmpty } from 'lodash/fp';
 import { EuiToolTip } from '@elastic/eui';
 import countries from 'i18n-iso-countries';
 import countryJson from 'i18n-iso-countries/langs/en.json';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 // Fixes vertical alignment of the flag
 const FlagWrapper = styled.span`
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/geo_fields.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/geo_fields.tsx
index 65521d03f3d38..df7f7902689d6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/geo_fields.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/geo_fields.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { get, uniq } from 'lodash/fp';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { DefaultDraggable } from '../../../../common/components/draggables';
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/index.tsx
index b546716e58ab4..c29d1dba5a5a0 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/index.tsx
@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { Network } from './network';
 import { SourceDestinationWithArrows } from './source_destination_with_arrows';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/ip_with_port.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/ip_with_port.tsx
index e99aecbc535e7..6fe257851e1e5 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/ip_with_port.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/ip_with_port.tsx
@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { Ip } from '../ip';
 import { Port } from '../port';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/label.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/label.tsx
index 4366ca8b8dd1a..e11640c2250a5 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/label.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/label.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const Label = styled.div`
   font-weight: bold;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/network.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/network.tsx
index ff29cdcb0f5b4..4385dd3750951 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/network.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/network.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { uniq } from 'lodash/fp';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { DirectionBadge } from '../direction';
 import { DefaultDraggable, DraggableBadge } from '../../../../common/components/draggables';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/source_destination_arrows.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/source_destination_arrows.tsx
index 050dedd79325c..8f033abc1ac23 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/source_destination_arrows.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/components/source_destination/source_destination_arrows.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { ArrowBody, ArrowHead } from '../arrows';
 import {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/conditional_flex_group.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/conditional_flex_group.tsx
index 680533f1a17dc..a8cf91ac73be9 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/conditional_flex_group.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/conditional_flex_group.tsx
@@ -6,7 +6,7 @@
  */
 
 import { EuiFlexGroup } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 export const ConditionalFlexGroup = styled(EuiFlexGroup)`
   @media only screen and (min-width: 1441px) {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/network_routes_loading.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/network_routes_loading.tsx
index 7074aa95051a1..ed0a19e48748b 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/network_routes_loading.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/navigation/network_routes_loading.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { EuiFlexItem, EuiLoadingSpinner, EuiFlexGroup } from '@elastic/eui';
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/network.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/network.tsx
index 00a88da0cfcf5..ef525e41a54d9 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/network.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/network/pages/network.tsx
@@ -9,7 +9,7 @@ import { EuiPanel, EuiSpacer, EuiWindowEvent } from '@elastic/eui';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { isTab } from '@kbn/timelines-plugin/public';
 import { getEsQueryConfig } from '@kbn/data-plugin/common';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/users/pages/users.tsx b/x-pack/solutions/security/plugins/security_solution/public/explore/users/pages/users.tsx
index 01c15e6f22287..2078fd9e90979 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/users/pages/users.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/users/pages/users.tsx
@@ -6,7 +6,7 @@
  */
 
 import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { noop } from 'lodash/fp';
 import React, { useCallback, useMemo, useRef } from 'react';
 import { useParams } from 'react-router-dom';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
index 51a976a3c3614..2b9b8e4675ced 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Netflow renders correctly against snapshot 1`] = `
 <DocumentFragment>
-  .c11,
-.c11 * {
+  .c7,
+.c7 * {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
@@ -106,75 +106,17 @@ tr:hover .c3:focus::before {
   vertical-align: top;
 }
 
-.c13 svg {
+.c8 svg {
   position: relative;
   top: -1px;
 }
 
-.c22 {
-  margin-right: 5px;
-}
-
-.c21 {
-  margin-right: 5px;
-}
-
-.c15 {
-  position: relative;
-  top: 1px;
-}
-
-.c14 {
-  margin-right: 5px;
-}
-
-.c17 {
-  background-color: #343741;
-  height: 2.8px;
-  width: 25px;
-}
-
-.c20 {
-  background-color: #343741;
-  height: 2.2px;
-  width: 25px;
-}
-
-.c19 {
-  margin-right: 5px;
-}
-
-.c16 {
-  margin: 0 2px;
-}
-
-.c16 .euiToolTipAnchor {
-  white-space: nowrap;
-}
-
-.c18 {
-  margin: 0 5px;
-}
-
-.c7 {
-  margin-right: 3px;
-}
-
-.c8 {
-  margin: 0 5px;
-}
-
-.c12 {
-  margin: 0 3px;
-}
-
 .c10 {
-  font-weight: bold;
-  margin-top: 2px;
+  margin-right: 5px;
 }
 
 .c9 {
-  margin-top: 3px;
+  margin-right: 5px;
 }
 
 .c6 {
@@ -537,7 +479,7 @@ tr:hover .c3:focus::before {
                 class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
               >
                 <div
-                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -599,7 +541,7 @@ tr:hover .c3:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -656,7 +598,7 @@ tr:hover .c3:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -692,7 +634,7 @@ tr:hover .c3:focus::before {
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c8 emotion-euiText-xs"
+                                class="euiText emotion-euiText-xs"
                               >
                                 <span>
                                   100B
@@ -706,7 +648,7 @@ tr:hover .c3:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -742,7 +684,7 @@ tr:hover .c3:focus::before {
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c8 emotion-euiText-xs"
+                                class="euiText emotion-euiText-xs"
                               >
                                 <span>
                                   3 pkts
@@ -756,7 +698,7 @@ tr:hover .c3:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -872,7 +814,7 @@ tr:hover .c3:focus::before {
               </div>
             </div>
             <div
-              class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+              class="euiFlexItem emotion-euiFlexItem-growZero"
             >
               <div
                 class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@@ -899,7 +841,7 @@ tr:hover .c3:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <div
-                              class="c10"
+                              class="css-fbtzpm"
                             >
                               Source
                             </div>
@@ -954,7 +896,7 @@ tr:hover .c3:focus::before {
                                                     tabindex="-1"
                                                   >
                                                     <span
-                                                      class="c11"
+                                                      class="c7"
                                                       data-test-subj="draggable-truncatable-content"
                                                     >
                                                       <a
@@ -985,7 +927,7 @@ tr:hover .c3:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c12"
+                                          class="css-7g9jn5"
                                           data-test-subj="ip-port-separator"
                                         >
                                           :
@@ -995,7 +937,7 @@ tr:hover .c3:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c13"
+                                          class="c8"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -1031,7 +973,7 @@ tr:hover .c3:focus::before {
                               class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                             >
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1083,7 +1025,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1135,7 +1077,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1144,7 +1086,7 @@ tr:hover .c3:focus::before {
                                     class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <span
-                                      class="c15"
+                                      class="css-19nn5cj"
                                       data-test-subj="country-flag"
                                     >
                                       🇺🇸
@@ -1197,7 +1139,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1249,7 +1191,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1308,7 +1250,7 @@ tr:hover .c3:focus::before {
                   </span>
                 </div>
                 <div
-                  class="euiFlexGroup c16 emotion-euiFlexGroup-none-center-center-column"
+                  class="euiFlexGroup emotion-euiFlexGroup-none-center-center-column"
                 >
                   <div
                     class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -1320,7 +1262,7 @@ tr:hover .c3:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c17"
+                          class="css-1io4upz"
                           height="2.8"
                         />
                       </div>
@@ -1361,10 +1303,10 @@ tr:hover .c3:focus::before {
                                     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                   >
                                     <div
-                                      class="euiText c18 emotion-euiText-xs"
+                                      class="euiText emotion-euiText-xs"
                                     >
                                       <span
-                                        class="c19"
+                                        class="css-2dse8b"
                                       >
                                         (60.00%)
                                       </span>
@@ -1383,7 +1325,7 @@ tr:hover .c3:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c17"
+                          class="css-1io4upz"
                           height="2.8"
                         />
                       </div>
@@ -1424,7 +1366,7 @@ tr:hover .c3:focus::before {
                                     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                   >
                                     <div
-                                      class="euiText c18 emotion-euiText-xs"
+                                      class="euiText emotion-euiText-xs"
                                     >
                                       <span>
                                         2 pkts
@@ -1441,7 +1383,7 @@ tr:hover .c3:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c17"
+                          class="css-1io4upz"
                           height="2.8"
                         />
                       </div>
@@ -1475,7 +1417,7 @@ tr:hover .c3:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c20"
+                          class="css-1almmfe"
                           height="2.2"
                         />
                       </div>
@@ -1524,10 +1466,10 @@ tr:hover .c3:focus::before {
                                             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                           >
                                             <div
-                                              class="euiText c18 emotion-euiText-xs"
+                                              class="euiText emotion-euiText-xs"
                                             >
                                               <span
-                                                class="c19"
+                                                class="css-2dse8b"
                                               >
                                                 (40.00%)
                                               </span>
@@ -1550,7 +1492,7 @@ tr:hover .c3:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c20"
+                          class="css-1almmfe"
                           height="2.2"
                         />
                       </div>
@@ -1591,7 +1533,7 @@ tr:hover .c3:focus::before {
                                     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                   >
                                     <div
-                                      class="euiText c18 emotion-euiText-xs"
+                                      class="euiText emotion-euiText-xs"
                                     >
                                       <span>
                                         1 pkts
@@ -1608,7 +1550,7 @@ tr:hover .c3:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c20"
+                          class="css-1almmfe"
                           height="2.2"
                         />
                       </div>
@@ -1637,7 +1579,7 @@ tr:hover .c3:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <div
-                              class="c10"
+                              class="css-fbtzpm"
                             >
                               Destination
                             </div>
@@ -1692,7 +1634,7 @@ tr:hover .c3:focus::before {
                                                     tabindex="-1"
                                                   >
                                                     <span
-                                                      class="c11"
+                                                      class="c7"
                                                       data-test-subj="draggable-truncatable-content"
                                                     >
                                                       <a
@@ -1723,7 +1665,7 @@ tr:hover .c3:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c12"
+                                          class="css-7g9jn5"
                                           data-test-subj="ip-port-separator"
                                         >
                                           :
@@ -1733,7 +1675,7 @@ tr:hover .c3:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c13"
+                                          class="c8"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -1769,7 +1711,7 @@ tr:hover .c3:focus::before {
                               class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                             >
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1821,7 +1763,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1873,7 +1815,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1882,7 +1824,7 @@ tr:hover .c3:focus::before {
                                     class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <span
-                                      class="c15"
+                                      class="css-19nn5cj"
                                       data-test-subj="country-flag"
                                     >
                                       🇺🇸
@@ -1935,7 +1877,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1987,7 +1929,7 @@ tr:hover .c3:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2110,7 +2052,7 @@ tr:hover .c3:focus::before {
                             class="euiBadge__text emotion-euiBadge__text"
                           >
                             <span
-                              class="c21"
+                              class="c9"
                             >
                               ja3
                             </span>
@@ -2195,7 +2137,7 @@ tr:hover .c3:focus::before {
                             class="euiBadge__text emotion-euiBadge__text"
                           >
                             <span
-                              class="c22"
+                              class="c10"
                             >
                               client cert
                             </span>
@@ -2280,7 +2222,7 @@ tr:hover .c3:focus::before {
                             class="euiBadge__text emotion-euiBadge__text"
                           >
                             <span
-                              class="c22"
+                              class="c10"
                             >
                               server cert
                             </span>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
index ba36ad1878592..6b6501e1e6857 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
@@ -16,8 +16,8 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c13,
-.c13 * {
+.c9,
+.c9 * {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
@@ -120,75 +120,17 @@ tr:hover .c5:focus::before {
   vertical-align: top;
 }
 
-.c15 svg {
+.c10 svg {
   position: relative;
   top: -1px;
 }
 
-.c24 {
-  margin-right: 5px;
-}
-
-.c23 {
-  margin-right: 5px;
-}
-
-.c9 {
-  margin-right: 3px;
-}
-
-.c10 {
-  margin: 0 5px;
-}
-
-.c19 {
-  background-color: #343741;
-  height: 2.8px;
-  width: 25px;
-}
-
-.c22 {
-  background-color: #343741;
-  height: 2.2px;
-  width: 25px;
-}
-
-.c21 {
-  margin-right: 5px;
-}
-
-.c18 {
-  margin: 0 2px;
-}
-
-.c18 .euiToolTipAnchor {
-  white-space: nowrap;
-}
-
-.c20 {
-  margin: 0 5px;
-}
-
-.c17 {
-  position: relative;
-  top: 1px;
-}
-
-.c16 {
-  margin-right: 5px;
-}
-
-.c14 {
-  margin: 0 3px;
-}
-
 .c12 {
-  font-weight: bold;
-  margin-top: 2px;
+  margin-right: 5px;
 }
 
 .c11 {
-  margin-top: 3px;
+  margin-right: 5px;
 }
 
 .c8 {
@@ -611,7 +553,7 @@ tr:hover .c5:focus::before {
                     class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
                   >
                     <div
-                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -683,7 +625,7 @@ tr:hover .c5:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -750,7 +692,7 @@ tr:hover .c5:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -791,7 +733,7 @@ tr:hover .c5:focus::before {
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c10 emotion-euiText-xs"
+                                    class="euiText emotion-euiText-xs"
                                   >
                                     <span>
                                       100B
@@ -810,7 +752,7 @@ tr:hover .c5:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -851,7 +793,7 @@ tr:hover .c5:focus::before {
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c10 emotion-euiText-xs"
+                                    class="euiText emotion-euiText-xs"
                                   >
                                     <span>
                                       3 pkts
@@ -870,7 +812,7 @@ tr:hover .c5:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -1006,7 +948,7 @@ tr:hover .c5:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@@ -1033,7 +975,7 @@ tr:hover .c5:focus::before {
                                 class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
-                                  class="c12"
+                                  class="css-fbtzpm"
                                 >
                                   Source
                                 </div>
@@ -1093,7 +1035,7 @@ tr:hover .c5:focus::before {
                                                           source.ip
                                                         </p>
                                                         <span
-                                                          class="c13"
+                                                          class="c9"
                                                           data-test-subj="draggable-truncatable-content"
                                                         >
                                                           <a
@@ -1129,7 +1071,7 @@ tr:hover .c5:focus::before {
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <span
-                                              class="c14"
+                                              class="css-7g9jn5"
                                               data-test-subj="ip-port-separator"
                                             >
                                               :
@@ -1185,7 +1127,7 @@ tr:hover .c5:focus::before {
                                                                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                                               >
                                                                 <div
-                                                                  class="c15"
+                                                                  class="c10"
                                                                 >
                                                                   <a
                                                                     class="euiLink emotion-euiLink-primary"
@@ -1236,7 +1178,7 @@ tr:hover .c5:focus::before {
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                                 >
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1298,7 +1240,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1360,7 +1302,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1369,7 +1311,7 @@ tr:hover .c5:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c17"
+                                          class="css-19nn5cj"
                                           data-test-subj="country-flag"
                                         >
                                           🇺🇸
@@ -1432,7 +1374,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1494,7 +1436,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1563,7 +1505,7 @@ tr:hover .c5:focus::before {
                       </span>
                     </div>
                     <div
-                      class="euiFlexGroup c18 emotion-euiFlexGroup-none-center-center-column"
+                      class="euiFlexGroup emotion-euiFlexGroup-none-center-center-column"
                     >
                       <div
                         class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -1575,7 +1517,7 @@ tr:hover .c5:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c19"
+                              class="css-1io4upz"
                               height="2.8"
                             />
                           </div>
@@ -1621,10 +1563,10 @@ tr:hover .c5:focus::before {
                                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                       >
                                         <div
-                                          class="euiText c20 emotion-euiText-xs"
+                                          class="euiText emotion-euiText-xs"
                                         >
                                           <span
-                                            class="c21"
+                                            class="css-2dse8b"
                                           >
                                             (60.00%)
                                           </span>
@@ -1648,7 +1590,7 @@ tr:hover .c5:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c19"
+                              class="css-1io4upz"
                               height="2.8"
                             />
                           </div>
@@ -1694,7 +1636,7 @@ tr:hover .c5:focus::before {
                                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                       >
                                         <div
-                                          class="euiText c20 emotion-euiText-xs"
+                                          class="euiText emotion-euiText-xs"
                                         >
                                           <span>
                                             2 pkts
@@ -1716,7 +1658,7 @@ tr:hover .c5:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c19"
+                              class="css-1io4upz"
                               height="2.8"
                             />
                           </div>
@@ -1750,7 +1692,7 @@ tr:hover .c5:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c22"
+                              class="css-1almmfe"
                               height="2.2"
                             />
                           </div>
@@ -1804,10 +1746,10 @@ tr:hover .c5:focus::before {
                                                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                               >
                                                 <div
-                                                  class="euiText c20 emotion-euiText-xs"
+                                                  class="euiText emotion-euiText-xs"
                                                 >
                                                   <span
-                                                    class="c21"
+                                                    class="css-2dse8b"
                                                   >
                                                     (40.00%)
                                                   </span>
@@ -1835,7 +1777,7 @@ tr:hover .c5:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c22"
+                              class="css-1almmfe"
                               height="2.2"
                             />
                           </div>
@@ -1881,7 +1823,7 @@ tr:hover .c5:focus::before {
                                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                       >
                                         <div
-                                          class="euiText c20 emotion-euiText-xs"
+                                          class="euiText emotion-euiText-xs"
                                         >
                                           <span>
                                             1 pkts
@@ -1903,7 +1845,7 @@ tr:hover .c5:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c22"
+                              class="css-1almmfe"
                               height="2.2"
                             />
                           </div>
@@ -1932,7 +1874,7 @@ tr:hover .c5:focus::before {
                                 class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
-                                  class="c12"
+                                  class="css-fbtzpm"
                                 >
                                   Destination
                                 </div>
@@ -1992,7 +1934,7 @@ tr:hover .c5:focus::before {
                                                           destination.ip
                                                         </p>
                                                         <span
-                                                          class="c13"
+                                                          class="c9"
                                                           data-test-subj="draggable-truncatable-content"
                                                         >
                                                           <a
@@ -2028,7 +1970,7 @@ tr:hover .c5:focus::before {
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <span
-                                              class="c14"
+                                              class="css-7g9jn5"
                                               data-test-subj="ip-port-separator"
                                             >
                                               :
@@ -2084,7 +2026,7 @@ tr:hover .c5:focus::before {
                                                                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                                               >
                                                                 <div
-                                                                  class="c15"
+                                                                  class="c10"
                                                                 >
                                                                   <a
                                                                     class="euiLink emotion-euiLink-primary"
@@ -2135,7 +2077,7 @@ tr:hover .c5:focus::before {
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                                 >
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2197,7 +2139,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2259,7 +2201,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2268,7 +2210,7 @@ tr:hover .c5:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c17"
+                                          class="css-19nn5cj"
                                           data-test-subj="country-flag"
                                         >
                                           🇺🇸
@@ -2331,7 +2273,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2393,7 +2335,7 @@ tr:hover .c5:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2531,7 +2473,7 @@ tr:hover .c5:focus::before {
                                 class="euiBadge__text emotion-euiBadge__text"
                               >
                                 <span
-                                  class="c23"
+                                  class="c11"
                                 >
                                   ja3
                                 </span>
@@ -2626,7 +2568,7 @@ tr:hover .c5:focus::before {
                                 class="euiBadge__text emotion-euiBadge__text"
                               >
                                 <span
-                                  class="c24"
+                                  class="c12"
                                 >
                                   client cert
                                 </span>
@@ -2721,7 +2663,7 @@ tr:hover .c5:focus::before {
                                 class="euiBadge__text emotion-euiBadge__text"
                               >
                                 <span
-                                  class="c24"
+                                  class="c12"
                                 >
                                   server cert
                                 </span>
diff --git a/x-pack/solutions/security/plugins/security_solution/tsconfig.json b/x-pack/solutions/security/plugins/security_solution/tsconfig.json
index 41a197b81dd71..9fa2d71e925fd 100644
--- a/x-pack/solutions/security/plugins/security_solution/tsconfig.json
+++ b/x-pack/solutions/security/plugins/security_solution/tsconfig.json
@@ -13,7 +13,8 @@
     "server/**/*.json",
     "scripts/**/*.json",
     "public/**/*.json",
-    "../../../../../typings/**/*"
+    "../../../../../typings/**/*",
+    "emotion.d.ts"
   ],
   "exclude": ["target/**/*", "**/cypress/**", "public/management/cypress.config.ts"],
   "kbn_references": [