diff --git a/frontend/public/index.html b/frontend/public/index.html
index d43b2b972f..5b60af6df9 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -7,7 +7,7 @@
   <link rel='stylesheet' href='build/bundle.css'>
   <link rel='stylesheet' href='build/themes.css'>
 
-  <link rel="stylesheet" href="global.css">
+  <link rel="stylesheet" href="build/global.css">
 
   <title>{{ config['title'] or 'Gradio' }}</title>
   <meta property="og:url" content="https://gradio.app/" />
diff --git a/frontend/rollup.config.js b/frontend/rollup.config.js
index ba74db3675..98d7896980 100644
--- a/frontend/rollup.config.js
+++ b/frontend/rollup.config.js
@@ -52,6 +52,7 @@ export default {
 		copy({
 			targets: [
 				{ src: 'public/*', dest: '../gradio/templates/frontend' },
+				{ src: 'public/global.css', dest: '../gradio/templates/frontend/build' },
 				{ src: 'public/static', dest: '../gradio/templates/frontend' }
 			]
 		}),
diff --git a/frontend/src/components/input/Image/Component.svelte b/frontend/src/components/input/Image/Component.svelte
index 4b1ed62e2a..4f797c2b40 100644
--- a/frontend/src/components/input/Image/Component.svelte
+++ b/frontend/src/components/input/Image/Component.svelte
@@ -29,6 +29,7 @@
       <ModifySketch
         on:undo={() => sketch.undo()}
         on:clear={() => sketch.clear()}
+        {static_src}
       />
       <Sketch
         {value}
diff --git a/frontend/src/components/utils/ModifySketch.svelte b/frontend/src/components/utils/ModifySketch.svelte
index 308c601c93..12f90d134a 100644
--- a/frontend/src/components/utils/ModifySketch.svelte
+++ b/frontend/src/components/utils/ModifySketch.svelte
@@ -1,6 +1,8 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
+  export let static_src;
+
   const dispatch = createEventDispatcher();
 </script>
 
@@ -9,12 +11,12 @@
     class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-yellow-500 dark:bg-red-600 rounded shadow w-8 h-8"
     on:click={() => dispatch("undo")}
   >
-    <img alt="undo sketch" src="/static/img/undo-solid.svg" />
+    <img alt="undo sketch" src="{static_src}/static/img/undo-solid.svg" />
   </button>
   <button
     class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow w-8 h-8"
     on:click={() => dispatch("clear")}
   >
-    <img alt="clear sketch" src="static/img/clear.svg" />
+    <img alt="clear sketch" src="{static_src}/static/img/clear.svg" />
   </button>
 </div>
diff --git a/gradio.egg-info/PKG-INFO b/gradio.egg-info/PKG-INFO
index 767c2f7277..6fbaf09d0e 100644
--- a/gradio.egg-info/PKG-INFO
+++ b/gradio.egg-info/PKG-INFO
@@ -1,12 +1,14 @@
-Metadata-Version: 1.0
+Metadata-Version: 2.1
 Name: gradio
-Version: 2.8.0b0
+Version: 2.8.0b3
 Summary: Python library for easily interacting with trained machine learning models
 Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq
 Author-email: team@gradio.app
 License: Apache License 2.0
-Description: UNKNOWN
 Keywords: machine learning,visualization,reproducibility
 Platform: UNKNOWN
 License-File: LICENSE
+
+UNKNOWN
+
diff --git a/gradio.egg-info/requires.txt b/gradio.egg-info/requires.txt
index 0ecd93dcfe..2b109b268b 100644
--- a/gradio.egg-info/requires.txt
+++ b/gradio.egg-info/requires.txt
@@ -1,5 +1,5 @@
-aiohttp
 analytics-python
+aiohttp
 fastapi
 ffmpy
 markdown-it-py[linkify,plugins]
@@ -9,7 +9,7 @@ pandas
 paramiko
 pillow
 pycryptodome
-pydub
 python-multipart
+pydub
 requests
 uvicorn
diff --git a/gradio/interface.py b/gradio/interface.py
index 01a925e292..61e98c8fd1 100644
--- a/gradio/interface.py
+++ b/gradio/interface.py
@@ -645,8 +645,8 @@ class Interface:
         server_name (str): to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME.
         show_tips (bool): if True, will occasionally show tips about new Gradio features
         enable_queue (bool): if True, inference requests will be served through a queue instead of with parallel threads. Required for longer inference times (> 1min) to prevent timeout.
-        width (int): The width in pixels of the <iframe> element containing the interface (used if inline=True)
-        height (int): The height in pixels of the <iframe> element containing the interface (used if inline=True)
+        width (int): The width in pixels of the iframe element containing the interface (used if inline=True)
+        height (int): The height in pixels of the iframe element containing the interface (used if inline=True)
         encrypt (bool): If True, flagged data will be encrypted by key provided by creator at launch
         cache_examples (bool): If True, examples outputs will be processed and cached in a folder, and will be used if a user uses an example input.
         favicon_path (str): If a path to an file (.png, .gif, or .ico) is provided, it will be used as the favicon for the web page.
diff --git a/gradio/templates/frontend/index.html b/gradio/templates/frontend/index.html
index d43b2b972f..5b60af6df9 100644
--- a/gradio/templates/frontend/index.html
+++ b/gradio/templates/frontend/index.html
@@ -7,7 +7,7 @@
   <link rel='stylesheet' href='build/bundle.css'>
   <link rel='stylesheet' href='build/themes.css'>
 
-  <link rel="stylesheet" href="global.css">
+  <link rel="stylesheet" href="build/global.css">
 
   <title>{{ config['title'] or 'Gradio' }}</title>
   <meta property="og:url" content="https://gradio.app/" />
diff --git a/gradio/version.txt b/gradio/version.txt
index 506793dacd..293e236de1 100644
--- a/gradio/version.txt
+++ b/gradio/version.txt
@@ -1 +1 @@
-2.8.0b
\ No newline at end of file
+2.8.0b3
\ No newline at end of file
diff --git a/setup.py b/setup.py
index 408a169f70..6c2632fa0b 100644
--- a/setup.py
+++ b/setup.py
@@ -5,7 +5,7 @@ except ImportError:
 
 setup(
     name="gradio",
-    version="2.8.0b",
+    version="2.8.0b3",
     include_package_data=True,
     description="Python library for easily interacting with trained machine learning models",
     author="Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq",
diff --git a/website/homepage/Dockerfile b/website/homepage/Dockerfile
index a634fb789f..233d14d7a2 100644
--- a/website/homepage/Dockerfile
+++ b/website/homepage/Dockerfile
@@ -1,7 +1,7 @@
 FROM python:3.8
 
-RUN apt-get update
-RUN apt-get --assume-yes install npm nginx
+RUN apt-get update --fix-missing
+RUN apt-get --assume-yes install npm nginx libcairo2-dev pkg-config python3-dev
 RUN pip install pandas matplotlib
 RUN mkdir gradio
 WORKDIR /gradio
diff --git a/website/homepage/render_html.py b/website/homepage/render_html.py
index 28511eb573..3ae1b1bb0a 100644
--- a/website/homepage/render_html.py
+++ b/website/homepage/render_html.py
@@ -12,38 +12,12 @@ from gradio.inputs import InputComponent
 from gradio.interface import Interface
 from gradio.outputs import OutputComponent
 
-import cairo
+from render_html_helpers import generate_meta_image
 
 GRADIO_DIR = "../../"
 GRADIO_GUIDES_DIR = os.path.join(GRADIO_DIR, "guides")
 GRADIO_DEMO_DIR = os.path.join(GRADIO_DIR, "demo")
 
-
-guides = []
-for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
-    if "template" in guide or "getting_started" in guide:
-        continue
-    guide_name = guide[:-3]
-    pretty_guide_name = " ".join(
-        [word.capitalize().replace("Ml", "ML") for word in guide_name.split("_")]
-    )
-    with open(os.path.join(GRADIO_GUIDES_DIR, guide), "r") as f:
-        guide_content = f.read()
-
-    tags = []
-    if "tags: " in guide_content:
-        tags = guide_content.split("tags: ")[1].split("\n")[0].split(", ")
-        tags = tags[:3]
-        tags = " • ".join(tags)
-
-    guide_dict = {
-        "guide_name": guide_name,
-        "pretty_guide_name": pretty_guide_name,
-        "guide_content": guide_content,
-        "tags": tags,
-    }
-    guides.append(guide_dict)
-
 with open("src/navbar.html", encoding="utf-8") as navbar_file:
     navbar_html = navbar_file.read()
 
@@ -52,10 +26,9 @@ def render_index():
     os.makedirs("generated", exist_ok=True)
     with open("src/tweets.json", encoding="utf-8") as tweets_file:
         tweets = json.load(tweets_file)
-    star_count = "{:,}".format(
-        requests.get("https://api.github.com/repos/gradio-app/gradio").json()[
-            "stargazers_count"
-        ]
+    star_request = requests.get("https://api.github.com/repos/gradio-app/gradio").json()
+    star_count = (
+        "{:,}".format(star_request["stargazers_count"]) if "stargazers_count" in star_request else ""
     )
     with open("src/index_template.html", encoding="utf-8") as template_file:
         template = Template(template_file.read())
@@ -68,10 +41,48 @@ def render_index():
         generated_template.write(output_html)
 
 
+guides = []
+for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
+    if "template" in guide:
+        continue
+    guide_name = guide[:-3]
+    pretty_guide_name = " ".join(
+        [
+            word.capitalize().replace("Ml", "ML").replace("Gan", "GAN")
+            for word in guide_name.split("_")
+        ]
+    )
+    with open(os.path.join(GRADIO_GUIDES_DIR, guide), "r") as f:
+        guide_content = f.read()
+
+    tags = None
+    if "tags: " in guide_content:
+        tags = guide_content.split("tags: ")[1].split("\n")[0].split(", ")
+
+    spaces = None
+    if "related_spaces: " in guide_content:
+        spaces = guide_content.split("related_spaces: ")[1].split("\n")[0].split(", ")
+    url = f"https://gradio.app/{guide_name}/"
+
+    guide_content = "\n".join([line for line in guide_content.split("\n") if not (line.startswith("tags: ") or line.startswith("related_spaces: "))]) 
+
+    guides.append(
+        {
+            "name": guide_name,
+            "pretty_name": pretty_guide_name,
+            "content": guide_content,
+            "tags": tags,
+            "spaces": spaces,
+            "url": url,
+        }
+    )
+
+
 def render_guides_main():
+    filtered_guides = [guide for guide in guides if guide["name"] != "getting_started"]
     with open("src/guides_main_template.html", encoding="utf-8") as template_file:
         template = Template(template_file.read())
-        output_html = template.render(guides=guides, navbar_html=navbar_html)
+        output_html = template.render(guides=filtered_guides, navbar_html=navbar_html)
     os.makedirs(os.path.join("generated", "guides"), exist_ok=True)
     with open(
         os.path.join("generated", "guides", "index.html"), "w", encoding="utf-8"
@@ -83,114 +94,16 @@ def render_guides_main():
         generated_template.write(output_html)
 
 
-def add_line_breaks(text, num_char):
-    if len(text) > num_char:
-        text_list = text.split()
-        text = ""
-        total_count = 0
-        count = 0
-        for word in text_list:
-            if total_count > num_char * 5:
-                text = text[:-1]
-                text += "..."
-                break
-            count += len(word)
-            if count > num_char:
-                text += word + "\n"
-                total_count += count
-                count = 0
-            else:
-                text += word + " "
-                total_count += len(word + " ")
-        return text
-    return text
-
-
-def generate_guide_meta_tags(title, tags, url, guide_path_name):
-    surface = cairo.ImageSurface.create_from_png("src/assets/img/guides/base-image.png")
-    ctx = cairo.Context(surface)
-    ctx.scale(500, 500)
-    ctx.set_source_rgba(0.611764706, 0.639215686, 0.6862745098, 1)
-    ctx.select_font_face("Arial", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_NORMAL)
-    ctx.set_font_size(0.15)
-    ctx.move_to(0.3, 0.55)
-    ctx.show_text("gradio.app/guides")
-    if len(tags) > 5:
-        tags = tags[:5]
-    tags = "  |  ".join(tags)
-    ctx.move_to(0.3, 2.2)
-    ctx.show_text(tags)
-    ctx.set_source_rgba(0.352941176, 0.352941176, 0.352941176, 1)
-    ctx.set_font_size(0.28)
-    title_breaked = add_line_breaks(title, 10)
-
-    if "\n" in title_breaked:
-        for i, t in enumerate(title_breaked.split("\n")):
-            ctx.move_to(0.3, 0.9 + i * 0.4)
-            ctx.show_text(t)
-    else:
-        ctx.move_to(0.3, 1.0)
-        ctx.show_text(title_breaked)
-    image_path = f"src/assets/img/guides/{guide_path_name}.png"
-    surface.write_to_png(image_path)
-    load_path = f"/assets/img/guides/{guide_path_name}.png"
-    meta_tags = f"""
-    <title>{title}</title>
-    <meta property="og:title" content="{title}" />
-    <meta property="og:type" content="article" />
-    <meta property="og:url" content="{url}" />
-    <meta property="og:image" content="{load_path}" />
-    <meta name="twitter:title" content="{title}">
-    <meta name="twitter:image" content="{load_path}">
-    <meta name="twitter:card" content="summary_large_image">
-    """
-    return meta_tags
-
-
 def render_guides():
-    for guide in os.listdir(GRADIO_GUIDES_DIR):
-        if "template" in guide:
-            continue
-        with open(
-            os.path.join(GRADIO_GUIDES_DIR, guide), encoding="utf-8"
-        ) as guide_file:
-            guide_text = guide_file.read()
+    for guide in guides:
+        generate_meta_image(guide)
 
-        if "related_spaces: " in guide_text:
-            spaces = guide_text.split("related_spaces: ")[1].split("\n")[0].split(", ")
-            spaces_html = "<div id='spaces-holder'><a href='https://hf.co/spaces' target='_blank'><img src='/assets/img/spaces-logo.svg'></a><p style='margin: 0;display: inline;font-size: large;font-weight: 400;'>Related Spaces: </p>"
-            for space in spaces:
-                spaces_html += f"<div class='space-link'><a href='{space}' target='_blank'>{space[30:]}</a></div>"
-            spaces_html += "</div>"
-            guide_text = (
-                guide_text.split("related_spaces: ")[0]
-                + spaces_html
-                + "\n".join(guide_text.split("related_spaces: ")[1].split("\n")[1:])
-            )
-
-        tags = ""
-        if "tags: " in guide_text:
-            tags = guide_text.split("tags: ")[1].split("\n")[0].split(", ")
-            guide_text = (
-                guide_text.split("tags: ")[0]
-                + "\n"
-                + "\n".join(guide_text.split("tags: ")[1].split("\n")[1:])
-            )
-
-        title = " ".join(
-            [
-                word.capitalize().replace("Ml", "ML").replace("Gan", "GAN")
-                for word in guide[:-3].split("_")
-            ]
-        )
-        url = f"https://gradio.app/{guide[:-3]}/"
-        meta_tags = generate_guide_meta_tags(title, tags, url, guide[:-3])
-
-        code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide_text)
-        demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide_text)
+        code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide["content"])
+        demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide["content"])
         code, demos = {}, {}
