diff --git a/src/App.js b/src/App.js
index e1b2110..6f0f0e2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import './App.css';
 import Header from './components/Header';
 import ProductList from './components/ProductList';
@@ -11,72 +11,66 @@ import ArtDecor from './pages/ArtDecor';
 import Collectibles from './pages/Collectibles';
 import About from './pages/About';
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      cartItems: [],
-      isCartOpen: false,
-      searchTerm: '',
-      currentPage: 'home'
-    };
-  }
+const App = () => {
+  const [cartItems, setCartItems] = useState([]);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState('home');
 
-  handleAddToCart = (product) => {
-    const existingItem = this.state.cartItems.find(item => item.id === product.id);
-    
-    if (existingItem) {
-      this.setState({
-        cartItems: this.state.cartItems.map(item =>
+  const handleAddToCart = useCallback((product) => {
+    setCartItems(prevItems => {
+      const existingItem = prevItems.find(item => item.id === product.id);
+      
+      if (existingItem) {
+        return prevItems.map(item =>
           item.id === product.id
             ? { ...item, quantity: item.quantity + 1 }
             : item
-        )
-      });
-    } else {
-      this.setState({
-        cartItems: [...this.state.cartItems, { ...product, quantity: 1 }]
-      });
-    }
-  }
-
-  handleRemoveFromCart = (productId) => {
-    this.setState({
-      cartItems: this.state.cartItems.filter(item => item.id !== productId)
+        );
+      } else {
+        return [...prevItems, { ...product, quantity: 1 }];
+      }
     });
-  }
+  }, []);
 
-  handleUpdateQuantity = (productId, newQuantity) => {
-    this.setState({
-      cartItems: this.state.cartItems.map(item =>
+  const handleRemoveFromCart = useCallback((productId) => {
+    setCartItems(prevItems => 
+      prevItems.filter(item => item.id !== productId)
+    );
+  }, []);
+
+  const handleUpdateQuantity = useCallback((productId, newQuantity) => {
+    setCartItems(prevItems =>
+      prevItems.map(item =>
         item.id === productId
           ? { ...item, quantity: newQuantity }
           : item
       )
-    });
-  }
+    );
+  }, []);
 
-  handleCartToggle = () => {
-    this.setState({ isCartOpen: !this.state.isCartOpen });
-  }
+  const handleCartToggle = useCallback(() => {
+    setIsCartOpen(prev => !prev);
+  }, []);
 
-  handleSearch = (searchTerm) => {
-    this.setState({ searchTerm, currentPage: 'products' });
-  }
+  const handleSearch = useCallback((searchTerm) => {
+    setSearchTerm(searchTerm);
+    setCurrentPage('products');
+  }, []);
 
-  handleNavigation = (page) => {
-    this.setState({ currentPage: page, searchTerm: '' });
-  }
+  const handleNavigation = useCallback((page) => {
+    setCurrentPage(page);
+    setSearchTerm('');
+  }, []);
 
-  getCartItemCount = () => {
-    return this.state.cartItems.reduce((total, item) => total + item.quantity, 0);
-  }
+  const cartItemCount = useMemo(() => {
+    return cartItems.reduce((total, item) => total + item.quantity, 0);
+  }, [cartItems]);
 
-  renderCurrentPage = () => {
-    const { currentPage, searchTerm } = this.state;
+  const renderCurrentPage = useCallback(() => {
     const commonProps = {
-      onAddToCart: this.handleAddToCart,
-      onNavigate: this.handleNavigation
+      onAddToCart: handleAddToCart,
+      onNavigate: handleNavigation
     };
 
     switch (currentPage) {
@@ -96,40 +90,38 @@ class App extends Component {
       default:
         return (
           <ProductList
-            onAddToCart={this.handleAddToCart}
+            onAddToCart={handleAddToCart}
             searchTerm={searchTerm}
           />
         );
     }
-  }
+  }, [currentPage, searchTerm, handleAddToCart, handleNavigation]);
 
-  render() {
-    return (
-      <div className="App">
-        <Header
-          cartItemCount={this.getCartItemCount()}
-          onCartClick={this.handleCartToggle}
-          onSearch={this.handleSearch}
-          onNavigate={this.handleNavigation}
-          currentPage={this.state.currentPage}
-        />
-        
-        <main className="main-content">
-          {this.renderCurrentPage()}
-        </main>
+  return (
+    <div className="App">
+      <Header
+        cartItemCount={cartItemCount}
+        onCartClick={handleCartToggle}
+        onSearch={handleSearch}
+        onNavigate={handleNavigation}
+        currentPage={currentPage}
+      />
+      
+      <main className="main-content">
+        {renderCurrentPage()}
+      </main>
 
-        <Cart
-          cartItems={this.state.cartItems}
-          isOpen={this.state.isCartOpen}
-          onClose={this.handleCartToggle}
-          onRemoveFromCart={this.handleRemoveFromCart}
-          onUpdateQuantity={this.handleUpdateQuantity}
-        />
+      <Cart
+        cartItems={cartItems}
+        isOpen={isCartOpen}
+        onClose={handleCartToggle}
+        onRemoveFromCart={handleRemoveFromCart}
+        onUpdateQuantity={handleUpdateQuantity}
+      />
 
-        <Footer />
-      </div>
-    );
-  }
-}
+      <Footer />
+    </div>
+  );
+};
 
 export default App;
diff --git a/src/components/Cart.js b/src/components/Cart.js
index 78d132e..7a34473 100644
--- a/src/components/Cart.js
+++ b/src/components/Cart.js
@@ -1,128 +1,111 @@
-import React, { Component } from 'react';
+import React, { useCallback, useMemo, memo } from 'react';
 
-class Cart extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isOpen: false
-    };
-  }
+const Cart = memo(({ cartItems, isOpen, onClose, onRemoveFromCart, onUpdateQuantity }) => {
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.isOpen !== this.props.isOpen) {
-      this.setState({ isOpen: this.props.isOpen });
+  const handleRemoveItem = useCallback((productId) => {
+    if (onRemoveFromCart) {
+      onRemoveFromCart(productId);
     }
-  }
+  }, [onRemoveFromCart]);
 
-  handleRemoveItem = (productId) => {
-    if (this.props.onRemoveFromCart) {
-      this.props.onRemoveFromCart(productId);
-    }
-  }
-
-  handleUpdateQuantity = (productId, newQuantity) => {
+  const handleUpdateQuantity = useCallback((productId, newQuantity) => {
     if (newQuantity <= 0) {
-      this.handleRemoveItem(productId);
-    } else if (this.props.onUpdateQuantity) {
-      this.props.onUpdateQuantity(productId, newQuantity);
+      handleRemoveItem(productId);
+    } else if (onUpdateQuantity) {
+      onUpdateQuantity(productId, newQuantity);
     }
-  }
+  }, [onUpdateQuantity, handleRemoveItem]);
 
-  calculateTotal = () => {
-    return this.props.cartItems.reduce((total, item) => {
+  const total = useMemo(() => {
+    return cartItems.reduce((total, item) => {
       return total + (item.price * item.quantity);
     }, 0);
-  }
+  }, [cartItems]);
 
-  handleCheckout = () => {
+  const handleCheckout = useCallback(() => {
     alert('Thank you for your interest! Checkout functionality would be implemented here.');
-  }
+  }, []);
 
-  render() {
-    const { cartItems, isOpen, onClose } = this.props;
-    const total = this.calculateTotal();
+  if (!isOpen) return null;
 
-    if (!isOpen) return null;
-
-    return (
-      <div className="cart-overlay">
-        <div className="cart-sidebar">
-          <div className="cart-header">
-            <h2>Shopping Cart</h2>
-            <button className="close-cart" onClick={onClose}>×</button>
-          </div>
+  return (
+    <div className="cart-overlay">
+      <div className="cart-sidebar">
+        <div className="cart-header">
+          <h2>Shopping Cart</h2>
+          <button className="close-cart" onClick={onClose}>×</button>
+        </div>
 
-          <div className="cart-content">
-            {cartItems.length === 0 ? (
-              <div className="empty-cart">
-                <p>Your cart is empty</p>
-                <p>Browse our collection of authentic antiques to get started!</p>
-              </div>
-            ) : (
-              <>
-                <div className="cart-items">
-                  {cartItems.map(item => (
-                    <div key={item.id} className="cart-item">
-                      <img 
-                        src={item.image} 
-                        alt={item.name}
-                        className="cart-item-image"
-                      />
-                      <div className="cart-item-details">
-                        <h4>{item.name}</h4>
-                        <p className="cart-item-era">{item.era}</p>
-                        <div className="cart-item-controls">
-                          <div className="quantity-controls">
-                            <button 
-                              onClick={() => this.handleUpdateQuantity(item.id, item.quantity - 1)}
-                              className="quantity-btn"
-                            >
-                              -
-                            </button>
-                            <span className="quantity">{item.quantity}</span>
-                            <button 
-                              onClick={() => this.handleUpdateQuantity(item.id, item.quantity + 1)}
-                              className="quantity-btn"
-                            >
-                              +
-                            </button>
-                          </div>
+        <div className="cart-content">
+          {cartItems.length === 0 ? (
+            <div className="empty-cart">
+              <p>Your cart is empty</p>
+              <p>Browse our collection of authentic antiques to get started!</p>
+            </div>
+          ) : (
+            <>
+              <div className="cart-items">
+                {cartItems.map(item => (
+                  <div key={item.id} className="cart-item">
+                    <img 
+                      src={item.image} 
+                      alt={item.name}
+                      className="cart-item-image"
+                    />
+                    <div className="cart-item-details">
+                      <h4>{item.name}</h4>
+                      <p className="cart-item-era">{item.era}</p>
+                      <div className="cart-item-controls">
+                        <div className="quantity-controls">
                           <button 
-                            onClick={() => this.handleRemoveItem(item.id)}
-                            className="remove-btn"
+                            onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)}
+                            className="quantity-btn"
                           >
-                            Remove
+                            -
+                          </button>
+                          <span className="quantity">{item.quantity}</span>
+                          <button 
+                            onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)}
+                            className="quantity-btn"
+                          >
+                            +
                           </button>
                         </div>
-                        <div className="cart-item-price">
-                          ${(item.price * item.quantity).toLocaleString()}
-                        </div>
+                        <button 
+                          onClick={() => handleRemoveItem(item.id)}
+                          className="remove-btn"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                      <div className="cart-item-price">
+                        ${(item.price * item.quantity).toLocaleString()}
                       </div>
                     </div>
-                  ))}
-                </div>
-
-                <div className="cart-footer">
-                  <div className="cart-total">
-                    <h3>Total: ${total.toLocaleString()}</h3>
                   </div>
-                  <button 
-                    className="checkout-btn"
-                    onClick={this.handleCheckout}
-                  >
-                    Proceed to Checkout
-                  </button>
-                  <p className="shipping-note">
-                    * Free shipping on orders over $1,000
-                  </p>
+                ))}
+              </div>
+
+              <div className="cart-footer">
+                <div className="cart-total">
+                  <h3>Total: ${total.toLocaleString()}</h3>
                 </div>
-              </>
-            )}
-          </div>
+                <button 
+                  className="checkout-btn"
+                  onClick={handleCheckout}
+                >
+                  Proceed to Checkout
+                </button>
+                <p className="shipping-note">
+                  * Free shipping on orders over $1,000
+                </p>
+              </div>
+            </>
+          )}
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+});
 
 export default Cart;
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 6a0dde6..ca7bc4a 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,101 +1,101 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useEffect, memo } from 'react';
 
