diff --git a/website/public/portfolio.html b/website/public/portfolio.html
index c571592..7bfc589 100644
--- a/website/public/portfolio.html
+++ b/website/public/portfolio.html
@@ -180,12 +180,15 @@
       class="portfolio-section"
       style="padding: 60px 0; background: #ffebeb"
     >
+      <div class="container">
         <div id="loadingMessage" style="text-align: center; padding: 40px">
           <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
+          </div>
           <p style="margin-top: 15px; color: #666">
             Loading portfolio projects...
           </p>
+        </div>
         <div
           id="portfolioGrid"
           class="products-grid"
@@ -195,6 +198,7 @@
             gap: 30px;
           "
         ></div>
+        <div
           id="noProjects"
           style="display: none; text-align: center; padding: 40px; color: #666"
         >
@@ -203,7 +207,11 @@
             style="font-size: 48px; color: #ccc; margin-bottom: 15px"
           ></i>
           <p>No portfolio projects available at the moment.</p>
+        </div>
+      </div>
+    </section>
     <footer class="footer">
+      <div class="container">
         <div class="footer-grid">
           <div class="footer-col">
             <h3 class="footer-title">Sky Art Shop</h3>
@@ -212,11 +220,12 @@
             </p>
             <div class="social-links">
               <a href="#" class="social-link"><i class="bi bi-facebook"></i></a>
-              <a href="#" class="social-link"
-                ><i class="bi bi-instagram"></i
-              ></a>
+              <a href="#" class="social-link"><i class="bi bi-instagram"></i></a>
               <a href="#" class="social-link"><i class="bi bi-twitter"></i></a>
-                ><i class="bi bi-pinterest"></i
+              <a href="#" class="social-link"><i class="bi bi-pinterest"></i></a>
+            </div>
+          </div>
+          <div class="footer-col">
             <h4 class="footer-heading">Shop</h4>
             <ul class="footer-links">
               <li><a href="/shop">All Products</a></li>
@@ -224,18 +233,30 @@
               <li><a href="/shop?category=prints">Prints</a></li>
               <li><a href="/shop?category=supplies">Art Supplies</a></li>
             </ul>
+          </div>
+          <div class="footer-col">
             <h4 class="footer-heading">About</h4>
+            <ul class="footer-links">
               <li><a href="/about">Our Story</a></li>
               <li><a href="/portfolio">Portfolio</a></li>
               <li><a href="/blog">Blog</a></li>
               <li><a href="/contact">Contact</a></li>
+            </ul>
+          </div>
+          <div class="footer-col">
             <h4 class="footer-heading">Customer Service</h4>
+            <ul class="footer-links">
               <li><a href="/shipping-info">Shipping Info</a></li>
               <li><a href="/returns">Returns</a></li>
               <li><a href="/faq">FAQ</a></li>
               <li><a href="/privacy">Privacy Policy</a></li>
+            </ul>
+          </div>
+        </div>
         <div class="footer-bottom">
           <p>&copy; 2025 Sky Art Shop. All rights reserved.</p>
+        </div>
+      </div>
     </footer>
     <!-- Project Modal -->
     <div