-        guide_text = (
-            guide_text.replace("website/src/assets", "/assets")
+        guide["content"] = (
+            guide["content"]
+            .replace("website/src/assets", "/assets")
             .replace("```python\n", "<pre><code class='lang-python'>")
             .replace("```bash\n", "<pre><code class='lang-bash'>")
             .replace("```directory\n", "<pre><code class='lang-bash'>")
@@ -208,8 +121,10 @@ def render_guides():
                 )
 
         for demo_name in demo_names:
-            demos[demo_name] = "<div id='interface_" + demo_name + "'></div>"
-        guide_template = Template(guide_text)
+            demos[demo_name] = (
+                "</div><div id='interface_" + demo_name + "'></div><div class='prose'>"
+            )
+        guide_template = Template(guide["content"])
         guide_output = guide_template.render(code=code, demos=demos)
 
         # Escape HTML tags inside python code blocks so they show up properly
@@ -222,8 +137,7 @@ def render_guides():
             guide_output,
         )
 
-        output_html = markdown2.markdown(guide_output)
-        output_html = output_html.replace("<a ", "<a target='blank' ")
+        output_html = markdown2.markdown(guide_output, extras=["target-blank-links"])
 
         for match in re.findall(r"<h3>([A-Za-z0-9 ]*)<\/h3>", output_html):
             output_html = output_html.replace(
@@ -232,20 +146,25 @@ def render_guides():
             )
 
         os.makedirs("generated", exist_ok=True)
