diff --git a/tap/extensions/amqp/main.go b/tap/extensions/amqp/main.go
index 2842dc0a5..0246b4c90 100644
--- a/tap/extensions/amqp/main.go
+++ b/tap/extensions/amqp/main.go
@@ -13,7 +13,7 @@ var protocol api.Protocol = api.Protocol{
 	Abbreviation:    "AMQP",
 	BackgroundColor: "#ff6600",
 	ForegroundColor: "#ffffff",
-	FontSize:        10,
+	FontSize:        12,
 	ReferenceLink:   "https://www.rabbitmq.com/amqp-0-9-1-reference.html",
 	OutboundPorts:   []string{"5671", "5672"},
 	InboundPorts:    []string{},
diff --git a/tap/extensions/http/main.go b/tap/extensions/http/main.go
index ae500e543..317d821b5 100644
--- a/tap/extensions/http/main.go
+++ b/tap/extensions/http/main.go
@@ -21,7 +21,7 @@ var protocol api.Protocol = api.Protocol{
 	Abbreviation:    "HTTP",
 	BackgroundColor: "#205cf5",
 	ForegroundColor: "#ffffff",
-	FontSize:        10,
+	FontSize:        12,
 	ReferenceLink:   "https://datatracker.ietf.org/doc/html/rfc2616",
 	OutboundPorts:   []string{"80", "8080", "443"},
 	InboundPorts:    []string{},
@@ -29,11 +29,11 @@ var protocol api.Protocol = api.Protocol{
 
 var http2Protocol api.Protocol = api.Protocol{
 	Name:            "http",
-	LongName:        "Hypertext Transfer Protocol Version 2 (HTTP/2)",
+	LongName:        "Hypertext Transfer Protocol Version 2 (HTTP/2) (gRPC)",
 	Abbreviation:    "HTTP/2",
 	BackgroundColor: "#244c5a",
 	ForegroundColor: "#ffffff",
-	FontSize:        10,
+	FontSize:        12,
 	ReferenceLink:   "https://datatracker.ietf.org/doc/html/rfc7540",
 	OutboundPorts:   []string{"80", "8080", "443"},
 	InboundPorts:    []string{},
diff --git a/tap/extensions/kafka/main.go b/tap/extensions/kafka/main.go
index 59c1ac61a..b0a970fa1 100644
--- a/tap/extensions/kafka/main.go
+++ b/tap/extensions/kafka/main.go
@@ -13,7 +13,7 @@ var protocol api.Protocol = api.Protocol{
 	Abbreviation:    "KAFKA",
 	BackgroundColor: "#000000",
 	ForegroundColor: "#ffffff",
-	FontSize:        10,
+	FontSize:        12,
 	ReferenceLink:   "https://kafka.apache.org/protocol",
 	OutboundPorts:   []string{"9092"},
 	InboundPorts:    []string{},
diff --git a/ui/src/components/HarEntry.tsx b/ui/src/components/HarEntry.tsx
index aa854ab27..4fe3b1227 100644
--- a/ui/src/components/HarEntry.tsx
+++ b/ui/src/components/HarEntry.tsx
@@ -89,9 +89,9 @@ export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isS
             <div className={styles.directionContainer}>
                 <span className={styles.port} title="Source Port">{entry.source_port}</span>
                 {entry.isOutgoing ?
-                    <img src={outgoingIcon} alt="Outgoing traffic" title="Outgoing"/>
+                    <img src={outgoingIcon} alt="Ingoing traffic" title="Ingoing"/>
                     :
-                    <img src={ingoingIcon} alt="Ingoing traffic" title="Ingoing"/>
+                    <img src={ingoingIcon} alt="Outgoing traffic" title="Outgoing"/>
                 }
                 <span className={styles.port} title="Destination Port">{entry.destination_port}</span>
             </div>
diff --git a/ui/src/components/HarEntryDetailed.tsx b/ui/src/components/HarEntryDetailed.tsx
index 0482f7b8d..cefa7e57a 100644
--- a/ui/src/components/HarEntryDetailed.tsx
+++ b/ui/src/components/HarEntryDetailed.tsx
@@ -77,7 +77,7 @@ export const HAREntryDetailed: React.FC<HarEntryDetailedProps> = ({classes, harE
         <HarEntryTitle protocol={harEntry.protocol} har={har}/>
         {har && <HarEntrySummary har={har}/>}
         <>
-            {har && <HAREntryViewer representation={harEntry.representation}/>}
+            {har && <HAREntryViewer representation={harEntry.representation} color={harEntry.protocol.background_color}/>}
         </>
     </>
 };
diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.tsx b/ui/src/components/HarEntryViewer/HAREntrySections.tsx
index b6fa6d549..66c20ea07 100644
--- a/ui/src/components/HarEntryViewer/HAREntrySections.tsx
+++ b/ui/src/components/HarEntryViewer/HAREntrySections.tsx
@@ -29,13 +29,14 @@ const HAREntryViewLine: React.FC<HAREntryViewLineProps> = ({label, value}) => {
 
 
 interface HAREntrySectionCollapsibleTitleProps {
-    title: string;
-    isExpanded: boolean;
+    title: string,
+    color: string,
+    isExpanded: boolean,
 }
 
-const HAREntrySectionCollapsibleTitle: React.FC<HAREntrySectionCollapsibleTitleProps> = ({title, isExpanded}) => {
+const HAREntrySectionCollapsibleTitle: React.FC<HAREntrySectionCollapsibleTitleProps> = ({title, color, isExpanded}) => {
     return <div className={styles.title}>
-        <span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`}>
+        <span className={`${styles.button} ${isExpanded ? styles.expanded : ''}`} style={{backgroundColor: color}}>
             {isExpanded ? '-' : '+'}
         </span>
         <span>{title}</span>
@@ -43,32 +44,35 @@ const HAREntrySectionCollapsibleTitle: React.FC<HAREntrySectionCollapsibleTitleP
 }
 
 interface HAREntrySectionContainerProps {
-    title: string;
+    title: string,
+    color: string,
 }
 
-export const HAREntrySectionContainer: React.FC<HAREntrySectionContainerProps> = ({title, children}) => {
+export const HAREntrySectionContainer: React.FC<HAREntrySectionContainerProps> = ({title, color, children}) => {
     const [expanded, setExpanded] = useState(true);
     return <CollapsibleContainer
         className={styles.collapsibleContainer}
         isExpanded={expanded}
         onClick={() => setExpanded(!expanded)}
-        title={<HAREntrySectionCollapsibleTitle title={title} isExpanded={expanded}/>}
+        title={<HAREntrySectionCollapsibleTitle title={title} color={color} isExpanded={expanded}/>}
     >
         {children}
     </CollapsibleContainer>
 }
 
 interface HAREntryBodySectionProps {
-    content: any;
-    encoding?: string;
-    contentType?: string;
+    content: any,
+    color: string,
+    encoding?: string,
+    contentType?: string,
 }
 
 export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
-                                                                            content,
-                                                                            encoding,
-                                                                            contentType,
-                                                                        }) => {
+    color,
+    content,
+    encoding,
+    contentType,
+}) => {
     const MAXIMUM_BYTES_TO_HIGHLIGHT = 10000; // The maximum of chars to highlight in body, in case the response can be megabytes
     const supportedLanguages = [['html', 'html'], ['json', 'json'], ['application/grpc', 'json']]; // [[indicator, languageToUse],...]
     const jsonLikeFormats = ['json'];
@@ -101,7 +105,7 @@ export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
     }
 
     return <React.Fragment>
-        {content && content?.length > 0 && <HAREntrySectionContainer title='Body'>
+        {content && content?.length > 0 && <HAREntrySectionContainer title='Body' color={color}>
             <table>
                 <tbody>
                     <HAREntryViewLine label={'Mime type'} value={contentType}/>
@@ -127,14 +131,15 @@ export const HAREntryBodySection: React.FC<HAREntryBodySectionProps> = ({
 
 interface HAREntrySectionProps {
     title: string,
+    color: string,
     arrayToIterate: any[],
 }
 
-export const HAREntryTableSection: React.FC<HAREntrySectionProps> = ({title, arrayToIterate}) => {
+export const HAREntryTableSection: React.FC<HAREntrySectionProps> = ({title, color, arrayToIterate}) => {
     return <React.Fragment>
         {
             arrayToIterate && arrayToIterate.length > 0 ?
-                <HAREntrySectionContainer title={title}>
+                <HAREntrySectionContainer title={title} color={color}>
                     <table>
                         <tbody>
                             {arrayToIterate.map(({name, value}, index) => <HAREntryViewLine key={index} label={name}
@@ -151,6 +156,7 @@ export const HAREntryTableSection: React.FC<HAREntrySectionProps> = ({title, arr
 interface HAREntryPolicySectionProps {
     service: string,
     title: string,
+    color: string,
     response: any,
     latency?: number,
     arrayToIterate: any[],
@@ -195,13 +201,13 @@ export const HAREntryPolicySectionContainer: React.FC<HAREntryPolicySectionConta
     </CollapsibleContainer>
 }
 
-export const HAREntryTablePolicySection: React.FC<HAREntryPolicySectionProps> = ({service, title, response, latency, arrayToIterate}) => {
+export const HAREntryTablePolicySection: React.FC<HAREntryPolicySectionProps> = ({service, title, color, response, latency, arrayToIterate}) => {
     const base64ToJson = response.content.mimeType === "application/json; charset=utf-8" ? JSON.parse(Buffer.from(response.content.text, "base64").toString()) : {};
     return <React.Fragment>
         {
             arrayToIterate && arrayToIterate.length > 0 ?
                 <>
-                <HAREntrySectionContainer title={title}>
+                <HAREntrySectionContainer title={title} color={color}>
                     <table>
                         <tbody>
                             {arrayToIterate.map(({rule, matched}, index) => {
diff --git a/ui/src/components/HarEntryViewer/HAREntryViewer.tsx b/ui/src/components/HarEntryViewer/HAREntryViewer.tsx
index 5aad2a1bf..e96d5ca9c 100644
--- a/ui/src/components/HarEntryViewer/HAREntryViewer.tsx
+++ b/ui/src/components/HarEntryViewer/HAREntryViewer.tsx
@@ -3,19 +3,19 @@ import styles from './HAREntryViewer.module.sass';
 import Tabs from "../Tabs";
 import {HAREntryTableSection, HAREntryBodySection, HAREntryTablePolicySection} from "./HAREntrySections";
 
-const SectionsRepresentation: React.FC<any> = ({data}) => {
+const SectionsRepresentation: React.FC<any> = ({data, color}) => {
     const sections = []
 
     for (const [i, row] of data.entries()) {
         switch (row.type) {
             case "table":
                 sections.push(
-                    <HAREntryTableSection title={row.title} arrayToIterate={JSON.parse(row.data)}/>
+                    <HAREntryTableSection title={row.title} color={color} arrayToIterate={JSON.parse(row.data)}/>
                 )
                 break;
             case "body":
                 sections.push(
-                    <HAREntryBodySection content={row.data} encoding={row.encoding} contentType={row.mime_type}/>
+                    <HAREntryBodySection color={color} content={row.data} encoding={row.encoding} contentType={row.mime_type}/>
                 )
                 break;
             default:
@@ -26,8 +26,7 @@ const SectionsRepresentation: React.FC<any> = ({data}) => {
     return <>{sections}</>;
 }
 
-const AutoRepresentation: React.FC<any> = ({representation, isResponseMocked}) => {
-    console.log(representation)
+const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMocked}) => {
     const {request, response} = JSON.parse(representation);
 
     const rulesMatched = []
@@ -47,18 +46,18 @@ const AutoRepresentation: React.FC<any> = ({representation, isResponseMocked}) =
     return <div className={styles.harEntry}>
         {<div className={styles.body}>
             <div className={styles.bodyHeader}>
-                <Tabs tabs={TABS} currentTab={currentTab} onChange={setCurrentTab} leftAligned/>
+                <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned/>
                 {request?.url && <a className={styles.endpointURL} href={request.payload.url} target='_blank' rel="noreferrer">{request.payload.url}</a>}
             </div>
             {currentTab === TABS[0].tab && <React.Fragment>
-                <SectionsRepresentation data={request}/>
+                <SectionsRepresentation data={request} color={color}/>
             </React.Fragment>}
             {currentTab === TABS[1].tab && <React.Fragment>
-                <SectionsRepresentation data={response}/>
+                <SectionsRepresentation data={response} color={color}/>
             </React.Fragment>}
             {currentTab === TABS[2].tab && <React.Fragment>
                 {// FIXME: Fix here
-                <HAREntryTablePolicySection service={representation.log.entries[0].service} title={'Rule'} latency={0} response={response} arrayToIterate={rulesMatched ? rulesMatched : []}/>}
+                <HAREntryTablePolicySection service={representation.log.entries[0].service} title={'Rule'} color={color} latency={0} response={response} arrayToIterate={rulesMatched ? rulesMatched : []}/>}
             </React.Fragment>}
         </div>}
     </div>;
@@ -66,12 +65,13 @@ const AutoRepresentation: React.FC<any> = ({representation, isResponseMocked}) =
 
 interface Props {
     representation: any;
+    color: string,
     isResponseMocked?: boolean;
     showTitle?: boolean;
 }
 
-const HAREntryViewer: React.FC<Props> = ({representation, isResponseMocked, showTitle=true}) => {
-    return <AutoRepresentation representation={representation} isResponseMocked={isResponseMocked} showTitle={showTitle}/>
+const HAREntryViewer: React.FC<Props> = ({representation, color, isResponseMocked, showTitle=true}) => {
+    return <AutoRepresentation representation={representation} color={color} isResponseMocked={isResponseMocked} showTitle={showTitle}/>
 };
 
 export default HAREntryViewer;
diff --git a/ui/src/components/Protocol.tsx b/ui/src/components/Protocol.tsx
index a04ca4fec..7928e7853 100644
--- a/ui/src/components/Protocol.tsx
+++ b/ui/src/components/Protocol.tsx
@@ -26,7 +26,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
                 style={{
                     backgroundColor: protocol.background_color,
                     color: protocol.foreground_color,
-                    fontSize: protocol.font_size * 1.3,
+                    fontSize: protocol.font_size * 1.1,
                 }}
                 title={protocol.abbreviation}
             >
diff --git a/ui/src/components/Tabs.tsx b/ui/src/components/Tabs.tsx
index 14f4e60e5..deec61adb 100644
--- a/ui/src/components/Tabs.tsx
+++ b/ui/src/components/Tabs.tsx
@@ -16,6 +16,7 @@ interface Props {
     classes?: any,
     tabs: Tab[],
     currentTab: string,
+    color: string,
     onChange: (string) => void,
     leftAligned?: boolean,
     dark?: boolean,
@@ -28,7 +29,7 @@ const useTabsStyles = makeStyles((theme) => ({
         paddingTop: 15
     },
 
-    tab: { 
+    tab: {
         display: 'inline-block',
         textTransform: 'uppercase',
         color: variables.blueColor,
@@ -71,7 +72,7 @@ const useTabsStyles = makeStyles((theme) => ({
 }));
 
 
-const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAligned, dark}) => {
+const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, color, onChange, leftAligned, dark}) => {
     const _classes = {...useTabsStyles(), ...classes};
     return <div className={`${_classes.root} ${leftAligned ? _classes.tabsAlignLeft : ''}`}>
         {tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
@@ -80,6 +81,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
                 key={tab}
                 className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`}
                 onClick={() => !disabled && onChange(tab)}
+                style={{color: color}}
             >
                 {tab}
 
@@ -94,4 +96,4 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
     </div>;
 }
 
-export default Tabs;
\ No newline at end of file
+export default Tabs;
diff --git a/ui/src/components/style/Protocol.module.sass b/ui/src/components/style/Protocol.module.sass
index 0790c0f67..e98b2d9f8 100644
--- a/ui/src/components/style/Protocol.module.sass
+++ b/ui/src/components/style/Protocol.module.sass
@@ -5,7 +5,6 @@
     text-align: center
     font-size: 10px
     font-weight: 600
-    // letter-spacing: 2px;
     background-color: #000
     color: #fff
     margin-left: -8px;
@@ -13,12 +12,13 @@
 
 .vertical
     line-height: 22px
+    letter-spacing: 0.5px;
     width: 22px
     height: 48px
-    border-radius: 4px 0 0 4px
+    border-radius: 0px 4px 4px 0
     writing-mode: vertical-lr;
-    // transform: rotate(-180deg);
-    text-orientation: upright;
+    transform: rotate(-180deg);
+    text-orientation: mixed;
 
 .horizontal
     border-radius: 4px