diff --git a/Website/app.js b/Website/app.js
index b15c8fe..204b1dc 100644
--- a/Website/app.js
+++ b/Website/app.js
@@ -3,30 +3,38 @@ import { baseLayerLuminance, StandardLuminance } from 'https://unpkg.com/@fluent
 const LISTING_URL = "{{ listingInfo.Url }}";
 
 const PACKAGES = {
-{{~ for package in packages ~}}
+{% for package in packages -%}
   "{{ package.Name }}": {
     name: "{{ package.Name }}",
-    displayName: "{{ if package.DisplayName; package.DisplayName; end; }}",
-    description: "{{ if package.Description; package.Description; end; }}",
+    {% if package.DisplayName -%}
+      displayName: "{{ package.DisplayName }}",
+    {% endif -%}
+    {% if package.Description -%}
+      description: "{{ package.Description }}",
+    {% endif -%}
     version: "{{ package.Version }}",
     author: {
-      name: "{{ if package.Author.Name; package.Author.Name; end; }}",
-      url: "{{ if package.Author.Url; package.Author.Url; end; }}",
+      {% if package.Author.Name -%}
+        name: "{{ package.Author.Name }}",
+      {% endif -%}
+      {% if package.Author.Url -%}
+        url: "{{ package.Author.Url }}",
+      {% endif -%}
     },
     dependencies: {
-      {{~ for dependency in package.Dependencies ~}}
+    {% for dependency in package.Dependencies -%}
         "{{ dependency.Name }}": "{{ dependency.Version }}",
-      {{~ end ~}}
+    {% endfor -%}
     },
     keywords: [
-      {{~ for keyword in package.Keywords ~}}
+    {% for keyword in package.Keywords -%}
         "{{ keyword }}",
-      {{~ end ~}}
+    {% endfor -%}
     ],
     license: "{{ package.License }}",
     licensesUrl: "{{ package.LicensesUrl }}",
   },
-{{~ end ~}}
+{% endfor -%}
 };
 
 const setTheme = () => {
@@ -228,4 +236,4 @@ const setTheme = () => {
   packageInfoListingHelp.addEventListener('click', () => {
     addListingToVccHelp.hidden = false;
   });
-})();
\ No newline at end of file
+})();
diff --git a/Website/index.html b/Website/index.html
index 8bb119c..79b6ae5 100644
--- a/Website/index.html
+++ b/Website/index.html
@@ -11,27 +11,29 @@
 <body>
   <div class="col align-items-center content">
     <div id="listingInfo" class="col mb-4 w-100 align-items-center">
-      {{~ if listingInfo.BannerImage; ~}}
+        {% if listingInfo.BannerImage -%}
         <div class="bannerImage" style="background-image: url({{ listingInfo.BannerImageUrl }})"></div>
-      {{~ end; ~}}
-      <h1>
-        {{~ listingInfo.Name ~}}
-      </h1>
-      {{~ if listingInfo.Description; ~}}
+        {% endif -%}
+      <h1>{{ listingInfo.Name }}</h1>
+      {% if listingInfo.Description -%}
         <div class="caption1 mb-2">{{ listingInfo.Description }}</div>
-      {{~ end; ~}}
+      {% endif -%}
       <div class="col align-items-center">
-        {{~ if listingInfo.Author.Email; ~}}
+        {% if listingInfo.Author.Email -%}
         <fluent-tooltip id="publishedByTooltip" anchor="publishedByText">
           {{ listingInfo.Author.Email }}
         </fluent-tooltip>
-        {{~ end; ~}}
+        {% endif -%}
         <div class="caption1 mb-2" id="publishedByText">Published by <a href="{{listingInfo.Author.Url}}" target="_blank">{{ listingInfo.Author.Name }}</a></div>
-        {{~ if listingInfo.InfoLink.Url ~}}
+        {% if listingInfo.InfoLink.Url -%}
           <div class="caption1" id="publishedByText">
-            <a href="{{listingInfo.InfoLink.Url}}" target="_blank">{{ if listingInfo.InfoLink.Text; listingInfo.InfoLink.Text; else; "Lean More"; end; }}</a>
+          {% if listingInfo.InfoLink.Text -%}
+            <a href="{{listingInfo.InfoLink.Url}}" target="_blank">{{ listingInfo.InfoLink.Text }}</a>
+          {% else -%}
+            <a href="{{listingInfo.InfoLink.Url}}" target="_blank">Learn More</a>
+          {% endif -%}
           </div>
-        {{~ end; ~}}
+        {% endif -%}
       </div>
     </div>
     <div class="addToVccBlock mt-4 row align-items-center">
@@ -181,7 +183,7 @@ <h5 class="m-0 mb-2">Listing URL</h5>
           <fluent-data-grid-cell cell-type="columnheader" grid-column="3">
           </fluent-data-grid-cell>
         </fluent-data-grid-row>
-        {{~ for package in packages ~}}
+        {% for package in packages -%}
           <fluent-data-grid-row data-package-name="{{ package.DisplayName }}" data-package-id="{{ package.Name }}">
             <fluent-data-grid-cell grid-column="1">
               <div class="col">
@@ -207,14 +209,18 @@ <h5 class="m-0 mb-2">Listing URL</h5>
               </fluent-button>
             </fluent-data-grid-cell>
           </fluent-data-grid-row>
-        {{~ end ~}}
+        {% endfor -%}
       </fluent-data-grid>
     </fluent-card>
-    {{~ if listingInfo.InfoLink.Url ~}}
+    {% if listingInfo.InfoLink.Url -%}
       <div class="caption1" id="publishedByText">
-        <a href="{{listingInfo.InfoLink.Url}}" target="_blank">{{ if listingInfo.InfoLink.Text; listingInfo.InfoLink.Text; else; "Lean More"; end; }}</a>
+      {% if listingInfo.InfoLink.Text -%}
+        <a href="{{listingInfo.InfoLink.Url}}" target="_blank">{{ listingInfo.InfoLink.Text }}</a>
+      {% else -%}
+        <a href="{{listingInfo.InfoLink.Url}}" target="_blank">Learn More</a>
+      {% endif -%}
       </div>
-    {{~ end; ~}}
+    {% endif -%}
   </div>
   <script type="module" src="app.js"></script>
 </body>