-        guide = guide[:-3]
-        os.makedirs(os.path.join("generated", guide), exist_ok=True)
+        os.makedirs(os.path.join("generated", guide["name"]), exist_ok=True)
         with open(
             "src/guides_template.html", encoding="utf-8"
         ) as general_template_file:
             general_template = Template(general_template_file.read())
         with open(
-            os.path.join("generated", guide, "index.html"), "w", encoding="utf-8"
+            os.path.join("generated", guide["name"], "index.html"),
+            "w",
+            encoding="utf-8",
         ) as generated_template:
             output_html = general_template.render(
                 template_html=output_html,
                 demo_names=demo_names,
-                meta_tags=meta_tags,
                 navbar_html=navbar_html,
+                title=guide["pretty_name"],
+                url=guide["url"],
+                guide_name=guide["name"],
+                spaces=guide["spaces"],
+                tags=guide["tags"],
             )
             generated_template.write(output_html)
 
diff --git a/website/homepage/render_html_helpers.py b/website/homepage/render_html_helpers.py
new file mode 100644
index 0000000000..a84a92a28b
--- /dev/null
+++ b/website/homepage/render_html_helpers.py
@@ -0,0 +1,59 @@
+import cairo
+import os
+
+def add_line_breaks(text, num_char):
+    if len(text) > num_char:
+        text_list = text.split()
+        text = ""
+        total_count = 0
+        count = 0
+        for word in text_list:
+            if total_count > num_char*5:
+                text = text[:-1]
+                text += "..."
+                break
+            count += len(word)
+            if count > num_char:
+                text += word + "\n"
+                total_count += count
+                count = 0
+            else:
+                text += word + " "
+                total_count += len(word+" ")
+        return text
+    return text    
+
+def generate_meta_image(guide):
+    IMG_GUIDE_LOCATION = "dist/assets/img/guides"
+    title, tags, guide_name = guide["pretty_name"], guide["tags"], guide["name"]
+    surface = cairo.ImageSurface.create_from_png("src/assets/img/guides/base-image.png")
+    ctx = cairo.Context(surface)
+    ctx.scale(500, 500)
+    ctx.set_source_rgba(0.611764706,0.639215686,0.6862745098,1)
+    ctx.select_font_face("Arial", cairo.FONT_SLANT_NORMAL,
+      cairo.FONT_WEIGHT_NORMAL)
+    ctx.set_font_size(0.15)
+    ctx.move_to(0.3, 0.55)
+    ctx.show_text("gradio.app/guides")
+    if tags:
+        if len(tags) > 5:
+            tags = tags[:5]
+        tags = "  |  ".join(tags)
+        ctx.move_to(0.3, 2.2)
+        ctx.show_text(tags)
+    ctx.set_source_rgba(0.352941176,0.352941176,0.352941176,1)
+    ctx.set_font_size(0.28)
+    title_breaked = add_line_breaks(title, 10)
+
+    if "\n" in title_breaked:
+        for i, t in enumerate(title_breaked.split("\n")):
+            ctx.move_to(0.3, 0.9+i*0.4)
+            ctx.show_text(t)
+    else:
+        ctx.move_to(0.3, 1.0)
+        ctx.show_text(title_breaked)
+
+
+    os.makedirs(IMG_GUIDE_LOCATION, exist_ok=True )
+    image_path = f"{IMG_GUIDE_LOCATION}/{guide_name}.png"
+    surface.write_to_png(image_path)
diff --git a/website/homepage/src/assets/img/guides/building_a_pictionary_app.png b/website/homepage/src/assets/img/guides/building_a_pictionary_app.png
deleted file mode 100644
index 7b5a40d509..0000000000
Binary files a/website/homepage/src/assets/img/guides/building_a_pictionary_app.png and /dev/null differ
diff --git a/website/homepage/src/assets/img/guides/creating_a_chatbot.png b/website/homepage/src/assets/img/guides/creating_a_chatbot.png
deleted file mode 100644
index 48a9a8146a..0000000000
Binary files a/website/homepage/src/assets/img/guides/creating_a_chatbot.png and /dev/null differ
diff --git a/website/homepage/src/assets/img/guides/getting_started.png b/website/homepage/src/assets/img/guides/getting_started.png
deleted file mode 100644
index 91c972a2cb..0000000000
Binary files a/website/homepage/src/assets/img/guides/getting_started.png and /dev/null differ
diff --git a/website/homepage/src/assets/img/guides/using_flagging.png b/website/homepage/src/assets/img/guides/using_flagging.png
deleted file mode 100644
index e6918a644e..0000000000
Binary files a/website/homepage/src/assets/img/guides/using_flagging.png and /dev/null differ
diff --git a/website/homepage/src/guides_main_template.html b/website/homepage/src/guides_main_template.html
index 771ed3e841..818d7fa603 100644
--- a/website/homepage/src/guides_main_template.html
+++ b/website/homepage/src/guides_main_template.html
@@ -28,45 +28,11 @@
     html {
       font-size: 16px !important;
     }
