diff --git a/src/layouts/Posts.astro b/src/layouts/Posts.astro
index 7ab23eb..7306e4f 100644
--- a/src/layouts/Posts.astro
+++ b/src/layouts/Posts.astro
@@ -8,6 +8,7 @@ import Card from "@components/Card";
 import LinkButton from "@components/LinkButton.astro";
 import type { MarkdownInstance } from "astro";
 import type { Frontmatter } from "src/types";
+import slugify from "@utils/slugify";
 
 export interface Props {
   pageNum: number;
@@ -28,7 +29,7 @@ const next = pageNum < totalPages ? "" : "disabled";
       {
         posts.map(({ frontmatter }) => {
           return (
-            <Card href={`/posts/${frontmatter.slug}`} post={frontmatter} />
+            <Card href={`/posts/${slugify(frontmatter)}`} post={frontmatter} />
           );
         })
       }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cce921f..62947a2 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import { SOCIALS } from "src/config";
 import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
@@ -6,8 +7,8 @@ import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import getSortedPosts from "@utils/getSortedPosts";
-import { SOCIALS } from "src/config";
 import socialIcons from "@assets/socialIcons";
+import slugify from "@utils/slugify";
 import type { Frontmatter } from "src/types";
 
 const posts = await Astro.glob<Frontmatter>("../contents/*.md");
@@ -70,7 +71,7 @@ const sortedPosts = getSortedPosts(posts);
             ({ frontmatter }) =>
               frontmatter.featured && (
                 <Card
-                  href={`/posts/${frontmatter.slug}`}
+                  href={`/posts/${slugify(frontmatter)}`}
                   post={frontmatter}
                   secHeading={false}
                 />
@@ -90,7 +91,7 @@ const sortedPosts = getSortedPosts(posts);
             ({ frontmatter }, index) =>
               index < 4 && (
                 <Card
-                  href={`/posts/${frontmatter.slug}`}
+                  href={`/posts/${slugify(frontmatter)}`}
                   post={frontmatter}
                   secHeading={false}
                 />
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index 60c3d9a..9d0384c 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -6,6 +6,7 @@ import getSortedPosts from "@utils/getSortedPosts";
 import getPageNumbers from "@utils/getPageNumbers";
 import type { MarkdownInstance } from "astro";
 import type { Frontmatter } from "src/types";
+import slugify from "@utils/slugify";
 
 export interface Props {
   post: MarkdownInstance<Frontmatter>;
@@ -27,12 +28,12 @@ type PagePaths = {
 }[];
 
 export async function getStaticPaths() {
-  const posts = await Astro.glob("../../contents/*.md");
+  const posts = await Astro.glob<Frontmatter>("../../contents/*.md");
 
   let postResult: PostResult = posts.map((post) => {
     return {
       params: {
-        slug: post.frontmatter.slug,
+        slug: slugify(post.frontmatter),
       },
       props: {
         post,
diff --git a/src/pages/tags/[tag].astro b/src/pages/tags/[tag].astro
index 3eb43e3..dbf9fb9 100644
--- a/src/pages/tags/[tag].astro
+++ b/src/pages/tags/[tag].astro
@@ -9,6 +9,7 @@ import getUniqueTags from "@utils/getUniqueTags";
 import getPostsByTag from "@utils/getPostsByTag";
 import type { MarkdownInstance } from "astro";
 import type { Frontmatter } from "src/types";
+import slugify from "@utils/slugify";
 
 export interface Props {
   post: MarkdownInstance<Frontmatter>;
@@ -52,7 +53,7 @@ const tagPosts = getPostsByTag(posts, tag);
     <ul>
       {
         tagPosts.map(({ frontmatter }) => (
-          <Card href={`/posts/${frontmatter.slug}`} post={frontmatter} />
+          <Card href={`/posts/${slugify(frontmatter)}`} post={frontmatter} />
         ))
       }
     </ul>