diff --git a/package-lock.json b/package-lock.json
index 9d118be..9326926 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -272,6 +272,37 @@
         "@material/feature-targeting": "^3.1.0"
       }
     },
+    "@material/snackbar": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@material/snackbar/-/snackbar-3.2.0.tgz",
+      "integrity": "sha512-WVA+dJYbzDMlPpXCdkGEQqi1+tHqV8a9tKBYlr4Vy+3UUaEl6gIomRiWNnagoodhOwGQhyugCeLKHtmVn72IZA==",
+      "dev": true,
+      "requires": {
+        "@material/animation": "^3.1.0",
+        "@material/base": "^3.1.0",
+        "@material/button": "^3.2.0",
+        "@material/dom": "^3.1.0",
+        "@material/feature-targeting": "^3.1.0",
+        "@material/icon-button": "^3.2.0",
+        "@material/ripple": "^3.2.0",
+        "@material/rtl": "^3.2.0",
+        "@material/shape": "^3.1.0",
+        "@material/theme": "^3.1.0",
+        "@material/typography": "^3.1.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "@material/typography": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/@material/typography/-/typography-3.1.0.tgz",
+          "integrity": "sha512-aSNBQvVxIH1kORSYdLGuSTivx6oJ1MSOSTUAsUwhXPQLQlvbdFeZaqUp7xgn+EvRsHGRFhWk5YGuiBds9+7zQg==",
+          "dev": true,
+          "requires": {
+            "@material/feature-targeting": "^3.1.0"
+          }
+        }
+      }
+    },
     "@material/tab": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@material/tab/-/tab-3.2.0.tgz",
@@ -522,6 +553,19 @@
         "@material/ripple": "^3.2.0"
       }
     },
