diff --git a/index.html b/index.html
index e412cfb..7b8726b 100644
--- a/index.html
+++ b/index.html
@@ -3,46 +3,132 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <link rel="stylesheet" href="/src/cs16.css" />
+    <link rel="stylesheet" href="/src/index.css" />
+    <title>cs16.css</title>
   </head>
   <body>
-    <div style="padding: 50px">
+    <header>
+      <div class="top">
+        <h1>cs16.css</h1>
+
+        <div class="links">
+          <a
+            href="https://github.com/ekmas/cs16.css"
+            target="_blank"
+            class="cs-btn gh"
+          ></a>
+          <a
+            href="https://x.com/samuelbreznjak"
+            target="_blank"
+            class="cs-btn x"
+          ></a>
+        </div>
+      </div>
+      <p>CSS library based on Counter Strike 1.6 UI.</p>
+    </header>
+
+    <div style="margin-bottom: 10px" class="installation">
+      <h2>Installation</h2>
+
+      <p>
+        You can install cs16.css simply by pasting this to your html `head` tag:
+      </p>
+
+      <div class="code-block">
+        <div class="inner">
+          <button class="cs-btn">Copy</button>
+
+          <pre><code id="code-block">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/css/cs16.min.css&quot;&gt;</code></pre>
+        </div>
+      </div>
+    </div>
+
+    <main>
       <div>
-        <h3>Button</h3>
+        <h2>Button</h2>
 
         <button class="cs-btn">Button</button>
         <button disabled class="cs-btn">Disabled</button>
-        <button class="cs-btn close"></button>
-      </div>
-      <div>
-        <h3>Hr</h3>
 
-        <hr class="cs-hr" />
-      </div>
-      <div>
-        <h3>Checkbox</h3>
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
 
-        <div class="cs-checkbox">
-          <input id="checkbox" type="checkbox" />
-          <label class="cs-checkbox__label" for="checkbox"
-            >Custom Checkbox</label
-          >
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;button class="cs-btn"&gt;Button&lt;/button&gt;
+&lt;button disabled class="cs-btn"&gt;Disabled&lt;/button&gt;</code></pre>
+          </div>
         </div>
       </div>
       <div>
-        <h3>Input</h3>
+        <h2>Hr</h2>
+
+        <hr class="cs-hr" />
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;hr class=&quot;cs-hr&quot; /&gt;</code></pre>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2>Checkbox</h2>
+
+        <div class="cs-checkbox">
+          <input id="checkbox" type="checkbox" />
+          <label class="cs-checkbox__label" for="checkbox">Checkbox</label>
+        </div>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;div class=&quot;cs-checkbox&quot;&gt;
+  &lt;input id=&quot;checkbox&quot; type=&quot;checkbox&quot; /&gt;
+  &lt;label class=&quot;cs-checkbox__label&quot; for=&quot;checkbox&quot;&gt;Checkbox&lt;/label&gt;
+&lt;/div&gt;</code></pre>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2>Input</h2>
 
         <input class="cs-input" id="input" type="input" />
-        <label class="cs-input__label" for="input">Custom Checkbox</label>
+        <label class="cs-input__label" for="input">First name</label>
 
         <br />
         <br />
 
         <input type="text" value="John Doe" class="cs-input" />
         <input type="text" disabled value="disabled" class="cs-input" />
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;input class=&quot;cs-input&quot; id=&quot;input&quot; type=&quot;input&quot; /&gt;
+&lt;label class=&quot;cs-input__label&quot; for=&quot;input&quot;&gt;First name&lt;/label&gt;
+
+&lt;br /&gt;
+&lt;br /&gt;
+
+&lt;input type=&quot;text&quot; value=&quot;John Doe&quot; class=&quot;cs-input&quot; /&gt;
+&lt;input type=&quot;text&quot; disabled value=&quot;disabled&quot; class=&quot;cs-input&quot; /&gt;</code></pre>
+          </div>
+        </div>
       </div>
       <div>
-        <h3>Select</h3>
+        <h2>Select</h2>
 
         <label class="cs-select__label" for="cars">Choose a car:</label>
         <select class="cs-select" name="cars" id="cars">
@@ -51,9 +137,25 @@
           <option value="opel">Opel</option>
           <option value="audi">Audi</option>
         </select>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;label class=&quot;cs-select__label&quot; for=&quot;cars&quot;&gt;Choose a car:&lt;/label&gt;
+&lt;select class=&quot;cs-select&quot; name=&quot;cars&quot; id=&quot;cars&quot;&gt;
+  &lt;option value=&quot;volvo&quot;&gt;Volvo&lt;/option&gt;
+  &lt;option value=&quot;saab&quot;&gt;Saab&lt;/option&gt;
+  &lt;option value=&quot;opel&quot;&gt;Opel&lt;/option&gt;
+  &lt;option value=&quot;audi&quot;&gt;Audi&lt;/option&gt;
+&lt;/select&gt;</code></pre>
+          </div>
+        </div>
       </div>
       <div>
