diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..2f080ee
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+	"plugins": ["./node_modules/prettier-plugin-astro"]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 63c6148..0fff91d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,11 @@
         "@picocss/pico": "^1.5.6",
         "astro": "^1.6.13",
         "astro-remote": "^0.2.3",
-        "date-fns": "^2.29.3"
+        "date-fns": "^2.29.3",
+        "prettier": "^2.8.1"
+      },
+      "devDependencies": {
+        "prettier-plugin-astro": "^0.7.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4258,9 +4262,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==",
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -8504,9 +8508,9 @@
       }
     },
     "prettier": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.0.tgz",
-      "integrity": "sha512-9Lmg8hTFZKG0Asr/kW9Bp8tJjRVluO8EJQVfY2T7FMw9T5jy4I/Uvx0Rca/XWf50QQ1/SS48+6IJWnrb+2yemA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.1.tgz",
+      "integrity": "sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg=="
     },
     "prettier-plugin-astro": {
       "version": "0.7.0",
diff --git a/package.json b/package.json
index 22cce32..b36a0ad 100644
--- a/package.json
+++ b/package.json
@@ -16,5 +16,9 @@
     "astro": "^1.6.13",
     "astro-remote": "^0.2.3",
     "date-fns": "^2.29.3"
+  },
+  "devDependencies": {
+    "prettier": "^2.8.1",
+    "prettier-plugin-astro": "^0.7.0"
   }
 }
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 6d07f75..ff6d18d 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,12 +1,13 @@
 ---
-
 ---
 
 <footer>
-	<p>
-		Copyright 2022 - <a href="https://ghall.dev">Graham Hall</a>
-	</p>
-	<p>
-		Built with <a href="https://astro.build">Astro</a> and <a href="https://picocss.com">Pico.css</a>
-	</p>
-</footer>
\ No newline at end of file
+  <p>
+    Copyright 2022 - <a href="https://ghall.dev">Graham Hall</a>
+  </p>
+  <p>
+    Built with <a href="https://astro.build">Astro</a> and <a
+      href="https://picocss.com">Pico.css</a
+    >
+  </p>
+</footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2985499..e8e98d1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,21 +1,20 @@
 ---
-
 ---
 
 <div>
-	<nav>
-		<ul>
-			<li>
-				<span style={{ fontSize: '1.6rem' }}>Graham Hall</span>
-			</li>
-		</ul>
-		<ul>
-			<li>
-				<a href="/">📝 Blog</a>
-			</li>
-			<li>
-				<a href="/about">👨‍💻 About</a>
-			</li>
-		</ul>
-	</nav>
-</div>
\ No newline at end of file
+  <nav>
+    <ul>
+      <li>
+        <span style={{ fontSize: "1.6rem" }}>Graham Hall</span>
+      </li>
+    </ul>
+    <ul>
+      <li>
+        <a href="/">📝 Blog</a>
+      </li>
+      <li>
+        <a href="/about">👨‍💻 About</a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 4e73c03..309a0c2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,30 +1,30 @@
 ---
-import '@picocss/pico'
+import "@picocss/pico";
 
-import Header from '../components/Header.astro'
-import Footer from '../components/Footer.astro'
+import Header from "../components/Header.astro";
+import Footer from "../components/Footer.astro";
 
 export interface Props {
-	title: string;
+  title: string;
 }
 
-const title = Astro.props.frontmatter ? Astro.props.frontmatter.title : Astro.props.title;
-
+const title = Astro.props.frontmatter
+  ? Astro.props.frontmatter.title
+  : Astro.props.title;
 ---
 
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body class="container">
-		<Header />
-		<slot />
-		<Footer />
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body class="container">
+    <Header />
+    <slot />
+    <Footer />
+  </body>
 </html>
-
diff --git a/src/pages/about.md b/src/pages/about.md
index 35429d7..a5bb64e 100644
--- a/src/pages/about.md
+++ b/src/pages/about.md
@@ -1,6 +1,6 @@
 ---
 layout: ../layouts/Layout.astro
-title: 'About'
+title: "About"
 ---
 
 ## Hello World!
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4208db2..f4c5459 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,26 +1,38 @@
 ---
-import { format } from 'date-fns';
-import { Markup } from 'astro-remote';
+import { format } from "date-fns";
+import { Markup } from "astro-remote";
 
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro";
 
-const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=10`)
+const response = await fetch(
+  `https://api.cosmicjs.com/v2/buckets/${
+    import.meta.env.BUCKET_SLUG
+  }/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${
+    import.meta.env.BUCKET_READ_KEY
+  }&limit=10`
+);
 
 const posts = await response.json();
-
 ---
 
 <Layout title="Blog">
-	<div>
-		{posts.objects.map(post => (
-			<article>
-				<div style={{display: 'flex', justifyContent: 'space-between'}}>
-					<h4>{post.title}</h4>
-					<h5>{`🗓️ ${format(new Date(post.published_at), 'MMM do, y')}`}</h5>
-				</div>
-				<Markup content={`<p>${post.content.split('</p>')[0]}`} />
-				<a href={`/posts/${post.slug}`}>Read More</a>
-			</article>
-		))}
-	</div>
+  <div>
+    {
+      posts.objects.map((post) => (
+        <article>
+          <div>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <h4>{post.title}</h4>
+              <h5>{`🗓️ ${format(
+                new Date(post.published_at),
+                "MMM do, y"
+              )}`}</h5>
+            </div>
+            <Markup content={`<p>${post.content.split("</p>")[0]}`} />
+            <a href={`/posts/${post.slug}`}>Read More</a>
+          </div>
+        </article>
+      ))
+    }
+  </div>
 </Layout>
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index b015cbe..6b32481 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -1,23 +1,29 @@
 ---
-import { format } from 'date-fns';
-import { Markup } from 'astro-remote';
+import { format } from "date-fns";
+import { Markup } from "astro-remote";
 
-import Layout from '../../layouts/Layout.astro';
+import Layout from "../../layouts/Layout.astro";
 
 const { slug } = Astro.params;
 
-const response = await fetch(`https://api.cosmicjs.com/v2/buckets/${import.meta.env.BUCKET_SLUG}/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${import.meta.env.BUCKET_READ_KEY}&limit=20&slug=${slug}`)
+const response = await fetch(
+  `https://api.cosmicjs.com/v2/buckets/${
+    import.meta.env.BUCKET_SLUG
+  }/objects?pretty=true&query=%7B%22type%22%3A%22blog-posts%22%7D&read_key=${
+    import.meta.env.BUCKET_READ_KEY
+  }&limit=20&slug=${slug}`
+);
 
 const posts = await response.json();
 const post = posts.objects[0];
-
 ---
+
 <Layout title={post.title}>
-	<article>
-		<div style={{display: 'flex', justifyContent: 'space-between'}}>
-			<h4>{post.title}</h4>
-			<h5>{`🗓️ ${format(new Date(post.published_at), 'MMM do, y')}`}</h5>
-		</div>
-		<Markup content={post.content} />
-	</article>
-</Layout>
\ No newline at end of file
+  <article>
+    <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <h4>{post.title}</h4>
+      <h5>{`🗓️ ${format(new Date(post.published_at), "MMM do, y")}`}</h5>
+    </div>
+    <Markup content={post.content} />
+  </article>
+</Layout>