diff --git a/package.json b/package.json
index 06216b23..cbc75453 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "compression": "^1.7.1",
     "exceljs": "^4.2.1",
     "polka": "next",
+    "prettier": "^2.2.1",
     "sirv": "^1.0.0"
   },
   "devDependencies": {
diff --git a/src/locales/en.json b/src/locales/en.json
index 1d16784e..3aad61d2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -55,6 +55,10 @@
     "calculator": {
       "title": "🧮 Calculate Character and Weapons ascension material and talent book! All the calculations can be added to the Todo list, it will show you how much resin you need too!",
       "detail": "Calculator"
+    },
+    "twitter": {
+      "title": "Follow my Twitter, will occasionally post sneak peak what I currently develop and latest update to paimon.moe!",
+      "detail": "Follow Twitter"
     }
   },
   "characters": {
diff --git a/src/locales/id.json b/src/locales/id.json
index 2819d2be..089cb6d5 100644
--- a/src/locales/id.json
+++ b/src/locales/id.json
@@ -55,6 +55,10 @@
     "calculator": {
       "title": "🧮 Hitung Ascension dan Talent Book Karakter dan Senjata! Semua hasil perhitungan bisa ditambahkan ke daftar todo, dan juga akan menampilkan berapa resin yang kamu perlukan!",
       "detail": "Kalkulator"
+    },
+    "twitter": {
+      "title": "Follow my Twitter, akan post tentang apa yang lagi di develop dan update terbaru tentang paimon.moe!",
+      "detail": "Follow Twitter"
     }
   },
   "characters": {
diff --git a/src/routes/_index/twitter.svelte b/src/routes/_index/twitter.svelte
new file mode 100644
index 00000000..629167d6
--- /dev/null
+++ b/src/routes/_index/twitter.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { mdiChevronRight, mdiTwitter } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import Icon from '../../components/Icon.svelte';
+</script>
+
+<div class="bg-item rounded-xl p-4 flex flex-col items-start">
+  <p class="text-white ml-2">
+    {$t('home.twitter.title')}
+  </p>
+  <a
+    href="https://twitter.com/MadeBaruna"
+    target="_blank"
+    class="flex justify-end items-center self-end lg:self-start text-white mt-4 bg-background-secondary rounded-xl py-2 px-4
+    hover:bg-background transition-colors duration-100"
+  >
+  <Icon path={mdiTwitter} className="mr-2" />
+    {$t('home.twitter.detail')}
+    <Icon path={mdiChevronRight} />
+  </a>
+</div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 543a1f9d..6e18ad2c 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
   import debounce from 'lodash/debounce';
+  import { locale } from 'svelte-i18n';
 
   import Masonry from '../components/Masonry.svelte';
 
@@ -12,6 +13,7 @@
   import Item from './_index/item.svelte';
   import Calculator from './_index/calculator.svelte';
   import Discord from './_index/discord.svelte';
+  import Twitter from './_index/twitter.svelte';
 
   let refreshLayout;
 
@@ -22,7 +24,13 @@
   onMount(() => {
     setTimeout(() => {
       refreshLayout();
-    }, 1);
+    }, 1000);
+
+    locale.subscribe(() => {
+      setTimeout(() => {
+        refreshLayout();
+      }, 1);
+    });
   });
 </script>
 
@@ -46,6 +54,7 @@
     <Event on:done={onDone} />
     <Item on:done={onDone} />
     <Discord on:done={onDone} />
+    <Twitter on:done={onDone} />
     <Calculator on:done={onDone} />
   </Masonry>
 </div>
diff --git a/yarn.lock b/yarn.lock
index dbd35ed8..c1b79bb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2493,6 +2493,11 @@ postcss@^8.1.2:
     nanoid "^3.1.12"
     source-map "^0.6.1"
 
+prettier@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
+  integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"