-        <h3>Radio Group</h3>
+        <h2>Radio Group</h2>
 
         <fieldset class="cs-fieldset">
           <legend>What is your favorite wild animal?</legend>
@@ -74,9 +176,37 @@
             <label for="giraffe">Giraffe</label>
           </div>
         </fieldset>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;fieldset class=&quot;cs-fieldset&quot;&gt;
+  &lt;legend&gt;What is your favorite wild animal?&lt;/legend&gt;
+  &lt;div class=&quot;radio-wrapper&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;elephant&quot; /&gt;
+    &lt;label for=&quot;elephant&quot;&gt;Elephant&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;radio-wrapper&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;monkey&quot; /&gt;
+    &lt;label for=&quot;monkey&quot;&gt;Monkey&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;radio-wrapper&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;cheetah&quot; /&gt;
+    &lt;label for=&quot;cheetah&quot;&gt;Cheetah&lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;radio-wrapper&quot;&gt;
+    &lt;input type=&quot;radio&quot; name=&quot;animal&quot; id=&quot;giraffe&quot; /&gt;
+    &lt;label for=&quot;giraffe&quot;&gt;Giraffe&lt;/label&gt;
+  &lt;/div&gt;
+&lt;/fieldset&gt;</code></pre>
+          </div>
+        </div>
       </div>
       <div>
-        <h3>Slider</h3>
+        <h2>Slider</h2>
 
         <div class="cs-slider">
           <div class="value">
@@ -85,11 +215,29 @@
           </div>
           <div class="ruler"></div>
           <input id="range" type="range" min="1" max="100" value="50" />
-          <label for="range">Elephant</label>
+          <label for="range">Brightness</label>
+        </div>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;div class=&quot;cs-slider&quot;&gt;
+  &lt;div class=&quot;value&quot;&gt;
+    &lt;p&gt;Dark&lt;/p&gt;
+    &lt;p&gt;Light&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;ruler&quot;&gt;&lt;/div&gt;
+  &lt;input id=&quot;range&quot; type=&quot;range&quot; min=&quot;1&quot; max=&quot;100&quot; value=&quot;50&quot; /&gt;
+  &lt;label for=&quot;range&quot;&gt;Brightness&lt;/label&gt;
+&lt;/div&gt;</code></pre>
+          </div>
         </div>
       </div>
       <div>
-        <h3>Dialog</h3>
+        <h2>Dialog</h2>
 
         <section>
           <button
@@ -125,24 +273,142 @@
             </form>
           </dialog>
         </section>
-      </div>
-      <div>
-        <h3>Tooltip</h3>
 
-        <div class="cs-tooltip">
-          Hover over me
-          <span class="text">Tooltip text</span>
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;section&gt;
+  &lt;button
+    type=&quot;button&quot;
+    class=&quot;cs-btn&quot;
+    onclick=&quot;document.querySelector(&apos;.cs-dialog&apos;).showModal();&quot;
+  &gt;
+    Open dialog
+  &lt;/button&gt;
+  &lt;dialog class=&quot;cs-dialog&quot;&gt;
+    &lt;form method=&quot;dialog&quot;&gt;
+      &lt;div class=&quot;heading&quot;&gt;
+        &lt;div class=&quot;wrapper&quot;&gt;
+          &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
+          &lt;p class=&quot;text&quot;&gt;Options&lt;/p&gt;
+        &lt;/div&gt;
+        &lt;button class=&quot;cs-btn close&quot;&gt;&lt;/button&gt;
+      &lt;/div&gt;
+      &lt;div class=&quot;content&quot;&gt;
+        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        Distinctio ad suscipit aut asperiores laudantium error amet
+        sapiente et tempora numquam voluptates, velit sint quos
+        exercitationem unde obcaecati deleniti maiores officia natus
+        ipsa rem fuga commodi esse. Sunt repellendus ipsa illo a
+        accusantium consequuntur nihil dicta necessitatibus porro,
+        saepe, sed repudiandae!
+      &lt;/div&gt;
+      &lt;menu class=&quot;footer-btns&quot;&gt;
+        &lt;button class=&quot;cs-btn&quot;&gt;OK&lt;/button&gt;
+        &lt;button class=&quot;cs-btn&quot;&gt;Cancel&lt;/button&gt;
+        &lt;button class=&quot;cs-btn&quot;&gt;Apply&lt;/button&gt;
+      &lt;/menu&gt;
+    &lt;/form&gt;
+  &lt;/dialog&gt;
+&lt;/section&gt;</code></pre>
+          </div>
         </div>
       </div>
       <div>
