diff --git "a/Examples \302\267 Bootstrap.html" "b/Examples \302\267 Bootstrap.html"
new file mode 100644
index 0000000..70bfb85
--- /dev/null
+++ "b/Examples \302\267 Bootstrap.html"	
@@ -0,0 +1,405 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<meta name="description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
+<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
+<meta name="generator" content="Jekyll v3.8.5">
+
+<meta name="docsearch:language" content="en">
+<meta name="docsearch:version" content="4.3">
+
+<title>Examples · Bootstrap</title>
+
+<link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/">
+
+<!-- Bootstrap core CSS -->
+<style class="anchorjs"></style><link href="Examples%20%C2%B7%20Bootstrap_files/bootstrap.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<!-- Documentation extras -->
+
+
+<link href="Examples%20%C2%B7%20Bootstrap_files/docs.css" rel="stylesheet">
+
+<!-- Favicons -->
+<link rel="apple-touch-icon" href="https://getbootstrap.com/docs/4.3/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
+<link rel="icon" href="https://getbootstrap.com/docs/4.3/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
+<link rel="icon" href="https://getbootstrap.com/docs/4.3/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
+<link rel="manifest" href="https://getbootstrap.com/docs/4.3/assets/img/favicons/manifest.json">
+<link rel="mask-icon" href="https://getbootstrap.com/docs/4.3/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
+<link rel="icon" href="https://getbootstrap.com/favicon.ico">
+<meta name="msapplication-config" content="/docs/4.3/assets/img/favicons/browserconfig.xml">
+<meta name="theme-color" content="#563d7c">
+
+<!-- Twitter -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@getbootstrap">
+<meta name="twitter:creator" content="@getbootstrap">
+<meta name="twitter:title" content="Examples">
+<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
+<meta name="twitter:image" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social-logo.png">
+
+<!-- Facebook -->
+<meta property="og:url" content="https://getbootstrap.com/docs/4.3/examples/">
+<meta property="og:title" content="Examples">
+<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
+<meta property="og:type" content="website">
+<meta property="og:image" content="http://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
+<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-social.png">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="1200">
+<meta property="og:image:height" content="630">
+
+<script>
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', 'UA-146052-10', 'getbootstrap.com');
+  ga('set', 'anonymizeIp', true);
+  ga('send', 'pageview');
+</script>
+<script async="" src="Examples%20%C2%B7%20Bootstrap_files/analytics.js"></script>
+
+
+  <script id="_carbonads_projs" type="text/javascript" src="Examples%20%C2%B7%20Bootstrap_files/CKYIKKJL.js"></script></head>
+  <body>
+    <a class="skippy sr-only sr-only-focusable" href="#content">
+  <span class="skippy-text">Skip to main content</span>
+</a>
+
+
+    <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
+  <a class="navbar-brand mr-0 mr-md-2" href="https://getbootstrap.com/" aria-label="Bootstrap"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="d-block" viewBox="0 0 612 612" role="img" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path></svg></a>
+
+  <div class="navbar-nav-scroll">
+    <ul class="navbar-nav bd-navbar-nav flex-row">
+      <li class="nav-item">
+        <a class="nav-link " href="https://getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link " href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link active" href="https://getbootstrap.com/docs/4.3/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
+      </li>
+    </ul>
+  </div>
+
+  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
+    <li class="nav-item dropdown">
+      <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        v4.3
+      </a>
+      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
+        <a class="dropdown-item active" href="https://getbootstrap.com/docs/4.3/">Latest (4.3.x)</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/4.2/">v4.2.1</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.1</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
+        <a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
+        <div class="dropdown-divider"></div>
+        <a class="dropdown-item" href="https://getbootstrap.com/docs/versions/">All versions</a>
+      </div>
+    </li>
+
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"></path></svg></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img" focusable="false"><title>Twitter</title><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"></path></svg></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 512" role="img" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"></path><path fill="currentColor" d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z"></path></svg></a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link p-2" href="https://opencollective.com/bootstrap/" target="_blank" rel="noopener" aria-label="Open Collective"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" class="navbar-nav-svg" viewBox="0 0 40 41" role="img" focusable="false"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"></path><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"></path></svg></a>
+    </li>
+  </ul>
+
+  <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://getbootstrap.com/docs/4.3/getting-started/download/">Download</a>
+</header>
+
+
+    
+      <header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
+  <div class="pt-md-3 pb-md-4">
+    <h1 class="bd-title mt-0">Examples</h1>
+    <p class="bd-lead">Quickly get a project started with any of our 
+examples ranging from using parts of the framework to custom components 
+and layouts.</p><a href="https://github.com/twbs/bootstrap/archive/v4.3.1.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a></div>
+  <script async="" src="Examples%20%C2%B7%20Bootstrap_files/carbon.js" id="_carbonads_js"></script><div id="carbonads"><span><span class="carbon-wrap"><a href="https://srv.carbonads.net/ads/click/x/GTND42QMF67D52J7CY7LYKQMCWAIC2QUFTBI5Z3JCWBILK7YCVYDEKQKC6BIP5QLFTSDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;" class="carbon-img" target="_blank" rel="noopener"><img src="Examples%20%C2%B7%20Bootstrap_files/1550855391-cc_dark.png" alt="" style="max-width: 130px;" width="130" height="100" border="0"></a><a href="https://srv.carbonads.net/ads/click/x/GTND42QMF67D52J7CY7LYKQMCWAIC2QUFTBI5Z3JCWBILK7YCVYDEKQKC6BIP5QLFTSDTK3EHJNCLSIZ?segment=placement:getbootstrapcom;" class="carbon-text" target="_blank" rel="noopener">Adobe Creative Cloud for Teams starting at $29.99 per month.</a></span><a href="http://carbonads.net/?utm_source=getbootstrapcom&amp;utm_medium=ad_via_link&amp;utm_campaign=in_unit&amp;utm_term=carbon" class="carbon-poweredby" target="_blank" rel="noopener">ads via Carbon</a></span></div>
+
+</header>
+
+<main class="bd-content p-5" id="content" role="main">
+  
+  <h2 id="custom-components"><span class="bd-content-title">Custom components<a class="anchorjs-link " href="#custom-components" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h2>
+  <p>Brand new components and templates to help folks quickly get 
+started with Bootstrap and demonstrate best practices for adding onto 
+the framework.</p>
+  
+    <div class="row">
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/album/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/album.png,
+                                                  /docs/4.3/assets/img/examples/album@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/album.png" alt="Album screenshot" width="480" height="300">
+          <h5 class="mb-1">Album</h5>
+        </a>
+        <p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/pricing/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/pricing.png,
+                                                  /docs/4.3/assets/img/examples/pricing@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/pricing.png" alt="Pricing screenshot" width="480" height="300">
+          <h5 class="mb-1">Pricing</h5>
+        </a>
+        <p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/checkout/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/checkout.png,
+                                                  /docs/4.3/assets/img/examples/checkout@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/checkout.png" alt="Checkout screenshot" width="480" height="300">
+          <h5 class="mb-1">Checkout</h5>
+        </a>
+        <p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/product/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/product.png,
+                                                  /docs/4.3/assets/img/examples/product@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/product.png" alt="Product screenshot" width="480" height="300">
+          <h5 class="mb-1">Product</h5>
+        </a>
+        <p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/cover/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/cover.png,
+                                                  /docs/4.3/assets/img/examples/cover@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/cover.png" alt="Cover screenshot" width="480" height="300">
+          <h5 class="mb-1">Cover</h5>
+        </a>
+        <p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/carousel/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/carousel.png,
+                                                  /docs/4.3/assets/img/examples/carousel@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/carousel.png" alt="Carousel screenshot" width="480" height="300">
+          <h5 class="mb-1">Carousel</h5>
+        </a>
+        <p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/blog/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/blog.png,
+                                                  /docs/4.3/assets/img/examples/blog@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/blog.png" alt="Blog screenshot" width="480" height="300">
+          <h5 class="mb-1">Blog</h5>
+        </a>
+        <p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/dashboard/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/dashboard.png,
+                                                  /docs/4.3/assets/img/examples/dashboard@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/dashboard.png" alt="Dashboard screenshot" width="480" height="300">
+          <h5 class="mb-1">Dashboard</h5>
+        </a>
+        <p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/sign-in/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sign-in.png,
+                                                  /docs/4.3/assets/img/examples/sign-in@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/sign-in.png" alt="Sign-in screenshot" width="480" height="300">
+          <h5 class="mb-1">Sign-in</h5>
+        </a>
+        <p class="text-muted">Custom form layout and design for a simple sign in form.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/sticky-footer/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sticky-footer.png,
+                                                  /docs/4.3/assets/img/examples/sticky-footer@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/sticky-footer.png" alt="Sticky footer screenshot" width="480" height="300">
+          <h5 class="mb-1">Sticky footer</h5>
+        </a>
+        <p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/sticky-footer-navbar/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/sticky-footer-navbar.png,
+                                                  /docs/4.3/assets/img/examples/sticky-footer-navbar@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="480" height="300">
+          <h5 class="mb-1">Sticky footer navbar</h5>
+        </a>
+        <p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
+      </div>
+    </div>
+  
+
+  <h2 id="framework"><span class="bd-content-title">Framework<a class="anchorjs-link " href="#framework" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h2>
+  <p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
+  
+    <div class="row">
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/starter-template/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/starter-template.png,
+                                                  /docs/4.3/assets/img/examples/starter-template@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/starter-template.png" alt="Starter template screenshot" width="480" height="300">
+          <h5 class="mb-1">Starter template</h5>
+        </a>
+        <p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/grid/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/grid.png,
+                                                  /docs/4.3/assets/img/examples/grid@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/grid.png" alt="Grid screenshot" width="480" height="300">
+          <h5 class="mb-1">Grid</h5>
+        </a>
+        <p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/jumbotron/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/jumbotron.png,
+                                                  /docs/4.3/assets/img/examples/jumbotron@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/jumbotron.png" alt="Jumbotron screenshot" width="480" height="300">
+          <h5 class="mb-1">Jumbotron</h5>
+        </a>
+        <p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
+      </div>
+    </div>
+  
+
+  <h2 id="navbars"><span class="bd-content-title">Navbars<a class="anchorjs-link " href="#navbars" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h2>
+  <p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
+  
+    <div class="row">
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/navbars/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbars.png,
+                                                  /docs/4.3/assets/img/examples/navbars@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/navbars.png" alt="Navbars screenshot" width="480" height="300">
+          <h5 class="mb-1">Navbars</h5>
+        </a>
+        <p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/navbar-static/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-static.png,
+                                                  /docs/4.3/assets/img/examples/navbar-static@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/navbar-static.png" alt="Navbar static screenshot" width="480" height="300">
+          <h5 class="mb-1">Navbar static</h5>
+        </a>
+        <p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/navbar-fixed/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-fixed.png,
+                                                  /docs/4.3/assets/img/examples/navbar-fixed@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/navbar-fixed.png" alt="Navbar fixed screenshot" width="480" height="300">
+          <h5 class="mb-1">Navbar fixed</h5>
+        </a>
+        <p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/navbar-bottom/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/navbar-bottom.png,
+                                                  /docs/4.3/assets/img/examples/navbar-bottom@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/navbar-bottom.png" alt="Navbar bottom screenshot" width="480" height="300">
+          <h5 class="mb-1">Navbar bottom</h5>
+        </a>
+        <p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
+      </div>
+    </div>
+  
+
+  <h2 id="experiments"><span class="bd-content-title">Experiments<a class="anchorjs-link " href="#experiments" aria-label="Anchor" data-anchorjs-icon="#" style="padding-left: 0.375em;"></a></span></h2>
+  <p>Examples that focus on future-friendly features or techniques.</p>
+  
+    <div class="row">
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/floating-labels/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/floating-labels.png,
+                                                  /docs/4.3/assets/img/examples/floating-labels@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/floating-labels.png" alt="Floating labels screenshot" width="480" height="300">
+          <h5 class="mb-1">Floating labels</h5>
+        </a>
+        <p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
+      </div>
+    
+  
+    
+      <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
+        <a href="https://getbootstrap.com/docs/4.3/examples/offcanvas/">
+          <img class="img-thumbnail mb-3" srcset="/docs/4.3/assets/img/examples/offcanvas.png,
+                                                  /docs/4.3/assets/img/examples/offcanvas@2x.png 2x" src="Examples%20%C2%B7%20Bootstrap_files/offcanvas.png" alt="Offcanvas screenshot" width="480" height="300">
+          <h5 class="mb-1">Offcanvas</h5>
+        </a>
+        <p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
+      </div>
+    </div>
+  
+
+
+</main>
+
+    
+
+    <footer class="bd-footer text-muted">
+  <div class="container-fluid p-3 p-md-5">
+    <ul class="bd-footer-links">
+      <li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
+      <li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
+      <li><a href="https://getbootstrap.com/docs/4.3/examples/">Examples</a></li>
+      <li><a href="https://getbootstrap.com/docs/4.3/about/overview/">About</a></li>
+    </ul>
+    <p>Designed and built with all the love in the world by the <a href="https://getbootstrap.com/docs/4.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
+    <p>Currently v4.3.1. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
+  </div>
+</footer>
+
+    <script src="Examples%20%C2%B7%20Bootstrap_files/jquery-3.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+<script>window.jQuery || document.write('<script src="/docs/4.3/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="Examples%20%C2%B7%20Bootstrap_files/bootstrap.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script><script src="Examples%20%C2%B7%20Bootstrap_files/docs.js"></script>
+  
+
+</body></html>
\ No newline at end of file
diff --git a/distro.db b/distro.db
deleted file mode 100644
index 083a6de..0000000
Binary files a/distro.db and /dev/null differ
diff --git a/index.html b/index.html
index 8eebef6..52237b5 100644
--- a/index.html
+++ b/index.html
@@ -210,10 +210,10 @@ <h1>Timely Updates</h1>
                       <p>Do you want app-like updates, as in updates as they come, or OS-like updates as in once in 6 months?</p>
                         <div class="btn-group btn-group-toggle" data-toggle="buttons" href="#chooserCarousel" data-slide="next">
                           <label class="btn btn-lg btn-purple btn-responsive">
