diff --git a/src/content/document/documents.yaml b/src/content/document/documents.yaml
new file mode 100644
index 0000000..1546d3b
--- /dev/null
+++ b/src/content/document/documents.yaml
@@ -0,0 +1,19 @@
+tytul: Baza dokumentów
+opis: Opis bazy dokumentów albo bez 
+
+grupy:
+  pobierz:
+    tytul: Pobierz wybrany plik
+    pliki:
+      - nazwa: Lista kanałów EVIO TV
+        file: /public/files/EVIO TV.pdf
+      - nazwa: Lista kanałów JAMBOX TV
+        file: /public/files/EVIO TV.pdf
+      - nazwa: Lista kanałów coś 
+        file: /public/files/EVIO TV.pdf
+
+  otworz:
+    tytul: Przeczytaj
+    pliki:
+      - nazwa: Polityka prywatności
+        slug: polityka-prywatnosci
diff --git a/src/pages/dokumenty/index.astro b/src/pages/dokumenty/index.astro
index 7c92059..05c8286 100644
--- a/src/pages/dokumenty/index.astro
+++ b/src/pages/dokumenty/index.astro
@@ -1,30 +1,121 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
-import { listDocuments } from "../../lib/documents";
-import "../../styles/document.css";
+import yaml from "js-yaml";
+import fs from "node:fs";
+import Markdown from "../../islands/Markdown.jsx";
 
-const documents = listDocuments().filter((d) => d.visible === true);
+/* ===== Typy ===== */
+
+type DocFile = {
+  nazwa?: string;
+  file?: string; // pdf
+  slug?: string; // yaml / czytaj
+};
+
+type DocGroup = {
+  tytul?: string;
+  pliki?: DocFile[];
+};
+
+type DocsYaml = {
+  tytul?: string;
+  opis?: string;
+  grupy?: Record<string, DocGroup>;
+};
+
+/* ===== Load YAML ===== */
+
+const doc = yaml.load(
+  fs.readFileSync("./src/content/document/documents.yaml", "utf8"),
+) as DocsYaml;
+
+const pageTitle = doc?.tytul ?? "Dokumenty";
+const pageDesc = doc?.opis ?? "";
+
+const groups = doc?.grupy ?? {};
+const left = groups["otworz"] ?? {};
+const right = groups["pobierz"] ?? {};
+
+/* ===== Helpers ===== */
+
+function normalizePublicHref(input?: string) {
+  let s = String(input ?? "").trim();
+  if (!s) return "";
+  if (s.startsWith("/public/")) s = s.replace("/public", "");
+  s = s.replace(/ /g, "%20");
+  return s;
+}
 ---
 
-<DefaultLayout title="Dokumenty">
-  <section class="f-documents">
-    <h1 class="f-documents-title">Dokumenty</h1>
+<DefaultLayout title={pageTitle} description={pageDesc}>
+  {/* INTRO */}
+  <section class="f-section">
+    <div class="f-section-grid md:grid-cols-1 items-start">
+      <div>
+        <h2 class="f-section-title">{pageTitle}</h2>
+        {pageDesc && <Markdown text={pageDesc} />}
+      </div>
+    </div>
+  </section>
 
-    <div class="f-documents-grid">
-      {documents.map((doc) => (
-        <a
-          href={`/dokumenty/${doc.slug}`}
-          class="f-document-card"
-        >
-          <h3 class="f-document-title">{doc.title}</h3>
+  {/* CONTENT */}
+  <section class="f-section">
+    <div class="f-section-grid md:grid-cols-2 gap-10 items-start">
 
-          {doc.intro && (
-            <p class="f-document-intro">{doc.intro}</p>
-          )}
+      {/* ===== LEWA — CZYTAJ ===== */}
+      <div>
+        <h3 class="f-section-title">{left.tytul ?? "Przeczytaj"}</h3>
+
+        {!left.pliki?.length ? (
+          <p class="opacity-70 mt-4">Brak dokumentów.</p>
+        ) : (
+          <div class="f-documents-grid">
+            {left.pliki.map((p) => (
+              p.slug ? (
+                <a
+                  class="f-document-card"
+                  href={`/dokumenty/${p.slug}`}
+                  title={p.nazwa}
+                >
+                  {/* <div class="f-document-icon">📖</div> */}
+                  <div class="f-document-title">{p.nazwa}</div>
+                  {/* <div class="f-document-meta">Otwórz</div> */}
+                </a>
+              ) : null
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* ===== PRAWA — POBIERZ ===== */}
+      <div>
+        <h3 class="f-section-title">{right.tytul ?? "Pobierz"}</h3>
+
+        {!right.pliki?.length ? (
+          <p class="opacity-70 mt-4">Brak plików.</p>
+        ) : (
+          <div class="f-documents-grid">
+            {right.pliki.map((p) => {
+              const href = normalizePublicHref(p.file);
+              if (!href) return null;
+
+              return (
+                <a
+                  class="f-document-card"
+                  href={href}
+                  download
+                  title={p.nazwa}
+                >
+                  {/* <div class="f-document-icon">📄</div> */}
+                  <div class="f-document-title">{p.nazwa}</div>
+                  {/* <div class="f-document-meta">Pobierz PDF</div> */}
+                </a>
+              );
+            })}
+          </div>
+        )}
+      </div>
 
-          <span class="f-document-link">Otwórz →</span>
-        </a>
-      ))}
     </div>
   </section>
 </DefaultLayout>
diff --git a/src/styles/base.css b/src/styles/base.css
index 7014e5b..ffd6133 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -38,4 +38,26 @@ a {
 
 a:hover {
   @apply text-[--f-link-text-hover];
+}
+
+/* TO DO: Pzenies w inne miejsce */
+
+.f-document-card {
+  @apply flex items-center gap-1 p-1 mb-2;
+}
+.f-document-card:hover {
+  @apply shadow-sm;
+  transform: translateY(-1px);
+}
+
+.f-document-icon {
+  @apply text-2xl leading-none mt-1;
+}
+
+.f-document-title {
+  @apply font-semibold;
+}
+
+.f-document-meta {
+  @apply text-sm opacity-70 mt-1;
 }
\ No newline at end of file