diff --git a/src/blog/Blog.tsx b/src/blog/Blog.tsx
new file mode 100644
index 0000000..cca605d
--- /dev/null
+++ b/src/blog/Blog.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material/Container';
+import AppTheme from '../shared-theme/AppTheme';
+import MainContent from './components/MainContent';
+import Latest from './components/Latest';
+import Footer from './components/Footer';
+
+export default function Blog(props: { disableCustomTheme?: boolean }) {
+  return (
+    <AppTheme {...props}>
+      <CssBaseline enableColorScheme />
+
+      <Container
+        maxWidth="lg"
+        component="main"
+        sx={{ display: 'flex', flexDirection: 'column', my: 16, gap: 4 }}
+      >
+        <MainContent />
+        <Latest />
+      </Container>
+      <Footer />
+    </AppTheme>
+  );
+}
diff --git a/src/blog/components/Footer.tsx b/src/blog/components/Footer.tsx
new file mode 100644
index 0000000..1057307
--- /dev/null
+++ b/src/blog/components/Footer.tsx
@@ -0,0 +1,226 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import Link from '@mui/material/Link';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import TwitterIcon from '@mui/icons-material/X';
+
+function Copyright() {
+  return (
+    <Typography variant="body2" sx={{ color: 'text.secondary', mt: 1 }}>
+      {'Copyright © '}
+      <Link color="text.secondary" href="https://mui.com/">
+        Sitemark
+      </Link>
+      &nbsp;
+      {new Date().getFullYear()}
+    </Typography>
+  );
+}
+
+export default function Footer() {
+  return (
+    <React.Fragment>
+      <Divider />
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: { xs: 4, sm: 8 },
+          py: { xs: 8, sm: 10 },
+          textAlign: { sm: 'center', md: 'left' },
+        }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            width: '100%',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 4,
+              minWidth: { xs: '100%', sm: '60%' },
+            }}
+          >
+            <Box sx={{ width: { xs: '100%', sm: '60%' } }}>
+              <Typography
+                variant="body2"
+                gutterBottom
+                sx={{ fontWeight: 600, mt: 2 }}
+              >
+                Join the newsletter
+              </Typography>
+              <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>
+                Subscribe for weekly updates. No spams ever!
+              </Typography>
+              <InputLabel htmlFor="email-newsletter">Email</InputLabel>
+              <Stack direction="row" spacing={1} useFlexGap>
+                <TextField
+                  id="email-newsletter"
+                  hiddenLabel
+                  size="small"
+                  variant="outlined"
+                  fullWidth
+                  aria-label="Enter your email address"
+                  placeholder="Your email address"
+                  slotProps={{
+                    htmlInput: {
+                      autoComplete: 'off',
+                      'aria-label': 'Enter your email address',
+                    },
+                  }}
+                  sx={{ width: '250px' }}
+                />
+                <Button
+                  variant="contained"
+                  color="primary"
+                  size="small"
+                  sx={{ flexShrink: 0 }}
+                >
+                  Subscribe
+                </Button>
+              </Stack>
+            </Box>
+          </Box>
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'flex' },
+              flexDirection: 'column',
+              gap: 1,
+            }}
+          >
+            <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
+              Product
+            </Typography>
+            <Link color="text.secondary" variant="body2" href="#">
+              Features
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Testimonials
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Highlights
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Pricing
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              FAQs
+            </Link>
+          </Box>
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'flex' },
+              flexDirection: 'column',
+              gap: 1,
+            }}
+          >
+            <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
+              Company
+            </Typography>
+            <Link color="text.secondary" variant="body2" href="#">
+              About us
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Careers
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Press
+            </Link>
+          </Box>
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'flex' },
+              flexDirection: 'column',
+              gap: 1,
+            }}
+          >
+            <Typography variant="body2" sx={{ fontWeight: 'medium' }}>
+              Legal
+            </Typography>
+            <Link color="text.secondary" variant="body2" href="#">
+              Terms
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Privacy
+            </Link>
+            <Link color="text.secondary" variant="body2" href="#">
+              Contact
+            </Link>
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            pt: { xs: 4, sm: 8 },
+            width: '100%',
+            borderTop: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <div>
+            <Link color="text.secondary" variant="body2" href="#">
+              Privacy Policy
+            </Link>
+            <Typography sx={{ display: 'inline', mx: 0.5, opacity: 0.5 }}>
+              &nbsp;•&nbsp;
+            </Typography>
+            <Link color="text.secondary" variant="body2" href="#">
+              Terms of Service
+            </Link>
+            <Copyright />
+          </div>
+          <Stack
+            direction="row"
+            spacing={1}
+            useFlexGap
+            sx={{ justifyContent: 'left', color: 'text.secondary' }}
+          >
+            <IconButton
+              color="inherit"
+              size="small"
+              href="https://github.com/mui"
+              aria-label="GitHub"
+              sx={{ alignSelf: 'center' }}
+            >
+              <GitHubIcon />
+            </IconButton>
+            <IconButton
+              color="inherit"
+              size="small"
+              href="https://x.com/MaterialUI"
+              aria-label="X"
+              sx={{ alignSelf: 'center' }}
+            >
+              <TwitterIcon />
+            </IconButton>
+            <IconButton
+              color="inherit"
+              size="small"
+              href="https://www.linkedin.com/company/mui/"
+              aria-label="LinkedIn"
+              sx={{ alignSelf: 'center' }}
+            >
+              <LinkedInIcon />
+            </IconButton>
+          </Stack>
+        </Box>
+      </Container>
+    </React.Fragment>
+  );
+}
diff --git a/src/blog/components/Latest.tsx b/src/blog/components/Latest.tsx
new file mode 100644
index 0000000..9af951a
--- /dev/null
+++ b/src/blog/components/Latest.tsx
@@ -0,0 +1,232 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Pagination from '@mui/material/Pagination';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
+
+const articleInfo = [
+  {
+    tag: 'Engineering',
+    title: 'The future of AI in software engineering',
+    description:
+      'Artificial intelligence is revolutionizing software engineering. Explore how AI-driven tools are enhancing development processes and improving software quality.',
+    authors: [
+      { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
+      { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
+    ],
+  },
+  {
+    tag: 'Product',
+    title: 'Driving growth with user-centric product design',
+    description:
+      'Our user-centric product design approach is driving significant growth. Learn about the strategies we employ to create products that resonate with users.',
+    authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }],
+  },
+  {
+    tag: 'Design',
+    title: 'Embracing minimalism in modern design',
+    description:
+      'Minimalism is a key trend in modern design. Discover how our design team incorporates minimalist principles to create clean and impactful user experiences.',
+    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
+  },
+  {
+    tag: 'Company',
+    title: 'Cultivating a culture of innovation',
+    description:
+      'Innovation is at the heart of our company culture. Learn about the initiatives we have in place to foster creativity and drive groundbreaking solutions.',
+    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
+  },
+  {
+    tag: 'Engineering',
+    title: 'Advancing cybersecurity with next-gen solutions',
+    description:
+      'Our next-generation cybersecurity solutions are setting new standards in the industry. Discover how we protect our clients from evolving cyber threats.',
+    authors: [
+      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
+      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
+    ],
+  },
+  {
+    tag: 'Product',
+    title: 'Enhancing customer experience through innovation',
+    description:
+      'Our innovative approaches are enhancing customer experience. Learn about the new features and improvements that are delighting our users.',
+    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
+  },
+  {
+    tag: 'Engineering',
+    title: 'Pioneering sustainable engineering solutions',
+    description:
+      "Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
+    authors: [
+      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
+      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
+    ],
+  },
+  {
+    tag: 'Product',
+    title: 'Maximizing efficiency with our latest product updates',
+    description:
+      'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
+    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
+  },
+  {
+    tag: 'Design',
+    title: 'Designing for the future: trends and insights',
+    description:
+      'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
+    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
+  },
+  {
+    tag: 'Company',
+    title: "Our company's journey: milestones and achievements",
+    description:
+      "Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
+    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
+  },
+];
+
+const StyledTypography = styled(Typography)({
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 2,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+const TitleTypography = styled(Typography)(({ theme }) => ({
+  position: 'relative',
+  textDecoration: 'none',
+  '&:hover': { cursor: 'pointer' },
+  '& .arrow': {
+    visibility: 'hidden',
+    position: 'absolute',
+    right: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+  },
+  '&:hover .arrow': {
+    visibility: 'visible',
+    opacity: 0.7,
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '3px',
+    borderRadius: '8px',
+  },
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    width: 0,
+    height: '1px',
+    bottom: 0,
+    left: 0,
+    backgroundColor: (theme.vars || theme).palette.text.primary,
+    opacity: 0.3,
+    transition: 'width 0.3s ease, opacity 0.3s ease',
+  },
+  '&:hover::before': {
+    width: '100%',
+  },
+}));
+
+function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 2,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
+      >
+        <AvatarGroup max={3}>
+          {authors.map((author, index) => (
+            <Avatar
+              key={index}
+              alt={author.name}
+              src={author.avatar}
+              sx={{ width: 24, height: 24 }}
+            />
+          ))}
+        </AvatarGroup>
+        <Typography variant="caption">
+          {authors.map((author) => author.name).join(', ')}
+        </Typography>
+      </Box>
+      <Typography variant="caption">July 14, 2021</Typography>
+    </Box>
+  );
+}
+
+export default function Latest() {
+  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
+    null,
+  );
+
+  const handleFocus = (index: number) => {
+    setFocusedCardIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedCardIndex(null);
+  };
+
+  return (
+    <div>
+      <Typography variant="h2" gutterBottom>
+        Latest
+      </Typography>
+      <Grid container spacing={8} columns={12} sx={{ my: 4 }}>
+        {articleInfo.map((article, index) => (
+          <Grid key={index} size={{ xs: 12, sm: 6 }}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                gap: 1,
+                height: '100%',
+              }}
+            >
+              <Typography gutterBottom variant="caption" component="div">
+                {article.tag}
+              </Typography>
+              <TitleTypography
+                gutterBottom
+                variant="h6"
+                onFocus={() => handleFocus(index)}
+                onBlur={handleBlur}
+                tabIndex={0}
+                className={focusedCardIndex === index ? 'Mui-focused' : ''}
+              >
+                {article.title}
+                <NavigateNextRoundedIcon
+                  className="arrow"
+                  sx={{ fontSize: '1rem' }}
+                />
+              </TitleTypography>
+              <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+                {article.description}
+              </StyledTypography>
+
+              <Author authors={article.authors} />
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
+      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 4 }}>
+        <Pagination hidePrevButton hideNextButton count={10} boundaryCount={10} />
+      </Box>
+    </div>
+  );
+}
diff --git a/src/blog/components/MainContent.tsx b/src/blog/components/MainContent.tsx
new file mode 100644
index 0000000..ceeb0dc
--- /dev/null
+++ b/src/blog/components/MainContent.tsx
@@ -0,0 +1,484 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Chip from '@mui/material/Chip';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import FormControl from '@mui/material/FormControl';
+import InputAdornment from '@mui/material/InputAdornment';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import { styled } from '@mui/material/styles';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import RssFeedRoundedIcon from '@mui/icons-material/RssFeedRounded';
+
+const cardData = [
+  {
+    img: 'https://picsum.photos/800/450?random=1',
+    tag: 'Engineering',
+    title: 'Revolutionizing software development with cutting-edge tools',
+    description:
+      'Our latest engineering tools are designed to streamline workflows and boost productivity. Discover how these innovations are transforming the software development landscape.',
+    authors: [
+      { name: 'Remy Sharp', avatar: '/static/images/avatar/1.jpg' },
+      { name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' },
+    ],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=2',
+    tag: 'Product',
+    title: 'Innovative product features that drive success',
+    description:
+      'Explore the key features of our latest product release that are helping businesses achieve their goals. From user-friendly interfaces to robust functionality, learn why our product stands out.',
+    authors: [{ name: 'Erica Johns', avatar: '/static/images/avatar/6.jpg' }],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=3',
+    tag: 'Design',
+    title: 'Designing for the future: trends and insights',
+    description:
+      'Stay ahead of the curve with the latest design trends and insights. Our design team shares their expertise on creating intuitive and visually stunning user experiences.',
+    authors: [{ name: 'Kate Morrison', avatar: '/static/images/avatar/7.jpg' }],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=4',
+    tag: 'Company',
+    title: "Our company's journey: milestones and achievements",
+    description:
+      "Take a look at our company's journey and the milestones we've achieved along the way. From humble beginnings to industry leader, discover our story of growth and success.",
+    authors: [{ name: 'Cindy Baker', avatar: '/static/images/avatar/3.jpg' }],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=45',
+    tag: 'Engineering',
+    title: 'Pioneering sustainable engineering solutions',
+    description:
+      "Learn about our commitment to sustainability and the innovative engineering solutions we're implementing to create a greener future. Discover the impact of our eco-friendly initiatives.",
+    authors: [
+      { name: 'Agnes Walker', avatar: '/static/images/avatar/4.jpg' },
+      { name: 'Trevor Henderson', avatar: '/static/images/avatar/5.jpg' },
+    ],
+  },
+  {
+    img: 'https://picsum.photos/800/450?random=6',
+    tag: 'Product',
+    title: 'Maximizing efficiency with our latest product updates',
+    description:
+      'Our recent product updates are designed to help you maximize efficiency and achieve more. Get a detailed overview of the new features and improvements that can elevate your workflow.',
+    authors: [{ name: 'Travis Howard', avatar: '/static/images/avatar/2.jpg' }],
+  },
+];
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: 0,
+  height: '100%',
+  backgroundColor: (theme.vars || theme).palette.background.paper,
+  '&:hover': {
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+  },
+  '&:focus-visible': {
+    outline: '3px solid',
+    outlineColor: 'hsla(210, 98%, 48%, 0.5)',
+    outlineOffset: '2px',
+  },
+}));
+
+const StyledCardContent = styled(CardContent)({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  padding: 16,
+  flexGrow: 1,
+  '&:last-child': {
+    paddingBottom: 16,
+  },
+});
+
+const StyledTypography = styled(Typography)({
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  WebkitLineClamp: 2,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+function Author({ authors }: { authors: { name: string; avatar: string }[] }) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 2,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px',
+      }}
+    >
+      <Box
+        sx={{ display: 'flex', flexDirection: 'row', gap: 1, alignItems: 'center' }}
+      >
+        <AvatarGroup max={3}>
+          {authors.map((author, index) => (
+            <Avatar
+              key={index}
+              alt={author.name}
+              src={author.avatar}
+              sx={{ width: 24, height: 24 }}
+            />
+          ))}
+        </AvatarGroup>
+        <Typography variant="caption">
+          {authors.map((author) => author.name).join(', ')}
+        </Typography>
+      </Box>
+      <Typography variant="caption">July 14, 2021</Typography>
+    </Box>
+  );
+}
+
+export function Search() {
+  return (
+    <FormControl sx={{ width: { xs: '100%', md: '25ch' } }} variant="outlined">
+      <OutlinedInput
+        size="small"
+        id="search"
+        placeholder="Search…"
+        sx={{ flexGrow: 1 }}
+        startAdornment={
+          <InputAdornment position="start" sx={{ color: 'text.primary' }}>
+            <SearchRoundedIcon fontSize="small" />
+          </InputAdornment>
+        }
+        inputProps={{
+          'aria-label': 'search',
+        }}
+      />
+    </FormControl>
+  );
+}
+
+export default function MainContent() {
+  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
+    null,
+  );
+
+  const handleFocus = (index: number) => {
+    setFocusedCardIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedCardIndex(null);
+  };
+
+  const handleClick = () => {
+    console.info('You clicked the filter chip.');
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+      <div>
+        <Typography variant="h1" gutterBottom>
+          Blog
+        </Typography>
+        <Typography>Stay in the loop with the latest about our products</Typography>
+      </div>
+      <Box
+        sx={{
+          display: { xs: 'flex', sm: 'none' },
+          flexDirection: 'row',
+          gap: 1,
+          width: { xs: '100%', md: 'fit-content' },
+          overflow: 'auto',
+        }}
+      >
+        <Search />
+        <IconButton size="small" aria-label="RSS feed">
+          <RssFeedRoundedIcon />
+        </IconButton>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column-reverse', md: 'row' },
+          width: '100%',
+          justifyContent: 'space-between',
+          alignItems: { xs: 'start', md: 'center' },
+          gap: 4,
+          overflow: 'auto',
+        }}
+      >
+        <Box
+          sx={{
+            display: 'inline-flex',
+            flexDirection: 'row',
+            gap: 3,
+            overflow: 'auto',
+          }}
+        >
+          <Chip onClick={handleClick} size="medium" label="All categories" />
+          <Chip
+            onClick={handleClick}
+            size="medium"
+            label="Company"
+            sx={{
+              backgroundColor: 'transparent',
+              border: 'none',
+            }}
+          />
+          <Chip
+            onClick={handleClick}
+            size="medium"
+            label="Product"
+            sx={{
+              backgroundColor: 'transparent',
+              border: 'none',
+            }}
+          />
+          <Chip
+            onClick={handleClick}
+            size="medium"
+            label="Design"
+            sx={{
+              backgroundColor: 'transparent',
+              border: 'none',
+            }}
+          />
+          <Chip
+            onClick={handleClick}
+            size="medium"
+            label="Engineering"
+            sx={{
+              backgroundColor: 'transparent',
+              border: 'none',
+            }}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: { xs: 'none', sm: 'flex' },
+            flexDirection: 'row',
+            gap: 1,
+            width: { xs: '100%', md: 'fit-content' },
+            overflow: 'auto',
+          }}
+        >
+          <Search />
+          <IconButton size="small" aria-label="RSS feed">
+            <RssFeedRoundedIcon />
+          </IconButton>
+        </Box>
+      </Box>
+      <Grid container spacing={2} columns={12}>
+        <Grid size={{ xs: 12, md: 6 }}>
+          <StyledCard
+            variant="outlined"
+            onFocus={() => handleFocus(0)}
+            onBlur={handleBlur}
+            tabIndex={0}
+            className={focusedCardIndex === 0 ? 'Mui-focused' : ''}
+          >
+            <CardMedia
+              component="img"
+              alt="green iguana"
+              image={cardData[0].img}
+              sx={{
+                aspectRatio: '16 / 9',
+                borderBottom: '1px solid',
+                borderColor: 'divider',
+              }}
+            />
+            <StyledCardContent>
+              <Typography gutterBottom variant="caption" component="div">
+                {cardData[0].tag}
+              </Typography>
+              <Typography gutterBottom variant="h6" component="div">
+                {cardData[0].title}
+              </Typography>
+              <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+                {cardData[0].description}
+              </StyledTypography>
+            </StyledCardContent>
+            <Author authors={cardData[0].authors} />
+          </StyledCard>
+        </Grid>
+        <Grid size={{ xs: 12, md: 6 }}>
+          <StyledCard
+            variant="outlined"
+            onFocus={() => handleFocus(1)}
+            onBlur={handleBlur}
+            tabIndex={0}
+            className={focusedCardIndex === 1 ? 'Mui-focused' : ''}
+          >
+            <CardMedia
+              component="img"
+              alt="green iguana"
+              image={cardData[1].img}
+              aspect-ratio="16 / 9"
+              sx={{
+                borderBottom: '1px solid',
+                borderColor: 'divider',
+              }}
+            />
+            <StyledCardContent>
+              <Typography gutterBottom variant="caption" component="div">
+                {cardData[1].tag}
+              </Typography>
+              <Typography gutterBottom variant="h6" component="div">
+                {cardData[1].title}
+              </Typography>
+              <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+                {cardData[1].description}
+              </StyledTypography>
+            </StyledCardContent>
+            <Author authors={cardData[1].authors} />
+          </StyledCard>
+        </Grid>
+        <Grid size={{ xs: 12, md: 4 }}>
+          <StyledCard
+            variant="outlined"
+            onFocus={() => handleFocus(2)}
+            onBlur={handleBlur}
+            tabIndex={0}
+            className={focusedCardIndex === 2 ? 'Mui-focused' : ''}
+            sx={{ height: '100%' }}
+          >
+            <CardMedia
+              component="img"
+              alt="green iguana"
+              image={cardData[2].img}
+              sx={{
+                height: { sm: 'auto', md: '50%' },
+                aspectRatio: { sm: '16 / 9', md: '' },
+              }}
+            />
+            <StyledCardContent>
+              <Typography gutterBottom variant="caption" component="div">
+                {cardData[2].tag}
+              </Typography>
+              <Typography gutterBottom variant="h6" component="div">
+                {cardData[2].title}
+              </Typography>
+              <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+                {cardData[2].description}
+              </StyledTypography>
+            </StyledCardContent>
+            <Author authors={cardData[2].authors} />
+          </StyledCard>
+        </Grid>
+        <Grid size={{ xs: 12, md: 4 }}>
+          <Box
+            sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}
+          >
+            <StyledCard
+              variant="outlined"
+              onFocus={() => handleFocus(3)}
+              onBlur={handleBlur}
+              tabIndex={0}
+              className={focusedCardIndex === 3 ? 'Mui-focused' : ''}
+              sx={{ height: '100%' }}
+            >
+              <StyledCardContent
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  height: '100%',
+                }}
+              >
+                <div>
+                  <Typography gutterBottom variant="caption" component="div">
+                    {cardData[3].tag}
+                  </Typography>
+                  <Typography gutterBottom variant="h6" component="div">
+                    {cardData[3].title}
+                  </Typography>
+                  <StyledTypography
+                    variant="body2"
+                    color="text.secondary"
+                    gutterBottom
+                  >
+                    {cardData[3].description}
+                  </StyledTypography>
+                </div>
+              </StyledCardContent>
+              <Author authors={cardData[3].authors} />
+            </StyledCard>
+            <StyledCard
+              variant="outlined"
+              onFocus={() => handleFocus(4)}
+              onBlur={handleBlur}
+              tabIndex={0}
+              className={focusedCardIndex === 4 ? 'Mui-focused' : ''}
+              sx={{ height: '100%' }}
+            >
+              <StyledCardContent
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  height: '100%',
+                }}
+              >
+                <div>
+                  <Typography gutterBottom variant="caption" component="div">
+                    {cardData[4].tag}
+                  </Typography>
+                  <Typography gutterBottom variant="h6" component="div">
+                    {cardData[4].title}
+                  </Typography>
+                  <StyledTypography
+                    variant="body2"
+                    color="text.secondary"
+                    gutterBottom
+                  >
+                    {cardData[4].description}
+                  </StyledTypography>
+                </div>
+              </StyledCardContent>
+              <Author authors={cardData[4].authors} />
+            </StyledCard>
+          </Box>
+        </Grid>
+        <Grid size={{ xs: 12, md: 4 }}>
+          <StyledCard
+            variant="outlined"
+            onFocus={() => handleFocus(5)}
+            onBlur={handleBlur}
+            tabIndex={0}
+            className={focusedCardIndex === 5 ? 'Mui-focused' : ''}
+            sx={{ height: '100%' }}
+          >
+            <CardMedia
+              component="img"
+              alt="green iguana"
+              image={cardData[5].img}
+              sx={{
+                height: { sm: 'auto', md: '50%' },
+                aspectRatio: { sm: '16 / 9', md: '' },
+              }}
+            />
+            <StyledCardContent>
+              <Typography gutterBottom variant="caption" component="div">
+                {cardData[5].tag}
+              </Typography>
+              <Typography gutterBottom variant="h6" component="div">
+                {cardData[5].title}
+              </Typography>
+              <StyledTypography variant="body2" color="text.secondary" gutterBottom>
+                {cardData[5].description}
+              </StyledTypography>
+            </StyledCardContent>
+            <Author authors={cardData[5].authors} />
+          </StyledCard>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx
new file mode 100644
index 0000000..a4a512c
--- /dev/null
+++ b/src/shared-theme/AppTheme.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import type { ThemeOptions } from '@mui/material/styles';
+import { inputsCustomizations } from './customizations/inputs';
+import { dataDisplayCustomizations } from './customizations/dataDisplay';
+import { feedbackCustomizations } from './customizations/feedback';
+import { navigationCustomizations } from './customizations/navigation';
+import { surfacesCustomizations } from './customizations/surfaces';
+import { colorSchemes, typography, shadows, shape } from './themePrimitives';
+
+interface AppThemeProps {
+  children: React.ReactNode;
+  /**
+   * This is for the docs site. You can ignore it or remove it.
+   */
+  disableCustomTheme?: boolean;
+  themeComponents?: ThemeOptions['components'];
+}
+
+export default function AppTheme(props: AppThemeProps) {
+  const { children, disableCustomTheme, themeComponents } = props;
+  const theme = React.useMemo(() => {
+    return disableCustomTheme
+      ? {}
+      : createTheme({
+          // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
+          cssVariables: {
+            colorSchemeSelector: 'data-mui-color-scheme',
+            cssVarPrefix: 'template',
+          },
+          colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
+          typography,
+          shadows,
+          shape,
+          components: {
+            ...inputsCustomizations,
+            ...dataDisplayCustomizations,
+            ...feedbackCustomizations,
+            ...navigationCustomizations,
+            ...surfacesCustomizations,
+            ...themeComponents,
+          },
+        });
+  }, [disableCustomTheme, themeComponents]);
+  if (disableCustomTheme) {
+    return <React.Fragment>{children}</React.Fragment>;
+  }
+  return (
+    <ThemeProvider theme={theme} disableTransitionOnChange>
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/src/shared-theme/ColorModeIconDropdown.tsx b/src/shared-theme/ColorModeIconDropdown.tsx
new file mode 100644
index 0000000..3af1e07
--- /dev/null
+++ b/src/shared-theme/ColorModeIconDropdown.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
+import LightModeIcon from '@mui/icons-material/LightModeRounded';
+import Box from '@mui/material/Box';
+import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import { useColorScheme } from '@mui/material/styles';
+
+export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
+  const { mode, systemMode, setMode } = useColorScheme();
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
+    setMode(targetMode);
+    handleClose();
+  };
+  if (!mode) {
+    return (
+      <Box
+        data-screenshot="toggle-mode"
+        sx={(theme) => ({
+          verticalAlign: 'bottom',
+          display: 'inline-flex',
+          width: '2.25rem',
+          height: '2.25rem',
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: '1px solid',
+          borderColor: (theme.vars || theme).palette.divider,
+        })}
+      />
+    );
+  }
+  const resolvedMode = (systemMode || mode) as 'light' | 'dark';
+  const icon = {
+    light: <LightModeIcon />,
+    dark: <DarkModeIcon />,
+  }[resolvedMode];
+  return (
+    <React.Fragment>
+      <IconButton
+        data-screenshot="toggle-mode"
+        onClick={handleClick}
+        disableRipple
+        size="small"
+        aria-controls={open ? 'color-scheme-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        {...props}
+      >
+        {icon}
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        id="account-menu"
+        open={open}
+        onClose={handleClose}
+        onClick={handleClose}
+        slotProps={{
+          paper: {
+            variant: 'outlined',
+            elevation: 0,
+            sx: {
+              my: '4px',
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
+          System
+        </MenuItem>
+        <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
+          Light
+        </MenuItem>
+        <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
+          Dark
+        </MenuItem>
+      </Menu>
+    </React.Fragment>
+  );
+}
diff --git a/src/shared-theme/ColorModeSelect.tsx b/src/shared-theme/ColorModeSelect.tsx
new file mode 100644
index 0000000..6e71b9b
--- /dev/null
+++ b/src/shared-theme/ColorModeSelect.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useColorScheme } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
+import Select, { SelectProps } from '@mui/material/Select';
+
+export default function ColorModeSelect(props: SelectProps) {
+  const { mode, setMode } = useColorScheme();
+  if (!mode) {
+    return null;
+  }
+  return (
+    <Select
+      value={mode}
+      onChange={(event) =>
+        setMode(event.target.value as 'system' | 'light' | 'dark')
+      }
+      SelectDisplayProps={{
+        // @ts-ignore
+        'data-screenshot': 'toggle-mode',
+      }}
+      {...props}
+    >
+      <MenuItem value="system">System</MenuItem>
+      <MenuItem value="light">Light</MenuItem>
+      <MenuItem value="dark">Dark</MenuItem>
+    </Select>
+  );
+}
diff --git a/src/shared-theme/customizations/dataDisplay.tsx b/src/shared-theme/customizations/dataDisplay.tsx
new file mode 100644
index 0000000..b6b2b46
--- /dev/null
+++ b/src/shared-theme/customizations/dataDisplay.tsx
@@ -0,0 +1,233 @@
+import { Theme, alpha, Components } from '@mui/material/styles';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+import { typographyClasses } from '@mui/material/Typography';
+import { buttonBaseClasses } from '@mui/material/ButtonBase';
+import { chipClasses } from '@mui/material/Chip';
+import { iconButtonClasses } from '@mui/material/IconButton';
+import { gray, red, green } from '../themePrimitives';
+
+/* eslint-disable import/prefer-default-export */
+export const dataDisplayCustomizations: Components<Theme> = {
+  MuiList: {
+    styleOverrides: {
+      root: {
+        padding: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0,
+      },
+    },
+  },
+  MuiListItem: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        [`& .${svgIconClasses.root}`]: {
+          width: '1rem',
+          height: '1rem',
+          color: (theme.vars || theme).palette.text.secondary,
+        },
+        [`& .${typographyClasses.root}`]: {
+          fontWeight: 500,
+        },
+        [`& .${buttonBaseClasses.root}`]: {
+          display: 'flex',
+          gap: 8,
+          padding: '2px 8px',
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          opacity: 0.7,
+          '&.Mui-selected': {
+            opacity: 1,
+            backgroundColor: alpha(theme.palette.action.selected, 0.3),
+            [`& .${svgIconClasses.root}`]: {
+              color: (theme.vars || theme).palette.text.primary,
+            },
+            '&:focus-visible': {
+              backgroundColor: alpha(theme.palette.action.selected, 0.3),
+            },
+            '&:hover': {
+              backgroundColor: alpha(theme.palette.action.selected, 0.5),
+            },
+          },
+          '&:focus-visible': {
+            backgroundColor: 'transparent',
+          },
+        },
+      }),
+    },
+  },
+  MuiListItemText: {
+    styleOverrides: {
+      primary: ({ theme }) => ({
+        fontSize: theme.typography.body2.fontSize,
+        fontWeight: 500,
+        lineHeight: theme.typography.body2.lineHeight,
+      }),
+      secondary: ({ theme }) => ({
+        fontSize: theme.typography.caption.fontSize,
+        lineHeight: theme.typography.caption.lineHeight,
+      }),
+    },
+  },
+  MuiListSubheader: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        backgroundColor: 'transparent',
+        padding: '4px 8px',
+        fontSize: theme.typography.caption.fontSize,
+        fontWeight: 500,
+        lineHeight: theme.typography.caption.lineHeight,
+      }),
+    },
+  },
+  MuiListItemIcon: {
+    styleOverrides: {
+      root: {
+        minWidth: 0,
+      },
+    },
+  },
+  MuiChip: {
+    defaultProps: {
+      size: 'small',
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        border: '1px solid',
+        borderRadius: '999px',
+        [`& .${chipClasses.label}`]: {
+          fontWeight: 600,
+        },
+        variants: [
+          {
+            props: {
+              color: 'default',
+            },
+            style: {
+              borderColor: gray[200],
+              backgroundColor: gray[100],
+              [`& .${chipClasses.label}`]: {
+                color: gray[500],
+              },
+              [`& .${chipClasses.icon}`]: {
+                color: gray[500],
+              },
+              ...theme.applyStyles('dark', {
+                borderColor: gray[700],
+                backgroundColor: gray[800],
+                [`& .${chipClasses.label}`]: {
+                  color: gray[300],
+                },
+                [`& .${chipClasses.icon}`]: {
+                  color: gray[300],
+                },
+              }),
+            },
+          },
+          {
+            props: {
+              color: 'success',
+            },
+            style: {
+              borderColor: green[200],
+              backgroundColor: green[50],
+              [`& .${chipClasses.label}`]: {
+                color: green[500],
+              },
+              [`& .${chipClasses.icon}`]: {
+                color: green[500],
+              },
+              ...theme.applyStyles('dark', {
+                borderColor: green[800],
+                backgroundColor: green[900],
+                [`& .${chipClasses.label}`]: {
+                  color: green[300],
+                },
+                [`& .${chipClasses.icon}`]: {
+                  color: green[300],
+                },
+              }),
+            },
+          },
+          {
+            props: {
+              color: 'error',
+            },
+            style: {
+              borderColor: red[100],
+              backgroundColor: red[50],
+              [`& .${chipClasses.label}`]: {
+                color: red[500],
+              },
+              [`& .${chipClasses.icon}`]: {
+                color: red[500],
+              },
+              ...theme.applyStyles('dark', {
+                borderColor: red[800],
+                backgroundColor: red[900],
+                [`& .${chipClasses.label}`]: {
+                  color: red[200],
+                },
+                [`& .${chipClasses.icon}`]: {
+                  color: red[300],
+                },
+              }),
+            },
+          },
+          {
+            props: { size: 'small' },
+            style: {
+              maxHeight: 20,
+              [`& .${chipClasses.label}`]: {
+                fontSize: theme.typography.caption.fontSize,
+              },
+              [`& .${svgIconClasses.root}`]: {
+                fontSize: theme.typography.caption.fontSize,
+              },
+            },
+          },
+          {
+            props: { size: 'medium' },
+            style: {
+              [`& .${chipClasses.label}`]: {
+                fontSize: theme.typography.caption.fontSize,
+              },
+            },
+          },
+        ],
+      }),
+    },
+  },
+  MuiTablePagination: {
+    styleOverrides: {
+      actions: {
+        display: 'flex',
+        gap: 8,
+        marginRight: 6,
+        [`& .${iconButtonClasses.root}`]: {
+          minWidth: 0,
+          width: 36,
+          height: 36,
+        },
+      },
+    },
+  },
+  MuiIcon: {
+    defaultProps: {
+      fontSize: 'small',
+    },
+    styleOverrides: {
+      root: {
+        variants: [
+          {
+            props: {
+              fontSize: 'small',
+            },
+            style: {
+              fontSize: '1rem',
+            },
+          },
+        ],
+      },
+    },
+  },
+};
diff --git a/src/shared-theme/customizations/feedback.tsx b/src/shared-theme/customizations/feedback.tsx
new file mode 100644
index 0000000..6d475c9
--- /dev/null
+++ b/src/shared-theme/customizations/feedback.tsx
@@ -0,0 +1,46 @@
+import { Theme, alpha, Components } from '@mui/material/styles';
+import { gray, orange } from '../themePrimitives';
+
+/* eslint-disable import/prefer-default-export */
+export const feedbackCustomizations: Components<Theme> = {
+  MuiAlert: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        borderRadius: 10,
+        backgroundColor: orange[100],
+        color: (theme.vars || theme).palette.text.primary,
+        border: `1px solid ${alpha(orange[300], 0.5)}`,
+        '& .MuiAlert-icon': {
+          color: orange[500],
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: `${alpha(orange[900], 0.5)}`,
+          border: `1px solid ${alpha(orange[800], 0.5)}`,
+        }),
+      }),
+    },
+  },
+  MuiDialog: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        '& .MuiDialog-paper': {
+          borderRadius: '10px',
+          border: '1px solid',
+          borderColor: (theme.vars || theme).palette.divider,
+        },
+      }),
+    },
+  },
+  MuiLinearProgress: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        height: 8,
+        borderRadius: 8,
+        backgroundColor: gray[200],
+        ...theme.applyStyles('dark', {
+          backgroundColor: gray[800],
+        }),
+      }),
+    },
+  },
+};
diff --git a/src/shared-theme/customizations/inputs.tsx b/src/shared-theme/customizations/inputs.tsx
new file mode 100644
index 0000000..b384563
--- /dev/null
+++ b/src/shared-theme/customizations/inputs.tsx
@@ -0,0 +1,445 @@
+import * as React from 'react';
+import { alpha, Theme, Components } from '@mui/material/styles';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
+import { toggleButtonClasses } from '@mui/material/ToggleButton';
+import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
+import { gray, brand } from '../themePrimitives';
+
+/* eslint-disable import/prefer-default-export */
+export const inputsCustomizations: Components<Theme> = {
+  MuiButtonBase: {
+    defaultProps: {
+      disableTouchRipple: true,
+      disableRipple: true,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        boxSizing: 'border-box',
+        transition: 'all 100ms ease-in',
+        '&:focus-visible': {
+          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+          outlineOffset: '2px',
+        },
+      }),
+    },
+  },
+  MuiButton: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        boxShadow: 'none',
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        textTransform: 'none',
+        variants: [
+          {
+            props: {
+              size: 'small',
+            },
+            style: {
+              height: '2.25rem',
+              padding: '8px 12px',
+            },
+          },
+          {
+            props: {
+              size: 'medium',
+            },
+            style: {
+              height: '2.5rem', // 40px
+            },
+          },
+          {
+            props: {
+              color: 'primary',
+              variant: 'contained',
+            },
+            style: {
+              color: 'white',
+              backgroundColor: gray[900],
+              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
+              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
+              border: `1px solid ${gray[700]}`,
+              '&:hover': {
+                backgroundImage: 'none',
+                backgroundColor: gray[700],
+                boxShadow: 'none',
+              },
+              '&:active': {
+                backgroundColor: gray[800],
+              },
+              ...theme.applyStyles('dark', {
+                color: 'black',
+                backgroundColor: gray[50],
+                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
+                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
+                border: `1px solid ${gray[50]}`,
+                '&:hover': {
+                  backgroundImage: 'none',
+                  backgroundColor: gray[300],
+                  boxShadow: 'none',
+                },
+                '&:active': {
+                  backgroundColor: gray[400],
+                },
+              }),
+            },
+          },
+          {
+            props: {
+              color: 'secondary',
+              variant: 'contained',
+            },
+            style: {
+              color: 'white',
+              backgroundColor: brand[300],
+              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+              border: `1px solid ${brand[500]}`,
+              '&:hover': {
+                backgroundColor: brand[700],
+                boxShadow: 'none',
+              },
+              '&:active': {
+                backgroundColor: brand[700],
+                backgroundImage: 'none',
+              },
+            },
+          },
+          {
+            props: {
+              variant: 'outlined',
+            },
+            style: {
+              color: (theme.vars || theme).palette.text.primary,
+              border: '1px solid',
+              borderColor: gray[200],
+              backgroundColor: alpha(gray[50], 0.3),
+              '&:hover': {
+                backgroundColor: gray[100],
+                borderColor: gray[300],
+              },
+              '&:active': {
+                backgroundColor: gray[200],
+              },
+              ...theme.applyStyles('dark', {
+                backgroundColor: gray[800],
+                borderColor: gray[700],
+
+                '&:hover': {
+                  backgroundColor: gray[900],
+                  borderColor: gray[600],
+                },
+                '&:active': {
+                  backgroundColor: gray[900],
+                },
+              }),
+            },
+          },
+          {
+            props: {
+              color: 'secondary',
+              variant: 'outlined',
+            },
+            style: {
+              color: brand[700],
+              border: '1px solid',
+              borderColor: brand[200],
+              backgroundColor: brand[50],
+              '&:hover': {
+                backgroundColor: brand[100],
+                borderColor: brand[400],
+              },
+              '&:active': {
+                backgroundColor: alpha(brand[200], 0.7),
+              },
+              ...theme.applyStyles('dark', {
+                color: brand[50],
+                border: '1px solid',
+                borderColor: brand[900],
+                backgroundColor: alpha(brand[900], 0.3),
+                '&:hover': {
+                  borderColor: brand[700],
+                  backgroundColor: alpha(brand[900], 0.6),
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[900], 0.5),
+                },
+              }),
+            },
+          },
+          {
+            props: {
+              variant: 'text',
+            },
+            style: {
+              color: gray[600],
+              '&:hover': {
+                backgroundColor: gray[100],
+              },
+              '&:active': {
+                backgroundColor: gray[200],
+              },
+              ...theme.applyStyles('dark', {
+                color: gray[50],
+                '&:hover': {
+                  backgroundColor: gray[700],
+                },
+                '&:active': {
+                  backgroundColor: alpha(gray[700], 0.7),
+                },
+              }),
+            },
+          },
+          {
+            props: {
+              color: 'secondary',
+              variant: 'text',
+            },
+            style: {
+              color: brand[700],
+              '&:hover': {
+                backgroundColor: alpha(brand[100], 0.5),
+              },
+              '&:active': {
+                backgroundColor: alpha(brand[200], 0.7),
+              },
+              ...theme.applyStyles('dark', {
+                color: brand[100],
+                '&:hover': {
+                  backgroundColor: alpha(brand[900], 0.5),
+                },
+                '&:active': {
+                  backgroundColor: alpha(brand[900], 0.3),
+                },
+              }),
+            },
+          },
+        ],
+      }),
+    },
+  },
+  MuiIconButton: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        boxShadow: 'none',
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        textTransform: 'none',
+        fontWeight: theme.typography.fontWeightMedium,
+        letterSpacing: 0,
+        color: (theme.vars || theme).palette.text.primary,
+        border: '1px solid ',
+        borderColor: gray[200],
+        backgroundColor: alpha(gray[50], 0.3),
+        '&:hover': {
+          backgroundColor: gray[100],
+          borderColor: gray[300],
+        },
+        '&:active': {
+          backgroundColor: gray[200],
+        },
+        ...theme.applyStyles('dark', {
+          backgroundColor: gray[800],
+          borderColor: gray[700],
+          '&:hover': {
+            backgroundColor: gray[900],
+            borderColor: gray[600],
+          },
+          '&:active': {
+            backgroundColor: gray[900],
+          },
+        }),
+        variants: [
+          {
+            props: {
+              size: 'small',
+            },
+            style: {
+              width: '2.25rem',
+              height: '2.25rem',
+              padding: '0.25rem',
+              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
+            },
+          },
+          {
+            props: {
+              size: 'medium',
+            },
+            style: {
+              width: '2.5rem',
+              height: '2.5rem',
+            },
+          },
+        ],
+      }),
+    },
+  },
+  MuiToggleButtonGroup: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        borderRadius: '10px',
+        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
+        [`& .${toggleButtonGroupClasses.selected}`]: {
+          color: brand[500],
+        },
+        ...theme.applyStyles('dark', {
+          [`& .${toggleButtonGroupClasses.selected}`]: {
+            color: '#fff',
+          },
+          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
+        }),
+      }),
+    },
+  },
+  MuiToggleButton: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: '12px 16px',
+        textTransform: 'none',
+        borderRadius: '10px',
+        fontWeight: 500,
+        ...theme.applyStyles('dark', {
+          color: gray[400],
+          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+          [`&.${toggleButtonClasses.selected}`]: {
+            color: brand[300],
+          },
+        }),
+      }),
+    },
+  },
+  MuiCheckbox: {
+    defaultProps: {
+      disableRipple: true,
+      icon: (
+        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
+      ),
+      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
+      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        margin: 10,
+        height: 16,
+        width: 16,
+        borderRadius: 5,
+        border: '1px solid ',
+        borderColor: alpha(gray[300], 0.8),
+        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
+        backgroundColor: alpha(gray[100], 0.4),
+        transition: 'border-color, background-color, 120ms ease-in',
+        '&:hover': {
+          borderColor: brand[300],
+        },
+        '&.Mui-focusVisible': {
+          outline: `3px solid ${alpha(brand[500], 0.5)}`,
+          outlineOffset: '2px',
+          borderColor: brand[400],
+        },
+        '&.Mui-checked': {
+          color: 'white',
+          backgroundColor: brand[500],
+          borderColor: brand[500],
+          boxShadow: `none`,
+          '&:hover': {
+            backgroundColor: brand[600],
+          },
+        },
+        ...theme.applyStyles('dark', {
+          borderColor: alpha(gray[700], 0.8),
+          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
+          backgroundColor: alpha(gray[900], 0.8),
+          '&:hover': {
+            borderColor: brand[300],
+          },
+          '&.Mui-focusVisible': {
+            borderColor: brand[400],
+            outline: `3px solid ${alpha(brand[500], 0.5)}`,
+            outlineOffset: '2px',
+          },
+        }),
+      }),
+    },
+  },
+  MuiInputBase: {
+    styleOverrides: {
+      root: {
+        border: 'none',
+      },
+      input: {
+        '&::placeholder': {
+          opacity: 0.7,
+          color: gray[500],
+        },
+      },
+    },
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      input: {
+        padding: 0,
+      },
+      root: ({ theme }) => ({
+        padding: '8px 12px',
+        color: (theme.vars || theme).palette.text.primary,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
+        backgroundColor: (theme.vars || theme).palette.background.default,
+        transition: 'border 120ms ease-in',
+        '&:hover': {
+          borderColor: gray[400],
+        },
+        [`&.${outlinedInputClasses.focused}`]: {
+          outline: `3px solid ${alpha(brand[500], 0.5)}`,
+          borderColor: brand[400],
+        },
+        ...theme.applyStyles('dark', {
+          '&:hover': {
+            borderColor: gray[500],
+          },
+        }),
+        variants: [
+          {
+            props: {
+              size: 'small',
+            },
+            style: {
+              height: '2.25rem',
+            },
+          },
+          {
+            props: {
+              size: 'medium',
+            },
+            style: {
+              height: '2.5rem',
+            },
+          },
+        ],
+      }),
+      notchedOutline: {
+        border: 'none',
+      },
+    },
+  },
+  MuiInputAdornment: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        color: (theme.vars || theme).palette.grey[500],
+        ...theme.applyStyles('dark', {
+          color: (theme.vars || theme).palette.grey[400],
+        }),
+      }),
+    },
+  },
+  MuiFormLabel: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        typography: theme.typography.caption,
+        marginBottom: 8,
+      }),
+    },
+  },
+};
diff --git a/src/shared-theme/customizations/navigation.tsx b/src/shared-theme/customizations/navigation.tsx
new file mode 100644
index 0000000..3cb9713
--- /dev/null
+++ b/src/shared-theme/customizations/navigation.tsx
@@ -0,0 +1,279 @@
+import * as React from 'react';
+import { Theme, alpha, Components } from '@mui/material/styles';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { buttonBaseClasses } from '@mui/material/ButtonBase';
+import { dividerClasses } from '@mui/material/Divider';
+import { menuItemClasses } from '@mui/material/MenuItem';
+import { selectClasses } from '@mui/material/Select';
+import { tabClasses } from '@mui/material/Tab';
+import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
+import { gray, brand } from '../themePrimitives';
+
+/* eslint-disable import/prefer-default-export */
+export const navigationCustomizations: Components<Theme> = {
+  MuiMenuItem: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        padding: '6px 8px',
+        [`&.${menuItemClasses.focusVisible}`]: {
+          backgroundColor: 'transparent',
+        },
+        [`&.${menuItemClasses.selected}`]: {
+          [`&.${menuItemClasses.focusVisible}`]: {
+            backgroundColor: alpha(theme.palette.action.selected, 0.3),
+          },
+        },
+      }),
+    },
+  },
+  MuiMenu: {
+    styleOverrides: {
+      list: {
+        gap: '0px',
+        [`&.${dividerClasses.root}`]: {
+          margin: '0 -8px',
+        },
+      },
+      paper: ({ theme }) => ({
+        marginTop: '4px',
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: `1px solid ${(theme.vars || theme).palette.divider}`,
+        backgroundImage: 'none',
+        background: 'hsl(0, 0%, 100%)',
+        boxShadow:
+          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+        [`& .${buttonBaseClasses.root}`]: {
+          '&.Mui-selected': {
+            backgroundColor: alpha(theme.palette.action.selected, 0.3),
+          },
+        },
+        ...theme.applyStyles('dark', {
+          background: gray[900],
+          boxShadow:
+            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+        }),
+      }),
+    },
+  },
+  MuiSelect: {
+    defaultProps: {
+      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
+        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
+      )),
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: '1px solid',
+        borderColor: gray[200],
+        backgroundColor: (theme.vars || theme).palette.background.paper,
+        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
+        '&:hover': {
+          borderColor: gray[300],
+          backgroundColor: (theme.vars || theme).palette.background.paper,
+          boxShadow: 'none',
+        },
+        [`&.${selectClasses.focused}`]: {
+          outlineOffset: 0,
+          borderColor: gray[400],
+        },
+        '&:before, &:after': {
+          display: 'none',
+        },
+
+        ...theme.applyStyles('dark', {
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          borderColor: gray[700],
+          backgroundColor: (theme.vars || theme).palette.background.paper,
+          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
+          '&:hover': {
+            borderColor: alpha(gray[700], 0.7),
+            backgroundColor: (theme.vars || theme).palette.background.paper,
+            boxShadow: 'none',
+          },
+          [`&.${selectClasses.focused}`]: {
+            outlineOffset: 0,
+            borderColor: gray[900],
+          },
+          '&:before, &:after': {
+            display: 'none',
+          },
+        }),
+      }),
+      select: ({ theme }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        ...theme.applyStyles('dark', {
+          display: 'flex',
+          alignItems: 'center',
+          '&:focus-visible': {
+            backgroundColor: gray[900],
+          },
+        }),
+      }),
+    },
+  },
+  MuiLink: {
+    defaultProps: {
+      underline: 'none',
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        color: (theme.vars || theme).palette.text.primary,
+        fontWeight: 500,
+        position: 'relative',
+        textDecoration: 'none',
+        width: 'fit-content',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          width: '100%',
+          height: '1px',
+          bottom: 0,
+          left: 0,
+          backgroundColor: (theme.vars || theme).palette.text.secondary,
+          opacity: 0.3,
+          transition: 'width 0.3s ease, opacity 0.3s ease',
+        },
+        '&:hover::before': {
+          width: 0,
+        },
+        '&:focus-visible': {
+          outline: `3px solid ${alpha(brand[500], 0.5)}`,
+          outlineOffset: '4px',
+          borderRadius: '2px',
+        },
+      }),
+    },
+  },
+  MuiDrawer: {
+    styleOverrides: {
+      paper: ({ theme }) => ({
+        backgroundColor: (theme.vars || theme).palette.background.default,
+      }),
+    },
+  },
+  MuiPaginationItem: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        '&.Mui-selected': {
+          color: 'white',
+          backgroundColor: (theme.vars || theme).palette.grey[900],
+        },
+        ...theme.applyStyles('dark', {
+          '&.Mui-selected': {
+            color: 'black',
+            backgroundColor: (theme.vars || theme).palette.grey[50],
+          },
+        }),
+      }),
+    },
+  },
+  MuiTabs: {
+    styleOverrides: {
+      root: { minHeight: 'fit-content' },
+      indicator: ({ theme }) => ({
+        backgroundColor: (theme.vars || theme).palette.grey[800],
+        ...theme.applyStyles('dark', {
+          backgroundColor: (theme.vars || theme).palette.grey[200],
+        }),
+      }),
+    },
+  },
+  MuiTab: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: '6px 8px',
+        marginBottom: '8px',
+        textTransform: 'none',
+        minWidth: 'fit-content',
+        minHeight: 'fit-content',
+        color: (theme.vars || theme).palette.text.secondary,
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+        border: '1px solid',
+        borderColor: 'transparent',
+        ':hover': {
+          color: (theme.vars || theme).palette.text.primary,
+          backgroundColor: gray[100],
+          borderColor: gray[200],
+        },
+        [`&.${tabClasses.selected}`]: {
+          color: gray[900],
+        },
+        ...theme.applyStyles('dark', {
+          ':hover': {
+            color: (theme.vars || theme).palette.text.primary,
+            backgroundColor: gray[800],
+            borderColor: gray[700],
+          },
+          [`&.${tabClasses.selected}`]: {
+            color: '#fff',
+          },
+        }),
+      }),
+    },
+  },
+  MuiStepConnector: {
+    styleOverrides: {
+      line: ({ theme }) => ({
+        borderTop: '1px solid',
+        borderColor: (theme.vars || theme).palette.divider,
+        flex: 1,
+        borderRadius: '99px',
+      }),
+    },
+  },
+  MuiStepIcon: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        color: 'transparent',
+        border: `1px solid ${gray[400]}`,
+        width: 12,
+        height: 12,
+        borderRadius: '50%',
+        '& text': {
+          display: 'none',
+        },
+        '&.Mui-active': {
+          border: 'none',
+          color: (theme.vars || theme).palette.primary.main,
+        },
+        '&.Mui-completed': {
+          border: 'none',
+          color: (theme.vars || theme).palette.success.main,
+        },
+        ...theme.applyStyles('dark', {
+          border: `1px solid ${gray[700]}`,
+          '&.Mui-active': {
+            border: 'none',
+            color: (theme.vars || theme).palette.primary.light,
+          },
+          '&.Mui-completed': {
+            border: 'none',
+            color: (theme.vars || theme).palette.success.light,
+          },
+        }),
+        variants: [
+          {
+            props: { completed: true },
+            style: {
+              width: 12,
+              height: 12,
+            },
+          },
+        ],
+      }),
+    },
+  },
+  MuiStepLabel: {
+    styleOverrides: {
+      label: ({ theme }) => ({
+        '&.Mui-completed': {
+          opacity: 0.6,
+          ...theme.applyStyles('dark', { opacity: 0.5 }),
+        },
+      }),
+    },
+  },
+};
diff --git a/src/shared-theme/customizations/surfaces.ts b/src/shared-theme/customizations/surfaces.ts
new file mode 100644
index 0000000..f47a6d8
--- /dev/null
+++ b/src/shared-theme/customizations/surfaces.ts
@@ -0,0 +1,113 @@
+import { alpha, Theme, Components } from '@mui/material/styles';
+import { gray } from '../themePrimitives';
+
+/* eslint-disable import/prefer-default-export */
+export const surfacesCustomizations: Components<Theme> = {
+  MuiAccordion: {
+    defaultProps: {
+      elevation: 0,
+      disableGutters: true,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: 4,
+        overflow: 'clip',
+        backgroundColor: (theme.vars || theme).palette.background.default,
+        border: '1px solid',
+        borderColor: (theme.vars || theme).palette.divider,
+        ':before': {
+          backgroundColor: 'transparent',
+        },
+        '&:not(:last-of-type)': {
+          borderBottom: 'none',
+        },
+        '&:first-of-type': {
+          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+        },
+        '&:last-of-type': {
+          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
+          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
+        },
+      }),
+    },
+  },
+  MuiAccordionSummary: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        border: 'none',
+        borderRadius: 8,
+        '&:hover': { backgroundColor: gray[50] },
+        '&:focus-visible': { backgroundColor: 'transparent' },
+        ...theme.applyStyles('dark', {
+          '&:hover': { backgroundColor: gray[800] },
+        }),
+      }),
+    },
+  },
+  MuiAccordionDetails: {
+    styleOverrides: {
+      root: { mb: 20, border: 'none' },
+    },
+  },
+  MuiPaper: {
+    defaultProps: {
+      elevation: 0,
+    },
+  },
+  MuiCard: {
+    styleOverrides: {
+      root: ({ theme }) => {
+        return {
+          padding: 16,
+          gap: 16,
+          transition: 'all 100ms ease',
+          backgroundColor: gray[50],
+          borderRadius: (theme.vars || theme).shape.borderRadius,
+          border: `1px solid ${(theme.vars || theme).palette.divider}`,
+          boxShadow: 'none',
+          ...theme.applyStyles('dark', {
+            backgroundColor: gray[800],
+          }),
+          variants: [
+            {
+              props: {
+                variant: 'outlined',
+              },
+              style: {
+                border: `1px solid ${(theme.vars || theme).palette.divider}`,
+                boxShadow: 'none',
+                background: 'hsl(0, 0%, 100%)',
+                ...theme.applyStyles('dark', {
+                  background: alpha(gray[900], 0.4),
+                }),
+              },
+            },
+          ],
+        };
+      },
+    },
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+        '&:last-child': { paddingBottom: 0 },
+      },
+    },
+  },
+  MuiCardHeader: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+      },
+    },
+  },
+  MuiCardActions: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+      },
+    },
+  },
+};
diff --git a/src/shared-theme/themePrimitives.ts b/src/shared-theme/themePrimitives.ts
new file mode 100644
index 0000000..97b2c3d
--- /dev/null
+++ b/src/shared-theme/themePrimitives.ts
@@ -0,0 +1,403 @@
+import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
+
+declare module '@mui/material/Paper' {
+  interface PaperPropsVariantOverrides {
+    highlighted: true;
+  }
+}
+declare module '@mui/material/styles' {
+  interface ColorRange {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+  }
+
+  interface PaletteColor extends ColorRange {}
+
+  interface Palette {
+    baseShadow: string;
+  }
+}
+
+const defaultTheme = createTheme();
+
+const customShadows: Shadows = [...defaultTheme.shadows];
+
+export const brand = {
+  50: 'hsl(210, 100%, 95%)',
+  100: 'hsl(210, 100%, 92%)',
+  200: 'hsl(210, 100%, 80%)',
+  300: 'hsl(210, 100%, 65%)',
+  400: 'hsl(210, 98%, 48%)',
+  500: 'hsl(210, 98%, 42%)',
+  600: 'hsl(210, 98%, 55%)',
+  700: 'hsl(210, 100%, 35%)',
+  800: 'hsl(210, 100%, 16%)',
+  900: 'hsl(210, 100%, 21%)',
+};
+
+export const gray = {
+  50: 'hsl(220, 35%, 97%)',
+  100: 'hsl(220, 30%, 94%)',
+  200: 'hsl(220, 20%, 88%)',
+  300: 'hsl(220, 20%, 80%)',
+  400: 'hsl(220, 20%, 65%)',
+  500: 'hsl(220, 20%, 42%)',
+  600: 'hsl(220, 20%, 35%)',
+  700: 'hsl(220, 20%, 25%)',
+  800: 'hsl(220, 30%, 6%)',
+  900: 'hsl(220, 35%, 3%)',
+};
+
+export const green = {
+  50: 'hsl(120, 80%, 98%)',
+  100: 'hsl(120, 75%, 94%)',
+  200: 'hsl(120, 75%, 87%)',
+  300: 'hsl(120, 61%, 77%)',
+  400: 'hsl(120, 44%, 53%)',
+  500: 'hsl(120, 59%, 30%)',
+  600: 'hsl(120, 70%, 25%)',
+  700: 'hsl(120, 75%, 16%)',
+  800: 'hsl(120, 84%, 10%)',
+  900: 'hsl(120, 87%, 6%)',
+};
+
+export const orange = {
+  50: 'hsl(45, 100%, 97%)',
+  100: 'hsl(45, 92%, 90%)',
+  200: 'hsl(45, 94%, 80%)',
+  300: 'hsl(45, 90%, 65%)',
+  400: 'hsl(45, 90%, 40%)',
+  500: 'hsl(45, 90%, 35%)',
+  600: 'hsl(45, 91%, 25%)',
+  700: 'hsl(45, 94%, 20%)',
+  800: 'hsl(45, 95%, 16%)',
+  900: 'hsl(45, 93%, 12%)',
+};
+
+export const red = {
+  50: 'hsl(0, 100%, 97%)',
+  100: 'hsl(0, 92%, 90%)',
+  200: 'hsl(0, 94%, 80%)',
+  300: 'hsl(0, 90%, 65%)',
+  400: 'hsl(0, 90%, 40%)',
+  500: 'hsl(0, 90%, 30%)',
+  600: 'hsl(0, 91%, 25%)',
+  700: 'hsl(0, 94%, 18%)',
+  800: 'hsl(0, 95%, 12%)',
+  900: 'hsl(0, 93%, 6%)',
+};
+
+export const getDesignTokens = (mode: PaletteMode) => {
+  customShadows[1] =
+    mode === 'dark'
+      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
+      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
+
+  return {
+    palette: {
+      mode,
+      primary: {
+        light: brand[200],
+        main: brand[400],
+        dark: brand[700],
+        contrastText: brand[50],
+        ...(mode === 'dark' && {
+          contrastText: brand[50],
+          light: brand[300],
+          main: brand[400],
+          dark: brand[700],
+        }),
+      },
+      info: {
+        light: brand[100],
+        main: brand[300],
+        dark: brand[600],
+        contrastText: gray[50],
+        ...(mode === 'dark' && {
+          contrastText: brand[300],
+          light: brand[500],
+          main: brand[700],
+          dark: brand[900],
+        }),
+      },
+      warning: {
+        light: orange[300],
+        main: orange[400],
+        dark: orange[800],
+        ...(mode === 'dark' && {
+          light: orange[400],
+          main: orange[500],
+          dark: orange[700],
+        }),
+      },
+      error: {
+        light: red[300],
+        main: red[400],
+        dark: red[800],
+        ...(mode === 'dark' && {
+          light: red[400],
+          main: red[500],
+          dark: red[700],
+        }),
+      },
+      success: {
+        light: green[300],
+        main: green[400],
+        dark: green[800],
+        ...(mode === 'dark' && {
+          light: green[400],
+          main: green[500],
+          dark: green[700],
+        }),
+      },
+      grey: {
+        ...gray,
+      },
+      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+      background: {
+        default: 'hsl(0, 0%, 99%)',
+        paper: 'hsl(220, 35%, 97%)',
+        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
+      },
+      text: {
+        primary: gray[800],
+        secondary: gray[600],
+        warning: orange[400],
+        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+      },
+      action: {
+        hover: alpha(gray[200], 0.2),
+        selected: `${alpha(gray[200], 0.3)}`,
+        ...(mode === 'dark' && {
+          hover: alpha(gray[600], 0.2),
+          selected: alpha(gray[600], 0.3),
+        }),
+      },
+    },
+    typography: {
+      fontFamily: 'Inter, sans-serif',
+      h1: {
+        fontSize: defaultTheme.typography.pxToRem(48),
+        fontWeight: 600,
+        lineHeight: 1.2,
+        letterSpacing: -0.5,
+      },
+      h2: {
+        fontSize: defaultTheme.typography.pxToRem(36),
+        fontWeight: 600,
+        lineHeight: 1.2,
+      },
+      h3: {
+        fontSize: defaultTheme.typography.pxToRem(30),
+        lineHeight: 1.2,
+      },
+      h4: {
+        fontSize: defaultTheme.typography.pxToRem(24),
+        fontWeight: 600,
+        lineHeight: 1.5,
+      },
+      h5: {
+        fontSize: defaultTheme.typography.pxToRem(20),
+        fontWeight: 600,
+      },
+      h6: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+        fontWeight: 600,
+      },
+      subtitle1: {
+        fontSize: defaultTheme.typography.pxToRem(18),
+      },
+      subtitle2: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+        fontWeight: 500,
+      },
+      body1: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+      },
+      body2: {
+        fontSize: defaultTheme.typography.pxToRem(14),
+        fontWeight: 400,
+      },
+      caption: {
+        fontSize: defaultTheme.typography.pxToRem(12),
+        fontWeight: 400,
+      },
+    },
+    shape: {
+      borderRadius: 8,
+    },
+    shadows: customShadows,
+  };
+};
+
+export const colorSchemes = {
+  light: {
+    palette: {
+      primary: {
+        light: brand[200],
+        main: brand[400],
+        dark: brand[700],
+        contrastText: brand[50],
+      },
+      info: {
+        light: brand[100],
+        main: brand[300],
+        dark: brand[600],
+        contrastText: gray[50],
+      },
+      warning: {
+        light: orange[300],
+        main: orange[400],
+        dark: orange[800],
+      },
+      error: {
+        light: red[300],
+        main: red[400],
+        dark: red[800],
+      },
+      success: {
+        light: green[300],
+        main: green[400],
+        dark: green[800],
+      },
+      grey: {
+        ...gray,
+      },
+      divider: alpha(gray[300], 0.4),
+      background: {
+        default: 'hsl(0, 0%, 99%)',
+        paper: 'hsl(220, 35%, 97%)',
+      },
+      text: {
+        primary: gray[800],
+        secondary: gray[600],
+        warning: orange[400],
+      },
+      action: {
+        hover: alpha(gray[200], 0.2),
+        selected: `${alpha(gray[200], 0.3)}`,
+      },
+      baseShadow:
+        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+    },
+  },
+  dark: {
+    palette: {
+      primary: {
+        contrastText: brand[50],
+        light: brand[300],
+        main: brand[400],
+        dark: brand[700],
+      },
+      info: {
+        contrastText: brand[300],
+        light: brand[500],
+        main: brand[700],
+        dark: brand[900],
+      },
+      warning: {
+        light: orange[400],
+        main: orange[500],
+        dark: orange[700],
+      },
+      error: {
+        light: red[400],
+        main: red[500],
+        dark: red[700],
+      },
+      success: {
+        light: green[400],
+        main: green[500],
+        dark: green[700],
+      },
+      grey: {
+        ...gray,
+      },
+      divider: alpha(gray[700], 0.6),
+      background: {
+        default: gray[900],
+        paper: 'hsl(220, 30%, 7%)',
+      },
+      text: {
+        primary: 'hsl(0, 0%, 100%)',
+        secondary: gray[400],
+      },
+      action: {
+        hover: alpha(gray[600], 0.2),
+        selected: alpha(gray[600], 0.3),
+      },
+      baseShadow:
+        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+    },
+  },
+};
+
+export const typography = {
+  fontFamily: 'Inter, sans-serif',
+  h1: {
+    fontSize: defaultTheme.typography.pxToRem(48),
+    fontWeight: 600,
+    lineHeight: 1.2,
+    letterSpacing: -0.5,
+  },
+  h2: {
+    fontSize: defaultTheme.typography.pxToRem(36),
+    fontWeight: 600,
+    lineHeight: 1.2,
+  },
+  h3: {
+    fontSize: defaultTheme.typography.pxToRem(30),
+    lineHeight: 1.2,
+  },
+  h4: {
+    fontSize: defaultTheme.typography.pxToRem(24),
+    fontWeight: 600,
+    lineHeight: 1.5,
+  },
+  h5: {
+    fontSize: defaultTheme.typography.pxToRem(20),
+    fontWeight: 600,
+  },
+  h6: {
+    fontSize: defaultTheme.typography.pxToRem(18),
+    fontWeight: 600,
+  },
+  subtitle1: {
+    fontSize: defaultTheme.typography.pxToRem(18),
+  },
+  subtitle2: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+    fontWeight: 500,
+  },
+  body1: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+  },
+  body2: {
+    fontSize: defaultTheme.typography.pxToRem(14),
+    fontWeight: 400,
+  },
+  caption: {
+    fontSize: defaultTheme.typography.pxToRem(12),
+    fontWeight: 400,
+  },
+};
+
+export const shape = {
+  borderRadius: 8,
+};
+
+// @ts-ignore
+const defaultShadows: Shadows = [
+  'none',
+  'var(--template-palette-baseShadow)',
+  ...defaultTheme.shadows.slice(2),
+];
+export const shadows = defaultShadows;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..87225dc
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    // 👇 This line tells TypeScript how to handle JSX
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}