diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
index 0fc99e5ee53fa..2b1775bdb9e1d 100644
--- a/packages/kbn-babel-preset/styled_components_files.js
+++ b/packages/kbn-babel-preset/styled_components_files.js
@@ -401,26 +401,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 f6f025a60d229..c6e251a640a59 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 ecc40a6243d5e..27563b76454cf 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 e0f17103fbeb8..c2d8393ec2bf7 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 47c27aa542457..ac1e0804b1701 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 b827648445f7e..600fc7c299c14 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 7e781c2f94ce8..8a72071609b5e 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
@@ -10,75 +10,17 @@ exports[`Netflow renders correctly against snapshot 1`] = `
   display: inline-block;
 }
 
-.c8 svg {
+.c3 svg {
   position: relative;
   top: -1px;
 }
 
-.c17 {
-  margin-right: 5px;
-}
-
-.c16 {
-  margin-right: 5px;
-}
-
-.c10 {
-  position: relative;
-  top: 1px;
-}
-
-.c9 {
-  margin-right: 5px;
-}
-
-.c12 {
-  background-color: #343741;
-  height: 2.8px;
-  width: 25px;
-}
-
-.c15 {
-  background-color: #343741;
-  height: 2.2px;
-  width: 25px;
-}
-
-.c14 {
+.c5 {
   margin-right: 5px;
 }
 
-.c11 {
-  margin: 0 2px;
-}
-
-.c11 .euiToolTipAnchor {
-  white-space: nowrap;
-}
-
-.c13 {
-  margin: 0 5px;
-}
-
-.c3 {
-  margin-right: 3px;
-}
-
 .c4 {
-  margin: 0 5px;
-}
-
-.c7 {
-  margin: 0 3px;
-}
-
-.c6 {
-  font-weight: bold;
-  margin-top: 2px;
-}
-
-.c5 {
-  margin-top: 3px;
+  margin-right: 5px;
 }
 
 .c2 {
@@ -316,7 +258,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                 class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
               >
                 <div
-                  class="euiFlexItem c3 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     data-provider-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
@@ -353,7 +295,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c3 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     data-provider-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
@@ -385,7 +327,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c3 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     data-provider-id="draggableId.content.network-default-draggable-test-abcd-network_bytes-100"
@@ -399,7 +341,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                       >
                         <div
-                          class="euiText c4 emotion-euiText-xs"
+                          class="euiText emotion-euiText-xs"
                         >
                           <span>
                             100B
@@ -410,7 +352,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c3 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     data-provider-id="draggableId.content.network-default-draggable-test-abcd-network_packets-3"
@@ -424,7 +366,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                       >
                         <div
-                          class="euiText c4 emotion-euiText-xs"
+                          class="euiText emotion-euiText-xs"
                         >
                           <span>
                             3 pkts
@@ -435,7 +377,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c3 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     data-provider-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
@@ -501,7 +443,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
               </div>
             </div>
             <div
-              class="euiFlexItem c5 emotion-euiFlexItem-growZero"
+              class="euiFlexItem emotion-euiFlexItem-growZero"
             >
               <div
                 class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@@ -528,7 +470,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <div
-                              class="c6"
+                              class="css-fbtzpm"
                             >
                               Source
                             </div>
@@ -567,7 +509,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c7"
+                                          class="css-7g9jn5"
                                           data-test-subj="ip-port-separator"
                                         >
                                           :
@@ -577,7 +519,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c8"
+                                          class="c3"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -613,7 +555,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                               class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                             >
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -640,7 +582,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -667,7 +609,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -676,7 +618,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                     class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <span
-                                      class="c10"
+                                      class="css-19nn5cj"
                                       data-test-subj="country-flag"
                                     >
                                       🇺🇸
@@ -704,7 +646,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -731,7 +673,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -765,7 +707,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                   </span>
                 </div>
                 <div
-                  class="euiFlexGroup c11 emotion-euiFlexGroup-none-center-center-column"
+                  class="euiFlexGroup emotion-euiFlexGroup-none-center-center-column"
                 >
                   <div
                     class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -777,7 +719,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c12"
+                          class="css-1io4upz"
                           height="2.8"
                         />
                       </div>
@@ -796,10 +738,10 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c13 emotion-euiText-xs"
+                                class="euiText emotion-euiText-xs"
                               >
                                 <span
-                                  class="c14"
+                                  class="css-2dse8b"
                                 >
                                   (60.00%)
                                 </span>
@@ -815,7 +757,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c12"
+                          class="css-1io4upz"
                           height="2.8"
                         />
                       </div>
@@ -834,7 +776,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c13 emotion-euiText-xs"
+                                class="euiText emotion-euiText-xs"
                               >
                                 <span>
                                   2 pkts
@@ -848,7 +790,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c12"
+                          class="css-1io4upz"
                           height="2.8"
                         />
                       </div>
@@ -882,7 +824,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c15"
+                          class="css-1almmfe"
                           height="2.2"
                         />
                       </div>
@@ -909,10 +851,10 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                       class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                     >
                                       <div
-                                        class="euiText c13 emotion-euiText-xs"
+                                        class="euiText emotion-euiText-xs"
                                       >
                                         <span
-                                          class="c14"
+                                          class="css-2dse8b"
                                         >
                                           (40.00%)
                                         </span>
@@ -932,7 +874,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c15"
+                          class="css-1almmfe"
                           height="2.2"
                         />
                       </div>
@@ -951,7 +893,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c13 emotion-euiText-xs"
+                                class="euiText emotion-euiText-xs"
                               >
                                 <span>
                                   1 pkts
@@ -965,7 +907,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c15"
+                          class="css-1almmfe"
                           height="2.2"
                         />
                       </div>
@@ -994,7 +936,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <div
-                              class="c6"
+                              class="css-fbtzpm"
                             >
                               Destination
                             </div>
@@ -1033,7 +975,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c7"
+                                          class="css-7g9jn5"
                                           data-test-subj="ip-port-separator"
                                         >
                                           :
@@ -1043,7 +985,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c8"
+                                          class="c3"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -1079,7 +1021,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                               class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                             >
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1106,7 +1048,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1133,7 +1075,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1142,7 +1084,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                     class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <span
-                                      class="c10"
+                                      class="css-19nn5cj"
                                       data-test-subj="country-flag"
                                     >
                                       🇺🇸
@@ -1170,7 +1112,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1197,7 +1139,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c9 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1273,7 +1215,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                       class="euiBadge__text emotion-euiBadge__text"
                     >
                       <span
-                        class="c16"
+                        class="c4"
                       >
                         ja3
                       </span>
@@ -1333,7 +1275,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                       class="euiBadge__text emotion-euiBadge__text"
                     >
                       <span
-                        class="c17"
+                        class="c5"
                       >
                         client cert
                       </span>
@@ -1393,7 +1335,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                       class="euiBadge__text emotion-euiBadge__text"
                     >
                       <span
-                        class="c17"
+                        class="c5"
                       >
                         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 f3c0ade04d197..9d967072d0395 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
@@ -24,77 +24,19 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
   display: inline-block;
 }
 
-.c10 svg {
+.c5 svg {
   position: relative;
   top: -1px;
 }
 
-.c19 {
-  margin-right: 5px;
-}
-
-.c18 {
+.c7 {
   margin-right: 5px;
 }
 
-.c5 {
-  margin-right: 3px;
-}
-
 .c6 {
-  margin: 0 5px;
-}
-
-.c14 {
-  background-color: #343741;
-  height: 2.8px;
-  width: 25px;
-}
-
-.c17 {
-  background-color: #343741;
-  height: 2.2px;
-  width: 25px;
-}
-
-.c16 {
-  margin-right: 5px;
-}
-
-.c13 {
-  margin: 0 2px;
-}
-
-.c13 .euiToolTipAnchor {
-  white-space: nowrap;
-}
-
-.c15 {
-  margin: 0 5px;
-}
-
-.c12 {
-  position: relative;
-  top: 1px;
-}
-
-.c11 {
   margin-right: 5px;
 }
 
-.c9 {
-  margin: 0 3px;
-}
-
-.c8 {
-  font-weight: bold;
-  margin-top: 2px;
-}
-
-.c7 {
-  margin-top: 3px;
-}
-
 .c4 {
   margin-right: 3px;
   position: relative;
@@ -340,7 +282,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                     class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
                   >
                     <div
-                      class="euiFlexItem c5 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         data-provider-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
@@ -377,7 +319,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c5 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         data-provider-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
@@ -409,7 +351,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c5 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         data-provider-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
@@ -423,7 +365,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                           >
                             <div
-                              class="euiText c6 emotion-euiText-xs"
+                              class="euiText emotion-euiText-xs"
                             >
                               <span>
                                 100B
@@ -434,7 +376,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c5 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         data-provider-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
@@ -448,7 +390,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                           >
                             <div
-                              class="euiText c6 emotion-euiText-xs"
+                              class="euiText emotion-euiText-xs"
                             >
                               <span>
                                 3 pkts
@@ -459,7 +401,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c5 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem emotion-euiFlexItem-growZero"
                     >
                       <div
                         data-provider-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
@@ -525,7 +467,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@@ -552,7 +494,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                 class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
-                                  class="c8"
+                                  class="css-fbtzpm"
                                 >
                                   Source
                                 </div>
@@ -591,7 +533,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <span
-                                              class="c9"
+                                              class="css-7g9jn5"
                                               data-test-subj="ip-port-separator"
                                             >
                                               :
@@ -601,7 +543,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <div
-                                              class="c10"
+                                              class="c5"
                                             >
                                               <a
                                                 class="euiLink emotion-euiLink-primary"
@@ -637,7 +579,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                                 >
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -664,7 +606,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -691,7 +633,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -700,7 +642,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c12"
+                                          class="css-19nn5cj"
                                           data-test-subj="country-flag"
                                         >
                                           🇺🇸
@@ -728,7 +670,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -755,7 +697,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -789,7 +731,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                       </span>
                     </div>
                     <div
-                      class="euiFlexGroup c13 emotion-euiFlexGroup-none-center-center-column"
+                      class="euiFlexGroup emotion-euiFlexGroup-none-center-center-column"
                     >
                       <div
                         class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -801,7 +743,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c14"
+                              class="css-1io4upz"
                               height="2.8"
                             />
                           </div>
@@ -820,10 +762,10 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c15 emotion-euiText-xs"
+                                    class="euiText emotion-euiText-xs"
                                   >
                                     <span
-                                      class="c16"
+                                      class="css-2dse8b"
                                     >
                                       (60.00%)
                                     </span>
@@ -839,7 +781,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c14"
+                              class="css-1io4upz"
                               height="2.8"
                             />
                           </div>
@@ -858,7 +800,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c15 emotion-euiText-xs"
+                                    class="euiText emotion-euiText-xs"
                                   >
                                     <span>
                                       2 pkts
@@ -872,7 +814,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c14"
+                              class="css-1io4upz"
                               height="2.8"
                             />
                           </div>
@@ -906,7 +848,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c17"
+                              class="css-1almmfe"
                               height="2.2"
                             />
                           </div>
@@ -933,10 +875,10 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                         >
                                           <div
-                                            class="euiText c15 emotion-euiText-xs"
+                                            class="euiText emotion-euiText-xs"
                                           >
                                             <span
-                                              class="c16"
+                                              class="css-2dse8b"
                                             >
                                               (40.00%)
                                             </span>
@@ -956,7 +898,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c17"
+                              class="css-1almmfe"
                               height="2.2"
                             />
                           </div>
@@ -975,7 +917,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c15 emotion-euiText-xs"
+                                    class="euiText emotion-euiText-xs"
                                   >
                                     <span>
                                       1 pkts
@@ -989,7 +931,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c17"
+                              class="css-1almmfe"
                               height="2.2"
                             />
                           </div>
@@ -1018,7 +960,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                 class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
-                                  class="c8"
+                                  class="css-fbtzpm"
                                 >
                                   Destination
                                 </div>
@@ -1057,7 +999,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <span
-                                              class="c9"
+                                              class="css-7g9jn5"
                                               data-test-subj="ip-port-separator"
                                             >
                                               :
@@ -1067,7 +1009,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <div
-                                              class="c10"
+                                              class="c5"
                                             >
                                               <a
                                                 class="euiLink emotion-euiLink-primary"
@@ -1103,7 +1045,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                                 >
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1130,7 +1072,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1157,7 +1099,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1166,7 +1108,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c12"
+                                          class="css-19nn5cj"
                                           data-test-subj="country-flag"
                                         >
                                           🇺🇸
@@ -1194,7 +1136,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1221,7 +1163,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c11 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1297,7 +1239,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                           class="euiBadge__text emotion-euiBadge__text"
                         >
                           <span
-                            class="c18"
+                            class="c6"
                           >
                             ja3
                           </span>
@@ -1357,7 +1299,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                           class="euiBadge__text emotion-euiBadge__text"
                         >
                           <span
-                            class="c19"
+                            class="c7"
                           >
                             client cert
                           </span>
@@ -1417,7 +1359,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                           class="euiBadge__text emotion-euiBadge__text"
                         >
                           <span
-                            class="c19"
+                            class="c7"
                           >
                             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": [