diff --git a/icons.html b/icons.html
new file mode 100644
index 0000000..a21b1b6
--- /dev/null
+++ b/icons.html
@@ -0,0 +1,52 @@
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
+    <title>Bootstrap Example</title>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+
+<body class="p-3 m-0 border-0 bd-example m-0 border-0">
+    <div class="accordion" id="accordionExample">
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
+                    aria-expanded="true" aria-controls="collapseOne">
+                    Simple Icons
+                </button>
+            </h2>
+            <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
+                <div class="ratio" style="--bs-aspect-ratio: 100%">
+                    <iframe src="https://simpleicons.org/"></iframe>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    Octions
+                </button>
+            </h2>
+            <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="ratio" style="--bs-aspect-ratio: 100%">
+                    <iframe src="https://primer.style/foundations/icons"></iframe>
+                </div>
+            </div>
+        </div>
+        <div class="accordion-item">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                    Feather
+                </button>
+            </h2>
+            <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                <div class="ratio" style="--bs-aspect-ratio: 100%">
+                    <iframe src="https://feathericons.com/"></iframe>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
\ No newline at end of file
diff --git a/index.html b/index.html
index 18f6756..e97abc1 100644
--- a/index.html
+++ b/index.html
@@ -9,80 +9,92 @@
 </head>
 
 <body>
