diff --git a/frontend/src/modules/Traces/SelectedSpanDetails.tsx b/frontend/src/modules/Traces/SelectedSpanDetails.tsx
index 96a350e7d2..735a1361e4 100644
--- a/frontend/src/modules/Traces/SelectedSpanDetails.tsx
+++ b/frontend/src/modules/Traces/SelectedSpanDetails.tsx
@@ -1,95 +1,101 @@
 import React from "react";
 import { Card, Space, Tabs, Typography } from "antd";
 import styled from "styled-components";
-import { pushDStree } from "../../store/actions";
+import { pushDStree } from "Src/store/actions";
 
 const { TabPane } = Tabs;
 
-const { Text } = Typography;
+const { Text, Title, Paragraph } = Typography;
 
 interface SelectedSpanDetailsProps {
-	data: pushDStree
+	data: pushDStree;
 }
 
-const Title = styled(Text)`
- color: "#2D9CDB", 
- fontSize: '12px',
+// Check this discussion for antd with styled components
+// https://gist.github.com/newswim/fa916c66477ddd5952f7d6548e6a0605
+
+const CustomTitle = styled(Title)`
+	&&& {
+		color: #f2f2f2;
+		font-size: 14px;
+	}
+`;
+
+const CustomText = styled(Text)`
+	&&& {
+		color: #2d9cdb;
+		font-size: 14px;
+	}
+`;
+
+const CustomSubTitle = styled(Title)`
+	&&& {
+		color: #bdbdbd;
+		font-size: 14px;
+		margin-bottom: 8px;
+	}
+`;
+
+const CustomSubText = styled(Paragraph)`
+	&&& {
+		background: #4f4f4f;
+		color: #2d9cdb;
+		font-size: 12px;
+		padding: 6px 8px;
+		word-break: break-all;
+		margin-bottom: 16px;
+	}
 `;
 
 const SelectedSpanDetails = (props: SelectedSpanDetailsProps) => {
-
-	let spanTags = props.data.tags;
-	let service = props.data?.name?.split(":")[0];
-	let operation = props.data?.name?.split(":")[1];
+	const spanTags = props.data.tags;
+	const service = props.data?.name?.split(":")[0];
+	const operation = props.data?.name?.split(":")[1];
 
 	return (
-		<Card style={{ border: "none", background: "transparent", padding: 0 }} bodyStyle={{ padding: 0 }}>
+		<Card
+			style={{ border: "none", background: "transparent", padding: 0 }}
+			bodyStyle={{ padding: 0 }}
+		>
 			<Space direction="vertical">
-
 				<strong> Details for selected Span </strong>
 				<Space direction="vertical" size={2}>
-					<Text style={{ marginTop: "18px" }}>
-						Service
-					</Text>
-					<Title style={{ color: "#2D9CDB", fontSize: "12px" }}>
-						{service}
-					</Title>
+					<CustomTitle style={{ marginTop: "18px" }}>Service</CustomTitle>
+					<CustomText>{service}</CustomText>
 				</Space>
 				<Space direction="vertical" size={2}>
-					<Text>
-						Operation
-					</Text>
-					<Text style={{ color: "#2D9CDB", fontSize: "12px" }}>
-						{operation}
-					</Text>
+					<CustomTitle>Operation</CustomTitle>
+					<CustomText>{operation}</CustomText>
 				</Space>
 			</Space>
 			<Tabs defaultActiveKey="1">
 				<TabPane tab="Tags" key="1">
-					{spanTags && spanTags.map((tags, index) => {
-						return (
-							<>
-								{tags.value && (
-									<>
-										<Text style={{ color: "#BDBDBD", fontSize: "12px", marginBottom: "8px" }}>
-											{tags.key}
-										</Text>
-										<div style={{
-											background: "#4F4F4F",
-											color: "#2D9CDB",
-											fontSize: "12px",
-											padding: "6px 8px",
-											wordBreak: "break-all",
-											marginBottom: "16px",
-										}}>
-											{tags.key === "error" ? "true" : tags.value}
-										</div>
-									</>
-								)}
-							</>
-						);
-					})}
+					{spanTags &&
+						spanTags.map((tags, index) => {
+							return (
+								<>
+									{tags.value && (
+										<>
+											<CustomSubTitle>{tags.key}</CustomSubTitle>
+											<CustomSubText>
+												{tags.key === "error" ? "true" : tags.value}
+											</CustomSubText>
+										</>
+									)}
+								</>
+							);
+						})}
 				</TabPane>
 				<TabPane tab="Errors" key="2">
-					{spanTags && spanTags
-						.filter((tags) => tags.key === "error")
-						.map((error) => (
-							<>
-								<Text style={{ color: "#BDBDBD", fontSize: "12px", marginBottom: "8px" }}>
-									{error.key}
-								</Text>
-								<div style={{
-									background: "#4F4F4F",
-									color: "#2D9CDB",
-									fontSize: "12px",
-									padding: "6px 8px",
-									wordBreak: "break-all",
-									marginBottom: "16px",
-								}}>
-									true
-								</div>
-							</>
-						))}
+					{spanTags &&
+						spanTags
+							.filter((tags) => tags.key === "error")
+							.map((error) => (
+								<>
+									<CustomSubTitle>{error.key}</CustomSubTitle>
+									<CustomSubText>true</CustomSubText>
+								</>
+							))}
 				</TabPane>
 			</Tabs>
 		</Card>