diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 22be713d..8213e284 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -26,15 +26,22 @@ jobs:
         run: bun i
 
       - name: "`cüzdan` birimini derle"
-        run: bun lib/kdjs/kdjs.js birim/cüzdan/birim.js --globals '{"GEN":false,"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
+        run: bun lib/kdjs/kdjs.js birim/cüzdan/birim.jsx --globals '{"GEN":false,"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
 
       - name: "`dil` birimini derle"
-        run: bun lib/kdjs/kdjs.js birim/dil/birim.js --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"Lang":"en"}'
+        run: bun lib/kdjs/kdjs.js birim/dil/birim.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"Lang":"en"}'
 
       - name: "`kpass` birimini derle"
-        run: bun lib/kdjs/kdjs.js birim/kpass/birim.js --globals '{"GEN":false,"Lang":"en"}'
+        run: bun lib/kdjs/kdjs.js birim/kpass/birim.jsx --globals '{"GEN":false,"Lang":"en"}'
+      
+      - name: "ana sayfayı derle"
+        run: bun lib/kdjs/kdjs.js ana/sayfa.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
+
+      - name: "yenial sayfayı derle"
+        run: bun lib/kdjs/kdjs.js yenial/sayfa.jsx --globals '{"GEN":false,"Route":{"en":"mint","tr":"al"},"DefaultChain":"0x1","Chains":["0x1","0xa4b1"],"Lang":"tr"}'
 
   dappi-derle:
+    if: false # Temporarily disabled
     name: dApp'ı derle
     runs-on: macos-latest
     steps:
diff --git a/.gitignore b/.gitignore
index 21b56a9a..79465693 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 .vscode/
 *.lock*
 *.out.js
+*.out.jsx
 **/*.rs.bk
 /build
 /dist
diff --git a/al/sayfa.jsx b/al/sayfa.jsx
index 9f3a873d..8e58461d 100644
--- a/al/sayfa.jsx
+++ b/al/sayfa.jsx
@@ -1,16 +1,16 @@
 import Script from "kastro:./sayfa.js";
 import PowWorker from "kastro:./tanışma/powWorker.js";
-import İmeceİptal from "./imeceİptal/birim.jsx";
+import İmeceİptal from "./imeceİptal/birim";
 import Css from "./sayfa.css";
-import Tanışma from "./tanışma/birim.jsx";
+import Tanışma from "./tanışma/birim";
 import Ödeme from "./ödeme/birim.jsx";
 import Başlık from "/birim/başlık/birim";
 import Favicon from "/birim/icon.svg";
-import KPass from "/birim/kpass/birim.jsx";
+import KPass from "/birim/kpass/birim";
 import Lato400 from "/birim/lato/l400.ttf";
 import Lato700 from "/birim/lato/l700.ttf";
 import OrtakCss from "/birim/ortakcss/birim";
-import Telefon from "/birim/telefon/birim.jsx";
+import Telefon from "/birim/telefon/birim";
 import { ChainId } from "/lib/crosschain/chains";
 import dom from "/lib/util/dom";
 
@@ -38,7 +38,7 @@ const DefaultChain = ChainId.xa4b1;
 
 const CüzdanBağlama = () =>
   <div id="al1" class="step">
-    <b data-en="1. Connect your wallet.">1. Cüzdanınızı bağlayın.</b>{{
+    <b>{{ en: "1. Cüzdanınızı bağlayın.", tr: "1. Cüzdanınızı bağlayın." }}</b>{{
       en: " Proceed with a crypto wallet.",
       tr: " Cüzdan bağlayarak devam edin.",
     }}<br /><br />
diff --git "a/ana/a\304\237/birim.css" "b/ana/a\304\237/birim.css"
index 24e1ef18..1435dce2 100644
--- "a/ana/a\304\237/birim.css"
+++ "b/ana/a\304\237/birim.css"
@@ -18,10 +18,14 @@
   margin-top: 30px;
 }
 
+/** @name {Altıgen} */
+#ag6 {}
+
 .agi:hover {
   opacity: 1;
 }
 
+/** @name {Düğümİmza} */
 .agi {
   align-items: center;
   border-radius: 15px;
@@ -36,6 +40,7 @@
   width: 180px;
 }
 
+/** @name {DüğümNokta} */
 .agp {
   width: 10px;
   height: 10px;
@@ -130,12 +135,14 @@
   position: relative;
 }
 
+/** @name {AğSvgText} */
 .agsvgt {
   font: 700 30px 'l';
   fill: #333;
   text-anchor: middle;
 }
 
+/** @name {Grafik} */
 #agn {
   margin: auto;
 }
\ No newline at end of file
diff --git "a/ana/a\304\237/birim.jsx" "b/ana/a\304\237/birim.jsx"
index b640832c..a4406b19 100644
--- "a/ana/a\304\237/birim.jsx"
+++ "b/ana/a\304\237/birim.jsx"
@@ -1,22 +1,22 @@
 import AnaCss from "../sayfa.css";
 import Css from "./birim.css";
+import KpassCss from "/birim/kpass/birim.css";
 import OrtakCss from "/birim/ortakcss/birim.css";
 import { keccak256 } from "/lib/crypto/sha3";
 
 /**
  * @param {{
  *   idx: string,
- * }} props
- * @return {string}
+ * }=} props
+ * @return {Promise<string>}
  */
