diff --git a/components/ad-placements.html b/components/ad-placements.html
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/components/ad-placements.html
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/components/ads.html b/components/ads.html
new file mode 100644
index 0000000..4576d19
--- /dev/null
+++ b/components/ads.html
@@ -0,0 +1,37 @@
+<!-- Vertical Ad Banner -->
+<div class="vertical-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-rocket-takeoff"></i>
+    </div>
+    <h4>Company</h4>
+    <p>Transform Your Business with Our Solutions</p>
+    <a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Horizontal Ad Banner -->
+<div class="horizontal-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-graph-up-arrow"></i>
+    </div>
+    <div class="ad-text">
+      <h4>Boost Your Growth</h4>
+      <p>Partner with Company for Digital Excellence</p>
+    </div>
+    <a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div>
+
+<!-- Feature Ad Banner -->
+<div class="feature-ad-banner">
+  <div class="ad-content">
+    <div class="ad-icon">
+      <i class="bi bi-shield-check"></i>
+    </div>
+    <h4>Secure Solutions</h4>
+    <p>Trusted by Industry Leaders</p>
+    <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+  </div>
+</div> 
\ No newline at end of file
diff --git a/css/templatemo-first-portfolio-style.css b/css/templatemo-first-portfolio-style.css
index eea4b55..37cce96 100644
--- a/css/templatemo-first-portfolio-style.css
+++ b/css/templatemo-first-portfolio-style.css
@@ -1962,3 +1962,244 @@ img[src*="happy-bearded-young-man.jpg"]:hover {
   }
 }
 
