diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
index ab88a8d7dc..0d84d45136 100644
--- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
@@ -30,7 +30,9 @@ import {
 } from './util';
 
 function DBCall(): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+
+	const servicename = decodeURIComponent(encodedServiceName);
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 	const { queries } = useResourceAttribute();
 
diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx
index 48e4f24b4c..707675ec1d 100644
--- a/frontend/src/container/MetricsApplication/Tabs/External.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx
@@ -32,7 +32,9 @@ import {
 function External(): JSX.Element {
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+
+	const servicename = decodeURIComponent(encodedServiceName);
 	const { queries } = useResourceAttribute();
 
 	const tagFilterItems = useMemo(
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index 032c3c0cb8..1fde8d0919 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -52,7 +52,8 @@ function Application(): JSX.Element {
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
 	const [selectedTimeStamp, setSelectedTimeStamp] = useState<number>(0);
 	const { search, pathname } = useLocation();
 	const { queries } = useResourceAttribute();
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
index 77eb42d676..abfaf52d58 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
@@ -32,7 +32,8 @@ function ApDexMetrics({
 	topLevelOperationsRoute,
 	handleGraphClick,
 }: ApDexMetricsProps): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
 
 	const apDexMetricsWidget = useMemo(
 		() =>
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx
index 3ee5fbf7d8..9241f82938 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx
@@ -15,7 +15,9 @@ function ApDexMetricsApplication({
 	thresholdValue,
 	topLevelOperationsRoute,
 }: ApDexDataSwitcherProps): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
+
 	const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename);
 	useErrorNotification(error);
 
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
index 294560b752..65ebe130a9 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
@@ -21,7 +21,8 @@ function ApDexTraces({
 	tagFilterItems,
 	thresholdValue,
 }: ApDexDataSwitcherProps): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
 
 	const apDexTracesWidget = useMemo(
 		() =>
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
index d5e33435d8..140b6d1409 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
@@ -15,7 +15,9 @@ function ApDexApplication({
 	topLevelOperationsRoute,
 	tagFilterItems,
 }: ApDexApplicationProps): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
+
 	const { data, isLoading, error, isRefetching } = useGetApDexSettings(
 		servicename,
 	);
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
index 435d7b26b4..cbf4dacc58 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
@@ -30,7 +30,8 @@ function ServiceOverview({
 	topLevelOperationsRoute,
 	topLevelOperationsIsLoading,
 }: ServiceOverviewProps): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
 
 	const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS)
 		?.active;
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx
index d2124a7a1f..1b11d199cd 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx
@@ -15,7 +15,11 @@ function TopOperation(): JSX.Element {
 	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
-	const { servicename } = useParams<{ servicename?: string }>();
+	const { servicename: encodedServiceName } = useParams<{
+		servicename?: string;
+	}>();
+	const servicename = decodeURIComponent(encodedServiceName || '');
+
 	const { queries } = useResourceAttribute();
 	const selectedTags = useMemo(
 		() => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [],
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx
index 090d10e808..6b9ab4ee72 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx
@@ -24,7 +24,8 @@ import ColumnWithLink from './TableRenderer/ColumnWithLink';
 import { getTableColumnRenderer } from './TableRenderer/TableColumnRenderer';
 
 function TopOperationMetrics(): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
 
 	const { notifications } = useNotifications();
 
diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
index 107c9cb50b..3042db8958 100644
--- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
@@ -26,7 +26,9 @@ function TopOperationsTable({
 	isLoading,
 }: TopOperationsTableProps): JSX.Element {
 	const searchInput = useRef<InputRef>(null);
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+
+	const servicename = decodeURIComponent(encodedServiceName);
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
 		(state) => state.globalTime,
 	);
@@ -39,7 +41,8 @@ function TopOperationsTable({
 	const params = useParams<{ servicename: string }>();
 
 	const handleOnClick = (operation: string): void => {
-		const { servicename } = params;
+		const { servicename: encodedServiceName } = params;
+		const servicename = decodeURIComponent(encodedServiceName);
 
 		navigateToTrace({
 			servicename,
diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx
index 34b146f6da..2fa1d05f65 100644
--- a/frontend/src/container/QueryTable/QueryTable.tsx
+++ b/frontend/src/container/QueryTable/QueryTable.tsx
@@ -22,7 +22,8 @@ export function QueryTable({
 	...props
 }: QueryTableProps): JSX.Element {
 	const { isDownloadEnabled = false, fileName = '' } = downloadOption || {};
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
 	const { loading } = props;
 	const { columns: newColumns, dataSource: newDataSource } = useMemo(() => {
 		if (columns && dataSource) {
diff --git a/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx b/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx
index 3f088a37a8..00b29c7809 100644
--- a/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx
+++ b/frontend/src/pages/MetricsApplication/ApDex/ApDexApplication.tsx
@@ -10,7 +10,9 @@ import { Button } from '../styles';
 import ApDexSettings from './ApDexSettings';
 
 function ApDexApplication(): JSX.Element {
-	const { servicename } = useParams<IServiceName>();
+	const { servicename: encodedServiceName } = useParams<IServiceName>();
+	const servicename = decodeURIComponent(encodedServiceName);
+
 	const {
 		data,
 		isLoading,
diff --git a/frontend/src/pages/MetricsApplication/index.tsx b/frontend/src/pages/MetricsApplication/index.tsx
index 94cbd5d99e..1b0229e5d1 100644
--- a/frontend/src/pages/MetricsApplication/index.tsx
+++ b/frontend/src/pages/MetricsApplication/index.tsx
@@ -13,7 +13,11 @@ import { MetricsApplicationTab, TAB_KEY_VS_LABEL } from './types';
 import useMetricsApplicationTabKey from './useMetricsApplicationTabKey';
 
 function MetricsApplication(): JSX.Element {
-	const { servicename } = useParams<{ servicename: string }>();
+	const { servicename: encodedServiceName } = useParams<{
+		servicename: string;
+	}>();
+
+	const servicename = decodeURIComponent(encodedServiceName);
 
 	const activeKey = useMetricsApplicationTabKey();
 
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 281067ad47..65883594bb 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -67,7 +67,9 @@ const config = {
 	devtool: 'source-map',
 	entry: resolve(__dirname, './src/index.tsx'),
 	devServer: {
-		historyApiFallback: true,
+		historyApiFallback: {
+			disableDotRule: true,
+		},
 		open: true,
 		hot: true,
 		liveReload: true,