diff --git a/src/main.rs b/src/main.rs
index f3ce665..e35a8e3 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -175,32 +175,34 @@ async fn get_ksiazki(
     let search_term = params.get("search").map(|s| s.as_str()).unwrap_or("");
     let sort_by = params.get("sort").map(|s| s.as_str()).unwrap_or("default");
 
-    let base_query = "SELECT
+    // Poprawione zapytanie bazowe
+    let mut base_query = "SELECT
         id,
         tytul,
         autor,
         cena,
         COALESCE('/images/' || obraz_url, '/images/placeholder.jpg') as obraz_url,
         COALESCE(opis, 'Brak opisu') as opis
-    FROM ksiazki
-    ORDER BY tytul";
+    FROM ksiazki".to_string();
 
-    let sort_clause = match sort_by {
+    // Warunek WHERE
+    let where_clause = if !search_term.is_empty() {
+        " WHERE LOWER(tytul) LIKE LOWER($1) OR LOWER(autor) LIKE LOWER($1)"
+    } else {
+        ""
+    };
+
+    // Poprawna kolejność klauzul
+    let order_clause = match sort_by {
         "price_asc" => " ORDER BY cena ASC",
         "price_desc" => " ORDER BY cena DESC",
         "title_asc" => " ORDER BY tytul ASC",
         "author_asc" => " ORDER BY autor ASC",
-        _ => ""
+        _ => " ORDER BY tytul ASC"  // Domyślne sortowanie
     };
 
-    let query = if !search_term.is_empty() {
-        format!(
-            "{} WHERE LOWER(tytul) LIKE LOWER($1) OR LOWER(autor) LIKE LOWER($1){}",
-            base_query, sort_clause
-        )
-    } else {
-        format!("{}{}", base_query, sort_clause)
-    };
+    // Łączymy części zapytania w odpowiedniej kolejności
+    let query = format!("{}{}{}", base_query, where_clause, order_clause);
 
     let mut query_builder = sqlx::query_as::<_, Book>(&query);
 
diff --git a/static/js/main.js b/static/js/main.js
index a94e239..891567d 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,3 +1,56 @@
+(() => {
+    // Sprawdź czy jesteśmy na stronie głównej
+    const booksContainer = document.getElementById('books-container');
+    const searchInput = document.getElementById('searchInput');
+    const sortSelect = document.getElementById('sortSelect');
+    
+    if (!booksContainer || !searchInput || !sortSelect) return;
+
+    // Funkcje specyficzne dla strony głównej
+    const createBookCard = (book) => `
+        <div class="col">
+            <div class="book-card h-100">
+                <div class="cover-container">
+                    <img src="${book.obraz_url}" class="book-cover" alt="${book.tytul}">
+                </div>
+                <div class="book-body p-3">
+                    <h5 class="book-title">${book.tytul}</h5>
+                    <div class="mt-auto">
+                        <p class="book-author mb-1">${book.autor}</p>
+                        <p class="book-price mb-0">${book.cena} PLN</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    const renderBooks = (books) => {
+        booksContainer.innerHTML = books.length > 0 
+            ? books.map(book => createBookCard(book)).join('')
+            : `<div class="col-12 text-center"><p class="text-muted">Brak wyników wyszukiwania</p></div>`;
+    };
+
+    const loadBooks = async () => {
+        const searchTerm = searchInput.value;
+        const sortBy = sortSelect.value;
+        
+        try {
+            const response = await fetch(`/api/ksiazki?search=${encodeURIComponent(searchTerm)}&sort=${sortBy}`);
+            const books = await response.json();
+            renderBooks(books);
+        } catch (error) {
+            console.error('Błąd ładowania książek:', error);
+        }
+    };
+
+    // Event listeners tylko dla strony głównej
+    searchInput.addEventListener('input', loadBooks);
+    sortSelect.addEventListener('change', loadBooks);
+
+    // Inicjalizacja
+    document.addEventListener('DOMContentLoaded', loadBooks);
+})();
+
 document.addEventListener('DOMContentLoaded', () => {
     updateNavVisibility();
     checkAuthStatus();