-const Node = ({ idx }) => {
-  const h = keccak256(idx);
-  return (
-    <div class={`agi ag${idx}`}>
-      <div class={`agp ag${idx}n`}></div>{`0x${h.slice(0, 8)}...${h.slice(8, 16)}`}
-    </div>
-  );
-}
+const Node = ({ idx }) => (
+  <div class={[Css.Düğümİmza, `ag${idx}`]}>
+    <div class={[Css.DüğümNokta, `ag${idx}n`]}></div>{
+      `0x${keccak256(idx).slice(0, 8)}...${keccak256(idx).slice(8, 16)}`
+    }
+  </div>
+);
 
 /** @const {!Object<string, !Array<string>>} */
 const NODES = {
@@ -36,10 +36,8 @@ const NODES = {
 const h = (renk) => (renk.startsWith("#") ? renk : "#" + renk).toUpperCase();
 
 /**
- * @param {{
- *   width: number
- * }} props
- * @return {string}
+ * @param {{ width: number }=} props
+ * @return {Promise<string>}
  */
 const Grafik = ({ width }) => {
   const keys = Object.keys(NODES);
@@ -50,19 +48,19 @@ const Grafik = ({ width }) => {
   const r = cx - 80;
 
   return (
-    <svg id="agn" width="100%" viewBox={`0 0 ${width} 430`}>
+    <svg id={Css.Grafik} width="100%" viewBox={`0 0 ${width} 430`}>
       <defs>
-        <path id="ag6"
+        <path id={Css.Altıgen}
           d="M3.33 47.5C0.65 42.859 0.65 37.141 3.33 32.5L17.17 8.53C19.85 3.89 24.8 1 30.16 1.03H57.84C63.2 1 68.15 3.89 70.83 8.53L84.67 32.5C87.35 37.141 87.3494 42.859 84.67 47.5L70.83 71.47C68.15 76.11 63.2 78.97 57.84 78.97H30.16C24.8 78.97 19.85 76.11 17.17 71.47L3.33 47.5Z"
           stroke-width={2} shape-rendering="geometricPrecision" />
       </defs>
-      <text class="agsvgt" x={cx} y={cy - 30} data-en="The KimlikDAO">KimlikDAO</text>
-      <text class="agsvgt" x={cx} y={cy + 7} data-en="Network">Ağı</text>
+      <text class={Css.AğSvgText} x={cx} y={cy - 30}>{{ en: "The KimlikDAO", tr: "KimlikDAO" }}</text>
+      <text class={Css.AğSvgText} x={cx} y={cy + 7}>{{ en: "Network", tr: "Ağı" }}</text>
       {keys.map((key, i) => {
         const x = Math.round(cx + r * Math.sin((Math.PI * 2 * i) / n));
         const y = Math.round(cy - r * Math.cos((Math.PI * 2 * i) / n));
         return (<>
-          <use href="#ag6" x={x - 45} y={y - 75} fill={h(NODES[key][2])} stroke={h(NODES[key][3])} />
+          <use href={`#${Css.Altıgen}`} x={x - 45} y={y - 75} fill={h(NODES[key][2])} stroke={h(NODES[key][3])} />
           <text x={x} y={y - 30} text-anchor="middle" fill="#fff">{NODES[key][0].slice(0, 8)}</text>
           <text x={x} y={y + 23} text-anchor="middle" fill="#444">{NODES[key][1]}</text>
         </>);
@@ -83,29 +81,29 @@ const Ağ = () => (
         en: "The contents of each KPass are verified and digitally signed by at least seven independent nodes in the KimlikDAO network, all while fully preserving your privacy.",
         tr: "KPass’ler birbirinden bağımsız en az 7 KimlikDAO ağı düğümünün onay ve dijital imzası ile üretilebilir. Onay aşamasında veri gizliliğiniz tamamıyla korunur."
       }}</div>
-      <a href="//github.com/KimlikDAO/kimlikdao-node" target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, "info", "anust"]}>{{
+      <a href={ExternalPage.GitHub + "/kimlikdao-node"} target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, OrtakCss.Info, "anust"]}>{{
         en: "Learn about KimlikDAO nodes",
         tr: "KimlikDAO düğümü detayları"
       }}</a>
     </div>
     <div id={Css.OrtaSütun}>
       <div id={Css.KPass}>
-        <div class="kpip">
-          <div class="kpl">{{ tr: "Doğum yeri", en: "City of birth" }}</div>
-          <div>{{ tr: "İstanbul", en: "Istanbul" }}</div>
-          <div class="kpl">{{ tr: "Cinsiyet", en: "Gender" }}</div>
+        <div class={KpassCss.BilgiKartıİçi}>
+          <div class={KpassCss.Ad}>{{ tr: "Doğum yeri", en: "City of birth" }}</div>
+          <div>{{ tr: "İstanbul", en: "Palo Alto, CA" }}</div>
+          <div class={KpassCss.Ad}>{{ tr: "Cinsiyet", en: "Gender" }}</div>
           <div>{{ tr: "K", en: "F" }}</div>
         </div>
-        <svg id="kplo" height={24} width={24}>
-          <use href="#bak" width={24} height={24} />
+        <svg height={24} width={24}>
+          <use href={"#" + OrtakCss.Başlık.Logomark} width={24} height={24} />
         </svg>
-        <a href="javascript:" class="kpd kpso"></a>
-        <a href="javascript:" class="kpd kpsa"></a>
+        <a href="javascript:" class={[KpassCss.Düğme, KpassCss.SolDüğme]}></a>
+        <a href="javascript:" class={[KpassCss.Düğme, KpassCss.SağDüğme]}></a>
       </div>
       {Object.keys(NODES).map((key) => <Node idx={key} />)}
     </div>
     <Grafik width={500} />
-  </div >
+  </div>
 );
 
 export default Ağ;
diff --git a/ana/hero/Sergi.jsx b/ana/hero/Sergi.jsx
new file mode 100644
index 00000000..d598068b
--- /dev/null
+++ b/ana/hero/Sergi.jsx
@@ -0,0 +1,125 @@
+import Css from "./sergi.css";
+import Cüzdan from "/birim/cüzdan/birim";
+import Telefon from "/birim/telefon/birim";
+import dom from "/lib/util/dom";
+
+/** @const {!HTMLDivElement} */
+const Boncuklar = dom.div(Css.Boncuklar);
+/** @const {!HTMLUListElement} */
+const Kartlar = dom.ul(Css.Kartlar);
+
+/** @type {number} */
+let Kart = 0;
+/** @type {number} */
+let SergiSaati = 0;
+/** @type {number} */
+let YerleştirSaati = 0;
+
+/**
+ * Kartları `Kart` değişkenine göre doğru konuma çeker.
+ */
+const yerleştir = () => {
+  /** @const {number} */
+  const width = Kartlar.firstElementChild.getBoundingClientRect().width;
+  Kartlar.style.transform = `translate3d(-${Kart * width}px,0,0)`;
+}
+
+/**
+ * @param {number} yeniKart
+ */
+const kartDeğiştir = (yeniKart) => {
+  if (Kart > 2 && yeniKart == 0) yeniKart = 4;
+  const yeniKartDengi = yeniKart % 4;
+  Telefon.nftGöster(yeniKartDengi <= 1, !yeniKartDengi);
+  yeniKartDengi === 3
+    ? Telefon.kutuGöster(dom.i18n({
+      tr: "Bağlı app KPass’inizdeki iletişim bilgilerinize erişmek istiyor. İzin veriyor musunuz?",
+      en: "The connected app would like to access your contact info section of your KPass."
+    }))
+    : Telefon.kutuKapat();
+  Boncuklar.children[Kart % 4].firstElementChild.classList.remove("sel");
+  Boncuklar.children[yeniKartDengi].firstElementChild.classList.add("sel");
+  Kart = yeniKart;
+  yerleştir();
+  if (yeniKart == 4)
+    setTimeout(() => {
+      Kartlar.style.transition = "none";
+      Kart = 0;
+      yerleştir();
+      setTimeout(() => Kartlar.style.transition = "", 600)
+    }, 1200);
+}
+
+const sergiSaatiKur = () => {
+  if (SergiSaati) clearInterval(SergiSaati);
+  SergiSaati = setInterval(() => kartDeğiştir(Kart + 1), 12000);
+}
+
+const Sergi = () => {
+  window.onresize = () => {
+    clearTimeout(YerleştirSaati);
+    YerleştirSaati = setTimeout(yerleştir, 100);
+  }
+  for (let /** number */ i = 0; i < Boncuklar.childElementCount; ++i) {
+    Boncuklar.children[i].onclick = () => {
+      kartDeğiştir(i);
+      sergiSaatiKur();
+    }
+  }
+  Telefon.nftGöster(true, true);
+  Cüzdan.adresDeğişince((adres) => Telefon.adresGir(adres));
+  Kartlar.appendChild(Kartlar.firstElementChild.cloneNode(true));
+  Kartlar.style.width = "500%";
+  sergiSaatiKur();
+
+  return (
+    <div id={Css.Kök}>
+      <Css />
+      <div id={Css.KartSahnesi}>
+        <Kartlar>
+          <li class={Css.Kart}>
+            <h3>{{
+              tr: "Kontrolü tamamen sende olan on-chain bir hesap",
+              en: "An on-chain account that you truly own"
+            }}</h3>{{
+              en: "Mint your KPass and wallet login to all supported on/off-ramps with an account you truly own",
+              tr: "Bir kez KPass al, destekleyen tüm platformlarda cüzdanını bağla, gerekli bilgileri güvenle sun, hesap açmadan işlem yap"
+            }}
+          </li>
+          <li class={Css.Kart}>
+            <h3>{{
+              tr: "İçeriği kendi cüzdan anahtarlarınla şifrelenir",
+              en: "Your data is encrypted under your wallet private key"
+            }}</h3>{{
+              en: "The contents of your KPass is encrypted in your browser under your wallet private key. KimlikDAO will never store your data",
+              tr: "KPass içeriği kendi tarayıcında kendi cüzdan anahtarlarınla şifrelenir. KimlikDAO asla bilgilerini göremez ve saklamaz"
+            }}
+          </li>
+          <li class={Css.Kart}>
+            <h3 data-en="KPass can be kept in any NFT wallet, such as MetaMask">MetaMask gibi NFT
+              destekleyen kripto cüzdanında taşınır</h3>{{
+                en: "KPass is an ERC-721 non-fungible token meaning that you can see it in any NFT wallet",
+                tr: "KPass ERC-721 standardına uygun bir NFT olduğu için NFT destekleyen her cüzdanda görülebilir"
+              }}
+          </li>
+          <li class={Css.Kart}>
+            <h3 data-en="Control who can access your info">dApp’lere istediğin
+              bilgileri paylaş, istediklerini gizli tut</h3>{{
+                en: "The connected dApp may send you requests for accessing parts of your KPass. Approve the sections you’d like to share, reject others",
+                tr: "Bağlı dApp KPass’inin içindeki bölümlere erişim isteği yollayabilir. Paylaşmak istediklerini onayla, gizli tutmak istediklerini onaylama"
+              }}
+          </li>
+        </Kartlar>
+      </div>
+      <Boncuklar>
+        {[...Array(4)].map((_, i) => (
+          <div class={Css.Boncuklu}>
+            <div class={[Css.Boncuk].concat(i == 0 ? "sel" : [])}></div>
+          </div>
+        ))}
+      </Boncuklar>
+    </div>
+  );
+}
+
+export default Sergi;
diff --git a/ana/hero/birim.jsx b/ana/hero/birim.jsx
index 4a2855e4..f01dde5c 100644
--- a/ana/hero/birim.jsx
+++ b/ana/hero/birim.jsx
@@ -1,5 +1,5 @@
 import Css from "./birim.css";
-import Sergi from "./sergi/birim";
+import Sergi from "./Sergi";
 import OrtakCss from "/birim/ortakcss/birim.css";
 import Telefon from "/birim/telefon/birim.jsx";
 import { Page } from "/crate";
diff --git a/ana/hero/sergi/birim.css b/ana/hero/sergi.css
similarity index 100%
rename from ana/hero/sergi/birim.css
rename to ana/hero/sergi.css
diff --git a/ana/hero/sergi/birim.js b/ana/hero/sergi/birim.js
deleted file mode 100644
index 0575b334..00000000
--- a/ana/hero/sergi/birim.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Boncuklar, Kartlar } from './birim.jsx';
-import Cüzdan from "/birim/cüzdan/birim";
-import Telefon from "/birim/telefon/birim";
-import dom from '/lib/util/dom';
-
-/** @type {number} */
-let Kart = 0;
-/** @type {number} */
-let SergiSaati = 0;
-/** @type {number} */
-let YerleştirSaati = 0;
-
-Telefon.nftGöster(true, true);
-
-/**
- * Kartları `Kart` değişkenine göre doğru konuma çeker.
- */
-const yerleştir = () => {
-  /** @const {number} */
-  const width = Kartlar.firstElementChild.getBoundingClientRect().width;
-  Kartlar.style.transform = `translate3d(-${Kart * width}px,0,0)`;
-}
-
-/**
- * @param {number} yeniKart
- */
-const kartDeğiştir = (yeniKart) => {
-  if (Kart > 2 && yeniKart == 0) yeniKart = 4;
-  const yeniKartDengi = yeniKart % 4;
-  Telefon.nftGöster(yeniKartDengi <= 1, !yeniKartDengi);
-  yeniKartDengi === 3
-    ? Telefon.kutuGöster(dom.i18n({
-      tr: "Bağlı app KPass’inizdeki iletişim bilgilerinize erişmek istiyor. İzin veriyor musunuz?",
-      en: "The connected app would like to access your contact info section of your KPass."
-    }))
-    : Telefon.kutuKapat();
-  Boncuklar.children[Kart % 4].firstElementChild.classList.remove("sel");
-  Boncuklar.children[yeniKartDengi].firstElementChild.classList.add("sel");
-  Kart = yeniKart;
-  yerleştir();
-  if (yeniKart == 4)
-    setTimeout(() => {
-      Kartlar.style.transition = "none";
-      Kart = 0;
-      yerleştir();
-      setTimeout(() => Kartlar.style.transition = "", 600)
-    }, 1200);
-}
-
-window.onresize = () => {
-  clearTimeout(YerleştirSaati);
-  YerleştirSaati = setTimeout(yerleştir, 100);
-}
-
-for (let /** number */ i = 0; i < Boncuklar.childElementCount; ++i) {
-  Boncuklar.children[i].onclick = () => {
-    kartDeğiştir(i);
-    sergiSaatiKur();
-  }
-}
-
-const sergiSaatiKur = () => {
-  if (SergiSaati) clearInterval(SergiSaati);
-  SergiSaati = setInterval(() => kartDeğiştir(Kart + 1), 12000);
-}
-
-Cüzdan.adresDeğişince((adres) => Telefon.adresGir(adres));
-
-Kartlar.appendChild(Kartlar.firstElementChild.cloneNode(true));
-Kartlar.style.width = "500%";
-sergiSaatiKur();
diff --git a/ana/hero/sergi/birim.jsx b/ana/hero/sergi/birim.jsx
deleted file mode 100644
index 6cb414af..00000000
--- a/ana/hero/sergi/birim.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import Css from "./birim.css";
-import dom from "/lib/util/dom";
-
-/** @const {!HTMLDivElement} */
-export const Boncuklar = dom.div(Css.Boncuklar);
-/** @const {!HTMLUListElement} */
-export const Kartlar = dom.ul(Css.Kartlar);
-
-const Sergi = () => (
-  <div id={Css.Kök}>
-    <Css />
-    <div id={Css.KartSahnesi}>
-      <Kartlar>
-        <li class={Css.Kart}>
-          <h3>{{
-            tr: "Kontrolü tamamen sende olan on-chain bir hesap",
-            en: "An on-chain account that you truly own"
-          }}</h3>{{
-            en: "Mint your KPass and wallet login to all supported on/off-ramps with an account you truly own",
-            tr: "Bir kez KPass al, destekleyen tüm platformlarda cüzdanını bağla, gerekli bilgileri güvenle sun, hesap açmadan işlem yap"
-          }}
-        </li>
-        <li class={Css.Kart}>
-          <h3>{{
-            tr: "İçeriği kendi cüzdan anahtarlarınla şifrelenir",
-            en: "Your data is encrypted under your wallet private key"
-          }}</h3>{{
-            en: "The contents of your KPass is encrypted in your browser under your wallet private key. KimlikDAO will never store your data",
-            tr: "KPass içeriği kendi tarayıcında kendi cüzdan anahtarlarınla şifrelenir. KimlikDAO asla bilgilerini göremez ve saklamaz"
-          }}
-        </li>
-        <li class={Css.Kart}>
-          <h3 data-en="KPass can be kept in any NFT wallet, such as MetaMask">MetaMask gibi NFT
-            destekleyen kripto cüzdanında taşınır</h3>{{
-              en: "KPass is an ERC-721 non-fungible token meaning that you can see it in any NFT wallet",
-              tr: "KPass ERC-721 standardına uygun bir NFT olduğu için NFT destekleyen her cüzdanda görülebilir"
-            }}
-        </li>
-        <li class={Css.Kart}>
-          <h3 data-en="Control who can access your info">dApp’lere istediğin
-            bilgileri paylaş, istediklerini gizli tut</h3>{{
-              en: "The connected dApp may send you requests for accessing parts of your KPass. Approve the sections you’d like to share, reject others",
-              tr: "Bağlı dApp KPass’inin içindeki bölümlere erişim isteği yollayabilir. Paylaşmak istediklerini onayla, gizli tutmak istediklerini onaylama"
-            }}
-        </li>
-      </Kartlar>
-    </div>
-    <Boncuklar>
-      {[...Array(4)].map((_, i) => (
-        <div class={Css.Boncuklu}>
-          <div class={[Css.Boncuk].concat(i == 0 ? "sel" : [])}></div>
-        </div>
-      ))}
-    </Boncuklar>
-  </div>
-);
-
-export default Sergi;
diff --git a/ana/kazan/birim.css b/ana/kazan/birim.css
index 4bc9ad9f..fa1736b6 100644
--- a/ana/kazan/birim.css
+++ b/ana/kazan/birim.css
@@ -1,3 +1,8 @@
+/**
+ * @export {Kök}
+ */
+#ka {}
+
 /**
  * @name {İçerik}
  */
diff --git a/ana/kazan/birim.js b/ana/kazan/birim.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/ana/kazan/birim.jsx b/ana/kazan/birim.jsx
index ac079d9f..ac3cadd7 100644
--- a/ana/kazan/birim.jsx
+++ b/ana/kazan/birim.jsx
@@ -1,11 +1,12 @@
 import AnaCss from "../sayfa.css";
 import Css from "./birim.css";
-import EliptikEğriler from "/birim/blog/eliptik-egriler/birim.jsx";
-import EliptikImza from "/birim/blog/eliptik-imza/birim.jsx";
+import EliptikEğriler from "/birim/blog/eliptik-egriler/birim";
+import EliptikImza from "/birim/blog/eliptik-imza/birim";
 import OrtakCss from "/birim/ortakcss/birim.css";
+import { ExternalPage } from "/crate";
 
-export default () => (
-  <div id="ka" class={AnaCss.Üçlü}>
+const Kazan = () => (
+  <div id={Css.Kök} class={AnaCss.Üçlü}>
     <Css />
     <div id={Css.İçerik}>
       <h2 class={OrtakCss.Mavi}>{{
@@ -13,21 +14,23 @@ export default () => (
         tr: "KPass’inle öğren ve kazan."
       }}</h2>
       <span class={AnaCss.Açıklama}>{{
-        en: "Delve into KimlikDAO's blog for in-depth articles on cryptography and the " +
-          "mathematical aspects of cryptocurrencies. Answer a few simple questions and present " +
-          "your KPass’s completely anonymous HumanID section to claim your reward from a pool " +
-          "worth tens of thousands of dollars. Coming soon!",
-        tr: "KimlikDAO blog’un bilgi dolu ve ödüllü makalelerini oku, basit soruları cevapla, " +
-          "KPass’inin %100 anonim HumanID kısmını sunarak on binlerce dolarlık havuzdan ödülünü topla.Çok yakında!"
+        en: <>Explore KimlikDAO's blog for in-depth articles on cryptography and the
+          "mathematical aspects of cryptocurrencies. Answer a few simple questions and present
+          "your KPass’s completely anonymous HumanID section to claim your reward from a pool
+          "worth tens of thousands of dollars. Coming soon!</>,
+        tr: <>KimlikDAO blog’un bilgi dolu ve ödüllü makalelerini oku, basit soruları cevapla,
+          KPass’inin %100 anonim HumanID kısmını sunarak on binlerce dolarlık havuzdan ödülünü
+          topla. Çok yakında!</>
       }}</span>
       <br />
-      <a href={{ en: "//blog.kimlikdao.org/?en", tr: "//blog.kimlikdao.org/?tr" }}
-        class={[OrtakCss.Düğme, "info", "anust"]}>{{
-          en: "Learn & earn (Soon!)",
-          tr: "Öğren ve kazan (Yakında!)"
-        }}</a>
+      <a href={ExternalPage.Blog} class={[OrtakCss.Düğme, OrtakCss.Info, "anust"]}>{{
+        en: "Learn & earn (Soon!)",
+        tr: "Öğren ve kazan (Yakında!)"
+      }}</a>
     </div>
     <EliptikImza href="" />
     <EliptikEğriler href="" />
   </div>
 );
+
+export default Kazan;
diff --git a/ana/opengraph.jsx b/ana/opengraph.jsx
index 98bb4cc3..7aaa74f9 100644
--- a/ana/opengraph.jsx
+++ b/ana/opengraph.jsx
@@ -13,7 +13,7 @@ export const Title = {
   [LangCode.TR]: "KimlikDAO | Blokzincirdeki kimlik NFT’niz"
 };
 
-export default () => (<>
+const OpenGraph = () => (<>
   <meta property="og:type" content="website" />
   <meta property="og:url" content={HostUrl} />
   <meta property="og:title" content={Title} />
@@ -22,3 +22,5 @@ export default () => (<>
   <meta property="og:locale" content={{ [LangCode.EN]: "en_US", [LangCode.TR]: "tr_TR" }} />
   <meta property="og:site_name" content="KimlikDAO" />
 </>);
+
+export default OpenGraph;
diff --git a/ana/raporlar/birim.jsx b/ana/raporlar/birim.jsx
index bf0d0253..871defd2 100644
--- a/ana/raporlar/birim.jsx
+++ b/ana/raporlar/birim.jsx
@@ -1,13 +1,16 @@
 import AnaCss from "../sayfa.css";
-import Jan25 from "/birim/blog/2025.01/birim.jsx";
+import Jan25 from "/birim/blog/2025.01/birim";
 import OrtakCss from "/birim/ortakcss/birim.css";
 
-export default () => (
+const Raporlar = () => (
   <div id="ra" class={AnaCss.Üçlü}>
     <div></div>
-    <Jan25 href={{ en: "", tr: "" }} loading="lazy" />
+    <Jan25 href={""} loading="lazy" />
     <div class={AnaCss.SağaYaslı}>
-      <h2 data-en="KimlikDAO progress reports." class={OrtakCss.Mor}>KimlikDAO ilerleme raporları.</h2>
+      <h2 class={OrtakCss.Mor}>{{
+        en: "KimlikDAO progress reports.",
+        tr: "KimlikDAO ilerleme raporları."
+      }}</h2>
       <span class={AnaCss.Açıklama}>{{
         en:
           "Read about the progress at KimlikDAO, from advancements in the KimlikDAO " +
@@ -18,10 +21,12 @@ export default () => (
           "katıldığımız etkinliklerden, kurduğumuz yeni ortaklıklara tüm " +
           "gelişmelerini aylık ilerleme raporlarından okuyun."
       }}</span><br />
-      <a href="//blog.kimlikdao.org" class={[OrtakCss.Düğme, "more", "anust"]}>{{
+      <a href="//blog.kimlikdao.org" class={[OrtakCss.Düğme, OrtakCss.More, "anust"]}>{{
         en: "All progress reports",
         tr: "Tüm ilerleme raporları"
       }}</a>
     </div>
-  </div >
+  </div>
 );
+
+export default Raporlar;
diff --git a/ana/sahipler/birim.jsx b/ana/sahipler/birim.jsx
index ab37c8c0..c867dbc9 100644
--- a/ana/sahipler/birim.jsx
+++ b/ana/sahipler/birim.jsx
@@ -23,9 +23,13 @@ const Tablo = {
   [ChainId.x89]: { ad: "POLYGON", ek: "’DA", holders: 2 },
 };
 
+/**
+ * @param {{ chainId: ChainId }=} props
+ * @return {Promise<string>}
+ */
 const Balon = ({ chainId }) => (
   <div class={[Css.Balon, chainId == ChainId.MinaMainnet ? "mina" : chainId.slice(1)]}>
-    <Image src={ağResmi(chainId)} height={40} width={40} bundleHeight={40} bundleWidth={40} />
+    <Image src={ağResmi(chainId)} height={40} width={40} bundleHeight={64} bundleWidth={64} />
     <div>
       <div class={Css.BalonSayı}>{Tablo[chainId].holders}</div>
       <span class={Css.BalonAd} data-en={`HOLDERS ON ${Tablo[chainId].ad}`}>{
diff --git a/ana/sayfa.js b/ana/sayfa.js
deleted file mode 100644
index 63ef1999..00000000
--- a/ana/sayfa.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import "./hero/sergi/birim";
-import "./kazan/birim";
-import Css from "./sayfa.css";
-import "/birim/altdizin/birim";
-import Cüzdan from "/birim/cüzdan/birim";
-import "/birim/cüzdan/sağMenü";
-import "/birim/dil/birim";
-import { Page } from "/crate";
-import dom from "/lib/util/dom";
-
-Cüzdan.kpassDeğişince((_, dosyaSözü) => {
-  /** @const {!HTMLAnchorElement} */
-  const eylemDüğmesi = dom.a(Css.EylemDüğmesi);
-  /** @type {!Text} */(eylemDüğmesi.firstChild).data = dosyaSözü
-    ? dom.i18n({ tr: "KPass’ini incele", en: "View KPass" })
-    : dom.i18n({ tr: "Hemen KPass al", en: "Mint KPass" })
-  eylemDüğmesi.href = dosyaSözü
-    ? dom.i18n(Page.KPassim)
-    : dom.i18n(Page.Al);
-});
diff --git a/ana/sayfa.jsx b/ana/sayfa.jsx
index 0f904c7a..76d1aaef 100644
--- a/ana/sayfa.jsx
+++ b/ana/sayfa.jsx
@@ -1,11 +1,11 @@
 import Script from "kastro:./sayfa.js";
-import Ağ from "./ağ/birim.jsx";
+import Ağ from "./ağ/birim";
 import Hero from "./hero/birim";
-import Kazan from "./kazan/birim.jsx";
+import Kazan from "./kazan/birim";
 import OkResmi from "./ok.svg";
 import OpenGraph, { Description, Title } from "./opengraph";
 import Raporlar from "./raporlar/birim";
-import Sahipler from "./sahipler/birim.jsx";
+import Sahipler from "./sahipler/birim";
 import Css from "./sayfa.css";
 import TwitterCard from "./twittercard";
 import Altdizin from "/birim/altdizin/birim";
@@ -19,7 +19,8 @@ import Logo from "/birim/logo.svg";
 import OrtakCss from "/birim/ortakcss/birim";
 import { ExternalPage, HostUrl, Page } from "/crate";
 import { ChainId } from "/lib/crosschain/chains";
-import { I18nString, LangCode } from "/lib/util/i18n"
+import dom from "/lib/util/dom";
+import { I18nString, LangCode } from "/lib/util/i18n";
 
 /** @const {!Array<ChainId>} */
 const Chains = [
@@ -41,53 +42,66 @@ const ChainNotes = {
 const DefaultChain = ChainId.xa4b1;
 
 /**
- * @param {{ Lang: LangCode }} props
- * @return {!Promise<string>}
+ * @param {{ Lang: LangCode }=} props
+ * @return {Promise<string>}
  */
-const Ana = ({ Lang }) => (
-  <html lang={Lang}>
-    <head>
-      <meta charset="utf-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="description" content={Description} />
-      <OpenGraph />
-      <TwitterCard />
-      <Lato400 shared />
-      <Lato700 shared />
-      <title>{Title}</title>
-      <link rel="canonical" href={HostUrl} />
-      <OrtakCss />
-      <Css />
-      <Favicon raster={32} rel="icon" />
-      <Script Chains={Chains} DefaultChain={DefaultChain} />
-    </head>
-    <body id={Css.Kök}>
-      <div id={Css.Başlık}>
-        <a href="/" id={OrtakCss.Başlık.Logo}>
-          <Logo id={OrtakCss.Başlık.Logomark} height={35} inline />KimlikDAO</a>
-        <div id={OrtakCss.Başlık.Linkler}>
-          <a class={OrtakCss.Başlık.Link} href={ExternalPage.Join}>{{
-            en: "Join us", tr: "Aramıza katıl"
-          }}</a>
-          <a class={OrtakCss.Başlık.Link} href="//discord.gg/H2wg6pcWXG" target="_blank" rel="noreferrer">Discord</a>
-          <Dil />
-          <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes}>
-            <SağMenü />
-          </Cüzdan>
-          <a id={Css.EylemDüğmesi} href={Page.Al} class={[OrtakCss.Düğme, "act"]}>{{
-            en: "Mint KPass", tr: "Hemen KPass al"
-          }}<OkResmi inline /></a>
+const Ana = ({ Lang }) => {
+  Cüzdan.kpassDeğişince((_, dosyaSözü) => {
+    /** @const {!HTMLAnchorElement} */
+    const eylemDüğmesi = dom.a(Css.EylemDüğmesi);
+    /** @type {!Text} */(eylemDüğmesi.firstChild).data = dosyaSözü
+      ? dom.i18n({ tr: "KPass’ini incele", en: "View KPass" })
+      : dom.i18n({ tr: "Hemen KPass al", en: "Mint KPass" })
+    eylemDüğmesi.href = dosyaSözü
+      ? dom.i18n(Page.KPassim)
+      : dom.i18n(Page.Al);
+  });
+
+  return (
+    <html lang={Lang}>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content={Description} />
+        <OpenGraph />
+        <TwitterCard />
+        <Lato400 shared />
+        <Lato700 shared />
+        <title>{Title}</title>
+        <link rel="canonical" href={HostUrl} />
+        <OrtakCss />
+        <Css />
+        <Favicon raster={32} rel="icon" />
+        <Script Chains={Chains} DefaultChain={DefaultChain} />
+      </head>
+      <body id={Css.Kök}>
+        <div id={Css.Başlık}>
+          <a href="/" id={OrtakCss.Başlık.Logo}>
+            <Logo id={OrtakCss.Başlık.Logomark} height={35} inline />KimlikDAO</a>
+          <div id={OrtakCss.Başlık.Linkler}>
+            <a class={OrtakCss.Başlık.Link} href={ExternalPage.Join}>{{
+              en: "Join us", tr: "Aramıza katıl"
+            }}</a>
+            <a class={OrtakCss.Başlık.Link} href={ExternalPage.Discord} target="_blank" rel="noreferrer">Discord</a>
+            <Dil />
+            <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes}>
+              <SağMenü />
+            </Cüzdan>
+            <a id={Css.EylemDüğmesi} href={Page.Al} class={[OrtakCss.Düğme, "act"]}>{{
+              en: "Mint KPass", tr: "Hemen KPass al"
+            }}<OkResmi inline /></a>
+          </div>
         </div>
-      </div>
-      <Hero />
-      <Kazan />
-      <Sahipler />
-      <Ağ />
-      <hr class={Css.Ayraç} />
-      <Raporlar />
-      <Altdizin />
-    </body>
-  </html>
-);
+        <Hero />
+        <Kazan />
+        <Sahipler />
+        <Ağ />
+        <hr class={Css.Ayraç} />
+        <Raporlar />
+        <Altdizin />
+      </body>
+    </html>
+  );
+}
 
 export default Ana;
diff --git a/ana/twittercard.jsx b/ana/twittercard.jsx
index 762f65c9..43e85b90 100644
--- a/ana/twittercard.jsx
+++ b/ana/twittercard.jsx
@@ -1,9 +1,11 @@
 import { Description, Title } from "./opengraph.jsx";
 import { HostUrl } from "/crate";
 
-export default () => (<>
+const TwitterCard = () => (<>
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content={Title} />
   <meta name="twitter:description" content={Description} />
   <meta name="twitter:image" content={`${HostUrl}/KPASS.svg`} />
 </>);
+
+export default TwitterCard;
diff --git a/birim/altdizin/birim.css b/birim/altdizin/birim.css
index b217d0d5..4ae45d8e 100644
--- a/birim/altdizin/birim.css
+++ b/birim/altdizin/birim.css
@@ -77,7 +77,7 @@
 
 /**
  * Kaydol birimi
- * @export {KaydolBirimi}
+ * @export {Kaydol}
  */
 #altb {
   width: 330px;
diff --git a/birim/altdizin/birim.js b/birim/altdizin/birim.js
deleted file mode 100644
index 04e285cd..00000000
--- a/birim/altdizin/birim.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Css from "./birim.css";
-import Kaydol from "/birim/kaydol/birim";
-
-Kaydol.bind(Css.KaydolBirimi);
diff --git a/birim/altdizin/birim.jsx b/birim/altdizin/birim.jsx
index 5e918661..1f7e5f12 100644
--- a/birim/altdizin/birim.jsx
+++ b/birim/altdizin/birim.jsx
@@ -1,7 +1,8 @@
 import Css from "./birim.css";
-import Kaydol from "/birim/kaydol/birim.jsx";
-import OrtakCss from "/birim/ortakcss/birim.jsx";
+import Kaydol from "/birim/kaydol/birim";
+import OrtakCss from "/birim/ortakcss/birim";
 import { ExternalPage } from "/crate";
+import { i18n } from "/lib/util/i18n";
 
 const Altdizin = () => (
   <div id={Css.Kök}>
@@ -9,32 +10,35 @@ const Altdizin = () => (
     <div id={Css.KaydolKutusu}>
       <div id={Css.Logo}>
         <svg height={30} width={39}>
-          <use href={"#" + OrtakCss.Başlık.Logomark} height={30} x={-4} />
+          <use href={`#${OrtakCss.Başlık.Logomark}`} height={30} x={-4} />
         </svg>KimlikDAO
       </div>
       <span id={Css.BrandMark}>{{
         en: "Wallet-login to all on/off-ramps with a single account you truly own.",
         tr: "Bir kez KPass al, tüm on/off-ramp’leri cüzdanınla hesap açmadan kullan."
       }}</span>
-      <div id={Css.KaydolMetni} data-en="SUBSCRIBE TO THE KIMLIKDAO NEWSLETTER">KİMLİKDAO BÜLTEN'E KAYDOLUN</div>
-      <Kaydol id={Css.KaydolBirimi} />
+      <div id={Css.KaydolMetni}>{{
+        en: "SUBSCRIBE TO THE KIMLIKDAO NEWSLETTER",
+        tr: "KİMLİKDAO BÜLTEN'E KAYDOLUN"
+      }}</div>
+      <Kaydol id={Css.Kaydol} />
     </div>
     <div class={Css.Sütun}>
       <b>{{ en: "COMMUNITY", tr: "TOPLULUK" }}</b>
-      <a href="//x.com/KimlikDAO">X</a>
-      <a href="//discord.gg/H2wg6pcWXG">Discord</a>
-      <a href={ExternalPage.Join + "#sa-ambassador1"}>{{ en: "Ambassador program", tr: "Ambassador ol" }}</a>
-      <a href="//zealy.io/c/kimlikdao">Zealy</a>
-      <a href="//github.com/KimlikDAO">GitHub</a>
-      <a href="//dappradar.com/dapp/kimlikdao-2">DappRadar</a>
-      <a href="//linkedin.com/company/KimlikDAO/">LinkedIn</a>
+      <a href={ExternalPage.X}>X</a>
+      <a href={ExternalPage.Discord}>Discord</a>
+      <a href={i18n`${ExternalPage.Join}#sa-ambassador1`}>{{ en: "Ambassador program", tr: "Ambassador ol" }}</a>
+      <a href={ExternalPage.Zealy}>Zealy</a>
+      <a href={ExternalPage.GitHub}>GitHub</a>
+      <a href={ExternalPage.DappRadar}>DappRadar</a>
+      <a href={ExternalPage.LinkedIn}>LinkedIn</a>
     </div>
     <div class={Css.Sütun}>
       <b>{{ en: "DEVELOPERS", tr: "GELİŞTİRİCİLER" }}</b>
-      <a href="//github.com/KimlikDAO">GitHub</a>
+      <a href={ExternalPage.GitHub}>GitHub</a>
       <a href={ExternalPage.Docs}>Docs</a>
       <a href={ExternalPage.Join}>{{ en: "Join KimlikDAO", tr: "KimlikDAO’ya katıl" }}</a>
-      <a href="//discord.gg/H2wg6pcWXG">Discord</a>
+      <a href={ExternalPage.Discord}>Discord</a>
     </div>
   </div>
 );
diff --git "a/birim/ba\305\237l\304\261k/birim.js" "b/birim/ba\305\237l\304\261k/birim.js"
deleted file mode 100644
index 97ba61de..00000000
--- "a/birim/ba\305\237l\304\261k/birim.js"
+++ /dev/null
@@ -1,5 +0,0 @@
-import Cüzdan from "/birim/cüzdan/birim";
-import "/birim/cüzdan/sağMenü";
-import "/birim/dil/birim";
-
-export { Cüzdan };
diff --git "a/birim/ba\305\237l\304\261k/birim.jsx" "b/birim/ba\305\237l\304\261k/birim.jsx"
index dca2832c..788d3053 100644
--- "a/birim/ba\305\237l\304\261k/birim.jsx"
+++ "b/birim/ba\305\237l\304\261k/birim.jsx"
@@ -1,8 +1,10 @@
 import Css from "./birim.css";
-import Cüzdan from "/birim/cüzdan/birim.jsx";
-import SağMenü from "/birim/cüzdan/sağMenü.jsx";
-import Dil from "/birim/dil/birim.jsx";
+import Cüzdan from "/birim/cüzdan/birim";
+import SağMenü from "/birim/cüzdan/sağMenü";
+import Dil from "/birim/dil/birim";
 import Logo from "/birim/logo.svg";
+import { ChainId } from "/lib/crosschain/chains";
+import { I18nString } from "/lib/util/i18n";
 
 /**
  * @param {{
@@ -12,13 +14,22 @@ import Logo from "/birim/logo.svg";
  *   href: string,
  *   title: string,
  *   piggyback: (string|undefined)
- * }} props
- * @return {string}
+ * }=} props
+ * @return {Promise<string>}
  */
-const Başlık = ({ Chains, DefaultChain, ChainNotes, href = "/", title = "KimlikDAO", piggyback }) => (
+const Başlık = ({
+  Chains,
+  DefaultChain,
+  ChainNotes,
+  href = "/",
+  title = "KimlikDAO",
+  piggyback
+}) => (
   <div id={Css.Kök}>
     <Css />
-    <a href={href} id={Css.Logo}><Logo id={Css.Logomark} inline />{title}</a>
+    <a href={href} id={Css.Logo}>
+      <Logo id={Css.Logomark} inline />{title}
+    </a>
     <div id={Css.Linkler}>
       <Dil piggyback={piggyback} />
       <Cüzdan Chains={Chains} DefaultChain={DefaultChain} ChainNotes={ChainNotes} piggyback={piggyback}>
@@ -28,4 +39,6 @@ const Başlık = ({ Chains, DefaultChain, ChainNotes, href = "/", title = "Kimli
   </div>
 );
 
+export { Cüzdan, Dil };
+
 export default Başlık;
diff --git a/birim/blog/2025.01/birim.jsx b/birim/blog/2025.01/birim.jsx
index 16387a82..9ba7c420 100644
--- a/birim/blog/2025.01/birim.jsx
+++ b/birim/blog/2025.01/birim.jsx
@@ -1,22 +1,39 @@
-import Yazar from "birim/blog/yazar/birim.jsx";
 import BlogCss from "../birim.css";
+import Yazar from "../Yazar";
 import BannerResmi from "./banner.png";
 
-export default ({ href, piggyback, loading }) => (
-  <a href={href} class="blp">
+/**
+ * @param {{
+ *   href: string,
+ *   piggyback: string,
+ *   loading: boolean
+ * }=} props
+ * @return {Promise<string>}
+ */
+const Jan25 = ({ href, piggyback, loading }) => (
+  <a href={href} class={BlogCss.Preview}>
     <BlogCss />
     <div>
-      <BannerResmi piggyback={piggyback} class="blpp" width="100%" loading={loading}
-        quality={60} bundleWidth={36 * 13} bundleHeight={19 * 13} />
-      <h4 data-en="January 2025 progress report">Ocak 2025 ilerleme raporu</h4>
+      <BannerResmi piggyback={piggyback} class={BlogCss.PreviewBanner} width="100%"
+        loading={loading}
+        quality={60}
+        bundleWidth={36 * 13}
+        bundleHeight={19 * 13} />
+      <h4>{{
+        en: "January 2025 progress report", tr: "Ocak 2025 ilerleme raporu"
+      }}</h4>
       <Yazar ad="KimlikDAO" />
-      <div class="bly">{{
+      <div class={BlogCss.PreviewMetni}>{{
         en: "KimlikDAO January 2025 progress report will be published on January 31st.",
         tr: "KimlikDAO Ocak 2025 aylık ilerleme raporu 31 Ocak'ta yayıma alınacak."
       }}</div>
     </div>
-    <div class="blf">
-      <button class="bloku blmav" data-en="Read">Oku</button>
+    <div class={BlogCss.PreviewFooter}>
+      <button class={[BlogCss.OkuDüğmesi, BlogCss.Mavi]}>{{
+        en: "Read", tr: "Oku"
+      }}</button>
     </div>
   </a>
 );
+
+export default Jan25;
diff --git a/birim/blog/Yazar.jsx b/birim/blog/Yazar.jsx
new file mode 100644
index 00000000..53cd49ca
--- /dev/null
+++ b/birim/blog/Yazar.jsx
@@ -0,0 +1,18 @@
+import Css from "./birim.css";
+import BaşlıkCss from "/birim/başlık/birim.css";
+
+/**
+ * @param {{ ad: string }=} props
+ * @return {Promise<string>}
+ */
+const Yazar = ({ ad }) => (
+  <div class={Css.Yazar}>
+    <svg width={20} height={20}>
+      <circle cx={10} cy={10} r={10} fill="none" stroke="#ddd" stroke-width={0.5} />
+      <use href={`#${BaşlıkCss.Logomark}`} width={16} height={16} x={3.5} y={2} />
+    </svg>
+    <b class={Css.YazarAdı}>{ad}</b>
+  </div>
+);
+
+export default Yazar;
diff --git a/birim/blog/birim.css b/birim/blog/birim.css
index 9f3a6e81..5e9ca6c8 100644
--- a/birim/blog/birim.css
+++ b/birim/blog/birim.css
@@ -1,4 +1,7 @@
-/* Blog post */
+/**
+ * Blog post preview
+ * @name {Preview}
+ */
 .blp {
   padding: 0;
   margin: 0;
@@ -11,6 +14,10 @@
   justify-content: space-between;
 }
 
+/**
+ * Blog post preview banner
+ * @name {PreviewBanner}
+ */
 .blpp {
   width: 100%;
 }
@@ -21,6 +28,10 @@ h4 {
   margin: 18px 20px 15px;
 }
 
+/**
+ * Blog post yazar
+ * @name {Yazar}
+ */
 .bla {
   display: flex;
   align-items: center;
@@ -28,12 +39,18 @@ h4 {
   color: #666;
 }
 
-/* Blog post author name */
+/**
+ * Blog pos yazar adı
+ * @name {YazarAdı}
+ */
 .blan {
   margin-left: 5px;
 }
 
-/* Blog post yazı */
+/**
+ * Blog post preview metni
+ * @name {PreviewMetni}
+ */
 .bly {
   font-size: 16px;
   line-height: 1.4;
@@ -41,6 +58,10 @@ h4 {
   margin: 10px 20px;
 }
 
+/**
+ * Blog post preview footer
+ * @name {PreviewFooter}
+ */
 .blf {
   display: flex;
   flex-direction: row-reverse;
@@ -49,7 +70,10 @@ h4 {
   margin: 20px;
 }
 
-/* Progress container */
+/**
+ * Progress container
+ * @name {ProgressContainer}
+ */
 .blpc {
   display: flex;
   align-items: center;
@@ -61,7 +85,10 @@ h4 {
   position: relative;
 }
 
-/* Progress indicator */
+/**
+ * Progress indicator
+ * @name {ProgressIndicator}
+ */
 .blpi {
   height: 100%;
   position: absolute;
@@ -71,7 +98,10 @@ h4 {
   z-index: -1;
 }
 
-/* Progress indicator text */
+/**
+ * Progress indicator text
+ * @name {ProgressText}
+ */
 .blpit {
   margin-left: 7px;
   display: flex;
@@ -81,13 +111,20 @@ h4 {
   color: #555;
 }
 
-/** Oku düğmesi */
+/**
+ * Oku düğmesi
+ * @name {OkuDüğmesi}
+ */
 .bloku {
   border: none;
   border-radius: 10px;
   padding: 0 20px;
 }
 
+/**
+ * Oku düğmesi aktif
+ * @name {Mavi}
+ */
 .blmav {
   color: #3182ce;
   background-color: #eaf3fa
diff --git a/birim/blog/birim.js b/birim/blog/birim.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/birim/blog/eliptik-egriler/birim.css b/birim/blog/eliptik-egriler/birim.css
index ce6aa3e3..72061402 100644
--- a/birim/blog/eliptik-egriler/birim.css
+++ b/birim/blog/eliptik-egriler/birim.css
@@ -6,10 +6,24 @@
   background-color: rgba(244, 188, 253, 0.3);
 }
 
+/** @name {Dobby} */
+.dobby {}
+
+/** @export {RemainingBar} */
+#blee {}
+
+/**
+ * Dobby resmi
+ * @name {DobbyResmi}
+ */
 #bldob {
   border-radius: 11px;
 }
 
+/**
+ * Yeşil düğme
+ * @name {Yeşil}
+ */
 .blyes {
   color: #066a52;
   background-color: #cff4ea;
diff --git a/birim/blog/eliptik-egriler/birim.js b/birim/blog/eliptik-egriler/birim.js
deleted file mode 100644
index d403e64d..00000000
--- a/birim/blog/eliptik-egriler/birim.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { RemainingBar } from "./birim.jsx";
-import { AğBilgileri } from "/birim/ağlar/birim";
-import jsonrpc from "/lib/api/jsonrpc";
-import { ChainId } from "/lib/crosschain/chains";
-import { address } from "/lib/ethereum/provider";
-
-const USDC_AVALANCHE = "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E";
-/** @const {string} */
-const DEV_FUND = "0x79883D9aCBc4aBac6d2d216693F66FcC5A0BcBC1".toLowerCase();
-/** @const {string} */
-const ODUL = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9"
-
-jsonrpc.call("https://" + AğBilgileri[ChainId.xa86a].rpcUrl, "eth_call", [
-  /** @type {!eth.Transaction} */({
-    to: USDC_AVALANCHE,
-    data: "0xdd62ed3e" + address(DEV_FUND) + address(ODUL)
-  }), "latest"
-]).then((izin) => {
-  const kalan = parseInt(izin.slice(-36), 16);
-  RemainingBar.innerText = kalan;
-  RemainingBar.parentElement.previousElementSibling.style.width = kalan * 180 / 50000 + "px";
-});
diff --git a/birim/blog/eliptik-egriler/birim.jsx b/birim/blog/eliptik-egriler/birim.jsx
index 56ba3b3b..424e41d5 100644
--- a/birim/blog/eliptik-egriler/birim.jsx
+++ b/birim/blog/eliptik-egriler/birim.jsx
@@ -1,38 +1,81 @@
 import BlogCss from "../birim.css";
-import Yazar from "../yazar/birim";
+import Yazar from "../Yazar";
 import Banner from "./banner.png";
 import Css from "./birim.css";
-import dom from "/lib/util/dom";
+import { AğBilgileri } from "/birim/ağlar/birim";
 import DobbyResmi from "/birim/paralar/DOBBY.png";
+import jsonrpc from "/lib/api/jsonrpc";
+import { ChainId } from "/lib/crosschain/chains";
+import { address } from "/lib/ethereum/provider";
+import "/lib/ethereum/transaction.d";
+import dom from "/lib/util/dom";
 
 /** @const {!HTMLSpanElement} */
-export const RemainingBar = dom.span("blee");
+const RemainingBar = dom.span(Css.RemainingBar);
+/** @const {string} */
+const USDC_AVALANCHE = "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E";
+/** @const {string} */
+const DEV_FUND = "0x79883D9aCBc4aBac6d2d216693F66FcC5A0BcBC1".toLowerCase();
+/** @const {string} */
+const ODUL = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9"
+
+/**
+ * @param {{ href: string, piggyback: string }=} props
+ * @return {Promise<string>}
+ */
+const EliptikEğriler = ({ href, piggyback }) => {
+  jsonrpc.call("https://" + AğBilgileri[ChainId.xa86a].rpcUrl, "eth_call", [
+    /** @type {!eth.Transaction} */({
+      to: USDC_AVALANCHE,
+      data: "0xdd62ed3e" + address(DEV_FUND) + address(ODUL)
+    }), "latest"
+  ]).then((izin) => {
+    /** @const {number} */
+    const kalan = parseInt(izin.slice(-36), 16);
+    RemainingBar.innerText = "" + kalan;
+    RemainingBar.parentElement.previousElementSibling.style.width = kalan * 180 / 50000 + "px";
+  });
 
-export default ({ href }) =>
-  <a href={href} class="blp">
-    <Css />
-    <BlogCss />
-    <div>
-      <Banner class="blpp" width="100%"
-        quality={60} bundleWidth={36 * 13} bundleHeight={19 * 13} />
-      <h4 data-en="Elliptic curves and their applications in crypto">Eliptik eğriler ve kriptoda kullanımı</h4>
-      <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
-      <div class="bly">{{
-        en: "Elliptic curves are one of the most important primitives in modern cryptography. " +
-          "This article will delve into elliptic curves, with a special emphasis on their properties used in digital signatures. No previous knowledge of the subject is assumed.",
-        tr: "Modern kriptografinin temel yapıtaşlarından biri olan eliptik eğrileri sıfırdan ele alıp dijital imzaların oluşturulmasında kullanılan özelliklerini inceleyeceğiz."
-      }}</div>
-    </div>
-    <div class="blf">
-      <button class="bloku blyes" data-en="Read">Oku</button>
-      <div class="blpc dobby">
-        <div class="blpi dobby" style="width:180px"></div>
-        <div class="blpit">
-          <DobbyResmi width="22" height="22" id="bldob" />{" "}
-          <RemainingBar>{{ en: "50,000", tr: "50.000" }}</RemainingBar>/{{
-            en: "50,000", tr: "50.000"
-          }} DOBBY
+  return (
+    <a href={href} class={BlogCss.Preview}>
+      <Css />
+      <BlogCss />
+      <div>
+        <Banner class={BlogCss.PreviewBanner} width="100%" quality={60}
+          piggyback={piggyback}
+          bundleWidth={36 * 13}
+          bundleHeight={19 * 13} />
+        <h4>{{
+          en: "Elliptic curves and their applications in crypto",
+          tr: "Eliptik eğriler ve kriptoda kullanımı"
+        }}</h4>
+        <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
+        <div class={BlogCss.PreviewMetni}>{{
+          en: <>Elliptic curves are one of the most important primitives in modern
+            cryptography. This article will delve into elliptic curves, with a special
+            emphasis on their properties used in digital signatures.
+            No previous knowledge of the subject is assumed.</>,
+          tr: <>Modern kriptografinin temel yapıtaşlarından biri olan eliptik eğrileri
+            sıfırdan ele alıp dijital imzaların oluşturulmasında kullanılan
+            özelliklerini inceleyeceğiz.</>
+        }}</div>
+      </div>
+      <div class={BlogCss.PreviewFooter}>
+        <button class={[BlogCss.OkuDüğmesi, Css.Yeşil]}>{{
+          en: "Read", tr: "Oku"
+        }}</button>
+        <div class={[BlogCss.ProgressContainer, Css.Dobby]}>
+          <div class={[BlogCss.ProgressIndicator, Css.Dobby]} style="width:180px"></div>
+          <div class={BlogCss.ProgressText}>
+            <DobbyResmi width={22} height={22} id={Css.DobbyResmi} piggyback={piggyback} />{" "}
+            <RemainingBar>{{ en: "50,000", tr: "50.000" }}</RemainingBar>/{{
+              en: "50,000", tr: "50.000"
+            }} DOBBY
+          </div>
         </div>
       </div>
-    </div>
-  </a>;
+    </a>
+  );
+}
+
+export default EliptikEğriler;
diff --git a/birim/blog/eliptik-imza/birim.css b/birim/blog/eliptik-imza/birim.css
index e7d33e4d..6c54bcc4 100644
--- a/birim/blog/eliptik-imza/birim.css
+++ b/birim/blog/eliptik-imza/birim.css
@@ -6,7 +6,11 @@
   background-color: rgba(42, 157, 143, 0.1);
 }
 
+/** @name {Mor} */
 .blmor {
   color: rgb(88, 84, 214);
   background-color: #EDE6FC
 }
+
+/** @export {RemainingBar} */
+#blei {}
\ No newline at end of file
diff --git a/birim/blog/eliptik-imza/birim.js b/birim/blog/eliptik-imza/birim.js
deleted file mode 100644
index edf95d34..00000000
--- a/birim/blog/eliptik-imza/birim.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { RemainingBar } from "./birim.jsx";
-import { AğBilgileri } from "/birim/ağlar/birim";
-import jsonrpc from "/lib/api/jsonrpc";
-import { ChainId } from "/lib/crosschain/chains";
-import { address } from "/lib/ethereum/provider";
-
-/** @const {string} */
-const DEV_FUND = "0x79883D9aCBc4aBac6d2d216693F66FcC5A0BcBC1".toLowerCase();
-/** @const {string} */
-const ODUL = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9"
-
-/**
- * USDT contract address on Arbitrum One.
- *
- * @const {string}
- */
-const USDT_ARB = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9";
-
-jsonrpc.call("https://" + AğBilgileri[ChainId.xa4b1].rpcUrl, "eth_call", [
-  /** @type {!eth.Transaction} */({
-    to: USDT_ARB,
-    data: "0xdd62ed3e" + address(DEV_FUND) + address(ODUL)
-  }), "latest"
-]).then((izin) => {
-  const kalan = parseInt(izin.slice(-36), 16);
-  RemainingBar.innerText = kalan;
-  RemainingBar.parentElement.previousElementSibling.style.width = kalan * 180 / 5000 + "px";
-});
diff --git a/birim/blog/eliptik-imza/birim.jsx b/birim/blog/eliptik-imza/birim.jsx
index 24162fd1..d339bc5c 100644
--- a/birim/blog/eliptik-imza/birim.jsx
+++ b/birim/blog/eliptik-imza/birim.jsx
@@ -1,35 +1,74 @@
 import Banner from "kastro:./banner.svg.jsx";
 import BlogCss from "../birim.css";
-import Yazar from "../yazar/birim";
+import Yazar from "../Yazar";
 import Css from "./birim.css";
+import { AğBilgileri } from "/birim/ağlar/birim";
 import USDT from "/birim/paralar/USDT.svg";
+import jsonrpc from "/lib/api/jsonrpc";
+import { ChainId } from "/lib/crosschain/chains";
+import { address } from "/lib/ethereum/provider";
+import "/lib/ethereum/transaction.d";
 import dom from "/lib/util/dom";
 
 /** @const {!HTMLSpanElement} */
-export const RemainingBar = dom.span("blei");
+const RemainingBar = dom.span(Css.RemainingBar);
+/** @const {string} */
+const DEV_FUND = "0x79883D9aCBc4aBac6d2d216693F66FcC5A0BcBC1".toLowerCase();
+/** @const {string} */
+const ODUL = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9"
+/**
+ * USDT contract address on Arbitrum One.
+ *
+ * @const {string}
+ */
+const USDT_ARB = "0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9";
 
-export default ({ href, piggyback }) => (
-  <a href={href} class="blp">
-    <Css />
-    <BlogCss />
-    <div>
-      <Banner piggyback={piggyback} class="blpp" inline />
-      <h4 data-en="Elliptic curve digital signature algorithm">Eliptik eğri imza algoritması</h4>
-      <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
-      <div class="bly">{{
-        en: "Cryptocurrencies such as Bitcoin and Ether can only be spent by their owners thanks to ECDSA (elliptic curve digital signature algorithm). In this article, we’ll construct ECDSA by starting from a simple prover-challenger game and gradually extending it. We assume some familiarity with elliptic curves.",
-        tr: "Bitcoin ve Ether gibi kripto paraların sadece sahibi tarafından harcanabilmesini ECDSA sağlıyor. ECDSA’yı iki kişinin oynadığı bir kanıtlama oyunuyla başlayıp adım adım ilerleyerek oluşturacağız. Temel eliptik eğri bilgisi gerektirir."
-      }}</div>
-    </div>
-    <div class="blf">
-      <button class="bloku blmor" data-en="Read">Oku</button>
-      <div class="blpc usdt">
-        <div class="blpi usdt" style="width:180px"></div>
-        <div class="blpit">
-          <USDT inline width="22" height="22" />{" "}
-          <RemainingBar>{{ en: "5,000", tr: "5.000" }}</RemainingBar>/{{ en: "5,000", tr: "5.000" }} USDT
+/**
+ * @param {{ href: string}=} props
+ * @return {Promise<string>}
+ */
+const EliptikImza = ({ href }) => {
+  jsonrpc.call("https://" + AğBilgileri[ChainId.xa4b1].rpcUrl, "eth_call", [
+    /** @type {!eth.Transaction} */({
+      to: USDT_ARB,
+      data: "0xdd62ed3e" + address(DEV_FUND) + address(ODUL)
+    }), "latest"
+  ]).then((izin) => {
+    const kalan = parseInt(izin.slice(-36), 16);
+    RemainingBar.innerText = kalan;
+    RemainingBar.parentElement.previousElementSibling.style.width = kalan * 180 / 5000 + "px";
+  });
+
+  return (
+    <a href={href} class={BlogCss.Preview}>
+      <Css />
+      <BlogCss />
+      <div>
+        <Banner class={BlogCss.PreviewBanner} inline />
+        <h4>{{
+          en: "Elliptic curve digital signature algorithm",
+          tr: "Eliptik eğri imza algoritması"
+        }}</h4>
+        <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
+        <div class={BlogCss.PreviewMetni}>{{
+          en: "Cryptocurrencies such as Bitcoin and Ether can only be spent by their owners thanks to ECDSA (elliptic curve digital signature algorithm). In this article, we’ll construct ECDSA by starting from a simple prover-challenger game and gradually extending it. We assume some familiarity with elliptic curves.",
+          tr: "Bitcoin ve Ether gibi kripto paraların sadece sahibi tarafından harcanabilmesini ECDSA sağlıyor. ECDSA’yı iki kişinin oynadığı bir kanıtlama oyunuyla başlayıp adım adım ilerleyerek oluşturacağız. Temel eliptik eğri bilgisi gerektirir."
+        }}</div>
+      </div>
+      <div class={BlogCss.PreviewFooter}>
+        <button class={[BlogCss.OkuDüğmesi, Css.Mor]}>{{
+          en: "Read", tr: "Oku"
+        }}</button>
+        <div class={[BlogCss.ProgressContainer, "usdt"]}>
+          <div class={[BlogCss.ProgressIndicator, "usdt"]} style="width:180px"></div>
+          <div class={[BlogCss.ProgressText, "usdt"]}>
+            <USDT inline width={22} height={22} />{" "}
+            <RemainingBar>{{ en: "5,000", tr: "5.000" }}</RemainingBar>/{{ en: "5,000", tr: "5.000" }} USDT
+          </div>
         </div>
       </div>
-    </div>
-  </a >
-);
+    </a >
+  );
+};
+
+export default EliptikImza;
diff --git a/birim/blog/mina-berkeley/banner.png b/birim/blog/mina-appchain/banner.png
similarity index 100%
rename from birim/blog/mina-berkeley/banner.png
rename to birim/blog/mina-appchain/banner.png
diff --git a/birim/blog/mina-berkeley/birim.css b/birim/blog/mina-appchain/birim.css
similarity index 69%
rename from birim/blog/mina-berkeley/birim.css
rename to birim/blog/mina-appchain/birim.css
index 9412175e..b46df38c 100644
--- a/birim/blog/mina-berkeley/birim.css
+++ b/birim/blog/mina-appchain/birim.css
@@ -6,7 +6,11 @@
   background-color: #f5f5fd;
 }
 
+/** @name {Turuncu} */
 .bltur {
   color: #ff603b;
   background-color: #ffdfd8
-}
\ No newline at end of file
+}
+
+/** @export {RemainingBar} */
+#blmb {}
\ No newline at end of file
diff --git a/birim/blog/mina-appchain/birim.jsx b/birim/blog/mina-appchain/birim.jsx
new file mode 100644
index 00000000..4b9a9b94
--- /dev/null
+++ b/birim/blog/mina-appchain/birim.jsx
@@ -0,0 +1,62 @@
+import Yazar from "../Yazar";
+import Banner from "./banner.png";
+import Css from "./birim.css";
+import { AğBilgileri } from "/birim/ağlar/birim";
+import BlogCss from "/birim/blog/birim.css";
+import MINA from "/birim/paralar/MINA.png";
+import { ChainId } from "/lib/crosschain/chains";
+import dom from "/lib/util/dom";
+
+/** @const {!HTMLSpanElement} */
+const RemainingBar = dom.span(Css.RemainingBar);
+/** @const {string} */
+const ZkAppAddress = "B62qmuv9skuJS8564ZptVbp9NmMR5a1wjMaFDEUFcmBciZuekQJZ4gD";
+
+/**
+ * @param {{ href: string, piggyback: string }=} props
+ * @return {Promise<string>}
+ */
+const MinaAppchain = ({ href, piggyback }) => {
+  fetch(`https://${AğBilgileri[ChainId.MinaTestnet].rpcUrl}/accounts/${ZkAppAddress}`)
+    .then((res) => res.json())
+    .then((data) => {
+      /** @const {number} */
+      const kalan = +data["account"]["balance"]["total"] | 0;
+      RemainingBar.innerText = kalan;
+      RemainingBar.parentElement.previousElementSibling.style.width =
+        (kalan * 180) / 5000 + "px";
+    });
+  return (
+    <a href={href} class={BlogCss.Preview}>
+      <BlogCss />
+      <Css />
+      <div>
+        <Banner class={BlogCss.PreviewBanner} width="100%" piggyback={piggyback} />
+        <h4>{{
+          en: "KimlikDAO Mina Appchain",
+          tr: "KimlikDAO Mina Appchain’i"
+        }}</h4>
+        <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
+        <div class={BlogCss.PreviewMetni}>{{
+          en: "Learn about Mina's Berkeley upgrade, interact with your first zkApp and earn 10 MINAs. In this article, we'll learn how to create a Mina wallet, how to fund it and use it to interact with a zkApp. Each participant will be awarded 10 MINAs.",
+          tr: "Mina Berkeley güncellemesini öğren ve 10 MINA kazan! Bu makalede Mina Berkeley güncellemesini inceleyecek, Mina cüzdanı kurmayı ve para aktarmayı öğreneceğiz. Bu cüzdanla ilk zkApp'imizle etkilşime girip 10 MINA kazancağız."
+        }}</div>
+      </div>
+      <div class={BlogCss.PreviewFooter}>
+        <button class={[BlogCss.OkuDüğmesi, Css.Turuncu]}>{{
+          en: "Read",
+          tr: "Oku"
+        }}</button>
+        <div class={[BlogCss.ProgressContainer, "mina"]}>
+          <div class={[BlogCss.ProgressIndicator, "mina"]} style="width:180px"></div>
+          <div class={[BlogCss.ProgressText, "mina"]}>
+            <MINA width={22} height={22} />{" "}
+            <RemainingBar data-en="5,000">5.000</RemainingBar>/{{ en: "5,000", tr: "5.000" }} MINA
+          </div>
+        </div>
+      </div>
+    </a>
+  );
+}
+
+export default MinaAppchain;
diff --git a/birim/blog/mina-berkeley/birim.js b/birim/blog/mina-berkeley/birim.js
deleted file mode 100644
index 08ab6621..00000000
--- a/birim/blog/mina-berkeley/birim.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { RemainingBar } from "./birim.jsx";
-import { AğBilgileri } from "/birim/ağlar/birim";
-import { ChainId } from "/lib/crosschain/chains";
-
-/** @const {string} */
-const ZkAppAddress = "B62qmuv9skuJS8564ZptVbp9NmMR5a1wjMaFDEUFcmBciZuekQJZ4gD";
-
-fetch(`https://${AğBilgileri[ChainId.MinaTestnet].rpcUrl}/accounts/${ZkAppAddress}`)
-  .then((res) => res.json())
-  .then((data) => {
-    const kalan = +data["account"]["balance"]["total"] | 0;
-    RemainingBar.innerText = kalan;
-    RemainingBar.parentElement.previousElementSibling.style.width =
-      (kalan * 180) / 5000 + "px";
-  });
diff --git a/birim/blog/mina-berkeley/birim.jsx b/birim/blog/mina-berkeley/birim.jsx
deleted file mode 100644
index a11e71e8..00000000
--- a/birim/blog/mina-berkeley/birim.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Banner from "./banner.png";
-import Css from "./birim.css";
-import BlogCss from "/birim/blog/birim.css";
-import Yazar from "/birim/blog/yazar/birim";
-import MINA from "/birim/paralar/MINA.png";
-
-/** @const {!HTMLSpanElement} */
-export const RemainingBar = dom.span("blmb");
-
-export default ({ href }) => (
-  <a href={href} class="blp">
-    <BlogCss />
-    <Css />
-    <div>
-      <Banner class="blpp" width="100%" />
-      <h4 data-en="Mina Berkeley upgrade">Mina Berkeley güncellemesi</h4>
-      <Yazar ad={{ tr: "KimlikDAO öğren & kazan", en: "KimlikDAO learn & earn" }} />
-      <div class="bly">{{
-        en: "Learn about Mina's Berkeley upgrade, interact with your first zkApp and earn 10 MINAs. In this article, we'll learn how to create a Mina wallet, how to fund it and use it to interact with a zkApp. Each participant will be awarded 10 MINAs.",
-        tr: "Mina Berkeley güncellemesini öğren ve 10 MINA kazan! Bu makalede Mina Berkeley güncellemesini inceleyecek, Mina cüzdanı kurmayı ve para aktarmayı öğreneceğiz. Bu cüzdanla ilk zkApp'imizle etkilşime girip 10 MINA kazancağız."
-      }}</div>
-    </div>
-    <div class="blf">
-      <button class="bloku bltur" data-en="Read">Oku</button>
-      <div class="blpc mina">
-        <div class="blpi mina" style="width:180px"></div>
-        <div class="blpit">
-          <MINA width="22" height="22" />{" "}
-          <RemainingBar data-en="5,000">5.000</RemainingBar>/{{ en: "5,000", tr: "5.000" }} MINA
-        </div>
-      </div>
-    </div>
-  </a>
-);
diff --git a/birim/blog/yazar/birim.jsx b/birim/blog/yazar/birim.jsx
deleted file mode 100644
index f404bbae..00000000
--- a/birim/blog/yazar/birim.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export default ({ ad }) => (
-  <div class="bla">
-    <svg width={20} height={20}>
-      <circle cx={10} cy={10} r={10} fill="none" stroke="#ddd" stroke-width="0.5" />
-      <use href="#bak" width={16} height={16} x="3.5" y="2" />
-    </svg>
-    <b class="blan">{ad}</b>
-  </div>
-);
diff --git "a/birim/c\303\274zdan/ba\304\237lant\304\261lar.jsx" "b/birim/c\303\274zdan/ba\304\237lant\304\261lar.jsx"
new file mode 100644
index 00000000..30cfd77f
--- /dev/null
+++ "b/birim/c\303\274zdan/ba\304\237lant\304\261lar.jsx"
@@ -0,0 +1,119 @@
+import Css from "./birim.css";
+import { CoreBağlantısı, MetaMaskBağlantısı, RabbyBağlantısı } from "./evmBağlantısı";
+import { AuroConnection as AuroBağlantısı } from "./minaBağlantısı";
+import { ChainId } from "/lib/crosschain/chains";
+import { Provider } from "/lib/crosschain/provider";
+
+/** @enum {string} */
+const BağlantıAdı = {
+  Core: "co",
+  Rabby: "ra",
+  MetaMask: "mm",
+  Auro: "au",
+};
+
+/** @const {!Object<string, !Provider>} */
+const Bağlantılar = {
+  [BağlantıAdı.Core]: CoreBağlantısı,
+  [BağlantıAdı.Rabby]: RabbyBağlantısı,
+  [BağlantıAdı.MetaMask]: MetaMaskBağlantısı,
+  [BağlantıAdı.Auro]: AuroBağlantısı,
+};
+
+/** @type {function(ChainId)} */
+let AğDeğişti;
+/** @type {function(!Array<string>)} */
+let AdresDeğişti;
+
+/**
+ * @type {!Provider}
+ * @const
+ */
+const BoşBağlantı = /** @type {!Provider} */({
+  /**
+   * @override
+   *
+   * @return {boolean}
+   */
+  initIfAvailable: () => true,
+
+  /**
+   * @return {string}
+   */
+  downloadURL: () => "",
+
+  /**
+   * @override
+   *
+   * @param {ChainId} chain
+   * @param {function(ChainId)} chainChanged
+   * @param {function(!Array<string>)} addressChanged
+   * @param {boolean=} onlyIfApproved
+   * @return {!Promise<void>}
+   */
+  connect: (chain, chainChanged, addressChanged, onlyIfApproved) => {
+    AğDeğişti = chainChanged;
+    AdresDeğişti = addressChanged;
+    return Promise.resolve();
+  },
+
+  /**
+   * @override
+   */
+  disconnect() { },
+
+  /**
+   * @override
+   *
+   * @param {ChainId} ağ
+   * @return {!Promise<void>}
+   */
+  switchChain(ağ) {
+    AğDeğişti(ağ);
+    return Promise.resolve();
+  },
+
+  /**
+   * @override
+   *
+   * @param {string} message
+   * @param {string} address
+   * @return {!Promise<string>}
+   */
+  signMessage: (message, address) => Promise.reject(),
+
+  /**
+   * @override
+   *
+   * @param {ChainId} _
+   */
+  isChainSupported: (_) => true
+});
+
+
+/**
+ * @param {string} ad
+ * @return {string} url
+ */
+const bağlantıResmi = (ad) => `birim/cüzdan/img/${ad.split(" ")[0].toLowerCase()}.svg`;
+
+/**
+ * @param {{ idx: BağlantıAdı, name: string }=} props
+ * @return {Promise<string>}
+ */
+const Bağlantı = ({ idx, name }) => (
+  <li id={Css.Kök + idx}>
+    <Image src={bağlantıResmi(name)} width={32} height={32} />
+    <div class={Css.CüzdanIşığı}></div> {name}<span class={Css.Cüzdanİndir} style="display:none">{{
+      en: "GET",
+      tr: "İNDİR"
+    }}</span>
+  </li>
+);
+
+export {
+  Bağlantı,
+  BağlantıAdı,
+  Bağlantılar,
+  BoşBağlantı
+};
diff --git "a/birim/c\303\274zdan/birim.css" "b/birim/c\303\274zdan/birim.css"
index 3e1fa4ee..0c929eb5 100644
--- "a/birim/c\303\274zdan/birim.css"
+++ "b/birim/c\303\274zdan/birim.css"
@@ -83,6 +83,9 @@
   right: 0;
 }
 
+/** @export {SağMenü} */
+#cuep {}
+
 /**
  * Bağlantı listesi
  * @export {BağlantıListesi}
diff --git "a/birim/c\303\274zdan/birim.js" "b/birim/c\303\274zdan/birim.js"
deleted file mode 100644
index ff66e9c7..00000000
--- "a/birim/c\303\274zdan/birim.js"
+++ /dev/null
@@ -1,421 +0,0 @@
-import Css from "./birim.css";
-import {
-  AdresDüğmesi,
-  AğDüğmesi,
-  CüzdanAdresi,
-  DebankLinki,
-  Menü,
-  SağPanel
-} from "./birim.jsx";
-import { CoreBağlantısı, MetaMaskBağlantısı, RabbyBağlantısı } from "./evmBağlantısı";
-import { AuroConnection as AuroBağlantısı } from "./minaBağlantısı";
-import { AğBilgileri } from "/birim/ağlar/birim";
-import { HostUrl } from "/crate";
-import { ChainGroup, ChainGroups, ChainId } from "/lib/crosschain/chains";
-import { Provider } from "/lib/crosschain/provider";
-import "/lib/ethereum/ERC721Unlockable.d";
-import KPass from "/lib/ethereum/KPassLite";
-import ipfs from "/lib/node/ipfs";
-import dom from "/lib/util/dom";
-import { hexten } from "/lib/util/çevir";
-
-/** @const {string} */
-const KIMLIKDAO_IPFS_URL = "//ipfs.kimlikdao.org";
-/** @define {ChainId} */
-const DefaultChain = ChainId.x1;
-/** @define {!Array<ChainId>} */
-const Chains = [ChainId.x1, ChainId.MinaMainnet, ChainId.xa4b1, ChainId.x89, ChainId.xa86a, ChainId.x38];
-
-/**
- * @type {!Provider}
- * @const
- */
-const BoşBağlantı = /** @type {!Provider} */({
-  /**
-   * @override
-   *
-   * @return {boolean}
-   */
-  initIfAvailable: () => true,
-
-  /**
-   * @return {string}
-   */
-  downloadURL: () => "",
-
-  /**
-   * @override
-   *
-   * @param {ChainId} chain
-   * @param {function(ChainId)} chainChanged
-   * @param {function(!Array<string>)} addressChanged
-   * @param {boolean=} onlyIfApproved
-   * @return {!Promise<void>}
-   */
-  connect: (chain, chainChanged, addressChanged, onlyIfApproved) =>
-    Promise.resolve(),
-
-  /**
-   * @override
-   */
-  disconnect() { },
-
-  /**
-   * @override
-   *
-   * @param {ChainId} ağ
-   * @return {!Promise<void>}
-   */
-  switchChain(ağ) {
-    ağDeğişti(ağ);
-    return Promise.resolve();
-  },
-
-  /**
-   * @override
-   *
-   * @param {string} message
-   * @param {string} address
-   * @return {!Promise<string>}
-   */
-  signMessage: (message, address) => Promise.reject(),
-
-  /**
-   * @override
-   *
-   * @param {ChainId} _
-   */
-  isChainSupported: (_) => true
-});
-
-/**
- * @const {!Object<string, !Provider>}
- */
-const Bağlantılar = {
-  "co": CoreBağlantısı,
-  "ra": RabbyBağlantısı,
-  "mm": MetaMaskBağlantısı,
-  "au": AuroBağlantısı,
-};
-/** @const {!Set<ChainId>} */
-const Ağlar = new Set(Chains);
-/** @const {string} */
-const BağlaMetni = AdresDüğmesi.innerText;
-/** @type {!Array<function(?string)>} */
-const AdresDeğişince = [];
-/** @const {!Array<function()>} */
-const Kopunca = [];
-/** @const {!Array<function(ChainId)>} */
-const AğDeğişince = [];
-/** @const {!Array<function(?string, Promise<!eth.ERC721Unlockable>)>} */
-const KPassDeğişince = [];
-/** @const {!Array<function(!Provider)>} */
-const BağlantıDeğişince = [];
-/** @type {!Provider} */
-let Bağlı = BoşBağlantı;
-/** @type {?string} */
-let Adres = null;
-/** @type {ChainId} */
-let Ağ = DefaultChain;
-/** @type {?string} */
-let KPassYokResmi;
-
-/**
- * @return {ChainId} Seçili ağ
- */
-const ağ = () => Ağ;
-
-/**
- * @return {?string} Seçili adres veya adres seçili değilse null.
- */
-const adres = () => Adres;
-
-/**
- * @return {!Provider}
- */
-const bağlantı = () => Bağlı;
-
-/**
- * Verilen bir EVM adresini UI'da hızlıca göstermeye uygun hale getirir.
- *
- * @param {string} adres EVM adresi.
- * @return {string} Arabirimde gösterilecek isim. EVM adresinin kısaltılmış
- *                  hali.
- */
-const hızlıArabirimAdı = (adres) => adres.slice(0, 6) + "..." + adres.slice(-4);
-
-/**
- * @param {string} hesap EVM adresi.
- * @return {Promise<string>} Arabirimde gösterilecek isim. EVM adresinin
- *                           kısaltılmış hali veya ENS / avvy domains adı.
- *
- * TODO(KimlikDAO-bot): ENS lookup, avvy domains lookup
- */
-const nihaiArabirimAdı = (hesap) => new Promise((_) => null);
-
-/**
- * @param {ChainId} yeniAğ harf dizisi olarak yeni ağ adı.
- */
-const ağDeğişti = (yeniAğ) => {
-  if (!Ağlar.has(yeniAğ)) {
-    // Kullanıcı desteklemediğimiz bir ağa geçerse (uzantı cüzdanı
-    // arabiriminden), en son seçili ağa geri geçme isteği yolluyoruz.
-    // Eğer cüzdanı cookie'den bağlamışsak, son seçili ağ bulunduğumuz
-    // sayfada desteklenmiyor olabilir; bu durumda `ağSeçildi()` cüzdanın
-    // kopmasını sağlıyor.
-    ağSeçildi(Ağ);
-  } else if (yeniAğ != Ağ) {
-    dom.adla(Css.AğListesi + Ağ).classList.remove("sel");
-    dom.adla(Css.AğListesi + yeniAğ).classList.add("sel");
-    AğDüğmesi.replaceChild(
-      dom.adla(Css.AğListesi + yeniAğ).firstElementChild.cloneNode(true),
-      AğDüğmesi.firstElementChild);
-    /** @const {boolean} */
-    const ağGrubuDeğişti = !Ağ.startsWith(yeniAğ.slice(0, 2));
-    Ağ = yeniAğ;
-    if (ağGrubuDeğişti)
-      bağlantıSeçiciGöster();
-    kpassDeğişti();
-    for (const f of AğDeğişince) f(yeniAğ);
-  }
-}
-
-const kpassDeğişti = () => {
-  if (!Adres) return;
-  /** @const {!HTMLDivElement} */
-  const kpassDüğmesi = dom.div(Css.KPassDüğmesi);
-  /** @const {!HTMLImageElement} */
-  const kpassResmi = dom.img(Css.ProfilResmi);
-
-  /** @const {ChainId} */
-  const ağ = Ağ;
-  /** @const {!eth.Provider} */
-  const provider = /** @type {!eth.Provider} */(Bağlı.provider);
-  /** @const {string} */
-  const adres = Adres;
-
-  KPass.handleOf(provider, ağ, Adres).then((cidHex) => {
-    if (ağ != Ağ || adres != Adres) return;
-    /** @const {boolean} */
-    const varMı = cidHex.replaceAll("0", "") != "x";
-    kpassDüğmesi.innerText = varMı
-      ? dom.i18n({ tr: "KPASS’İNİ İNCELE", en: "VIEW KPASS" })
-      : dom.i18n({ tr: "KPASS AL", en: "MINT KPASS" });
-    kpassDüğmesi.onclick = kpassResmi.onclick = () =>
-      window.location.href = "//kimlikdao.org/" + (varMı
-        ? dom.i18n({ tr: "kpassim", en: "kpass" })
-        : dom.i18n({ tr: "al", en: "mint" }));
-    if (!varMı && KPassYokResmi) kpassResmi.src = KPassYokResmi;
-    /** @const {Promise<!eth.ERC721Unlockable>} */
-    const dosyaSözü = varMı
-      ? ipfs.cidBytetanOku(KIMLIKDAO_IPFS_URL, hexten(cidHex.slice(2)))
-        .then((/** @type {string} */ dosya) => {
-          if (ağ != Ağ || adres != Adres) return Promise.reject();
-          const kpassDosyası = /** @type {!eth.ERC721Unlockable} */(JSON.parse(dosya))
-          KPassYokResmi ||= kpassResmi.src;
-          kpassResmi.src = kpassDosyası.image;
-          return kpassDosyası;
-        })
-      : null;
-    for (const f of KPassDeğişince) f(cidHex, dosyaSözü);
-  })
-}
-
-const kopar = () => {
-  Adres = null;
-  AdresDüğmesi.innerText = BağlaMetni;
-  bağlantıSeçildi("", BoşBağlantı);
-  dom.gizle(SağPanel);
-  bağlantıSeçiciGöster();
-  for (const f of Kopunca) f();
-}
-
-/**
- * @param {!Array<string>} adresler cüzdandan gelen adresler dizisi.
- */
-const adresDeğişti = (adresler) => {
-  if (!adresler || !adresler.length)
-    kopar();
-  else if (adresler[0] != Adres) {
-    /** @const {?string} */
-    const eskiAdres = Adres;
-    Adres = adresler[0];
-    CüzdanAdresi.firstElementChild.innerText =
-      AdresDüğmesi.innerText = hızlıArabirimAdı(Adres);
-
-    nihaiArabirimAdı(Adres).then((ad) => {
-      if (ad) AdresDüğmesi.innerText = ad;
-    });
-    kpassDeğişti();
-    if (!eskiAdres) {
-      dom.gösterGizle(DebankLinki, Ağ.startsWith(ChainGroup.EVM));
-      bağlantıSeçiciGizle();
-      dom.göster(SağPanel);
-    }
-    for (const f of AdresDeğişince) f(Adres);
-  }
-}
-
-/**
- * @param {function(ChainId)} f Ağ değişince yeni ağın adıyla çağırılacak
- *                             fonksiyon.
- */
-const ağDeğişince = (f) => AğDeğişince.push(f);
-
-/**
- * @param {function(?string)} f Adres değişince yeni adresle beraber çağırılacak
- *                              fonksiyon.
- */
-const adresDeğişince = (f) => AdresDeğişince.push(f);
-
-/**
- * @param {function()} f Bağlantı kopunca çağırılacak yordam.
- */
-const kopunca = (f) => Kopunca.push(f);
-
-/**
- * @param {function(?string, Promise<!eth.ERC721Unlockable>)} f
- */
-const kpassDeğişince = (f) => {
-  KPassDeğişince.push(f);
-  Kopunca.push(() => f(null, null));
-}
-
-/**
- * @param {function(!Provider)} f Bağlantı değişince yeni bağlantıyla çağırılacak
- *                                yordam.
- */
-const bağlantıDeğişince = (f) => BağlantıDeğişince.push(f);
-
-/**
- * @param {ChainId} ağ
- */
-const ağSeçildi = (ağ) => {
-  if (!Bağlı.isChainSupported(ağ)) kopar();
-  Bağlı.switchChain(ağ);
-}
-
-/**
- * @param {string} bağlantıAdı
- * @param {!Provider} bağlantı
- */
-const bağlantıSeçildi = (bağlantıAdı, bağlantı) => {
-  /** @const {!Provider} */
-  const eskiBağlantı = Bağlı;
-  if (eskiBağlantı == bağlantı) return;
-  Bağlı = bağlantı;
-  bağlantı.connect(Ağ, ağDeğişti, adresDeğişti)
-    .then(() => {
-      document.cookie = `cu=${bağlantıAdı};domain=.${HostUrl.slice(8)};SameSite=Strict;max-age=` + 1e6;
-      eskiBağlantı.disconnect();
-      for (const f of BağlantıDeğişince) f(bağlantı);
-    })
-    .catch((e) => {
-      console.log(e);
-      Bağlı = eskiBağlantı;
-    });
-}
-
-const bağlantıSeçiciGizle = () => {
-  for (const grup of ChainGroups)
-    dom.adlaGizle(Css.BağlantıListesi + grup);
-}
-
-const bağlantıSeçiciGöster = () => {
-  /** @const {ChainGroup} */
-  const ağGrubu = /** @type {ChainGroup} */(Ağ.slice(0, 2));
-  for (const grup of ChainGroups)
-    dom.adlaGösterGizle(Css.BağlantıListesi + grup, grup == ağGrubu)
-
-  /** @const {!Element} */
-  const seçici = dom.adla(Css.BağlantıListesi + ağGrubu);
-
-  /** @const {!NodeList<!Element>} */
-  const satırlar = seçici.children;
-  for (const satır of satırlar) {
-    /** @const {string} */
-    const bağlantıAdı = satır.id.slice(2)
-    /** @const {!Provider} */
-    const bağlantı = Bağlantılar[bağlantıAdı];
-    /** @const {boolean} */
-    const varMı = bağlantı.initIfAvailable();
-    satır.classList.toggle("on", varMı);
-    satır.onclick = varMı ? () => bağlantıSeçildi(bağlantıAdı, bağlantı) : null;
-    /** @const {Element} */
-    const düğmeMi = satır.lastElementChild;
-    /** @const {string} */
-    const indirURLi = varMı ? "" : bağlantı.downloadURL();
-    /** @const {boolean} */
-    const düğmeGöster = indirURLi != "" && düğmeMi.classList.contains(Css.Cüzdanİndir);
-    dom.gösterGizle(düğmeMi, düğmeGöster);
-    düğmeMi.onclick = düğmeGöster
-      ? () => window.open(indirURLi, "_blank").focus()
-      : null;
-  }
-}
-
-const izinliyseBağla = () => {
-  /** @const {string} */
-  const cookie = document.cookie;
-  /** @const {number} */
-  const idx = cookie.indexOf("cu=");
-  /** @const {Provider} */
-  const bağlantı = Bağlantılar[cookie.slice(idx + 3, idx + 5)];
-  if (bağlantı && bağlantı.initIfAvailable()) {
-    Bağlı = bağlantı;
-    bağlantı.connect(Ağ, ağDeğişti, adresDeğişti, true)
-      .then(() => BağlantıDeğişince.forEach((f) => f(Bağlı)))
-      .catch(() => {
-        Bağlı = BoşBağlantı;
-        bağlantıSeçiciGöster()
-      });
-  } else
-    bağlantıSeçiciGöster();
-}
-
-const aç = () => AğDüğmesi.click();
-
-const kur = () => {
-  /** @const {!Element} */
-  const seçiliAğ = dom.adla(Css.AğListesi + DefaultChain);
-  seçiliAğ.replaceChild(AğDüğmesi.firstElementChild.cloneNode(true),
-    seçiliAğ.firstElementChild);
-
-  dom.menüYarat(AğDüğmesi, Menü);
-  AdresDüğmesi.onclick = AğDüğmesi.onclick;
-  Menü.onclick = (event) => {
-    /** @type {HTMLLIElement} */
-    const maybeLi = /** @type {HTMLLIElement} */(event.target.closest("li"));
-    if (maybeLi && maybeLi.id && maybeLi.id.startsWith(Css.AğListesi))
-      ağSeçildi(/** @type {ChainId} */(maybeLi.id.slice(3)));
-    event.stopPropagation();
-  }
-
-  CüzdanAdresi.onclick = () => navigator.clipboard.writeText(/** @type {string} */(Adres));
-  dom.span(Css.ExplorerLinki).onclick = () => {
-    const adresEki = Ağ.startsWith("mi") ? "wallet" : "address";
-    const url = `//${AğBilgileri[Ağ].izleyici}/${adresEki}/${Adres}`;
-    window.open(url, "_blank");
-  }
-  DebankLinki.onclick = () => {
-    const url = "//debank.com/profile/" + Adres;
-    window.open(url, "_blank");
-  }
-  setTimeout(izinliyseBağla, 200);
-}
-kur();
-
-export default {
-  SağPanel,
-  aç,
-  adres,
-  adresDeğişince,
-  ağ,
-  ağDeğişince,
-  bağlantı,
-  bağlantıDeğişince,
-  kopunca,
-  hızlıArabirimAdı,
-  kopar,
-  kpassDeğişince,
-};
diff --git "a/birim/c\303\274zdan/birim.jsx" "b/birim/c\303\274zdan/birim.jsx"
index 1792c498..48d09203 100644
--- "a/birim/c\303\274zdan/birim.jsx"
+++ "b/birim/c\303\274zdan/birim.jsx"
@@ -1,93 +1,363 @@
 import { AğBilgileri, ağResmi } from "../ağlar/birim";
+import { Bağlantı, BağlantıAdı, Bağlantılar, BoşBağlantı } from "./bağlantılar";
 import Css from "./birim.css";
 import QmarkResmi from "/birim/cüzdan/img/qmark.svg";
 import KopyalaResmi from "/birim/paste.svg";
-import { ChainId } from "/lib/crosschain/chains";
+import { HostUrl } from "/crate";
+import { ChainGroup, ChainGroups, ChainId, chainIdToGroup } from "/lib/crosschain/chains";
+import { Provider } from "/lib/crosschain/provider";
+import "/lib/ethereum/ERC721Unlockable.d";
+import KPass from "/lib/ethereum/KPassLite";
 import { Image } from "/lib/kastro/image";
+import ipfs from "/lib/node/ipfs";
 import dom from "/lib/util/dom";
+import hex from "/lib/util/hex";
 import { I18nString } from "/lib/util/i18n";
 
+/** @define {ChainId} */
+const DefaultChain = ChainId.x1;
+/** @define {!Array<ChainId>} */
+const Chains = [ChainId.x1, ChainId.MinaMainnet, ChainId.xa4b1, ChainId.x89, ChainId.xa86a, ChainId.x38];
+
+/** @const {string} */
+const KIMLIKDAO_IPFS_URL = "//ipfs.kimlikdao.org";
 /** @const {!HTMLButtonElement} */
-export const AdresDüğmesi = dom.button(Css.AdresDüğmesi);
+const AdresDüğmesi = dom.button(Css.AdresDüğmesi);
 /** @const {!HTMLButtonElement} */
-export const AğDüğmesi = dom.button(Css.AğDüğmesi);
+const AğDüğmesi = dom.button(Css.AğDüğmesi);
 /** @const {!HTMLDivElement} */
-export const CüzdanAdresi = dom.div(Css.CüzdanAdresi);
+const CüzdanAdresi = dom.div(Css.CüzdanAdresi);
 /** @const {!HTMLSpanElement} */
-export const DebankLinki = dom.span(Css.DebankLinki);
+const DebankLinki = dom.span(Css.DebankLinki);
+/** @const {!HTMLDivElement} */
+const Menü = dom.div(Css.Menü);
 /** @const {!HTMLDivElement} */
-export const Menü = dom.div(Css.Menü);
-/** @const {!HTMLUListElement} */
-export const SağPanel = dom.ul(Css.SağPanel);
+const SağPanel = dom.div(Css.SağPanel);
+
+/** @const {!Set<ChainId>} */
+const Ağlar = new Set(Chains);
+/** @const {string} */
+const BağlaMetni = AdresDüğmesi.innerText;
+/** @type {!Array<function(?string)>} */
+const AdresDeğişince = [];
+/** @const {!Array<function()>} */
+const Kopunca = [];
+/** @const {!Array<function(ChainId)>} */
+const AğDeğişince = [];
+/** @const {!Array<function(?string, Promise<!eth.ERC721Unlockable>)>} */
+const KPassDeğişince = [];
+/** @const {!Array<function(!Provider)>} */
+const BağlantıDeğişince = [];
+/** @type {!Provider} */
+let Bağlı = BoşBağlantı;
+/** @type {?string} */
+let Adres = null;
+/** @type {ChainId} */
+let Ağ = DefaultChain;
+/** @type {?string} */
+let KPassYokResmi;
 
 /**
- * @param {string} ad
- * @return {string} url
+ * @param {ChainId} yeniAğ harf dizisi olarak yeni ağ adı.
  */
-const bağlantıResmi = (ad) => `birim/cüzdan/img/${ad.split(" ")[0].toLowerCase()}.svg`;
+const ağDeğişti = (yeniAğ) => {
+  if (!Ağlar.has(yeniAğ)) {
+    // Kullanıcı desteklemediğimiz bir ağa geçerse (uzantı cüzdanı
+    // arabiriminden), en son seçili ağa geri geçme isteği yolluyoruz.
+    // Eğer cüzdanı cookie'den bağlamışsak, son seçili ağ bulunduğumuz
+    // sayfada desteklenmiyor olabilir; bu durumda `ağSeçildi()` cüzdanın
+    // kopmasını sağlıyor.
+    ağSeçildi(Ağ);
+  } else if (yeniAğ != Ağ) {
+    dom.adla(Css.AğListesi + Ağ).classList.remove("sel");
+    dom.adla(Css.AğListesi + yeniAğ).classList.add("sel");
+    AğDüğmesi.replaceChild(
+      dom.adla(Css.AğListesi + yeniAğ).firstElementChild.cloneNode(true),
+      AğDüğmesi.firstElementChild);
+    /** @const {boolean} */
+    const ağGrubuDeğişti = !Ağ.startsWith(yeniAğ.slice(0, 2));
+    Ağ = yeniAğ;
+    if (ağGrubuDeğişti)
+      bağlantıSeçiciGöster();
+    kpassDeğişti();
+    for (const f of AğDeğişince) f(yeniAğ);
+  }
+}
+
+const kpassDeğişti = () => {
+  if (!Adres) return;
+  /** @const {!HTMLDivElement} */
+  const kpassDüğmesi = dom.div(Css.KPassDüğmesi);
+  /** @const {!HTMLImageElement} */
+  const kpassResmi = dom.img(Css.ProfilResmi);
+
+  /** @const {ChainId} */
+  const ağ = Ağ;
+  /** @const {!eth.Provider} */
+  const provider = /** @type {!eth.Provider} */(Bağlı.provider);
+  /** @const {string} */
+  const adres = Adres;
+
+  KPass.handleOf(provider, ağ, Adres).then((cidHex) => {
+    if (ağ != Ağ || adres != Adres) return;
+    /** @const {boolean} */
+    const varMı = cidHex.replaceAll("0", "") != "x";
+    kpassDüğmesi.innerText = varMı
+      ? dom.i18n({ tr: "KPASS’İNİ İNCELE", en: "VIEW KPASS" })
+      : dom.i18n({ tr: "KPASS AL", en: "MINT KPASS" });
+    kpassDüğmesi.onclick = kpassResmi.onclick = () =>
+      window.location.href = "//kimlikdao.org/" + (varMı
+        ? dom.i18n({ tr: "kpassim", en: "kpass" })
+        : dom.i18n({ tr: "al", en: "mint" }));
+    if (!varMı && KPassYokResmi) kpassResmi.src = KPassYokResmi;
+    /** @const {Promise<!eth.ERC721Unlockable>} */
+    const dosyaSözü = varMı
+      ? ipfs.cidBytetanOku(KIMLIKDAO_IPFS_URL, hex.toUint8Array(cidHex.slice(2)))
+        .then((/** @type {string} */ dosya) => {
+          if (ağ != Ağ || adres != Adres) return Promise.reject();
+          const kpassDosyası = /** @type {!eth.ERC721Unlockable} */(JSON.parse(dosya))
+          KPassYokResmi ||= kpassResmi.src;
+          kpassResmi.src = kpassDosyası.image;
+          return kpassDosyası;
+        })
+      : null;
+    for (const f of KPassDeğişince) f(cidHex, dosyaSözü);
+  })
+}
 
 /**
- * @param {!Object<string, string>} props
- * @return {string}
+ * @param {!Array<string>} adresler cüzdandan gelen adresler dizisi.
  */
-const Bağlantı = ({ idx, name }) => (
-  <li id={Css.Kök + idx}>
-    <Image src={bağlantıResmi(name)} width={32} height={32} />
-    <div class={Css.CüzdanIşığı}></div> {name}<span class={Css.Cüzdanİndir} style="display:none">{{
-      en: "GET",
-      tr: "İNDİR"
-    }}</span>
-  </li>
-);
+const adresDeğişti = (adresler) => {
+  if (!adresler || !adresler.length)
+    Cüzdan.kopar();
+  else if (adresler[0] != Adres) {
+    /** @const {?string} */
+    const eskiAdres = Adres;
+    Adres = adresler[0];
+    CüzdanAdresi.firstElementChild.innerText =
+      AdresDüğmesi.innerText = Adres.slice(0, 6) + "..." + Adres.slice(-4);
+    kpassDeğişti();
+    if (!eskiAdres) {
+      dom.gösterGizle(DebankLinki, Ağ.startsWith(ChainGroup.EVM));
+      bağlantıSeçiciGizle();
+      dom.göster(SağPanel);
+    }
+    for (const f of AdresDeğişince) f(Adres);
+  }
+}
+
+BoşBağlantı.connect(ChainId.x1, ağDeğişti, adresDeğişti);
+
+/**
+ * @param {ChainId} ağ
+ */
+const ağSeçildi = (ağ) => {
+  if (!Bağlı.isChainSupported(ağ)) Cüzdan.kopar();
+  Bağlı.switchChain(ağ);
+}
+
+/**
+ * @param {string} bağlantıAdı
+ * @param {!Provider} bağlantı
+ */
+const bağlantıSeçildi = (bağlantıAdı, bağlantı) => {
+  /** @const {!Provider} */
+  const eskiBağlantı = Bağlı;
+  if (eskiBağlantı == bağlantı) return;
+  Bağlı = bağlantı;
+  bağlantı.connect(Ağ, ağDeğişti, adresDeğişti)
+    .then(() => {
+      document.cookie = `cu=${bağlantıAdı};domain=.${HostUrl.slice(8)};SameSite=Strict;max-age=` + 1e6;
+      eskiBağlantı.disconnect();
+      for (const f of BağlantıDeğişince) f(bağlantı);
+    })
+    .catch((e) => {
+      console.log(e);
+      Bağlı = eskiBağlantı;
+    });
+}
+
+const bağlantıSeçiciGizle = () => {
+  for (const grup of ChainGroups)
+    dom.adlaGizle(Css.BağlantıListesi + grup);
+}
+
+const bağlantıSeçiciGöster = () => {
+  /** @const {ChainGroup} */
+  const ağGrubu = chainIdToGroup(Ağ);
+  for (const grup of ChainGroups)
+    dom.adlaGösterGizle(Css.BağlantıListesi + grup, grup == ağGrubu)
+
+  /** @const {!Element} */
+  const seçici = dom.adla(Css.BağlantıListesi + ağGrubu);
+
+  /** @const {!NodeList<!Element>} */
+  const satırlar = seçici.children;
+  for (const satır of satırlar) {
+    /** @const {BağlantıAdı} */
+    const bağlantıAdı = /** @type {BağlantıAdı} */(satır.id.slice(2))
+    /** @const {!Provider} */
+    const bağlantı = Bağlantılar[bağlantıAdı];
+    /** @const {boolean} */
+    const varMı = bağlantı.initIfAvailable();
+    satır.classList.toggle("on", varMı);
+    satır.onclick = varMı ? () => bağlantıSeçildi(bağlantıAdı, bağlantı) : null;
+    /** @const {Element} */
+    const düğmeMi = satır.lastElementChild;
+    /** @const {string} */
+    const indirURLi = varMı ? "" : bağlantı.downloadURL();
+    /** @const {boolean} */
+    const düğmeGöster = indirURLi != "" && düğmeMi.classList.contains(Css.Cüzdanİndir);
+    dom.gösterGizle(düğmeMi, düğmeGöster);
+    düğmeMi.onclick = düğmeGöster
+      ? () => window.open(indirURLi, "_blank").focus()
+      : null;
+  }
+}
+
+const izinliyseBağla = () => {
+  /** @const {string} */
+  const cookie = document.cookie;
+  /** @const {number} */
+  const idx = cookie.indexOf("cu=");
+  /** @const {Provider} */
+  const bağlantı = Bağlantılar[cookie.slice(idx + 3, idx + 5)];
+  if (bağlantı && bağlantı.initIfAvailable()) {
+    Bağlı = bağlantı;
+    bağlantı.connect(Ağ, ağDeğişti, adresDeğişti, true)
+      .then(() => BağlantıDeğişince.forEach((f) => f(Bağlı)))
+      .catch(() => {
+        Bağlı = BoşBağlantı;
+        bağlantıSeçiciGöster()
+      });
+  } else
+    bağlantıSeçiciGöster();
+}
 
 /**
  * @param {{
  *   DefaultChain: ChainId,
  *   Chains: !Array<ChainId>,
  *   ChainNotes: !Object<ChainId, I18nString>,
+ *   children: *,
  *   piggyback: string
- * }} props
- * @return {string}
+ * }=} props
+ * @return {Promise<string>}
  */
-const Cüzdan = ({ DefaultChain, Chains, ChainNotes, children, piggyback }) => (
-  <div id={Css.Kök}>
-    <Css />
-    <AğDüğmesi><Image src={ağResmi(DefaultChain)} height={32} width={32} inline /></AğDüğmesi>
-    <AdresDüğmesi>{{ tr: "Cüzdan bağla", en: "Connect wallet" }}</AdresDüğmesi>
-    <Menü style="display:none">
-      <ul id={Css.AğListesi}>
-        {Chains.map((id) => (
-          <li id={Css.AğListesi + id} class={id == DefaultChain ? "sel" : ""}>
-            {id == DefaultChain ? <span></span> : <Image src={ağResmi(id)} width={32} height={32} bundleWidth={40} bundleHeight={40} />}
-            {" "}
-            {ChainNotes[id]
-              ? <div>{AğBilgileri[id].ad}<div class={Css.AğNotu}>{ChainNotes[id]}</div></div>
-              : AğBilgileri[id].ad}
-          </li>
-        ))}
-      </ul>
-      <ul id="cuf0x" class={Css.BağlantıListesi}>
-        <Bağlantı idx="ra" name="Rabby Wallet" />
-        <Bağlantı idx="co" name="Core" />
-        <Bağlantı idx="mm" name="Metamask" />
-      </ul>
-      <ul id="cufmi" class={Css.BağlantıListesi} style="display:none">
-        <Bağlantı idx="au" name="Auro" />
-      </ul>
-      <SağPanel style="display:none">
-        <div id={Css.Profil}>
-          <QmarkResmi id={Css.ProfilResmi} height={80} width={80} />
-          <div>
-            <CüzdanAdresi><span>0xcCc...cCc</span><span id="cuadi"><KopyalaResmi inline /></span></CüzdanAdresi>
-            <DebankLinki>DeBank</DebankLinki> <span id={Css.ExplorerLinki}>Explorer</span>
-            <div id={Css.KPassDüğmesi}>{{ en: "MINT KPASS", tr: "KPASS AL" }}</div>
+const Cüzdan = ({ DefaultChain: defaultChain, Chains: chains, ChainNotes: chainNotes, children, piggyback }) => {
+  /** @const {!Element} */
+  const seçiliAğ = dom.adla(Css.AğListesi + DefaultChain);
+  seçiliAğ.replaceChild(AğDüğmesi.firstElementChild.cloneNode(true),
+    seçiliAğ.firstElementChild);
+
+  dom.menüYarat(AğDüğmesi, Menü);
+  AdresDüğmesi.onclick = AğDüğmesi.onclick;
+  Menü.onclick = (event) => {
+    /** @type {HTMLLIElement} */
+    const maybeLi = /** @type {HTMLLIElement} */(event.target.closest("li"));
+    if (maybeLi && maybeLi.id && maybeLi.id.startsWith(Css.AğListesi))
+      ağSeçildi(/** @type {ChainId} */(maybeLi.id.slice(3)));
+    event.stopPropagation();
+  }
+  CüzdanAdresi.onclick = () => navigator.clipboard.writeText(/** @type {string} */(Adres));
+  dom.span(Css.ExplorerLinki).onclick = () => {
+    const adresEki = Ağ.startsWith("mi") ? "wallet" : "address";
+    const url = `//${AğBilgileri[Ağ].izleyici}/${adresEki}/${Adres}`;
+    window.open(url, "_blank");
+  }
+  DebankLinki.onclick = () => {
+    const url = "//debank.com/profile/" + Adres;
+    window.open(url, "_blank");
+  }
+  setTimeout(izinliyseBağla, 200);
+
+  return (
+    <div id={Css.Kök}>
+      <Css />
+      <AğDüğmesi>
+        <Image src={ağResmi(defaultChain)} height={32} width={32} inline />
+      </AğDüğmesi>
+      <AdresDüğmesi>{{
+        tr: "Cüzdan bağla", en: "Connect wallet"
+      }}</AdresDüğmesi>
+      <Menü style="display:none">
+        <ul id={Css.AğListesi}>
+          {chains.map((id) => (
+            <li id={Css.AğListesi + id} class={id == DefaultChain ? "sel" : ""}>
+              {id == defaultChain
+                ? <span></span>
+                : <Image src={ağResmi(id)} width={32} height={32} bundleWidth={64} bundleHeight={64} piggyback={piggyback} />}
+              {" "}
+              {chainNotes[id]
+                ? <div>{AğBilgileri[id].ad}<div class={Css.AğNotu}>{chainNotes[id]}</div></div>
+                : AğBilgileri[id].ad}
+            </li>
+          ))}
+        </ul>
+        <ul id={Css.BağlantıListesi + ChainGroup.EVM} class={Css.BağlantıListesi}>
+          <Bağlantı idx={BağlantıAdı.Rabby} name="Rabby Wallet" />
+          <Bağlantı idx={BağlantıAdı.Core} name="Core" />
+          <Bağlantı idx={BağlantıAdı.MetaMask} name="Metamask" />
+        </ul>
+        <ul id={Css.BağlantıListesi + ChainGroup.MINA} class={Css.BağlantıListesi} style="display:none">
+          <Bağlantı idx={BağlantıAdı.Auro} name="Auro" />
+        </ul>
+        <SağPanel style="display:none">
+          <div id={Css.Profil}>
+            <QmarkResmi id={Css.ProfilResmi} height={80} width={80} />
+            <div>
+              <CüzdanAdresi><span>0xcCc...cCc</span><span id="cuadi"><KopyalaResmi inline /></span></CüzdanAdresi>
+              <DebankLinki>DeBank</DebankLinki> <span id={Css.ExplorerLinki}>Explorer</span>
+              <div id={Css.KPassDüğmesi}>{{ en: "MINT KPASS", tr: "KPASS AL" }}</div>
+            </div>
           </div>
-        </div>
-        <hr />
-        {children}
-      </SağPanel>
-    </Menü>
-  </div>
-);
+          <hr />
+          {children}
+        </SağPanel>
+      </Menü>
+    </div>
+  );
+}
+
+Cüzdan.aç = () => AğDüğmesi.click();
+
+Cüzdan.kopar = () => {
+  Adres = null;
+  AdresDüğmesi.innerText = BağlaMetni;
+  bağlantıSeçildi("", BoşBağlantı);
+  dom.gizle(SağPanel);
+  bağlantıSeçiciGöster();
+  for (const f of Kopunca) f();
+}
+
+/** @return {ChainId} */
+Cüzdan.ağ = () => Ağ;
+
+/**
+ * @param {function(ChainId)} f Ağ değişince yeni ağın adıyla çağırılacak
+ *                             fonksiyon.
+ */
+Cüzdan.ağDeğişince = (f) => AğDeğişince.push(f);
+
+/** @return {?string} */
+Cüzdan.adres = () => Adres;
+
+/** @param {function(?string)} f */
+Cüzdan.adresDeğişince = (f) => AdresDeğişince.push(f);
+
+/** @param {function()} f */
+Cüzdan.kopunca = (f) => Kopunca.push(f);
+
+/** @param {function(!Provider)} f */
+Cüzdan.bağlantıDeğişince = (f) => BağlantıDeğişince.push(f);
+
+/**
+ * @param {function(?string, Promise<!eth.ERC721Unlockable>)} f
+ */
+Cüzdan.kpassDeğişince = (f) => {
+  KPassDeğişince.push(f);
+  Kopunca.push(() => f(null, null));
+}
 
 export default Cüzdan;
diff --git "a/birim/c\303\274zdan/sa\304\237Men\303\274.jsx" "b/birim/c\303\274zdan/sa\304\237Men\303\274.jsx"
index 2c4ce1ad..9839f473 100644
--- "a/birim/c\303\274zdan/sa\304\237Men\303\274.jsx"
+++ "b/birim/c\303\274zdan/sa\304\237Men\303\274.jsx"
@@ -1,23 +1,44 @@
+import Cüzdan from "./birim";
+import CüzdanCss from "./birim.css";
 import AmbassadorResmi from "/birim/cüzdan/img/ambassador.svg";
 import DeğiştirResmi from "/birim/cüzdan/img/external-link.svg";
 import İptalResmi from "/birim/cüzdan/img/iptal.svg";
 import VoteResmi from "/birim/cüzdan/img/vote.svg";
+import dom from "/lib/util/dom";
 
-export default () => <>
-  <li><AmbassadorResmi inline />{{
-    en: " Ambassador program",
-    tr: " Ambassador ol"
-  }}</li>
-  <li><VoteResmi width={16} height={16} />{{
-    en: " Vote",
-    tr: " Oy kullan"
-  }}</li>
-  <li><İptalResmi inline />{{
-    en: " Revoke KPass",
-    tr: " İptal işlemleri"
-  }}</li>
-  <li><DeğiştirResmi inline />{{
-    en: " Switch wallet",
-    tr: " Cüzdan değiştir"
-  }}</li>
-</>
+/**
+ * @return {Promise<string>} 
+ */
+const SağMenü = () => {
+  /** @const {HTMLUListElement} */
+  const Kök = dom.ul(CüzdanCss.SağMenü);
+  /** @const {!NodeList<!Element>} */
+  const children = Kök.children;
+  children[0].onclick = () => window.location.href = "//join.kimlikdao.org/#sa-ambassador1";
+  children[1].onclick = () => window.location.href = "//kimlikdao.org/" + dom.i18n({ tr: "oyla", en: "vote" });
+  children[2].onclick = () => window.location.href = "//kimlikdao.org/" + dom.i18n({ tr: "iptal", en: "revoke" });
+  children[3].onclick = () => Cüzdan.kopar();
+
+  return (
+    <Kök>
+      <li><AmbassadorResmi inline />{{
+        en: " Ambassador program",
+        tr: " Ambassador ol"
+      }}</li>
+      <li><VoteResmi width={16} height={16} />{{
+        en: " Vote",
+        tr: " Oy kullan"
+      }}</li>
+      <li><İptalResmi inline />{{
+        en: " Revoke KPass",
+        tr: " İptal işlemleri"
+      }}</li>
+      <li><DeğiştirResmi inline />{{
+        en: " Switch wallet",
+        tr: " Cüzdan değiştir"
+      }}</li>
+    </Kök>
+  );
+}
+
+export default SağMenü;
diff --git a/birim/dil/birim.js b/birim/dil/birim.js
deleted file mode 100644
index 7d422b47..00000000
--- a/birim/dil/birim.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DilDüğmesi, DilListesi } from "./birim.jsx";
-import dom from "/lib/util/dom";
-import { I18nString, LangCode } from "/lib/util/i18n";
-import { HostUrl } from "/crate";
-
-/** @define {I18nString} */
-const Route = { tr: "tr", en: "en" };
-
-dom.menüYarat(DilDüğmesi, DilListesi);
-DilListesi.onclick = (/** @type {Event} */ event) => {
-  /** @const {!Element} */
-  const targetElem = /** @type {!Element} */(event.target);
-  /** @const {!HTMLLIElement} */
-  const li = /** @type {!HTMLLIElement} */(targetElem.closest("li"));
-
-  /** @const {LangCode} */
-  const seçilenDil = /** @type {LangCode} */(li.id.slice(2));
-  if (seçilenDil != dom.Lang) {
-    document.cookie = `l=${seçilenDil};path=/;domain=.${HostUrl.slice(8)};SameSite=Strict;max-age=${1e6}`;
-    window.location.href = Route[seçilenDil] + window.location.hash;
-  }
-};
diff --git a/birim/dil/birim.jsx b/birim/dil/birim.jsx
index c3b14dce..cfb6988f 100644
--- a/birim/dil/birim.jsx
+++ b/birim/dil/birim.jsx
@@ -2,23 +2,42 @@ import Css from "./birim.css";
 import EnFlag from "./en.svg";
 import TrFlag from "./tr.svg";
 import BaşlıkCss from "/birim/başlık/birim.css";
+import { HostUrl } from "/crate";
 import dom from "/lib/util/dom";
-import { LangCode } from "/lib/util/i18n";
+import { I18nString, LangCode } from "/lib/util/i18n";
 
+/** @define {I18nString} */
+const Route = { tr: "tr", en: "en" };
 /** @const {!HTMLAnchorElement} */
-export const DilDüğmesi = dom.a(Css.DilDüğmesi);
+const DilDüğmesi = dom.a(Css.DilDüğmesi);
 /** @const {!HTMLUListElement} */
-export const DilListesi = dom.ul(Css.DilListesi);
+const DilListesi = dom.ul(Css.DilListesi);
 
-const Dil = () => (
-  <div id={Css.Kök}>
-    <Css />
-    <DilDüğmesi class={BaşlıkCss.Link} href="javascript:">{{ en: "EN", tr: "TR" }}</DilDüğmesi>
-    <DilListesi style="display:none">
-      <li id={Css.Kök + LangCode.EN}><EnFlag width={16} height={16} /> English</li>
-      <li id={Css.Kök + LangCode.TR}><TrFlag width={16} height={16} /> Türkçe</li>
-    </DilListesi>
-  </div>
-);
+const Dil = () => {
+  DilListesi.onclick = (/** @type {Event} */ event) => {
+    /** @const {!Element} */
+    const targetElem = /** @type {!Element} */(event.target);
+    /** @const {!HTMLLIElement} */
+    const li = /** @type {!HTMLLIElement} */(targetElem.closest("li"));
+
+    /** @const {LangCode} */
+    const seçilenDil = /** @type {LangCode} */(li.id.slice(2));
+    if (seçilenDil != dom.Lang) {
+      document.cookie = `l=${seçilenDil};path=/;domain=.${HostUrl.slice(8)};SameSite=Strict;max-age=${1e6}`;
+      window.location.href = Route[seçilenDil] + window.location.hash;
+    }
+  };
+
+  return (
+    <div id={Css.Kök}>
+      <Css />
+      <DilDüğmesi class={BaşlıkCss.Link} href="javascript:">{{ en: "EN", tr: "TR" }}</DilDüğmesi>
+      <DilListesi style="display:none">
+        <li id={Css.Kök + LangCode.EN}><EnFlag width={16} height={16} /> English</li>
+        <li id={Css.Kök + LangCode.TR}><TrFlag width={16} height={16} /> Türkçe</li>
+      </DilListesi>
+    </div>
+  );
+}
 
 export default Dil;
diff --git a/birim/kaydol/birim.css b/birim/kaydol/birim.css
index 9850b15c..b3c6f5cf 100644
--- a/birim/kaydol/birim.css
+++ b/birim/kaydol/birim.css
@@ -11,6 +11,11 @@
   padding: 0 10px;
 }
 
+/**
+ * @export {KaydolDüğmesi}
+ */
+.kayb {}
+
 .act.btn.kayb {
   box-shadow: none;
   border-radius: 0 8px 8px 0;
diff --git a/birim/kaydol/birim.js b/birim/kaydol/birim.js
deleted file mode 100644
index 8081df63..00000000
--- a/birim/kaydol/birim.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import dom from "/lib/util/dom";
-
-/**
- * @param {string} id
- */
-const bind = (id) => {
-  /** @type {?string} */
-  let KaydolMetni;
-  /** @const {!Element} */
-  const kök = dom.adla(id);
-  /** @const {!HTMLInputElement} */
-  const girdi = /** @type {!HTMLInputElement} */(kök.firstElementChild);
-  /** @const {!Element} */
-  const düğme = /** @type {!Element} */(girdi.nextElementSibling);
-
-  /**
-   * @param {boolean} başarılı
-   */
-  const güncelle = (başarılı) => {
-    düğme.innerText = başarılı
-      ? KaydolMetni + dom.i18n({ tr: "dunuz 👍", en: "d 👍" })
-      : dom.i18n({ tr: "Hata 🫨", en: "Error 🫨" });
-    setTimeout(() => düğme.innerText = KaydolMetni, 3000);
-    if (başarılı)
-      girdi.value = "";
-  }
-
-  /**
-   * @param {Event=} event
-   */
-  const yolla = (event) => {
-    if (event) event.preventDefault();
-    KaydolMetni ||= düğme.innerText;
-    düğme.innerText = KaydolMetni + " ⏳";
-    fetch("//bulten.kimlikdao.org/ekle", {
-      method: "POST",
-      body: JSON.stringify({
-        "email": girdi.value,
-        "dil": dom.Lang
-      })
-    }).then(
-      (res) => güncelle(res && res.ok),
-      () => güncelle(false)
-    );
-  };
-  kök.onsubmit = yolla;
-}
-
-export default { bind };
diff --git a/birim/kaydol/birim.jsx b/birim/kaydol/birim.jsx
index 3c38e328..092f2052 100644
--- a/birim/kaydol/birim.jsx
+++ b/birim/kaydol/birim.jsx
@@ -1,15 +1,67 @@
 import Css from "./birim.css";
-import OrtakCss from "/birim/ortakcss/birim.jsx";
-
-const Kaydol = ({ id }) => (
-  <form id={id}>
-    <Css />
-    <input inputmode="email" autocomplete="email" name="email" class={Css.Girdi} type="email"
-      placeholder={{ en: "Your email address", tr: "E-posta adresiniz" }} />
-    <button class={[OrtakCss.Düğme, "act", "kayb"]} type="submit">{{
-      en: "Subscribe", tr: "Kaydol"
-    }}</button>
-  </form >
-);
+import OrtakCss from "/birim/ortakcss/birim";
+import dom from "/lib/util/dom";
+
+/**
+ * @param {{ id: string }} props
+ * @return {Promise<string>}
+ */
+const Kaydol = ({ id }) => {
+  /** @type {?string} */
+  let KaydolMetni;
+  /** @const {!HTMLFormElement} */
+  const Kök = dom.form(id);
+  /** @const {!HTMLInputElement} */
+  const girdi = /** @type {!HTMLInputElement} */(Kök.firstElementChild);
+  /** @const {!Element} */
+  const düğme = /** @type {!Element} */(girdi.nextElementSibling);
+
+  /**
+   * @param {boolean} başarılı
+   */
+  const güncelle = (başarılı) => {
+    düğme.innerText = başarılı
+      ? KaydolMetni + dom.i18n({ tr: "dunuz 👍", en: "d 👍" })
+      : dom.i18n({ tr: "Hata 🫨", en: "Error 🫨" });
+    setTimeout(() => düğme.innerText = KaydolMetni, 3000);
+    if (başarılı)
+      girdi.value = "";
+  }
+
+  /**
+   * @param {Event=} event
+   */
+  const yolla = (event) => {
+    if (event) event.preventDefault();
+    KaydolMetni ||= düğme.innerText;
+    düğme.innerText = KaydolMetni + " ⏳";
+    fetch("//bulten.kimlikdao.org/ekle", {
+      method: "POST",
+      body: JSON.stringify({ "email": girdi.value, "dil": dom.Lang })
+    }).then(
+      (res) => güncelle(res && res.ok),
+      () => güncelle(false)
+    );
+  };
+
+  return (
+    <Kök onSubmit={yolla}>
+      <Css />
+      <input
+        inputmode="email"
+        autocomplete="email"
+        name="email" class={Css.Girdi}
+        type="email"
+        placeholder={{ en: "Your email address", tr: "E-posta adresiniz" }}
+      />
+      <button
+        class={[OrtakCss.Düğme, OrtakCss.Act, Css.KaydolDüğmesi]}
+        type="submit"
+      >{{
+        en: "Subscribe", tr: "Kaydol"
+      }}</button>
+    </Kök>
+  );
+}
 
 export default Kaydol;
diff --git a/birim/kpass/AddressInfoCard.jsx b/birim/kpass/AddressInfoCard.jsx
new file mode 100644
index 00000000..13a8570c
--- /dev/null
+++ b/birim/kpass/AddressInfoCard.jsx
@@ -0,0 +1,15 @@
+import Css from "./birim.css";
+
+const AddressInfoCard = () => (
+  <div id={Css.AddressInfoCard} class={Css.BilgiKartı} style="display:none">
+    <div class={Css.BilgiKartıİçi}>
+      <h7 data-en="ADDRESS INFO">ADRES BİLGİLERİ</h7>
+      <div class={Css.Ad} id="kpam">Mahalle</div>
+      <div class={Css.Ad} id="kpasnd">Sokak No/Daire</div>
+      <div class={Css.Ad} id="kpaii">İlçe / İl</div>
+      <div class={Css.Ad} id="kpau">Ülke</div>
+    </div>
+  </div>
+);
+
+export default AddressInfoCard;
diff --git a/birim/kpass/ContactInfoCard.jsx b/birim/kpass/ContactInfoCard.jsx
new file mode 100644
index 00000000..e6204ce1
--- /dev/null
+++ b/birim/kpass/ContactInfoCard.jsx
@@ -0,0 +1,26 @@
+import Css from "./birim.css";
+import { setFieldsFrom } from "./util";
+import dom from "/lib/util/dom";
+
+/** @const {!Array<string>} */
+const Fields = ["email", "phone"];
+
+const ContactInfoCard = () => (
+  <div id="kpibp" class={Css.BilgiKartı} style="display:none">
+    <div class={Css.BilgiKartıİçi}>
+      <h7>{{ en: "CONTACT INFO", tr: "İLETİŞİM BİLGİLERİ" }}</h7>
+      <div class={Css.Ad}>{{ en: "E-mail", tr: "E-posta" }}</div>
+      <div>{{ en: "abc@abc.com", tr: "abc@abc.com.tr" }}</div>
+      <div class={Css.Ad}>{{ en: "Phone", tr: "Telefon" }}</div>
+      <div>{{ en: "0(555)555-55-55", tr: "+90 (555) 555-5555" }}</div>
+    </div>
+  </div>
+);
+
+/**
+ * @param {!did.ContactInfo} contactInfo 
+ */
+ContactInfoCard.set = (contactInfo) => setFieldsFrom(
+  dom.div(Css.BilgiKartıİçi).children, 2, Fields, contactInfo);
+
+export default ContactInfoCard;
diff --git a/birim/kpass/FamilyInfoCard.jsx b/birim/kpass/FamilyInfoCard.jsx
new file mode 100644
index 00000000..8850497f
--- /dev/null
+++ b/birim/kpass/FamilyInfoCard.jsx
@@ -0,0 +1,44 @@
+import Css from "./birim.css";
+import { setFieldsFrom } from "./util";
+import dom from "/lib/util/dom";
+
+/** @const {!Array<string>} */
+const LeftFields = ["annead", "babaad", "mhali"];
+/** @const {!Array<string>} */
+const RightFields = ["BSN", "cilt", "hane"];
+
+const FamilyInfoCard = () => (
+  <div class={Css.BilgiKartı}>
+    <div class={Css.BilgiKartıİçi}>
+      <h7>{{ en: "FAMILY INFO", tr: "AİLE BİLGİLERİ" }}</h7>
+      <div class={Css.ÇiftSütun} id={Css.AileBilgileri}>
+        <div>
+          <div class={Css.Ad}>{{ en: "Mother's name", tr: "Anne adı" }}</div>
+          <div>{{ en: "Marry", tr: "Ayşe" }}</div>
+          <div class={Css.Ad}>{{ en: "Father's name", tr: "Baba adı" }}</div>
+          <div>{{ en: "Paul", tr: "Mehmet" }}</div>
+          <div class={Css.Ad}>{{ en: "Marital Status", tr: "Medeni Hali" }}</div>
+          <div>{{ en: "Single", tr: "Bekar" }}</div>
+        </div>
+        <div id={Css.SağSütun}>
+          <div class={Css.Ad}>{{ en: "Family member", tr: "Aile sıra no" }}</div>
+          <div>33</div>
+          <div class={Css.Ad}>{{ en: "Folder", tr: "Cilt no" }}</div>
+          <div>40</div>
+          <div class={Css.Ad}>{{ en: "Household", tr: "Hane" }}</div>
+          <div>7</div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+/**
+ * @param {!did.KütükBilgileri} registryInfo
+ */
+FamilyInfoCard.set = (registryInfo) => {
+  setFieldsFrom(dom.div(Css.BilgiKartıİçi).children[0].children, 1, LeftFields, registryInfo);
+  setFieldsFrom(dom.div(Css.BilgiKartıİçi).children[1].children, 1, RightFields, registryInfo);
+};
+
+export default FamilyInfoCard;
diff --git a/birim/kpass/PersonInfoCard.jsx b/birim/kpass/PersonInfoCard.jsx
new file mode 100644
index 00000000..d666998e
--- /dev/null
+++ b/birim/kpass/PersonInfoCard.jsx
@@ -0,0 +1,33 @@
+import Css from "./birim.css";
+import { setFieldsFrom } from "./util";
+import dom from "/lib/util/dom";
+
+/** @const {!Array<string>} */
+const Fields = ["localIdNumber", "first", "last", "dateOfBirth", "cityOfBirth", "gender"];
+
+const PersonInfoCard = () => (
+  <div class={Css.BilgiKartı}>
+    <div class={Css.BilgiKartıİçi}>
+      <div class={Css.Ad}>{{ en: "SSN", tr: "TCKN" }}</div>
+      <div>{{ en: "555-55-5555", tr: "22345678902" }}</div>
+      <div class={Css.Ad}>{{ en: "First name", tr: "Ad" }}</div>
+      <div>{{ en: "John", tr: "Kaan" }}</div>
+      <div class={Css.Ad}>{{ en: "Last name", tr: "Soyad" }}</div>
+      <div>{{ en: "Doe", tr: "Ankara" }}</div>
+      <div class={Css.Ad}>{{ en: "Date of birth", tr: "Doğum tarihi" }}</div>
+      <div>{{ en: "06/12/1975", tr: "12.06.1975" }}</div>
+      <div class={Css.Ad}>{{ en: "City of birth", tr: "Doğum yeri" }}</div>
+      <div>{{ en: "New York", tr: "Ankara" }}</div>
+      <div class={Css.Ad}>{{ en: "Gender", tr: "Cinsiyet" }}</div>
+      <div>{{ en: "M", tr: "E" }}</div>
+    </div>
+  </div>
+);
+
+/**
+ * @param {!did.PersonInfo} personInfo
+ */
+PersonInfoCard.set = (personInfo) => setFieldsFrom(
+  dom.div(Css.BilgiKartıİçi).children, 1, Fields, personInfo);
+
+export default PersonInfoCard;
diff --git a/birim/kpass/RegistryInfoCard.jsx b/birim/kpass/RegistryInfoCard.jsx
new file mode 100644
index 00000000..927eb770
--- /dev/null
+++ b/birim/kpass/RegistryInfoCard.jsx
@@ -0,0 +1,30 @@
+import Css from "./birim.css";
+import { setFieldsFrom } from "./util";
+import dom from "/lib/util/dom";
+
+/** @const {!Array<string>} */
+const Fields = ["il", "ilçe", "mahalle", "tescil"];
+
+const RegistryInfoCard = () => (
+  <div class={Css.BilgiKartı}>
+    <div class={Css.BilgiKartıİçi} id={Css.RegistryInfoCard}>
+      <h7>{{ en: "REGISTRY INFO", tr: "KÜTÜK KAYIT BİLGİLERİ" }}</h7>
+      <div class={Css.Ad}>{{ en: "City", tr: "İl" }}</div>
+      <div>Ankara</div>
+      <div class={Css.Ad}>{{ en: "Town", tr: "İlçe" }}</div>
+      <div>Çankaya</div>
+      <div class={Css.Ad}>{{ en: "District", tr: "Mahalle" }}</div>
+      <div>Anıtkaya Mahallesi</div>
+      <div class={Css.Ad}>{{ en: "Registration date", tr: "Tescil tarihi" }}</div>
+      <div>13.06.1975</div>
+    </div>
+  </div>
+);
+
+/**
+ * @param {!did.KütükBilgileri} kütükBilgileri
+ */
+RegistryInfoCard.set = (kütükBilgileri) => setFieldsFrom(
+  dom.div(Css.RegistryInfoCard).children, 2, Fields, kütükBilgileri);
+
+export default RegistryInfoCard;
diff --git a/birim/kpass/birim.css b/birim/kpass/birim.css
index e1ae24c1..ad67f8d3 100644
--- a/birim/kpass/birim.css
+++ b/birim/kpass/birim.css
@@ -46,7 +46,10 @@
   transform: rotateY(180deg);
 }
 
-/* KPass Carousel */
+/**
+ * KPass Kartlar
+ * @export {Kartlar}
+ */
 #kpc {
   display: flex;
   height: 100%;
@@ -54,6 +57,23 @@
   width: 1400px;
 }
 
+/**
+ * @export {AddressInfoCard}
+ */
+#kpc2 {}
+
+/**
+ * KPass Kartları
+ * @export {RegistryInfoCard}
+ */
+#kpc3 {}
+
+/**
+ * Aile bilgileri kartı
+ * @name {FamilyInfoCard}
+ */
+#kpc4 {}
+
 /**
  * Bilgi kartı
  * @name {BilgiKartı}
@@ -88,6 +108,18 @@
   right: 3px;
 }
 
+/**
+ * KPass Sağ Düğmesi
+ * @export {SağDüğme}
+ */
+#kpsa {}
+
+/**
+ * KPass Sol Düğmesi
+ * @export {SolDüğme}
+ */
+#kpso {}
+
 /**
  * KPass Logo
  * @name {Logo}
@@ -121,7 +153,7 @@
 
 /**
  * Bilgi kartı içeriği
- * @name {BilgiKartıİçi}
+ * @export {BilgiKartıİçi}
  */
 .kpip {
   padding: 3ex 20px;
diff --git a/birim/kpass/birim.js b/birim/kpass/birim.js
deleted file mode 100644
index e93e783c..00000000
--- a/birim/kpass/birim.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Kartlar, Kök, SağDüğme, SolDüğme } from "./birim.jsx";
-import "/lib/did/section.d";
-import dom from '/lib/util/dom';
-
-/** @const {!Set<string>} */
-const Gösterme = new Set([
-  "bls12_381",
-  "commitment",
-  "commitmentR",
-  "secp256k1",
-  "signatureTs",
-  "localIdNumber",
-  "gender"
-]);
-
-/** @type {number} */
-let Kart = 0;
-/** @type {number} */
-let KartSayısı = 3;
-
-/**
- * @param {number} yeniKart
- */
-const kartDeğiştir = (yeniKart) => {
-  /** @const {number} */
-  const width = Kartlar.children[0].getBoundingClientRect().width;
-  Kartlar.style.transform = `translate3d(-${yeniKart * width}px,0,0)`;
-  Kart = yeniKart;
-}
-
-SolDüğme.onclick = () => kartDeğiştir((Kart + (KartSayısı - 1)) % KartSayısı);
-SağDüğme.onclick = () => kartDeğiştir((Kart + 1) % KartSayısı);
-
-/**
- * @param {boolean} bilgiYüzü
- */
-const yüzGöster = (bilgiYüzü) => Kök.classList.toggle("flp", bilgiYüzü);
-
-/**
- * @return {boolean}
- */
-const çevir = () => Kök.classList.toggle("flp");
-
-/**
- * @param {!did.PersonInfo} personInfo
- */
-const personInfoGöster = (personInfo) => {
-  for (const satır of Object.entries(/** @type {!Object<string, string>} */(personInfo)))
-    if (satır[1] && !Gösterme.has(satır[0])) {
-      const birim = dom.adla("kp" + satır[0]);
-      if (birim) birim.innerText = satır[1];
-    }
-
-  dom.adla('kplocalIdNumber').innerText = personInfo.localIdNumber.slice(2);
-  // TODO(KimlikDAO-bot): fix
-  dom.adla("kpgender").innerText = personInfo.gender;
-}
-
-/**
- * @param {?did.ContactInfo} contactInfo
- */
-const contactInfoGöster = (contactInfo) => {
-  if (!contactInfo) return;
-  KartSayısı += 1;
-  dom.adlaGöster("kpibp");
-  for (const satır of Object.entries(/** @type {!Object<string, string>} */(contactInfo)))
-    if (satır[1] && !Gösterme.has(satır[0]))
-      dom.adla("kp" + satır[0]).innerText = satır[0] == "phone"
-        ? dom.telefondanMetne(satır[1])
-        : satır[1];
-}
-
-/**
- * @param {?did.AddressInfo} addressInfo
- */
-const addressInfoGöster = (addressInfo) => {
-  // Şimdilik sadece `TürkiyeAdresi` gösterebiliyoruz.
-  if (!addressInfo || addressInfo.country != "Türkiye") return;
-  /** @const {!did.TürkiyeAdresi} */
-  const adres = /** @type {!did.TürkiyeAdresi} */(addressInfo);
-
-  KartSayısı += 1;
-  dom.adlaGöster("kpabp");
-  /** @type {string} */
-  let mahalle = adres.mahalle;
-  if (mahalle.endsWith("ahallesi"))
-    mahalle = mahalle.slice(0, -6) + ".";
-  dom.adla("kpam").innerText = mahalle;
-  dom.adla("kpasnd").innerText = adres.CSBM + " " + adres.dışKapı +
-    (adres.içKapı && `/${adres.içKapı}`);
-  dom.adla("kpaii").innerText = adres.ilçe + " / " + adres.il;
-  dom.adla("kpau").innerText = adres.country;
-}
-
-/**
- * @param {?did.KütükBilgileri} kütükBilgileri
- */
-const kütükBilgileriGöster = (kütükBilgileri) => {
-  for (const satır of Object.entries(/** @type {!Object<string, string>} */(kütükBilgileri)))
-    if (satır[1] && !Gösterme.has(satır[0]))
-      dom.adla("kp" + satır[0]).innerText = satır[1];
-}
-
-/**
- * @param {!did.DecryptedSections} açıkKPass
- */
-const açıkKPassGöster = (açıkKPass) => {
-  personInfoGöster(/** @type {!did.PersonInfo} */(açıkKPass["personInfo"]));
-  contactInfoGöster(/** @type {?did.ContactInfo} */(açıkKPass["contactInfo"]));
-  addressInfoGöster(/** @type {?did.AddressInfo} */(açıkKPass["addressInfo"]));
-  kütükBilgileriGöster(/** @type {?did.KütükBilgileri} */(açıkKPass["kütükBilgileri"]));
-  Kök.classList.add("flp");
-}
-
-export default {
-  Kök,
-  açıkKPassGöster,
-  çevir,
-  yüzGöster
-};
diff --git a/birim/kpass/birim.jsx b/birim/kpass/birim.jsx
index 43d683b1..c1e9d520 100644
--- a/birim/kpass/birim.jsx
+++ b/birim/kpass/birim.jsx
@@ -1,114 +1,78 @@
 import Kapak from "kastro:./cover.svg.jsx";
 import Css from "./birim.css";
-import OrtakCss from "/birim/ortakcss/birim.jsx";
+import ContactInfoCard from "./ContactInfoCard";
+import FamilyInfoCard from "./FamilyInfoCard";
+import PersonInfoCard from "./PersonInfoCard";
+import RegistryInfoCard from "./RegistryInfoCard";
+import OrtakCss from "/birim/ortakcss/birim";
+import "/lib/did/section.d";
 import dom from "/lib/util/dom";
 
 /** @const {!HTMLDivElement} */
-export const Kartlar = dom.div("kpc");
+const Kartlar = dom.div(Css.Kartlar);
 /** @const {!HTMLDivElement} */
-export const Kök = dom.div(Css.Kök);
+const Kök = dom.div(Css.Kök);
 /** @const {!HTMLAnchorElement} */
-export const SolDüğme = dom.a("kpso");
+const SolDüğme = dom.a(Css.SolDüğme);
 /** @const {!HTMLAnchorElement} */
-export const SağDüğme = dom.a("kpsa");
+const SağDüğme = dom.a(Css.SağDüğme);
 
-const PersonInfoKartı = () => (
-  <div class={Css.BilgiKartı}>
-    <div class={Css.BilgiKartıİçi}>
-      <div class={Css.Ad}>{{ en: "SSN", tr: "TCKN" }}</div>
-      <div id="kplocalIdNumber">{{ en: "555-55-5555", tr: "22345678902" }}</div>
-      <div class={Css.Ad} data-en="Name">Ad</div>
-      <div id="kpfirst">{{ en: "John", tr: "Kaan" }}</div>
-      <div class={Css.Ad} data-en="Last name">Soyad</div>
-      <div id="kplast">{{ en: "Doe", tr: "Ankata" }}</div>
-      <div class={Css.Ad} data-en="Date of birth">Doğum tarihi</div>
-      <div id="kpdateOfBirth">{{ en: "12.06.1975", tr: "12.06.1975" }}</div>
-      <div class={Css.Ad} data-en="City of birth">Doğum yeri</div>
-      <div id="kpcityOfBirth">{{ en: "New York", tr: "Ankara" }}</div>
-      <div class={Css.Ad} data-en="Gender">Cinsiyet</div>
-      <div id="kpgender">{{ en: "M", tr: "E" }}</div>
-    </div>
-  </div>
-);
+/** @type {number} */
+let Kart = 0;
+/** @type {number} */
+let KartSayısı = 3;
 
-const ContactInfoKartı = () => (
-  <div id="kpibp" class={Css.BilgiKartı} style="display:none">
-    <div class={Css.BilgiKartıİçi}>
-      <h7 data-en="CONTACT INFO">İLETİŞİM BİLGİLERİ</h7>
-      <div class={Css.Ad} data-en="E-mail">E-posta</div>
-      <div id="kpemail">abc@abc.com</div>
-      <div class={Css.Ad} data-en="Phone">Telefon</div>
-      <div id="kpphone">05555555555</div>
-    </div>
-  </div>);
+/**
+ * @param {number} yeniKart
+ */
+const kartDeğiştir = (yeniKart) => {
+  /** @const {number} */
+  const width = Kartlar.children[0].getBoundingClientRect().width;
+  Kartlar.style.transform = `translate3d(-${yeniKart * width}px,0,0)`;
+  Kart = yeniKart;
+}
 
-const AddressInfoKartı = () => (
-  <div id="kpabp" class={Css.BilgiKartı} style="display:none">
-    <div class={Css.BilgiKartıİçi}>
-      <h7 data-en="ADDRESS INFO">ADRES BİLGİLERİ</h7>
-      <div class={Css.Ad} id="kpam">Mahalle</div>
-      <div class={Css.Ad} id="kpasnd">Sokak No/Daire</div>
-      <div class={Css.Ad} id="kpaii">İlçe / İl</div>
-      <div class={Css.Ad} id="kpau">Ülke</div>
-    </div>
-  </div>
-);
+/**
+ * @param {{ style: string, piggyback: string }=} props
+ * @return {Promise<string>}
+ */
+const KPass = ({ style, piggyback }) => {
+  SağDüğme.onclick = () => kartDeğiştir((Kart + 1) % KartSayısı);
+  SolDüğme.onclick = () => kartDeğiştir((Kart + (KartSayısı - 1)) % KartSayısı);
 
-const KPass = ({ style }) => (
-  <Kök style={style}>
-    <Css />
-    <Kapak bundleName="KPASS.svg" id={Css.KapakYüzü} />
-    <div id={Css.BilgiYüzü}>
-      <Kartlar>
-        <PersonInfoKartı />
-        <ContactInfoKartı />
-        <AddressInfoKartı />
-        <div class={Css.BilgiKartı}>
-          <div class={Css.BilgiKartıİçi}>
-            <h7 data-en="FAMILY INFO">AİLE BİLGİLERİ</h7>
-            <div class={Css.ÇiftSütun}>
-              <div>
-                <div class={Css.Ad} data-en="Mother’s name">Anne adı</div>
-                <div id="kpannead">Ayşe</div>
-                <div class={Css.Ad} data-en="Father’s name">Baba adı</div>
-                <div id="kpbabaad">Mehmet</div>
-                <div class={Css.Ad} data-en="Marital Status">Medeni Hali</div>
-                <div id="kpmhali" data-en="Single">Bekar</div>
-              </div>
-              <div id={Css.SağSütun}>
-                <div class={Css.Ad} data-en="Family member">Aile sıra no</div>
-                <div id="kpBSN">33</div>
-                <div class={Css.Ad} data-en="Folder">Cilt no</div>
-                <div id="kpcilt">40</div>
-                <div class={Css.Ad} data-en="Household">Hane</div>
-                <div id="kphane">7</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class={Css.BilgiKartı}>
-          <div class={Css.BilgiKartıİçi}>
-            <h7 data-en="REGISTRY INFO">KÜTÜK KAYIT BİLGİLERİ</h7>
-            {/* <div for="kpdin" data-en="Religion">Dini</div>
-            <div id="kpdin">-</div> */}
-            <div class={Css.Ad} data-en="City">İl</div>
-            <div id="kpil">Ankara</div>
-            <div class={Css.Ad} data-en="Town">İlçe</div>
-            <div id="kpilçe">Çankaya</div>
-            <div class={Css.Ad} data-en="District">Mahalle</div>
-            <div id="kpmahalle">Anıtkaya Mahallesi</div>
-            <div class={Css.Ad} data-en="Registration date">Tescil tarihi</div>
-            <div id="kptescil">13.06.1975</div>
-          </div>
-        </div>
-      </Kartlar>
-      <svg id={Css.Logo} height={24} width={24}>
-        <use href={"#" + OrtakCss.Başlık.Logomark} width={24} height={24} />
-      </svg>
-      <SolDüğme href="javascript:" class={[Css.Düğme, "kpso"]} />
-      <SağDüğme href="javascript:" class={[Css.Düğme, "kpsa"]} />
-    </div>
-  </Kök >
-);
+  return (
+    <Kök style={style}>
+      <Css />
+      <Kapak bundleName="KPASS.svg" id={Css.KapakYüzü} piggyback={piggyback} />
+      <div id={Css.BilgiYüzü}>
+        <Kartlar>
+          <PersonInfoCard />
+          <ContactInfoCard />
+          <AddressInfoCard />
+          <FamilyInfoCard />
+          <RegistryInfoCard />
+        </Kartlar>
+        <svg id={Css.Logo} height={24} width={24}>
+          <use href={"#" + OrtakCss.Başlık.Logomark} width={24} height={24} />
+        </svg>
+        <SolDüğme href="javascript:" class={[Css.Düğme, Css.SolDüğme]} />
+        <SağDüğme href="javascript:" class={[Css.Düğme, Css.SağDüğme]} />
+      </div>
+    </Kök >
+  );
+}
+
+/** @const {!HTMLDivElement} */
+KPass.Kök = Kök;
+
+/**
+ * @param {boolean} bilgiYüzü
+ */
+KPass.yüzGöster = (bilgiYüzü) => Kök.classList.toggle("flp", bilgiYüzü);
+
+/**
+ * @return {boolean}
+ */
+KPass.çevir = () => Kök.classList.toggle("flp");
 
 export default KPass;
diff --git a/birim/kpass/util.js b/birim/kpass/util.js
new file mode 100644
index 00000000..8c4888d6
--- /dev/null
+++ b/birim/kpass/util.js
@@ -0,0 +1,12 @@
+/**
+ * @param {!NodeList<!Element>} siblings
+ * @param {number} offset
+ * @param {!Array<string>} fields
+ * @param {!Object<string, string>} data
+ */
+const setFieldsFrom = (siblings, offset, fields, data) => {
+  for (let i = 0; i < fields.length; ++i)
+    siblings[offset + 2 * i].innerText = data[fields[i]];
+}
+
+export { setFieldsFrom };
diff --git a/birim/login/birim.css b/birim/login/birim.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/birim/login/birim.html b/birim/login/birim.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/birim/ortakcss/birim.css b/birim/ortakcss/birim.css
index a72fb04c..7a6d60e1 100644
--- a/birim/ortakcss/birim.css
+++ b/birim/ortakcss/birim.css
@@ -67,6 +67,23 @@ body {
   cursor: default;
 }
 
+/**
+ * @name {More}
+ */
+.more {}
+
+/**
+ * Eylem düğmesi
+ * @name {Act}
+ */
+.act {}
+
+/**
+ * Bilgi düğmesi
+ * @name {Info}
+ */
+.info {}
+
 /**
  * @name {Düğme}
  */
diff --git a/birim/ortakcss/birim.jsx b/birim/ortakcss/birim.jsx
index cb363e74..deef6005 100644
--- a/birim/ortakcss/birim.jsx
+++ b/birim/ortakcss/birim.jsx
@@ -4,20 +4,18 @@ import Cüzdan from "/birim/cüzdan/birim.css";
 import Dil from "/birim/dil/birim.css";
 import KPass from "/birim/kpass/birim.css";
 
-export default Object.assign(
-  (props) => {
-    props.shared = true;
-    Css(props);
-    Başlık(props);
-    Cüzdan(props);
-    Dil(props);
-    KPass(props);
-  },
-  Css,
-  {
-    Başlık,
-    Cüzdan,
-    Dil,
-    KPass
-  }
-);
+const OrtakCss = () => <>
+  <Css shared />
+  <Başlık shared />
+  <Cüzdan shared />
+  <Dil shared />
+  <KPass shared />
+</>;
+
+Object.assign(OrtakCss, Css);
+OrtakCss.Başlık = Başlık;
+OrtakCss.Cüzdan = Cüzdan;
+OrtakCss.Dil = Dil;
+OrtakCss.KPass = KPass;
+
+export default OrtakCss;
diff --git a/birim/telefon/birim.css b/birim/telefon/birim.css
index b98dc230..5d4f5839 100644
--- a/birim/telefon/birim.css
+++ b/birim/telefon/birim.css
@@ -1,3 +1,6 @@
+/**
+ * @name {Kök}
+ */
 #te {
   border-radius: 40px;
   border: 5px solid #333;
@@ -8,6 +11,9 @@
   background: white;
 }
 
+/**
+ * @export {AnaEkran}
+ */
 #tea {
   background-color: #fff;
   border-radius: 40px;
@@ -17,11 +23,17 @@
   width: 100%;
 }
 
+/** @export {Blurred} */
+.tem {}
+
 #tea.tem {
   filter: blur(3px);
 }
 
-/* Bakiye */
+/**
+ * Bakiye
+ * @name {Bakiye}
+ */
 #teb {
   display: flex;
   font-size: 24px;
@@ -29,7 +41,10 @@
   padding-top: 60px;
 }
 
-/* Hesap adı */
+/**
+ * Hesap adı
+ * @name {HesapAdı}
+ */
 #tec {
   display: flex;
   font-size: 9pt;
@@ -37,6 +52,10 @@
   padding-bottom: 20px;
 }
 
+/**
+ * Temisili cüzdanın adresi
+ * @export {Adres}
+ */
 #ted {
   background-color: #E8F9FD;
   border-radius: 13px;
@@ -46,14 +65,20 @@
   width: fit-content;
 }
 
-/* Token NFT seçici */
+/**
+ * Token NFT seçici
+ * @name {CüzdanSekmeler}
+ */
 #tee {
   display: flex;
   font-size: 12px;
   padding-top: 30px;
 }
 
-/* Tokens */
+/**
+ * Tokens
+ * @name {Tokenler}
+ */
 #tef {
   border-bottom: 1px solid #73777B;
   color: #73777B;
@@ -62,7 +87,10 @@
   width: 50%;
 }
 
-/* NFTler */
+/**
+ * NFTler
+ * @name {Nftler}
+ */
 #teg {
   border-bottom: 2px solid #3d67ab;
   color: #3d67ab;
@@ -71,14 +99,17 @@
   width: 50%;
 }
 
-/* NFT örnekleri gösteren bölme */
+/**
+ * NFT örnekleri gösteren bölme
+ * @name {NftGaleri}
+ */
 #teh {
   display: flex;
   justify-content: left;
   padding: 15px 5px;
 }
 
-/* NFT örneği */
+/** @name {NftÖrnek} */
 .tei {
   border-radius: 5px;
   border: 1px solid #ccc;
@@ -88,6 +119,10 @@
   margin: 5px;
 }
 
+/**
+ * Bilgi kutusu
+ * @export {Kutu}
+ */
 #tek {
   background: rgb(255 255 255 / 0.8);
   border-radius: 10px;
@@ -102,32 +137,50 @@
   pointer-events: none;
 }
 
+/** @export {Göster} */
+.teg {}
+
 #tek.teg {
   opacity: 1;
 }
 
+/**
+ * Bilgi kutusu metni
+ * @name {KutuMetni}
+ */
 #tet {
   padding: 35px 10px;
 }
 
+/**
+ * Bilgi kutusu düğmeleri
+ * @name {KutuDüğmeleri}
+ */
 #tes {
   border-top: 0.3px solid #ccc;
   display: flex;
   height: 40px;
 }
 
+/** @name {Hayır} */
+#ten {}
+
 #ten,
 #tey {
   padding: 10px;
   width: 50%;
 }
 
+/** @export {Evet} */
 #tey {
   border-left: 0.3px solid #ccc;
   font-weight: 700;
 }
 
-/* NFT ve altındaki düğme */
+/**
+ * NFT ve altındaki düğme
+ * @export {DüğmeliNft}
+ */
 #tel {
   height: 100%;
   perspective: 750px;
@@ -139,6 +192,10 @@
   filter: blur(3px);
 }
 
+/**
+ * NFT aç kapa düğmesi
+ * @export {NftDüğmesi}
+ */
 #tez {
   align-items: center;
   background-color: #fff;
@@ -178,6 +235,9 @@
   height: 250px;
 }
 
+/** @export {BüyükGöster} */
+.tew {}
+
 #kp.tew {
   transform: translate(65px, 120px) scale(0.5);
 }
diff --git a/birim/telefon/birim.js b/birim/telefon/birim.js
deleted file mode 100644
index ebe99b61..00000000
--- a/birim/telefon/birim.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  Adres,
-  AnaEkran,
-  DüğmeliNft,
-  Kutu,
-  NftDüğmesi
-} from "./birim.jsx";
-import KPass from "/birim/kpass/birim";
-import dom from "/lib/util/dom";
-
-/**
- * @param {?string} adres Telefonda gösterilecek adres.
- */
-const adresGir = (adres = "0xcCc0cCc") =>
-  Adres.innerText = adres.slice(0, 6) + "..." + adres.slice(-4);
-
-/**
- * @param {string} metin İletişim kutusunda gösterilecek metin.
- * @param {string=} sağDüğme
- */
-const kutuGöster = (metin, sağDüğme) => {
-  if (sağDüğme) dom.adla("tey").innerText = sağDüğme;
-  Kutu.style.opacity = "";
-  Kutu.firstElementChild.innerText = metin;
-  Kutu.classList.add("teg");
-  AnaEkran.classList.add("tem");
-  DüğmeliNft.classList.add("tem");
-}
-
-/**
- * Telefondaki iletişim kutusunu kapatır.
- */
-const kutuKapat = () => {
-  Kutu.classList.remove("teg");
-  DüğmeliNft.classList.remove("tem");
-  AnaEkran.classList.remove("tem");
-}
-
-/**
- * Ana sayfa Telefon görselinin içinde temsili nft'yi gösterir.
- *
- * @param {boolean} büyükGöster NFT tek başına kutuda gösterilsin mi.
- * @param {boolean} bilgiYüzü NFT'nin bilgi yüzü gösterilsin.
- */
-const nftGöster = (büyükGöster, bilgiYüzü) => {
-  KPass.yüzGöster(bilgiYüzü);
-
-  const yüzGöster = () => {
-    KPass.yüzGöster(bilgiYüzü);
-    NftDüğmesi.innerText = bilgiYüzü
-      ? dom.i18n({ tr: "Gizle", en: "Encrypt" })
-      : dom.i18n({ tr: "Aç", en: "Decrypt" });
-  }
-  yüzGöster();
-  if (büyükGöster) {
-    KPass.Kök.style.opacity = "";
-    dom.göster(NftDüğmesi);
-    NftDüğmesi.onclick ||= () => {
-      bilgiYüzü = !bilgiYüzü;
-      yüzGöster();
-    }
-  }
-  KPass.Kök.classList.toggle("tew", !büyükGöster);
-  NftDüğmesi.classList.toggle("teg", büyükGöster);
-}
-
-const nftGeriAl = () => {
-  KPass.Kök.classList.add("tex");
-  nftGöster(true, false);
-}
-
-export default {
-  adresGir,
-  kutuGöster,
-  kutuKapat,
-  nftGöster,
-  nftGeriAl,
-};
diff --git a/birim/telefon/birim.jsx b/birim/telefon/birim.jsx
index 60f2a23e..25e6f8c8 100644
--- a/birim/telefon/birim.jsx
+++ b/birim/telefon/birim.jsx
@@ -1,45 +1,117 @@
 import Css from "./birim.css";
-import KPass from "/birim/kpass/birim.jsx";
+import KPass from "/birim/kpass/birim";
 import dom from "/lib/util/dom";
 
 /** @const {!HTMLDivElement} */
-export const Adres = dom.div("ted");
+const Adres = dom.div(Css.Adres);
 /** @const {!HTMLDivElement} */
-export const AnaEkran = dom.div("tea");
+const AnaEkran = dom.div(Css.AnaEkran);
 /** @const {!HTMLDivElement} */
-export const DüğmeliNft = dom.div("tel");
+const DüğmeliNft = dom.div(Css.DüğmeliNft);
 /** @const {!HTMLDivElement} */
-export const Kutu = dom.div("tek");
+const Kutu = dom.div(Css.Kutu);
 /** @const {!HTMLDivElement} */
-export const NftDüğmesi = dom.div("tez");
-
-const Telefon = ({ kpassli = true, style } = {}) => (
-  <div id="te" style={style}>
-    <Css />
-    <AnaEkran>
-      <div id="teb">$1523.74</div>
-      <div id="tec">KimlikDAO</div>
-      <Adres>0xcCc0...0cCc</Adres>
-      <div id="tee">
-        <div id="tef">Tokens</div>
-        <div id="teg">NFTs</div>
-      </div>
-      <div id="teh">
-        <div class="tei"></div>
-      </div>
-    </AnaEkran>
-    <DüğmeliNft>
-      {kpassli && <KPass />}
-      <NftDüğmesi style="display:none" data-en="Encrypt">Gizle</NftDüğmesi>
-    </DüğmeliNft>
-    <Kutu style="opacity:0">
-      <div id="tet"></div>
-      <div id="tes">
-        <div id="ten" data-en="Cancel">Hayır</div>
-        <div id="tey" data-en="Provide">Evet</div>
-      </div>
-    </Kutu>
-  </div >
-);
+const NftDüğmesi = dom.div(Css.NftDüğmesi);
+/** @const {!HTMLDivElement} */
+const Evet = dom.div(Css.Evet);
+
+/**
+ * @param {{ kpassli: boolean, style: string }=} props
+ * @return {Promise<string>}
+ */
+const Telefon = ({ kpassli = true, style }) => {
+  return (
+    <div id={Css.Kök} style={style}>
+      <Css />
+      <AnaEkran>
+        <div id={Css.Bakiye}>$1523.74</div>
+        <div id={Css.HesapAdı}>KimlikDAO</div>
+        <Adres>0xcCc0...0cCc</Adres>
+        <div id={Css.CüzdanSekmeler}>
+          <div id={Css.Tokenler}>{{ en: "Tokens", tr: "Tokenler" }}</div>
+          <div id={Css.Nftler}>{{ en: "NFTs", tr: "NFT’ler" }}</div>
+        </div>
+        <div id={Css.NftGaleri}>
+          <div class={Css.NftÖrnek} />
+        </div>
+      </AnaEkran >
+      <DüğmeliNft>
+        {kpassli && <KPass />}
+        <NftDüğmesi style="display:none">{{ en: "Hide", tr: "Gizle" }}</NftDüğmesi>
+      </DüğmeliNft>
+      <Kutu style="opacity:0">
+        <div id={Css.KutuMetni} />
+        <div id={Css.KutuDüğmeleri}>
+          <div id={Css.Hayır}>{{ en: "Cancel", tr: "Hayır" }}</div>
+          <Evet>{{ en: "Provide", tr: "Evet" }}</Evet>
+        </div>
+      </Kutu>
+    </div >
+  );
+}
+
+/**
+ * @param {?string} adres Telefonda gösterilecek adres.
+ */
+Telefon.adresGir = (adres = "0xcCc0cCc") =>
+  Adres.innerText = adres.slice(0, 6) + "..." + adres.slice(-4);
+
+/**
+ * @param {string} metin İletişim kutusunda gösterilecek metin.
+ * @param {string=} sağDüğme
+ */
+Telefon.kutuGöster = (metin, sağDüğme) => {
+  if (sağDüğme) Evet.innerText = sağDüğme;
+  Kutu.style.opacity = "";
+  Kutu.firstElementChild.innerText = metin;
+  Kutu.classList.add(Css.Göster);
+  AnaEkran.classList.add(Css.Blurred);
+  DüğmeliNft.classList.add(Css.Blurred);
+}
+
+/**
+ * Telefondaki iletişim kutusunu kapatır.
+ */
+Telefon.kutuKapat = () => {
+  Kutu.classList.remove(Css.Göster);
+  DüğmeliNft.classList.remove(Css.Blurred);
+  AnaEkran.classList.remove(Css.Blurred);
+}
+
+/**
+ * Ana sayfa Telefon görselinin içinde temsili nft'yi gösterir.
+ *
+ * @param {boolean} büyükGöster NFT tek başına kutuda gösterilsin mi.
+ * @param {boolean} bilgiYüzü NFT'nin bilgi yüzü gösterilsin.
+ */
+Telefon.nftGöster = (büyükGöster, bilgiYüzü) => {
+  KPass.yüzGöster(bilgiYüzü);
+
+  const yüzGöster = () => {
+    KPass.yüzGöster(bilgiYüzü);
+    NftDüğmesi.innerText = bilgiYüzü
+      ? dom.i18n({ tr: "Gizle", en: "Encrypt" })
+      : dom.i18n({ tr: "Aç", en: "Decrypt" });
+  }
+  yüzGöster();
+  if (büyükGöster) {
+    KPass.Kök.style.opacity = "";
+    dom.göster(NftDüğmesi);
+    NftDüğmesi.onclick ||= () => {
+      bilgiYüzü = !bilgiYüzü;
+      yüzGöster();
+    }
+  }
+  KPass.Kök.classList.toggle(Css.BüyükGöster, !büyükGöster);
+  NftDüğmesi.classList.toggle(Css.Göster, büyükGöster);
+}
+
+/**
+ * Telefon görselinde temsili nft'yi geri alır.
+ */
+Telefon.nftGeriAl = () => {
+  KPass.Kök.classList.add("tex");
+  Telefon.nftGöster(true, false);
+}
 
 export default Telefon;
diff --git a/crate.js b/crate.js
index 2a7a9627..66a0c282 100644
--- a/crate.js
+++ b/crate.js
@@ -14,7 +14,7 @@ const Page = {
   KPassim: { [LangCode.EN]: "kpass", [LangCode.TR]: "kpassim" }
 };
 
-/** @enum {I18nString} */
+/** @enum {I18nString|string} */
 const ExternalPage = {
   Join: {
     [LangCode.EN]: "//join.kimlikdao.org/?en",
@@ -23,7 +23,17 @@ const ExternalPage = {
   Docs: {
     [LangCode.EN]: "//docs.kimlikdao.org",
     [LangCode.TR]: "//docs.kimlikdao.org/v/turkce"
-  }
+  },
+  Blog: {
+    [LangCode.EN]: "//blog.kimlikdao.org/?en",
+    [LangCode.TR]: "//blog.kimlikdao.org/?tr"
+  },
+  X: "//x.com/KimlikDAO",
+  Discord: "//discord.gg/H2wg6pcWXG",
+  Zealy: "//zealy.io/c/kimlikdao",
+  GitHub: "//github.com/KimlikDAO",
+  LinkedIn: "//linkedin.com/company/KimlikDAO/",
+  DappRadar: "//dappradar.com/dapp/kimlikdao-2",
 };
 
 /** @const {Page} */
diff --git a/lib b/lib
index bc208137..bc54b550 160000
--- a/lib
+++ b/lib
@@ -1 +1 @@
-Subproject commit bc208137657a6cea2ad833dd53a1cf417ea47137
+Subproject commit bc54b550f5a23347f769522ac6a6d49def5b4746
diff --git a/package.json b/package.json
index 4dee6022..eaf387fe 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,10 @@
   },
   "devDependencies": {
     "acorn": "^8.14.0",
+    "acorn-jsx": "^5.3.2",
     "acorn-walk": "^8.3.4",
     "astring": "^1.9.0",
-    "bun-types": "^1.1.42",
+    "bun-types": "^1.1.44",
     "css": "^3.0.0",
     "csso-cli": "^4.0.2",
     "google-closure-compiler": "^20240317.0.0",
diff --git a/yenial/sayfa.css b/yenial/sayfa.css
index dbdc0a91..36d7f86a 100644
--- a/yenial/sayfa.css
+++ b/yenial/sayfa.css
@@ -37,6 +37,7 @@
  * @name {NavItem}
  */
 .aln {
+  color: #444;
   padding: 12px 16px;
   cursor: pointer;
   border-radius: 4px;
@@ -83,7 +84,7 @@
 }
 
 /**
- * @name {GalleryGrid}
+ * @export {GalleryGrid}
  */
 #alisg {
   display: grid;
diff --git a/yenial/sayfa.js b/yenial/sayfa.js
deleted file mode 100644
index 0c3de0d6..00000000
--- a/yenial/sayfa.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Cüzdan from "/birim/cüzdan/birim";
-import "/birim/dil/birim";
-import Kpass from "/birim/kpass/birim";
diff --git a/yenial/sayfa.jsx b/yenial/sayfa.jsx
index 6704b0fc..27220178 100644
--- a/yenial/sayfa.jsx
+++ b/yenial/sayfa.jsx
@@ -8,8 +8,9 @@ import Lato700 from "/birim/lato/l700.ttf";
 import OrtakCss from "/birim/ortakcss/birim";
 import { ChainId } from "/lib/crosschain/chains";
 import dom from "/lib/util/dom";
+import { I18nString, LangCode } from "/lib/util/i18n";
 
-/** @const {!HtmlDivElement} */
+/** @const {!HTMLDivElement} */
 export const GalleryGrid = dom.div(Css.GalleryGrid);
 
 /** @const {!Array<ChainId>} */
@@ -67,6 +68,22 @@ const InfoSectionNav = () => (
   </ul>
 );
 
+const Welcome = () =>
+  <div>
+    <h2>{{ en: "Welcome 👋", tr: "Hoşgeldiniz 👋" }}</h2>
+    <p>{{
+      en: "Here is your KPass. You can click on the regenerate button to customize its appearance. For now it contains no data and it's not written on chain. Let's add some data into it.",
+      tr: "İşte KPass'iniz. Görünümünü özelleştirmek için yeniden oluştur düğmesini kullanabilirsiniz. Şu anda içinde veri yok ve zincire yazılmamış. Haydi içine bazı veriler ekleyelim."
+    }}</p>
+    <button class={[OrtakCss.Düğme, OrtakCss.Act]}>
+      {{ en: "Got it!", tr: "Anladım!" }}
+    </button>
+  </div>;
+
+/**
+ * @param {{ Lang: LangCode}=} props
+ * @return {Promise<string>}
+ */
 const Al = ({ Lang }) => (
   <html lang={Lang}>
     <head>
@@ -88,7 +105,10 @@ const Al = ({ Lang }) => (
           <InfoSectionNav />
         </div>
         <div id={Css.RightColumn}>
-          <Gallery />
+          <div>
+            <Welcome />
+            <Gallery />
+          </div>
         </div>
       </div>
     </body>