diff --git a/frontend/src/components/visualizations/PublicVisualizationCard.tsx b/frontend/src/components/visualizations/PublicVisualizationCard.tsx
index 5dda80784..abdbdecc8 100644
--- a/frontend/src/components/visualizations/PublicVisualizationCard.tsx
+++ b/frontend/src/components/visualizations/PublicVisualizationCard.tsx
@@ -1,5 +1,12 @@
-import React, { useState } from "react";
-import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import {
+	Button,
+	Card,
+	CardActions,
+	CardContent,
+	Grid,
+	IconButton,
+} from "@mui/material";
 import Collapse from "@mui/material/Collapse";
 import { VisualizationDataDetail } from "./VisualizationDataDetail";
 import { VisualizationDataOut } from "../../openapi/v2";
@@ -11,6 +18,8 @@ import {
 	generatePublicVisPresignedUrl as generatePublicVisPresignedUrlAction,
 	RESET_PUBLIC_VIS_DATA_PRESIGNED_URL,
 } from "../../actions/public_visualization";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
 
 type publicPreviewProps = {
 	publicVisComponentDefinition: VisComponentDefinitions;
@@ -19,7 +28,8 @@ type publicPreviewProps = {
 
 export const PublicVisualizationCard = (props: publicPreviewProps) => {
 	const { publicVisComponentDefinition, publicVisualizationDataItem } = props;
-	const [expanded, setExpanded] = React.useState(false);
+	const [expandInfo, setExpandInfo] = React.useState(false);
+	const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
 	const [visShareModalOpen, setVisShareModalOpen] = useState(false);
 	// share visualization
 	const dispatch = useDispatch();
@@ -34,8 +44,12 @@ export const PublicVisualizationCard = (props: publicPreviewProps) => {
 		(state: RootState) => state.publicVisualization.publicPresignedUrl
 	);
 
+	useEffect(() => {
+		if (expandInfo) setFullscreen(false);
+	}, [expandInfo]);
+
 	const handleExpandClick = () => {
-		setExpanded(!expanded);
+		setExpandInfo(!expandInfo);
 	};
 
 	const handleShareLinkClick = () => {
@@ -50,16 +64,27 @@ export const PublicVisualizationCard = (props: publicPreviewProps) => {
 		dispatch({ type: RESET_PUBLIC_VIS_DATA_PRESIGNED_URL });
 	};
 
+	const handleFullscreenToggle = () => {
+		setFullscreen(!fullscreen);
+	};
+
 	return (
-		<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
-			<Card>
+		<Grid
+			item
+			xs={12}
+			sm={fullscreen ? 12 : 4}
+			md={fullscreen ? 12 : 4}
+			lg={fullscreen ? 12 : 4}
+			xl={fullscreen ? 12 : 4}
+		>
+			<Card sx={{ height: "100%" }}>
 				<PresignedUrlShareModal
 					presignedUrl={presignedUrl}
 					presignedUrlShareModalOpen={visShareModalOpen}
 					setPresignedUrlShareModalOpen={setVisShareModalOpen}
 					setPresignedUrlShareModalClose={setVisShareModalClose}
 				/>
-				<Collapse in={!expanded} timeout="auto" unmountOnExit>
+				<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						{React.cloneElement(publicVisComponentDefinition.component, {
 							publicView: true,
@@ -67,21 +92,18 @@ export const PublicVisualizationCard = (props: publicPreviewProps) => {
 						})}
 					</CardContent>
 				</Collapse>
-				<CardActions sx={{ padding: "0 auto" }}>
-					{!expanded ? (
-						<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
-							Learn More
-						</Button>
-					) : (
-						<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
-							View
+				<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
+					<div>
+						<Button onClick={handleExpandClick}>
+							{expandInfo ? "View" : "Learn More"}
 						</Button>
-					)}
-					<Button onClick={handleShareLinkClick} sx={{ marginLeft: "auto" }}>
-						Share Link
-					</Button>
+						<Button onClick={handleShareLinkClick}>Share Link</Button>
+					</div>
+					<IconButton onClick={handleFullscreenToggle}>
+						{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+					</IconButton>
 				</CardActions>
-				<Collapse in={expanded} timeout="auto" unmountOnExit>
+				<Collapse in={expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						<VisualizationDataDetail
 							visualizationDataItem={publicVisualizationDataItem}
diff --git a/frontend/src/components/visualizations/PublicVisualizationRawBytesCard.tsx b/frontend/src/components/visualizations/PublicVisualizationRawBytesCard.tsx
index e4b333842..f2a3ef89d 100644
--- a/frontend/src/components/visualizations/PublicVisualizationRawBytesCard.tsx
+++ b/frontend/src/components/visualizations/PublicVisualizationRawBytesCard.tsx
@@ -1,6 +1,14 @@
 import React from "react";
-import { Card, CardContent, Grid } from "@mui/material";
+import {
+	Card,
+	CardActions,
+	CardContent,
+	Grid,
+	IconButton,
+} from "@mui/material";
 import { VisComponentDefinitions } from "../../visualization.config";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
 
 type publicPreviewProps = {
 	fileId?: string;
@@ -9,15 +17,32 @@ type publicPreviewProps = {
 
 export const PublicVisualizationRawBytesCard = (props: publicPreviewProps) => {
 	const { visComponentDefinition, fileId } = props;
+	const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
+	const handleFullscreenToggle = () => {
+		setFullscreen(!fullscreen);
+	};
+
 	return (
-		<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
-			<Card>
+		<Grid
+			item
+			xs={12}
+			sm={fullscreen ? 12 : 4}
+			md={fullscreen ? 12 : 4}
+			lg={fullscreen ? 12 : 4}
+			xl={fullscreen ? 12 : 4}
+		>
+			<Card sx={{ height: "100%" }}>
 				<CardContent>
 					{React.cloneElement(visComponentDefinition.component, {
 						fileId: fileId,
 						publicView: true,
 					})}
 				</CardContent>
+				<CardActions sx={{ float: "right" }}>
+					<IconButton onClick={handleFullscreenToggle}>
+						{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+					</IconButton>
+				</CardActions>
 			</Card>
 		</Grid>
 	);
diff --git a/frontend/src/components/visualizations/PublicVisualizationSpecCard.tsx b/frontend/src/components/visualizations/PublicVisualizationSpecCard.tsx
index d034ba821..b7671d04e 100644
--- a/frontend/src/components/visualizations/PublicVisualizationSpecCard.tsx
+++ b/frontend/src/components/visualizations/PublicVisualizationSpecCard.tsx
@@ -1,9 +1,18 @@
-import React from "react";
-import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
+import React, { useEffect } from "react";
+import {
+	Button,
+	Card,
+	CardActions,
+	CardContent,
+	Grid,
+	IconButton,
+} from "@mui/material";
 import Collapse from "@mui/material/Collapse";
 import { VisualizationConfigOut } from "../../openapi/v2";
 import { VisComponentDefinitions } from "../../visualization.config";
 import { VisualizationParamDetail } from "./VisualizationParamDetail";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
 
 type publicPreviewProps = {
 	visComponentDefinition: VisComponentDefinitions;
@@ -12,22 +21,39 @@ type publicPreviewProps = {
 
 export const PublicVisualizationSpecCard = (props: publicPreviewProps) => {
 	const { visComponentDefinition, visConfigEntry } = props;
-	const [expanded, setExpanded] = React.useState(false);
+	const [expandInfo, setExpandInfo] = React.useState(false);
+	const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
+	useEffect(() => {
+		if (expandInfo) setFullscreen(false);
+	}, [expandInfo]);
+
 	const handleExpandClick = () => {
-		setExpanded(!expanded);
+		setExpandInfo(!expandInfo);
+	};
+
+	const handleFullscreenToggle = () => {
+		setFullscreen(!fullscreen);
 	};
+
 	return (
-		<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
-			<Card>
-				<Collapse in={!expanded} timeout="auto" unmountOnExit>
+		<Grid
+			item
+			xs={12}
+			sm={fullscreen ? 12 : 4}
+			md={fullscreen ? 12 : 4}
+			lg={fullscreen ? 12 : 4}
+			xl={fullscreen ? 12 : 4}
+		>
+			<Card sx={{ height: "100%" }}>
+				<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						{React.cloneElement(visComponentDefinition.component, {
 							visConfigEntry: visConfigEntry,
 						})}
 					</CardContent>
 				</Collapse>
-				<CardActions sx={{ padding: "0 auto" }}>
-					{!expanded ? (
+				<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
+					{!expandInfo ? (
 						<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
 							Learn More
 						</Button>
@@ -36,8 +62,11 @@ export const PublicVisualizationSpecCard = (props: publicPreviewProps) => {
 							View
 						</Button>
 					)}
+					<IconButton onClick={handleFullscreenToggle}>
+						{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+					</IconButton>
 				</CardActions>
-				<Collapse in={expanded} timeout="auto" unmountOnExit>
+				<Collapse in={expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						<VisualizationParamDetail visConfigEntry={visConfigEntry} />
 					</CardContent>
diff --git a/frontend/src/components/visualizations/VisualizationCard.tsx b/frontend/src/components/visualizations/VisualizationCard.tsx
index 5d6b7b9a7..3380a2641 100644
--- a/frontend/src/components/visualizations/VisualizationCard.tsx
+++ b/frontend/src/components/visualizations/VisualizationCard.tsx
@@ -1,6 +1,15 @@
-import React, { useState } from "react";
-import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import {
+	Button,
+	Card,
+	CardActions,
+	CardContent,
+	Grid,
+	IconButton,
+} from "@mui/material";
 import Collapse from "@mui/material/Collapse";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
 import { VisualizationDataDetail } from "./VisualizationDataDetail";
 import { VisualizationDataOut } from "../../openapi/v2";
 import { VisComponentDefinitions } from "../../visualization.config";
@@ -19,7 +28,8 @@ type previewProps = {
 
 export const VisualizationCard = (props: previewProps) => {
 	const { visComponentDefinition, visualizationDataItem } = props;
-	const [expanded, setExpanded] = React.useState(false);
+	const [expandInfo, setExpandInfo] = React.useState(false);
+	const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
 	const [visShareModalOpen, setVisShareModalOpen] = useState(false);
 
 	// share visualization
@@ -33,8 +43,12 @@ export const VisualizationCard = (props: previewProps) => {
 		(state: RootState) => state.visualization.presignedUrl
 	);
 
+	useEffect(() => {
+		if (expandInfo) setFullscreen(false);
+	}, [expandInfo]);
+
 	const handleExpandClick = () => {
-		setExpanded(!expanded);
+		setExpandInfo(!expandInfo);
 	};
 
 	const handleShareLinkClick = () => {
@@ -46,37 +60,45 @@ export const VisualizationCard = (props: previewProps) => {
 		dispatch({ type: RESET_VIS_DATA_PRESIGNED_URL });
 	};
 
+	const handleFullscreenToggle = () => {
+		setFullscreen(!fullscreen);
+	};
+
 	return (
-		<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
-			<Card>
+		<Grid
+			item
+			xs={12}
+			sm={fullscreen ? 12 : 4}
+			md={fullscreen ? 12 : 4}
+			lg={fullscreen ? 12 : 4}
+			xl={fullscreen ? 12 : 4}
+		>
+			<Card sx={{ height: "100%" }}>
 				<PresignedUrlShareModal
 					presignedUrl={presignedUrl}
 					presignedUrlShareModalOpen={visShareModalOpen}
 					setPresignedUrlShareModalOpen={setVisShareModalOpen}
 					setPresignedUrlShareModalClose={setVisShareModalClose}
 				/>
-				<Collapse in={!expanded} timeout="auto" unmountOnExit>
+				<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						{React.cloneElement(visComponentDefinition.component, {
 							visualizationId: visualizationDataItem.id,
 						})}
 					</CardContent>
 				</Collapse>
-				<CardActions sx={{ padding: "0 auto" }}>
-					{!expanded ? (
-						<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
-							Learn More
-						</Button>
-					) : (
-						<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
-							View
+				<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
+					<div>
+						<Button onClick={handleExpandClick}>
+							{expandInfo ? "View" : "Learn More"}
 						</Button>
-					)}
-					<Button onClick={handleShareLinkClick} sx={{ marginLeft: "auto" }}>
-						Share Link
-					</Button>
+						<Button onClick={handleShareLinkClick}>Share Link</Button>
+					</div>
+					<IconButton onClick={handleFullscreenToggle}>
+						{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+					</IconButton>
 				</CardActions>
-				<Collapse in={expanded} timeout="auto" unmountOnExit>
+				<Collapse in={expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						<VisualizationDataDetail
 							visualizationDataItem={visualizationDataItem}
diff --git a/frontend/src/components/visualizations/VisualizationRawBytesCard.tsx b/frontend/src/components/visualizations/VisualizationRawBytesCard.tsx
index 052ee5514..9a725dd50 100644
--- a/frontend/src/components/visualizations/VisualizationRawBytesCard.tsx
+++ b/frontend/src/components/visualizations/VisualizationRawBytesCard.tsx
@@ -1,6 +1,14 @@
 import React from "react";
-import { Card, CardContent, Grid } from "@mui/material";
+import {
+	Card,
+	CardActions,
+	CardContent,
+	Grid,
+	IconButton,
+} from "@mui/material";
 import { VisComponentDefinitions } from "../../visualization.config";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
 
 type previewProps = {
 	fileId?: string;
@@ -9,15 +17,31 @@ type previewProps = {
 
 export const VisualizationRawBytesCard = (props: previewProps) => {
 	const { visComponentDefinition, fileId } = props;
+	const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
+	const handleFullscreenToggle = () => {
+		setFullscreen(!fullscreen);
+	};
 
 	return (
-		<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
-			<Card>
+		<Grid
+			item
+			xs={12}
+			sm={fullscreen ? 12 : 4}
+			md={fullscreen ? 12 : 4}
+			lg={fullscreen ? 12 : 4}
+			xl={fullscreen ? 12 : 4}
+		>
+			<Card sx={{ height: "100%" }}>
 				<CardContent>
 					{React.cloneElement(visComponentDefinition.component, {
 						fileId: fileId,
 					})}
 				</CardContent>
+				<CardActions sx={{ float: "right" }}>
+					<IconButton onClick={handleFullscreenToggle}>
+						{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+					</IconButton>
+				</CardActions>
 			</Card>
 		</Grid>
 	);
diff --git a/frontend/src/components/visualizations/VisualizationSpecCard.tsx b/frontend/src/components/visualizations/VisualizationSpecCard.tsx
index 6c8da9c90..0b6d14bdd 100644
--- a/frontend/src/components/visualizations/VisualizationSpecCard.tsx
+++ b/frontend/src/components/visualizations/VisualizationSpecCard.tsx
@@ -1,9 +1,18 @@
-import React from "react";
-import { Button, Card, CardActions, CardContent, Grid } from "@mui/material";
+import React, { useEffect } from "react";
+import {
+	Button,
+	Card,
+	CardActions,
+	CardContent,
+	Grid,
+	IconButton,
+} from "@mui/material";
 import Collapse from "@mui/material/Collapse";
 import { VisualizationConfigOut } from "../../openapi/v2";
 import { VisComponentDefinitions } from "../../visualization.config";
 import { VisualizationParamDetail } from "./VisualizationParamDetail";
+import FullscreenExitIcon from "@mui/icons-material/FullscreenExit";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
 
 type previewProps = {
 	visComponentDefinition: VisComponentDefinitions;
@@ -12,22 +21,40 @@ type previewProps = {
 
 export const VisualizationSpecCard = (props: previewProps) => {
 	const { visComponentDefinition, visConfigEntry } = props;
-	const [expanded, setExpanded] = React.useState(false);
+	const [expandInfo, setExpandInfo] = React.useState(false);
+	const [fullscreen, setFullscreen] = React.useState(false); // Default to normal view
+
+	useEffect(() => {
+		if (expandInfo) setFullscreen(false);
+	}, [expandInfo]);
+
 	const handleExpandClick = () => {
-		setExpanded(!expanded);
+		setExpandInfo(!expandInfo);
 	};
+
+	const handleFullscreenToggle = () => {
+		setFullscreen(!fullscreen);
+	};
+
 	return (
-		<Grid item xs={12} sm={4} md={4} lg={4} xl={4}>
-			<Card>
-				<Collapse in={!expanded} timeout="auto" unmountOnExit>
+		<Grid
+			item
+			xs={12}
+			sm={fullscreen ? 12 : 4}
+			md={fullscreen ? 12 : 4}
+			lg={fullscreen ? 12 : 4}
+			xl={fullscreen ? 12 : 4}
+		>
+			<Card sx={{ height: "100%" }}>
+				<Collapse in={!expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						{React.cloneElement(visComponentDefinition.component, {
 							visConfigEntry: visConfigEntry,
 						})}
 					</CardContent>
 				</Collapse>
-				<CardActions sx={{ padding: "0 auto" }}>
-					{!expanded ? (
+				<CardActions sx={{ display: "flex", justifyContent: "space-between" }}>
+					{!expandInfo ? (
 						<Button onClick={handleExpandClick} sx={{ marginLeft: "auto" }}>
 							Learn More
 						</Button>
@@ -36,8 +63,11 @@ export const VisualizationSpecCard = (props: previewProps) => {
 							View
 						</Button>
 					)}
+					<IconButton onClick={handleFullscreenToggle}>
+						{fullscreen ? <FullscreenExitIcon /> : <FullscreenIcon />}
+					</IconButton>
 				</CardActions>
-				<Collapse in={expanded} timeout="auto" unmountOnExit>
+				<Collapse in={expandInfo} timeout="auto" unmountOnExit>
 					<CardContent>
 						<VisualizationParamDetail visConfigEntry={visConfigEntry} />
 					</CardContent>