diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..e69de29
diff --git a/assets/snippets/footer.html b/assets/snippets/footer.html
index 3110aed..50fa93a 100644
--- a/assets/snippets/footer.html
+++ b/assets/snippets/footer.html
@@ -1,83 +1,81 @@
-<footer>
-    <div class="container-fluid p-0  text-white footer-container">
-        <div class="follow-icons">
-            <h4 class="">FOLLOW</h4>
-            <div class="icons">
+<div class="container-fluid p-0  text-white footer-container">
+    <div class="follow-icons">
+        <h4 class="">FOLLOW</h4>
+        <div class="icons">
 
-                <ul class="list-unstyled icon-list 1">
-                    <li>
-
-                        <i class="fa fa-github" aria-hidden="true"></i>
-
-                    </li>
-                    <li>
-                        <i class="fa fa-twitter" aria-hidden="true"></i>
-
-                    </li>
-                    <li>
-                        <i class="fa fa-linkedin" aria-hidden="true"></i>
-
-                    </li>
-                </ul>
-                <ul class="list-unstyled icon-list 2">
-                    <li>
-
-                        <i class="fa fa-github" aria-hidden="true"></i>
-
-                    </li>
-                    <li>
-                        <i class="fa fa-twitter" aria-hidden="true"></i>
+            <ul class="list-unstyled icon-list 1">
+                <li>
 
-                    </li>
-                    <li>
-                        <i class="fa fa-linkedin" aria-hidden="true"></i>
+                    <i class="fa fa-github" aria-hidden="true"></i>
 
-                    </li>
-                </ul>
-            </div>
+                </li>
+                <li>
+                    <i class="fa fa-twitter" aria-hidden="true"></i>
 
+                </li>
+                <li>
+                    <i class="fa fa-linkedin" aria-hidden="true"></i>
 
-        </div>
-        <div class="about-me">
-            <div class="about-pic">
-                <img src="../../../../../assets/images/myface-in-bw_img07.jpg"
-                    class=" rounded-circle img-fluid border border-3" alt="">
-            </div>
-            <div class="about-text">
-                <h4>ABOUT ME</h4>
-                <p>
-                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
-                    repellat ut illo.
-                </p>
-                <a class="button contact-me-btn">Contact
-                    Me</a>
-            </div>
-        </div>
-        <div class="pages">
-            <h4>PAGES</h4>
-            <ul class="list-unstyled page-list">
+                </li>
+            </ul>
+            <ul class="list-unstyled icon-list 2">
                 <li>
-                    <a href="">ARTICLES</a>
+
+                    <i class="fa fa-github" aria-hidden="true"></i>
 
                 </li>
                 <li>
-                    <a href="">CONTACT</a>
+                    <i class="fa fa-twitter" aria-hidden="true"></i>
+
                 </li>
                 <li>
-                    <a href="">HOME</a>
+                    <i class="fa fa-linkedin" aria-hidden="true"></i>
+
                 </li>
             </ul>
         </div>
+
+
+    </div>
+    <div class="about-me">
+        <div class="about-pic">
+            <img src="../../../../../assets/images/myface-in-bw_img07.jpg"
+                class=" rounded-circle img-fluid border border-3" alt="">
+        </div>
+        <div class="about-text">
+            <h4>ABOUT ME</h4>
+            <p>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
+                repellat ut illo.
+            </p>
+            <a class="button contact-me-btn">Contact
+                Me</a>
+        </div>
+    </div>
+    <div class="pages">
+        <h4>PAGES</h4>
+        <ul class="list-unstyled page-list">
+            <li>
+                <a href="">ARTICLES</a>
+
+            </li>
+            <li>
+                <a href="">CONTACT</a>
+            </li>
+            <li>
+                <a href="">HOME</a>
+            </li>
+        </ul>
     </div>
-    <div class="container-fluid bg-light text-dark">
-        <div class="container">
-            <div class="row">
-                <div class="col-12 text-center mt-1">
-                    <h5 class="copyright">
-                        © COPYRIGHT 2024. ALL RIGHTS RESERVED
-                    </h5>
-                </div>
+</div>
+<div class="container-fluid bg-light text-dark">
+    <div class="container">
+        <div class="row">
+            <div class="col-12 text-center mt-1">
+                <h5 class="copyright">
+                    © COPYRIGHT 2024. ALL RIGHTS RESERVED
+                </h5>
             </div>
         </div>
     </div>
-</footer>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/assets/snippets/header.html b/assets/snippets/header.html
index ccac23b..bebab23 100644
--- a/assets/snippets/header.html
+++ b/assets/snippets/header.html
@@ -1,44 +1,42 @@
-<header>
-    <div class="container header-container text-nowrap text-white">
+<div class="container header-container text-nowrap text-white">
 
-        <div class="p-2 site-title">
-            <h2 class="">
-                K(e)ith N. Henry
-            </h2>
-        </div>
+    <div class="p-2 site-title">
+        <h2 class="">
+            K(e)ith N. Henry
+        </h2>
+    </div>
 
 
 
-        <ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
-            <li class="pe-2">
-                <a href="" class="p-0">Articles</a>
-            </li>
-            <li class="pe-2">
-                <a href="" class="p-0">Home</a>
-            </li>
-            <li class="">
-                <a href="" class="p-0">Contact</a>
-            </li>
-        </ul>
+    <ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
+        <li class="pe-2">
+            <a href="" class="p-0">Articles</a>
+        </li>
+        <li class="pe-2">
+            <a href="" class="p-0">Home</a>
+        </li>
+        <li class="">
+            <a href="" class="p-0">Contact</a>
+        </li>
+    </ul>
 
