diff --git a/website/homepage/render_html.py b/website/homepage/render_html.py
index 0fb286c03a..cd3bedfb09 100644
--- a/website/homepage/render_html.py
+++ b/website/homepage/render_html.py
@@ -16,6 +16,8 @@ from gradio.outputs import OutputComponent
 GRADIO_DIR = "../../"
 GRADIO_GUIDES_DIR = os.path.join(GRADIO_DIR, "guides")
 GRADIO_DEMO_DIR = os.path.join(GRADIO_DIR, "demo")
+GRADIO_ASSETS_LIST = os.listdir(os.path.join(GRADIO_DIR, "gradio", "templates", "frontend", "assets"))
+GRADIO_ASSETS = {f"{asset.split('.')[0]}_{asset.split('.')[-1]}_file": asset for asset in GRADIO_ASSETS_LIST}
 
 with open("src/navbar.html", encoding="utf-8") as navbar_file:
     navbar_html = navbar_file.read()
@@ -34,7 +36,7 @@ def render_index():
     with open("src/index_template.html", encoding="utf-8") as template_file:
         template = Template(template_file.read())
         output_html = template.render(
-            tweets=tweets, star_count=star_count, navbar_html=navbar_html
+            tweets=tweets, star_count=star_count, navbar_html=navbar_html, **GRADIO_ASSETS
         )
     with open(
         os.path.join("generated", "index.html"), "w", encoding="utf-8"
@@ -172,6 +174,7 @@ def render_guides():
                 guide_name=guide["name"],
                 spaces=guide["spaces"],
                 tags=guide["tags"],
+                **GRADIO_ASSETS
             )
             generated_template.write(output_html)
 
@@ -307,7 +310,7 @@ def render_other():
             os.path.join("src/other_templates", template_filename)
         ) as template_file:
             template = Template(template_file.read())
-            output_html = template.render()
+            output_html = template.render(GRADIO_ASSETS)
         folder_name = template_filename[:-14]
         os.makedirs(os.path.join("generated", folder_name), exist_ok=True)
         with open(
diff --git a/website/homepage/src/guides_template.html b/website/homepage/src/guides_template.html
index a7828b6a6f..2961a8034a 100644
--- a/website/homepage/src/guides_template.html
+++ b/website/homepage/src/guides_template.html
@@ -13,8 +13,8 @@
   <meta name="twitter:image" content="/assets/img/guides/{{ guide_name }}.png">
   <meta name="twitter:card" content="summary_large_image">
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
-  <link href="/gradio_static/build/themes.css" rel="stylesheet">
-  <link href="/gradio_static/build/global.css" rel="stylesheet">
+  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
+  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="/assets/prism.css">
   <style>
@@ -149,7 +149,8 @@
   <script>
     window.gradio_mode = "website";
   </script>
-  <script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
+  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
+  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
   <script>
     var demo_endpoint = "/demo";
     var demo_names = {{ demo_names| tojson }};
diff --git a/website/homepage/src/index_template.html b/website/homepage/src/index_template.html
index 59d06f1142..0a83309441 100644
--- a/website/homepage/src/index_template.html
+++ b/website/homepage/src/index_template.html
@@ -20,8 +20,8 @@
   <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  
 
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
-  <link href="/gradio_static/build/themes.css" rel="stylesheet">
-  <link href="/gradio_static/build/global.css" rel="stylesheet">
+  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
+  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="/assets/prism.css">
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
@@ -290,7 +290,8 @@ iface <span class="token operator">=</span> gr<span class="token punctuation">.<
 
     window.gradio_mode = "website";
   </script>
-  <script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
+  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
+  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
   <script>
     document.querySelector("#gradio-library").addEventListener('load', function () {
       launchGradioFromSpaces("abidlabs/Draw", "#demo_mnist");
diff --git a/website/homepage/src/other_templates/kitchen_sink_template.html b/website/homepage/src/other_templates/kitchen_sink_template.html
index a5301d0934..7ab2e18b14 100644
--- a/website/homepage/src/other_templates/kitchen_sink_template.html
+++ b/website/homepage/src/other_templates/kitchen_sink_template.html
@@ -7,7 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gradio</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"/>
-  <link href="/gradio_static/build/bundle.css" rel="stylesheet">
+  <link href="/gradio_static/assets/{{ index_css_file }}" rel="stylesheet">
+  <link href="/gradio_static/assets/{{ vendor_css_file }}" rel="stylesheet">
   <style></style>
 </head>
 
@@ -105,7 +106,8 @@
     var output_count = 0;
     window.gradio_mode = "website";
   </script>
-  <script src="/gradio_static/build/bundle.js"></script>
+  <script defer id="gradio-library" type="module" crossorigin src="/gradio_static/assets/{{ index_js_file }}"></script>
+  <link rel="modulepreload" href="/gradio_static/assets/{{ vendor_js_file }}" />
   <script>
     let themes = ["default", "huggingface", "seafoam", "grass", "peach", "dark", "dark-huggingface", "dark-seafoam","dark-grass", "dark-peach"]
     let theme_html = "";