diff --git a/OliverBooth/Pages/Blog/Index.cshtml b/OliverBooth/Pages/Blog/Index.cshtml
index 7eee82f..a3631d0 100644
--- a/OliverBooth/Pages/Blog/Index.cshtml
+++ b/OliverBooth/Pages/Blog/Index.cshtml
@@ -5,8 +5,8 @@
 @model OliverBooth.Pages.Blog.Index
 @inject BlogService BlogService
 
-<div id="all_blog_posts">
-    <div id="blog_loading_spinner" class="d-flex justify-content-center">
+<div id="all-blog-posts">
+    <div id="blog-loading-spinner" class="d-flex justify-content-center">
         <div class="spinner-border text-light" role="status">
             <p class="text-center sr-only">Loading...</p>
         </div>
diff --git a/src/scss/app.scss b/src/scss/app.scss
index cb5ad50..b5328c4 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -212,7 +212,7 @@ div.alert *:last-child {
   margin-bottom: 0 !important;
 }
 
-#blog_loading_spinner {
+#blog-loading-spinner {
   margin: 20px;
 
   &.removed {
diff --git a/src/ts/app.ts b/src/ts/app.ts
index 9a773aa..b01ccdc 100644
--- a/src/ts/app.ts
+++ b/src/ts/app.ts
@@ -5,7 +5,7 @@ declare const bootstrap: any;
 declare const katex: any;
 
 (() => {
-    const blogPostContainer = document.querySelector("#all_blog_posts");
+    const blogPostContainer = document.querySelector("#all-blog-posts");
     if (blogPostContainer) {
         API.getBlogPostCount().then(async (count) => {
             for (let i = 0; i < count; i++) {