diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/dist/contact.html b/dist/contact.html
index 03b17b365..a329d86f1 100644
--- a/dist/contact.html
+++ b/dist/contact.html
@@ -61,63 +61,58 @@ <h1>Contact Me</h1>
                             <!-- To make this form functional, sign up at-->
                             <!-- https://startbootstrap.com/solution/contact-forms-->
                             <!-- to get an API token!-->
-                            <form id="contactForm" data-sb-form-api-token="API_TOKEN">
-                                <div class="form-floating">
-                                    <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
-                                    <label for="name">Name</label>
-                                    <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
-                                </div>
-                                <div class="form-floating">
-                                    <input class="form-control" id="email" type="email" placeholder="Enter your email..." data-sb-validations="required,email" />
-                                    <label for="email">Email address</label>
-                                    <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
-                                    <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
-                                </div>
-                                <div class="form-floating">
-                                    <input class="form-control" id="phone" type="tel" placeholder="Enter your phone number..." data-sb-validations="required" />
-                                    <label for="phone">Phone Number</label>
-                                    <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
-                                </div>
-                                <div class="form-floating">
-                                    <textarea class="form-control" id="message" placeholder="Enter your message here..." style="height: 12rem" data-sb-validations="required"></textarea>
-                                    <label for="message">Message</label>
-                                    <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
-                                </div>
-                                <br />
-                                <!-- Submit success message-->
-                                <!---->
-                                <!-- This is what your users will see when the form-->
-                                <!-- has successfully submitted-->
-                                <div class="d-none" id="submitSuccessMessage">
-                                    <div class="text-center mb-3">
-                                        <div class="fw-bolder">Form submission successful!</div>
-                                        To activate this form, sign up at
-                                        <br />
-                                        <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
-                                    </div>
-                                </div>
-                                <!-- Submit error message-->
-                                <!---->
-                                <!-- This is what your users will see when there is-->
-                                <!-- an error submitting the form-->
-                                <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
-                                <!-- Submit Button-->
-                                <button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </main>
-        <!-- Footer-->
-        <footer class="border-top">
-            <div class="container px-4 px-lg-5">
-                <div class="row gx-4 gx-lg-5 justify-content-center">
-                    <div class="col-md-10 col-lg-8 col-xl-7">
-                        <ul class="list-inline text-center">
-                            <li class="list-inline-item">
-                                <a href="#!">
-                                    <span class="fa-stack fa-lg">
+                            <div class="control-group form-group mb-3">
+<div class="row">
+    <label class="col-sm-2 col-form-label" for="name">Name</label>
+    <div class="col-sm-10">
+    <input type="text" class="form-control" id="name" name="name" placeholder="Name" required data-validation-required-message="Please enter your name.">
+    <p class="help-block text-danger"></p>
+    </div>
+</div>
+</div>
+
+<div class="control-group form-group mb-3">
+<div class="row">
+    <label class="col-sm-2 col-form-label" for="email">Email</label>
+    <div class="col-sm-10">
+    <input type="email" class="form-control" id="email" name="email" placeholder="Email" required data-validation-required-message="Please enter your email address.">
+    <p class="help-block text-danger"></p>
+    </div>
+</div>
+</div>
+
+<div class="control-group form-group mb-3">
+<div class="row">
+    <label class="col-sm-2 col-form-label" for="sex">Sex</label>
+    <div class="col-sm-10">
+    <div class="form-check form-check-inline">
+        <input class="form-check-input" type="radio" name="sex" id="man" value="man" checked>
+        <label class="form-check-label" for="man">Man</label>
+    </div>
+    <div class="form-check form-check-inline">
+        <input class="form-check-input" type="radio" name="sex" id="woman" value="woman">
+        <label class="form-check-label" for="woman">Woman</label>
+    </div>
+    <p class="help-block text-danger"></p>
+    </div>
+</div>
+</div>
+
+<div class="control-group form-group mb-3">
+<div class="row">
+    <label class="col-sm-2 col-form-label" for="text">Text</label>
+    <div class="col-sm-10">
+    <textarea rows="5" class="form-control" id="text" name="message" placeholder="Text" required data-validation-required-message="Please enter a message."></textarea>
+    <p class="help-block text-danger"></p>
+    </div>
+</div>
+</div>
+
+<div id="success"></div>
+<div class="form-group row">
+<div class="col-sm-10 offset-sm-2">
+    <button type="submit" class="btn btn-primary" id="sendMessageButton">SEND</button>
+</div>
                                         <i class="fas fa-circle fa-stack-2x"></i>
                                         <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
                                     </span>
diff --git a/dist/index.html b/dist/index.html
index 89a82cf42..a0bda2d3f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -52,17 +52,62 @@ <h1>Clean Blog</h1>
             <div class="row gx-4 gx-lg-5 justify-content-center">
                 <div class="col-md-10 col-lg-8 col-xl-7">
                     <!-- Post preview-->
-                    <div class="post-preview">
-                        <a href="post.html">
-                            <h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
-                            <h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
-                        </a>
-                        <p class="post-meta">
-                            Posted by
-                            <a href="#!">Start Bootstrap</a>
-                            on September 24, 2023
-                        </p>
-                    </div>
+                    <div class="row justify-content-center">
+<!-- Row 1 -->
+<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
+    <a href="post.html" class="text-decoration-none">
+    <div class="card h-100 shadow-sm border-0">
+        <img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
+        <div class="card-body d-flex flex-column">
+        <h5 class="card-title">Man must explore, and this is exploration at its greatest</h5>
+        <p class="card-text flex-grow-1">Problems look mighty small from 150 miles up</p>
+        </div>
+    </div>
+    </a>
+</div>
+<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
+    <a href="post.html" class="text-decoration-none">
+    <div class="card h-100 shadow-sm border-0">
+        <img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
+        <div class="card-body d-flex flex-column">
+        <h5 class="card-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h5>
+        <p class="card-text flex-grow-1">Success is defined by you. It always seems impossible until it's done.</p>
+        </div>
+    </div>
+    </a>
+</div>
+</div>
+<div class="row justify-content-center">
+<!-- Row 2 -->
+<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
+    <a href="post.html" class="text-decoration-none">
+    <div class="card h-100 shadow-sm border-0">
+        <img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
+        <div class="card-body d-flex flex-column">
+        <h5 class="card-title">Science has not yet mastered prophecy</h5>
+        <p class="card-text flex-grow-1">We predict too much for the next year and yet far too little for the next ten.</p>
+        </div>
+    </div>
+    </a>
+</div>
+<div class="col-lg-5 col-md-6 col-10 mx-auto mb-4">
+    <a href="post.html" class="text-decoration-none">
+    <div class="card h-100 shadow-sm border-0">
+        <img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Image+cap" class="card-img-top" alt="Post image">
+        <div class="card-body d-flex flex-column">
+    <h5 class="card-title">Failure is not an option</h5>
+        <p class="card-text flex-grow-1">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</p>
+        </div>
+    </div>
+    </a>
+</div>
+</div>
+<!-- Centered Button -->
+<div class="row justify-content-center">
+<div class="col-lg-8 col-md-10 mx-auto text-center">
+    <a class="btn btn-primary" href="#">OLDER POSTS →</a>
+</div>
+</div>
                     <!-- Divider-->
                     <hr class="my-4" />
                     <!-- Post preview-->