-    <div style="max-width: 600px; margin: auto; margin-top: 30px;">
-        <div align="middle">
-            <h1>Static Badge Maker</h1>
-            <a href="http://github.com/dilemmaGX/shields-maker"><img alt="GitHub License"
-                    src="https://custom-icon-badges.demolab.com/badge/License-GPL--3.0-orange.svg?logo=law"></a>
-            <br>
-            <a href="https://github.com/DenverCoder1/custom-icon-badges"><img src="https://custom-icon-badges.demolab.com/badge/Core-custom--icon--badges-0059ff?logo=cpu"
-                    alt="core"></a>
-            <a href="http://github.com/dilemmaGX"><img src="https://custom-icon-badges.demolab.com/badge/Author-DilemmaGX-0059ff?logo=person"
-                    alt="Author - DilemmaGX"></a>
-            <a href="http://github.com/dilemmaGX/shields-maker"><img
-                    src="https://custom-icon-badges.demolab.com/badge/Repo-Shields--maker-0059ff.svg?logo=repo"
-                    alt="Contribute - Shields -- maker"></a>
-            <a href="http://github.com/dilemmaGX/shields-maker"><img
-                    src="https://custom-icon-badges.demolab.com/badge/Version-v1.3.0-0059ff?logo=code" alt="Version - v1.3.0"></a>
-        </div>
-        <br>
-        <div id="alerts"></div>
-        <div class="input-group input-group">
-            <input id="logo" style="width: 20%" type="text" class="form-control" placeholder="Logo">
-            <input id="left" style="width: 20%" type="text" class="form-control" placeholder="Left Text">
-            <input id="right" style="width: 50%" type="text" class="form-control" placeholder="Right Text">
-        </div>
-        <br>
-        <div class="input-group mb-3">
-            <select style="width: 25%;" id="style" class="form-select" aria-label="Default select example">
-                <option value="flat" selected>Flat</option>
-                <option value="flat-square">Flat-Square</option>
-                <option value="plastic">Plastic</option>
-                <option value="for-the-badge">For-The-Badge</option>
-                <option value="social">Social</option>
-            </select>
-            <input id="logoColor" style="width: 25%" type="text" class="form-control" placeholder="Logo Color">
-            <input id="color" style="width: 25%" type="text" class="form-control" placeholder="Theme Color">
-            <input id="link" style="width: 25%" type="text" class="form-control" placeholder="URL">
-        </div>
-        <div align="middle">
-            <button id="g_button" type="button" class="btn btn-primary" style="width: 150px; " onclick="auto()"
-                disabled>Generate</button>
-            <br><br>
-            <div id="o_img" class="img">
-                <a href="http://github.com/DilemmaGX"><img
-                        src="https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff"
-                        alt="Hello - World"></a>
-            </div><br>
-            <div class="btn-group" role="group" aria-label="Copy">
-                <button type="button" class="btn btn-outline-primary" onclick="copy('o_url')">Copy URL</button>
-                <button type="button" class="btn btn-outline-primary" onclick="copy('o_md')">Copy MD</button>
-                <button type="button" class="btn btn-outline-primary" onclick="copy('o_rst')">Copy rSt</button>
-                <button type="button" class="btn btn-outline-primary" onclick="copy('o_ad')">Copy AsciiDoc</button>
-                <button type="button" class="btn btn-outline-primary" onclick="copy('o_html')">Copy HTML</button>
-            </div>
-            <br><br>
-            <div id="o_url" class="url">
-                <h4>URL</h4>
-                <pre><code style="white-space: pre-wrap;word-wrap: break-word;">https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff</code></pre>
-            </div>
-            <div id="o_md" class="md">
-                <h4>Markdown</h4>
-                <pre><code style="white-space: pre-wrap;word-wrap: break-word;">[![Hello](https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff)](http://github.com/DilemmaGX)</code></pre>
-            </div>
-            <div id="o_rst" class="rst">
-                <h4>rSt</h4>
-                <pre><code style="white-space: pre-wrap;word-wrap: break-word;">.. image:: https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff</code></pre>
-            </div>
-            <div id="o_ad" class="ad">
-                <h4>AsciiDoc</h4>
-                <pre><code style="white-space: pre-wrap;word-wrap: break-word;">http://github.com/dilemmagx[image:https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&logo=github&logoColor=ffffff[Static Badge]]</code></pre>
-            </div>
-            <div id="o_html" class="html">
-                <h4>HTML</h4>
-                <pre><code style="white-space: pre-wrap;word-wrap: break-word;">&lt;a href="http://github.com/DilemmaGX"&gt;&lt;img src="https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff" alt="Hello - World"&gt;&lt;/a&gt;</code></pre>
+    <div class="row" style="margin: auto;">
+        <div class="col col-lg-7">
+            <div style="max-width: 600px; margin: auto; margin-top: 30px;">
+                <div align="middle">
+                    <h1>Static Badge Maker</h1>
+                    <a href="http://github.com/dilemmaGX/shields-maker"><img alt="GitHub License"
+                            src="https://custom-icon-badges.demolab.com/badge/License-GPL--3.0-orange.svg?logo=law"></a>
+                    <br>
+                    <a href="https://github.com/DenverCoder1/custom-icon-badges"><img
+                            src="https://custom-icon-badges.demolab.com/badge/Core-custom--icon--badges-0059ff?logo=cpu"
+                            alt="core"></a>
+                    <a href="http://github.com/dilemmaGX"><img
+                            src="https://custom-icon-badges.demolab.com/badge/Author-DilemmaGX-0059ff?logo=person"
+                            alt="Author - DilemmaGX"></a>
+                    <a href="http://github.com/dilemmaGX/shields-maker"><img
+                            src="https://custom-icon-badges.demolab.com/badge/Repo-Shields--maker-0059ff.svg?logo=repo"
+                            alt="Contribute - Shields -- maker"></a>
+                    <a href="http://github.com/dilemmaGX/shields-maker"><img
+                            src="https://custom-icon-badges.demolab.com/badge/Version-v1.3.0-0059ff?logo=code"
+                            alt="Version - v1.3.0"></a>
+                </div>
+                <br>
+                <div id="alerts"></div>
+                <div class="input-group input-group">
+                    <input id="logo" style="width: 20%" type="text" class="form-control" placeholder="Logo">
+                    <input id="left" style="width: 20%" type="text" class="form-control" placeholder="Left Text">
+                    <input id="right" style="width: 50%" type="text" class="form-control" placeholder="Right Text">
+                </div>
+                <br>
+                <div class="input-group mb-3">
+                    <select style="width: 25%;" id="style" class="form-select" aria-label="Default select example">
+                        <option value="flat" selected>Flat</option>
+                        <option value="flat-square">Flat-Square</option>
+                        <option value="plastic">Plastic</option>
+                        <option value="for-the-badge">For-The-Badge</option>
+                        <option value="social">Social</option>
+                    </select>
+                    <input id="logoColor" style="width: 25%" type="text" class="form-control" placeholder="Logo Color">
+                    <input id="color" style="width: 25%" type="text" class="form-control" placeholder="Theme Color">
+                    <input id="link" style="width: 25%" type="text" class="form-control" placeholder="URL">
+                </div>
+                <div align="middle">
+                    <button id="g_button" type="button" class="btn btn-primary" style="width: 150px; " onclick="auto()"
+                        disabled>Generate</button>
+                    <br><br>
+                    <div id="o_img" class="img">
+                        <a href="http://github.com/DilemmaGX"><img
+                                src="https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff"
+                                alt="Hello - World"></a>
+                    </div><br>
+                    <div class="btn-group" role="group" aria-label="Copy">
+                        <button type="button" class="btn btn-outline-primary" onclick="copy('o_url')">Copy URL</button>
+                        <button type="button" class="btn btn-outline-primary" onclick="copy('o_md')">Copy MD</button>
+                        <button type="button" class="btn btn-outline-primary" onclick="copy('o_rst')">Copy rSt</button>
+                        <button type="button" class="btn btn-outline-primary" onclick="copy('o_ad')">Copy
+                            AsciiDoc</button>
+                        <button type="button" class="btn btn-outline-primary" onclick="copy('o_html')">Copy
+                            HTML</button>
+                    </div>
+                    <br><br>
+                    <div id="o_url" class="url">
+                        <h4>URL</h4>
+                        <pre><code style="white-space: pre-wrap;word-wrap: break-word;">https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff</code></pre>
+                    </div>
+                    <div id="o_md" class="md">
+                        <h4>Markdown</h4>
+                        <pre><code style="white-space: pre-wrap;word-wrap: break-word;">[![Hello](https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff)](http://github.com/DilemmaGX)</code></pre>
+                    </div>
+                    <div id="o_rst" class="rst">
+                        <h4>rSt</h4>
+                        <pre><code style="white-space: pre-wrap;word-wrap: break-word;">.. image:: https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff</code></pre>
+                    </div>
+                    <div id="o_ad" class="ad">
+                        <h4>AsciiDoc</h4>
+                        <pre><code style="white-space: pre-wrap;word-wrap: break-word;">http://github.com/dilemmagx[image:https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&logo=github&logoColor=ffffff[Static Badge]]</code></pre>
+                    </div>
+                    <div id="o_html" class="html">
+                        <h4>HTML</h4>
+                        <pre><code style="white-space: pre-wrap;word-wrap: break-word;">&lt;a href="http://github.com/DilemmaGX"&gt;&lt;img src="https://custom-icon-badges.demolab.com/badge/Hello-World-ff9900?style=flat&amp;logo=github&amp;logoColor=ffffff" alt="Hello - World"&gt;&lt;/a&gt;</code></pre>
+                    </div>
+                </div>
             </div>
         </div>
+        <div class="col col-lg-4">
+                <iframe src="./icons.html" height="100%" width="100%" style="margin-top: 30px;"></iframe>
+        </div>
     </div>
     <script>
         var inputElement = document.getElementById("right");
