diff --git a/concept-modern/src/assets/images/eco-product-img-1.png b/concept-modern/src/assets/images/eco-product-img-1.png
new file mode 100644
index 0000000..a5547cc
Binary files /dev/null and b/concept-modern/src/assets/images/eco-product-img-1.png differ
diff --git a/concept-modern/src/assets/images/eco-product-img-2.png b/concept-modern/src/assets/images/eco-product-img-2.png
new file mode 100644
index 0000000..a5547cc
Binary files /dev/null and b/concept-modern/src/assets/images/eco-product-img-2.png differ
diff --git a/concept-modern/src/assets/images/eco-product-img-3.png b/concept-modern/src/assets/images/eco-product-img-3.png
new file mode 100644
index 0000000..a5547cc
Binary files /dev/null and b/concept-modern/src/assets/images/eco-product-img-3.png differ
diff --git a/concept-modern/src/assets/images/eco-product-img-4.png b/concept-modern/src/assets/images/eco-product-img-4.png
new file mode 100644
index 0000000..a5547cc
Binary files /dev/null and b/concept-modern/src/assets/images/eco-product-img-4.png differ
diff --git a/concept-modern/src/assets/images/eco-slider-img-1.png b/concept-modern/src/assets/images/eco-slider-img-1.png
new file mode 100644
index 0000000..a539e61
Binary files /dev/null and b/concept-modern/src/assets/images/eco-slider-img-1.png differ
diff --git a/concept-modern/src/assets/images/eco-slider-img-2.png b/concept-modern/src/assets/images/eco-slider-img-2.png
new file mode 100644
index 0000000..a539e61
Binary files /dev/null and b/concept-modern/src/assets/images/eco-slider-img-2.png differ
diff --git a/concept-modern/src/assets/images/eco-slider-img-3.png b/concept-modern/src/assets/images/eco-slider-img-3.png
new file mode 100644
index 0000000..a539e61
Binary files /dev/null and b/concept-modern/src/assets/images/eco-slider-img-3.png differ
diff --git a/concept-modern/src/js/app.js b/concept-modern/src/js/app.js
index 8c4f664..a7ded7e 100644
--- a/concept-modern/src/js/app.js
+++ b/concept-modern/src/js/app.js
@@ -1,6 +1,9 @@
 // Main Application JavaScript
 import * as bootstrap from 'bootstrap';
 
+// Make Bootstrap available globally
+window.bootstrap = bootstrap;
+
 // Import components
 import { initSidebar } from './components/sidebar.js';
 import { initTooltips } from './components/tooltips.js';
