diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index bee8eae8..1b65abde 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -8,6 +8,17 @@ assignees: ''
 ---
 <!---
 *** Please note: No new bug reports are being accepted for Wails v1 ***
+
+Before submitting this issue, please do the following:
+  - Do a web search for your error. This usually leads to a much better understanding of the issue.
+  - Prove that the error is indeed a Wails bug and not an application bug, with a specific set of steps to reproduce. 
+  - Search both the issue tracker (even closed issues) and discussion forums.
+  - Try to fix it yourself. Keep a list of things you have done to fix the problem.   
+
+If after doing all the above, the problem remains, please continue with this ticket providing *all* the information requested.
+
+Bug reports that do not follow these steps will likely be closed, so please help us to help you.
+
 --->
 
 **Description**
@@ -15,6 +26,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behaviour:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -26,6 +38,9 @@ A clear and concise description of what you expected to happen.
 **Screenshots**
 If applicable, add screenshots to help explain your problem.
 
+**Attempted Fixes**
+A list of things you have tried to fix the problem, including search engine links.
+
 **System Details**
 Please add the output of `wails doctor`.
 
diff --git a/website/docs/guides/troubleshooting.mdx b/website/docs/guides/troubleshooting.mdx
index 00f1d8dc..29f2427c 100644
--- a/website/docs/guides/troubleshooting.mdx
+++ b/website/docs/guides/troubleshooting.mdx
@@ -12,4 +12,16 @@ something similar to the following code:
 //go:embed frontend/dist
 var assets embed.FS
 ```
-Check that `frontend/dist` contains your application assets.
\ No newline at end of file
+Check that `frontend/dist` contains your application assets.
+
+## Mac application not valid
+
+If your built application looks like this in finder:
+
+<p className="text--center">
+    <img src="/img/troubleshooting/invalid_mac_app.png"></img>
+</p>
+
+it's likely that your application's `info.plist` is invalid. Update the file in `build/<yourapp>.app/Contents/info.plist`
+and check if the data is valid, EG check the binary name is correct. To persist the changes, copy the file back to
+the `build/darwin` directory.
\ No newline at end of file
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 2dd4752b..3db1c1d2 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -53,7 +53,7 @@ const darkCodeTheme = require("prism-react-renderer/themes/palenight");
               "https://github.com/wailsapp/wails/edit/master/website/blog/",
           },
           theme: {
-            customCss: require.resolve("./src/css/custom.css"),
+            customCss: [require.resolve("./src/css/custom.css"), require.resolve("./src/css/carousel.min.css")],
           },
         }),
       ],
@@ -167,6 +167,29 @@ const darkCodeTheme = require("prism-react-renderer/themes/palenight");
           theme: lightCodeTheme,
           darkTheme: darkCodeTheme,
         },
+        algolia: {
+          // The application ID provided by Algolia
+          appId: 'AWTCNFZ4FF',
+
+          // Public API key: it is safe to commit it
+          apiKey: 'd6495e0dda237daa037967b3809e4089',
+
+          indexName: 'wails',
+
+          // Optional: see doc section below
+          contextualSearch: true,
+
+          // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them.
+          // externalUrlRegex: 'external\\.com|domain\\.com',
+
+          // Optional: Algolia search parameters
+          searchParameters: {},
+
+          // Optional: path for search page that enabled by default (`false` to disable it)
+          searchPagePath: 'false',
+
+          //... other Algolia params
+        },
       }),
   }
 );
diff --git a/website/package.json b/website/package.json
index dac79dae..50a955ff 100644
--- a/website/package.json
+++ b/website/package.json
@@ -28,6 +28,7 @@
     "react": "^17.0.1",
     "react-contributors": "^1.1.2",
     "react-dom": "^17.0.1",
+    "react-responsive-carousel": "^3.2.22",
     "styled-components": "^5.3.1",
     "url-loader": "^4.1.1"
   },
diff --git a/website/src/css/carousel.min.css b/website/src/css/carousel.min.css
new file mode 100644
index 00000000..7a71d201
--- /dev/null
+++ b/website/src/css/carousel.min.css
@@ -0,0 +1,309 @@
+.carousel .control-arrow, .carousel.carousel-slider .control-arrow {
+    -webkit-transition: all .25s ease-in;
+    -moz-transition: all .25s ease-in;
+    -ms-transition: all .25s ease-in;
+    -o-transition: all .25s ease-in;
+    transition: all .25s ease-in;
+    opacity: .4;
+    filter: alpha(opacity=40);
+    position: absolute;
+    z-index: 2;
+    top: 20px;
+    background: none;
+    border: 0;
+    font-size: 32px;
+    cursor: pointer
+}
+
+.carousel .control-arrow:focus, .carousel .control-arrow:hover {
+    opacity: 1;
+    filter: alpha(opacity=100)
+}
+
+.carousel .control-arrow:before, .carousel.carousel-slider .control-arrow:before {
+    margin: 0 5px;
+    display: inline-block;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    content: ''
+}
+
+.carousel .control-disabled.control-arrow {
+    opacity: 0;
+    filter: alpha(opacity=0);
+    cursor: inherit;
+    display: none
+}
+
+.carousel .control-prev.control-arrow {
+    left: 0
+}
+
+.carousel .control-prev.control-arrow:before {
+    border-right: 8px solid #fff
+}
+
+.carousel .control-next.control-arrow {
+    right: 0
+}
+
+.carousel .control-next.control-arrow:before {
+    border-left: 8px solid #fff
+}
+
+.carousel-root {
+    outline: none;
+    margin-left: 33%;
+}
+
+.carousel {
+    position: relative;
+    width: 100%
+}
+
+.carousel * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box
+}
+
+.carousel img {
+    width: 100%;
+    display: inline-block;
+    pointer-events: none
+}
+
+.carousel .carousel {
+    position: relative
+}
+
+.carousel .control-arrow {
+    outline: 0;
+    border: 0;
+    background: none;
+    top: 50%;
+    margin-top: -13px;
+    font-size: 18px
+}
+
+.carousel .thumbs-wrapper {
+    margin: 20px;
+    overflow: hidden
+}
+
+.carousel .thumbs {
+    -webkit-transition: all .15s ease-in;
+    -moz-transition: all .15s ease-in;
+    -ms-transition: all .15s ease-in;
+    -o-transition: all .15s ease-in;
+    transition: all .15s ease-in;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    position: relative;
+    list-style: none;
+    white-space: nowrap
+}
+
+.carousel .thumb {
+    -webkit-transition: border .15s ease-in;
+    -moz-transition: border .15s ease-in;
+    -ms-transition: border .15s ease-in;
+    -o-transition: border .15s ease-in;
+    transition: border .15s ease-in;
+    display: inline-block;
+    margin-right: 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    border: 3px solid #fff;
+    padding: 2px
+}
+
+.carousel .thumb:focus {
+    border: 3px solid #ccc;
+    outline: none
+}
+
+.carousel .thumb.selected, .carousel .thumb:hover {
+    border: 3px solid #333
+}
+
+.carousel .thumb img {
+    vertical-align: top
+}
+
+.carousel.carousel-slider {
+    position: relative;
+    margin: 0;
+    overflow: hidden
+}
+
+.carousel.carousel-slider .control-arrow {
+    top: 0;
+    color: #fff;
+    font-size: 26px;
+    bottom: 0;
+    margin-top: 0;
+    padding: 5px
+}
+
+.carousel.carousel-slider .control-arrow:hover {
+    background: rgba(0, 0, 0, 0.2)
+}
+
+.carousel .slider-wrapper {
+    overflow: hidden;
+    margin: auto;
+    width: 101%;
+    -webkit-transition: height .15s ease-in;
+    -moz-transition: height .15s ease-in;
+    -ms-transition: height .15s ease-in;
+    -o-transition: height .15s ease-in;
+    transition: height .15s ease-in
+}
+
+.carousel .slider-wrapper.axis-horizontal .slider {
+    -ms-box-orient: horizontal;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex
+}
+
+.carousel .slider-wrapper.axis-horizontal .slider .slide {
+    flex-direction: column;
+    flex-flow: column
+}
+
+.carousel .slider-wrapper.axis-vertical {
+    -ms-box-orient: horizontal;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -moz-flex;
+    display: -webkit-flex;
+    display: flex
+}
+
+.carousel .slider-wrapper.axis-vertical .slider {
+    -webkit-flex-direction: column;
+    flex-direction: column
+}
+
+.carousel .slider {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    list-style: none;
+    width: 100%
+}
+
+.carousel .slider.animated {
+    -webkit-transition: all .35s ease-in-out;
+    -moz-transition: all .35s ease-in-out;
+    -ms-transition: all .35s ease-in-out;
+    -o-transition: all .35s ease-in-out;
+    transition: all .35s ease-in-out
+}
+
+.carousel .slide {
+    min-width: 100%;
+    margin: 0;
+    position: relative;
+    text-align: center
+}
+
+.carousel .slide img {
+    width: 100%;
+    vertical-align: top;
+    border: 0
+}
+
+.carousel .slide iframe {
+    display: inline-block;
+    width: calc(100% - 80px);
+    margin: 0 40px 40px;
+    border: 0
+}
+
+.carousel .slide .legend {
+    -webkit-transition: all .5s ease-in-out;
+    -moz-transition: all .5s ease-in-out;
+    -ms-transition: all .5s ease-in-out;
+    -o-transition: all .5s ease-in-out;
+    transition: all .5s ease-in-out;
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    margin-left: -45%;
+    width: 90%;
+    border-radius: 10px;
+    background: #000;
+    color: #fff;
+    padding: 10px;
+    font-size: 12px;
+    text-align: center;
+    opacity: 0.25;
+    -webkit-transition: opacity .35s ease-in-out;
+    -moz-transition: opacity .35s ease-in-out;
+    -ms-transition: opacity .35s ease-in-out;
+    -o-transition: opacity .35s ease-in-out;
+    transition: opacity .35s ease-in-out
+}
+
+.carousel .control-dots {
+    position: absolute;
+    bottom: 0;
+    margin: 10px 0;
+    padding: 0;
+    text-align: center;
+    width: 100%;
+    z-index: 1
+}
+
+@media (min-width: 960px) {
+    .carousel .control-dots {
+        bottom: 0
+    }
+}
+
+.carousel .control-dots .dot {
+    -webkit-transition: opacity .25s ease-in;
+    -moz-transition: opacity .25s ease-in;
+    -ms-transition: opacity .25s ease-in;
+    -o-transition: opacity .25s ease-in;
+    transition: opacity .25s ease-in;
+    opacity: .3;
+    filter: alpha(opacity=30);
+    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
+    background: #fff;
+    border-radius: 50%;
+    width: 8px;
+    height: 8px;
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 8px
+}
+
+.carousel .control-dots .dot.selected, .carousel .control-dots .dot:hover {
+    opacity: 1;
+    filter: alpha(opacity=100)
+}
+
+.carousel .carousel-status {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 5px;
+    font-size: 10px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
+    color: #fff
+}
+
+.carousel:hover .slide .legend {
+    opacity: 1
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 2c8b8c18..75c2f797 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -5,24 +5,47 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import styles from './index.module.css';
 import HomepageFeatures from '../components/HomepageFeatures';
-
-import ThemedImage from '@theme/ThemedImage';
-import useBaseUrl from "@docusaurus/core/lib/client/exports/useBaseUrl";
 import {translate} from '@docusaurus/Translate'; // i18n component
+var Carousel = require('react-responsive-carousel').Carousel;
 
 function HomepageHeader() {
     const {siteConfig} = useDocusaurusContext();
     return (
         <header className={clsx('hero', styles.heroBanner)}>
             <div className="container">
-                <ThemedImage
-                    alt="Wails Logo"
-                    width="30%"
-                    sources={{
-                        light: useBaseUrl('/img/logo-light.svg'),
-                        dark: useBaseUrl('/img/logo-dark.svg'),
-                    }}
-                />
+                <Carousel showArrows={false} width={"50%"}
+                          showThumbs={false} stopOnHover={false}
+                          showStatus={false} autoPlay={true}
+                          showIndicators={false}
+                          infiniteLoop={true} interval={3000} transitionTime={1000}>
+                    <div>
+                        <img src="/img/wails-app-mac.png"/>
+                    </div>
+                    <div>
+                        <img src="/img/showcase/ytd.png"/>
+                    </div>
+                    <div>
+                        <img src="/img/showcase/wombat.png"/>
+                    </div>
+                    <div>
+                        <img src="/img/showcase/wally.png"/>
+                    </div>
+                    <div>
+                        <img src="/img/october.png"/>
+                    </div>
+                    <div>
+                        <img src="/img/showcase/mollywallet.png"/>
+                    </div>
+
+                </Carousel>
+                {/*<ThemedImage*/}
+                {/*    alt="Wails Logo"*/}
+                {/*    width="30%"*/}
+                {/*    sources={{*/}
+                {/*        light: useBaseUrl('/img/logo-light.svg'),*/}
+                {/*        dark: useBaseUrl('/img/logo-dark.svg'),*/}
+                {/*    }}*/}
+                {/*/>*/}
                 <p className="hero__subtitle">{translate({id: "homepage.Tagline"})}</p>
                 <div className={styles.buttons}>
                     <Link
diff --git a/website/static/img/october.png b/website/static/img/october.png
new file mode 100644
index 00000000..ba5052be
Binary files /dev/null and b/website/static/img/october.png differ
diff --git a/website/static/img/troubleshooting/invalid_mac_app.png b/website/static/img/troubleshooting/invalid_mac_app.png
new file mode 100644
index 00000000..92ceabb5
Binary files /dev/null and b/website/static/img/troubleshooting/invalid_mac_app.png differ
diff --git a/website/static/img/wails-app-mac.png b/website/static/img/wails-app-mac.png
new file mode 100644
index 00000000..bf18df55
Binary files /dev/null and b/website/static/img/wails-app-mac.png differ