diff --git a/app/components/Services.tsx b/app/components/Services.tsx
new file mode 100644
index 0000000..8385acf
--- /dev/null
+++ b/app/components/Services.tsx
@@ -0,0 +1,271 @@
+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 DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
+import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
+import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
+
+const services = {
+  media: [
+    { name: "Jellyseerr", url: "http://jellyseerr.aetoskia.com", desc: "Summon films and series from the digital void.", external: true },
+    { name: "Sonarr", url: "http://sonarr.aetoskia.com", desc: "Keep the endless chronicles of TV under iron control.", external: true },
+    { name: "Radarr", url: "http://radarr.aetoskia.com", desc: "Command the legions of cinema, enforce cinematic order.", external: true },
+    { name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
+  ],
+  codebase: [
+    { name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
+    { name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
+    { name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
+  ],
+  monitoring: [
+    { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
+  ],
+};
+
+const items = [
+  {
+    icon: <ViewQuiltRoundedIcon />,
+    title: 'Dashboard',
+    description:
+      'This item could provide a snapshot of the most important metrics or data points related to the product.',
+    imageLight: "url('/extended_sigil.png')",
+    imageDark: "url('/extended_sigil.png')",
+  },
+  {
+    icon: <EdgesensorHighRoundedIcon />,
+    title: 'Mobile integration',
+    description:
+      'This item could provide information about the mobile app version of the product.',
+    imageLight: "url('/extended_sigil.png')",
+    imageDark: "url('/extended_sigil.png')",
+  },
+  {
+    icon: <DevicesRoundedIcon />,
+    title: 'Available on all platforms',
+    description:
+      'This item could let users know the product is available on all platforms, such as web, mobile, and desktop.',
+    imageLight: "url('/extended_sigil.png')",
+    imageDark: "url('/extended_sigil.png')",
+  },
+];
+
+interface ChipProps {
+  selected?: boolean;
+}
+
+const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
+  variants: [
+    {
+      props: ({ selected }) => !!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,
+        }),
+      },
+    },
+  ],
+}));
+
+interface MobileLayoutProps {
+  selectedItemIndex: number;
+  handleItemClick: (index: number) => void;
+  selectedFeature: (typeof items)[0];
+}
+
+export function MobileLayout({
+  selectedItemIndex,
+  handleItemClick,
+  selectedFeature,
+}: MobileLayoutProps) {
+  if (!items[selectedItemIndex]) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: { xs: 'flex', sm: 'none' },
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <Box sx={{ display: 'flex', gap: 2, overflow: 'auto' }}>
+        {items.map(({ title }, index) => (
+          <Chip
+            size="medium"
+            key={index}
+            label={title}
+            onClick={() => handleItemClick(index)}
+            selected={selectedItemIndex === index}
+          />
+        ))}
+      </Box>
+      <Card variant="outlined">
+        <Box
+          sx={(theme) => ({
+            mb: 2,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            minHeight: 280,
+            backgroundImage: 'var(--items-imageLight)',
+            ...theme.applyStyles('dark', {
+              backgroundImage: 'var(--items-imageDark)',
+            }),
+          })}
+          style={
+            items[selectedItemIndex]
+              ? ({
+                  '--items-imageLight': items[selectedItemIndex].imageLight,
+                  '--items-imageDark': items[selectedItemIndex].imageDark,
+                } as any)
+              : {}
+          }
+        />
+        <Box sx={{ px: 2, pb: 2 }}>
+          <Typography
+            gutterBottom
+            sx={{ color: 'text.primary', fontWeight: 'medium' }}
+          >
+            {selectedFeature.title}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
+            {selectedFeature.description}
+          </Typography>
+        </Box>
+      </Card>
+    </Box>
+  );
+}
+
+export default function Services() {
+  const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
+
+  const handleItemClick = (index: number) => {
+    setSelectedItemIndex(index);
+  };
+
+  const selectedFeature = items[selectedItemIndex];
+
+  return (
+    <Container id="features" sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row-reverse' },
+          gap: 2,
+        }}
+      >
+        <div>
+          <Box
+            sx={{
+              display: { xs: 'none', sm: 'flex' },
+              flexDirection: 'column',
+              gap: 2,
+              height: '100%',
+            }}
+          >
+            {items.map(({ icon, title, description }, index) => (
+              <Box
+                key={index}
+                component={Button}
+                onClick={() => handleItemClick(index)}
+                sx={[
+                  (theme) => ({
+                    p: 2,
+                    height: '100%',
+                    width: '100%',
+                    '&:hover': {
+                      backgroundColor: (theme.vars || theme).palette.action.hover,
+                    },
+                  }),
+                  selectedItemIndex === index && {
+                    backgroundColor: 'action.selected',
+                  },
+                ]}
+              >
+                <Box
+                  sx={[
+                    {
+                      width: '100%',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'left',
+                      gap: 1,
+                      textAlign: 'left',
+                      textTransform: 'none',
+                      color: 'text.secondary',
+                    },
+                    selectedItemIndex === index && {
+                      color: 'text.primary',
+                    },
+                  ]}
+                >
+                  {icon}
+
+                  <Typography variant="h6">{title}</Typography>
+                  <Typography variant="body2">{description}</Typography>
+                </Box>
+              </Box>
+            ))}
+          </Box>
+          <MobileLayout
+            selectedItemIndex={selectedItemIndex}
+            handleItemClick={handleItemClick}
+            selectedFeature={selectedFeature}
+          />
+        </div>
+        <Box
+          sx={{
+            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',
+            }}
+          >
+            <Box
+              sx={(theme) => ({
+                m: 'auto',
+                width: 420,
+                height: 500,
+                backgroundSize: 'contain',
+                backgroundImage: 'var(--items-imageLight)',
+                ...theme.applyStyles('dark', {
+                  backgroundImage: 'var(--items-imageDark)',
+                }),
+              })}
+              style={
+                items[selectedItemIndex]
+                  ? ({
+                      '--items-imageLight': items[selectedItemIndex].imageLight,
+                      '--items-imageDark': items[selectedItemIndex].imageDark,
+                    } as any)
+                  : {}
+              }
+            />
+          </Card>
+        </Box>
+      </Box>
+    </Container>
+  );
+}
\ No newline at end of file
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 764d501..99c87d6 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -5,6 +5,7 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
+import Services from "~/components/Services";
 
 export function meta() {
   return [
@@ -49,7 +50,8 @@ export default function Home() {
       >
         <Box sx={{ flex: 1 }} />
 
-        <Box sx={{ height: "40vh", overflowY: "auto", p: 2 }}>
+        <Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
+          <Services />
           <Container
             maxWidth="lg"
             sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}