diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..dcca1a7
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,64 @@
+import { getProducts } from "@/lib/woocommerce";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+import ProductCard from "@/components/product/ProductCard";
+
+export const metadata = {
+  title: "ManoonOils - Premium Natural Oils for Hair & Skin",
+  description: "Discover our premium collection of natural oils for hair and skin care.",
+};
+
+export default async function Homepage() {
+  const products = await getProducts();
+  const publishedProducts = products.filter((p) => p.status === "publish").slice(0, 4);
+
+  return (
+    <main className="min-h-screen">
+      <Header />
+      
+      <section className="relative h-[80vh] flex items-center justify-center bg-gradient-to-b from-white to-background-ice">
+        <div className="text-center px-4">
+          <h1 className="text-5xl md:text-7xl font-serif mb-6">
+            ManoonOils
+          </h1>
+          <p className="text-xl md:text-2xl text-foreground-muted mb-8">
+            Premium Natural Oils for Hair & Skin
+          </p>
+          <a 
+            href="/products" 
+            className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium hover:bg-opacity-90 transition-all"
+          >
+            Shop Now
+          </a>
+        </div>
+      </section>
+
+      {publishedProducts.length > 0 && (
+        <section className="py-20 px-4">
+          <div className="max-w-7xl mx-auto">
+            <h2 className="text-4xl font-serif text-center mb-12">Our Products</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+              {publishedProducts.map((product, index) => (
+                <ProductCard key={product.id} product={product} index={index} />
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
+      <section className="py-20 px-4 bg-background-ice">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl font-serif mb-6">Natural & Pure</h2>
+          <p className="text-lg text-foreground-muted mb-8">
+            Our oils are crafted with love using only the finest natural ingredients.
+          </p>
+          <a href="/about" className="text-foreground border-b border-foreground pb-1">
+            Learn More
+          </a>
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}
diff --git a/src/app/products/[slug]/page.tsx b/src/app/products/[slug]/page.tsx
new file mode 100644
index 0000000..e0a6e58
--- /dev/null
+++ b/src/app/products/[slug]/page.tsx
@@ -0,0 +1,77 @@
+import { getProducts } from "@/lib/woocommerce";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+
+export async function generateStaticParams() {
+  try {
+    const products = await getProducts();
+    return products.map((product) => ({
+      slug: product.slug || product.id.toString(),
+    }));
+  } catch {
+    return [];
+  }
+}
+
+export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  let product = null;
+  
+  try {
+    const products = await getProducts();
+    product = products.find((p) => (p.slug || p.id.toString()) === slug);
+  } catch (e) {
+    // Fallback
+  }
+
+  if (!product) {
+    return (
+      <main className="min-h-screen">
+        <Header />
+        <div className="pt-24 text-center">
+          <h1 className="text-2xl">Product not found</h1>
+        </div>
+        <Footer />
+      </main>
+    );
+  }
+
+  const image = product.images?.[0]?.src || '/placeholder.jpg';
+  const price = product.sale_price || product.price;
+
+  return (
+    <main className="min-h-screen">
+      <Header />
+      
+      <section className="pt-24 pb-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
+            <div className="relative aspect-[4/5] bg-background-ice overflow-hidden">
+              <img 
+                src={image} 
+                alt={product.name}
+                className="object-cover w-full h-full"
+              />
+            </div>
+
+            <div className="flex flex-col">
+              <h1 className="text-4xl font-serif mb-4">{product.name}</h1>
+              
+              <div className="text-2xl mb-6">{price} RSD</div>
+              
+              <div className="prose max-w-none mb-8" dangerouslySetInnerHTML={{ __html: product.description || '' }} />
+              
+              <button 
+                className="inline-block bg-foreground text-white px-8 py-4 text-lg font-medium text-center hover:bg-opacity-90 transition-all"
+              >
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 0000000..26d0894
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,38 @@
+import { getProducts } from "@/lib/woocommerce";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+import ProductCard from "@/components/product/ProductCard";
+
+export const metadata = {
+  title: "Products - ManoonOils",
+  description: "Browse our premium natural oils for hair and skin.",
+};
+
+export default async function ProductsPage() {
+  const products = await getProducts();
+  const publishedProducts = products.filter((p) => p.status === "publish");
+
+  return (
+    <main className="min-h-screen">
+      <Header />
+      
+      <section className="pt-24 pb-20 px-4">
+        <div className="max-w-7xl mx-auto">
+          <h1 className="text-4xl font-serif text-center mb-12">All Products</h1>
+          
+          {publishedProducts.length > 0 ? (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+              {publishedProducts.map((product, index) => (
+                <ProductCard key={product.id} product={product} index={index} />
+              ))}
+            </div>
+          ) : (
+            <p className="text-center text-gray-500">No products available.</p>
+          )}
+        </div>
+      </section>
+      
+      <Footer />
+    </main>
+  );
+}