-class Footer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      email: '',
-      subscribed: false
-    };
-  }
+const Footer = memo(() => {
+  const [email, setEmail] = useState('');
+  const [subscribed, setSubscribed] = useState(false);
 
-  handleEmailChange = (e) => {
-    this.setState({ email: e.target.value });
-  }
+  const handleEmailChange = useCallback((e) => {
+    setEmail(e.target.value);
+  }, []);
 
-  handleNewsletterSubmit = (e) => {
+  const handleNewsletterSubmit = useCallback((e) => {
     e.preventDefault();
-    if (this.state.email) {
-      this.setState({ subscribed: true, email: '' });
-      setTimeout(() => {
-        this.setState({ subscribed: false });
+    if (email) {
+      setSubscribed(true);
+      setEmail('');
+    }
+  }, [email]);
+
+  useEffect(() => {
+    if (subscribed) {
+      const timer = setTimeout(() => {
+        setSubscribed(false);
       }, 3000);
+      return () => clearTimeout(timer);
     }
-  }
+  }, [subscribed]);
 
-  render() {
-    const currentYear = new Date().getFullYear();
+  const currentYear = new Date().getFullYear();
 
-    return (
-      <footer className="footer">
-        <div className="footer-container">
-          <div className="footer-section">
-            <h3>Vintage Treasures</h3>
-            <p>Discover authentic antiques and collectibles from around the world. Each piece tells a story of craftsmanship and history.</p>
-            <div className="social-links">
-              <a href="#facebook" aria-label="Facebook">📘</a>
-              <a href="#instagram" aria-label="Instagram">📷</a>
-              <a href="#twitter" aria-label="Twitter">🐦</a>
-            </div>
+  return (
+    <footer className="footer">
+      <div className="footer-container">
+        <div className="footer-section">
+          <h3>Vintage Treasures</h3>
+          <p>Discover authentic antiques and collectibles from around the world. Each piece tells a story of craftsmanship and history.</p>
+          <div className="social-links">
+            <a href="#facebook" aria-label="Facebook">📘</a>
+            <a href="#instagram" aria-label="Instagram">📷</a>
+            <a href="#twitter" aria-label="Twitter">🐦</a>
           </div>
+        </div>
 
-          <div className="footer-section">
-            <h4>Quick Links</h4>
-            <ul>
-              <li><a href="#about">About Us</a></li>
-              <li><a href="#authentication">Authentication</a></li>
-              <li><a href="#shipping">Shipping Info</a></li>
-              <li><a href="#returns">Returns</a></li>
-              <li><a href="#contact">Contact</a></li>
-            </ul>
-          </div>
+        <div className="footer-section">
+          <h4>Quick Links</h4>
+          <ul>
+            <li><a href="#about">About Us</a></li>
+            <li><a href="#authentication">Authentication</a></li>
+            <li><a href="#shipping">Shipping Info</a></li>
+            <li><a href="#returns">Returns</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div>
 
-          <div className="footer-section">
-            <h4>Categories</h4>
-            <ul>
-              <li><a href="#furniture">Antique Furniture</a></li>
-              <li><a href="#jewelry">Vintage Jewelry</a></li>
-              <li><a href="#art">Art & Decor</a></li>
-              <li><a href="#collectibles">Collectibles</a></li>
-              <li><a href="#books">Rare Books</a></li>
-            </ul>
-          </div>
+        <div className="footer-section">
+          <h4>Categories</h4>
+          <ul>
+            <li><a href="#furniture">Antique Furniture</a></li>
+            <li><a href="#jewelry">Vintage Jewelry</a></li>
+            <li><a href="#art">Art & Decor</a></li>
+            <li><a href="#collectibles">Collectibles</a></li>
+            <li><a href="#books">Rare Books</a></li>
+          </ul>
+        </div>
 
-          <div className="footer-section">
-            <h4>Newsletter</h4>
-            <p>Stay updated with our latest finds and exclusive offers.</p>
-            <form onSubmit={this.handleNewsletterSubmit} className="newsletter-form">
-              <input
-                type="email"
-                placeholder="Enter your email"
-                value={this.state.email}
-                onChange={this.handleEmailChange}
-                className="newsletter-input"
-                required
-              />
-              <button type="submit" className="newsletter-btn">
-                Subscribe
-              </button>
-            </form>
-            {this.state.subscribed && (
-              <p className="subscription-success">Thank you for subscribing!</p>
-            )}
-          </div>
+        <div className="footer-section">
+          <h4>Newsletter</h4>
+          <p>Stay updated with our latest finds and exclusive offers.</p>
+          <form onSubmit={handleNewsletterSubmit} className="newsletter-form">
+            <input
+              type="email"
+              placeholder="Enter your email"
+              value={email}
+              onChange={handleEmailChange}
+              className="newsletter-input"
+              required
+            />
+            <button type="submit" className="newsletter-btn">
+              Subscribe
+            </button>
+          </form>
+          {subscribed && (
+            <p className="subscription-success">Thank you for subscribing!</p>
+          )}
         </div>
+      </div>
 
-        <div className="footer-bottom">
-          <div className="footer-bottom-container">
-            <p>&copy; {currentYear} Vintage Treasures. All rights reserved.</p>
-            <div className="footer-links">
-              <a href="#privacy">Privacy Policy</a>
-              <a href="#terms">Terms of Service</a>
-              <a href="#cookies">Cookie Policy</a>
-            </div>
+      <div className="footer-bottom">
+        <div className="footer-bottom-container">
+          <p>&copy; {currentYear} Vintage Treasures. All rights reserved.</p>
+          <div className="footer-links">
+            <a href="#privacy">Privacy Policy</a>
+            <a href="#terms">Terms of Service</a>
+            <a href="#cookies">Cookie Policy</a>
           </div>
         </div>
-      </footer>
-    );
-  }
-}
+      </div>
+    </footer>
+  );
+});
 
 export default Footer;
diff --git a/src/components/Header.js b/src/components/Header.js
index 136c6f3..a4dabae 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,121 +1,112 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, memo } from 'react';
 
-class Header extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      searchTerm: ''
-    };
-  }
+const Header = memo(({ cartItemCount, onCartClick, onSearch, onNavigate, currentPage }) => {
+  const [searchTerm, setSearchTerm] = useState('');
 
-  handleSearchChange = (e) => {
-    this.setState({ searchTerm: e.target.value });
-  }
+  const handleSearchChange = useCallback((e) => {
+    setSearchTerm(e.target.value);
+  }, []);
 
-  handleSearchSubmit = (e) => {
+  const handleSearchSubmit = useCallback((e) => {
     e.preventDefault();
-    if (this.props.onSearch) {
-      this.props.onSearch(this.state.searchTerm);
+    if (onSearch) {
+      onSearch(searchTerm);
     }
-  }
+  }, [onSearch, searchTerm]);
 
-  handleNavClick = (e, page) => {
+  const handleNavClick = useCallback((e, page) => {
     e.preventDefault();
-    if (this.props.onNavigate) {
-      this.props.onNavigate(page);
+    if (onNavigate) {
+      onNavigate(page);
     }
-  }
+  }, [onNavigate]);
 
-  render() {
-    const { cartItemCount, onCartClick, currentPage } = this.props;
-    
-    return (
-      <header className="header">
-        <div className="header-container">
-          <div className="logo">
-            <h1>Vintage Treasures</h1>
-            <p className="tagline">Authentic Antiques & Collectibles</p>
-          </div>
-          
-          <nav className="navigation">
-            <ul>
-              <li>
-                <a 
-                  href="#home" 
-                  className={currentPage === 'home' ? 'active' : ''}
-                  onClick={(e) => this.handleNavClick(e, 'home')}
-                >
-                  Home
-                </a>
-              </li>
-              <li>
-                <a 
-                  href="#furniture" 
-                  className={currentPage === 'furniture' ? 'active' : ''}
-                  onClick={(e) => this.handleNavClick(e, 'furniture')}
-                >
-                  Furniture
-                </a>
-              </li>
-              <li>
-                <a 
-                  href="#jewelry" 
-                  className={currentPage === 'jewelry' ? 'active' : ''}
-                  onClick={(e) => this.handleNavClick(e, 'jewelry')}
-                >
-                  Jewelry
-                </a>
-              </li>
-              <li>
-                <a 
-                  href="#art" 
-                  className={currentPage === 'art' ? 'active' : ''}
-                  onClick={(e) => this.handleNavClick(e, 'art')}
-                >
-                  Art & Decor
-                </a>
-              </li>
-              <li>
-                <a 
-                  href="#collectibles" 
-                  className={currentPage === 'collectibles' ? 'active' : ''}
-                  onClick={(e) => this.handleNavClick(e, 'collectibles')}
-                >
-                  Collectibles
-                </a>
-              </li>
-              <li>
-                <a 
-                  href="#about" 
-                  className={currentPage === 'about' ? 'active' : ''}
-                  onClick={(e) => this.handleNavClick(e, 'about')}
-                >
-                  About
-                </a>
-              </li>
-            </ul>
-          </nav>
+  return (
+    <header className="header">
+      <div className="header-container">
+        <div className="logo">
+          <h1>Vintage Treasures</h1>
+          <p className="tagline">Authentic Antiques & Collectibles</p>
+        </div>
+        
+        <nav className="navigation">
+          <ul>
+            <li>
+              <a 
+                href="#home" 
+                className={currentPage === 'home' ? 'active' : ''}
+                onClick={(e) => handleNavClick(e, 'home')}
+              >
+                Home
+              </a>
+            </li>
+            <li>
+              <a 
+                href="#furniture" 
+                className={currentPage === 'furniture' ? 'active' : ''}
+                onClick={(e) => handleNavClick(e, 'furniture')}
+              >
+                Furniture
+              </a>
+            </li>
+            <li>
+              <a 
+                href="#jewelry" 
+                className={currentPage === 'jewelry' ? 'active' : ''}
+                onClick={(e) => handleNavClick(e, 'jewelry')}
+              >
+                Jewelry
+              </a>
+            </li>
+            <li>
+              <a 
+                href="#art" 
+                className={currentPage === 'art' ? 'active' : ''}
+                onClick={(e) => handleNavClick(e, 'art')}
+              >
+                Art & Decor
+              </a>
+            </li>
+            <li>
+              <a 
+                href="#collectibles" 
+                className={currentPage === 'collectibles' ? 'active' : ''}
+                onClick={(e) => handleNavClick(e, 'collectibles')}
+              >
+                Collectibles
+              </a>
+            </li>
+            <li>
+              <a 
+                href="#about" 
+                className={currentPage === 'about' ? 'active' : ''}
+                onClick={(e) => handleNavClick(e, 'about')}
+              >
+                About
+              </a>
+            </li>
+          </ul>
+        </nav>
 
-          <div className="header-actions">
-            <form className="search-form" onSubmit={this.handleSearchSubmit}>
-              <input
-                type="text"
-                placeholder="Search antiques..."
-                value={this.state.searchTerm}
-                onChange={this.handleSearchChange}
-                className="search-input"
-              />
-              <button type="submit" className="search-btn">Search</button>
-            </form>
-            
-            <button className="cart-btn" onClick={onCartClick}>
-              Cart ({cartItemCount || 0})
-            </button>
-          </div>
+        <div className="header-actions">
+          <form className="search-form" onSubmit={handleSearchSubmit}>
+            <input
+              type="text"
+              placeholder="Search antiques..."
+              value={searchTerm}
+              onChange={handleSearchChange}
+              className="search-input"
+            />
+            <button type="submit" className="search-btn">Search</button>
+          </form>
+          
+          <button className="cart-btn" onClick={onCartClick}>
+            Cart ({cartItemCount || 0})
+          </button>
         </div>
-      </header>
-    );
-  }
-}
+      </div>
+    </header>
+  );
+});
 
 export default Header;
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 15d845e..e714862 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -1,82 +1,72 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, memo } from 'react';
 