+/* Ad Banners */
+.vertical-ad-banner {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  border-radius: var(--border-radius-medium);
+  padding: 30px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.vertical-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.05), rgba(83, 93, 161, 0.05));
+  z-index: 1;
+}
+
+.vertical-ad-banner:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.horizontal-ad-banner {
+  background: linear-gradient(135deg, rgba(83, 93, 161, 0.1), rgba(20, 183, 137, 0.1));
+  border-radius: var(--border-radius-medium);
+  padding: 20px 30px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.horizontal-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(83, 93, 161, 0.05), rgba(20, 183, 137, 0.05));
+  z-index: 1;
+}
+
+.horizontal-ad-banner:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.feature-ad-banner {
+  background: linear-gradient(135deg, rgba(20, 183, 137, 0.15), rgba(83, 93, 161, 0.15));
+  border-radius: var(--border-radius-medium);
+  padding: 25px;
+  margin: 20px 0;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  text-align: center;
+  border: 1px solid rgba(83, 93, 161, 0.1);
+}
+
+.feature-ad-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(45deg, rgba(20, 183, 137, 0.1), rgba(83, 93, 161, 0.1));
+  z-index: 1;
+}
+
+.feature-ad-banner:hover {
+  transform: scale(1.02);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  border-color: rgba(20, 183, 137, 0.2);
+}
+
+.ad-content {
+  position: relative;
+  z-index: 2;
+}
+
+.horizontal-ad-banner .ad-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  width: 100%;
+}
+
+.ad-icon {
+  width: 50px;
+  height: 50px;
+  background: var(--white-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  color: var(--primary-color);
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.vertical-ad-banner:hover .ad-icon,
+.horizontal-ad-banner:hover .ad-icon,
+.feature-ad-banner:hover .ad-icon {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  transform: rotate(360deg);
+}
+
+.ad-text {
+  flex-grow: 1;
+}
+
+.ad-content h4 {
+  color: var(--primary-color);
+  font-size: 18px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.ad-content p {
+  color: var(--p-color);
+  font-size: 14px;
+  margin-bottom: 15px;
+}
+
+.horizontal-ad-banner .ad-content p {
+  margin-bottom: 0;
+}
+
+.ad-link {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.3s ease;
+  padding: 8px 20px;
+  border: 2px solid rgba(20, 183, 137, 0.2);
+  border-radius: var(--border-radius-small);
+}
+
+.ad-link i {
+  transition: transform 0.3s ease;
+}
+
+.ad-link:hover {
+  background: var(--secondary-color);
+  color: var(--white-color);
+  border-color: var(--secondary-color);
+}
+
+.ad-link:hover i {
+  transform: translateX(5px);
+}
+
+/* Ad Placement Styles */
+.hero .container {
+  position: relative;
+}
+
+.hero-ad {
+  position: absolute;
+  right: -200px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 180px;
+}
+
+.about-ad {
+  margin-top: 30px;
+}
+
+.services-ad {
+  margin: 30px 0;
+}
+
+.projects-ad {
+  margin: 30px 0;
+}
+
+@media (max-width: 1400px) {
+  .hero-ad {
+    display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  .horizontal-ad-banner {
+    flex-direction: column;
+    text-align: center;
+    padding: 25px;
+  }
+  
+  .horizontal-ad-banner .ad-content {
+    flex-direction: column;
+  }
+  
+  .ad-text {
+    margin: 15px 0;
+  }
+}
+
+@media (max-width: 767px) {
+  .vertical-ad-banner,
+  .horizontal-ad-banner,
+  .feature-ad-banner {
+    padding: 20px;
+  }
+  
+  .ad-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 20px;
+  }
+  
+  .ad-content h4 {
+    font-size: 16px;
+  }
+  
+  .ad-content p {
+    font-size: 13px;
+  }
+}
+
diff --git a/index.html b/index.html
index b19dac4..6f0550f 100644
--- a/index.html
+++ b/index.html
@@ -23,31 +23,95 @@
   </head>
 
   <body>
-    <!-- Include Header -->
+    <!-- Header -->
     <div id="header"></div>
 
     <main>
-      <!-- Include Hero Section -->
-      <div id="hero"></div>
+      <!-- Hero Section -->
+      <section id="hero"></section>
+      <aside class="hero-ad">
+        <div class="vertical-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-rocket-takeoff"></i>
+            </div>
+            <h4>Company</h4>
+            <p>Transform Your Business with Our Solutions</p>
+            <a href="#" class="ad-link">Explore Now <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include About Section -->
-      <div id="about"></div>
+      <!-- About Section -->
+      <section id="about"></section>
+      <aside class="about-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-graph-up-arrow"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Boost Your Growth</h4>
+              <p>Partner with Company for Digital Excellence</p>
+            </div>
+            <a href="#" class="ad-link">Get Started <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Featured Section -->
-      <div id="featured"></div>
+      <!-- Featured Section -->
+      <section id="featured"></section>
+      <aside class="featured-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-shield-check"></i>
+            </div>
+            <h4>Secure Solutions</h4>
+            <p>Trusted by Industry Leaders</p>
+            <a href="#" class="ad-link">Learn More <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Projects Section -->
-      <div id="projects"></div>
+      <!-- Projects Section -->
+      <section id="projects"></section>
+      <aside class="projects-ad">
+        <div class="horizontal-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-lightning-charge"></i>
+            </div>
+            <div class="ad-text">
+              <h4>Fast Development</h4>
+              <p>Accelerate Your Project Timeline</p>
+            </div>
+            <a href="#" class="ad-link">Start Now <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Services Section -->
-      <div id="services"></div>
+      <!-- Services Section -->
+      <section id="services"></section>
+      <aside class="services-ad">
+        <div class="feature-ad-banner">
+          <div class="ad-content">
+            <div class="ad-icon">
+              <i class="bi bi-gear"></i>
+            </div>
+            <h4>Premium Services</h4>
+            <p>Expert Solutions for Your Business</p>
+            <a href="#" class="ad-link">Discover More <i class="bi bi-arrow-right"></i></a>
+          </div>
+        </div>
+      </aside>
 
-      <!-- Include Contact Section -->
-      <div id="contact"></div>
+      <!-- Contact Section -->
+      <section id="contact"></section>
     </main>
 
-    <!-- Include Footer -->
-    <div id="footer"></div>
+    <!-- Footer -->
+    <footer id="footer"></footer>
 
     <!-- JAVASCRIPT FILES -->
     <script src="js/jquery.min.js"></script>
@@ -60,16 +124,22 @@
 
     <!-- Load Components -->
     <script>
-      $(document).ready(function () {
-        // Load components
-        $("#header").load("components/header.html");
-        $("#hero").load("components/hero.html");
-        $("#about").load("components/about.html");
-        $("#featured").load("components/featured.html");
-        $("#services").load("components/services.html");
-        $("#projects").load("components/projects.html");
-        $("#contact").load("components/contact.html");
-        $("#footer").load("components/footer.html");
+      $(document).ready(function() {
+        const components = {
+          header: "components/header.html",
+          hero: "components/hero.html",
+          about: "components/about.html",
+          featured: "components/featured.html",
+          services: "components/services.html",
+          projects: "components/projects.html",
+          contact: "components/contact.html",
+          footer: "components/footer.html"
+        };
+
+        // Load all components
+        Object.entries(components).forEach(([id, path]) => {
+          $(`#${id}`).load(path);
+        });
       });
     </script>
   </body>