diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index 11dac46fde..221d59dcf4 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -43,6 +43,10 @@
 				background: var(--bg-ink-400);
 				cursor: pointer;
 
+				.dashboard-title {
+					color: var(--bg-vanilla-100);
+				}
+
 				.title-with-action {
 					display: flex;
 					justify-content: space-between;
@@ -1048,6 +1052,10 @@
 					border: 1px solid var(--bg-vanilla-200);
 					background: var(--bg-vanilla-100);
 
+					.dashboard-title {
+						color: var(--bg-slate-300);
+					}
+
 					.title-with-action {
 						.dashboard-title {
 							.ant-typography {
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 17b6fe0863..d9994b3776 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -66,7 +66,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { generatePath } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -455,7 +455,9 @@ function DashboardsList(): JSX.Element {
 									alt="dashboard-image"
 								/>
 								<Typography.Text data-testid={`dashboard-title-${index}`}>
-									{dashboard.name}
+									<Link to={getLink()} className="dashboard-title">
+										{dashboard.name}
+									</Link>
 								</Typography.Text>
 							</div>