diff --git a/api/cards/most-commit-language.js b/api/cards/most-commit-language.js
index 179f506cc..222f340be 100644
--- a/api/cards/most-commit-language.js
+++ b/api/cards/most-commit-language.js
@@ -1,10 +1,31 @@
 const {
     getCommitsLanguageSVGWithThemeName,
 } = require('../../src/cards/most-commit-lauguage-card');
+const { changToNextGitHubToken } = require('../utils/github-token-updater');
+const { getErrorMsgCard } = require('../utils/error-card');
 
 module.exports = async (req, res) => {
     const { username, theme } = req.query;
-    const cardSVG = await getCommitsLanguageSVGWithThemeName(username, theme);
-    res.setHeader('Content-Type', 'image/svg+xml');
-    res.send(cardSVG);
+    try {
+        let tokenIndex = 0;
+        while (true) {
+            try {
+                const cardSVG = await getCommitsLanguageSVGWithThemeName(
+                    username,
+                    theme
+                );
+                res.setHeader('Content-Type', 'image/svg+xml');
+                res.send(cardSVG);
+                return;
+            } catch (err) {
+                console.log(err.message);
+                // We update github token and try again, until getNextGitHubToken throw an Error
+                changToNextGitHubToken(tokenIndex);
+                tokenIndex += 1;
+            }
+        }
+    } catch (err) {
+        console.log(err);
+        res.send(getErrorMsgCard(err.message, theme));
+    }
 };
diff --git a/api/cards/productive-time.js b/api/cards/productive-time.js
index 59dce2ca5..34d5ba342 100644
--- a/api/cards/productive-time.js
+++ b/api/cards/productive-time.js
@@ -1,10 +1,31 @@
 const {
     getProductiveTimeSVGWithThemeName,
 } = require('../../src/cards/productive-time-card');
+const { changToNextGitHubToken } = require('../utils/github-token-updater');
+const { getErrorMsgCard } = require('../utils/error-card');
 
 module.exports = async (req, res) => {
     const { username, theme } = req.query;
-    const cardSVG = await getProductiveTimeSVGWithThemeName(username, theme);
-    res.setHeader('Content-Type', 'image/svg+xml');
-    res.send(cardSVG);
+    try {
+        let tokenIndex = 0;
+        while (true) {
+            try {
+                const cardSVG = await getProductiveTimeSVGWithThemeName(
+                    username,
+                    theme
+                );
+                res.setHeader('Content-Type', 'image/svg+xml');
+                res.send(cardSVG);
+                return;
+            } catch (err) {
+                console.log(err.message);
+                // We update github token and try again, until getNextGitHubToken throw an Error
+                changToNextGitHubToken(tokenIndex);
+                tokenIndex += 1;
+            }
+        }
+    } catch (err) {
+        console.log(err);
+        res.send(getErrorMsgCard(err.message, theme));
+    }
 };
diff --git a/api/cards/profile-details.js b/api/cards/profile-details.js
index 6c2ce91a8..bf1166f4e 100644
--- a/api/cards/profile-details.js
+++ b/api/cards/profile-details.js
@@ -1,10 +1,31 @@
 const {
     getProfileDetailsSVGWithThemeName,
 } = require('../../src/cards/profile-details-card');
+const { changToNextGitHubToken } = require('../utils/github-token-updater');
+const { getErrorMsgCard } = require('../utils/error-card');
 
 module.exports = async (req, res) => {
     const { username, theme } = req.query;
-    const cardSVG = await getProfileDetailsSVGWithThemeName(username, theme);
-    res.setHeader('Content-Type', 'image/svg+xml');
-    res.send(cardSVG);
+    try {
+        let tokenIndex = 0;
+        while (true) {
+            try {
+                const cardSVG = await getProfileDetailsSVGWithThemeName(
+                    username,
+                    theme
+                );
+                res.setHeader('Content-Type', 'image/svg+xml');
+                res.send(cardSVG);
+                return;
+            } catch (err) {
+                console.log(err.message);
+                // We update github token and try again, until getNextGitHubToken throw an Error
+                changToNextGitHubToken(tokenIndex);
+                tokenIndex += 1;
+            }
+        }
+    } catch (err) {
+        console.log(err);
+        res.send(getErrorMsgCard(err.message, theme));
+    }
 };
diff --git a/api/cards/repos-per-language.js b/api/cards/repos-per-language.js
index 9888db4ba..8e030fb6f 100644
--- a/api/cards/repos-per-language.js
+++ b/api/cards/repos-per-language.js
@@ -1,10 +1,31 @@
 const {
     getReposPerLanguageSVGWithThemeName,
 } = require('../../src/cards/repos-per-language-card');
+const { changToNextGitHubToken } = require('../utils/github-token-updater');
+const { getErrorMsgCard } = require('../utils/error-card');
 
 module.exports = async (req, res) => {
     const { username, theme } = req.query;
-    const cardSVG = await getReposPerLanguageSVGWithThemeName(username, theme);
-    res.setHeader('Content-Type', 'image/svg+xml');
-    res.send(cardSVG);
+    try {
+        let tokenIndex = 0;
+        while (true) {
+            try {
+                const cardSVG = await getReposPerLanguageSVGWithThemeName(
+                    username,
+                    theme
+                );
+                res.setHeader('Content-Type', 'image/svg+xml');
+                res.send(cardSVG);
+                return;
+            } catch (err) {
+                console.log(err.message);
+                // We update github token and try again, until getNextGitHubToken throw an Error
+                changToNextGitHubToken(tokenIndex);
+                tokenIndex += 1;
+            }
+        }
+    } catch (err) {
+        console.log(err);
+        res.send(getErrorMsgCard(err.message, theme));
+    }
 };
