diff --git a/web/molecules/sections/Tools.tsx b/web/molecules/sections/Tools.tsx
new file mode 100644
index 0000000..fba755f
--- /dev/null
+++ b/web/molecules/sections/Tools.tsx
@@ -0,0 +1,151 @@
+import {
+ Badge,
+ Text,
+ Card,
+ SimpleGrid,
+ Container,
+ useMantineTheme,
+ createStyles,
+} from '@mantine/core';
+import { IconBrowser, IconTerminal2, IconBrandVscode } from '@tabler/icons';
+import { SectionTitle } from './SectionTitle';
+
+// ref: https://ui.mantine.dev/category/features/#features-cards
+
+const useStyles = createStyles((theme) => ({
+ title: {
+ fontSize: '34px',
+ fontWeight: 900,
+
+ '@media (max-width: 520px)': {
+ fontSize: '24px',
+ },
+ },
+
+ description: {
+ maxWidth: '600px',
+ margin: 'auto',
+
+ '&::after': {
+ content: '""',
+ display: 'block',
+ backgroundColor: theme.colors.blue[7],
+ width: '45px',
+ height: '2px',
+ marginTop: theme.spacing.sm,
+ marginLeft: 'auto',
+ marginRight: 'auto',
+ },
+ },
+
+ card: {
+ border: `1px solid light-dark(${theme.colors.gray[1]}, ${theme.colors.gray[5]})`,
+ },
+
+ cardTitle: {
+ '&::after': {
+ content: '""',
+ display: 'block',
+ backgroundColor: theme.colors.blue[7],
+ width: '45px',
+ height: '2px',
+ marginTop: theme.spacing.sm,
+ },
+ },
+}));
+
+const mockdata = [
+ {
+ title: 'Web Application',
+ status: 'stable',
+ description: `Use the deadrop web application and even save it to your phone's home screen as a PWA!`,
+ icon: IconBrowser,
+ },
+ {
+ title: 'CLI',
+ status: 'experimental',
+ description: `Use NPM's npx to use deadrop directly in your terminal!`,
+ icon: IconTerminal2,
+ },
+ {
+ title: 'VS Code',
+ status: 'in development',
+ description: `Start a session in the sidebar or right-click a file to use deadrop right in your editor!`,
+ icon: IconBrandVscode,
+ },
+];
+
+const statusToColor = {
+ stable: 'blue',
+ experimental: 'indigo',
+ 'in development': 'yellow',
+};
+
+export function Tools() {
+ const theme = useMantineTheme();
+ const { classes } = useStyles();
+
+ const features = mockdata.map((feature) => (
+