-        <div class="hamburger-menu">
-            <button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
-                data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
-                <i class="fa fa-bars"></i>
-            </button>
+    <div class="hamburger-menu">
+        <button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
+            data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+            <i class="fa fa-bars"></i>
+        </button>
 
-        </div>
     </div>
-    <div class=" green-line">
-        <div class="collapse" id="collapseExample">
+</div>
+<div class=" green-line">
+    <div class="collapse" id="collapseExample">
 
-            <ul class="list-group">
-                <li class="list-group-item">An item</li>
-                <li class="list-group-item">A second item</li>
-                <li class="list-group-item">A third item</li>
-                <li class="list-group-item">A fourth item</li>
-                <li class="list-group-item">And a fifth one</li>
-            </ul>
-        </div>
+        <ul class="list-group">
+            <li class="list-group-item">An item</li>
+            <li class="list-group-item">A second item</li>
+            <li class="list-group-item">A third item</li>
+            <li class="list-group-item">A fourth item</li>
+            <li class="list-group-item">And a fifth one</li>
+        </ul>
     </div>
-</header>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/writing/published/2024/August/22/test_article.html b/writing/published/2024/August/22/test_article.html
index 35bba0c..56a49cb 100644
--- a/writing/published/2024/August/22/test_article.html
+++ b/writing/published/2024/August/22/test_article.html
@@ -16,48 +16,7 @@
 <body>
     <div class="container-fluid p-0">
         <header>
-            <div class="container header-container text-nowrap text-white">
-
-                <div class="p-2 site-title">
-                    <h2 class="">
-                        K(e)ith N. Henry
-                    </h2>
-                </div>
-
-
-
-                <ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
-                    <li class="pe-2">
-                        <a href="" class="p-0">Articles</a>
-                    </li>
-                    <li class="pe-2">
-                        <a href="" class="p-0">Home</a>
-                    </li>
-                    <li class="">
-                        <a href="" class="p-0">Contact</a>
-                    </li>
-                </ul>
-
-                <div class="hamburger-menu">
-                    <button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
-                        <i class="fa fa-bars"></i>
-                    </button>
-
-                </div>
-            </div>
-            <div class=" green-line">
-                <div class="collapse" id="collapseExample">
-
-                    <ul class="list-group">
-                        <li class="list-group-item">An item</li>
-                        <li class="list-group-item">A second item</li>
-                        <li class="list-group-item">A third item</li>
-                        <li class="list-group-item">A fourth item</li>
-                        <li class="list-group-item">And a fifth one</li>
-                    </ul>
-                </div>
-            </div>
+            
         </header>
 
         <div class="container">
@@ -91,99 +50,28 @@ <h1 class="text-uppercase text-center">
         </div>
     </div>
     <footer>
-        <div class="container-fluid p-0  text-white footer-container">
-
-
-            <div class="follow-icons">
-                <h4 class="">FOLLOW</h4>
-
-
-                <div class="icons">
-
-                    <ul class="list-unstyled icon-list 1">
-                        <li>
-
-                            <i class="fa fa-github" aria-hidden="true"></i>
-
-                        </li>
-                        <li>
-                            <i class="fa fa-twitter" aria-hidden="true"></i>
-
-                        </li>
-                        <li>
-                            <i class="fa fa-linkedin" aria-hidden="true"></i>
-
-                        </li>
-                    </ul>
-                    <ul class="list-unstyled icon-list 2">
-                        <li>
-
-                            <i class="fa fa-github" aria-hidden="true"></i>
-
-                        </li>
-                        <li>
-                            <i class="fa fa-twitter" aria-hidden="true"></i>
-
-                        </li>
-                        <li>
-                            <i class="fa fa-linkedin" aria-hidden="true"></i>
-
-                        </li>
-                    </ul>
-                </div>
-
-
-            </div>
-            <div class="about-me">
-                <div class="about-pic">
-                    <img src="../../../../../assets/images/myface-in-bw_img07.jpg"
-                        class=" rounded-circle img-fluid border border-3" alt="">
-                </div>
-                <div class="about-text">
-                    <h4>ABOUT ME</h4>
-                    <p>
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
-                        repellat ut illo.
-                    </p>
-                    <a class="button contact-me-btn">Contact
-                        Me</a>
-                </div>
-            </div>
-            <div class="pages">
-                <h4>PAGES</h4>
-                <ul class="list-unstyled page-list">
-                    <li>
-                        <a href="">ARTICLES</a>
-
-                    </li>
-                    <li>
-                        <a href="">CONTACT</a>
-                    </li>
-                    <li>
-                        <a href="">HOME</a>
-                    </li>
-                </ul>
-            </div>
-
-
-
-
-        </div>
-        <div class="container-fluid bg-light text-dark">
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 text-center mt-1">
-                        <h5 class="copyright">
-                            © COPYRIGHT 2024. ALL RIGHTS RESERVED
-                        </h5>
-                    </div>
-                </div>
-            </div>
-        </div>
+      
     </footer>
+   
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            console.log('injecting');
+            fetch('../../../../../assets/snippets/header.html')
+                .then(response => response.text())
+                .then(data => {
+                    document.querySelector('header').innerHTML = data;
+                });
+
+            fetch('../../../../../assets/snippets/footer.html')
+                .then(response => response.text())
+                .then(data => {
+                    document.querySelector('footer').innerHTML = data;
+                });
+        });
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
         integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
         crossorigin="anonymous"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>