diff --git a/web/src/pages/[...section].astro b/web/src/pages/[...section].astro
index e4b4c2c..3b28eda 100644
--- a/web/src/pages/[...section].astro
+++ b/web/src/pages/[...section].astro
@@ -1,68 +1,221 @@
 ---
 
-import yaml from 'js-yaml';
 
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Hero from '../components/Hero.astro';
-import { AwesomePrivacy, Section, Service } from '../types/Service';
+import Layout from '@layouts/Layout.astro';
+import Button from '@components/form/Button.astro';
+import Main from '@components/scafold/MainCard.astro';
+import ServiceList from '@components/things/ServiceList.astro';
+import type { AwesomePrivacy, Section, Service, ShortService } from '../types/Service';
+import { fetchData, slugify } from '@utils/fetch-data';
+import { parseMarkdown } from '@utils/parse-markdown';
 
-const { title, otherSections, services } = Astro.props;
+interface Props {
+  slug: string,
+  title: string,
+  services: Service[],
+  intro?: string,
+  notableMentions?: ShortService[] | string,
+  furtherInfo?: string,
+  wordOfWarning?: string,
+  categoryName: string,
+  otherSections: Section[],
+}
+
+const { slug, title, otherSections, services, notableMentions, furtherInfo, wordOfWarning, categoryName, intro } = Astro.props;
 
 export async function getStaticPaths() {
 
-const fetchData = async (): Promise<AwesomePrivacy> => {
-  return await fetch('http://localhost:4321/awesome-privacy.yml')
-    .then((res) => res.text())
-    .then((data) => yaml.load(data))
-    .catch((err) => console.error(err));
-};
-
-
-const slugify = (title: string) => {
-  return title.toLowerCase().replace(/\s/g, '-');
-};
-
-
 const pages = await fetchData().then((data) => {
-
-  const results: { slug: string, title: string, otherSections: Section[], services: Service[] }[] = [];
-  data.categories.forEach((service) => {
-    const sections = service.sections.map((section) => ({
-      slug: `${slugify(service.name)}/${slugify(section.name)}`,
+  const results: Array<Props> = [];
+  (data as AwesomePrivacy).categories.forEach((category) => {
+    const sections = category.sections.map((section) => ({
+      slug: `${slugify(category.name)}/${slugify(section.name)}`,
       title: section.name,
       services: section.services,
-      otherSections: service.sections,
+      intro: section.intro,
+      notableMentions: section.notableMentions,
+      furtherInfo: section.furtherInfo,
+      wordOfWarning: section.wordOfWarning,
+      categoryName: category.name,
+      otherSections: category.sections,
     }));
     results.push(...sections);
   });
   return results;
 });
 
-return pages.map(({ slug, title, otherSections, services }) => {
+return pages.map(({ slug, title, otherSections, services, notableMentions, furtherInfo, wordOfWarning, categoryName, intro }) => {
   return {
     params: { section: slug },
-    props: { title, otherSections, services },
+    props: { title, otherSections, services, notableMentions, furtherInfo, wordOfWarning, categoryName, intro },
   };
 });
-
 }
 
+const makePaginationLinks = () => {
+  const index = otherSections.findIndex(section => section.name === title);
+  const previousSection = index >  0 ? otherSections[index -  1].name : null;
+  const nextSection = index < otherSections.length -  1 ? otherSections[index +  1].name : null;
+  return { previous: previousSection, next: nextSection };
+};
+
+const { previous, next } = makePaginationLinks();
+
 ---
 
 <Layout title="Awesome Privacy">
+  <Main>
 
-  <h1>{title}</h1>
+    <h2>{title}</h2>
+
+    {intro && (
+      <section class="intro">
+        <p set:html={parseMarkdown(intro)}></p>
+      </section>
+    )}
+
+    <ServiceList title={title} services={services} />
+
+    {notableMentions && (
+      <section class="notable-mentions">
+        <h3>Notable Mentions</h3>
+        { Array.isArray(notableMentions) ?
+          <ul>
+            {notableMentions.map((mention) => (
+              <li>
+                <a href={mention.url}>{mention.name}</a> 
+                {mention.description && (
+                  <span>- </span>
+                  <span set:html={parseMarkdown(mention.description)}></span>
+                )}
+              </li>
+            ))}
+          </ul> :
+          <p set:html={parseMarkdown(notableMentions)}></p>
+      }
+      </section>
+    )}
+
+    {furtherInfo && (
+      <section class="further-info">
+        <h3>Notes</h3>
+        <p set:html={parseMarkdown(furtherInfo)}></p>
+      </section>
+    )}
+
+    {wordOfWarning && (
+      <section class="word-of-warning">
+        <h3>Word of Warning</h3>
+        <p set:html={parseMarkdown(wordOfWarning)}></p>
+      </section>
+    )}
+
+    <div class="pagination-navigation">
+      { previous ? (
+        <Button url={`/${slugify(categoryName)}/${slugify(previous)}`}>
+          <span>← Previous</span>
+          <p>{previous}</p>
+        </Button>
+      ) : <p class="nothing"></p>}
+      <a href={`/${slugify(categoryName)}`} class="go-to-category">
+        View all in {categoryName} ({otherSections.length})
+      </a>
+      { next && (
+        <Button url={`/${slugify(categoryName)}/${slugify(next)}`}>
+          <span>Next →</span>
+          <p>{next}</p>
+        </Button>
+      )}
+    </div>
+  </Main>
 </Layout>
 
 <style lang="scss">
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 1000px;
-		max-width: calc(100% - 2rem);
-		
-		font-size: 20px;
-		line-height: 1.6;
-	}	
+
+section {
+  padding-bottom: 1rem;
+  &:not(:last-child) {
+    border-bottom: 2px solid var(--accent-3);
+  }
+}
+
+h2 {
+    font-size: 2rem;
+    margin: -2rem 0 2rem -2rem;
+    box-shadow: 6px 6px 0 var(--foreground);
+    background: var(--accent);
+    color: var(--accent-fg);
+    width: fit-content;
+    padding: 0.25rem 0.5rem;
+  }
+
+.pagination-navigation {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 0;
+  :global(.button) {
+    min-width: 120px;
+    width: fit-content;
+    padding: 0.25rem 1rem;
+    text-align: right;
+    &:first-child { text-align: left; }
+    p {
+      margin: 0;
+      font-weight: normal;
+      font-size: 1rem;
+    }
+    span {
+      font-size: 0.8rem;
+    }
+    
+  }
+  .nothing {
+    width: 120px;
+  }
+  .go-to-category {
+    color: var(--foreground);
+    font-size: 0.8rem;
+    opacity: 0.5;
+  }
+}
+
+.intro {
+  font-style: italic;
+  opacity: 0.7; 
+}
+
+
+.further-info, .notable-mentions, .word-of-warning {
+  h3 {
+    font-size: 1.4rem;
+    margin: 1rem 0;
+  }
+  :global(p) {
+    font-size: 0.9rem;
+    opacity: 0.7; 
+    :global(strong) {
+      font-weight: 500;
+    }
+    :global(a) {
+      color: var(--foreground);
+      transition: all 0.15s ease-in-out;
+      &:hover {
+        color: var(--accent);
+      }
+    }
+  }
+  ul {
+    list-style: circle;
+    padding-left: 1rem;
+    font-size: 0.9rem;
+    li {
+      margin-bottom: 0.25rem;
+      :global(p) {
+        display: inline;
+      }
+    }
+  }
+}
+
 </style>
diff --git a/web/src/pages/[category].astro b/web/src/pages/[category].astro
index 9cf6d60..6f97af2 100644
--- a/web/src/pages/[category].astro
+++ b/web/src/pages/[category].astro
@@ -1,12 +1,12 @@
 ---
 
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Hero from '../components/Hero.astro';
+import Layout from '@layouts/Layout.astro';
+import SectionList from '@components/things/SectionList.astro';
+import Main from '@components/scafold/MainCard.astro';
 
+import { fetchData, slugify } from '@utils/fetch-data';
 
-import yaml from 'js-yaml';
-import type { AwesomePrivacy, Section, Service } from '../types/Service';
+import type { Section } from '../types/Service';
 
 interface Props {
 	title: string;
@@ -16,16 +16,6 @@ interface Props {
 const { title, sections } = Astro.props;
 
 export async function getStaticPaths() {
-  const fetchData = async (): Promise<AwesomePrivacy> => {
-    return await fetch('http://localhost:4321/awesome-privacy.yml')
-      .then((res) => res.text())
-      .then((data) => yaml.load(data))
-      .catch((err) => console.error(err));
-  };
-
-  const slugify = (title: string) => {
-    return title.toLowerCase().replace(/\s/g, '-');
-  };
 
 	const pages = await fetchData().then((data) => {
 		return data.categories.map((category) => {
@@ -45,29 +35,14 @@ export async function getStaticPaths() {
   });
 }
 
-
 ---
 
 <Layout title="Awesome Privacy">
-	<!-- <Hero /> -->
-	<main>
-		<h1>Title: {title}</h1>
-		<!-- {sections.map((section) => (
-			<section>
-				<h2>{section.name}</h2>
-			</section>
-		))} -->
-	</main>
+	<Main>
+		<SectionList title={title} sections={sections} bigTitle={true} />
+	</Main>
 </Layout>
 
 <style lang="scss">
-	main {
-		margin: auto;
-		padding: 1rem;
-		width: 1000px;
-		max-width: calc(100% - 2rem);
-		color: red;
-		font-size: 20px;
-		line-height: 1.6;
-	}	
+
 </style>
diff --git a/web/src/pages/category/index.astro b/web/src/pages/category/index.astro
index 0ffe022..2535a63 100644
--- a/web/src/pages/category/index.astro
+++ b/web/src/pages/category/index.astro
@@ -2,9 +2,9 @@
 
 import yaml from 'js-yaml';
 
-import Layout from '../../layouts/Layout.astro';
-import Card from '../../components/Card.astro';
-import Hero from '../../components/Hero.astro';
+import Layout from '@layouts/Layout.astro';
+import Card from '@components/Card.astro';
+import Hero from '@components/Hero.astro';
 import { AwesomePrivacy, Section, Service } from '../../types/Service';
 
 
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 5cf4bc5..fda7b3a 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,15 +1,34 @@
 ---
 
-import Layout from '../layouts/Layout.astro';
-import Card from '../components/Card.astro';
-import Hero from '../components/Hero.astro';
+import Layout from '@layouts/Layout.astro';
+import Card from '@components/Card.astro';
+import Hero from '@components/Hero.astro';
+import Search from '@components/Search.astro';
+import SectionList from '@components/things/SectionList.astro';
+
+import { fetchData } from '@utils/fetch-data';
+import Button from '@components/form/Button.astro';
+
+const categories = (await fetchData()).categories;
 
 ---
 
-<Layout title="Awesome Privacy">
+<Layout title="Awesome Privacy" hideNav={true}>
 	<Hero />
 	<main>
-		<Card title="Email" body="" href="/" />
+		<h2>Search</h2>
+		<Search />
+		<h2 class="browse-title">Browse</h2>
+		<ul class="categories">
+		{categories.map((category) => (
+			<li class="category">
+				<SectionList title={category.name} sections={category.sections} />
+			</li>
+		))}
+		</ul>
+		<div class="view-all">
+			<Button url="/all" text="View All" />
+		</div>
 	</main>
 </Layout>
 
@@ -17,10 +36,59 @@ import Hero from '../components/Hero.astro';
 	main {
 		margin: auto;
 		padding: 1rem;
-		width: 1000px;
+		width: 1100px;
 		max-width: calc(100% - 2rem);
-		color: white;
 		font-size: 20px;
 		line-height: 1.6;
-	}	
+		.view-all {
+			width: 8rem;
+			margin: 0 auto;
+		}
+	}
+	h2 {
+		font-size: 2.5rem;
+		color: var(--accent-3);
+		font-family: "Lekton", sans-serif;
+		text-align: center;
+	}
+
+	.categories {
+		columns: 6 300px;
+		column-gap: 1rem;
+		.category {
+			background: var(--accent-fg);
+			border: 2px solid var(--foreground);
+			border-radius: var(--curve-sm);
+			box-shadow: 4px 4px 0 var(--foreground);
+			padding: 1rem;
+			width: 85%;
+			display: inline-flex;
+			flex-direction: column;
+			margin: 1rem;
+			.category-title {
+				text-decoration: none;
+				color: var(--foreground);
+			}
+			h3 {
+				font-family: "Lekton", sans-serif;
+				font-weight: bold;
+				margin: 0;
+				font-size: 1.8rem;
+			}
+			.sections {
+				padding-left: 1rem;
+				.section {
+					a {
+						text-decoration: none;
+						color: var(--foreground);
+					}
+					.service-count {
+						color: var(--accent-3);
+					}
+				}
+			}
+		}
+	}
+
+
 </style>