-        <h3>Progress Bar</h3>
+        <h2>Tooltip</h2>
+
+        <div class="cs-tooltip">
+          Right
+          <span style="left: 125%" class="text">Tooltip text</span>
+        </div>
+        <br />
+        <div class="cs-tooltip">
+          Left
+          <span style="right: 125%" class="text">Tooltip text</span>
+        </div>
+        <br />
+        <div class="cs-tooltip">
+          Top
+          <span
+            style="bottom: 100%; width: 100px; left: 50%; margin-left: -50px"
+            class="text"
+            >Tooltip text</span
+          >
+          <!-- set some width, and then set margin-left to be half of the width -->
+        </div>
+        <br />
+        <div class="cs-tooltip">
+          Bottom
+          <span
+            style="top: 100%; width: 100px; left: 50%; margin-left: -50px"
+            class="text"
+            >Tooltip text</span
+          >
+          <!-- set some width, and then set margin-left to be half of the width -->
+        </div>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;div class=&quot;cs-tooltip&quot;&gt;
+  Right
+  &lt;span style=&quot;left: 125%&quot; class=&quot;text&quot;&gt;Tooltip text&lt;/span&gt;
+&lt;/div&gt;
+&lt;br /&gt;
+&lt;div class=&quot;cs-tooltip&quot;&gt;
+  Left
+  &lt;span style=&quot;right: 125%&quot; class=&quot;text&quot;&gt;Tooltip text&lt;/span&gt;
+&lt;/div&gt;
+&lt;br /&gt;
+&lt;div class=&quot;cs-tooltip&quot;&gt;
+  Top
+  &lt;span
+    style=&quot;bottom: 100%; width: 100px; left: 50%; margin-left: -50px&quot;
+    class=&quot;text&quot;
+    &gt;Tooltip text&lt;/span
+  &gt;
+  &lt;!-- set some width, and then set margin-left to be half of the width --&gt;
+&lt;/div&gt;
+&lt;br /&gt;
+&lt;div class=&quot;cs-tooltip&quot;&gt;
+  Bottom
+  &lt;span
+    style=&quot;top: 100%; width: 100px; left: 50%; margin-left: -50px&quot;
+    class=&quot;text&quot;
+    &gt;Tooltip text&lt;/span
+  &gt;
+  &lt;!-- set some width, and then set margin-left to be half of the width --&gt;
+&lt;/div&gt;</code></pre>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h2>Progress Bar</h2>
 
         <div class="cs-progress-bar">
           <div style="width: 50%" class="bars"></div>
         </div>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;div class=&quot;cs-progress-bar&quot;&gt;
+  &lt;div style=&quot;width: 50%&quot; class=&quot;bars&quot;&gt;&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          </div>
+        </div>
       </div>
       <div>
-        <h3>Tabs</h3>
+        <h2>Tabs</h2>
 
         <div class="cs-tabs">
           <input
@@ -183,8 +449,57 @@
             <p>Tab content...</p>
           </div>
         </div>
+
+        <div class="code-block">
+          <button class="cs-btn toggle-vision">Show code</button>
+
+          <div class="inner hidden">
+            <button class="cs-btn">Copy</button>
+
+            <pre><code id="code-block">&lt;div class=&quot;cs-tabs&quot;&gt;
+  &lt;input
+    class=&quot;radiotab&quot;
+    name=&quot;tabs&quot;
+    tabindex=&quot;1&quot;
+    type=&quot;radio&quot;
+    id=&quot;tabone&quot;
+    checked=&quot;checked&quot;
+  /&gt;
+  &lt;label class=&quot;label&quot; for=&quot;tabone&quot;&gt;Tab One&lt;/label&gt;
+  &lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
+    &lt;h2&gt;Tab One Content&lt;/h2&gt;
+    &lt;p&gt;Tab content...&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;input
+    class=&quot;radiotab&quot;
+    tabindex=&quot;1&quot;
+    name=&quot;tabs&quot;
+    type=&quot;radio&quot;
+    id=&quot;tabtwo&quot;
+  /&gt;
+  &lt;label class=&quot;label&quot; for=&quot;tabtwo&quot;&gt;Tab Two&lt;/label&gt;
+  &lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
+    &lt;h2&gt;Tab Two Content&lt;/h2&gt;
+    &lt;p&gt;Tab content...&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;input
+    class=&quot;radiotab&quot;
+    tabindex=&quot;1&quot;
+    name=&quot;tabs&quot;
+    type=&quot;radio&quot;
+    id=&quot;tabthree&quot;
+  /&gt;
+  &lt;label class=&quot;label&quot; for=&quot;tabthree&quot;&gt;Tab Three&lt;/label&gt;
+  &lt;div class=&quot;panel&quot; tabindex=&quot;1&quot;&gt;
+    &lt;h2&gt;Tab Three Content&lt;/h2&gt;
+    &lt;p&gt;Tab content...&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          </div>
+        </div>
       </div>
-    </div>
+    </main>
+
     <script type="module" src="./src/main.js"></script>
   </body>
 </html>