-    header {
-      flex
-    }
-    .prose p > img {
-        margin: 0 auto;
-        width: 600px;
-        max-width: 100%;
-    }
-    .prose {
-      max-width: none !important;
-    }
-    .gradio_page .footer {
-      display: none !important;
-    }
-    .prose .code, .prose pre {
-      background-color: whitesmoke;
-      color: black;
-    }
-    .prose table {
-      width: auto;
-    }
-    h3 a {
-      display: inline-block;
-    }
-    h3 a img {
-      height: 14px;
-      margin: 0 4px !important;
-    }
-
-    ul {
-      text-align: center !important;
-    }
-
     .search-for-tags {
       width: 100%;
       position: relative;
       display: flex;
     }
-
     .searchTerm {
       width: 100%;
       border: 1px solid #bebfc3;
@@ -157,14 +123,17 @@
 
     <div id="guide-list" class="grid grid-cols-1 lg:grid-cols-3 gap-12 pt-12">
       {% for guide in guides %}
-      <a class="flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow" href="/{{ guide.guide_name }}">
+      <a class="flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow" href="/{{ guide.name }}">
         <div class="flex flex-col p-4" style="
       height: min-content;">
-          <h2 class="font-semibold group-hover:underline text-xl" style="color: #5a5a5a;">{{ guide.pretty_guide_name }}
+          <h2 class="font-semibold group-hover:underline text-xl">{{ guide.pretty_name }}
           </h2>
           <div class="tags-holder">
             <p>
-            {{ guide.tags }}
+              {% for tag in guide.tags %}
+                {{ tag }}<!--
+             -->{% if not loop.last %}, {% endif %}
+              {% endfor %}
             </p>
           </div>
         </div>
@@ -247,7 +216,7 @@
     var counter = 0
     {% for guide in guides %}
       txtValue = a[{{ loop.index - 1 }}].innerText;
-      guideContent = {{ guide.guide_content|tojson|safe }}
+      guideContent = {{ guide.content|tojson|safe }}
       if (txtValue.toUpperCase().indexOf(filter) > -1 || guideContent.toUpperCase().indexOf(filter) > -1) {
         a[{{ loop.index - 1}}].style.display = "";
       } else {
diff --git a/website/homepage/src/guides_template.html b/website/homepage/src/guides_template.html
index be7a818818..88a1e0d685 100644
--- a/website/homepage/src/guides_template.html
+++ b/website/homepage/src/guides_template.html
@@ -5,92 +5,90 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  {{ meta_tags|safe }}
+  <meta property="og:title" content="{{ title }}" />
+  <meta property="og:type" content="article" />
+  <meta property="og:url" content="{{ url }}" />
+  <meta property="og:image" content="/assets/img/guides/{{ guide_name }}.png" />
+  <meta name="twitter:title" content="{{ title }}">
+  <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 rel="stylesheet" href="/style.css">
   <link rel="stylesheet" href="/assets/prism.css">
   <style>
     html {
       font-size: 16px !important;
     }
-    header {
-      flex
-    }
-    .prose p > img {
-        margin: 0 auto;
-        width: 600px;
-        max-width: 100%;
-    }
+
     .prose {
       max-width: none !important;
     }
+
+    .prose p>img {
+      margin: 0 auto;
+      width: 600px;
+      max-width: 100%;
+    }
+
     .gradio-page .content {
       padding: 0px !important;
     }
+
     .gradio-page .footer {
       display: none !important;
     }
-    .prose .code, .prose pre {
+
+    .prose .code,
+    .prose pre {
       color: black;
+      background: rgb(249, 250, 251);
     }
-    .prose table {
-      width: auto;
-    }
+
     h3 a {
       display: inline-block;
     }
-    h3 a img {
-      height: 14px;
-      margin: 0 4px !important;
-    }
-    #guide-template{
-      margin-top:30px;
-    }
-    .prose p > img {
-      margin: 0;
-      width: fit-content;
-    }
+
     .prose h1 {
       font-weight: 600;
     }
-
-
-    .space-link {
-      display: inline-block;
-      margin: 4px;
-      padding-left: 6px;
-      padding-right: 6px;
-      border-radius: 7px;
-    }
-
-    .space-link a {
-      text-decoration: none;
-    }
-
-    #spaces-holder img {
-      display: inherit;
-      width: 2.5%;
-      margin: 0;
-      padding-bottom: 6px;
-    }
-
   </style>
   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag('js', new Date());
-      gtag('config', 'UA-156449732-1');
-    </script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', 'UA-156449732-1');
+  </script>
 </head>
 
 <body class="bg-white text-gray-900 text-md sm:text-lg">
   {{navbar_html|safe}}
-  <div class="container mx-auto max-w-4xl px-4 mb-12" id="guide-template">
-    <div class="prose max-w-none">
+  <div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template">
+    {% if spaces is not none %}
+    <p class='mb-2 text-sm text-gray-500'>
+      <span class="italic">Related Spaces:</span>
+      {% for space in spaces %}
+        <a href='{{ space }}' target='_blank' class="hover:text-blue-500 transition">{{ space[30:] }}</a>
+        {% if not loop.last %}, {% endif %}
+      {% endfor %}
+    </p>
+    {% endif %}
+
+    {% if tags is not none %}
+    <p class='mb-2 text-sm text-gray-500'>
+      <span class="italic">Tags:</span>
+      {% for tag in tags %}
+        <span>{{ tag }}</span><!--
+     -->{% if not loop.last %}, {% endif %}
+      {% endfor %}
+    </p>
+    {% endif %}
+
+    <div class="prose mt-6">
       {{ template_html|safe }}
     </div>
   </div>
@@ -112,49 +110,19 @@
   <script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
   <script>
     var demo_endpoint = "/demo";
-    var demo_names = {{ demo_names|tojson }};
+    var demo_names = {{ demo_names| tojson }};
     document.querySelector("#gradio-library").addEventListener('load', function () {
       demo_names.forEach((demo_name, i) => {
-      fetch('/demo/' + demo_name + '/config')
-        .then(response => response.json())
-        .then(demo => {
-          demo.root = demo_endpoint + "/" + demo_name + "/";
-          launchGradio(demo, "#interface_" + demo_name);
-        });
+        fetch('/demo/' + demo_name + '/config')
+          .then(response => response.json())
+          .then(demo => {
+            demo.root = demo_endpoint + "/" + demo_name + "/";
+            launchGradio(demo, "#interface_" + demo_name);
+          });
       });
     });
-
-    var spacesHolder, spaces;
-    spacesHolder = document.getElementById("spaces-holder");
-    spaces = spacesHolder.getElementsByTagName('div');
-
-    var backgrounds = ['rgba(255,254,188,0.3)',
-                       'rgba(255,205,188,0.3)',
-                       'rgba(255,188,188,0.3)',
-                       'rgba(194,255,169,0.3)',
-                       'rgba(169,255,237,0.3)',
-                       'rgba(182,169,255,0.3)',
-                       'rgba(255,183,245,0.3)']
-
-    function shuffleBackgrounds(array) {
-      for (let i = array.length - 1; i > 0; i--) {
-          const j = Math.floor(Math.random() * (i + 1));
-          [array[i], array[j]] = [array[j], array[i]];
-      }
-    }
-
-    shuffleBackgrounds(backgrounds);
-
-    color_counter = 0
-    for (let i = 0; i < spaces.length; i++) {
-      spaces[i].style.background = backgrounds[color_counter];
-      color_counter += 1
-      if (color_counter == backgrounds.length) {
-        color_counter = 0;
-      }
-    }
   </script>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/website/homepage/src/index_template.html b/website/homepage/src/index_template.html
index c8cf7924f1..59d06f1142 100644
--- a/website/homepage/src/index_template.html
+++ b/website/homepage/src/index_template.html
@@ -21,6 +21,7 @@
 
   <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 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>
@@ -35,10 +36,6 @@
 </head>
 
 <body class="bg-white text-gray-900 text-md sm:text-lg">
-  <!-- <div class="w-full bg-yellow-200 text-center p-3">
-    🎉 We are joining Hugging Face!
-    <a class="font-semibold underline" href="/joining-huggingface/">Read our announcement here.</a> 🤗
-  </div> -->
   {{navbar_html|safe}}
   <section
     class="flex flex-col gap-8 items-center justify-center p-4 bg-opacity-20 bg-cover bg-center"
diff --git a/website/homepage/src/navbar.html b/website/homepage/src/navbar.html
index ab5306be42..61d81f2f1f 100644
--- a/website/homepage/src/navbar.html
+++ b/website/homepage/src/navbar.html
@@ -1,17 +1,33 @@
-<header class="container mx-auto p-4 flex justify-between items-center gap-4 flex-col sm:flex-row">
+<header class="container mx-auto p-4 flex flex-wrap justify-between items-center gap-6 flex-row sm:flex-col lg:flex-row">
     <a href="/">
       <img src="/assets/img/logo.svg" class="h-10">
     </a>
-    <nav class="flex gap-12 sm:gap-16">
-      <a class="link" href="/getting_started">⚡ Getting Started</a>
-      <a class="link" href="/docs">✍️ Docs</a>
-      <a class="link" href="/guides">💡 Guides</a>
-      <div class="group relative cursor-pointer font-semibold flex items-center gap-1" onClick="document.querySelector('.help-menu').classList.toggle('flex'); document.querySelector('.help-menu').classList.toggle('hidden');">
-        🖐 Community
+    <svg class="h-8 w-8 sm:hidden" viewBox="-10 -10 20 20" 
+      onclick="document.querySelector('nav').classList.toggle('hidden'); document.querySelector('nav').classList.toggle('flex');">
+      <rect x="-7" y="-6" width="14" height="2" />
+      <rect x="-7" y="-1" width="14" height="2" />
+      <rect x="-7" y="4" width="14" height="2" />
+    </svg>
+    <nav class="sm:flex sm:flex-row sm:w-auto w-full flex-col gap-3 sm:gap-12 hidden">
+      <a class="link flex gap-3 items-center" href="/getting_started">
+        <span>⚡</span> 
+        <span>Getting Started</span>
+      </a>
+      <a class="link flex gap-3 items-center" href="/docs">
+        <span>✍️</span>
+        <span>Docs</span>
+      </a>
+      <a class="link flex gap-3 items-center" href="/guides.html">
+        <span>💡</span>
+        <span>Guides</span>
+      </a>
+      <div class="group relative cursor-pointer font-semibold flex gap-3 items-center" onClick="document.querySelector('.help-menu').classList.toggle('flex'); document.querySelector('.help-menu').classList.toggle('hidden');">
+        <span>🖐</span>
+        <span>Community</span>
         <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
           <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
         </svg>
-        <div class="help-menu hidden group-hover:flex flex-col absolute top-6 right-0 bg-white shadow w-52">
+        <div class="help-menu hidden group-hover:flex flex-col absolute top-6 sm:right-0 bg-white shadow w-52">
           <a class="link px-4 py-2 inline-block hover:bg-gray-100"
             href="https://github.com/gradio-app/gradio/issues/new/choose" target="_blank">File an Issue</a>
           <a class="link px-4 py-2 inline-block hover:bg-gray-100"