diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
index 7e64202472..d650abfc5a 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundEnvironmentCell/AdvancedPlaygroundEnvironmentDiffCell.tsx
@@ -1,4 +1,4 @@
-import { Link, Popover, styled, Typography, useTheme } from '@mui/material';
+import { Button, Popover, styled, Typography, useTheme } from '@mui/material';
 import { flexRow } from '../../../../../themes/themeStyles';
 import React, { useState } from 'react';
 import { AdvancedPlaygroundFeatureSchemaEnvironments } from 'openapi';
@@ -14,11 +14,14 @@ const StyledContainer = styled(
     margin: theme.spacing(0, 1.5),
 }));
 
-const StyledButton = styled(Link)(({ theme }) => ({
+const StyledButton = styled(Button)(({ theme }) => ({
     textAlign: 'left',
     textDecorationStyle: 'dotted',
+    textDecorationLine: 'underline',
     textUnderlineOffset: theme.spacing(0.75),
     color: theme.palette.neutral.dark,
+    padding: 0,
+    fontWeight: 'normal',
 }));
 
 export interface IAdvancedPlaygroundEnvironmentCellProps {
@@ -31,7 +34,7 @@ export const AdvancedPlaygroundEnvironmentDiffCell = ({
     const theme = useTheme();
     const [anchor, setAnchorEl] = useState<null | Element>(null);
 
-    const onOpen = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
+    const onOpen = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
         setAnchorEl(event.currentTarget);
 
     const onClose = () => setAnchorEl(null);
@@ -41,8 +44,8 @@ export const AdvancedPlaygroundEnvironmentDiffCell = ({
     return (
         <StyledContainer>
             <>
-                <StyledButton variant={'body2'} onClick={onOpen}>
-                    Preview diff
+                <StyledButton variant={'text'} onClick={onOpen}>
+                    View diff
                 </StyledButton>
 
                 <Popover
diff --git a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
index 841300a1a0..42e76372d3 100644
--- a/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
+++ b/frontend/src/component/playground/Playground/AdvancedPlaygroundResultsTable/AdvancedPlaygroundResultsTable.test.tsx
@@ -110,5 +110,5 @@ test('should render advanced playground table', async () => {
     expect(screen.getByText('ChangeReqs')).toBeInTheDocument();
     expect(screen.getByText('Development')).toBeInTheDocument();
     expect(screen.getByText('Production')).toBeInTheDocument();
-    expect(screen.getByText('Preview diff')).toBeInTheDocument();
+    expect(screen.getByText('View diff')).toBeInTheDocument();
 });