diff --git a/src/Components/Home/ArcadeEmbed.jsx b/src/Components/Home/ArcadeEmbed.jsx
deleted file mode 100644
index 4a522874d..000000000
--- a/src/Components/Home/ArcadeEmbed.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export function ArcadeEmbed() {
-  return (
-    <div style={{ position: 'relative', paddingBottom: 'calc(57.419936851601264% + 41px)', height: 0, width: '100%' }}>
-      <iframe
-        src="https://demo.arcade.software/sbWTOnn9WYdlTewqV7HI?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
-        title="Explore Prism's Data Management Capabilities"
-        frameBorder="0"
-        loading="lazy"
-        allowFullScreen
-        allow="clipboard-write"
-        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light' }}
-      />
-    </div>
-  );
-} 
\ No newline at end of file
diff --git a/src/Components/Home/Divider.jsx b/src/Components/Home/Divider.jsx
deleted file mode 100644
index c00070c05..000000000
--- a/src/Components/Home/Divider.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { Divider as MUIDivider } from '@mui/material';
-
-const Divider = () => {
-  return (
-    <MUIDivider
-      sx={{
-        background: 'linear-gradient(90deg, #842bd2, #ff5451, #8c52ff, #00bf63, #842bd2)',
-        backgroundSize: '400% 400%',
-        animation: 'gradientAnimation 10s ease infinite',
-        height: '2px', 
-        opacity: 0.3,
-      }}
-    />
-  );
-};
-
-export default Divider;
-
-const styles = `
-@keyframes gradientAnimation {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-`;
-
-if (typeof document !== 'undefined') {
-  const styleSheet = document.createElement("style");
-  styleSheet.type = "text/css";
-  styleSheet.innerText = styles;
-  document.head.appendChild(styleSheet);
-} 
\ No newline at end of file
diff --git a/src/Components/Home/FAQ.jsx b/src/Components/Home/FAQ.jsx
deleted file mode 100644
index 726121c71..000000000
--- a/src/Components/Home/FAQ.jsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import React from 'react';
-import Accordion from '@mui/material/Accordion';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
-import Link from '@mui/material/Link';
-import Typography from '@mui/material/Typography';
-import { FaChevronDown } from 'react-icons/fa';
-import { useTheme } from '@mui/material/styles';
-
-export default function FAQ() {
-  const [expanded, setExpanded] = React.useState([]);
-  const theme = useTheme();
-
-  const handleChange =
-    (panel) => (event, isExpanded) => {
-      setExpanded(
-        isExpanded
-          ? [...expanded, panel]
-          : expanded.filter((item) => item !== panel),
-      );
-    };
-
-  return (
-    <Container
-      id="faq"
-      sx={{
-        py: { xs: 24, sm: 24 },
-        px: { xs: 12, sm: 12 },
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: { xs: 3, sm: 6 },
-      }}
-    >
-      <Typography
-        component="h2"
-        variant="h4"
-        sx={{
-          color: 'text.primary',
-          width: { sm: '100%', md: '60%' },
-          textAlign: { sm: 'left', md: 'center' },
-          fontFamily: "BabaPro",
-        }}
-      >
-        Frequently Asked Questions
-      </Typography>
-      <Box sx={{ width: '100%' }}>
-        <Accordion
-          expanded={expanded.includes('panel1')}
-          onChange={handleChange('panel1')}
-          sx={{
-            borderRadius: 2,
-            px: 6,
-          }}
-        >
-          <AccordionSummary
-            expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
-            aria-controls="panel1d-content"
-            id="panel1d-header"
-          >
-            <Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
-              How does UpRock Prism ensure reliable uptime monitoring?
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography
-              gutterBottom
-              sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
-            >
-              UpRock Prism leverages a decentralized network of real devices across the globe, providing continuous and accurate monitoring of your website's uptime and performance.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-        <Accordion
-          expanded={expanded.includes('panel2')}
-          onChange={handleChange('panel2')}
-          sx={{
-            borderRadius: 2,
-            px: 6,
-          }}
-        >
-          <AccordionSummary
-            expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
-            aria-controls="panel2d-content"
-            id="panel2d-header"
-          >
-            <Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
-              What kind of insights can I gain from UpRock Prism?
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography
-              gutterBottom
-              sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
-            >
-              UpRock Prism provides detailed insights into your website's performance, including load times, downtime incidents, and speed test metrics, helping you optimize and improve your digital presence.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-        <Accordion
-          expanded={expanded.includes('panel3')}
-          onChange={handleChange('panel3')}
-          sx={{
-            borderRadius: 2,
-            px: 6,
-          }}
-        >
-          <AccordionSummary
-            expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
-            aria-controls="panel3d-content"
-            id="panel3d-header"
-          >
-            <Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
-              How does the decentralized network benefit my business?
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography
-              gutterBottom
-              sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
-            >
-              The decentralized network ensures that data is collected from diverse locations, providing a comprehensive view of your website's performance globally, and reducing the risk of single points of failure.
-            </Typography>
-          </AccordionDetails>
-        </Accordion>
-        {/* <Accordion
-          expanded={expanded.includes('panel4')}
-          onChange={handleChange('panel4')}
-          sx={{
-            borderRadius: 2,
-            px: 6,
-          }}
-        >
-          <AccordionSummary
-            expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
-            aria-controls="panel4d-content"
-            id="panel4d-header"
-          >
-            <Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
-              Is UpRock Prism easy to integrate with existing systems?
-            </Typography>
-          </AccordionSummary>
-          <AccordionDetails>
-            <Typography
-              gutterBottom
-              sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
-            >
-              Yes, UpRock Prism is designed to seamlessly integrate with your existing infrastructure, providing easy setup and compatibility with various platforms and tools.
-            </Typography>
-          </AccordionDetails>
-        </Accordion> */}
-      </Box>
-    </Container>
-  );
-}
diff --git a/src/Components/Home/Features.jsx b/src/Components/Home/Features.jsx
deleted file mode 100644
index 077094121..000000000
--- a/src/Components/Home/Features.jsx
+++ /dev/null
@@ -1,189 +0,0 @@
-import { Box, Container, Typography, Stack, Card } from "@mui/material";
-import {
-	FaGlobe,
-	FaTachometerAlt,
-	FaServer,
-	FaDocker,
-	FaHeartbeat,
-	FaExclamationTriangle,
-	FaEnvelope,
-	FaCalendarAlt,
-	FaLock,
-} from "react-icons/fa";
-import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-
-const features = [
-	{
-		title: "Website Monitoring",
-		description:
-			"Leverage our global network to ensure your website is always up and running, with real-time performance insights from every corner of the world.",
-		icon: FaGlobe,
-	},
-	{
-		title: "Page Speed Insights",
-		description:
-			"Optimize your site with precise speed metrics and recommendations, powered by data from a worldwide community of real users.",
-		icon: FaTachometerAlt,
-	},
-	{
-		title: "Infrastructure Monitoring",
-		description:
-			"Gain comprehensive visibility into your systems with community-driven insights on CPU, memory, and disk usage.",
-		icon: FaServer,
-	},
-	{
-		title: "Docker Monitoring",
-		description:
-			"Monitor container health and performance with real-time data from our extensive global network.",
-		icon: FaDocker,
-	},
-	{
-		title: "Ping Monitoring",
-		description:
-			"Ensure network reliability with customizable ping checks, supported by our distributed community infrastructure.",
-		icon: FaHeartbeat,
-	},
-	{
-		title: "Incident Management",
-		description:
-			"Stay ahead of issues with proactive incident management, backed by detailed status and impact analysis.",
-		icon: FaExclamationTriangle,
-	},
-	{
-		title: "Email Notifications",
-		description:
-			"Receive instant alerts when issues are detected, ensuring you're always informed.",
-		icon: FaEnvelope,
-	},
-	{
-		title: "Maintenance Windows",
-		description:
-			"Effortlessly schedule and manage maintenance with automated notifications.",
-		icon: FaCalendarAlt,
-	},
-	{
-		title: "Self-Hosted",
-		description: "Deploy on your own infrastructure for complete control.",
-		icon: FaLock,
-	},
-];
-
-export default function FeatureGrid() {
-	const theme = useTheme();
-	const mode = useSelector((state) => state.ui.mode);
-
-	return (
-		<Box
-			id="Features"
-			sx={{
-				py: 24,
-				px: 12,
-				color: theme.palette.primary.contrastText,
-				backgroundImage:
-					mode === "light"
-						? `radial-gradient(circle at center, #ffffff, white)`
-						: `radial-gradient(circle at center, #2a2547, black)`,
-			}}
-		>
-			<Container
-				sx={{
-					position: "relative",
-					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					gap: { xs: 6, sm: 12 },
-				}}
-			>
-				<Box
-					sx={{
-						width: { sm: "100%", md: "80%" },
-						textAlign: "center",
-					}}
-				>
-					<Typography
-						component="h2"
-						variant="h4"
-						gutterBottom
-						fontFamily="BabaPro"
-					>
-						Features
-					</Typography>
-					<Typography
-						variant="h6"
-						sx={{
-							color: theme.palette.secondary.contrastText,
-							fontSize: "clamp(0.9rem, 2.5vw, 1.1rem)",
-						}}
-					>
-						Experience unparalleled distributed uptime monitoring, precise data
-						extraction, and comprehensive speed testing. Our platform ensures optimal
-						performance, real-time insights, and proactive issue resolution, powered by
-						decentralized network of real user devices.
-					</Typography>
-				</Box>
-				<Box
-					sx={{
-						display: "grid",
-						gridTemplateColumns: {
-							xs: "1fr",
-							sm: "repeat(2, 1fr)",
-							md: "repeat(3, 1fr)",
-						},
-						gap: 6,
-					}}
-				>
-					{features.map((feature, index) => (
-						<Box
-							key={index}
-							sx={{ display: "flex", flexDirection: "column", height: "100%" }}
-						>
-							<Stack
-								direction="column"
-								component={Card}
-								spacing={5}
-								sx={{
-									color: "inherit",
-									p: 8,
-									height: "100%",
-									borderColor: "hsla(220, 25%, 25%, 0.3)",
-									backgroundColor: "theme.palette.text.secondary",
-								}}
-							>
-								<Box
-									sx={{
-										display: "flex",
-										justifyContent: "center",
-										alignItems: "center",
-										width: 36,
-										height: 36,
-										borderRadius: "50%",
-										bgcolor: theme.palette.primary.main,
-										color: theme.palette.background.default,
-									}}
-								>
-									<feature.icon
-										size={18}
-										color="currentColor"
-									/>
-								</Box>
-								<div>
-									<Typography
-										variant="h6"
-										gutterBottom
-										sx={{ fontWeight: "medium" }}
-									>
-										{feature.title}
-									</Typography>
-									<Typography sx={{ color: theme.palette.secondary.contrastText }}>
-										{feature.description}
-									</Typography>
-								</div>
-							</Stack>
-						</Box>
-					))}
-				</Box>
-			</Container>
-		</Box>
-	);
-}
diff --git a/src/Components/Home/Hero.jsx b/src/Components/Home/Hero.jsx
deleted file mode 100644
index 362626ea6..000000000
--- a/src/Components/Home/Hero.jsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import Link from "@mui/material/Link";
-import Stack from "@mui/material/Stack";
-import { styled, useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-import { ArcadeEmbed } from "./ArcadeEmbed";
-import RoundGradientButton from "../Buttons/RoundGradientButton";
-
-const GradientText = styled(Typography)(({ theme }) => ({
-	fontSize: "inherit",
-	fontFamily: "BabaPro",
-	background: "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff, #00bf63, #842bd2)",
-	backgroundSize: "400% 400%",
-	WebkitBackgroundClip: "text",
-	WebkitTextFillColor: "transparent",
-	animation: "gradientAnimation 8s ease infinite",
-	"@keyframes gradientAnimation": {
-		"0%": { backgroundPosition: "0% 50%" },
-		"50%": { backgroundPosition: "100% 50%" },
-		"100%": { backgroundPosition: "0% 50%" },
-	},
-}));
-
-const Hero = () => {
-	const theme = useTheme();
-	const mode = useSelector((state) => state.ui.mode);
-
-	return (
-		<Box
-			id="hero"
-			sx={{
-				width: "100%",
-				backgroundRepeat: "no-repeat",
-				px: 12,
-				backgroundImage:
-					mode === "light"
-						? "radial-gradient(ellipse 80% 50% at 50% -34%, hsl(215deg 100% 16%), transparent)"
-						: "radial-gradient(ellipse 80% 50% at 50% -34%, hsl(265deg 100% 20%), transparent)",
-			}}
-		>
-			<Container
-				sx={{
-					display: "flex",
-					flexDirection: "column",
-					alignItems: "center",
-					pt: { xs: 60, sm: 80 },
-					pb: { xs: 8, sm: 12 },
-				}}
-			>
-				<Stack
-					spacing={4}
-					sx={{ alignItems: "center", width: { xs: "100%", sm: "70%" }, mb: 10 }}
-				>
-					<Typography
-						variant="h2"
-						sx={{
-							display: "flex",
-							flexDirection: { xs: "column", sm: "row" },
-							alignItems: "center",
-							justifyContent: "center",
-							fontSize: "clamp(0.8rem, 4vw, 3rem)",
-							textAlign: "center",
-							fontFamily: "BabaPro",
-						}}
-					>
-						<GradientText
-							component="span"
-							variant="h2"
-						>
-							UpRock&nbsp;Prism
-						</GradientText>
-					</Typography>
-					<Typography
-						variant="h1"
-						sx={{
-							fontSize: "clamp(2rem, 6vw, 4.5rem)",
-							textAlign: "center",
-							fontFamily: "BabaPro",
-							color: theme.palette.primary.contrastText,
-						}}
-					>
-						Unmatched Uptime Monitoring
-					</Typography>
-					<Typography
-						sx={{
-							textAlign: "center",
-							color: theme.palette.primary.contrastText,
-							width: { xs: "100%", sm: "100%", md: "80%" },
-							lineHeight: 1.5,
-							fontSize: "clamp(0.9rem, 2.5vw, 1.1rem)",
-						}}
-					>
-						Elevate your digital presence with UpRock Prism, the first decentralized data
-						network for uptime monitoring and distributed performance testing. Gain
-						unparalleled insights from every corner of the world.
-					</Typography>
-					<Stack
-						direction="row"
-						justifyContent="center"
-						spacing={2}
-						sx={{ pt: 10, pb: 6, width: "100%" }}
-					>
-						<RoundGradientButton
-							variant="contained"
-							className="gradient-button"
-							href="/login"
-						>
-							Launch App
-						</RoundGradientButton>
-					</Stack>
-					<Typography
-						variant="caption"
-						color={theme.palette.secondary.contrastText}
-						sx={{ textAlign: "center" }}
-					>
-						By clicking &quot;Launch App&quot; you agree to our&nbsp;
-						<Link
-							href="https://uprock.com/terms-of-use"
-							color={theme.palette.primary.contrastText}
-						>
-							Terms of Use
-						</Link>
-						.
-					</Typography>
-				</Stack>
-				<ArcadeEmbed />
-			</Container>
-		</Box>
-	);
-};
-
-export default Hero;
diff --git a/src/Components/Home/Highlights.jsx b/src/Components/Home/Highlights.jsx
deleted file mode 100644
index bcd8bb01f..000000000
--- a/src/Components/Home/Highlights.jsx
+++ /dev/null
@@ -1,295 +0,0 @@
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Card from '@mui/material/Card';
-import MuiChip from '@mui/material/Chip';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import StrokeAnimation from './StrokeAnimation';
-import { useSelector } from 'react-redux';
-
-import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
-import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
-import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
-
-const items = [
-  {
-    icon: <ViewQuiltRoundedIcon />,
-    title: 'Unrivaled Dashboard',
-    description:
-      'Experience the ultimate control center with unparalleled insights into your website and online product performance.',
-    imageLight: "/images/dashboard-light.png",
-    imageDark: "/images/dashboard-dark.png",
-  },
-  {
-    icon: <EdgesensorHighRoundedIcon />,
-    title: 'Global Mobile Integration',
-    description:
-      'Harness the power of a groundbreaking DePIN network, with data from over 2.65 million devices worldwide.',
-    imageLight: "/images/dash-light.png",
-    imageDark: "/images/dash-dark.png",
-  },
-  {
-    icon: <DevicesRoundedIcon />,
-    title: 'Universal Platform Access',
-    description:
-      'Access Prism on any device, anywhere. Our platform ensures you receive comprehensive data from every corner of the globe.',
-    imageLight: "/images/all-platforms.png",
-    imageDark: "/images/all-platforms.png",
-  },
-];
-
-const Chip = styled(MuiChip)(({ theme, selected }) => ({
-  variants: [
-    {
-      props: { selected },
-      style: {
-        background:
-          'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
-        color: 'hsl(0, 0%, 100%)',
-        borderColor: (theme.vars || theme).palette.primary.light,
-        '& .MuiChip-label': {
-          color: 'hsl(0, 0%, 100%)',
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: (theme.vars || theme).palette.primary.dark,
-        }),
-      },
-    },
-  ],
-}));
-
-export function MobileLayout({ selectedItemIndex, handleItemClick, selectedFeature }) {
-  const mode = useSelector((state) => state.ui.mode);
-
-  if (!items[selectedItemIndex]) {
-    return null;
-  }
-
-  return (
-    <Box
-      sx={{
-        display: { xs: 'flex', sm: 'none' },
-        flexDirection: 'column',
-        gap: 2,
-      }}
-    >
-      <Box sx={{ display: 'flex', gap: 4, overflow: 'auto', mb: 4, pb: 6 }}>
-        {items.map(({ title }, index) => (
-          <Chip
-            size="medium"
-            key={index}
-            label={title}
-            onClick={() => handleItemClick(index)}
-            selected={selectedItemIndex === index}
-          />
-        ))}
-      </Box>
-      <Card variant="outlined">
-        <Box
-          sx={{
-            mb: 2,
-            position: 'relative',
-            minHeight: 280,
-            width: '100%',
-            overflow: 'hidden'
-          }}
-        >
-          <img
-            src={mode === 'dark'
-              ? items[selectedItemIndex].imageDark.replace('url("', '').replace('")', '')
-              : items[selectedItemIndex].imageLight.replace('url("', '').replace('")', '')
-            }
-            alt={items[selectedItemIndex].title}
-            style={{
-              width: '100%',
-              height: '100%',
-              objectFit: 'cover',
-              position: 'absolute',
-              top: 0,
-              left: 0
-            }}
-          />
-        </Box>
-        <Box sx={{ px: 6, py: 4 }}>
-          <Typography
-            gutterBottom
-            sx={{
-              color: 'text.primary',
-              fontWeight: 'medium',
-              fontSize: { xs: '1.5rem', sm: '2rem' },
-            }}
-          >
-            {selectedFeature.title}
-          </Typography>
-          <Typography sx={{ color: 'text.secondary', mb: 1.5 }}>
-            {selectedFeature.description}
-          </Typography>
-        </Box>
-      </Card>
-    </Box>
-  );
-}
-
-MobileLayout.propTypes = {
-  selectedItemIndex: PropTypes.number.isRequired,
-  handleItemClick: PropTypes.func.isRequired,
-  selectedFeature: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    imageLight: PropTypes.string.isRequired,
-    imageDark: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default function Features() {
-  const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
-  const mode = useSelector((state) => state.ui.mode);
-  const handleItemClick = (index) => {
-    setSelectedItemIndex(index);
-  };
-
-  const selectedFeature = items[selectedItemIndex];
-
-  return (
-    <Container id="features" sx={{ py: { xs: 8, sm: 16 }, px: { xs: 12, sm: 12 } }}>
-      <Box sx={{ width: { sm: '100%', md: '60%' } }}>
-        <Typography
-          component="h2"
-          variant="h4"
-          gutterBottom
-          fontFamily="BabaPro"
-          sx={{ color: 'text.primary' }}
-        >
-          Prism Highlights
-        </Typography>
-        <Typography
-          sx={{ color: 'text.secondary', mb: { xs: 12, sm: 12 } }}
-        >
-          Discover the world's first and most advanced uptime monitoring service, powered by a vibrant web3 community. Prism delivers superior insights and a clearer picture of your digital presence, supported by a global network of real devices.
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: { xs: 'column', md: 'row-reverse' },
-          gap: 2,
-        }}
-      >
-        <div>
-          <Box
-            sx={{
-              display: { xs: 'none', sm: 'flex' },
-              flexDirection: 'column',
-              gap: 2,
-              ml: 6,
-              mb: 0,
-              height: '100%',
-            }}
-          >
-            {items.map(({ icon, title, description }, index) => (
-              <Box
-                key={index}
-                component={Button}
-                onClick={() => handleItemClick(index)}
-                sx={[
-                  (theme) => ({
-                    p: 8,
-                    height: '100%',
-                    width: '100%',
-                    '&:hover': {
-                      backgroundColor: mode === 'dark'
-                        ? 'rgba(133, 113, 255, 0.1)'
-                        : (theme.vars || theme).palette.action.hover,
-                    },
-                  }),
-                  selectedItemIndex === index && {
-                    backgroundColor: (theme) => (mode === 'dark' ? 'rgba(133, 113, 255, 0.1)' : theme.palette.action.selected),
-                  },
-                ]}
-              >
-                <Box
-                  sx={[
-                    {
-                      width: '100%',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'left',
-                      gap: 1,
-                      py: 6,
-                      textAlign: 'left',
-                      textTransform: 'none',
-                      color: 'text.secondary',
-                    },
-                    selectedItemIndex === index && {
-                      color: 'text.primary',
-                    },
-                  ]}
-                >
-                  {icon}
-
-                  <Typography variant="h6">{title}</Typography>
-                  <Typography>{description}</Typography>
-                </Box>
-              </Box>
-            ))}
-          </Box>
-          <MobileLayout
-            selectedItemIndex={selectedItemIndex}
-            handleItemClick={handleItemClick}
-            selectedFeature={selectedFeature}
-          />
-        </div>
-        <Box id="stroke-animation"
-          sx={{
-            position: 'relative',
-            display: { xs: 'none', sm: 'flex' },
-            width: { xs: '100%', md: '70%' },
-            height: 'var(--items-image-height)',
-          }}
-        >
-          <Card
-            variant="outlined"
-            sx={{
-              height: '100%',
-              width: '100%',
-              display: { xs: 'none', sm: 'flex' },
-              pointerEvents: 'none',
-              mt: 0,
-            }}
-          >
-            <Box
-              sx={{
-                position: 'relative',
-                width: '100%',
-                height: 500,
-                overflow: 'hidden',
-                objectFit: 'contain',
-                objectPosition: 'center',
-              }}
-            >
-              <img
-                src={mode === 'dark'
-                  ? items[selectedItemIndex]?.imageDark.replace('url("', '').replace('")', '')
-                  : items[selectedItemIndex]?.imageLight.replace('url("', '').replace('")', '')
-                }
-                alt={items[selectedItemIndex]?.title}
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'contain',
-                  position: 'absolute',
-                  top: 0,
-                  left: 0
-                }}
-              />
-            </Box>
-          </Card>
-          <StrokeAnimation />
-        </Box>
-      </Box>
-    </Container>
-  );
-}
diff --git a/src/Components/Home/LogoCarousel.jsx b/src/Components/Home/LogoCarousel.jsx
deleted file mode 100644
index 62b56a510..000000000
--- a/src/Components/Home/LogoCarousel.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import { Box, Container, Typography, Grid } from '@mui/material';
-import { useSelector } from 'react-redux';
-import { useTheme } from '@mui/material/styles';
-
-
-// Swiper imports
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { Autoplay } from 'swiper/modules';
-import 'swiper/css';
-import 'swiper/css/autoplay';
-
-const LogoCarousel = () => {
-  const mode = useSelector((state) => state.ui.mode);
-  const theme = useTheme();
-
-  const lightLogos = [
-    { src: '/images/borderless-dark.png', alt: 'borderless' },
-    { src: '/images/draperdragon-dark.png', alt: 'draperdragon' },
-    { src: '/images/animoca-dark.png', alt: 'animoca' },
-    { src: '/images/gydra-dark.png', alt: 'gydra' },
-    { src: '/images/fusion7-dark.png', alt: 'fusion7' },
-    { src: '/images/initialvc-dark.png', alt: 'initialvc' },
-    { src: '/images/gummies-dark.png', alt: 'gummies' },
-    { src: '/images/laserdigital-dark.png', alt: 'laserdigital' },
-    { src: '/images/depinhub-dark.png', alt: 'depinhub' },
-    { src: '/images/decentralised-dark.png', alt: 'decentralised' },
-    { src: '/images/sagadao-dark.png', alt: 'sagadao' },
-    { src: '/images/seancarey-dark.png', alt: 'seancarey' },
-    { src: '/images/alvarograce-dark.png', alt: 'alvarograce' },
-  ];
-
-  const darkLogos = [
-    { src: '/images/borderless-light.png', alt: 'borderless' },
-    { src: '/images/draperdragon-light.png', alt: 'draperdragon' },
-    { src: '/images/animoca-light.png', alt: 'animoca' },
-    { src: '/images/gydra-light.png', alt: 'gydra' },
-    { src: '/images/fusion7-light.png', alt: 'fusion7' },
-    { src: '/images/initialvc-light.png', alt: 'initialvc' },
-    { src: '/images/gummies-light.png', alt: 'gummies' },
-    { src: '/images/laserdigital-light.png', alt: 'laserdigital' },
-    { src: '/images/depinhub-light.png', alt: 'depinhub' },
-    { src: '/images/decentralised-light.png', alt: 'decentralised' },
-    { src: '/images/sagadao-light.png', alt: 'sagadao' },
-    { src: '/images/seancarey-light.png', alt: 'seancarey' },
-    { src: '/images/alvarograce-light.png', alt: 'alvarograce' },
-  ];
-
-  const logos = mode === 'light' ? lightLogos : darkLogos;
-
-  const logoStyle = {
-    width: 'auto',
-    height: '50px',
-    maxWidth: '100%',
-    margin: '0 12px',
-    opacity: 1,
-  };
-
-  return (
-    <Box
-      component="section"
-      className="brand-slider-section section-padding fix"
-      sx={{
-        py: 28,
-        px: 12,
-      }}
-    >
-      <Box className="brand-slider-container-wrapper">
-        <Box className="brand-slider-wrapper" textAlign="center">
-          <Typography
-            variant="h4"
-            sx={{ mb: 18, opacity: 1, color: theme.palette.text.primary }}
-            fontFamily="BabaPro"
-          >
-            Backed by the best
-          </Typography>
-
-          <Swiper
-            modules={[Autoplay]}
-            autoplay={{ delay: 0, disableOnInteraction: false }}
-            speed={5000}
-            loop={true}
-            breakpoints={{
-              0: { slidesPerView: 3, spaceBetween: 10 },
-              576: { slidesPerView: 4, centeredSlides: true },
-              768: { slidesPerView: 5 },
-              1025: { slidesPerView: 6 },
-              1400: { slidesPerView: 7 },
-              1600: { slidesPerView: 8 },
-            }}
-            spaceBetween={20}
-          >
-            {logos.map((logo, index) => (
-              <SwiperSlide key={index}>
-                <Box className="brand-logo">
-                  <img
-                    src={logo.src}
-                    alt={logo.alt}
-                    style={logoStyle}
-                  />
-                </Box>
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        </Box>
-      </Box>
-    </Box>
-  );
-};
-
-export default LogoCarousel;
diff --git a/src/Components/Home/StrokeAnimation.jsx b/src/Components/Home/StrokeAnimation.jsx
deleted file mode 100644
index eb22d2062..000000000
--- a/src/Components/Home/StrokeAnimation.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { Box } from '@mui/material';
-
-export default function BorderBeam() {
-  return (
-    <Box
-      style={{
-        '--size': 250,
-        '--duration': 7,
-        '--anchor': 90,
-        '--border-width': 1.5,
-        '--color-from': '#842bd2',
-        '--color-to': '#ff5451',
-        '--delay': '-9s',
-      }}
-      sx={{
-        pointerEvents: 'none',
-        position: 'absolute',
-        inset: 0,
-        borderRadius: 'inherit',
-        border: 'calc(var(--border-width) * 1px) solid transparent',
-        maskClip: 'padding-box, border-box',
-        maskComposite: 'intersect',
-        maskImage: 'linear-gradient(transparent, transparent), linear-gradient(white, white)',
-
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-
-          width: 'calc(var(--size) * 1px)',
-          height: 'calc(var(--size) * 1px)',
-
-          background: 'linear-gradient(to left, #842bd2, #ff5451, #8c52ff, #00bf63, transparent)',
-
-          // The “border-beam” keyframes:
-          animation: 'borderBeam calc(var(--duration) * 1s) infinite linear',
-          animationDelay: 'var(--delay)',
-
-          // The offset-path & offset-anchor are experimental:
-          offsetPath: 'rect(0 auto auto 0 round calc(var(--size) * 1px))',
-          offsetAnchor: 'calc(var(--anchor) * 1%) 50%',
-        },
-
-        /* Keyframes (Tailwind's `animate-border-beam`) 
-           We only need a single "to { offset-distance: 100%; }"
-        */
-        '@keyframes borderBeam': {
-          to: {
-            offsetDistance: '100%',
-          },
-        },
-      }}
-    />
-  );
-}
diff --git a/src/Pages/Landing/index.jsx b/src/Pages/Landing/index.jsx
deleted file mode 100644
index 5dfe281bc..000000000
--- a/src/Pages/Landing/index.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import AppBar from "../../Components/Common/AppBar";
-import Footer from "../../Components/Common/Footer";
-import Hero from "../../Components/Home/Hero";
-import Features from "../../Components/Home/Features";
-import Highlights from "../../Components/Home/Highlights";
-import FAQ from "../../Components/Home/FAQ";
-import Divider from "../../Components/Home/Divider";
-import LogoCarousel from "../../Components/Home/LogoCarousel";
-
-const Landing = () => {
-	return (
-		<div>
-			<AppBar />
-			<Hero />
-			<LogoCarousel />
-			<Divider />
-			<div id="features">
-				<Features />
-			</div>
-			<Divider />
-			<div id="highlights">
-				<Highlights />
-			</div>
-			<Divider />
-			<div id="faq">
-				<FAQ />
-			</div>
-			<Footer />
-		</div>
-	);
-};
-
-export default Landing;