+    "@smui/snackbar": {
+      "version": "1.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@smui/snackbar/-/snackbar-1.0.0-beta.19.tgz",
+      "integrity": "sha512-DpIdxi24VEiaEU952OMEobSu4u1PmrIKTfnb/edOXmIcZP6+kgGYxCCJTPTZpwQy4ur8KCXQf3YzqNkeGKiz5Q==",
+      "dev": true,
+      "requires": {
+        "@material/feature-targeting": "^3.1.0",
+        "@material/snackbar": "^3.2.0",
+        "@smui/button": "^1.0.0-beta.19",
+        "@smui/common": "^1.0.0-beta.19",
+        "@smui/icon-button": "^1.0.0-beta.19"
+      }
+    },
     "@smui/tab": {
       "version": "1.0.0-beta.19",
       "resolved": "https://registry.npmjs.org/@smui/tab/-/tab-1.0.0-beta.19.tgz",
diff --git a/package.json b/package.json
index 5b4326d..3b496c3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@smui/checkbox": "^1.0.0-beta.19",
     "@smui/form-field": "^1.0.0-beta.19",
     "@smui/list": "^1.0.0-beta.19",
+    "@smui/snackbar": "^1.0.0-beta.19",
     "@smui/tab": "^1.0.0-beta.19",
     "@smui/tab-bar": "^1.0.0-beta.19",
     "@smui/textfield": "^1.0.0-beta.19",
diff --git a/src/img/brand.png b/src/img/brand.png
deleted file mode 100755
index 69b3f8d..0000000
Binary files a/src/img/brand.png and /dev/null differ
diff --git a/src/img/microphone_guide.png b/src/img/microphone_guide.png
index 6f696c8..159a3d6 100644
Binary files a/src/img/microphone_guide.png and b/src/img/microphone_guide.png differ
diff --git a/src/js/plugins/query.js b/src/js/plugins/query.js
index 08e3413..e322c77 100644
--- a/src/js/plugins/query.js
+++ b/src/js/plugins/query.js
@@ -32,9 +32,7 @@ async function loadAndParsePage(url) {
 }
 
 async function generateGoogleLuckyUrl(query) {
-  const parsedResponse = await loadAndParsePage(
-    "https://www.google.com/"
-  );
+  const parsedResponse = await loadAndParsePage("https://www.google.com/");
   const sxsrf = parsedResponse("input[name='sxsrf']").attr("value");
   const ei = parsedResponse("input[name='ei']").attr("value");
   const iflsig = parsedResponse("input[name='iflsig']").attr("value");
@@ -359,18 +357,30 @@ plugins.push({
         "*query at *site"
       ],
       callback: async (query, site) => {
-        commander.openTabWithUrl(await generateGoogleLuckyUrl(query + " on " + site));
+        commander.openTabWithUrl(
+          await generateGoogleLuckyUrl(query + " on " + site)
+        );
       },
       priority: 0.3
     },
     {
       commands: ["search for *query", "google *query", "*query"],
       callback: query => {
-        commander.openTabWithUrl(
-          "https://www.google.com/search?gs_ivs=1&q=" +
-            encodeURIComponent(query)
-        );
-        commander.clearNotifications();
+        chrome.storage.local.get(["tts"], result => {
+          // If TTS is enabled, we need to clear notifications to avoid the TTS to feedback into the command.
+          if (result.tts) {
+            commander.openTabWithUrl(
+              "https://www.google.com/search?gs_ivs=1&q=" +
+                encodeURIComponent(query)
+            );
+            commander.clearNotifications();
+          } else {
+            commander.openTabWithUrl(
+              "https://www.google.com/search?q=" +
+                encodeURIComponent(query)
+            );
+          }
+        });
       },
       priority: 0.2
     }
diff --git a/src/manifest.json b/src/manifest.json
index c15cde9..df973d6 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -45,7 +45,8 @@
     "storage"
   ],
   "web_accessible_resources": [
-    "notification_ui.html"
+    "notification_ui.html",
+    "img/*"
   ],
   "optional_permissions": ["bookmarks"],
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
diff --git a/src/svelte/OptionCard.svelte b/src/svelte/OptionCard.svelte
index 80fe6e7..dc2a7ba 100644
--- a/src/svelte/OptionCard.svelte
+++ b/src/svelte/OptionCard.svelte
@@ -17,7 +17,10 @@
 
 <style>
   :global(.card) {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+      0 2px 10px 0 rgba(0, 0, 0, 0.12);
     margin: 5px;
+    padding-top: 5px;
     text-align: center;
   }
 
@@ -41,7 +44,9 @@
 </style>
 
 <Card class="card">
-  <PrimaryAction on:click={onClick} class="{!option.disableClick ? 'clickable' : ''}">
+  <PrimaryAction
+    on:click={onClick}
+    class={!option.disableClick ? 'clickable' : ''}>
     <Media>
       <MdiIcon size="48" icon={option.icon} color={ICON_COLOR} />
       {#if option.enabled}
diff --git a/src/svelte/OptionPlugin.svelte b/src/svelte/OptionPlugin.svelte
index 5f97ee1..9775f76 100644
--- a/src/svelte/OptionPlugin.svelte
+++ b/src/svelte/OptionPlugin.svelte
@@ -8,6 +8,8 @@
 
 <style>
   :global(.option-plugin-card) {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+      0 2px 10px 0 rgba(0, 0, 0, 0.12);
     margin: 2px;
     flex-grow: 5;
     width: calc(50% - 4px);
diff --git a/src/svelte/Options.svelte b/src/svelte/Options.svelte
index 3039990..aa61a51 100644
--- a/src/svelte/Options.svelte
+++ b/src/svelte/Options.svelte
@@ -5,9 +5,11 @@
     mdiBellRing,
     mdiPencil,
     mdiKeyboard,
-    mdiComment
+    mdiTextToSpeech,
+    mdiThumbUp
   } from "@mdi/js";
   import Card, { Content } from "@smui/card";
+  import Snackbar, { Label as SnackbarLabel } from "@smui/snackbar";
   import Textfield from "@smui/textfield";
   import Tab, { Icon, Label as TabLabel } from "@smui/tab";
   import TabBar from "@smui/tab-bar";
@@ -19,6 +21,7 @@
   import { DEBUG, ICON_COLOR, storage } from "../js/common";
   import { allPlugins } from "../js/plugins";
 
+  let micPermissionGrantedSnackbar;
   let tabs = ["Options", "Supported commands"];
   const tabIndex = new URL(window.location).searchParams.get("tab") || 0;
   let activeTab = tabs[tabIndex];
@@ -41,14 +44,27 @@
   let hotword = {
     icon: mdiMicrophone,
     title: '"Hey buddy" hotword detection',
-    caption: 'We will listen to "Hey buddy" hotword command in the background.',
+    caption:
+      'We will listen to "Hey buddy" hotword command in the background. Click here to disable hotword detection.',
     errorCaption:
-      "Hotword detection is not enabled. Click here to trigger by saying the hotword",
+      "Hotword detection is disabled. Click here to enable hotword detection",
     onClick: enabled => {
       storage.set({ hotword: enabled });
     }
   };
 
+  let tts = {
+    icon: mdiTextToSpeech,
+    title: 'Voice response on search result',
+    caption:
+      'Auto play voice response on Google search result page if available.',
+    errorCaption:
+      "Voice response is disabled. Click here to enable voice response on Google search result.",
+    onClick: enabled => {
+      storage.set({ tts: enabled });
+    }
+  };
+
   let shortcut = {
     icon: mdiKeyboard,
     title: "Keyboard shortcut",
@@ -78,13 +94,11 @@
     shortcut.enabled = !!shortcut.caption;
   });
 
-  storage.get(
-    ["customHotword", "hotword"],
-    result => {
-      customHotword = result.customHotword || "";
-      hotword.enabled = result.hotword;
-    }
-  );
+  storage.get(["customHotword", "tts", "hotword"], result => {
+    customHotword = result.customHotword || "";
+    tts.enabled = result.tts;
+    hotword.enabled = result.hotword;
+  });
 
   navigator.mediaDevices
     .getUserMedia({ audio: true })
@@ -93,6 +107,18 @@
     })
     .catch(error => {
       voiceOption.enabled = false;
+      const intervalHandle = setInterval(async () => {
+        try {
+          const hasMicAccess = await navigator.mediaDevices.getUserMedia({
+            audio: true
+          });
+          voiceOption.enabled = true;
+          storage.set({ hotword: true }, () => {
+            chrome.tabs.update({ url: 'https://bewisse.com/heybuddy/thankyou/' });
+          });
+          clearInterval(intervalHandle);
+        } catch (ignored) {}
+      }, 1000);
     });
 
   $: storage.set({ customHotword });