-                            <input type="radio" name="updates" value="0"/> As they come
+                            <input type="radio" name="updates" value="0"/> Fast
                           </label>
                           <label class="btn btn-lg btn-purple btn-responsive">
-                            <input type="radio" name="updates" value="1"/> Once in a while
+                            <input type="radio" name="updates" value="1"/> Usual
                           </label>
                         </div>
                     </div>
diff --git a/librehunt.js b/librehunt.js
index c73e369..693394d 100644
--- a/librehunt.js
+++ b/librehunt.js
@@ -1,63 +1,693 @@
-// actual database for distros can be found in static/distro.db (SQLite3 database)
-// TODO change to JSON
-distros = [['Elementary OS', 0, 0, 1, 'mac', 1, 0, 1, 1,
-         "It's own unique Pantheon desktop", 'elementary',
-         'https://elementary.io/', 'https://elementary.io/get-involved#funding',
-          'A fast and open replacement for Windows and macOS'],
-          ['Linux Mint', 0, 1, 1, 'windows', 0, 0, 1, 0, 'Mate, Cinnamon, and XFCE', 'mint', 'https://linuxmint.com/',
-          'https://linuxmint.com/donors.php', 'A modern, elegant and comfortable operating system which is both powerful and easy to use.']
-          , ['Ubuntu', 0, 0, 1, '0', 1, 0, 1, 1, 'A customized GNOME desktop', 'ubuntu', 'https://www.ubuntu.com/download/desktop',
-          'https://www.ubuntu.com/download/desktop/thank-you', 'Linux for Human Beings.'], ['Solus', 1, 0, 0, '0', 1, 0, 1, 0,
-          'Budgie, GNOME, and Mate', 'solus', 'https://getsol.us/', 'https://getsol.us/articles/contributing/getting-involved/en/', 'The Personal OS for Personal Computers.'],
-          ['Zorin OS', 0, 0, 1, 'windows', 1, 0, 0, 1, 'A customized GNOME desktop', 'zorin', 'https://zorinos.com/', 'https://zorinos.com/about/', "A desktop as versatile as it's easy to use."],
-          ['Endless OS', 0, 0, 0, 'windows', 1, 1, 1, 1, 'A GNOME based desktop', 'endless', 'https://endlessos.com/',
-          'https://endlessos.com/community/', 'The operating system that comes with everything your family needs.'],
-          ['PureOS', 1, 0, 1, '0', 1, 1, 0, 0, 'The GNOME Desktop', 'pure', 'https://www.pureos.net/', 'https://puri.sm/products/',
-          'A user friendly, secure and freedom respecting OS for your daily usage.'], ['Trisquel', 1, 1, 1, 'windows', 0, 1, 0, 0,
-          'The Mate Desktop', 'trisquel', 'https://trisquel.info/', 'https://trisquel.info/en/donate',
-          'A fully free operating system for home users, small enterprises and educational centers.'],
-          ['Parabola', 2, 1, 0, '0', 0, 1, 1, 0, 'It comes without one', 'parabola', 'https://www.parabola.nu/',
-          'https://liberapay.com/Parabola/donate', 'A distro giving you complete control over your system, with 100% "libre" software.'],
-          ['Guix', 2, 1, 0, '0', 0, 1, 0, 0, 'It comes without one', 'guix', 'https://www.gnu.org/software/guix/', 'https://www.gnu.org/software/guix/contribute/',
-          'An advanced distribution of the GNU operating system developed by the GNU Project—which respects the freedom of computer users.'], ['Kali Linux', 2, 1, 0, '0', 0, 1, 1, 0,
-          'GNOME, Mate, KDE Plasma, LXQT, Enlightenment, and XFCE', 'kali', 'https://www.kali.org/', 'https://docs.kali.org/contribute', 'Penetration Testing and Ethical Hacking Linux Distribution.'],
-          ['Tails', 2, 0, 1, '0', 0, 1, 0, 0, 'A customized GNOME desktop', 'tails', 'https://tails.boum.org/', 'https://tails.boum.org/donate?r=sidebar',
-          'Privacy for anyone anywhere.'], ['Qubes OS', 2, 0, 1, '0', 0, 1, 0, 0, 'It comes without one', 'qubes', 'https://www.qubes-os.org/',
-          'https://www.qubes-os.org/donate/', 'A reasonably secure operating system'], ['Fedora', 1, 1, 1, '0', 1, 1, 1, 0, 'GNOME, but has spins for Mate, Cinnamon, KDE Plasma, XFCE, and LXQT',
-          'fedora', 'https://getfedora.org/', 'https://fedoraproject.org/wiki/Donations', 'Choose Freedom. Choose Fedora.'], ['Debian', 1, 1, 1, '0', 1, 0, 1, 0, 'GNOME, KDE Plasma, XFCE, LXQT, and Mate', 'debian', 'https://www.debian.org/'
-          , 'https://www.debian.org/donations', "The Universal Operating System. Super stable, with most other distro's being based on this."],
-          ['OpenSUSE Leap', 2, 0, 1, '0', 1, 0, 1, 0, 'Cinnamon, Englightenment, Gnome, KDE Plasma, Mate, XFCE, and LXQT', 'leap', 'https://www.opensuse.org/', 'https://en.opensuse.org/Portal:How_to_participate',
-          'Get the most complete Linux distribution with openSUSE’s latest regular-release version!'], ['Deepin', 0, 0, 0, 'mac', 1, 0, 1, 1, "It's own unique Deepin desktop", 'deepin', 'https://www.deepin.org/en/', 'http://feedback.deepin.org/', 'An elegant, user-friendly and reliable operating system. '], ['Arch', 2, 0, 0, '0', 0, 0, 1, 0, 'It comes without one', 'arch',
-          'https://www.archlinux.org/', 'https://www.archlinux.org/donate/', 'A lightweight and flexible Linux® distribution that tries to Keep It Simple.'], ['Gentoo', 2, 1, 0, '0', 0, 1, 1, 0, 'It comes without one', 'gentoo', 'https://www.gentoo.org/', 'https://www.gentoo.org/get-involved/contribute/',
-          'Welcome to Gentoo, a flexible, source-based Linux distribution that becomes just about any system you need—and much more.'], ['OpenSUSE Tumbleweed', 2, 0, 0, '0', 1, 0, 1, 0, 'Cinnamon, Englightenment, Gnome, KDE Plasma, Mate, XFCE, and LXQT', 'tumbleweed',
-          'https://www.opensuse.org/', 'https://en.opensuse.org/Portal:How_to_participate', "The newest Linux packages with OpenSUSE's rolling release. Fast! Integrated! Stabilized! Tested!"],
-          ['Manjaro', 1, 1, 0, '0', 1, 0, 1, 1, 'XFCE, KDE Plasma, and GNOME, but has community editions for Budgie, Cinnamon, Deepin, Mate, and LXQT', 'manjaro', 'https://manjaro.org/', 'https://manjaro.org/feedback/',
-          'Professional and user-friendly Linux at its best. Evolving and giving the Linux world a new face and operating experience.'], ['Pop!_OS', 1, 0, 1, '0', 1, 0, 1, 1, 'A customized GNOME desktop', 'popos',
-          'https://system76.com/pop', 'https://system76.com/pop/community', 'An OS for the software developer, maker, and computer science professional.'], ['Mageia GNOME', 1, 1, 1, '0', 1, 0, 0, 0, 'KDE Plasma, GNOME, and XFCE',
-          'mageia', 'https://www.mageia.org/en/', 'https://www.mageia.org/en/contribute/', 'Beyond delivering a secure, stable and sustainable operating system, is to also build great tools for people.'],
-          ['KDE Neon', 0, 0, 0, 'windows', 0, 0, 1, 0, 'The KDE Plasma Desktop', 'neon', 'https://neon.kde.org/', 'https://www.kde.org/donations', 'The latest and greatest of the KDE Plasma desktop on the rock solid base of Ubuntu.'],
-          ['Linux Lite', 0, 1, 1, 'windows', 0, 0, 0, 1, 'A customized XFCE desktop', 'linuxlite', 'https://www.linuxliteos.com/', 'https://www.linuxliteos.com/donate.html', "With a Windows-like interface given a design reboot, it's an easy to use and very customizable Ubuntu based distro."], ['Bodhi Linux', 1, 1, 1, '0', 0, 0, 0, 1,
-          'The Enlightenment Desktop', 'bodhi', 'https://www.bodhilinux.com/', 'https://www.bodhilinux.com/donate/', 'Lightweight, with its own in-house Enlightenment desktop, while being based on Ubuntu.'],
-          ['Knoppix', 1, 1, 1, '0', 0, 1, 0, 0, 'The LXDE Desktop', 'knoppix', 'http://www.knopper.net/knoppix/index-en.html', 'http://www.knopper.net/kontakt/index-en.php', 'An operating system designed to flash and run, straight from a CD/Pendrive.'],
-          ['Feren OS', 0, 1, 0, 'windows', 0, 0, 0, 1, 'A customized Cinnamon desktop', 'ferenos', 'https://ferenos.weebly.com/', 'https://gitlab.com/Feren-OS/feren-OS-Bug-Reporting/issues',
-          "Made for today and tomorrow's generation. Fast updates, but stable. Customizable, with unique apps and features."], ['BlackArch', 2, 0, 0, '0', 0, 1, 0, 1,
-          'It comes without one', 'blackarch', 'https://blackarch.org/', 'https://blackarch.org/donate.html', 'BlackArch Linux is an Arch Linux-based penetration testing distribution for penetration testers and security researchers. '],
-          ['Sabayon', 2, 0, 0, '0', 1, 0, 0, 1, 'KDE Plasma, GNOME, Mate, and XFCE', 'sabayon', 'https://www.sabayon.org/', 'https://www.sabayon.org/donate/', 'An "out of the box" experience, while based on Gentoo.'],
-          ['OpenMandriva', 1, 0, 1, 'windows', 0, 0, 0, 0, 'The KDE Plasma Desktop', 'openmandriva', 'https://www.openmandriva.org/', 'https://www.openmandriva.org/en/documentation/association/Donate?q=%2Fdonate',
-          'A pinch of passion, A pinch of innovation, flavoured with fun.'], ['Frugalware', 1, 0, 1, 'windows', 0, 0, 0, 1, 'GNOME, KDE Plasma, XFCE, and Mate', 'frugalware',
-          'https://frugalware.org/', 'https://frugalware.org/donations', 'The design decisions of Slackware, the package manager of Arch, and mixing easy to use with the terminal. A unique combination!'],
-          ['Slackware', 2, 1, 1, '0', 0, 0, 0, 0, 'KDE Plasma, and XFCE', 'slackware', 'http://www.slackware.com/', 'https://www.reddit.com/r/linux/comments/93bkga/slackware_founder_getting_ripped_off_by_slackware/',
-          'Slackware has been around for almost forever! An advanced distro with a goal of being stable and easy to use.'], ['Puppy Linux', 0, 1, 1, 'windows', 0, 0, 0, 1, 'A customized JWM desktop', 'puppylinux',
-          'http://puppylinux.org/main/Overview%20and%20Getting%20Started.htm', 'https://www.paypal.com/donate/?token=36saFjRNFZ7Dr479mP2l14_jcylLi7JPK57tNoOg_wZMRF-DPp5ZgRJqCS-rTi1vugso3m&country.x=PH&locale.x=PH', 'Simple to use, and Grandpa-certified. Comes in many bases and flavours.'], ['Chakra Linux', 1, 0, 0, 'windows', 0, 0, 0, 0,
-          'The KDE Plasma Desktop', 'chakralinux', 'https://www.chakralinux.org/', 'https://www.chakralinux.org/?donate', 'An independent distro with strong ties to QT and the KDE desktop. It tries minimizing uses of other toolkits to stick with QT, and KDE.'],
-          ['Kubuntu', 0, 1, 1, 'windows', 0, 0, 1, 0, 'The KDE Plasma Desktop', 'kubuntu', 'https://kubuntu.org/', 'https://kubuntu.org/contribute-to-kubuntu/', 'The stable, and Ubuntu based KDE distro! Vanilla KDE Plasma combined with the stability and ease of use of Ubuntu!'],
-          ['Xubuntu', 0, 1, 1, '0', 0, 0, 1, 0, 'The XFCE Desktop', 'xubuntu', 'https://xubuntu.org/', 'https://xubuntu.org/donations/', 'The lightweight yet powerful XFCE desktop, now on Ubuntu.'],
-          ['Ubuntu Budgie', 0, 1, 1, '0', 0, 0, 1, 0, 'The Budgie Desktop', 'ubuntubudgie', 'https://ubuntubudgie.org/', 'https://ubuntubudgie.org/contribute', "Solus's home grown Budgie desktop, customizable yet quick, unique yet easy to use, now on Ubuntu!"],
-          ['Ubuntu MATE', 0, 1, 1, 'windows', 0, 0, 1, 1, 'A customized Mate desktop', 'ubuntumate', 'https://ubuntu-mate.org/', 'https://ubuntu-mate.org/donate/', 'Ubuntu Mate - For a retrospective future'],
-          ['NixOS', 2, 1, 0, '0', 0, 1, 0, 0, 'The KDE Plasma Desktop', 'nixos', 'https://nixos.org/', 'https://nixos.org/nixos/community.html', 'The Purely Functional Linux Distribution'],
-          ['Void Linux', 2, 1, 0, '0', 0, 1, 0, 0, 'Enlightenment, Cinnamon, LXDE, Mate, and XFCE', 'void', 'https://voidlinux.org/', 'https://liberapay.com/voidforum/donate', 'Void Linux is an independent Linux distribution that uses the XBPS package manager along with the runit init system.'],
-          ['Mageia XFCE and KDE Plasma', 1, 1, 1, 'Windows', 0, 0, 0, 0, 'KDE Plasma, and XFCE', 'mageia', 'https://www.mageia.org/en/', 'https://www.mageia.org/en/contribute/', 'Beyond delivering a secure, stable and sustainable operating system, is to also build great tools for people.'],
-          ['Alpine Linux', 2, 1, 0, '0', 0, 1, 0, 0, 'It comes without one', 'alpine', 'https://www.alpinelinux.org/', 'https://www.alpinelinux.org/community/', 'Alpine Linux is a security-oriented, lightweight Linux distribution based on musl libc and busybox.']];
+var distros = [
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Elementary OS",
+      "lookalike":"mac",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"A fast and open replacement for Windows and macOS",
+      "touch":1,
+      "desktops":"Its own unique Pantheon desktop",
+      "link":"https://elementary.io/",
+      "linuxexpertise":0,
+      "codename":"elementary",
+      "donate":"https://elementary.io/get-involved#funding",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Linux Mint",
+      "lookalike":"windows",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"A modern, elegant and comfortable operating system which is both powerful and easy to use.",
+      "touch":0,
+      "desktops":"Mate, Cinnamon, and XFCE",
+      "link":"https://linuxmint.com/",
+      "linuxexpertise":0,
+      "codename":"mint",
+      "donate":"https://linuxmint.com/donors.php",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Ubuntu",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"Linux for Human Beings.",
+      "touch":1,
+      "desktops":"A customized GNOME desktop",
+      "link":"https://www.ubuntu.com/download/desktop",
+      "linuxexpertise":0,
+      "codename":"ubuntu",
+      "donate":"https://www.ubuntu.com/download/desktop/thank-you",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Solus",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"The Personal OS for Personal Computers.",
+      "touch":1,
+      "desktops":"Budgie, GNOME, and Mate",
+      "link":"https://solus-project.com/",
+      "linuxexpertise":1,
+      "codename":"solus",
+      "donate":"https://solus-project.com/support/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Zorin OS",
+      "lookalike":"windows",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"A desktop as versatile as it is easy to use.",
+      "touch":1,
+      "desktops":"A customized GNOME desktop",
+      "link":"https://zorinos.com/",
+      "linuxexpertise":0,
+      "codename":"zorin",
+      "donate":"https://zorinos.com/about/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Endless OS",
+      "lookalike":"windows",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"The operating system that comes with everything your family needs.",
+      "touch":1,
+      "desktops":"A GNOME based desktop",
+      "link":"https://endlessos.com/",
+      "linuxexpertise":0,
+      "codename":"endless",
+      "donate":"https://endlessos.com/community/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"PureOS",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"A user friendly, secure and freedom respecting OS for your daily usage.",
+      "touch":1,
+      "desktops":"The GNOME Desktop",
+      "link":"https://www.pureos.net/",
+      "linuxexpertise":1,
+      "codename":"pure",
+      "donate":"https://puri.sm/products/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Trisquel",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"A fully free operating system for home users, small enterprises and educational centers.",
+      "touch":0,
+      "desktops":"The Mate Desktop",
+      "link":"https://trisquel.info/",
+      "linuxexpertise":1,
+      "codename":"trisquel",
+      "donate":"https://trisquel.info/en/donate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Parabola",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"A distro giving you complete control over your system, with 100% 'libre' software.",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://www.parabola.nu/",
+      "linuxexpertise":2,
+      "codename":"parabola",
+      "donate":"https://liberapay.com/Parabola/donate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Guix",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"An advanced distribution of the GNU operating system developed by the GNU Project which respects the freedom of computer users.",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://www.gnu.org/software/guix/",
+      "linuxexpertise":2,
+      "codename":"guix",
+      "donate":"https://www.gnu.org/software/guix/contribute/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Kali Linux",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"Penetration Testing and Ethical Hacking Linux Distribution.",
+      "touch":0,
+      "desktops":"GNOME, Mate, KDE Plasma, LXQT, Enlightenment, and XFCE",
+      "link":"https://www.kali.org/",
+      "linuxexpertise":2,
+      "codename":"kali",
+      "donate":"https://docs.kali.org/contribute",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Tails",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"Privacy for anyone anywhere.",
+      "touch":0,
+      "desktops":"A customized GNOME desktop",
+      "link":"https://tails.boum.org/",
+      "linuxexpertise":2,
+      "codename":"tails",
+      "donate":"https://tails.boum.org/donate?r=sidebar",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Qubes OS",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"A reasonably secure operating system",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://www.qubes-os.org/",
+      "linuxexpertise":2,
+      "codename":"qubes",
+      "donate":"https://www.qubes-os.org/donate/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Fedora",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"Choose Freedom. Choose Fedora.",
+      "touch":1,
+      "desktops":"GNOME, but has spins for Mate, Cinnamon, KDE Plasma, XFCE, and LXQT",
+      "link":"https://getfedora.org/",
+      "linuxexpertise":1,
+      "codename":"fedora",
+      "donate":"https://fedoraproject.org/wiki/Donations",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Debian",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"The Universal Operating System. Super stable, with most other distros being based on this.",
+      "touch":1,
+      "desktops":"GNOME, KDE Plasma, XFCE, LXQT, and Mate",
+      "link":"https://www.debian.org/",
+      "linuxexpertise":1,
+      "codename":"debian",
+      "donate":"https://www.debian.org/donations",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"OpenSUSE Leap",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"Get the most complete Linux distribution with openSUSE's latest regular-release version!",
+      "touch":1,
+      "desktops":"Cinnamon, Englightenment, Gnome, KDE Plasma, Mate, XFCE, and LXQT",
+      "link":"https://www.opensuse.org/",
+      "linuxexpertise":2,
+      "codename":"leap",
+      "donate":"https://en.opensuse.org/Portal:How_to_participate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Deepin",
+      "lookalike":"mac",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"An elegant, user-friendly and reliable operating system. ",
+      "touch":1,
+      "desktops":"Its own unique Deepin desktop",
+      "link":"https://www.deepin.org/en/",
+      "linuxexpertise":0,
+      "codename":"deepin",
+      "donate":"http://feedback.deepin.org/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Arch",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"A lightweight and flexible Linux distribution that tries to Keep It Simple.",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://www.archlinux.org/",
+      "linuxexpertise":2,
+      "codename":"arch",
+      "donate":"https://www.archlinux.org/donate/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Gentoo",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"Welcome to Gentoo, a flexible, source-based Linux distribution that becomes just about any system you need and much more.",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://www.gentoo.org/",
+      "linuxexpertise":2,
+      "codename":"gentoo",
+      "donate":"https://www.gentoo.org/get-involved/contribute/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"OpenSUSE Tumbleweed",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"The newest Linux packages with OpenSUSE's rolling release. Fast! Integrated! Stabilized! Tested!",
+      "touch":1,
+      "desktops":"Cinnamon, Englightenment, Gnome, KDE Plasma, Mate, XFCE, and LXQT",
+      "link":"https://www.opensuse.org/",
+      "linuxexpertise":2,
+      "codename":"tumbleweed",
+      "donate":"https://en.opensuse.org/Portal:How_to_participate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Manjaro",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"Professional and user-friendly Linux at its best. Evolving and giving the Linux world a new face and operating experience.",
+      "touch":1,
+      "desktops":"XFCE, KDE Plasma, and GNOME, but has community editions for Budgie, Cinnamon, Deepin, Mate, and LXQT",
+      "link":"https://manjaro.org/",
+      "linuxexpertise":1,
+      "codename":"manjaro",
+      "donate":"https://manjaro.org/feedback/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Pop!_OS",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"An OS for the software developer, maker, and computer science professional.",
+      "touch":1,
+      "desktops":"A customized GNOME desktop",
+      "link":"https://system76.com/pop",
+      "linuxexpertise":1,
+      "codename":"popos",
+      "donate":"https://system76.com/pop/community",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Mageia GNOME",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Beyond delivering a secure, stable and sustainable operating system, is to also build great tools for people.",
+      "touch":1,
+      "desktops":"KDE Plasma, GNOME, and XFCE",
+      "link":"https://www.mageia.org/en/",
+      "linuxexpertise":1,
+      "codename":"mageia",
+      "donate":"https://www.mageia.org/en/contribute/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"KDE Neon",
+      "lookalike":"windows",
+      "popularity":1,
+      "oldnew":0,
+      "shortdes":"The latest and greatest of the KDE Plasma desktop on the rock solid base of Ubuntu.",
+      "touch":0,
+      "desktops":"The KDE Plasma Desktop",
+      "link":"https://neon.kde.org/",
+      "linuxexpertise":0,
+      "codename":"neon",
+      "donate":"https://www.kde.org/donations",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Linux Lite",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"With a Windows-like interface given a design reboot, it's an easy to use and very customizable Ubuntu based distro.",
+      "touch":0,
+      "desktops":"A customized XFCE desktop",
+      "link":"https://www.linuxliteos.com/",
+      "linuxexpertise":0,
+      "codename":"linuxlite",
+      "donate":"https://www.linuxliteos.com/donate.html",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Bodhi Linux",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Lightweight, with its own in-house Enlightenment desktop, while being based on Ubuntu.",
+      "touch":0,
+      "desktops":"The Enlightenment Desktop",
+      "link":"https://www.bodhilinux.com/",
+      "linuxexpertise":1,
+      "codename":"bodhi",
+      "donate":"https://www.bodhilinux.com/donate/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Knoppix",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"An operating system designed to flash and run, straight from a CD/Pendrive.",
+      "touch":0,
+      "desktops":"The LXDE Desktop",
+      "link":"http://www.knopper.net/knoppix/index-en.html",
+      "linuxexpertise":1,
+      "codename":"knoppix",
+      "donate":"http://www.knopper.net/kontakt/index-en.php",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Feren OS",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Made for today and tomorrow's generation. Fast updates, but stable. Customizable, with unique apps and features.",
+      "touch":0,
+      "desktops":"A customized Cinnamon desktop",
+      "link":"https://ferenos.weebly.com/",
+      "linuxexpertise":0,
+      "codename":"ferenos",
+      "donate":"https://gitlab.com/Feren-OS/feren-OS-Bug-Reporting/issues",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"BlackArch",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"BlackArch Linux is an Arch Linux-based penetration testing distribution for penetration testers and security researchers. ",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://blackarch.org/",
+      "linuxexpertise":2,
+      "codename":"blackarch",
+      "donate":"https://blackarch.org/donate.html",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Sabayon",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"An 'out of the box' experience, while based on Gentoo.",
+      "touch":1,
+      "desktops":"KDE Plasma, GNOME, Mate, and XFCE",
+      "link":"https://www.sabayon.org/",
+      "linuxexpertise":2,
+      "codename":"sabayon",
+      "donate":"https://www.sabayon.org/donate/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"OpenMandriva",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"A pinch of passion, A pinch of innovation, flavoured with fun.",
+      "touch":0,
+      "desktops":"The KDE Plasma Desktop",
+      "link":"https://www.openmandriva.org/",
+      "linuxexpertise":1,
+      "codename":"openmandriva",
+      "donate":"https://www.openmandriva.org/en/documentation/association/Donate?q=%2Fdonate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Frugalware",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"The design decisions of Slackware, the package manager of Arch, and mixing easy to use with the terminal. A unique combination!",
+      "touch":0,
+      "desktops":"GNOME, KDE Plasma, XFCE, and Mate",
+      "link":"https://frugalware.org/",
+      "linuxexpertise":1,
+      "codename":"frugalware",
+      "donate":"https://frugalware.org/donations",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Slackware",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Slackware has been around for almost forever! An advanced distro with a goal of being stable and easy to use.",
+      "touch":0,
+      "desktops":"KDE Plasma, and XFCE",
+      "link":"http://www.slackware.com/",
+      "linuxexpertise":2,
+      "codename":"slackware",
+      "donate":"https://www.reddit.com/r/linux/comments/93bkga/slackware_founder_getting_ripped_off_by_slackware/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Puppy Linux",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Simple to use, and Grandpa-certified. Comes in many bases and flavours.",
+      "touch":0,
+      "desktops":"A customized JWM desktop",
+      "link":"http://puppylinux.org/main/Overview%20and%20Getting%20Started.htm",
+      "linuxexpertise":0,
+      "codename":"puppylinux",
+      "donate":"https://www.paypal.com/donate/?token=36saFjRNFZ7Dr479mP2l14_jcylLi7JPK57tNoOg_wZMRF-DPp5ZgRJqCS-rTi1vugso3m&country.x=PH&locale.x=PH",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Chakra Linux",
+      "lookalike":"windows",
+      "popularity":0,
+      "oldnew":0,
+      "shortdes":"An independent distro with strong ties to QT and the KDE desktop. It tries minimizing uses of other toolkits to stick with QT, and KDE.",
+      "touch":0,
+      "desktops":"The KDE Plasma Desktop",
+      "link":"https://www.chakralinux.org/",
+      "linuxexpertise":1,
+      "codename":"chakralinux",
+      "donate":"https://www.chakralinux.org/?donate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Kubuntu",
+      "lookalike":"windows",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"The stable, and Ubuntu based KDE distro! Vanilla KDE Plasma combined with the stability and ease of use of Ubuntu!",
+      "touch":0,
+      "desktops":"The KDE Plasma Desktop",
+      "link":"https://kubuntu.org/",
+      "linuxexpertise":0,
+      "codename":"kubuntu",
+      "donate":"https://kubuntu.org/contribute-to-kubuntu/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Xubuntu",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"The lightweight yet powerful XFCE desktop, now on Ubuntu.",
+      "touch":0,
+      "desktops":"The XFCE Desktop",
+      "link":"https://xubuntu.org/",
+      "linuxexpertise":0,
+      "codename":"xubuntu",
+      "donate":"https://xubuntu.org/donations/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Ubuntu Budgie",
+      "lookalike":"0",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"Solus's home grown Budgie desktop, customizable yet quick, unique yet easy to use, now on Ubuntu!",
+      "touch":0,
+      "desktops":"The Budgie Desktop",
+      "link":"https://ubuntubudgie.org/",
+      "linuxexpertise":0,
+      "codename":"ubuntubudgie",
+      "donate":"https://ubuntubudgie.org/contribute",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Ubuntu MATE",
+      "lookalike":"windows",
+      "popularity":1,
+      "oldnew":1,
+      "shortdes":"Ubuntu Mate - For a retrospective future",
+      "touch":0,
+      "desktops":"A customized Mate desktop",
+      "link":"https://ubuntu-mate.org/",
+      "linuxexpertise":0,
+      "codename":"ubuntumate",
+      "donate":"https://ubuntu-mate.org/donate/",
+      "customtweaks":1,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"NixOS",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"The Purely Functional Linux Distribution",
+      "touch":0,
+      "desktops":"The KDE Plasma Desktop",
+      "link":"https://nixos.org/",
+      "linuxexpertise":2,
+      "codename":"nixos",
+      "donate":"https://nixos.org/nixos/community.html",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Void Linux",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Void Linux is an independent Linux distribution that uses the XBPS package manager along with the runit init system.",
+      "touch":0,
+      "desktops":"Enlightenment, Cinnamon, LXDE, Mate, and XFCE",
+      "link":"https://voidlinux.org/",
+      "linuxexpertise":2,
+      "codename":"void",
+      "donate":"https://liberapay.com/voidforum/donate",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":1,
+      "matches":[],
+      "name":"Mageia XFCE and KDE Plasma",
+      "lookalike":"Windows",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Beyond delivering a secure, stable and sustainable operating system, is to also build great tools for people.",
+      "touch":0,
+      "desktops":"KDE Plasma, and XFCE",
+      "link":"https://www.mageia.org/en/",
+      "linuxexpertise":1,
+      "codename":"mageia",
+      "donate":"https://www.mageia.org/en/contribute/",
+      "customtweaks":0,
+   },
+   {
+      "notrolling":0,
+      "matches":[],
+      "name":"Alpine Linux",
+      "lookalike":"0",
+      "popularity":0,
+      "oldnew":1,
+      "shortdes":"Alpine Linux is a security-oriented, lightweight Linux distribution based on musl libc and busybox.",
+      "touch":0,
+      "desktops":"It comes without one",
+      "link":"https://www.alpinelinux.org/",
+      "linuxexpertise":2,
+      "codename":"alpine",
+      "donate":"https://www.alpinelinux.org/community/",
+      "customtweaks":0,
+   }
+]
 
 function optionSelected(optionName) {
   var option = document.getElementsByName(optionName);
@@ -95,50 +725,91 @@ function distro(){
   updates = optionSelected("updates");
   lookalike = optionSelected("lookalike");
   touch = optionSelected("touch");
-  secure = optionSelected("secure");
   popularity = optionSelected("popularity");
   customtweaks = optionSelected("customtweaks");
 
   // shuffle the lists inside the list (order of distros)
   distros = shuffle(distros);
   // this will be the order of user input, and distro output
-  var UserOptions=[linuxexpertise,oldnew,updates,lookalike,touch,secure,popularity,customtweaks];
+  //var UserOptions=[linuxexpertise,oldnew,updates,lookalike,touch,popularity,customtweaks];
   var SelectedDistros = [];
+  var SelectedDistrosMatches = [];
 
   // add to selected distro db if technical expertise is lower or equal to user
   for (i = 0; i < 43; i++)  {
-    if (distros[i][1] <= linuxexpertise) {
+    if (distros[i].linuxexpertise <= linuxexpertise) {
       // add distros[i] (the distro) to SelectedDistros list
       SelectedDistros.push(distros[i]);
     }
   }
   for (i = 0; i < SelectedDistros.length; i++) {
-    // 0 or 1 for same or not as user per DistroProperty (if property is a filter one and user clicked doesn't care, give a 0)
-    for (var variable = 0; variable < 8; variable++) {
-      if (variable == 0 || variable == 2 || variable == 3) {
-        if (UserOptions[variable+1]==0 || UserOptions[variable+1] == SelectedDistros[i][variable+2]){
-          SelectedDistros[i].push(0);
-        }
-        else {
-          SelectedDistros[i].push(1);
-        }
-      }
-      else if (UserOptions[variable+1] == SelectedDistros[i][variable+2]){
-        SelectedDistros[i].push(0);
-      }
-      else {
-        SelectedDistros[i].push(1);
-      }
+    // OLD HARDWARE SUPPORT
+    // if old hardware support is "don't care" or it matches with the distro, say it matches with the user choice
+    // has a "don't care" option
+    if (oldnew == 0 || SelectedDistros[i].oldnew == oldnew){
+      SelectedDistros[i].matches.push(0);
+    }
+    else {
+      SelectedDistros[i].matches.push(1);
+    }
+
+    // UPDATES
+    // notrolling basically means stable, and 0 means fast, 1 means stable TODO add slow option
+    if (SelectedDistros[i].notrolling == updates){
+      console.log(SelectedDistros[i].name)
+      console.log("same")
+      SelectedDistros[i].matches.push(0);
+    }
+    else {
+      SelectedDistros[i].matches.push(1);
+    }
+
+    // LOOKALIKE
+    // if lookalike is "don't care" or it matches with the distro, say it matches with the user choice
+    // has a "don't care" option
+    if (lookalike == 0 || SelectedDistros[i].lookalike == lookalike){
+      SelectedDistros[i].matches.push(0);
+    }
+    else {
+      SelectedDistros[i].matches.push(1);
+    }
+
+    // TOUCH
+    // if touch is "don't care" or it matches with the distro, say it matches with the user choice
+    // has a "don't care" option
+    if (touch == 0 || SelectedDistros[i].touch == touch){
+      SelectedDistros[i].matches.push(0);
+    }
+    else {
+      SelectedDistros[i].matches.push(1);
+    }
+
+    // POPULARITY
+    // 1 is more popular, 0 is less popular
+    if (SelectedDistros[i].popularity == popularity){
+      SelectedDistros[i].matches.push(0);
+    }
+    else {
+      SelectedDistros[i].matches.push(1);
+    }
+
+    // CUSTOM TWEAKS
+    // if it's a generic desktop (like gnome), or something different (like elementary)
+    if (SelectedDistros[i].customtweaks == customtweaks){
+      SelectedDistros[i].matches.push(0);
+    }
+    else {
+      SelectedDistros[i].matches.push(1);
     }
     // final part of list of list for distro to add all 0's and 1's (total)
-    SelectedDistros[i].push(SelectedDistros[i][14]+SelectedDistros[i][15]+SelectedDistros[i][16]+SelectedDistros[i][17]+SelectedDistros[i][18]+SelectedDistros[i][19]+SelectedDistros[i][20]+SelectedDistros[i][21]);
+    SelectedDistros[i].matches.push(SelectedDistros[i].matches[0]+SelectedDistros[i].matches[1]+SelectedDistros[i].matches[2]+SelectedDistros[i].matches[3]+SelectedDistros[i].matches[4]+SelectedDistros[i].matches[5]);
     //sort the selected distro db by ascending order by the total part
   }
-  SelectedDistros = SelectedDistros.sort(function(a,b){
-    return a[22] - b[22];
-  });
-  //only take first 20 lists in the selected distro db list
+  SelectedDistros = SelectedDistros.sort((a, b) => parseFloat(a.matches[6]) - parseFloat(b.matches[6]));
+
+  // only take first 20 lists in the selected distro db list
   SelectedDistros.splice(20);
+  console.log(SelectedDistros);
 
   // hide the entire html id questions
   document.getElementById("questions").parentNode.removeChild(document.getElementById("questions"));
@@ -148,34 +819,47 @@ function distro(){
   document.getElementById("distroFoundJumbotron").innerHTML += '<section class="jumbotron mx-5 my-5"><div class="container text-center"><h1 class="jumbotron-heading">Distros found!</h1><p class="lead">All distros found are ordered descending from peak similarity</p></div></section>';
 
   //array with does match, doesn't match
-  match=["Does Match ✔️","Does Not Match ❌"];
+  match=[" ✔️"," ❌"];
+  oldnewsupport=["Doesn't support old hardware","Supports old hardware"]
+  updatesupport =["Fast updates","Stable updates"]
+  touchsupport=["No touch support","Touch support"]
+  popularitysupport=["Less popular","Very popular"]
+  appearancesupport=["A default desktop","A unique aesthetic and design"]
 
   // add card each time in for loop, with distro
   for (j = 0; j < SelectedDistros.length; j++){
     current = SelectedDistros[j];
+    if (current.lookalike == "0"){
+      lookalikesupport = "Lookalike doesn't matter"
+    }
+    else if (current.lookalike == "mac") {
+      lookalikesupport = "Similar aesthetic to macOS"
+    }
+    else {
+      lookalikesupport = "Similar aesthetic to Windows"
+    }
     document.getElementById("distroFound").innerHTML +=
     // card div
     '<div class="card mx-auto my-3 text-center" style="width: 22rem;">'+
       '<div class="align-items-center">'+
         // distro logo
-        '<img class="m-2"src="logos/'+current[10]+'.png" alt="'+current[0]+' Logo" width="200" height=auto>'+
+        '<img class="m-2"src="logos/'+current.codename+'.png" alt="'+current.name+' Logo" width="200" height=auto>'+
       '</div>'+
       // body, including if each category matches or not
       '<div class="card-body">'+
-        '<h5 class="card-title">'+current[0]+'</h5>'+
-        '<p class="card-text font-weight-bold">'+current[13]+'</p>'+
-        '<p class="card-text">Old Hardware Support: '+match[current[14]]+'</p>'+
-        '<p class="card-text">Timely Updates: '+match[current[15]]+'</p>'+
-        '<p class="card-text">Lookalike: '+match[current[16]]+'</p>'+
-        '<p class="card-text">Touch Support: '+match[current[17]]+'</p>'+
-        '<p class="card-text">Extreme Security: '+match[current[18]]+'</p>'+
-        '<p class="card-text">Popularity and Support: '+match[current[19]]+'</p>'+
-        '<p class="card-text">Appearance: '+match[current[20]]+'</p>'+
-        '<a href='+current[11]+' class="btn btn-purple btn-space" target="_blank">Website</a>'+
-        '<a href='+current[12]+' class="btn btn-success btn-space" target="_blank">Contribute</a>'+
+        '<h5 class="card-title">'+current.name+'</h5>'+
+        '<p class="card-text font-weight-bold">'+current.shortdes+'</p>'+
+        '<p class="card-text">'+oldnewsupport[current.oldnew]+match[current.matches[0]]+'</p>'+
+        '<p class="card-text">'+updatesupport[current.notrolling]+match[current.matches[1]]+'</p>'+
+        '<p class="card-text">'+lookalikesupport+match[current.matches[2]]+'</p>'+
+        '<p class="card-text">'+touchsupport[current.touch]+match[current.matches[3]]+'</p>'+
+        '<p class="card-text">'+popularitysupport[current.popularity]+match[current.matches[4]]+'</p>'+
+        '<p class="card-text">'+appearancesupport[current.customtweaks]+match[current.matches[5]]+'</p>'+
+        '<a href='+current.link+' class="btn btn-purple btn-space" target="_blank">Website</a>'+
+        '<a href='+current.donate+' class="btn btn-success btn-space" target="_blank">Contribute</a>'+
       '</div>'+
       // which desktops the distro has
-      '<div class="card-footer">Desktop(s): '+current[9]+'</div>'+
+      '<div class="card-footer">Desktop(s): '+current.desktops+'</div>'+
     '</div>';
   }
   twemoji.parse(document.body);
@@ -189,17 +873,17 @@ function distrolist(){
     '<div class="card mx-auto my-3 text-center" style="width: 22rem;">'+
       '<div class="align-items-center">'+
         // distro logo
-        '<img class="m-2"src="logos/'+distrolist[i][10]+'.png" alt="'+distrolist[i][0]+' logo" width="200" height=auto>'+
+        '<img class="m-2"src="logos/'+distrolist[i].codename+'.png" alt="'+distrolist[i].name+' logo" width="200" height=auto>'+
       '</div>'+
       // card body, including title, description, website button, and contribution button
       '<div class="card-body">'+
-        '<h5 class="card-title">'+distrolist[i][0]+'</h5>'+
-        '<p class="card-text font-weight-bold">'+distrolist[i][13]+'</p>'+
-        '<a href="'+distrolist[i][11]+'" class="btn btn-purple btn-space" target="_blank">Website</a>'+
-        '<a href="'+distrolist[i][12]+'" class="btn btn-success btn-space" target="_blank">Contribute</a>'+
+        '<h5 class="card-title">'+distrolist[i].name+'</h5>'+
+        '<p class="card-text font-weight-bold">'+distrolist[i].shortdes+'</p>'+
+        '<a href="'+distrolist[i].link+'" class="btn btn-purple btn-space" target="_blank">Website</a>'+
+        '<a href="'+distrolist[i].donate+'" class="btn btn-success btn-space" target="_blank">Contribute</a>'+
       '</div>'+
       // card body including each desktop in the distro
-      '<div class="card-footer">Desktop(s): '+distrolist[i][9]+'</div>'+
+      '<div class="card-footer">Desktop(s): '+distrolist[i].desktops+'</div>'+
     '</div>'
   }
 }