diff --git a/api/cards/stats.js b/api/cards/stats.js
index b40ca0f72..64dbe8f94 100644
--- a/api/cards/stats.js
+++ b/api/cards/stats.js
@@ -1,8 +1,26 @@
 const { getStatsSVGWithThemeName } = require('../../src/cards/stats-card');
+const { changToNextGitHubToken } = require('../utils/github-token-updater');
+const { getErrorMsgCard } = require('../utils/error-card');
 
 module.exports = async (req, res) => {
     const { username, theme } = req.query;
-    const cardSVG = await getStatsSVGWithThemeName(username, theme);
-    res.setHeader('Content-Type', 'image/svg+xml');
-    res.send(cardSVG);
+    try {
+        let tokenIndex = 0;
+        while (true) {
+            try {
+                const cardSVG = await getStatsSVGWithThemeName(username, theme);
+                res.setHeader('Content-Type', 'image/svg+xml');
+                res.send(cardSVG);
+                return;
+            } catch (err) {
+                console.log(err.message);
+                // We update github token and try again, until getNextGitHubToken throw an Error
+                changToNextGitHubToken(tokenIndex);
+                tokenIndex += 1;
+            }
+        }
+    } catch (err) {
+        console.log(err);
+        res.send(getErrorMsgCard(err.message, theme));
+    }
 };
diff --git a/api/pages/demo.html b/api/pages/demo.html
index 01c4ac26d..4c2cef49f 100644
--- a/api/pages/demo.html
+++ b/api/pages/demo.html
@@ -1,5 +1,3 @@
-
-
 <!DOCTYPE html>
 <html>
    <head>
@@ -27,7 +25,7 @@
       <div id="app">
          <v-app>
             <v-main>
-               <v-container>
+               <v-container fluid class="py-8 px-6">
       <a href="https://github.com/vn7n24fzkq/github-profile-summary-cards" class="github-corner" aria-label="View source on GitHub">
          <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
@@ -39,6 +37,12 @@
                   <v-col cols="3">
                      <v-card width="800">
                         <v-col md="auto">
+                           <p class="font-weight-black text-center">
+                              GitHub Profile Summary Cards
+                           </p>
+                           <div>
+                                <iframe src="https://ghbtns.com/github-btn.html?user=vn7n24fzkq&repo=github-profile-summary-cards&type=star&count=true&size=large" frameborder="0" scrolling="0" width="100%" height="30" title="GitHub"></iframe>
+                           </div>
                            <v-switch
                               v-model="$vuetify.theme.dark"
                               inset
@@ -66,6 +70,7 @@
                               >
                               Submit 
                            </v-btn>
+                               
                         </v-col>
                      </v-card>
                   </v-col>
@@ -146,6 +151,14 @@
                   </v-card>
                   <v-row>
                </v-container>
+               <v-footer padless>
+                    <v-col
+                        class="text-center"
+                        cols="12"
+                    >
+                        <strong>GitHub Profile Summary Cards</strong>
+                    </v-col>
+               </v-footer>
             </v-main>
          </v-app>
       </div>
@@ -165,7 +178,7 @@
                  commitLanguageSource:'',
                  statsSource:'',
                  productiveTimeSource:'',
-                 baseURL:'https://github-profile-summary-cards.vercel.app',
+                 baseURL:`https://${window.location.host}`,
              },
              created(){
                  axios
@@ -194,5 +207,3 @@
       </script>
    </body>
 </html>
-
-
diff --git a/api/utils/error-card.js b/api/utils/error-card.js
new file mode 100644
index 000000000..48e11317d
--- /dev/null
+++ b/api/utils/error-card.js
@@ -0,0 +1,23 @@
+const Card = require('../../src/templates/card');
+const ThemeMap = require('../../src/const/theme');
+
+const getErrorMsgCard = function (msg, themeName) {
+    const theme = ThemeMap.get(themeName);
+    theme.title_color = 'red';
+
+    const card = new Card('ERROR!!!', 340, 200, theme);
+    const svg = card.getSVG();
+    const panel = svg.append('g').attr('transform', `translate(30,20)`);
+    panel
+        .append('text')
+        .attr('y', `${card.yPadding}`)
+        .style('font-size', `14px`)
+        .style('fill', 'red')
+        .text(msg);
+
+    return card.toString();
+};
+
+module.exports = {
+    getErrorMsgCard,
+};
diff --git a/api/utils/github-token-updater.js b/api/utils/github-token-updater.js
new file mode 100644
index 000000000..5d3f5af44
--- /dev/null
+++ b/api/utils/github-token-updater.js
@@ -0,0 +1,12 @@
+const changToNextGitHubToken = function (currentIndex) {
+    const tokenName = `GITHUB_TOKEN_${currentIndex + 1}`;
+    console.log(`Change to ${tokenName}`);
+    process.env.GITHUB_TOKEN = process.env[tokenName];
+    if (!process.env.GITHUB_TOKEN) {
+        throw new Error('No more GITHUB_TOKEN can be used');
+    }
+};
+
+module.exports = {
+    changToNextGitHubToken,
+};
diff --git a/src/templates/card.js b/src/templates/card.js
index bb1f5cec0..685f05612 100644
--- a/src/templates/card.js
+++ b/src/templates/card.js
@@ -1,3 +1,4 @@
+const ThemeMap = require('../const/theme');
 const select = require('d3').select;
 const JSDOM = require('jsdom').JSDOM;
 
@@ -6,7 +7,7 @@ class Card {
         title = 'Title',
         width = 1280,
         height = 1024,
-        theme = Theme['default'],
+        theme = ThemeMap.get('default'),
         xPadding = 30,
         yPadding = 40
     ) {