diff --git a/src/components/main-card/MainCard.jsx b/src/components/main-card/MainCard.jsx
index d3df7c1..2099d83 100644
--- a/src/components/main-card/MainCard.jsx
+++ b/src/components/main-card/MainCard.jsx
@@ -20,52 +20,48 @@ const MainCard = ({ imageURL, title, description, url }) => {
 	const options = {
 		reverse: true,
 		speed: 1200,
-		reset: false,
+		easing:  'cubic-bezier(.09,.67,.54,.76)'
+		// reset: false,
 	};
 
 	return (
-		<a
-			href={url}
-			target='_blank'
-			rel='noopener noreferrer'
-			style={{ textDecoration: 'none' }}>
-			<Tilt
-				// onClick={(e) => handleClick(e)}
-				options={options}
-				children={
-					<Card
-						sx={{
-							maxWidth: '320px',
-							mx: 'auto',
-							color: theme.palette.text.secondary,
-							backgroundColor: theme.palette.background.paper,
-							// '&:hover': {
-							// 	transition: 'all .7s ease',
-							// 	boxShadow: `1px 1px 20px 10px ${shadowColor}`,
-							// },
-						}}>
-						<CardActionArea>
-							<CardMedia
-								component='img'
-								height='150'
-								image={imageURL}
-								alt={title}
-							/>
-							<CardContent color='white'>
-								<Typography gutterBottom variant='h6' component='div'>
-									{title}
-								</Typography>
-								<Typography></Typography>
-								{{ description } !== '' && (
-									<Typography variant='body2'>{description}</Typography>
-								)}
-							</CardContent>
-						</CardActionArea>
-					</Card>
-				}
-				style={{ padding: 0, margin: 0 }}
-			/>
-		</a>
+		<Tilt
+			// style={{ padding: 0, margin: 0 }}
+			options={options}
+			children={
+				<Card
+					sx={{
+						maxWidth: '320px',
+						mx: 'auto',
+						color: theme.palette.text.secondary,
+						backgroundColor: theme.palette.background.paper,
+						// '&:hover': {
+						// 	transition: 'all .7s ease',
+						// 	boxShadow: `1px 1px 20px 10px ${shadowColor}`,
+						// },
+					}}>
+					<CardMedia
+						component='img'
+						height='150'
+						image={imageURL}
+						alt={title}
+					/>
+					<CardActionArea>
+						<CardContent
+							color='white'
+							onClick={() => window.open(url, '_blank')}>
+							<Typography gutterBottom variant='h6' component='div'>
+								{title}
+							</Typography>
+							<Typography></Typography>
+							{{ description } !== '' && (
+								<Typography variant='body2'>{description}</Typography>
+							)}
+						</CardContent>
+					</CardActionArea>
+				</Card>
+			}
+		/>
 	);
 };
 
diff --git a/src/layouts/landing/components/footer/Footer.jsx b/src/layouts/common/backToTop/BackToTop.jsx
similarity index 59%
rename from src/layouts/landing/components/footer/Footer.jsx
rename to src/layouts/common/backToTop/BackToTop.jsx
index a0f7b8c..0d10748 100644
--- a/src/layouts/landing/components/footer/Footer.jsx
+++ b/src/layouts/common/backToTop/BackToTop.jsx
@@ -1,14 +1,15 @@
 import React from 'react';
 
-import useScrollTrigger from '@mui/material/useScrollTrigger';
+import { Grid, Grow, useScrollTrigger } from '@mui/material';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import { Grid, Grow, Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
-
 function ScrollTop(props) {
 	const { children, window } = props;
 
+	// Note that you normally won't need to set the window ref as useScrollTrigger
+	// will default to window.
+	// This is only being set here because the demo is in an iframe.
 	const trigger = useScrollTrigger({
 		target: window ? window() : undefined,
 		disableHysteresis: true,
@@ -26,22 +27,28 @@ function ScrollTop(props) {
 	};
 
 	return (
-		<Grow
-			in={trigger}
-			style={{ transformOrigin: '0 0 0' }}
-			{...(trigger ? { timeout: 1000 } : {})}>
-			<Box onClick={handleClick} role='presentation'>
+		<Grow in={trigger}>
+			<div onClick={handleClick} role='presentation'>
 				{children}
-			</Box>
+			</div>
 		</Grow>
 	);
 }
 
-const Footer = (props) => {
+const BackToTop = (props) => {
 	const theme = useTheme();
 	return (
-		<Grid container justifyContent='center' alignItems='center' id='footer'>
-			<ScrollTop {...props} >
+		<Grid
+			sx={{
+				position: 'fixed',
+				bottom: theme.spacing(2),
+				right: theme.spacing(2),
+			}}
+			container
+			justifyContent='center'
+			alignItems='center'
+			id='footer'>
+			<ScrollTop {...props}>
 				<KeyboardArrowUpIcon
 					sx={{
 						width: '5rem',
@@ -53,4 +60,4 @@ const Footer = (props) => {
 		</Grid>
 	);
 };
-export default Footer;
+export default BackToTop;
diff --git a/src/layouts/common/backToTop/index.js b/src/layouts/common/backToTop/index.js
new file mode 100644
index 0000000..97f9420
--- /dev/null
+++ b/src/layouts/common/backToTop/index.js
@@ -0,0 +1 @@
+export { default } from './BackToTop';
diff --git a/src/layouts/landing/LandingLayout.jsx b/src/layouts/landing/LandingLayout.jsx
index d9a54a3..307d64b 100644
--- a/src/layouts/landing/LandingLayout.jsx
+++ b/src/layouts/landing/LandingLayout.jsx
@@ -6,7 +6,7 @@ import { ColorModeContext } from 'App';
 import { LandingWhite } from 'themes/Theme';
 import FullScreenContainer from 'layouts/common/fullScreenContainer';
 
-import Footer from './components/footer';
+import BackToTop from '../common/backToTop';
 import Header from './components/header';
 
 const LandingLayout = (props) => {
@@ -19,8 +19,10 @@ const LandingLayout = (props) => {
 			<ThemeProvider theme={LandingWhite}>
 				<div id='back-to-top-anchor' />
 				<Header />
-				<FullScreenContainer>{children}</FullScreenContainer>
-				<Footer />
+				<FullScreenContainer>
+					{children}
+					<BackToTop />
+				</FullScreenContainer>
 			</ThemeProvider>
 		</ColorModeContext.Provider>
 	);
diff --git a/src/layouts/landing/components/footer/index.js b/src/layouts/landing/components/footer/index.js
deleted file mode 100644
index be92134..0000000
--- a/src/layouts/landing/components/footer/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Footer';
diff --git a/src/layouts/main/MainLayout.jsx b/src/layouts/main/MainLayout.jsx
index abdb96d..531c16c 100644
--- a/src/layouts/main/MainLayout.jsx
+++ b/src/layouts/main/MainLayout.jsx
@@ -3,21 +3,21 @@ import React from 'react';
 import Header from './components/header';
 import Footer from './components/footer';
 import FullScreenContainer from 'layouts/common/fullScreenContainer';
+import BackToTop from '../common/backToTop';
 
 const MainLayout = (props) => {
 	const { children } = props;
 
 	return (
-		<div
-			sx={{
-				minHeight: '100vh',
-				display: 'flex',
-				flexDirection: 'column',
-			}}>
+		<>
+			<div id='back-to-top-anchor' />
 			<Header />
-			<FullScreenContainer>{children}</FullScreenContainer>
+			<FullScreenContainer>
+				{children}
+				<BackToTop />
+			</FullScreenContainer>
 			<Footer />
-		</div>
+		</>
 	);
 };