-class ProductCard extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isHovered: false
-    };
-  }
+const ProductCard = memo(({ product, onAddToCart }) => {
+  const [isHovered, setIsHovered] = useState(false);
 
-  handleMouseEnter = () => {
-    this.setState({ isHovered: true });
-  }
+  const handleMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
 
-  handleMouseLeave = () => {
-    this.setState({ isHovered: false });
-  }
+  const handleMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
-  handleAddToCart = () => {
-    if (this.props.onAddToCart) {
-      this.props.onAddToCart(this.props.product);
+  const handleAddToCart = useCallback(() => {
+    if (onAddToCart) {
+      onAddToCart(product);
     }
-  }
+  }, [onAddToCart, product]);
 
-  render() {
-    const { product } = this.props;
-    const { isHovered } = this.state;
-
-    return (
-      <div 
-        className={`product-card ${isHovered ? 'hovered' : ''}`}
-        onMouseEnter={this.handleMouseEnter}
-        onMouseLeave={this.handleMouseLeave}
-      >
-        <div className="product-image-container">
-          <img 
-            src={product.image} 
-            alt={product.name}
-            className="product-image"
-          />
-          {product.isRare && (
-            <span className="rare-badge">Rare Find</span>
-          )}
+  return (
+    <div 
+      className={`product-card ${isHovered ? 'hovered' : ''}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div className="product-image-container">
+        <img 
+          src={product.image} 
+          alt={product.name}
+          className="product-image"
+        />
+        {product.isRare && (
+          <span className="rare-badge">Rare Find</span>
+        )}
+      </div>
+      
+      <div className="product-info">
+        <h3 className="product-name">{product.name}</h3>
+        <p className="product-era">{product.era}</p>
+        <p className="product-description">{product.description}</p>
+        
+        <div className="product-details">
+          <span className="product-condition">
+            Condition: {product.condition}
+          </span>
+          <span className="product-origin">
+            Origin: {product.origin}
+          </span>
         </div>
         
-        <div className="product-info">
-          <h3 className="product-name">{product.name}</h3>
-          <p className="product-era">{product.era}</p>
-          <p className="product-description">{product.description}</p>
-          
-          <div className="product-details">
-            <span className="product-condition">
-              Condition: {product.condition}
-            </span>
-            <span className="product-origin">
-              Origin: {product.origin}
-            </span>
+        <div className="product-footer">
+          <div className="price-container">
+            <span className="product-price">${product.price}</span>
+            {product.originalPrice && (
+              <span className="original-price">${product.originalPrice}</span>
+            )}
           </div>
           
-          <div className="product-footer">
-            <div className="price-container">
-              <span className="product-price">${product.price}</span>
-              {product.originalPrice && (
-                <span className="original-price">${product.originalPrice}</span>
-              )}
-            </div>
-            
-            <button 
-              className="add-to-cart-btn"
-              onClick={this.handleAddToCart}
-              disabled={!product.inStock}
-            >
-              {product.inStock ? 'Add to Cart' : 'Sold Out'}
-            </button>
-          </div>
+          <button 
+            className="add-to-cart-btn"
+            onClick={handleAddToCart}
+            disabled={!product.inStock}
+          >
+            {product.inStock ? 'Add to Cart' : 'Sold Out'}
+          </button>
         </div>
       </div>
-    );
-  }
-}
+    </div>
+  );
+});
 
 export default ProductCard;
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index 5d94b18..72498c3 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -1,111 +1,107 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useMemo, memo } from 'react';
 import ProductCard from './ProductCard';
+import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader';
 
-class ProductList extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sortBy: 'name',
-      filterBy: 'all',
-      products: [
-        {
-          id: 1,
-          name: "Victorian Mahogany Writing Desk",
-          era: "Victorian Era (1860s)",
-          description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
-          price: 2850,
-          originalPrice: 3200,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 2,
-          name: "Art Deco Pearl Necklace",
-          era: "Art Deco (1920s)",
-          description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.",
-          price: 1650,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "jewelry"
-        },
-        {
-          id: 3,
-          name: "Ming Dynasty Porcelain Vase",
-          era: "Ming Dynasty (16th Century)",
-          description: "Rare blue and white porcelain vase with traditional dragon motifs.",
-          price: 8500,
-          condition: "Good",
-          origin: "China",
-          image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 4,
-          name: "Edwardian Silver Tea Set",
-          era: "Edwardian Era (1905)",
-          description: "Complete sterling silver tea service with ornate engravings and original hallmarks.",
-          price: 1200,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop",
-          inStock: false,
-          isRare: false,
-          category: "collectibles"
-        },
-        {
-          id: 5,
-          name: "Louis XVI Armchair",
-          era: "Louis XVI Period (1780s)",
-          description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
-          price: 4200,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 6,
-          name: "Victorian Cameo Brooch",
-          era: "Victorian Era (1870s)",
-          description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.",
-          price: 450,
-          condition: "Excellent",
-          origin: "Italy",
-          image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "jewelry"
-        }
-      ]
-    };
-  }
+const ProductList = memo(({ onAddToCart, searchTerm }) => {
+  const [sortBy, setSortBy] = useState('name');
+  const [filterBy, setFilterBy] = useState('all');
+  const [products] = useState([
+    {
+      id: 1,
+      name: "Victorian Mahogany Writing Desk",
+      era: "Victorian Era (1860s)",
+      description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
+      price: 2850,
+      originalPrice: 3200,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 2,
+      name: "Art Deco Pearl Necklace",
+      era: "Art Deco (1920s)",
+      description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.",
+      price: 1650,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "jewelry"
+    },
+    {
+      id: 3,
+      name: "Ming Dynasty Porcelain Vase",
+      era: "Ming Dynasty (16th Century)",
+      description: "Rare blue and white porcelain vase with traditional dragon motifs.",
+      price: 8500,
+      condition: "Good",
+      origin: "China",
+      image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 4,
+      name: "Edwardian Silver Tea Set",
+      era: "Edwardian Era (1905)",
+      description: "Complete sterling silver tea service with ornate engravings and original hallmarks.",
+      price: 1200,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop",
+      inStock: false,
+      isRare: false,
+      category: "collectibles"
+    },
+    {
+      id: 5,
+      name: "Louis XVI Armchair",
+      era: "Louis XVI Period (1780s)",
+      description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
+      price: 4200,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 6,
+      name: "Victorian Cameo Brooch",
+      era: "Victorian Era (1870s)",
+      description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.",
+      price: 450,
+      condition: "Excellent",
+      origin: "Italy",
+      image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "jewelry"
+    }
+  ]);
 
-  handleSortChange = (e) => {
-    this.setState({ sortBy: e.target.value });
-  }
+  const handleSortChange = useCallback((e) => {
+    setSortBy(e.target.value);
+  }, []);
 
-  handleFilterChange = (e) => {
-    this.setState({ filterBy: e.target.value });
-  }
+  const handleFilterChange = useCallback((e) => {
+    setFilterBy(e.target.value);
+  }, []);
 
-  getSortedAndFilteredProducts = () => {
-    let filteredProducts = this.state.products;
+  const filteredProducts = useMemo(() => {
+    let filtered = products;
 
     // Apply search filter if provided
-    if (this.props.searchTerm) {
-      const searchLower = this.props.searchTerm.toLowerCase();
-      filteredProducts = filteredProducts.filter(product =>
+    if (searchTerm) {
+      const searchLower = searchTerm.toLowerCase();
+      filtered = filtered.filter(product =>
         product.name.toLowerCase().includes(searchLower) ||
         product.description.toLowerCase().includes(searchLower) ||
         product.era.toLowerCase().includes(searchLower)
@@ -113,15 +109,15 @@ class ProductList extends Component {
     }
 
     // Apply category filter
-    if (this.state.filterBy !== 'all') {
-      filteredProducts = filteredProducts.filter(product =>
-        product.category === this.state.filterBy
+    if (filterBy !== 'all') {
+      filtered = filtered.filter(product =>
+        product.category === filterBy
       );
     }
 
     // Apply sorting
-    filteredProducts.sort((a, b) => {
-      switch (this.state.sortBy) {
+    filtered.sort((a, b) => {
+      switch (sortBy) {
         case 'price-low':
           return a.price - b.price;
         case 'price-high':
@@ -134,67 +130,68 @@ class ProductList extends Component {
       }
     });
 
-    return filteredProducts;
-  }
+    return filtered;
+  }, [products, searchTerm, filterBy, sortBy]);
+
+  const imageUrls = useMemo(() => {
+    return extractImageUrls(products);
+  }, [products]);
 
-  render() {
-    const { onAddToCart } = this.props;
-    const products = this.getSortedAndFilteredProducts();
+  useImagePreloader(imageUrls);
 
-    return (
-      <div className="product-list">
-        <div className="product-list-header">
-          <h2>Our Antique Collection</h2>
-          <div className="controls">
-            <div className="filter-control">
-              <label htmlFor="filter">Filter by Category:</label>
-              <select
-                id="filter"
-                value={this.state.filterBy}
-                onChange={this.handleFilterChange}
-              >
-                <option value="all">All Categories</option>
-                <option value="furniture">Furniture</option>
-                <option value="jewelry">Jewelry</option>
-                <option value="art">Art & Decor</option>
-                <option value="collectibles">Collectibles</option>
-              </select>
-            </div>
-            
-            <div className="sort-control">
-              <label htmlFor="sort">Sort by:</label>
-              <select
-                id="sort"
-                value={this.state.sortBy}
-                onChange={this.handleSortChange}
-              >
-                <option value="name">Name</option>
-                <option value="price-low">Price: Low to High</option>
-                <option value="price-high">Price: High to Low</option>
-                <option value="era">Era</option>
-              </select>
-            </div>
+  return (
+    <div className="product-list">
+      <div className="product-list-header">
+        <h2>Our Antique Collection</h2>
+        <div className="controls">
+          <div className="filter-control">
+            <label htmlFor="filter">Filter by Category:</label>
+            <select
+              id="filter"
+              value={filterBy}
+              onChange={handleFilterChange}
+            >
+              <option value="all">All Categories</option>
+              <option value="furniture">Furniture</option>
+              <option value="jewelry">Jewelry</option>
+              <option value="art">Art & Decor</option>
+              <option value="collectibles">Collectibles</option>
+            </select>
+          </div>
+          
+          <div className="sort-control">
+            <label htmlFor="sort">Sort by:</label>
+            <select
+              id="sort"
+              value={sortBy}
+              onChange={handleSortChange}
+            >
+              <option value="name">Name</option>
+              <option value="price-low">Price: Low to High</option>
+              <option value="price-high">Price: High to Low</option>
+              <option value="era">Era</option>
+            </select>
           </div>
         </div>
+      </div>
 
-        <div className="products-grid">
-          {products.length > 0 ? (
-            products.map(product => (
-              <ProductCard
-                key={product.id}
-                product={product}
-                onAddToCart={onAddToCart}
-              />
-            ))
-          ) : (
-            <div className="no-products">
-              <p>No products found matching your criteria.</p>
-            </div>
-          )}
-        </div>
+      <div className="products-grid">
+        {filteredProducts.length > 0 ? (
+          filteredProducts.map(product => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              onAddToCart={onAddToCart}
+            />
+          ))
+        ) : (
+          <div className="no-products">
+            <p>No products found matching your criteria.</p>
+          </div>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+});
 
 export default ProductList;
diff --git a/src/pages/About.js b/src/pages/About.js
index e69eb43..d9db43e 100644
--- a/src/pages/About.js
+++ b/src/pages/About.js
@@ -1,199 +1,201 @@
-import React, { Component } from 'react';
+import React, { useState, memo, useMemo } from 'react';
+import { useImagePreloader } from '../utils/imagePreloader';
 
-class About extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      teamMembers: [
-        {
-          name: "Eleanor Whitmore",
-          title: "Founder & Chief Curator",
-          bio: "With over 30 years in the antiques trade, Eleanor brings unparalleled expertise in European decorative arts.",
-          image: "https://images.unsplash.com/photo-1494790108755-2616c9c9b8d3?w=200&h=200&fit=crop&crop=face"
-        },
-        {
-          name: "James Chen",
-          title: "Asian Art Specialist",
-          bio: "Former museum curator specializing in Chinese and Japanese antiquities with a PhD in Art History.",
-          image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face"
-        },
-        {
-          name: "Isabella Rodriguez",
-          title: "Jewelry Expert",
-          bio: "Certified gemologist and vintage jewelry specialist with expertise in authentication and valuation.",
-          image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
-        }
-      ]
-    };
-  }
+const About = memo(() => {
+  const [teamMembers] = useState([
+    {
+      name: "Eleanor Whitmore",
+      title: "Founder & Chief Curator",
+      bio: "With over 30 years in the antiques trade, Eleanor brings unparalleled expertise in European decorative arts.",
+      image: "https://images.unsplash.com/photo-1494790108755-2616c9c9b8d3?w=200&h=200&fit=crop&crop=face"
+    },
+    {
+      name: "James Chen",
+      title: "Asian Art Specialist",
+      bio: "Former museum curator specializing in Chinese and Japanese antiquities with a PhD in Art History.",
+      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face"
+    },
+    {
+      name: "Isabella Rodriguez",
+      title: "Jewelry Expert",
+      bio: "Certified gemologist and vintage jewelry specialist with expertise in authentication and valuation.",
+      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face"
+    }
+  ]);
 
-  render() {
-    return (
-      <div className="about-page">
-        <section className="about-hero">
-          <div className="about-hero-content">
-            <h1>About Vintage Treasures</h1>
-            <p className="hero-subtitle">Preserving History, One Treasure at a Time</p>
+  const imageUrls = useMemo(() => {
+    const memberImages = teamMembers.map(member => member.image);
+    const storyImage = "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=500&h=400&fit=crop";
+    return [...memberImages, storyImage];
+  }, [teamMembers]);
+
+  useImagePreloader(imageUrls);
+
+  return (
+    <div className="about-page">
+      <section className="about-hero">
+        <div className="about-hero-content">
+          <h1>About Vintage Treasures</h1>
+          <p className="hero-subtitle">Preserving History, One Treasure at a Time</p>
+        </div>
+      </section>
+
+      <section className="our-story">
+        <div className="story-container">
+          <div className="story-content">
+            <h2>Our Story</h2>
+            <p>
+              Founded in 1985 by Eleanor Whitmore, Vintage Treasures began as a small antique shop 
+              in the heart of London's Portobello Road. What started as a passion for preserving 
+              beautiful objects from the past has grown into one of the world's most respected 
+              dealers in authenticated antiques and collectibles.
+            </p>
+            <p>
+              Over the decades, we have built relationships with collectors, estate executors, 
+              and auction houses worldwide, allowing us to offer our clients access to exceptional 
+              pieces that rarely come to market. Each item in our collection is carefully vetted 
+              for authenticity, condition, and provenance.
+            </p>
+            <p>
+              Today, Vintage Treasures continues Eleanor's original mission: to connect discerning 
+              collectors with authentic pieces that tell the story of human craftsmanship and 
+              artistic achievement throughout history.
+            </p>
           </div>
-        </section>
+          <div className="story-image">
+            <img 
+              src="https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=500&h=400&fit=crop" 
+              alt="Vintage Treasures showroom"
+            />
+          </div>
+        </div>
+      </section>
 
-        <section className="our-story">
-          <div className="story-container">
-            <div className="story-content">
-              <h2>Our Story</h2>
-              <p>
-                Founded in 1985 by Eleanor Whitmore, Vintage Treasures began as a small antique shop 
-                in the heart of London's Portobello Road. What started as a passion for preserving 
-                beautiful objects from the past has grown into one of the world's most respected 
-                dealers in authenticated antiques and collectibles.
-              </p>
-              <p>
-                Over the decades, we have built relationships with collectors, estate executors, 
-                and auction houses worldwide, allowing us to offer our clients access to exceptional 
-                pieces that rarely come to market. Each item in our collection is carefully vetted 
-                for authenticity, condition, and provenance.
-              </p>
-              <p>
-                Today, Vintage Treasures continues Eleanor's original mission: to connect discerning 
-                collectors with authentic pieces that tell the story of human craftsmanship and 
-                artistic achievement throughout history.
-              </p>
+      <section className="our-mission">
+        <div className="mission-container">
+          <h2>Our Mission</h2>
+          <div className="mission-grid">
+            <div className="mission-item">
+              <h3>🔍 Authenticity First</h3>
+              <p>Every piece undergoes rigorous authentication by our team of experts and trusted specialists.</p>
+            </div>
+            <div className="mission-item">
+              <h3>📚 Education & Knowledge</h3>
+              <p>We believe in sharing knowledge about the history and significance of each piece we offer.</p>
             </div>
-            <div className="story-image">
-              <img 
-                src="https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=500&h=400&fit=crop" 
-                alt="Vintage Treasures showroom"
-              />
+            <div className="mission-item">
+              <h3>🌍 Global Reach</h3>
+              <p>Connecting collectors worldwide with exceptional pieces from diverse cultures and time periods.</p>
+            </div>
+            <div className="mission-item">
+              <h3>🛡️ Preservation</h3>
+              <p>Ensuring these historical treasures are preserved for future generations to appreciate and study.</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="our-mission">
-          <div className="mission-container">
-            <h2>Our Mission</h2>
-            <div className="mission-grid">
-              <div className="mission-item">
-                <h3>🔍 Authenticity First</h3>
-                <p>Every piece undergoes rigorous authentication by our team of experts and trusted specialists.</p>
-              </div>
-              <div className="mission-item">
-                <h3>📚 Education & Knowledge</h3>
-                <p>We believe in sharing knowledge about the history and significance of each piece we offer.</p>
-              </div>
-              <div className="mission-item">
-                <h3>🌍 Global Reach</h3>
-                <p>Connecting collectors worldwide with exceptional pieces from diverse cultures and time periods.</p>
+      <section className="our-team">
+        <div className="team-container">
+          <h2>Meet Our Experts</h2>
+          <div className="team-grid">
+            {teamMembers.map((member, index) => (
+              <div key={index} className="team-member">
+                <img src={member.image} alt={member.name} className="member-photo" />
+                <h3>{member.name}</h3>
+                <h4>{member.title}</h4>
+                <p>{member.bio}</p>
               </div>
-              <div className="mission-item">
-                <h3>🛡️ Preservation</h3>
-                <p>Ensuring these historical treasures are preserved for future generations to appreciate and study.</p>
-              </div>
-            </div>
+            ))}
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="our-team">
-          <div className="team-container">
-            <h2>Meet Our Experts</h2>
-            <div className="team-grid">
-              {this.state.teamMembers.map((member, index) => (
-                <div key={index} className="team-member">
-                  <img src={member.image} alt={member.name} className="member-photo" />
-                  <h3>{member.name}</h3>
-                  <h4>{member.title}</h4>
-                  <p>{member.bio}</p>
-                </div>
-              ))}
+      <section className="our-process">
+        <div className="process-container">
+          <h2>Our Authentication Process</h2>
+          <div className="process-steps">
+            <div className="process-step">
+              <div className="step-number">1</div>
+              <h3>Initial Assessment</h3>
+              <p>Every piece is examined for style, materials, construction techniques, and maker's marks.</p>
             </div>
-          </div>
-        </section>
-
-        <section className="our-process">
-          <div className="process-container">
-            <h2>Our Authentication Process</h2>
-            <div className="process-steps">
-              <div className="process-step">
-                <div className="step-number">1</div>
-                <h3>Initial Assessment</h3>
-                <p>Every piece is examined for style, materials, construction techniques, and maker's marks.</p>
-              </div>
-              <div className="process-step">
-                <div className="step-number">2</div>
-                <h3>Expert Evaluation</h3>
-                <p>Our specialists research provenance and compare against known examples and references.</p>
-              </div>
-              <div className="process-step">
-                <div className="step-number">3</div>
-                <h3>Scientific Analysis</h3>
-                <p>When necessary, we employ scientific testing methods to verify age and materials.</p>
-              </div>
-              <div className="process-step">
-                <div className="step-number">4</div>
-                <h3>Documentation</h3>
-                <p>Complete documentation is prepared, including condition reports and certificates of authenticity.</p>
-              </div>
+            <div className="process-step">
+              <div className="step-number">2</div>
+              <h3>Expert Evaluation</h3>
+              <p>Our specialists research provenance and compare against known examples and references.</p>
+            </div>
+            <div className="process-step">
+              <div className="step-number">3</div>
+              <h3>Scientific Analysis</h3>
+              <p>When necessary, we employ scientific testing methods to verify age and materials.</p>
+            </div>
+            <div className="process-step">
+              <div className="step-number">4</div>
+              <h3>Documentation</h3>
+              <p>Complete documentation is prepared, including condition reports and certificates of authenticity.</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="contact-info">
-          <div className="contact-container">
-            <h2>Visit Our Showroom</h2>
-            <div className="contact-grid">
-              <div className="contact-item">
-                <h3>📍 Location</h3>
-                <p>
-                  123 Portobello Road<br />
-                  Notting Hill, London W11 2DY<br />
-                  United Kingdom
-                </p>
-              </div>
-              <div className="contact-item">
-                <h3>🕒 Hours</h3>
-                <p>
-                  Monday - Saturday: 10:00 AM - 6:00 PM<br />
-                  Sunday: 12:00 PM - 5:00 PM<br />
-                  Appointments available outside hours
-                </p>
-              </div>
-              <div className="contact-item">
-                <h3>📞 Contact</h3>
-                <p>
-                  Phone: +44 20 7229 8888<br />
-                  Email: info@vintagetreasures.com<br />
-                  WhatsApp: +44 7700 900123
-                </p>
-              </div>
+      <section className="contact-info">
+        <div className="contact-container">
+          <h2>Visit Our Showroom</h2>
+          <div className="contact-grid">
+            <div className="contact-item">
+              <h3>📍 Location</h3>
+              <p>
+                123 Portobello Road<br />
+                Notting Hill, London W11 2DY<br />
+                United Kingdom
+              </p>
+            </div>
+            <div className="contact-item">
+              <h3>🕒 Hours</h3>
+              <p>
+                Monday - Saturday: 10:00 AM - 6:00 PM<br />
+                Sunday: 12:00 PM - 5:00 PM<br />
+                Appointments available outside hours
+              </p>
+            </div>
+            <div className="contact-item">
+              <h3>📞 Contact</h3>
+              <p>
+                Phone: +44 20 7229 8888<br />
+                Email: info@vintagetreasures.com<br />
+                WhatsApp: +44 7700 900123
+              </p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="certifications">
-          <div className="cert-container">
-            <h2>Professional Affiliations</h2>
-            <div className="cert-grid">
-              <div className="cert-item">
-                <h4>LAPADA</h4>
-                <p>Association of Art & Antique Dealers</p>
-              </div>
-              <div className="cert-item">
-                <h4>CINOA</h4>
-                <p>International Confederation of Art & Antique Dealers</p>
-              </div>
-              <div className="cert-item">
-                <h4>BADA</h4>
-                <p>British Antique Dealers' Association</p>
-              </div>
-              <div className="cert-item">
-                <h4>AAA</h4>
-                <p>Antiquarian Appraisers Association</p>
-              </div>
+      <section className="certifications">
+        <div className="cert-container">
+          <h2>Professional Affiliations</h2>
+          <div className="cert-grid">
+            <div className="cert-item">
+              <h4>LAPADA</h4>
+              <p>Association of Art & Antique Dealers</p>
+            </div>
+            <div className="cert-item">
+              <h4>CINOA</h4>
+              <p>International Confederation of Art & Antique Dealers</p>
+            </div>
+            <div className="cert-item">
+              <h4>BADA</h4>
+              <p>British Antique Dealers' Association</p>
+            </div>
+            <div className="cert-item">
+              <h4>AAA</h4>
+              <p>Antiquarian Appraisers Association</p>
             </div>
           </div>
-        </section>
-      </div>
-    );
-  }
-}
+        </div>
+      </section>
+    </div>
+  );
+});
 
 export default About;
diff --git a/src/pages/ArtDecor.js b/src/pages/ArtDecor.js
index bcfe5f7..baeb6a0 100644
--- a/src/pages/ArtDecor.js
+++ b/src/pages/ArtDecor.js
@@ -1,200 +1,198 @@
-import React, { Component } from 'react';
+import React, { useState, memo, useMemo } from 'react';
 import ProductCard from '../components/ProductCard';
+import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader';
 
-class ArtDecor extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      artProducts: [
-        {
-          id: 3,
-          name: "Ming Dynasty Porcelain Vase",
-          era: "Ming Dynasty (16th Century)",
-          description: "Rare blue and white porcelain vase with traditional dragon motifs.",
-          price: 8500,
-          condition: "Good",
-          origin: "China",
-          image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 15,
-          name: "Japanese Woodblock Print",
-          era: "Edo Period (1800s)",
-          description: "Original ukiyo-e print by renowned artist, depicting Mount Fuji in cherry blossom season.",
-          price: 3200,
-          condition: "Very Good",
-          origin: "Japan",
-          image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 16,
-          name: "French Bronze Sculpture",
-          era: "Belle Époque (1890s)",
-          description: "Elegant bronze figurine of a dancer, signed by the artist with original patina.",
-          price: 4800,
-          condition: "Excellent",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 17,
-          name: "Persian Miniature Painting",
-          era: "Safavid Period (17th Century)",
-          description: "Exquisite hand-painted miniature depicting a royal hunting scene with gold leaf details.",
-          price: 6200,
-          condition: "Very Good",
-          origin: "Persia",
-          image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 18,
-          name: "Venetian Glass Chandelier",
-          era: "Murano Glass (1920s)",
-          description: "Stunning Murano glass chandelier with hand-blown flowers and crystal drops.",
-          price: 5600,
-          condition: "Excellent",
-          origin: "Italy",
-          image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400&h=300&fit=crop",
-          inStock: false,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 19,
-          name: "Art Nouveau Stained Glass Panel",
-          era: "Art Nouveau (1905)",
-          description: "Beautiful stained glass window panel featuring iris flowers in the Tiffany style.",
-          price: 3800,
-          condition: "Good",
-          origin: "USA",
-          image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "art"
-        }
-      ]
-    };
-  }
+const ArtDecor = memo(({ onAddToCart }) => {
+  const [artProducts] = useState([
+    {
+      id: 3,
+      name: "Ming Dynasty Porcelain Vase",
+      era: "Ming Dynasty (16th Century)",
+      description: "Rare blue and white porcelain vase with traditional dragon motifs.",
+      price: 8500,
+      condition: "Good",
+      origin: "China",
+      image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 15,
+      name: "Japanese Woodblock Print",
+      era: "Edo Period (1800s)",
+      description: "Original ukiyo-e print by renowned artist, depicting Mount Fuji in cherry blossom season.",
+      price: 3200,
+      condition: "Very Good",
+      origin: "Japan",
+      image: "https://images.unsplash.com/photo-1541961017774-22349e4a1262?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 16,
+      name: "French Bronze Sculpture",
+      era: "Belle Époque (1890s)",
+      description: "Elegant bronze figurine of a dancer, signed by the artist with original patina.",
+      price: 4800,
+      condition: "Excellent",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1594736797933-d0401ba2fe65?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 17,
+      name: "Persian Miniature Painting",
+      era: "Safavid Period (17th Century)",
+      description: "Exquisite hand-painted miniature depicting a royal hunting scene with gold leaf details.",
+      price: 6200,
+      condition: "Very Good",
+      origin: "Persia",
+      image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 18,
+      name: "Venetian Glass Chandelier",
+      era: "Murano Glass (1920s)",
+      description: "Stunning Murano glass chandelier with hand-blown flowers and crystal drops.",
+      price: 5600,
+      condition: "Excellent",
+      origin: "Italy",
+      image: "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400&h=300&fit=crop",
+      inStock: false,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 19,
+      name: "Art Nouveau Stained Glass Panel",
+      era: "Art Nouveau (1905)",
+      description: "Beautiful stained glass window panel featuring iris flowers in the Tiffany style.",
+      price: 3800,
+      condition: "Good",
+      origin: "USA",
+      image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "art"
+    }
+  ]);
 
-  render() {
-    const { onAddToCart } = this.props;
+  const imageUrls = useMemo(() => {
+    return extractImageUrls(artProducts);
+  }, [artProducts]);
 
-    return (
-      <div className="art-decor-page">
-        <section className="page-header">
-          <div className="page-header-content">
-            <h1>Art & Decorative Objects</h1>
-            <p className="page-subtitle">Masterpieces that transform spaces and inspire souls</p>
-            <p className="page-description">
-              Our art and decorative objects collection spans cultures and centuries, featuring 
-              everything from ancient ceramics to Art Nouveau stained glass. Each piece has been 
-              selected for its artistic merit, historical significance, and ability to enhance 
-              any living space with beauty and character.
-            </p>
-          </div>
-        </section>
+  useImagePreloader(imageUrls);
+
+  return (
+    <div className="art-decor-page">
+      <section className="page-header">
+        <div className="page-header-content">
+          <h1>Art & Decorative Objects</h1>
+          <p className="page-subtitle">Masterpieces that transform spaces and inspire souls</p>
+          <p className="page-description">
+            Our art and decorative objects collection spans cultures and centuries, featuring 
+            everything from ancient ceramics to Art Nouveau stained glass. Each piece has been 
+            selected for its artistic merit, historical significance, and ability to enhance 
+            any living space with beauty and character.
+          </p>
+        </div>
+      </section>
 
-        <section className="art-categories">
-          <div className="categories-container">
-            <h2>Artistic Traditions</h2>
-            <div className="categories-grid">
-              <div className="category-card">
-                <h3>Asian Art</h3>
-                <p>Porcelain, woodblock prints, and traditional paintings from China and Japan</p>
-              </div>
-              <div className="category-card">
-                <h3>European Decorative Arts</h3>
-                <p>Sculptures, glass work, and decorative objects from European masters</p>
-              </div>
-              <div className="category-card">
-                <h3>Islamic Art</h3>
-                <p>Miniature paintings, calligraphy, and decorative metalwork</p>
-              </div>
-              <div className="category-card">
-                <h3>Art Glass</h3>
-                <p>Tiffany, Murano, and other fine art glass pieces</p>
-              </div>
+      <section className="art-categories">
+        <div className="categories-container">
+          <h2>Artistic Traditions</h2>
+          <div className="categories-grid">
+            <div className="category-card">
+              <h3>Asian Art</h3>
+              <p>Porcelain, woodblock prints, and traditional paintings from China and Japan</p>
+            </div>
+            <div className="category-card">
+              <h3>European Decorative Arts</h3>
+              <p>Sculptures, glass work, and decorative objects from European masters</p>
+            </div>
+            <div className="category-card">
+              <h3>Islamic Art</h3>
+              <p>Miniature paintings, calligraphy, and decorative metalwork</p>
+            </div>
+            <div className="category-card">
+              <h3>Art Glass</h3>
+              <p>Tiffany, Murano, and other fine art glass pieces</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="products-section">
-          <div className="products-container">
-            <h2>Available Art & Decor</h2>
-            <div className="products-grid">
-              {this.state.artProducts.map(product => (
-                <ProductCard
-                  key={product.id}
-                  product={product}
-                  onAddToCart={onAddToCart}
-                />
-              ))}
-            </div>
+      <section className="products-section">
+        <div className="products-container">
+          <h2>Available Art & Decor</h2>
+          <div className="products-grid">
+            {artProducts.map(product => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                onAddToCart={onAddToCart}
+              />
+            ))}
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="collecting-guide">
-          <div className="guide-container">
-            <h2>Building Your Art Collection</h2>
-            <div className="guide-tips">
-              <div className="guide-tip">
-                <h4>🎨 Start with What You Love</h4>
-                <p>Choose pieces that speak to you personally rather than following trends.</p>
-              </div>
-              <div className="guide-tip">
-                <h4>📚 Research and Learn</h4>
-                <p>Understanding the history and context enhances appreciation and value.</p>
-              </div>
-              <div className="guide-tip">
-                <h4>🔍 Condition Matters</h4>
-                <p>Consider restoration costs and how condition affects both beauty and value.</p>
-              </div>
-              <div className="guide-tip">
-                <h4>🏛️ Provenance is Key</h4>
-                <p>Documentation of ownership history adds authenticity and value.</p>
-              </div>
+      <section className="collecting-guide">
+        <div className="guide-container">
+          <h2>Building Your Art Collection</h2>
+          <div className="guide-tips">
+            <div className="guide-tip">
+              <h4>🎨 Start with What You Love</h4>
+              <p>Choose pieces that speak to you personally rather than following trends.</p>
+            </div>
+            <div className="guide-tip">
+              <h4>📚 Research and Learn</h4>
+              <p>Understanding the history and context enhances appreciation and value.</p>
+            </div>
+            <div className="guide-tip">
+              <h4>🔍 Condition Matters</h4>
+              <p>Consider restoration costs and how condition affects both beauty and value.</p>
+            </div>
+            <div className="guide-tip">
+              <h4>🏛️ Provenance is Key</h4>
+              <p>Documentation of ownership history adds authenticity and value.</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="display-tips">
-          <div className="display-container">
-            <h2>Displaying Your Collection</h2>
-            <div className="display-grid">
-              <div className="display-tip">
-                <h4>💡 Proper Lighting</h4>
-                <p>Use UV-filtered lighting to protect artworks while showcasing their beauty.</p>
-              </div>
-              <div className="display-tip">
-                <h4>🌡️ Climate Control</h4>
-                <p>Maintain stable temperature and humidity to preserve delicate materials.</p>
-              </div>
-              <div className="display-tip">
-                <h4>🖼️ Professional Framing</h4>
-                <p>Use archival materials and proper mounting techniques for works on paper.</p>
-              </div>
-              <div className="display-tip">
-                <h4>🔒 Security Considerations</h4>
-                <p>Protect valuable pieces with appropriate security measures and insurance.</p>
-              </div>
+      <section className="display-tips">
+        <div className="display-container">
+          <h2>Displaying Your Collection</h2>
+          <div className="display-grid">
+            <div className="display-tip">
+              <h4>💡 Proper Lighting</h4>
+              <p>Use UV-filtered lighting to protect artworks while showcasing their beauty.</p>
+            </div>
+            <div className="display-tip">
+              <h4>🌡️ Climate Control</h4>
+              <p>Maintain stable temperature and humidity to preserve delicate materials.</p>
+            </div>
+            <div className="display-tip">
+              <h4>🖼️ Professional Framing</h4>
+              <p>Use archival materials and proper mounting techniques for works on paper.</p>
+            </div>
+            <div className="display-tip">
+              <h4>🔒 Security Considerations</h4>
+              <p>Protect valuable pieces with appropriate security measures and insurance.</p>
             </div>
           </div>
-        </section>
-      </div>
-    );
-  }
-}
+        </div>
+      </section>
+    </div>
+  );
+});
 
 export default ArtDecor;
diff --git a/src/pages/Collectibles.js b/src/pages/Collectibles.js
index fc23a80..ccf10ad 100644
--- a/src/pages/Collectibles.js
+++ b/src/pages/Collectibles.js
@@ -1,200 +1,198 @@
-import React, { Component } from 'react';
+import React, { useState, memo, useMemo } from 'react';
 import ProductCard from '../components/ProductCard';
+import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader';
 
-class Collectibles extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      collectiblesProducts: [
-        {
-          id: 4,
-          name: "Edwardian Silver Tea Set",
-          era: "Edwardian Era (1905)",
-          description: "Complete sterling silver tea service with ornate engravings and original hallmarks.",
-          price: 1200,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop",
-          inStock: false,
-          isRare: false,
-          category: "collectibles"
-        },
-        {
-          id: 20,
-          name: "Vintage Pocket Watch",
-          era: "Railroad Era (1920s)",
-          description: "Hamilton Railway Special pocket watch with 21 jewels, original case and chain.",
-          price: 850,
-          condition: "Very Good",
-          origin: "USA",
-          image: "https://images.unsplash.com/photo-1509048191080-d2e2678e67b4?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "collectibles"
-        },
-        {
-          id: 21,
-          name: "Royal Doulton Figurine",
-          era: "Mid-Century (1950s)",
-          description: "Limited edition Royal Doulton figurine 'The Balloon Man' in perfect condition.",
-          price: 320,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "collectibles"
-        },
-        {
-          id: 22,
-          name: "Antique Compass Set",
-          era: "Victorian Era (1880s)",
-          description: "Brass maritime compass in original mahogany box with nautical instruments.",
-          price: 680,
-          condition: "Good",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "collectibles"
-        },
-        {
-          id: 23,
-          name: "Vintage Camera Collection",
-          era: "Mid-Century (1940s)",
-          description: "Leica IIIf rangefinder camera with original leather case and multiple lenses.",
-          price: 1450,
-          condition: "Very Good",
-          origin: "Germany",
-          image: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "collectibles"
-        },
-        {
-          id: 24,
-          name: "Antique Map Collection",
-          era: "Colonial Period (1750s)",
-          description: "Hand-colored engraved maps of the American colonies, professionally framed.",
-          price: 2200,
-          condition: "Good",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "collectibles"
-        }
-      ]
-    };
-  }
+const Collectibles = memo(({ onAddToCart }) => {
+  const [collectiblesProducts] = useState([
+    {
+      id: 4,
+      name: "Edwardian Silver Tea Set",
+      era: "Edwardian Era (1905)",
+      description: "Complete sterling silver tea service with ornate engravings and original hallmarks.",
+      price: 1200,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=400&h=300&fit=crop",
+      inStock: false,
+      isRare: false,
+      category: "collectibles"
+    },
+    {
+      id: 20,
+      name: "Vintage Pocket Watch",
+      era: "Railroad Era (1920s)",
+      description: "Hamilton Railway Special pocket watch with 21 jewels, original case and chain.",
+      price: 850,
+      condition: "Very Good",
+      origin: "USA",
+      image: "https://images.unsplash.com/photo-1509048191080-d2e2678e67b4?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "collectibles"
+    },
+    {
+      id: 21,
+      name: "Royal Doulton Figurine",
+      era: "Mid-Century (1950s)",
+      description: "Limited edition Royal Doulton figurine 'The Balloon Man' in perfect condition.",
+      price: 320,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "collectibles"
+    },
+    {
+      id: 22,
+      name: "Antique Compass Set",
+      era: "Victorian Era (1880s)",
+      description: "Brass maritime compass in original mahogany box with nautical instruments.",
+      price: 680,
+      condition: "Good",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1551698618-1dfe5d97d256?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "collectibles"
+    },
+    {
+      id: 23,
+      name: "Vintage Camera Collection",
+      era: "Mid-Century (1940s)",
+      description: "Leica IIIf rangefinder camera with original leather case and multiple lenses.",
+      price: 1450,
+      condition: "Very Good",
+      origin: "Germany",
+      image: "https://images.unsplash.com/photo-1502920917128-1aa500764cbd?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "collectibles"
+    },
+    {
+      id: 24,
+      name: "Antique Map Collection",
+      era: "Colonial Period (1750s)",
+      description: "Hand-colored engraved maps of the American colonies, professionally framed.",
+      price: 2200,
+      condition: "Good",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1578321272176-b7bbc0679853?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "collectibles"
+    }
+  ]);
 
-  render() {
-    const { onAddToCart } = this.props;
+  const imageUrls = useMemo(() => {
+    return extractImageUrls(collectiblesProducts);
+  }, [collectiblesProducts]);
 
-    return (
-      <div className="collectibles-page">
-        <section className="page-header">
-          <div className="page-header-content">
-            <h1>Collectibles & Curiosities</h1>
-            <p className="page-subtitle">Unique treasures for the discerning collector</p>
-            <p className="page-description">
-              Our collectibles section features an eclectic mix of fascinating objects that tell 
-              stories of human ingenuity and craftsmanship. From precision timepieces to scientific 
-              instruments, each piece represents a moment in history and a testament to the artisans 
-              who created them.
-            </p>
-          </div>
-        </section>
+  useImagePreloader(imageUrls);
+
+  return (
+    <div className="collectibles-page">
+      <section className="page-header">
+        <div className="page-header-content">
+          <h1>Collectibles & Curiosities</h1>
+          <p className="page-subtitle">Unique treasures for the discerning collector</p>
+          <p className="page-description">
+            Our collectibles section features an eclectic mix of fascinating objects that tell 
+            stories of human ingenuity and craftsmanship. From precision timepieces to scientific 
+            instruments, each piece represents a moment in history and a testament to the artisans 
+            who created them.
+          </p>
+        </div>
+      </section>
 
-        <section className="collectibles-categories">
-          <div className="categories-container">
-            <h2>Collecting Categories</h2>
-            <div className="categories-grid">
-              <div className="category-card">
-                <h3>Timepieces</h3>
-                <p>Pocket watches, clocks, and chronometers from renowned makers</p>
-              </div>
-              <div className="category-card">
-                <h3>Scientific Instruments</h3>
-                <p>Compasses, telescopes, and navigational tools from maritime history</p>
-              </div>
-              <div className="category-card">
-                <h3>Silver & Metalwork</h3>
-                <p>Tea services, serving pieces, and decorative metalwork</p>
-              </div>
-              <div className="category-card">
-                <h3>Vintage Technology</h3>
-                <p>Cameras, radios, and early technological innovations</p>
-              </div>
+      <section className="collectibles-categories">
+        <div className="categories-container">
+          <h2>Collecting Categories</h2>
+          <div className="categories-grid">
+            <div className="category-card">
+              <h3>Timepieces</h3>
+              <p>Pocket watches, clocks, and chronometers from renowned makers</p>
+            </div>
+            <div className="category-card">
+              <h3>Scientific Instruments</h3>
+              <p>Compasses, telescopes, and navigational tools from maritime history</p>
+            </div>
+            <div className="category-card">
+              <h3>Silver & Metalwork</h3>
+              <p>Tea services, serving pieces, and decorative metalwork</p>
+            </div>
+            <div className="category-card">
+              <h3>Vintage Technology</h3>
+              <p>Cameras, radios, and early technological innovations</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="products-section">
-          <div className="products-container">
-            <h2>Available Collectibles</h2>
-            <div className="products-grid">
-              {this.state.collectiblesProducts.map(product => (
-                <ProductCard
-                  key={product.id}
-                  product={product}
-                  onAddToCart={onAddToCart}
-                />
-              ))}
-            </div>
+      <section className="products-section">
+        <div className="products-container">
+          <h2>Available Collectibles</h2>
+          <div className="products-grid">
+            {collectiblesProducts.map(product => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                onAddToCart={onAddToCart}
+              />
+            ))}
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="collecting-wisdom">
-          <div className="wisdom-container">
-            <h2>The Art of Collecting</h2>
-            <div className="wisdom-grid">
-              <div className="wisdom-item">
-                <h4>🎯 Focus Your Collection</h4>
-                <p>Develop expertise in specific areas rather than collecting everything that catches your eye.</p>
-              </div>
-              <div className="wisdom-item">
-                <h4>📖 Document Everything</h4>
-                <p>Keep detailed records of provenance, condition, and any restoration work performed.</p>
-              </div>
-              <div className="wisdom-item">
-                <h4>🔍 Condition is Critical</h4>
-                <p>Original condition often matters more than rarity in determining long-term value.</p>
-              </div>
-              <div className="wisdom-item">
-                <h4>🤝 Build Relationships</h4>
-                <p>Connect with other collectors, dealers, and experts in your field of interest.</p>
-              </div>
+      <section className="collecting-wisdom">
+        <div className="wisdom-container">
+          <h2>The Art of Collecting</h2>
+          <div className="wisdom-grid">
+            <div className="wisdom-item">
+              <h4>🎯 Focus Your Collection</h4>
+              <p>Develop expertise in specific areas rather than collecting everything that catches your eye.</p>
+            </div>
+            <div className="wisdom-item">
+              <h4>📖 Document Everything</h4>
+              <p>Keep detailed records of provenance, condition, and any restoration work performed.</p>
+            </div>
+            <div className="wisdom-item">
+              <h4>🔍 Condition is Critical</h4>
+              <p>Original condition often matters more than rarity in determining long-term value.</p>
+            </div>
+            <div className="wisdom-item">
+              <h4>🤝 Build Relationships</h4>
+              <p>Connect with other collectors, dealers, and experts in your field of interest.</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="investment-guide">
-          <div className="investment-container">
-            <h2>Collectibles as Investment</h2>
-            <div className="investment-tips">
-              <div className="investment-tip">
-                <h4>📈 Market Research</h4>
-                <p>Study market trends and auction results to understand value patterns in your collecting area.</p>
-              </div>
-              <div className="investment-tip">
-                <h4>🛡️ Insurance & Storage</h4>
-                <p>Protect your investment with proper insurance coverage and climate-controlled storage.</p>
-              </div>
-              <div className="investment-tip">
-                <h4>⏰ Long-term Perspective</h4>
-                <p>The best collectibles appreciate over decades, not months or years.</p>
-              </div>
-              <div className="investment-tip">
-                <h4>💡 Buy Quality</h4>
-                <p>One exceptional piece often outperforms multiple mediocre items over time.</p>
-              </div>
+      <section className="investment-guide">
+        <div className="investment-container">
+          <h2>Collectibles as Investment</h2>
+          <div className="investment-tips">
+            <div className="investment-tip">
+              <h4>📈 Market Research</h4>
+              <p>Study market trends and auction results to understand value patterns in your collecting area.</p>
+            </div>
+            <div className="investment-tip">
+              <h4>🛡️ Insurance & Storage</h4>
+              <p>Protect your investment with proper insurance coverage and climate-controlled storage.</p>
+            </div>
+            <div className="investment-tip">
+              <h4>⏰ Long-term Perspective</h4>
+              <p>The best collectibles appreciate over decades, not months or years.</p>
+            </div>
+            <div className="investment-tip">
+              <h4>💡 Buy Quality</h4>
+              <p>One exceptional piece often outperforms multiple mediocre items over time.</p>
             </div>
           </div>
-        </section>
-      </div>
-    );
-  }
-}
+        </div>
+      </section>
+    </div>
+  );
+});
 
 export default Collectibles;
diff --git a/src/pages/Furniture.js b/src/pages/Furniture.js
index defaf44..09e7e0e 100644
--- a/src/pages/Furniture.js
+++ b/src/pages/Furniture.js
@@ -1,176 +1,174 @@
-import React, { Component } from 'react';
+import React, { useState, memo, useMemo } from 'react';
 import ProductCard from '../components/ProductCard';
+import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader';
 
-class Furniture extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      furnitureProducts: [
-        {
-          id: 1,
-          name: "Victorian Mahogany Writing Desk",
-          era: "Victorian Era (1860s)",
-          description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
-          price: 2850,
-          originalPrice: 3200,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 5,
-          name: "Louis XVI Armchair",
-          era: "Louis XVI Period (1780s)",
-          description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
-          price: 4200,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 7,
-          name: "Georgian Dining Table",
-          era: "Georgian Period (1820s)",
-          description: "Magnificent mahogany dining table that seats 12, with original pedestal base and brass casters.",
-          price: 6800,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1549497538-303791108f95?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 8,
-          name: "Art Deco Vanity Set",
-          era: "Art Deco (1930s)",
-          description: "Stunning walnut vanity with matching stool and triple mirror, featuring geometric inlays.",
-          price: 3200,
-          condition: "Very Good",
-          origin: "USA",
-          image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "furniture"
-        },
-        {
-          id: 9,
-          name: "Chippendale Bookcase",
-          era: "Chippendale Style (1760s)",
-          description: "Rare mahogany bookcase with original glass doors and adjustable shelving.",
-          price: 5400,
-          condition: "Good",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 10,
-          name: "Windsor Rocking Chair",
-          era: "Colonial Period (1790s)",
-          description: "Traditional Windsor rocking chair in original paint with rush seat.",
-          price: 1850,
-          condition: "Good",
-          origin: "USA",
-          image: "https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=400&h=300&fit=crop",
-          inStock: false,
-          isRare: false,
-          category: "furniture"
-        }
-      ]
-    };
-  }
+const Furniture = memo(({ onAddToCart }) => {
+  const [furnitureProducts] = useState([
+    {
+      id: 1,
+      name: "Victorian Mahogany Writing Desk",
+      era: "Victorian Era (1860s)",
+      description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
+      price: 2850,
+      originalPrice: 3200,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 5,
+      name: "Louis XVI Armchair",
+      era: "Louis XVI Period (1780s)",
+      description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
+      price: 4200,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 7,
+      name: "Georgian Dining Table",
+      era: "Georgian Period (1820s)",
+      description: "Magnificent mahogany dining table that seats 12, with original pedestal base and brass casters.",
+      price: 6800,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1549497538-303791108f95?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 8,
+      name: "Art Deco Vanity Set",
+      era: "Art Deco (1930s)",
+      description: "Stunning walnut vanity with matching stool and triple mirror, featuring geometric inlays.",
+      price: 3200,
+      condition: "Very Good",
+      origin: "USA",
+      image: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "furniture"
+    },
+    {
+      id: 9,
+      name: "Chippendale Bookcase",
+      era: "Chippendale Style (1760s)",
+      description: "Rare mahogany bookcase with original glass doors and adjustable shelving.",
+      price: 5400,
+      condition: "Good",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 10,
+      name: "Windsor Rocking Chair",
+      era: "Colonial Period (1790s)",
+      description: "Traditional Windsor rocking chair in original paint with rush seat.",
+      price: 1850,
+      condition: "Good",
+      origin: "USA",
+      image: "https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=400&h=300&fit=crop",
+      inStock: false,
+      isRare: false,
+      category: "furniture"
+    }
+  ]);
 
-  render() {
-    const { onAddToCart } = this.props;
+  const imageUrls = useMemo(() => {
+    return extractImageUrls(furnitureProducts);
+  }, [furnitureProducts]);
 
-    return (
-      <div className="furniture-page">
-        <section className="page-header">
-          <div className="page-header-content">
-            <h1>Antique Furniture Collection</h1>
-            <p className="page-subtitle">Timeless pieces that bring history into your home</p>
-            <p className="page-description">
-              Our furniture collection spans centuries of craftsmanship, from elegant Victorian 
-              writing desks to sturdy Colonial chairs. Each piece has been carefully selected 
-              for its historical significance, quality construction, and enduring beauty.
-            </p>
-          </div>
-        </section>
+  useImagePreloader(imageUrls);
+
+  return (
+    <div className="furniture-page">
+      <section className="page-header">
+        <div className="page-header-content">
+          <h1>Antique Furniture Collection</h1>
+          <p className="page-subtitle">Timeless pieces that bring history into your home</p>
+          <p className="page-description">
+            Our furniture collection spans centuries of craftsmanship, from elegant Victorian 
+            writing desks to sturdy Colonial chairs. Each piece has been carefully selected 
+            for its historical significance, quality construction, and enduring beauty.
+          </p>
+        </div>
+      </section>
 
-        <section className="furniture-categories">
-          <div className="categories-container">
-            <h2>Browse by Style</h2>
-            <div className="categories-grid">
-              <div className="category-card">
-                <h3>Victorian Era</h3>
-                <p>Ornate designs with rich woods and intricate details</p>
-              </div>
-              <div className="category-card">
-                <h3>Georgian Period</h3>
-                <p>Elegant proportions and classical influences</p>
-              </div>
-              <div className="category-card">
-                <h3>Art Deco</h3>
-                <p>Geometric patterns and luxurious materials</p>
-              </div>
-              <div className="category-card">
-                <h3>Colonial American</h3>
-                <p>Functional designs with rustic charm</p>
-              </div>
+      <section className="furniture-categories">
+        <div className="categories-container">
+          <h2>Browse by Style</h2>
+          <div className="categories-grid">
+            <div className="category-card">
+              <h3>Victorian Era</h3>
+              <p>Ornate designs with rich woods and intricate details</p>
+            </div>
+            <div className="category-card">
+              <h3>Georgian Period</h3>
+              <p>Elegant proportions and classical influences</p>
+            </div>
+            <div className="category-card">
+              <h3>Art Deco</h3>
+              <p>Geometric patterns and luxurious materials</p>
+            </div>
+            <div className="category-card">
+              <h3>Colonial American</h3>
+              <p>Functional designs with rustic charm</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="products-section">
-          <div className="products-container">
-            <h2>Available Furniture</h2>
-            <div className="products-grid">
-              {this.state.furnitureProducts.map(product => (
-                <ProductCard
-                  key={product.id}
-                  product={product}
-                  onAddToCart={onAddToCart}
-                />
-              ))}
-            </div>
+      <section className="products-section">
+        <div className="products-container">
+          <h2>Available Furniture</h2>
+          <div className="products-grid">
+            {furnitureProducts.map(product => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                onAddToCart={onAddToCart}
+              />
+            ))}
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="care-guide">
-          <div className="care-guide-container">
-            <h2>Caring for Your Antique Furniture</h2>
-            <div className="care-tips">
-              <div className="care-tip">
-                <h4>🌡️ Climate Control</h4>
-                <p>Maintain stable temperature and humidity to prevent wood movement and cracking.</p>
-              </div>
-              <div className="care-tip">
-                <h4>☀️ Light Protection</h4>
-                <p>Keep furniture away from direct sunlight to prevent fading and wood damage.</p>
-              </div>
-              <div className="care-tip">
-                <h4>🧽 Gentle Cleaning</h4>
-                <p>Use appropriate wood cleaners and soft cloths to maintain the original finish.</p>
-              </div>
-              <div className="care-tip">
-                <h4>🔧 Professional Restoration</h4>
-                <p>Consult experts for any repairs to preserve historical value and integrity.</p>
-              </div>
+      <section className="care-guide">
+        <div className="care-guide-container">
+          <h2>Caring for Your Antique Furniture</h2>
+          <div className="care-tips">
+            <div className="care-tip">
+              <h4>🌡️ Climate Control</h4>
+              <p>Maintain stable temperature and humidity to prevent wood movement and cracking.</p>
+            </div>
+            <div className="care-tip">
+              <h4>☀️ Light Protection</h4>
+              <p>Keep furniture away from direct sunlight to prevent fading and wood damage.</p>
+            </div>
+            <div className="care-tip">
+              <h4>🧽 Gentle Cleaning</h4>
+              <p>Use appropriate wood cleaners and soft cloths to maintain the original finish.</p>
+            </div>
+            <div className="care-tip">
+              <h4>🔧 Professional Restoration</h4>
+              <p>Consult experts for any repairs to preserve historical value and integrity.</p>
             </div>
           </div>
-        </section>
-      </div>
-    );
-  }
-}
+        </div>
+      </section>
+    </div>
+  );
+});
 
 export default Furniture;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index a72dfa4..b585eca 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,159 +1,167 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, memo, useMemo } from 'react';
 import ProductCard from '../components/ProductCard';
+import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader';
 
-class Home extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      featuredProducts: [
-        {
-          id: 1,
-          name: "Victorian Mahogany Writing Desk",
-          era: "Victorian Era (1860s)",
-          description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
-          price: 2850,
-          originalPrice: 3200,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        },
-        {
-          id: 3,
-          name: "Ming Dynasty Porcelain Vase",
-          era: "Ming Dynasty (16th Century)",
-          description: "Rare blue and white porcelain vase with traditional dragon motifs.",
-          price: 8500,
-          condition: "Good",
-          origin: "China",
-          image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "art"
-        },
-        {
-          id: 5,
-          name: "Louis XVI Armchair",
-          era: "Louis XVI Period (1780s)",
-          description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
-          price: 4200,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "furniture"
-        }
-      ]
-    };
-  }
+const Home = memo(({ onAddToCart, onNavigate }) => {
+  const [featuredProducts] = useState([
+    {
+      id: 1,
+      name: "Victorian Mahogany Writing Desk",
+      era: "Victorian Era (1860s)",
+      description: "Exquisite mahogany writing desk with intricate brass fittings and secret compartments.",
+      price: 2850,
+      originalPrice: 3200,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    },
+    {
+      id: 3,
+      name: "Ming Dynasty Porcelain Vase",
+      era: "Ming Dynasty (16th Century)",
+      description: "Rare blue and white porcelain vase with traditional dragon motifs.",
+      price: 8500,
+      condition: "Good",
+      origin: "China",
+      image: "https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "art"
+    },
+    {
+      id: 5,
+      name: "Louis XVI Armchair",
+      era: "Louis XVI Period (1780s)",
+      description: "Authentic French armchair with original silk upholstery and gilded wood frame.",
+      price: 4200,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "furniture"
+    }
+  ]);
 
-  render() {
-    const { onAddToCart } = this.props;
+  const handleExploreClick = useCallback(() => {
+    onNavigate('products');
+  }, [onNavigate]);
 
-    return (
-      <div className="home-page">
-        <section className="hero-section">
-          <div className="hero-content">
-            <h1>Welcome to Vintage Treasures</h1>
-            <p className="hero-subtitle">Discover Authentic Antiques & Timeless Collectibles</p>
-            <p className="hero-description">
-              Step into a world where history meets elegance. Our carefully curated collection 
-              features authentic antiques from around the globe, each piece telling its own 
-              unique story of craftsmanship and heritage.
-            </p>
-            <button className="cta-button" onClick={() => this.props.onNavigate('products')}>
-              Explore Collection
-            </button>
+  const handleViewAllClick = useCallback(() => {
+    onNavigate('products');
+  }, [onNavigate]);
+
+  const imageUrls = useMemo(() => {
+    const productImages = extractImageUrls(featuredProducts);
+    const heroImage = "https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=600&h=400&fit=crop";
+    return [...productImages, heroImage];
+  }, [featuredProducts]);
+
+  useImagePreloader(imageUrls);
+
+  return (
+    <div className="home-page">
+      <section className="hero-section">
+        <div className="hero-content">
+          <h1>Welcome to Vintage Treasures</h1>
+          <p className="hero-subtitle">Discover Authentic Antiques & Timeless Collectibles</p>
+          <p className="hero-description">
+            Step into a world where history meets elegance. Our carefully curated collection 
+            features authentic antiques from around the globe, each piece telling its own 
+            unique story of craftsmanship and heritage.
+          </p>
+          <button className="cta-button" onClick={handleExploreClick}>
+            Explore Collection
+          </button>
+        </div>
+        <div className="hero-image">
+          <img 
+            src="https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=600&h=400&fit=crop" 
+            alt="Antique collection"
+          />
+        </div>
+      </section>
+
+      <section className="features-section">
+        <div className="features-container">
+          <div className="feature">
+            <div className="feature-icon">🏺</div>
+            <h3>Authentic Pieces</h3>
+            <p>Every item is carefully authenticated and comes with detailed provenance documentation.</p>
           </div>
-          <div className="hero-image">
-            <img 
-              src="https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=600&h=400&fit=crop" 
-              alt="Antique collection"
-            />
+          <div className="feature">
+            <div className="feature-icon">🌍</div>
+            <h3>Global Collection</h3>
+            <p>Sourced from estate sales, auctions, and private collections worldwide.</p>
           </div>
-        </section>
-
-        <section className="features-section">
-          <div className="features-container">
-            <div className="feature">
-              <div className="feature-icon">🏺</div>
-              <h3>Authentic Pieces</h3>
-              <p>Every item is carefully authenticated and comes with detailed provenance documentation.</p>
-            </div>
-            <div className="feature">
-              <div className="feature-icon">🌍</div>
-              <h3>Global Collection</h3>
-              <p>Sourced from estate sales, auctions, and private collections worldwide.</p>
-            </div>
-            <div className="feature">
-              <div className="feature-icon">🔍</div>
-              <h3>Expert Curation</h3>
-              <p>Our team of antique specialists ensures quality and historical accuracy.</p>
-            </div>
-            <div className="feature">
-              <div className="feature-icon">🚚</div>
-              <h3>Secure Shipping</h3>
-              <p>Professional packaging and insured delivery for your precious acquisitions.</p>
-            </div>
+          <div className="feature">
+            <div className="feature-icon">🔍</div>
+            <h3>Expert Curation</h3>
+            <p>Our team of antique specialists ensures quality and historical accuracy.</p>
+          </div>
+          <div className="feature">
+            <div className="feature-icon">🚚</div>
+            <h3>Secure Shipping</h3>
+            <p>Professional packaging and insured delivery for your precious acquisitions.</p>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="featured-section">
-          <div className="featured-container">
-            <h2>Featured Treasures</h2>
-            <p className="section-subtitle">Handpicked exceptional pieces from our collection</p>
-            <div className="featured-grid">
-              {this.state.featuredProducts.map(product => (
-                <ProductCard
-                  key={product.id}
-                  product={product}
-                  onAddToCart={onAddToCart}
-                />
-              ))}
-            </div>
-            <button 
-              className="view-all-button"
-              onClick={() => this.props.onNavigate('products')}
-            >
-              View All Products
-            </button>
+      <section className="featured-section">
+        <div className="featured-container">
+          <h2>Featured Treasures</h2>
+          <p className="section-subtitle">Handpicked exceptional pieces from our collection</p>
+          <div className="featured-grid">
+            {featuredProducts.map(product => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                onAddToCart={onAddToCart}
+              />
+            ))}
           </div>
-        </section>
+          <button 
+            className="view-all-button"
+            onClick={handleViewAllClick}
+          >
+            View All Products
+          </button>
+        </div>
+      </section>
 
-        <section className="testimonials-section">
-          <div className="testimonials-container">
-            <h2>What Our Collectors Say</h2>
-            <div className="testimonials-grid">
-              <div className="testimonial">
-                <p>"The quality and authenticity of pieces from Vintage Treasures is unmatched. Each purchase feels like acquiring a piece of history."</p>
-                <div className="testimonial-author">
-                  <strong>Margaret Chen</strong>
-                  <span>Art Collector</span>
-                </div>
+      <section className="testimonials-section">
+        <div className="testimonials-container">
+          <h2>What Our Collectors Say</h2>
+          <div className="testimonials-grid">
+            <div className="testimonial">
+              <p>"The quality and authenticity of pieces from Vintage Treasures is unmatched. Each purchase feels like acquiring a piece of history."</p>
+              <div className="testimonial-author">
+                <strong>Margaret Chen</strong>
+                <span>Art Collector</span>
               </div>
-              <div className="testimonial">
-                <p>"I've been collecting antiques for 30 years, and this is my go-to source for exceptional pieces with verified provenance."</p>
-                <div className="testimonial-author">
-                  <strong>Robert Williams</strong>
-                  <span>Antique Enthusiast</span>
-                </div>
+            </div>
+            <div className="testimonial">
+              <p>"I've been collecting antiques for 30 years, and this is my go-to source for exceptional pieces with verified provenance."</p>
+              <div className="testimonial-author">
+                <strong>Robert Williams</strong>
+                <span>Antique Enthusiast</span>
               </div>
-              <div className="testimonial">
-                <p>"The customer service is outstanding, and the packaging ensures my precious acquisitions arrive in perfect condition."</p>
-                <div className="testimonial-author">
-                  <strong>Elena Rodriguez</strong>
-                  <span>Interior Designer</span>
-                </div>
+            </div>
+            <div className="testimonial">
+              <p>"The customer service is outstanding, and the packaging ensures my precious acquisitions arrive in perfect condition."</p>
+              <div className="testimonial-author">
+                <strong>Elena Rodriguez</strong>
+                <span>Interior Designer</span>
               </div>
             </div>
           </div>
-        </section>
-      </div>
-    );
-  }
-}
+        </div>
+      </section>
+    </div>
+  );
+});
 
 export default Home;
diff --git a/src/pages/Jewelry.js b/src/pages/Jewelry.js
index aa76030..097172a 100644
--- a/src/pages/Jewelry.js
+++ b/src/pages/Jewelry.js
@@ -1,199 +1,197 @@
-import React, { Component } from 'react';
+import React, { useState, memo, useMemo } from 'react';
 import ProductCard from '../components/ProductCard';
+import { useImagePreloader, extractImageUrls } from '../utils/imagePreloader';
 
-class Jewelry extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      jewelryProducts: [
-        {
-          id: 2,
-          name: "Art Deco Pearl Necklace",
-          era: "Art Deco (1920s)",
-          description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.",
-          price: 1650,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "jewelry"
-        },
-        {
-          id: 6,
-          name: "Victorian Cameo Brooch",
-          era: "Victorian Era (1870s)",
-          description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.",
-          price: 450,
-          condition: "Excellent",
-          origin: "Italy",
-          image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: false,
-          category: "jewelry"
-        },
-        {
-          id: 11,
-          name: "Edwardian Diamond Ring",
-          era: "Edwardian Era (1910s)",
-          description: "Exquisite platinum ring featuring a 2-carat old European cut diamond with milgrain detailing.",
-          price: 8900,
-          condition: "Excellent",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "jewelry"
-        },
-        {
-          id: 12,
-          name: "Art Nouveau Pendant",
-          era: "Art Nouveau (1900s)",
-          description: "Beautiful gold pendant with enamel work depicting flowing botanical motifs.",
-          price: 2200,
-          condition: "Very Good",
-          origin: "France",
-          image: "https://images.unsplash.com/photo-1611652022419-a9419f74343d?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "jewelry"
-        },
-        {
-          id: 13,
-          name: "Georgian Garnet Bracelet",
-          era: "Georgian Period (1820s)",
-          description: "Rare Georgian bracelet featuring Bohemian garnets in original gold setting.",
-          price: 1800,
-          condition: "Good",
-          origin: "England",
-          image: "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?w=400&h=300&fit=crop",
-          inStock: true,
-          isRare: true,
-          category: "jewelry"
-        },
-        {
-          id: 14,
-          name: "Retro Cocktail Earrings",
-          era: "Retro Period (1940s)",
-          description: "Bold gold and citrine earrings typical of the glamorous 1940s cocktail style.",
-          price: 950,
-          condition: "Excellent",
-          origin: "USA",
-          image: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=400&h=300&fit=crop",
-          inStock: false,
-          isRare: false,
-          category: "jewelry"
-        }
-      ]
-    };
-  }
+const Jewelry = memo(({ onAddToCart }) => {
+  const [jewelryProducts] = useState([
+    {
+      id: 2,
+      name: "Art Deco Pearl Necklace",
+      era: "Art Deco (1920s)",
+      description: "Stunning pearl necklace with geometric platinum clasp, typical of the Art Deco period.",
+      price: 1650,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "jewelry"
+    },
+    {
+      id: 6,
+      name: "Victorian Cameo Brooch",
+      era: "Victorian Era (1870s)",
+      description: "Delicate shell cameo brooch set in 14k gold with intricate detailing.",
+      price: 450,
+      condition: "Excellent",
+      origin: "Italy",
+      image: "https://images.unsplash.com/photo-1515562141207-7a88fb7ce338?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: false,
+      category: "jewelry"
+    },
+    {
+      id: 11,
+      name: "Edwardian Diamond Ring",
+      era: "Edwardian Era (1910s)",
+      description: "Exquisite platinum ring featuring a 2-carat old European cut diamond with milgrain detailing.",
+      price: 8900,
+      condition: "Excellent",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1605100804763-247f67b3557e?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "jewelry"
+    },
+    {
+      id: 12,
+      name: "Art Nouveau Pendant",
+      era: "Art Nouveau (1900s)",
+      description: "Beautiful gold pendant with enamel work depicting flowing botanical motifs.",
+      price: 2200,
+      condition: "Very Good",
+      origin: "France",
+      image: "https://images.unsplash.com/photo-1611652022419-a9419f74343d?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "jewelry"
+    },
+    {
+      id: 13,
+      name: "Georgian Garnet Bracelet",
+      era: "Georgian Period (1820s)",
+      description: "Rare Georgian bracelet featuring Bohemian garnets in original gold setting.",
+      price: 1800,
+      condition: "Good",
+      origin: "England",
+      image: "https://images.unsplash.com/photo-1573408301185-9146fe634ad0?w=400&h=300&fit=crop",
+      inStock: true,
+      isRare: true,
+      category: "jewelry"
+    },
+    {
+      id: 14,
+      name: "Retro Cocktail Earrings",
+      era: "Retro Period (1940s)",
+      description: "Bold gold and citrine earrings typical of the glamorous 1940s cocktail style.",
+      price: 950,
+      condition: "Excellent",
+      origin: "USA",
+      image: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?w=400&h=300&fit=crop",
+      inStock: false,
+      isRare: false,
+      category: "jewelry"
+    }
+  ]);
 
-  render() {
-    const { onAddToCart } = this.props;
+  const imageUrls = useMemo(() => {
+    return extractImageUrls(jewelryProducts);
+  }, [jewelryProducts]);
 
-    return (
-      <div className="jewelry-page">
-        <section className="page-header">
-          <div className="page-header-content">
-            <h1>Vintage Jewelry Collection</h1>
-            <p className="page-subtitle">Exquisite pieces that capture the essence of bygone eras</p>
-            <p className="page-description">
-              Our jewelry collection features carefully selected pieces from the most celebrated 
-              periods in jewelry history. From delicate Victorian brooches to bold Art Deco 
-              necklaces, each piece represents the pinnacle of craftsmanship from its era.
-            </p>
-          </div>
-        </section>
+  useImagePreloader(imageUrls);
+
+  return (
+    <div className="jewelry-page">
+      <section className="page-header">
+        <div className="page-header-content">
+          <h1>Vintage Jewelry Collection</h1>
+          <p className="page-subtitle">Exquisite pieces that capture the essence of bygone eras</p>
+          <p className="page-description">
+            Our jewelry collection features carefully selected pieces from the most celebrated 
+            periods in jewelry history. From delicate Victorian brooches to bold Art Deco 
+            necklaces, each piece represents the pinnacle of craftsmanship from its era.
+          </p>
+        </div>
+      </section>
 
-        <section className="jewelry-periods">
-          <div className="periods-container">
-            <h2>Jewelry Through the Ages</h2>
-            <div className="periods-grid">
-              <div className="period-card">
-                <h3>Victorian (1837-1901)</h3>
-                <p>Romantic designs with intricate details, often featuring cameos and mourning jewelry</p>
-              </div>
-              <div className="period-card">
-                <h3>Art Nouveau (1890-1910)</h3>
-                <p>Nature-inspired motifs with flowing lines and innovative use of materials</p>
-              </div>
-              <div className="period-card">
-                <h3>Art Deco (1920-1935)</h3>
-                <p>Geometric patterns and bold designs reflecting the modern age</p>
-              </div>
-              <div className="period-card">
-                <h3>Retro (1935-1950)</h3>
-                <p>Large, glamorous pieces with colorful gemstones and gold settings</p>
-              </div>
+      <section className="jewelry-periods">
+        <div className="periods-container">
+          <h2>Jewelry Through the Ages</h2>
+          <div className="periods-grid">
+            <div className="period-card">
+              <h3>Victorian (1837-1901)</h3>
+              <p>Romantic designs with intricate details, often featuring cameos and mourning jewelry</p>
+            </div>
+            <div className="period-card">
+              <h3>Art Nouveau (1890-1910)</h3>
+              <p>Nature-inspired motifs with flowing lines and innovative use of materials</p>
+            </div>
+            <div className="period-card">
+              <h3>Art Deco (1920-1935)</h3>
+              <p>Geometric patterns and bold designs reflecting the modern age</p>
+            </div>
+            <div className="period-card">
+              <h3>Retro (1935-1950)</h3>
+              <p>Large, glamorous pieces with colorful gemstones and gold settings</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="products-section">
-          <div className="products-container">
-            <h2>Available Jewelry</h2>
-            <div className="products-grid">
-              {this.state.jewelryProducts.map(product => (
-                <ProductCard
-                  key={product.id}
-                  product={product}
-                  onAddToCart={onAddToCart}
-                />
-              ))}
-            </div>
+      <section className="products-section">
+        <div className="products-container">
+          <h2>Available Jewelry</h2>
+          <div className="products-grid">
+            {jewelryProducts.map(product => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                onAddToCart={onAddToCart}
+              />
+            ))}
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="authentication-info">
-          <div className="auth-container">
-            <h2>Authentication & Certification</h2>
-            <div className="auth-features">
-              <div className="auth-feature">
-                <h4>💎 Gemstone Analysis</h4>
-                <p>All gemstones are professionally evaluated and certified by recognized gemological institutes.</p>
-              </div>
-              <div className="auth-feature">
-                <h4>🔍 Hallmark Verification</h4>
-                <p>Metal purity marks and maker's stamps are verified for authenticity and dating.</p>
-              </div>
-              <div className="auth-feature">
-                <h4>📜 Provenance Documentation</h4>
-                <p>Complete history and documentation provided with each significant piece.</p>
-              </div>
-              <div className="auth-feature">
-                <h4>🛡️ Insurance Appraisal</h4>
-                <p>Professional appraisals available for insurance and estate planning purposes.</p>
-              </div>
+      <section className="authentication-info">
+        <div className="auth-container">
+          <h2>Authentication & Certification</h2>
+          <div className="auth-features">
+            <div className="auth-feature">
+              <h4>💎 Gemstone Analysis</h4>
+              <p>All gemstones are professionally evaluated and certified by recognized gemological institutes.</p>
+            </div>
+            <div className="auth-feature">
+              <h4>🔍 Hallmark Verification</h4>
+              <p>Metal purity marks and maker's stamps are verified for authenticity and dating.</p>
+            </div>
+            <div className="auth-feature">
+              <h4>📜 Provenance Documentation</h4>
+              <p>Complete history and documentation provided with each significant piece.</p>
+            </div>
+            <div className="auth-feature">
+              <h4>🛡️ Insurance Appraisal</h4>
+              <p>Professional appraisals available for insurance and estate planning purposes.</p>
             </div>
           </div>
-        </section>
+        </div>
+      </section>
 
-        <section className="care-guide">
-          <div className="care-guide-container">
-            <h2>Caring for Vintage Jewelry</h2>
-            <div className="care-tips">
-              <div className="care-tip">
-                <h4>🧼 Gentle Cleaning</h4>
-                <p>Use appropriate cleaning methods for different metals and gemstones.</p>
-              </div>
-              <div className="care-tip">
-                <h4>🏠 Proper Storage</h4>
-                <p>Store pieces separately in soft pouches to prevent scratching.</p>
-              </div>
-              <div className="care-tip">
-                <h4>🔧 Professional Maintenance</h4>
-                <p>Regular check-ups ensure settings remain secure and pieces stay beautiful.</p>
-              </div>
-              <div className="care-tip">
-                <h4>📋 Documentation</h4>
-                <p>Keep all certificates and appraisals with your jewelry collection.</p>
-              </div>
+      <section className="care-guide">
+        <div className="care-guide-container">
+          <h2>Caring for Vintage Jewelry</h2>
+          <div className="care-tips">
+            <div className="care-tip">
+              <h4>🧼 Gentle Cleaning</h4>
+              <p>Use appropriate cleaning methods for different metals and gemstones.</p>
+            </div>
+            <div className="care-tip">
+              <h4>🏠 Proper Storage</h4>
+              <p>Store pieces separately in soft pouches to prevent scratching.</p>
+            </div>
+            <div className="care-tip">
+              <h4>🔧 Professional Maintenance</h4>
+              <p>Regular check-ups ensure settings remain secure and pieces stay beautiful.</p>
+            </div>
+            <div className="care-tip">
+              <h4>📋 Documentation</h4>
+              <p>Keep all certificates and appraisals with your jewelry collection.</p>
             </div>
           </div>
-        </section>
-      </div>
-    );
-  }
-}
+        </div>
+      </section>
+    </div>
+  );
+});
 
 export default Jewelry;
diff --git a/src/utils/imagePreloader.js b/src/utils/imagePreloader.js
new file mode 100644
index 0000000..ca8fcbd
--- /dev/null
+++ b/src/utils/imagePreloader.js
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+export const useImagePreloader = (imageUrls) => {
+  useEffect(() => {
+    if (!imageUrls || imageUrls.length === 0) return;
+
+    const preloadImages = imageUrls.map(url => {
+      const img = new Image();
+      img.src = url;
+      return img;
+    });
+
+    return () => {
+      preloadImages.forEach(img => {
+        img.src = '';
+      });
+    };
+  }, [imageUrls]);
+};
+
+export const extractImageUrls = (products) => {
+  return products.map(product => product.image).filter(Boolean);
+};