diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx
index ee8ab1f..11b3902 100644
--- a/src/components/CreatePool.tsx
+++ b/src/components/CreatePool.tsx
@@ -126,7 +126,7 @@ const CreatePool = () => {
 							onChange={(event) => setType(event.target.value)}
 						>
 							<option value="offer">Offering carpool</option>
-							<option value="request">Requesting carpooll</option>
+							<option value="request">Requesting carpool</option>
 						</select>
 					</div>
 					<div className="form-group">
diff --git a/src/components/Groups.tsx b/src/components/Groups.tsx
index 2c3c0d1..5ec1e91 100644
--- a/src/components/Groups.tsx
+++ b/src/components/Groups.tsx
@@ -1,7 +1,51 @@
-import { useState, useEffect } from 'react';
+import Button from '@material-ui/core/Button';
+import React, { useState, useEffect } from 'react';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import Box from '@material-ui/core/Box';
 import { makeAPIGetCall } from '../api/utils';
 
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 345,
+		justifyContent: 'center',
+	},
+	media: {
+		height: 140,
+	},
+	button: {
+		margin: theme.spacing(1),
+		background: '#40E0D0',
+		'&:hover': {
+			background: '#FFFFFF',
+		},
+	},
+}));
 const Groups = () => {
+	const classes = useStyles();
+	const [state, setState] = useState({
+		MyGroups: [
+			{
+				id: 1,
+				group_title: 'TJ',
+			},
+		],
+	});
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
 	const [groups, setGroups] = useState<Carpool.Group[]>([
 		{
 			_id: '1234',
@@ -20,39 +64,76 @@ const Groups = () => {
 	}, []);
 
 	return (
-		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+		<div
+			className=""
+			style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
+		>
 			<h1
 				className="d-flex justify-content-center p-4"
-				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+				style={{ backgroundColor: '#F1EAE8' }}
 			>
 				Groups
 			</h1>
-			<a
-				className="btn btn-large btn-success"
-				href="/create_group"
-				style={{ fontFamily: 'Courier New' }}
-			>
-				Create Group
-			</a>
+			<Box textAlign="center">
+				<Button
+					variant="contained"
+					className={classes.button}
+					startIcon={<CloudUploadIcon />}
+					href="/create_group"
+				>
+					Create Group
+				</Button>
+			</Box>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
 				<br></br>
+
 				{groups.map((group, index) => {
 					return (
-						<div
-							className="card card-body text-left"
-							style={{
-								backgroundColor: index % 2 === 0 ? '#F1EAE8' : '#FFFFFF',
-							}}
+						<Card
+							className={classes.root + 'd-inline-flex'}
+							style={{ margin: '0.5rem' }}
 						>
-							<form action={'/requestgroup/' + group._id} method="POST">
-								<p className="card-title">{group.name}</p>
-								<input
-									type="submit"
-									value="Request to Join"
-									className="btn btn-success d-flex"
-								/>
-							</form>
-						</div>
+							<CardActionArea href={'/group/' + group._id}>
+								<CardContent>
+									<Typography gutterBottom variant="h5" component="h2">
+										{group.name}
+									</Typography>
+									<Typography
+										variant="body2"
+										color="textSecondary"
+										component="p"
+									></Typography>
+								</CardContent>
+							</CardActionArea>
+
+							<CardActions>
+								<Button
+									size="small"
+									color="primary"
+									onClick={() => {
+										alert('Copied to Clipboard');
+										let link: string = 'localhost:3000/group/' + group._id;
+										navigator.clipboard.writeText(link);
+									}}
+								>
+									Share
+								</Button>
+								<Button
+									href={'/group/' + group._id}
+									size="small"
+									color="primary"
+								>
+									Learn More
+								</Button>
+								<form action={'/requestgroup/' + group._id} method="POST">
+									<input
+										type="submit"
+										value="Request to Join"
+										className="btn btn-success d-flex"
+									/>
+								</form>
+							</CardActions>
+						</Card>
 					);
 				})}
 			</div>
diff --git a/src/components/MyGroups.tsx b/src/components/MyGroups.tsx
index ba7cbf5..6756553 100644
--- a/src/components/MyGroups.tsx
+++ b/src/components/MyGroups.tsx
@@ -1,7 +1,51 @@
+import Button from '@material-ui/core/Button';
 import React, { useState, useEffect } from 'react';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import Box from '@material-ui/core/Box';
 import { makeAPIGetCall } from '../api/utils';
 
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 345,
+		justifyContent: 'center',
+	},
+	media: {
+		height: 140,
+	},
+	button: {
+		margin: theme.spacing(1),
+		background: '#40E0D0',
+		'&:hover': {
+			background: '#FFFFFF',
+		},
+	},
+}));
 const MyGroups = () => {
+	const classes = useStyles();
+	const [state, setState] = useState({
+		MyGroups: [
+			{
+				id: 1,
+				group_title: 'TJ',
+			},
+		],
+	});
+
+	const callAPI = () => {
+		fetch(`${process.env.REACT_APP_API_ENDPOINT}/groups/`)
+			.then((response) => response.json())
+			.then((data) => {
+				if (data !== undefined) {
+					setState(data);
+				}
+			});
+	};
 	const [groups, setGroups] = useState<Carpool.Group[]>([
 		{
 			_id: '1234',
@@ -20,20 +64,26 @@ const MyGroups = () => {
 	}, []);
 
 	return (
-		<div className="bg-dark" style={{ minHeight: '100vh' }}>
+		<div
+			className=""
+			style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
+		>
 			<h1
 				className="d-flex justify-content-center p-4"
-				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Impact' }}
+				style={{ backgroundColor: '#F1EAE8' }}
 			>
 				My Groups
 			</h1>
-			<a
-				className="btn btn-large btn-success"
-				href="/create_group"
-				style={{ fontFamily: 'Courier New' }}
-			>
-				Create Group
-			</a>
+			<Box textAlign="center">
+				<Button
+					variant="contained"
+					className={classes.button}
+					startIcon={<CloudUploadIcon />}
+					href="/create_group"
+				>
+					Create Group
+				</Button>
+			</Box>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
 				<br></br>
 				{groups.map((group, index) => {
@@ -44,14 +94,44 @@ const MyGroups = () => {
 						background = '#FFFFFF';
 					}
 					return (
-						<div
-							className="card card-body text-left"
-							style={{ backgroundColor: background }}
+						<Card
+							className={classes.root + 'd-inline-flex'}
+							style={{ margin: '0.5rem' }}
 						>
-							<a href={'/groups/' + group._id} className="card-title">
-								{group.name}
-							</a>
-						</div>
+							<CardActionArea href={'/group/' + group._id}>
+								<CardContent>
+									<Typography gutterBottom variant="h5" component="h2">
+										{group.name}
+									</Typography>
+									<Typography
+										variant="body2"
+										color="textSecondary"
+										component="p"
+									></Typography>
+								</CardContent>
+							</CardActionArea>
+
+							<CardActions>
+								<Button
+									size="small"
+									color="primary"
+									onClick={() => {
+										alert('Copied to Clipboard');
+										let link: string = 'localhost:3000/group/' + group._id;
+										navigator.clipboard.writeText(link);
+									}}
+								>
+									Share
+								</Button>
+								<Button
+									href={'/group/' + group._id}
+									size="small"
+									color="primary"
+								>
+									Learn More
+								</Button>
+							</CardActions>
+						</Card>
 					);
 				})}
 			</div>