diff --git a/concept-modern/src/js/pages/products.js b/concept-modern/src/js/pages/products.js
index aecf5ef..5b0eafe 100644
--- a/concept-modern/src/js/pages/products.js
+++ b/concept-modern/src/js/pages/products.js
@@ -1,3 +1,6 @@
+// Import Bootstrap
+import * as bootstrap from 'bootstrap';
+
 // E-commerce Products Page functionality
 export function initializeProducts() {
     // Initialize tooltips
@@ -220,7 +223,9 @@ function handleAddProduct() {
     
     // Close modal
     const modal = bootstrap.Modal.getInstance(document.getElementById('addProductModal'));
-    modal.hide();
+    if (modal) {
+        modal.hide();
+    }
     
     // Reset form
     document.getElementById('addProductForm').reset();
diff --git a/concept-modern/src/pages/ecommerce/checkout.html b/concept-modern/src/pages/ecommerce/checkout.html
index a290324..7c03f25 100644
--- a/concept-modern/src/pages/ecommerce/checkout.html
+++ b/concept-modern/src/pages/ecommerce/checkout.html
@@ -240,26 +240,26 @@
                                 <div class="order-items mb-3">
                                     <div class="order-item d-flex justify-content-between align-items-start mb-3">
                                         <div class="d-flex">
-                                            <img src="/assets/images/eco-product-img-1.png" alt="Product" width="60" class="me-3">
+                                            <img src="https://placehold.co/80x80/5969ff/ffffff?text=iPhone&font=montserrat" alt="Product" width="60" class="me-3">
                                             <div>
-                                                <h6 class="mb-1">iPhone 15 Pro Max</h6>
-                                                <small class="text-muted">512GB, Natural Titanium</small>
+                                                <h6 class="mb-1">iPhone 18 Pro Max</h6>
+                                                <small class="text-muted">1TB, Cosmic Titanium</small>
                                                 <div class="text-muted small">Qty: 1</div>
                                             </div>
                                         </div>
-                                        <span class="fw-bold">$1,399</span>
+                                        <span class="fw-bold">$1,899</span>
                                     </div>
                                     
                                     <div class="order-item d-flex justify-content-between align-items-start mb-3">
                                         <div class="d-flex">
-                                            <img src="/assets/images/eco-product-img-3.png" alt="Product" width="60" class="me-3">
+                                            <img src="https://placehold.co/80x80/ff407b/ffffff?text=AirPods&font=montserrat" alt="Product" width="60" class="me-3">
                                             <div>
-                                                <h6 class="mb-1">AirPods Pro</h6>
-                                                <small class="text-muted">2nd Generation</small>
+                                                <h6 class="mb-1">AirPods Pro 3</h6>
+                                                <small class="text-muted">3rd Generation with Lossless</small>
                                                 <div class="text-muted small">Qty: 1</div>
                                             </div>
                                         </div>
-                                        <span class="fw-bold">$249</span>
+                                        <span class="fw-bold">$299</span>
                                     </div>
                                 </div>
                                 
@@ -280,7 +280,7 @@
                                 <div class="order-totals">
                                     <div class="d-flex justify-content-between mb-2">
                                         <span>Subtotal</span>
-                                        <span>$1,648.00</span>
+                                        <span>$2,198.00</span>
                                     </div>
                                     <div class="d-flex justify-content-between mb-2">
                                         <span>Shipping</span>
@@ -288,12 +288,12 @@
                                     </div>
                                     <div class="d-flex justify-content-between mb-2">
                                         <span>Tax</span>
-                                        <span>$149.67</span>
+                                        <span>$197.82</span>
                                     </div>
                                     <hr>
                                     <div class="d-flex justify-content-between mb-3">
                                         <strong>Total</strong>
-                                        <strong class="text-primary h5 mb-0">$1,812.67</strong>
+                                        <strong class="text-primary h5 mb-0">$2,410.82</strong>
                                     </div>
                                 </div>
                                 
diff --git a/concept-modern/src/pages/ecommerce/product-single.html b/concept-modern/src/pages/ecommerce/product-single.html
index b23bf40..2d6d6ed 100644
--- a/concept-modern/src/pages/ecommerce/product-single.html
+++ b/concept-modern/src/pages/ecommerce/product-single.html
@@ -41,13 +41,13 @@
                                     <div class="col-xl-6 col-lg-6 col-md-12">
                                         <div class="product-images">
                                             <div class="main-image mb-3">
-                                                <img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid" id="mainImage">
+                                                <img src="https://placehold.co/600x600/5969ff/ffffff?text=iPhone+18+Pro+Max&font=montserrat" alt="Product" class="img-fluid" id="mainImage">
                                             </div>
                                             <div class="image-thumbnails d-flex gap-2">
-                                                <img src="/assets/images/eco-product-img-1.png" alt="Thumb 1" class="img-thumbnail active" width="80" onclick="changeImage(this)">
-                                                <img src="/assets/images/eco-product-img-2.png" alt="Thumb 2" class="img-thumbnail" width="80" onclick="changeImage(this)">
-                                                <img src="/assets/images/eco-product-img-3.png" alt="Thumb 3" class="img-thumbnail" width="80" onclick="changeImage(this)">
-                                                <img src="/assets/images/eco-product-img-4.png" alt="Thumb 4" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/5969ff/ffffff?text=iPhone+18+Pro+Max&font=montserrat" alt="Thumb 1" class="img-thumbnail active" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/ff407b/ffffff?text=iPhone+18+Side&font=montserrat" alt="Thumb 2" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/25d5f2/ffffff?text=iPhone+18+Back&font=montserrat" alt="Thumb 3" class="img-thumbnail" width="80" onclick="changeImage(this)">
+                                                <img src="https://placehold.co/600x600/ffc750/ffffff?text=iPhone+18+Camera&font=montserrat" alt="Thumb 4" class="img-thumbnail" width="80" onclick="changeImage(this)">
                                             </div>
                                         </div>
                                     </div>
@@ -72,8 +72,8 @@
                                             </div>
                                             
                                             <div class="price mb-4">
-                                                <h3 class="text-primary mb-0">$1,199.00</h3>
-                                                <del class="text-muted">$1,399.00</del>
+                                                <h3 class="text-primary mb-0">$1,899.00</h3>
+                                                <del class="text-muted">$2,099.00</del>
                                                 <span class="badge bg-danger ms-2">-14% OFF</span>
                                             </div>
                                             
@@ -393,7 +393,7 @@
                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                                         <div class="card product-card h-100">
                                             <div class="card-header p-0">
-                                                <img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
+                                                <img src="https://placehold.co/600x600/ff407b/ffffff?text=iPhone+18+Side&font=montserrat" alt="Product" class="img-fluid">
                                             </div>
                                             <div class="card-body">
                                                 <h6 class="card-title mb-1">
@@ -417,7 +417,7 @@
                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                                         <div class="card product-card h-100">
                                             <div class="card-header p-0">
-                                                <img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
+                                                <img src="https://placehold.co/600x600/25d5f2/ffffff?text=iPhone+18+Back&font=montserrat" alt="Product" class="img-fluid">
                                             </div>
                                             <div class="card-body">
                                                 <h6 class="card-title mb-1">
@@ -441,7 +441,7 @@
                                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                                         <div class="card product-card h-100">
                                             <div class="card-header p-0">
-                                                <img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
+                                                <img src="https://placehold.co/600x600/ffc750/ffffff?text=iPhone+18+Camera&font=montserrat" alt="Product" class="img-fluid">
                                             </div>
                                             <div class="card-body">
                                                 <h6 class="card-title mb-1">
diff --git a/concept-modern/src/pages/ecommerce/products.html b/concept-modern/src/pages/ecommerce/products.html
index c9aa903..db737f6 100644
--- a/concept-modern/src/pages/ecommerce/products.html
+++ b/concept-modern/src/pages/ecommerce/products.html
@@ -37,34 +37,50 @@
                         <div class="card">
                             <div class="card-body">
                                 <div class="row align-items-center">
-                                    <div class="col-xl-6 col-lg-6 col-md-12">
-                                        <div class="input-group">
+                                    <div class="col-xl-4 col-lg-4 col-md-12 mb-3 mb-lg-0">
+                                        <div class="input-group input-group-lg">
                                             <input type="text" class="form-control" placeholder="Search products..." id="productSearch">
                                             <button class="btn btn-primary" type="button">
                                                 <i class="fas fa-search"></i>
                                             </button>
                                         </div>
                                     </div>
-                                    <div class="col-xl-6 col-lg-6 col-md-12">
-                                        <div class="d-flex gap-2 justify-content-lg-end mt-3 mt-lg-0">
-                                            <select class="form-select" id="categoryFilter">
-                                                <option value="">All Categories</option>
-                                                <option value="electronics">Electronics</option>
-                                                <option value="fashion">Fashion</option>
-                                                <option value="home">Home & Garden</option>
-                                                <option value="sports">Sports & Outdoors</option>
-                                                <option value="books">Books</option>
-                                            </select>
-                                            <select class="form-select" id="sortBy">
-                                                <option value="featured">Featured</option>
-                                                <option value="price-low">Price: Low to High</option>
-                                                <option value="price-high">Price: High to Low</option>
-                                                <option value="newest">Newest First</option>
-                                                <option value="rating">Best Rated</option>
-                                            </select>
-                                            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addProductModal">
-                                                <i class="fas fa-plus me-1"></i>Add Product
-                                            </button>
+                                    <div class="col-xl-8 col-lg-8 col-md-12">
+                                        <div class="row g-2">
+                                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
+                                                <select class="form-select" id="categoryFilter">
+                                                    <option value="">All Categories</option>
+                                                    <option value="electronics">Electronics</option>
+                                                    <option value="fashion">Fashion</option>
+                                                    <option value="home">Home & Garden</option>
+                                                    <option value="sports">Sports & Outdoors</option>
+                                                    <option value="books">Books</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
+                                                <select class="form-select" id="sortBy">
+                                                    <option value="featured">Featured</option>
+                                                    <option value="price-low">Price: Low to High</option>
+                                                    <option value="price-high">Price: High to Low</option>
+                                                    <option value="newest">Newest First</option>
+                                                    <option value="rating">Best Rated</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
+                                                <select class="form-select" id="priceFilter">
+                                                    <option value="">All Prices</option>
+                                                    <option value="0-50">Under $50</option>
+                                                    <option value="50-200">$50 - $200</option>
+                                                    <option value="200-500">$200 - $500</option>
+                                                    <option value="500-1000">$500 - $1,000</option>
+                                                    <option value="1000+">Over $1,000</option>
+                                                </select>
+                                            </div>
+                                            <div class="col-xl-3 col-lg-12 col-md-6 col-sm-6">
+                                                <button class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#addProductModal">
+                                                    <i class="fas fa-plus me-1"></i>Add Product
+                                                </button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -135,7 +151,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-1.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/5969ff/ffffff?text=iPhone+18+Pro+Max&font=montserrat" alt="iPhone 18 Pro Max" class="img-fluid">
                                 <span class="badge bg-danger position-absolute top-0 end-0 m-2">-20%</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -179,7 +195,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-2.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/ff407b/ffffff?text=AirPods+Pro+3&font=montserrat" alt="AirPods Pro 3" class="img-fluid">
                                 <span class="badge bg-success position-absolute top-0 end-0 m-2">New</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -222,7 +238,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-3.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/25d5f2/ffffff?text=Apple+Watch+Ultra+3&font=montserrat" alt="Apple Watch Ultra 3" class="img-fluid">
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
                                         <i class="fas fa-eye"></i>
@@ -264,7 +280,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <img src="/assets/images/eco-product-img-4.png" alt="Product" class="img-fluid">
+                                <img src="https://placehold.co/400x400/ffc750/ffffff?text=MacBook+Pro+M5&font=montserrat" alt="MacBook Pro M5" class="img-fluid">
                                 <span class="badge bg-danger position-absolute top-0 end-0 m-2">Hot</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -307,9 +323,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-laptop fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/fd5190/ffffff?text=Dell+XPS+16&font=montserrat" alt="Dell XPS 16" class="img-fluid">
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
                                         <i class="fas fa-eye"></i>
@@ -350,9 +364,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-tablet-alt fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/28b62c/ffffff?text=iPad+Pro+M4&font=montserrat" alt="iPad Pro M4" class="img-fluid">
                                 <span class="badge bg-info position-absolute top-0 end-0 m-2">Popular</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
@@ -394,9 +406,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-camera fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/158cba/ffffff?text=Canon+EOS+R5&font=montserrat" alt="Canon EOS R5" class="img-fluid">
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
                                         <i class="fas fa-eye"></i>
@@ -437,9 +447,7 @@
                     <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 col-12 mb-4">
                         <div class="card product-card h-100">
                             <div class="card-header p-0 position-relative">
-                                <div class="placeholder-image d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
-                                    <i class="fas fa-gamepad fa-3x text-muted"></i>
-                                </div>
+                                <img src="https://placehold.co/400x400/ff6f69/ffffff?text=PlayStation+5+Pro&font=montserrat" alt="PlayStation 5 Pro" class="img-fluid">
                                 <span class="badge bg-danger position-absolute top-0 end-0 m-2">-15%</span>
                                 <div class="product-actions">
                                     <button class="btn btn-sm btn-light" data-bs-toggle="tooltip" title="Quick View">
diff --git a/concept-modern/src/partials/layouts/base.hbs b/concept-modern/src/partials/layouts/base.hbs
index 6b9a4a4..40a027b 100644
--- a/concept-modern/src/partials/layouts/base.hbs
+++ b/concept-modern/src/partials/layouts/base.hbs
@@ -1,23 +1,11 @@
 <!doctype html>
 <html lang="en">
 <head>
-    {{> layouts/head }}
+    {{#> head}}{{/head}}
 </head>
 <body>
-    <div class="dashboard-main-wrapper">
-        {{> layouts/header }}
-        {{> layouts/sidebar }}
-        
-        <div class="dashboard-wrapper">
-            <div class="dashboard-content">
-                <div class="container-fluid">
-                    {{{ body }}}
-                </div>
-            </div>
-            {{> layouts/footer }}
-        </div>
-    </div>
+    {{#> body}}{{/body}}
     
-    {{> layouts/scripts }}
+    {{#> scripts}}{{/scripts}}
 </body>
 </html>
\ No newline at end of file
diff --git a/concept-modern/src/partials/layouts/main.hbs b/concept-modern/src/partials/layouts/main.hbs
new file mode 100644
index 0000000..8c9aa25
--- /dev/null
+++ b/concept-modern/src/partials/layouts/main.hbs
@@ -0,0 +1,13 @@
+{{#> layouts/base}}
+    {{#*inline "head"}}
+        {{> layouts/head title=title}}
+    {{/inline}}
+    
+    {{#*inline "body"}}
+        {{> content}}
+    {{/inline}}
+    
+    {{#*inline "scripts"}}
+        {{> layouts/scripts}}
+    {{/inline}}
+{{/layouts/base}}
\ No newline at end of file
diff --git a/concept-modern/src/scss/components/_buttons.scss b/concept-modern/src/scss/components/_buttons.scss
index 2b559d5..755a22b 100644
--- a/concept-modern/src/scss/components/_buttons.scss
+++ b/concept-modern/src/scss/components/_buttons.scss
@@ -22,4 +22,49 @@
     &.active {
         color: $white !important;
     }
+}
+
+// Dark buttons should have white text
+.btn-dark,
+.btn-secondary {
+    color: $white !important;
+    
+    &:hover,
+    &:focus,
+    &:active,
+    &.active,
+    &:disabled,
+    &.disabled {
+        color: $white !important;
+    }
+}
+
+// Pagination styles
+.pagination {
+    .page-item {
+        &.active .page-link {
+            color: $white !important;
+            background-color: $primary;
+            border-color: $primary;
+        }
+        
+        .page-link {
+            color: $primary;
+            border-color: #dee2e6;
+            
+            &:hover {
+                color: $white !important;
+                background-color: $primary;
+                border-color: $primary;
+            }
+            
+            &:focus {
+                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+            }
+        }
+        
+        &.disabled .page-link {
+            color: #6c757d;
+        }
+    }
 }
\ No newline at end of file
diff --git a/concept-modern/src/scss/main.scss b/concept-modern/src/scss/main.scss
index 901b9c3..1a797d7 100644
--- a/concept-modern/src/scss/main.scss
+++ b/concept-modern/src/scss/main.scss
@@ -28,11 +28,13 @@
 @import "pages/dashboard";
 @import "pages/influencer";
 @import "pages/influencer-finder";
+@import "pages/influencer-profile";
 @import "pages/calendar";
 @import "pages/chat";
 @import "pages/settings";
 @import "pages/users";
 @import "pages/timeline";
+@import "pages/ecommerce";
 @import "pages/products";
 @import "pages/product-single";
 @import "pages/checkout";
diff --git a/concept-modern/src/scss/pages/_ecommerce.scss b/concept-modern/src/scss/pages/_ecommerce.scss
new file mode 100644
index 0000000..b576d32
--- /dev/null
+++ b/concept-modern/src/scss/pages/_ecommerce.scss
@@ -0,0 +1,284 @@
+// E-Commerce Pages Styles
+
+// Filter bar improvements
+.dashboard-ecommerce {
+    .card-body {
+        .input-group-lg {
+            .form-control {
+                font-size: 1rem;
+                padding: 0.75rem 1rem;
+                border-right: 0;
+                
+                &:focus {
+                    border-color: $primary;
+                    box-shadow: none;
+                }
+            }
+            
+            .btn {
+                border-left: 0;
+                padding: 0.75rem 1.25rem;
+                
+                i {
+                    font-size: 1.1rem;
+                }
+            }
+        }
+        
+        .form-select {
+            border-color: #dee2e6;
+            font-size: 0.875rem;
+            
+            &:focus {
+                border-color: $primary;
+                box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.1);
+            }
+        }
+    }
+}
+
+// Product Cards
+.product-card {
+    transition: all 0.3s ease;
+    border: 1px solid #e9ecef;
+    overflow: hidden;
+    
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+        
+        .product-actions {
+            opacity: 1;
+        }
+    }
+    
+    .card-header {
+        position: relative;
+        overflow: hidden;
+        background: #f8f9fa;
+        min-height: 300px;
+        max-height: 300px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 !important;
+        
+        img {
+            width: 100%;
+            height: 300px;
+            object-fit: cover;
+            transition: transform 0.3s ease;
+        }
+        
+        &:hover img {
+            transform: scale(1.05);
+        }
+    }
+    
+    .product-actions {
+        position: absolute;
+        bottom: 50%;
+        left: 50%;
+        transform: translate(-50%, 50%);
+        opacity: 0;
+        transition: all 0.3s ease;
+        display: flex;
+        gap: 0.5rem;
+        
+        .btn {
+            width: 40px;
+            height: 40px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.95);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+            
+            i {
+                font-size: 1rem;
+                line-height: 1;
+            }
+            
+            &:hover {
+                transform: scale(1.1);
+                background: white;
+                color: $primary;
+                border-color: $primary;
+                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+            }
+        }
+    }
+    
+    .card-body {
+        .card-title {
+            font-size: 1rem;
+            font-weight: 600;
+            
+            a {
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+    }
+}
+
+// Product Single Page
+.product-images {
+    .main-image {
+        text-align: center;
+        background: #f8f9fa;
+        padding: 2rem;
+        border-radius: 0.5rem;
+        min-height: 500px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        
+        img {
+            max-width: 100%;
+            height: auto;
+            max-height: 500px;
+            object-fit: contain;
+            cursor: zoom-in;
+            transition: transform 0.3s ease;
+            
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+    }
+    
+    .image-thumbnails {
+        overflow-x: auto;
+        white-space: nowrap;
+        padding: 0.5rem 0;
+        
+        img {
+            cursor: pointer;
+            transition: all 0.2s ease;
+            opacity: 0.6;
+            border: 2px solid transparent;
+            background: #f8f9fa;
+            padding: 0.25rem;
+            
+            &:hover {
+                opacity: 1;
+                border-color: $primary;
+            }
+            
+            &.active {
+                opacity: 1;
+                border-color: $primary;
+            }
+        }
+    }
+}
+
+// Checkout Page
+.checkout-steps {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+    position: relative;
+    
+    &::before {
+        content: '';
+        position: absolute;
+        top: 25px;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: #e9ecef;
+        z-index: 0;
+    }
+    
+    .step {
+        flex: 1;
+        text-align: center;
+        position: relative;
+        z-index: 1;
+        
+        .step-icon {
+            width: 50px;
+            height: 50px;
+            margin: 0 auto;
+            background: #e9ecef;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+            color: #6c757d;
+            transition: all 0.3s ease;
+        }
+        
+        .step-title {
+            margin-top: 0.5rem;
+            font-size: 0.875rem;
+            color: #6c757d;
+            transition: color 0.3s ease;
+        }
+        
+        &.active {
+            .step-icon {
+                background: $primary;
+                color: white;
+                box-shadow: 0 2px 10px rgba($primary, 0.3);
+            }
+            
+            .step-title {
+                color: $primary;
+                font-weight: 500;
+            }
+        }
+        
+        &.completed {
+            .step-icon {
+                background: $success;
+                color: white;
+            }
+            
+            .step-title {
+                color: $success;
+            }
+        }
+    }
+}
+
+// Order items in checkout
+.order-item {
+    img {
+        border-radius: 0.25rem;
+        object-fit: cover;
+        background: #f8f9fa;
+        padding: 0.5rem;
+    }
+}
+
+// Responsive adjustments
+@media (max-width: 767.98px) {
+    .product-card {
+        .card-header {
+            min-height: 200px;
+            
+            img {
+                max-height: 200px;
+            }
+        }
+    }
+    
+    .product-images {
+        .main-image {
+            min-height: 300px;
+            padding: 1rem;
+            
+            img {
+                max-height: 300px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/concept-modern/src/scss/pages/_influencer-profile.scss b/concept-modern/src/scss/pages/_influencer-profile.scss
new file mode 100644
index 0000000..e703d4c
--- /dev/null
+++ b/concept-modern/src/scss/pages/_influencer-profile.scss
@@ -0,0 +1,305 @@
+// Influencer Profile Page Styles
+
+// Profile Card
+.profile-card {
+    .user-avatar-xxl {
+        width: 120px;
+        height: 120px;
+        object-fit: cover;
+    }
+    
+    .card-body {
+        h3 {
+            font-weight: 600;
+        }
+        
+        h5 {
+            font-size: 1rem;
+            font-weight: 600;
+            color: #495057;
+        }
+    }
+    
+    .rating-star {
+        font-size: 1.125rem;
+        
+        i {
+            margin-right: 2px;
+        }
+    }
+    
+    .social-channels {
+        li {
+            transition: all 0.2s ease;
+            
+            &:hover {
+                transform: translateX(5px);
+            }
+        }
+        
+        a {
+            color: #495057;
+            transition: color 0.2s ease;
+            
+            &:hover {
+                color: $primary;
+            }
+            
+            i {
+                transition: transform 0.2s ease;
+            }
+        }
+    }
+}
+
+// Profile tabs
+.nav-pills {
+    .nav-link {
+        color: #495057;
+        border: 1px solid #dee2e6;
+        margin: 0 0.25rem;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            background-color: #f8f9fa;
+            transform: translateY(-2px);
+        }
+        
+        &.active {
+            background-color: $primary;
+            border-color: $primary;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba($primary, 0.15);
+        }
+        
+        i {
+            font-size: 0.875rem;
+        }
+    }
+}
+
+// Campaign cards
+.campaign-card {
+    transition: all 0.3s ease;
+    border: 1px solid #e9ecef;
+    
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+    }
+    
+    .campaign-logo {
+        width: 60px;
+        height: 60px;
+        object-fit: contain;
+    }
+    
+    .campaign-dates {
+        font-size: 0.875rem;
+        color: #6c757d;
+        
+        i {
+            font-size: 0.75rem;
+        }
+    }
+    
+    .card-footer {
+        background-color: #f8f9fa;
+    }
+    
+    .campaign-metric {
+        padding: 0.5rem;
+        border-right: 1px solid #dee2e6;
+        
+        &:last-child {
+            border-right: 0;
+        }
+        
+        h5 {
+            color: $primary;
+            font-weight: 600;
+        }
+        
+        small {
+            font-size: 0.75rem;
+        }
+    }
+}
+
+// Pricing cards
+.pricing-card {
+    transition: all 0.3s ease;
+    border: 1px solid #dee2e6;
+    
+    &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    }
+    
+    &.featured {
+        transform: scale(1.05);
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
+        
+        &:hover {
+            transform: scale(1.05) translateY(-5px);
+        }
+    }
+    
+    .card-header {
+        padding: 2rem 1rem;
+        
+        h4 {
+            font-size: 1.5rem;
+            font-weight: 600;
+        }
+    }
+    
+    .card-body {
+        h1 {
+            font-size: 3rem;
+            font-weight: 700;
+        }
+    }
+    
+    .package-features {
+        li {
+            padding: 0.5rem 0;
+            font-size: 0.875rem;
+            
+            i {
+                font-size: 0.75rem;
+            }
+        }
+    }
+}
+
+// Reviews
+.review-block {
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #e9ecef;
+    
+    &:last-child {
+        border-bottom: 0;
+        padding-bottom: 0;
+    }
+    
+    .review-text {
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #495057;
+        font-style: italic;
+    }
+    
+    .reviewer-info {
+        font-size: 0.875rem;
+        
+        strong {
+            color: #212529;
+        }
+    }
+}
+
+// Message form
+#messageForm {
+    .form-label {
+        font-weight: 500;
+        color: #495057;
+    }
+    
+    .form-control {
+        &:focus {
+            border-color: $primary;
+            box-shadow: 0 0 0 0.2rem rgba($primary, 0.15);
+        }
+    }
+    
+    textarea {
+        resize: vertical;
+        min-height: 120px;
+    }
+}
+
+// Section titles
+.section-block {
+    margin-bottom: 1.5rem;
+    
+    .section-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #212529;
+        margin-bottom: 0;
+    }
+}
+
+// Mobile responsive
+@media (max-width: 991.98px) {
+    .profile-card {
+        margin-bottom: 2rem;
+    }
+    
+    .nav-pills {
+        .nav-link {
+            margin: 0.25rem 0;
+            font-size: 0.875rem;
+        }
+    }
+    
+    .campaign-card {
+        .d-flex {
+            flex-direction: column;
+            text-align: center;
+            
+            .campaign-logo {
+                margin: 0 auto 1rem !important;
+            }
+        }
+    }
+    
+    .pricing-card {
+        &.featured {
+            transform: scale(1);
+        }
+    }
+}
+
+@media (max-width: 767.98px) {
+    .campaign-metric {
+        h5 {
+            font-size: 1rem;
+        }
+        
+        small {
+            font-size: 0.625rem;
+        }
+    }
+    
+    .nav-pills {
+        flex-direction: column;
+        
+        .nav-link {
+            width: 100%;
+            margin: 0.25rem 0;
+        }
+    }
+}
+
+// Animations
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.tab-pane {
+    animation: fadeInUp 0.3s ease;
+}
+
+// Stats animation
+.card-body h1 {
+    transition: all 0.3s ease;
+}
\ No newline at end of file
diff --git a/concept-modern/src/test.html b/concept-modern/src/test.html
new file mode 100644
index 0000000..62dc007
--- /dev/null
+++ b/concept-modern/src/test.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Test Page</title>
+    <link rel="stylesheet" href="/scss/main.scss">
+</head>
+<body>
+    <div class="container mt-5">
+        <h1>Test Page</h1>
+        <p>This is a test page to verify Vite and styles are working.</p>
+        
+        <button class="btn btn-primary">Primary Button</button>
+        <button class="btn btn-secondary">Secondary Button</button>
+        
+        <div class="alert alert-info mt-3" role="alert">
+            If you can see this styled alert, Bootstrap CSS is working!
+        </div>
+        
+        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#testModal">
+            Test Modal (Tests Bootstrap JS)
+        </button>
+        
+        <!-- Modal -->
+        <div class="modal fade" id="testModal" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Test Modal</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                    </div>
+                    <div class="modal-body">
+                        If this modal opens, Bootstrap JavaScript is working!
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script type="module" src="/js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/concept-modern/vite.config.js b/concept-modern/vite.config.js
index 5dae003..ae1cf16 100644
--- a/concept-modern/vite.config.js
+++ b/concept-modern/vite.config.js
@@ -67,6 +67,7 @@ export default defineConfig({
         'chat': resolve(__dirname, 'src/pages/chat.html'),
         'inbox': resolve(__dirname, 'src/pages/inbox.html'),
         'influencer-finder': resolve(__dirname, 'src/pages/apps/influencer-finder.html'),
+        'influencer-profile': resolve(__dirname, 'src/pages/apps/influencer-profile.html'),
         // Settings
         'settings': resolve(__dirname, 'src/pages/settings.html'),
         // User Management