diff --git a/html/index.html b/html/index.html
index 8063d81..6d0e093 100644
--- a/html/index.html
+++ b/html/index.html
@@ -25,6 +25,16 @@
             type="text/css"
         />
 
+        <!-- lodash -->
+        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+
+        <!-- D3.js -->
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"
+            integrity="sha512-XgjkLS0sSzUq88GniFcrLy6zjgVWkBoRFziaLm1Z+gVgkHuO3ieikhD/Q6eNKXAsp88yvBFS0n6ovVlabXftIg=="
+            crossorigin="anonymous"
+        ></script>
+
         <!-- Bootstrap -->
         <link
             href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
@@ -52,9 +62,9 @@ <h1>Shot-Plotter</h1>
         <div id="index">
             <!-- inject:cards -->
             <a href="./ice-hockey" class="card" id="ice-hockey">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="ice-hockey-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 202 87">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="ice-hockey-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 202 87">
   <g id="transformations">
     <clipPath id="clipBorder">
       <path d="M 0 28
@@ -356,41 +366,45 @@ <h1>Shot-Plotter</h1>
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Ice Hockey (NHL)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          200 x 85
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          feet
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Hockey League (2020-2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Ice Hockey (NHL)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    200 x 85
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    feet
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Hockey League (2020-2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Ice Hockey (NHL)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Ice Hockey (NHL)
-    </button>
-  </div>
 </a>
+
             <a href="./ice-hockey-net-nhl" class="card" id="ice-hockey-net-nhl">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="ice-hockey-net-nhl-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="-1 -1 80 56">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="ice-hockey-net-nhl-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="-1 -1 80 56">
   <g id="transformations">
     <clipPath id="clipBorder">
     <rect x="0.5625" y="0.5625" width="76.75" height="50.875" />
@@ -426,41 +440,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Ice Hockey Net (NHL)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          72 x 48 (76.75 x 49.1875 including posts)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          inches
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Hockey League (2021-2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Ice Hockey Net (NHL)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    72 x 48 (76.75 x 49.1875 including posts)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    inches
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Hockey League (2021-2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Ice Hockey Net (NHL)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Ice Hockey Net (NHL)
-    </button>
-  </div>
 </a>
+
             <a href="./ice-hockey-iihf" class="card" id="ice-hockey-iihf">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="ice-hockey-iihf-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 62 32">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="ice-hockey-iihf-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 62 32">
   <g id="transformations">
     <clipPath id="clipBorder">
       <path
@@ -778,41 +796,45 @@ <h6 class="card-title">
       stroke-width="0.1"/></g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Ice Hockey (IIHF)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          60 x 30
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Ice Hockey Federation (2021-2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Ice Hockey (IIHF)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    60 x 30
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Ice Hockey Federation (2021-2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Ice Hockey (IIHF)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Ice Hockey (IIHF)
-    </button>
-  </div>
 </a>
+
             <a href="./floorball" class="card" id="floorball">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id ="floorball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 42 22">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id ="floorball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 42 22">
   <g id="transformations">
     <clipPath id="clipBorder">
       <path d="
@@ -895,41 +917,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Floorball
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          40 x 20
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Floorball Federation (2018)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Floorball
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    40 x 20
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Floorball Federation (2018)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Floorball
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Floorball
-    </button>
-  </div>
 </a>
+
             <a href="./handball" class="card" id="handball">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="handball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 42 22">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="handball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 42 22">
   <g id="transformations">
     <clipPath id="clipBorder">
       <path d="  M 0 0
@@ -1123,41 +1149,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Handball
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          40 x 20
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Handball Federation (2016)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Handball
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    40 x 20
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Handball Federation (2016)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Handball
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Handball
-    </button>
-  </div>
 </a>
+
             <a href="./handball-net" class="card" id="handball-net">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="handball-net-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 318 210">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="handball-net-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 318 210">
   <g id="transformations">
     <clipPath id="clipBorder">
         <rect width="316" height="208" />
@@ -1194,41 +1224,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Handball Net
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          300 x 200 (316 x 208 including posts)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          centimeters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Handball Federation (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Handball Net
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    300 x 200 (316 x 208 including posts)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    centimeters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Handball Federation (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Handball Net
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Handball Net
-    </button>
-  </div>
 </a>
+
             <a href="./volleyball" class="card" id="volleyball">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="volleyball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 29 17">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="volleyball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 29 17">
   <g id="transformations">
     <clipPath id="clipBorder">
       <path d="M 0 0
@@ -1277,41 +1311,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Volleyball
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          18 x 9 (27 x 15 including free zone)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Collegiate Athletic Association (2020-2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Volleyball
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    18 x 9 (27 x 15 including free zone)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Collegiate Athletic Association (2020-2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Volleyball
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Volleyball
-    </button>
-  </div>
 </a>
+
             <a href="./table-tennis" class="card" id="table-tennis">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="table-tennis-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 276 185">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="table-tennis-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 276 185">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect width="274" height="183" />
@@ -1329,41 +1367,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Table Tennis
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          274 x 152.5 (274 x 183 including net overhangs)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          centimeters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Table Tennis Federation (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Table Tennis
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    274 x 152.5 (274 x 183 including net overhangs)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    centimeters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Table Tennis Federation (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Table Tennis
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Table Tennis
-    </button>
-  </div>
 </a>
+
             <a href="./basketball-nba" class="card" id="basketball-nba">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="basketball-nba-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 96 52">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="basketball-nba-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 96 52">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect x="0" y="0" width="94" height="50" />
@@ -1516,41 +1558,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Basketball (NBA)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          94 x 50
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          feet
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Basketball Association (2020-2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Basketball (NBA)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    94 x 50
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    feet
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Basketball Association (2020-2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Basketball (NBA)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Basketball (NBA)
-    </button>
-  </div>
 </a>
+
             <a href="./basketball-ncaa" class="card" id="basketball-ncaa">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="basketball-ncaa-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 96 52">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="basketball-ncaa-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 96 52">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect x="0" y="0" width="94" height="50" />
@@ -1678,41 +1724,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Basketball (NCAA)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          94 x 50
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          feet
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Collegiate Athletic Association (2021-2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Basketball (NCAA)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    94 x 50
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    feet
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Collegiate Athletic Association (2021-2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Basketball (NCAA)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Basketball (NCAA)
-    </button>
-  </div>
 </a>
+
             <a href="./basketball-wnba" class="card" id="basketball-wnba">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="basketball-wnba-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 96 52">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="basketball-wnba-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 96 52">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect x="0" y="0" width="94" height="50" />
@@ -1866,41 +1916,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Basketball (WNBA)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          94 x 50
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          feet
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          Women's National Basketball Association (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Basketball (WNBA)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    94 x 50
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    feet
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    Women's National Basketball Association (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Basketball (WNBA)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Basketball (WNBA)
-    </button>
-  </div>
 </a>
+
             <a href="./korfball" class="card" id="korfball">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id ="korfball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" 0 0 40 20">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id ="korfball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" 0 0 40 20">
             <g id="transformations">
               <clipPath id="clipBorder">
                 <rect x="0" y="0" width="40" height="20"></rect>
@@ -1942,41 +1996,45 @@ <h6 class="card-title">
               </g>
           </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Korfball
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          40 x 20
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Korfball Federation (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Korfball
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    40 x 20
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Korfball Federation (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Korfball
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Korfball
-    </button>
-  </div>
 </a>
+
             <a href="./tennis" class="card" id="tennis">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="tennis-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 90 48">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="tennis-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 90 48">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect id="background" x="0" width="88" y="0" height="46"/>
@@ -1997,41 +2055,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Tennis
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          88 x 46 (78 x 36 for doubles, 78 x 27 for singles)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          feet
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Tennis Federation (2023)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Tennis
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    88 x 46 (78 x 36 for doubles, 78 x 27 for singles)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    feet
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Tennis Federation (2023)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Tennis
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Tennis
-    </button>
-  </div>
 </a>
+
             <a href="./netball-ssn" class="card" id="netball-ssn">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id ="netball-ssn-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" 0 0 30.5 15.25">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id ="netball-ssn-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" 0 0 30.5 15.25">
             <g id="transformations">
               <clipPath id="clipBorder">
                 <rect x="0" y="0" width="30.5" height="15.25"></rect>
@@ -2073,41 +2135,45 @@ <h6 class="card-title">
               </g>
           </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Netball (SSN)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          30.5 x 15.25
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          Suncorp Super Netball (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Netball (SSN)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    30.5 x 15.25
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    Suncorp Super Netball (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Netball (SSN)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Netball (SSN)
-    </button>
-  </div>
 </a>
+
             <a href="./fistball" class="card" id="fistball">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="fistball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 64 34">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="fistball-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 64 34">
   <g id="transformations">
     <clipPath id="clipBorder">
         <rect width="62" height="32" />
@@ -2143,41 +2209,45 @@ <h6 class="card-title">
         Z" fill="transparent" stroke="white" stroke-width="0.125"/>
   </g>
 </svg>
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Fistball
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          50 x 20 (62 x 32 including buffer zone)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Fistball Association (2023)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Fistball
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    50 x 20 (62 x 32 including buffer zone)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Fistball Association (2023)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Fistball
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Fistball
-    </button>
-  </div>
 </a>
+
             <a href="./mens-lacrosse" class="card" id="mens-lacrosse">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="mens-lacrosse-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 112 62">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="mens-lacrosse-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 112 62">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect id="background" x="0" width="110" y="0" height="60"/>
@@ -2311,41 +2381,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Men's Lacrosse
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          110 x 60
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Collegiate Athletic Association (2021-2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Men's Lacrosse
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    110 x 60
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Collegiate Athletic Association (2021-2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Men's Lacrosse
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Men's Lacrosse
-    </button>
-  </div>
 </a>
+
             <a href="./womens-lacrosse" class="card" id="womens-lacrosse">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="womens-lacrosse-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 122 67">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="womens-lacrosse-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 122 67">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect id="background" x="0" width="120" y="0" height="65"/>
@@ -2555,41 +2629,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Women's Lacrosse
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          120 x 65
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Collegiate Athletic Association (2022-2023)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Women's Lacrosse
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    120 x 65
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Collegiate Athletic Association (2022-2023)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Women's Lacrosse
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Women's Lacrosse
-    </button>
-  </div>
 </a>
+
             <a href="./field-hockey" class="card" id="field-hockey">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="field-hockey-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 93.4 57">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="field-hockey-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 93.4 57">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect id="background" x="-0.3" width="92" y="-0.3" height="55.6"/>
@@ -2675,41 +2753,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Field Hockey
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          91.4 x 55
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Hockey Federation (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Field Hockey
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    91.4 x 55
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Hockey Federation (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Field Hockey
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Field Hockey
-    </button>
-  </div>
 </a>
+
             <a href="./football-nfl" class="card" id="football-nfl">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="100%" viewBox=" -1 -1 122 55" id="football-nfl-svg">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="100%" viewBox=" -1 -1 122 55" id="football-nfl-svg">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect width="120" height="53.33333"/>
@@ -2954,41 +3036,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Football (NFL)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          120 x 53.33
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Football League (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Football (NFL)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    120 x 53.33
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Football League (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Football (NFL)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Football (NFL)
-    </button>
-  </div>
 </a>
+
             <a href="./football-ncaa" class="card" id="football-ncaa">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="football-ncaa-svg" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="100%" viewBox=" -1 -1 122 55">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="football-ncaa-svg" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="100%" viewBox=" -1 -1 122 55">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect width="120" height="53.33333"/>
@@ -3233,41 +3319,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Football (NCAA)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          120 x 53.33
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Collegiate Athletic Association (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Football (NCAA)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    120 x 53.33
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Collegiate Athletic Association (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Football (NCAA)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Football (NCAA)
-    </button>
-  </div>
 </a>
+
             <a href="./cfl" class="card" id="cfl">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <?xml version='1.0' encoding='UTF-8' ?>
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <?xml version='1.0' encoding='UTF-8' ?>
 <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="100%" class="svglite" viewBox=" -1 -1 152 67" id="cfl-svg">
 
 <defs>
@@ -3821,41 +3911,45 @@ <h6 class="card-title">
 </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Canadian Football
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          110 x 65 (150 x 65 including goal areas)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          Canadian Football League (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Canadian Football
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    110 x 65 (150 x 65 including goal areas)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    Canadian Football League (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Canadian Football
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Canadian Football
-    </button>
-  </div>
 </a>
+
             <a href="./cfl-pre-2022" class="card" id="cfl-pre-2022">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <?xml version='1.0' encoding='UTF-8' ?>
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <?xml version='1.0' encoding='UTF-8' ?>
 <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width="100%" class="svglite" viewBox=" -1 -1 152 67" id="cfl-pre-2022-svg">
 <defs>
   <style type='text/css'><![CDATA[
@@ -4430,41 +4524,45 @@ <h6 class="card-title">
 </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Canadian Football (CFL pre-2022 & Amateur)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          110 x 65 (150 x 65 including goal areas)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          Canadian Football League (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Canadian Football (CFL pre-2022 & Amateur)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    110 x 65 (150 x 65 including goal areas)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    Canadian Football League (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Canadian Football (CFL pre-2022 & Amateur)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Canadian Football (CFL pre-2022 & Amateur)
-    </button>
-  </div>
 </a>
+
             <a href="./soccer-ncaa" class="card" id="soccer-ncaa">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="soccer-ncaa-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 122 77">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="soccer-ncaa-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 122 77">
   <g id="transformations">
     <clipPath id="clipBorder">
       <path d="  M 0 0
@@ -4558,59 +4656,54 @@ <h6 class="card-title">
         Z" stroke-width="0.1389" stroke="white" fill="transparent"></path>
   </g>
 </svg>
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Soccer (NCAA)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          120 x 75
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          National Collegiate Athletic Association (2022 & 2023)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Soccer (NCAA)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    120 x 75
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    National Collegiate Athletic Association (2022 & 2023)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Soccer (NCAA)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Soccer (NCAA)
-    </button>
-  </div>
 </a>
+
             <a href="./soccer-ifab-m" class="card" id="soccer-ifab-m">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="soccer-ifab-m-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 107 70">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="soccer-ifab-m-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 107 70">
   <g id="transformations">
     <clipPath id="clipBorder">
-      <path d="  M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" />
+      <rect width="105" height="68" />
     </clipPath>
-    <path id="background" d="
-        M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" stroke="transparent" fill="#036602"></path>
+    <rect id="background" width="105" height="68" stroke="transparent" fill="#036602" />
     <path id="halfway-line" d="M 52.5 0 L 52.5 68" stroke-width="0.12" stroke="white"></path>
     <circle id="halfway-circle" cx="52.5" cy="34" r="9.15" fill="transparent" stroke-width="0.12" stroke="white">
     </circle>
-    <g id="left-goal-area">
+    <g id="left-goal">
       <path id="left-eighteen-yd-box" d="
         M 0 13.84
         L 16.5 13.84
@@ -4632,16 +4725,16 @@ <h6 class="card-title">
       <path id="goal-line" d="
       M 0 30.34
       L 0 37.66" stroke-width="0.75" stroke="white" />
-      <path id="top-left-corner" d="
+      <path id="left-top-corner" d="
       M 1 0
       A 1 1 1 0 1 0 1
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
-      <path id="top-right-corner" d="
+      <path id="left-bottom-corner" d="
       M 0 67
       A 1 1 0 0 1 1 68
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
     </g>
-    <g id="right-goal-area" transform="translate(105 68) rotate(180)">
+    <g id="right-goal" transform="translate(105 68) rotate(180)">
        <path id="right-eighteen-yd-box" d="
         M 0 13.84
         L 16.5 13.84
@@ -4663,58 +4756,57 @@ <h6 class="card-title">
       <path id="right-goal-line" d="
       M 0 30.34
       L 0 37.66" stroke-width="0.75" stroke="white" />
-      <path id="top-right-corner" d="
+      <path id="right-top-corner" d="
       M 1 0
       A 1 1 1 0 1 0 1
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
-      <path id="top-right-corner" d="
+      <path id="right-bottom-corner" d="
       M 0 67
       A 1 1 0 0 1 1 68
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
     </g>
-        <path id="outside-perimeter" d="
-        M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" stroke-width="0.12" stroke="white" fill="transparent"></path>
+         <rect id="outside-perimeter" width="105" height="68" stroke-width="0.12" stroke="white" fill="transparent" />
   </g>
 </svg>
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Football (IFAB)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          105 x 68
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Football Association Board (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Football (IFAB)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    105 x 68
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Football Association Board (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Football (IFAB)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Football (IFAB)
-    </button>
-  </div>
 </a>
+
             <a href="./soccer-ifab-yd" class="card" id="soccer-ifab-yd">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="soccer-ifab-yd-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 117 77">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="soccer-ifab-yd-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 117 77">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect width="115" height="75" />
@@ -4788,41 +4880,45 @@ <h6 class="card-title">
          <rect id="outside-perimeter" width="115" height="75" stroke-width="0.138" stroke="white" fill="transparent" />
   </g>
 </svg>
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Soccer (IFAB)
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          115 x 75
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          yards
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          International Football Association Board (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Soccer (IFAB)
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    115 x 75
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    yards
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    International Football Association Board (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Soccer (IFAB)
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Soccer (IFAB)
-    </button>
-  </div>
 </a>
+
             <a href="./australian-rules" class="card" id="australian-rules">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="australian-rules-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 164 134">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="australian-rules-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 164 134">
   <g id="transformations">
     <clipPath id="clipBorder">
     <path id="background" d="
@@ -4911,41 +5007,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Australian Rules Football
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          162 x 132
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          AFL (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Australian Rules Football
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    162 x 132
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    AFL (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Australian Rules Football
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Australian Rules Football
-    </button>
-  </div>
 </a>
+
             <a href="./rugby-union" class="card" id="rugby-union">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="rugby-union-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 130 72">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="rugby-union-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 130 72">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect width="128" height="70" />
@@ -5052,41 +5152,45 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Rugby Union
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          100 x 70 (128 x 70 including in-goal areas)
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          World Rugby (2021)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Rugby Union
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    100 x 70 (128 x 70 including in-goal areas)
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    World Rugby (2021)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Rugby Union
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Rugby Union
-    </button>
-  </div>
 </a>
+
             <a href="./gaa" class="card" id="gaa">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <svg id="gaa-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 147 92">
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <svg id="gaa-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 147 92">
   <g id="transformations">
     <clipPath id="clipBorder">
       <rect width="145" height="90" />
@@ -5139,37 +5243,41 @@ <h6 class="card-title">
   </g>
 </svg>
 
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      Hurling and Gaelic Football
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          145 x 90
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          meters
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          Gaelic Athletic Association (2022)
-        </span>
-      </div>
+        <!-- endinject -->
+    </div>
+    <div class="card-body">
+        <h6 class="card-title">
+            Hurling and Gaelic Football
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    145 x 90
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    meters
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    Gaelic Athletic Association (2022)
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            Hurling and Gaelic Football
+        </button>
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      Hurling and Gaelic Football
-    </button>
-  </div>
 </a>
+
             <!-- endinject -->
         </div>
         <hr />
@@ -5190,6 +5298,11 @@ <h6 class="card-title">
             element.setAttribute("onclick", "");
         }
     </script>
+    <script type="module" src="/setup.js"></script>
+    <script type="module">
+        import { indexSetup } from "/setup.js";
+        indexSetup();
+    </script>
     <footer class="center">
         <span>
             Website built by An Nguyen primarily using D3.js. Source code and
diff --git a/html/soccer-ifab-m.html b/html/soccer-ifab-m.html
index ffdc97c..6200577 100644
--- a/html/soccer-ifab-m.html
+++ b/html/soccer-ifab-m.html
@@ -117,22 +117,13 @@ <h1>Shot-Plotter</h1>
                         <svg id="soccer-ifab-m-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 107 70">
   <g id="transformations">
     <clipPath id="clipBorder">
-      <path d="  M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" />
+      <rect width="105" height="68" />
     </clipPath>
-    <path id="background" d="
-        M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" stroke="transparent" fill="#036602"></path>
+    <rect id="background" width="105" height="68" stroke="transparent" fill="#036602" />
     <path id="halfway-line" d="M 52.5 0 L 52.5 68" stroke-width="0.12" stroke="white"></path>
     <circle id="halfway-circle" cx="52.5" cy="34" r="9.15" fill="transparent" stroke-width="0.12" stroke="white">
     </circle>
-    <g id="left-goal-area">
+    <g id="left-goal">
       <path id="left-eighteen-yd-box" d="
         M 0 13.84
         L 16.5 13.84
@@ -154,16 +145,16 @@ <h1>Shot-Plotter</h1>
       <path id="goal-line" d="
       M 0 30.34
       L 0 37.66" stroke-width="0.75" stroke="white" />
-      <path id="top-left-corner" d="
+      <path id="left-top-corner" d="
       M 1 0
       A 1 1 1 0 1 0 1
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
-      <path id="top-right-corner" d="
+      <path id="left-bottom-corner" d="
       M 0 67
       A 1 1 0 0 1 1 68
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
     </g>
-    <g id="right-goal-area" transform="translate(105 68) rotate(180)">
+    <g id="right-goal" transform="translate(105 68) rotate(180)">
        <path id="right-eighteen-yd-box" d="
         M 0 13.84
         L 16.5 13.84
@@ -185,21 +176,16 @@ <h1>Shot-Plotter</h1>
       <path id="right-goal-line" d="
       M 0 30.34
       L 0 37.66" stroke-width="0.75" stroke="white" />
-      <path id="top-right-corner" d="
+      <path id="right-top-corner" d="
       M 1 0
       A 1 1 1 0 1 0 1
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
-      <path id="top-right-corner" d="
+      <path id="right-bottom-corner" d="
       M 0 67
       A 1 1 0 0 1 1 68
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
     </g>
-        <path id="outside-perimeter" d="
-        M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" stroke-width="0.12" stroke="white" fill="transparent"></path>
+         <rect id="outside-perimeter" width="105" height="68" stroke-width="0.12" stroke="white" fill="transparent" />
   </g>
 </svg>
                         <!-- endinject -->
diff --git a/index.css b/index.css
index 8dafd20..010d05f 100644
--- a/index.css
+++ b/index.css
@@ -40,6 +40,18 @@ table tbody, table thead, .example, .reorder-ghost, .grey-btn, .shot-info, .whit
 #index .card .bold {
   font-weight: 400;
 }
+#index .card label {
+  padding-left: 1em;
+  padding-right: 0.25rem;
+  font-variant-caps: all-petite-caps;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+#index .card input {
+  width: 3rem;
+  margin: 0.1rem 0;
+  margin-right: 0.4rem;
+}
 #index a {
   color: black;
   text-decoration: none;
diff --git a/js/custom-setups/card-setup.js b/js/custom-setups/card-setup.js
new file mode 100644
index 0000000..61f6fb4
--- /dev/null
+++ b/js/custom-setups/card-setup.js
@@ -0,0 +1,51 @@
+export function customCardSetup(s) {
+    if (_.startsWith(s.id, "soccer-ifab")) {
+        customSoccerCardSetup(s.id, s.appearance.width, s.appearance.height);
+    }
+}
+
+function customSoccerCardSetup(id, width, height) {
+    const card = d3.select(`#${id}`).attr("href", undefined);
+    const dim = card.select(".card-text").select(".dimensions");
+    const inYards = _.endsWith(id, "-yd");
+    dim.selectAll("*").remove();
+    dim.append("div").attr("class", "bold").text("Dimensions: ");
+    const widthField = dim.append("div");
+    widthField.append("label").attr("for", `${id}-width`).text("Width:");
+    const minWidth = inYards ? 100 : 90;
+    const maxWidth = inYards ? 130 : 120;
+    widthField
+        .append("input")
+        .attr("id", `${id}-width`)
+        .attr("type", "number")
+        .attr("name", `${id}-width`)
+        .attr("min", minWidth)
+        .attr("max", maxWidth)
+        .attr("value", width);
+    widthField.append("span").text(`(min: ${minWidth}, max: ${maxWidth})`);
+
+    const heightField = dim.append("div");
+    heightField.append("label").attr("for", `${id}-height`).text("Height:");
+    const minHeight = inYards ? 50 : 45;
+    const maxHeight = inYards ? 100 : 90;
+    heightField
+        .append("input")
+        .attr("id", `${id}-height`)
+        .attr("type", "number")
+        .attr("name", `${id}-height`)
+        .attr("min", minHeight)
+        .attr("max", maxHeight)
+        .attr("value", height);
+    heightField.append("span").text(`(min: ${minHeight}, max: ${maxHeight})`);
+
+    card.select("button").on("click", function () {
+        const width = d3.select(`#${id}-width`).property("value");
+        const height = d3.select(`#${id}-height`).property("value");
+        console.log(width, height);
+        let params = new URLSearchParams({
+            width: width,
+            height: height,
+        });
+        window.location.href = `./${id}?${params.toString()}`;
+    });
+}
diff --git a/js/custom-setups/config-setup.js b/js/custom-setups/config-setup.js
new file mode 100644
index 0000000..6a57c86
--- /dev/null
+++ b/js/custom-setups/config-setup.js
@@ -0,0 +1,39 @@
+export function customConfigSetup(config) {
+    if (_.startsWith(config.id, "soccer-ifab")) {
+        return customSoccerConfigSetup(config);
+    }
+}
+
+function customSoccerConfigSetup(config) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const w = parseInt(urlParams.get("width")) || config.appearance.width;
+    const h = parseInt(urlParams.get("height")) || config.appearance.height;
+    config.appearance.width = w;
+    config.appearance.height = h;
+    config.goalCoords = [
+        [0, h / 2],
+        [w, h / 2],
+    ];
+
+    const ice_hockey = {
+        width: "200",
+        circleR: "2",
+        polyR: "2.75",
+        fontSize: "0.15", //rem
+        strokeWidth: "0.5", //px
+        heatMapScale: 1.25,
+    };
+
+    const scaleFactor = parseFloat(ice_hockey.width) / Math.max(w, h);
+    for (const key in ice_hockey) {
+        if (key === "heatMapScale") {
+            config.appearance[key] = parseFloat(ice_hockey[key]) * scaleFactor;
+        } else {
+            const val = parseFloat(ice_hockey[key]) / scaleFactor;
+            const suffix =
+                key === "fontSize" ? "rem" : key === "strokeWidth" ? "px" : "";
+            config.appearance[key] = `${val.toFixed(3)}${suffix}`;
+        }
+    }
+    return config;
+}
diff --git a/js/custom-setups/playing-area-setup.js b/js/custom-setups/playing-area-setup.js
new file mode 100644
index 0000000..1126e0c
--- /dev/null
+++ b/js/custom-setups/playing-area-setup.js
@@ -0,0 +1,90 @@
+import { sport, cfgSportA } from "../../setup.js";
+
+export function customPlayingAreaSetup() {
+    if (_.startsWith(sport, "soccer-ifab")) {
+        customSoccerPlayingAreaSetup();
+    }
+}
+
+function customSoccerPlayingAreaSetup() {
+    const inYards = _.endsWith(sport, "-yd");
+
+    const minWidth = inYards ? 100 : 90;
+    const maxWidth = inYards ? 130 : 120;
+
+    const minHeight = inYards ? 50 : 45;
+    const maxHeight = inYards ? 100 : 90;
+
+    let w = cfgSportA.width;
+    w = w < minWidth || w > maxWidth ? 0 : w;
+    let h = cfgSportA.height;
+    h = h < minHeight || h > maxHeight || h >= w ? 0 : h;
+
+    const halfw = w / 2;
+    const halfh = h / 2;
+
+    const goal = inYards ? 8 : 7.32;
+    const halfgoal = goal / 2;
+    const eighteenyd = inYards ? 18 : 16.5;
+    const goalarea = inYards ? 6 : 5.5;
+    const arc = inYards ? 8 : 7.312;
+
+    const svg = d3.select(`#${sport}-svg`);
+    svg.attr("viewBox", `-1 -1 ${w + 2} ${h + 2}`);
+
+    const trans = svg.select("#transformations");
+
+    trans.select("clipPath").select("rect").attr("width", w).attr("height", h);
+    trans.select("#background").attr("width", w).attr("height", h);
+
+    trans.select("#halfway-line").attr("d", `M ${halfw} 0 L ${halfw} ${h}`);
+    trans.select("#halfway-circle").attr("cx", halfw).attr("cy", halfh);
+
+    trans.select("#outside-perimeter").attr("width", w).attr("height", h);
+
+    for (const dir of ["left", "right"]) {
+        const ga = trans.select(`#${dir}-goal`);
+        if (dir === "right") {
+            ga.attr("transform", `translate(${w} ${h}) rotate(180)`);
+        }
+
+        ga.select(`#${dir}-eighteen-yd-box`).attr(
+            "d",
+            `M  0 ${halfh - halfgoal - eighteenyd}
+             L 18 ${halfh - halfgoal - eighteenyd}
+             L 18 ${halfh + halfgoal + eighteenyd}
+             L  0 ${halfh + halfgoal + eighteenyd}`
+        );
+
+        ga.select(`#${dir}-goal-area`).attr(
+            "d",
+            `M 0 ${halfh - halfgoal - goalarea}
+             L 6 ${halfh - halfgoal - goalarea}
+             L 6 ${halfh + halfgoal + goalarea}
+             L 0 ${halfh + halfgoal + goalarea}`
+        );
+
+        ga.select(`#${dir}-penalty-kick-mark`).attr("cy", halfh);
+
+        ga.select(`#${dir}-goal-arc`).attr(
+            "d",
+            `M 18 ${halfh - arc}
+             A 10 10 1 0 1 18 ${halfh + arc}
+            `
+        );
+
+        ga.select(`#${dir}-goal-line`).attr(
+            "d",
+            `M 0 ${halfh - halfgoal}
+             L 0 ${halfh + halfgoal}
+            `
+        );
+
+        ga.select(`#${dir}-bottom-corner`).attr(
+            "d",
+            `M 0 ${h - 1}
+             A 1 1 0 0 1 1 ${h}
+            `
+        );
+    }
+}
diff --git a/js/playing-area.js b/js/playing-area.js
index e60bdd1..eee72ba 100644
--- a/js/playing-area.js
+++ b/js/playing-area.js
@@ -1,84 +1,9 @@
 import { sport, cfgSportA, cfgSportCustomSetup } from "../setup.js";
-
-function generateCustomSoccerSVG() {
-    console.log("hit");
-    const inYards = _.endsWith(sport, "-yd");
-    const w = cfgSportA.width;
-    const h = cfgSportA.height;
-    const halfw = w / 2;
-    const halfh = h / 2;
-
-    const goal = inYards ? 8 : 7.32;
-    const halfgoal = goal / 2;
-    const eighteenyd = inYards ? 18 : 16.5;
-    const goalarea = inYards ? 6 : 5.5;
-    const arc = inYards ? 8 : 7.312;
-
-    const svg = d3.select(`#${sport}-svg`);
-    svg.attr("viewBox", `-1 -1 ${w + 2} ${h + 2}`);
-
-    const trans = svg.select("#transformations");
-
-    trans.select("clipPath").select("rect").attr("width", w).attr("height", h);
-    trans.select("#background").attr("width", w).attr("height", h);
-
-    trans.select("#halfway-line").attr("d", `M ${halfw} 0 L ${halfw} ${h}`);
-    trans.select("#halfway-circle").attr("cx", halfw).attr("cy", halfh);
-
-    trans.select("#outside-perimeter").attr("width", w).attr("height", h);
-
-    for (const dir of ["left", "right"]) {
-        const ga = trans.select(`#${dir}-goal`);
-        if (dir === "right") {
-            ga.attr("transform", `translate(${w} ${h}) rotate(180)`);
-        }
-
-        ga.select(`#${dir}-eighteen-yd-box`).attr(
-            "d",
-            `M  0 ${halfh - halfgoal - eighteenyd}
-             L 18 ${halfh - halfgoal - eighteenyd}
-             L 18 ${halfh + halfgoal + eighteenyd}
-             L  0 ${halfh + halfgoal + eighteenyd}`
-        );
-
-        ga.select(`#${dir}-goal-area`).attr(
-            "d",
-            `M 0 ${halfh - halfgoal - goalarea}
-             L 6 ${halfh - halfgoal - goalarea}
-             L 6 ${halfh + halfgoal + goalarea}
-             L 0 ${halfh + halfgoal + goalarea}`
-        );
-
-        ga.select(`#${dir}-penalty-kick-mark`).attr("cy", halfh);
-
-        ga.select(`#${dir}-goal-arc`).attr(
-            "d",
-            `M 18 ${halfh - arc}
-             A 10 10 1 0 1 18 ${halfh + arc}
-            `
-        );
-
-        ga.select(`#${dir}-goal-line`).attr(
-            "d",
-            `M 0 ${halfh - halfgoal}
-             L 0 ${halfh + halfgoal}
-            `
-        );
-
-        ga.select(`#${dir}-bottom-corner`).attr(
-            "d",
-            `M 0 ${h - 1}
-             A 1 1 0 0 1 1 ${h}
-            `
-        );
-    }
-}
+import { customPlayingAreaSetup } from "./custom-setups/playing-area-setup.js";
 
 function setUpPlayingArea() {
     if (cfgSportCustomSetup) {
-        if (_.startsWith(sport, "soccer-ifab")) {
-            generateCustomSoccerSVG();
-        }
+        customPlayingAreaSetup();
     }
     // dimensions of padding, window and playing area
     const padding = 20;
@@ -97,7 +22,6 @@ function setUpPlayingArea() {
 
     if (paWidth / paHeight < 1.3) {
         const adjFactor = 0.6 + (Math.max(paWidth / paHeight, 1) - 1);
-        console.log(adjFactor);
         resize = (Number(resize) * adjFactor).toFixed(1);
     }
 
diff --git a/preprocessing/card.html b/preprocessing/card.html
index f3a8cad..0ca869b 100644
--- a/preprocessing/card.html
+++ b/preprocessing/card.html
@@ -1,34 +1,37 @@
 <a href="./<!-- @echo ID -->" class="card" id="<!-- @echo ID -->">
-  <div class="card-header">
-    <!-- inject:cardplayingarea -->
-    <!-- endinject -->
-  </div>
-  <div class="card-body">
-    <h6 class="card-title">
-      <!-- @echo NAME -->
-    </h6>
-    <div class="card-text">
-      <div>
-        <span class="bold">Dimensions: </span><span>
-          <!-- @echo DIMS -->
-        </span>
-      </div>
-      <div>
-        <span class="bold">Units: </span><span>
-          <!-- @echo UNITS -->
-        </span>
-      </div>
-      <div>
-        <span class="bold">Specifications: </span><span>
-          <!-- @echo SPECS -->
-        </span>
-      </div>
+    <div class="card-header">
+        <!-- inject:cardplayingarea -->
+        <!-- endinject -->
     </div>
-  </div>
-  <div class="card-footer text-center white-bg">
-    <button type="button" class="grey-btn card-btn">
-      Go To
-      <!-- @echo NAME -->
-    </button>
-  </div>
-</a>
\ No newline at end of file
+    <div class="card-body">
+        <h6 class="card-title">
+            <!-- @echo NAME -->
+        </h6>
+        <div class="card-text">
+            <div class="dimensions">
+                <span class="bold">Dimensions: </span
+                ><span>
+                    <!-- @echo DIMS -->
+                </span>
+            </div>
+            <div>
+                <span class="bold">Units: </span
+                ><span>
+                    <!-- @echo UNITS -->
+                </span>
+            </div>
+            <div>
+                <span class="bold">Specifications: </span
+                ><span>
+                    <!-- @echo SPECS -->
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="card-footer text-center white-bg">
+        <button type="button" class="grey-btn card-btn">
+            Go To
+            <!-- @echo NAME -->
+        </button>
+    </div>
+</a>
diff --git a/preprocessing/index-base.html b/preprocessing/index-base.html
index c36119c..05a9c9b 100644
--- a/preprocessing/index-base.html
+++ b/preprocessing/index-base.html
@@ -23,6 +23,16 @@
             type="text/css"
         />
 
+        <!-- lodash -->
+        <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
+
+        <!-- D3.js -->
+        <script
+            src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.0/d3.min.js"
+            integrity="sha512-XgjkLS0sSzUq88GniFcrLy6zjgVWkBoRFziaLm1Z+gVgkHuO3ieikhD/Q6eNKXAsp88yvBFS0n6ovVlabXftIg=="
+            crossorigin="anonymous"
+        ></script>
+
         <!-- Bootstrap -->
         <link
             href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
@@ -69,6 +79,11 @@ <h1>Shot-Plotter</h1>
             element.setAttribute("onclick", "");
         }
     </script>
+    <script type="module" src="/setup.js"></script>
+    <script type="module">
+        import { indexSetup } from "/setup.js";
+        indexSetup();
+    </script>
     <footer class="center">
         <span>
             Website built by An Nguyen primarily using D3.js. Source code and
diff --git a/preprocessing/index.scss b/preprocessing/index.scss
index 87066e9..e2207a7 100644
--- a/preprocessing/index.scss
+++ b/preprocessing/index.scss
@@ -54,6 +54,20 @@ $orange-solid: rgba(234, 142, 72, 1);
         .bold {
             font-weight: 400;
         }
+
+        label {
+            padding-left: 1em;
+            padding-right: 0.25rem;
+            font-variant-caps: all-petite-caps;
+            font-weight: 500;
+            font-size: 0.9rem;
+        }
+
+        input {
+            width: 3rem;
+            margin: 0.1rem 0;
+            margin-right: 0.4rem;
+        }
     }
 
     a {
diff --git a/resources/soccer-ifab-m.svg b/resources/soccer-ifab-m.svg
index 17d05b2..2adaa43 100644
--- a/resources/soccer-ifab-m.svg
+++ b/resources/soccer-ifab-m.svg
@@ -1,22 +1,13 @@
 <svg id="soccer-ifab-m-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewBox=" -1 -1 107 70">
   <g id="transformations">
     <clipPath id="clipBorder">
-      <path d="  M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" />
+      <rect width="105" height="68" />
     </clipPath>
-    <path id="background" d="
-        M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" stroke="transparent" fill="#036602"></path>
+    <rect id="background" width="105" height="68" stroke="transparent" fill="#036602" />
     <path id="halfway-line" d="M 52.5 0 L 52.5 68" stroke-width="0.12" stroke="white"></path>
     <circle id="halfway-circle" cx="52.5" cy="34" r="9.15" fill="transparent" stroke-width="0.12" stroke="white">
     </circle>
-    <g id="left-goal-area">
+    <g id="left-goal">
       <path id="left-eighteen-yd-box" d="
         M 0 13.84
         L 16.5 13.84
@@ -38,16 +29,16 @@
       <path id="goal-line" d="
       M 0 30.34
       L 0 37.66" stroke-width="0.75" stroke="white" />
-      <path id="top-left-corner" d="
+      <path id="left-top-corner" d="
       M 1 0
       A 1 1 1 0 1 0 1
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
-      <path id="top-right-corner" d="
+      <path id="left-bottom-corner" d="
       M 0 67
       A 1 1 0 0 1 1 68
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
     </g>
-    <g id="right-goal-area" transform="translate(105 68) rotate(180)">
+    <g id="right-goal" transform="translate(105 68) rotate(180)">
        <path id="right-eighteen-yd-box" d="
         M 0 13.84
         L 16.5 13.84
@@ -69,20 +60,15 @@
       <path id="right-goal-line" d="
       M 0 30.34
       L 0 37.66" stroke-width="0.75" stroke="white" />
-      <path id="top-right-corner" d="
+      <path id="right-top-corner" d="
       M 1 0
       A 1 1 1 0 1 0 1
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
-      <path id="top-right-corner" d="
+      <path id="right-bottom-corner" d="
       M 0 67
       A 1 1 0 0 1 1 68
       " stroke-width="0.12" stroke="white" fill="transparent"></path>
     </g>
-        <path id="outside-perimeter" d="
-        M 0 0
-        L 105 0
-        L 105 68
-        L 0 68
-        Z" stroke-width="0.12" stroke="white" fill="transparent"></path>
+         <rect id="outside-perimeter" width="105" height="68" stroke-width="0.12" stroke="white" fill="transparent" />
   </g>
 </svg>
\ No newline at end of file
diff --git a/setup.js b/setup.js
index e5e6d38..b03484d 100644
--- a/setup.js
+++ b/setup.js
@@ -7,6 +7,8 @@ import { setUpCSVDownloadUpload } from "./js/csv.js";
 import { setUpLegend, shotTypeLegend } from "./js/shots/legend.js";
 import { select2Dropdown } from "./js/details/widgets/widgets-special.js";
 import { cfgOtherSetup } from "./js/details/config-details.js";
+import { customCardSetup } from "./js/custom-setups/card-setup.js";
+import { customConfigSetup } from "./js/custom-setups/config-setup.js";
 
 export let sport;
 export let dataStorage;
@@ -18,39 +20,13 @@ export let getDefaultSetup;
 export let cfgDefaultEnable;
 export let perimeterId;
 
-function customSetup(sportData) {
-    const urlParams = new URLSearchParams(window.location.search);
-    const w = urlParams.get("width") || 76;
-    const h = urlParams.get("height") || 75;
-    sportData.appearance.width = w;
-    sportData.appearance.height = h;
-    sportData.goalCoords = [
-        [0, h / 2],
-        [w, h / 2],
-    ];
-
-    const ice_hockey = {
-        width: "200",
-        circleR: "2",
-        polyR: "2.75",
-        fontSize: "0.15", //rem
-        strokeWidth: "0.5", //px
-        heatMapScale: 1.25,
-    };
-
-    const scaleFactor = parseFloat(ice_hockey.width) / Math.max(w, h);
-    for (const key in ice_hockey) {
-        if (key === "heatMapScale") {
-            sportData.appearance[key] =
-                parseFloat(ice_hockey[key]) * scaleFactor;
-        } else {
-            const val = parseFloat(ice_hockey[key]) / scaleFactor;
-            const suffix =
-                key === "fontSize" ? "rem" : key === "strokeWidth" ? "px" : "";
-            sportData.appearance[key] = `${val.toFixed(3)}${suffix}`;
+export function indexSetup() {
+    d3.json("/supported-sports.json").then((data) => {
+        const customSports = _.filter(data.sports, "needsCustomSetup");
+        for (const s of customSports) {
+            customCardSetup(s);
         }
-    }
-    return sportData;
+    });
 }
 
 export function setup(s) {
@@ -60,11 +36,10 @@ export function setup(s) {
         let sportData = _.find(data.sports, { id: sport });
         cfgSportCustomSetup = false;
         if (sportData.needsCustomSetup) {
-            sportData = customSetup(sportData);
+            sportData = customConfigSetup(sportData);
             cfgSportCustomSetup = true;
         }
         cfgSportA = sportData.appearance;
-        console.log(cfgSportA);
         cfgSportGoalCoords = sportData.goalCoords;
         cfgSportScoringArea = sportData.scoringArea;
         perimeterId = sportData.perimeter;