@@ -137,7 +163,7 @@
 <div class="main-content">
   <h1 class="mdc-typography--headline6">
     <Button href="https://bewisse.com/heybuddy/">
-      <img class="logo" src="img/icon_128.png" height="32" alt="Logo" />
+      <img class="logo" src="/img/icon_128.png" height="32" alt="Logo" />
       &nbsp;
       <Label class="logo-text">Hey Buddy - Chrome Voice Assistant</Label>
     </Button>
@@ -145,9 +171,9 @@
       class="reviews-button"
       href="https://chrome.google.com/webstore/detail/chrome-voice-assistant/aollofiafbblhopkofbfmlmbhbdcblem"
       target="_blank">
-      <MdiIcon size="24" icon={mdiComment} color={ICON_COLOR} />
+      <MdiIcon size="24" icon={mdiThumbUp} color={ICON_COLOR} />
       &nbsp;
-      <Label color={ICON_COLOR}>Review & Feedbacks</Label>
+      <Label color={ICON_COLOR}>Rate us!</Label>
     </Button>
   </h1>
 
@@ -159,32 +185,47 @@
   {#if activeTab === tabs[0]}
     <div class="transition-container" transition:fly={{ x: -200 }}>
       {#if !voiceOption.enabled}
+        <Card class="card">
+          <Content>
+            <div class="mdc-typography--subtitle1">
+              🎉 Thank you for installing Hey Buddy 🎉
+            </div>
+            <div class="mdc-typography--subtitle2">
+              We just need one more permission from you to access your
+              microphone
+            </div>
+          </Content>
+        </Card>
         <OptionCard option={voiceOption} />
       {:else}
+        <Snackbar bind:this={micPermissionGrantedSnackbar}>
+          <SnackbarLabel>Great! You are all set! Just say "Hey Buddy" to start!</SnackbarLabel>
+        </Snackbar>
         <OptionCard option={hotword} />
+        <OptionCard option={tts} />
+        <OptionCard option={shortcut} />
+        <Card class="card">
+          <Content>
+            <div class="mdc-typography--subtitle1">Hotwords</div>
+            <div class="mdc-typography--caption">
+              Say one of these hotwords to trigger Hey Buddy by voice.
+            </div>
+            <Textfield
+              variant="filled"
+              disabled
+              class="hotword-input"
+              value="Hey Buddy (default and cannot be changed)"
+              input$readonly
+              input$aria-readonly />
+            <Textfield
+              variant="outlined"
+              class="hotword-input"
+              input$placeholder="Set custom hotword"
+              bind:value={customHotword}
+              input$minlength="5" />
+          </Content>
+        </Card>
       {/if}
-      <OptionCard option={shortcut} />
-      <Card class="card">
-        <Content>
-          <div class="mdc-typography--subtitle1">Hotwords</div>
-          <div class="mdc-typography--caption">
-            Say one of these hotwords to trigger Hey Buddy by voice.
-          </div>
-          <Textfield
-            variant="filled"
-            disabled
-            class="hotword-input"
-            value="Hey Buddy (default and cannot be changed)"
-            input$readonly
-            input$aria-readonly />
-          <Textfield
-            variant="outlined"
-            class="hotword-input"
-            input$placeholder="Set custom hotword"
-            bind:value={customHotword}
-            input$minlength="5" />
-        </Content>
-      </Card>
     </div>
   {/if}
   {#if activeTab === tabs[1]}
diff --git a/src/svelte/Popup.svelte b/src/svelte/Popup.svelte
index 697493d..6ef930e 100644
--- a/src/svelte/Popup.svelte
+++ b/src/svelte/Popup.svelte
@@ -135,12 +135,14 @@
 <style>
   :global(html) {
     width: 480px;
-    height: 400px;
+    height: 390px;
     overflow: hidden;
+    font-size: 16px;
   }
 
   :global(a) {
     color: #2196f3;
+    text-decoration: none;
   }
 
   .main {
@@ -167,6 +169,7 @@
   }
 
   .hint {
+    font-size: 16px;
     bottom: 5px;
     color: #aaa;
     position: absolute;
@@ -208,7 +211,14 @@
     color: #ffffff;
   }
 
+  .thumb-up-icon {
+    vertical-align: middle;
+    width: 18px;
+    height: 18px;
+  }
+
   .reviews {
+    font-size: 16px;
     right: 10px;
     position: absolute;
   }
@@ -220,7 +230,15 @@
     class="reviews"
     href="https://chrome.google.com/webstore/detail/chrome-voice-assistant/aollofiafbblhopkofbfmlmbhbdcblem"
     target="_blank">
-    Review / Send feedbacks
+    <svg class="thumb-up-icon" viewBox="0 0 24 24">
+      <path
+        fill="#2196f3"
+        d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22
+        15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95
+        7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5
+        19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z" />
+    </svg>
+    Rate us!
   </a>
   <div class="query-form">
     <input
@@ -259,8 +277,9 @@
     {/if}
 
     <div class="hint">
-      <a href="/options.html?tab=1" target="_blank">See all supported commands</a>
-      .
+      <a href="/options.html?tab=1" target="_blank">
+        See all supported commands
+      </a>
     </div>
   </div>
 </div>
diff --git a/webpack.config.js b/webpack.config.js
index fe231db..e63ee1a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -97,6 +97,7 @@ var options = {
   plugins: [
     // clean the build folder
     new CleanWebpackPlugin({
+      cleanStaleWebpackAssets: false,
       cleanOnceBeforeBuildPatterns: [path.join(__dirname, "build")]
     }),
     new MiniCssExtractPlugin(),