16 files changed, 111 insertions, 70 deletions

diff --git a/.hintrc b/.hintrc
index e7fa2a23..46c97678 100644
--- a/.hintrc
+++ b/.hintrc
@@ -7,7 +7,9 @@
       "default",
       {
         "ignore": [
-          "image-rendering: crisp-edges"
+          "image-rendering: crisp-edges",
+          "scrollbar-width",
+          "scrollbar-width: none"
         ]
       }
     ]
diff --git a/static/css/home.css b/static/css/core/home.css
index 8405b6e7..79df5690 100644
--- a/static/css/home.css
+++ b/static/css/core/home.css
@@ -1,19 +1,18 @@
 #welcome {
-    width: 730px;
-    min-height: 262px;
-    background: url('../images/backgrounds/welcome-banner.png') no-repeat;
-    background-size: 730px 262px;
-    margin: 0px auto 20px auto;
+    width: 780px;
+    min-height: 280px;
+    background: url('../../images/core/backgrounds/welcome-banner.png') no-repeat;
+    background-size: 780px 280px;
+    margin: 15px auto;
     border: 0px;
     position: relative;
-    margin-top: 15px;
     text-align: justify;
     border-radius: 8px;
 }
 
 #welcome>p {
-    width: 375px;
-    margin: 12px 0px 12px 50px;
+    width: 410px;
+    margin: 12px 0px 12px 48px;
     position: relative;
     top: 20px;
     text-align: justify;
@@ -21,44 +20,43 @@
 
 #chatbox {
     position: absolute;
-    right: 110px;
-    width: 160px;
-    top: 25px;
+    right: 116px;
+    width: 172px;
+    top: 24px;
 }
 
 #messages {
-    height: 175px;
+    height: 176px;
     overflow-y: scroll;
     position: relative;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
-/* Hide scrollbar for Chrome, Safari and Opera */
 #messages::-webkit-scrollbar {
     display: none;
 }
 
-/* Hide scrollbar for IE, Edge and Firefox */
-#messages {
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none;
-    /* Firefox */
-}
-
 .message {
     text-align: left;
 }
 
 #chatbox-input {
-    width: 156px;
+    width: 168px;
     border: none;
-    padding: 10px 2px 2px 2px;
+    margin-top: 4px;
+    padding: 4px 2px 2px 2px;
     resize: none;
     border-top: solid 1px rgba(222, 222, 222, 0.7);
     border-radius: 0;
-    height: 35px;
+    height: 64px;
 }
 
+#uc {
+    width: 780px;
+}
+
+/* 
 #announcements {
     background: url('../images/backgrounds/announcements.png') no-repeat;
     background-size: 730px 300px;
@@ -103,10 +101,8 @@ marquee>ul {
     text-align: justify;
 }
 
-#uc {
-    width: 730px;
-}
+
 
 #adfs {
     width: 720px;
-}
+} */
\ No newline at end of file
diff --git a/static/css/shared/core.css b/static/css/shared/core.css
index 30675fbd..fc369c39 100644
--- a/static/css/shared/core.css
+++ b/static/css/shared/core.css
@@ -2,15 +2,9 @@
 @font-face {
   font-family: 'Klee';
   src: url('../../fonts/KleeOne-Regular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Klee';
-  src: url('../../fonts/KleeOne-SemiBold.ttf') format('truetype');
-  font-weight: bold;
+  font-weight: 400;
   font-style: normal;
+  font-display: swap
 }
 
 @font-face {
@@ -27,8 +21,6 @@
   outline: none;
   border: none;
   color: #fff;
-  font-family: 'Klee', sans-serif;
-  font-size: 12px;
 }
 
 /* HTML and Body Base */
@@ -38,26 +30,20 @@ html {
   min-width: 1200px;
 }
 
-/* html[lang='en'],
-html[lang='en'] input,
-.en {
-  font-family: 'AP';
-  font-size: 12px;
-}
-
-html[lang='ja'],
-html[lang='ja'] input,
-.ja {
-  font-family: 'AP';
-  font-size: 12px;
-} */
-
 body {
   min-height: 100vh;
   overflow-x: hidden;
   position: relative;
 }
 
+body,
+textarea,
+input {
+  font-family: 'Klee';
+  font-size: 12px;
+  font-weight: 400;
+}
+
 /* Element Styles */
 hr {
   height: 1px;
@@ -81,6 +67,11 @@ a:hover {
   text-decoration: underline;
 }
 
+textarea {
+  resize: none;
+  background: transparent;
+}
+
 /* Image Styles */
 img {
   -webkit-backface-visibility: hidden;
diff --git a/static/images/core/backgrounds/announcements.png b/static/images/core/backgrounds/announcements.png
new file mode 100644
index 00000000..b8e65c38
--- /dev/null
+++ b/static/images/core/backgrounds/announcements.png
diff --git a/static/images/core/backgrounds/welcome-banner.png b/static/images/core/backgrounds/welcome-banner.png
new file mode 100644
index 00000000..77a77725
--- /dev/null
+++ b/static/images/core/backgrounds/welcome-banner.png
diff --git a/static/images/core/gifs/construction.gif b/static/images/core/gifs/construction.gif
new file mode 100644
index 00000000..c7ce1277
--- /dev/null
+++ b/static/images/core/gifs/construction.gif
diff --git a/static/images/core/icons/discussions.png b/static/images/core/icons/discussions.png
new file mode 100644
index 00000000..0fb0bd5f
--- /dev/null
+++ b/static/images/core/icons/discussions.png
diff --git a/static/images/core/icons/games.png b/static/images/core/icons/games.png
new file mode 100644
index 00000000..1bd3fc2e
--- /dev/null
+++ b/static/images/core/icons/games.png
diff --git a/static/images/core/icons/registeraccount.png b/static/images/core/icons/registeraccount.png
new file mode 100644
index 00000000..071ceff2
--- /dev/null
+++ b/static/images/core/icons/registeraccount.png
diff --git a/static/images/core/icons/screenshots.png b/static/images/core/icons/screenshots.png
new file mode 100644
index 00000000..563dd621
--- /dev/null
+++ b/static/images/core/icons/screenshots.png
diff --git a/static/images/core/icons/useraccount.png b/static/images/core/icons/useraccount.png
new file mode 100644
index 00000000..2938efb7
--- /dev/null
+++ b/static/images/core/icons/useraccount.png
diff --git a/templates/en/core/home.html b/templates/en/core/home.html
index 7bb4e831..ce8cc993 100644
--- a/templates/en/core/home.html
+++ b/templates/en/core/home.html
@@ -1,11 +1,25 @@
 {% extends 'shared/base.html' %}
+{% load static %}
+{% block head %}
+<link rel="stylesheet" href="{% static 'css/core/home.css' %}">
+{% endblock head %}
 {% block content %}
-  <p style="text-align: justify;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt dolore aut iure officia, dolor dolorem tempora! Similique qui impedit, doloribus iure dolores repellendus doloremque voluptate veniam voluptatum repudiandae animi eum molestiae consequuntur facere corporis, distinctio illo? Rerum non autem quam corrupti temporibus aliquid sed eveniet. Dolores cumque dolorum fugiat nesciunt nobis voluptate suscipit? Temporibus, sequi. Neque fuga ullam aliquam praesentium enim, perferendis sit illo animi eos aspernatur dolorem, nemo suscipit a officia cupiditate impedit facilis consequuntur maxime quisquam reiciendis necessitatibus quo repudiandae ipsum. Dolorum nesciunt, voluptatem voluptatum nisi, dolor dignissimos, sequi doloribus quia quisquam odit repellat excepturi doloremque impedit illum deleniti mollitia maxime facilis! Vero, nam dolorum culpa ut quam unde, voluptatum ipsum cum rem assumenda dignissimos quaerat commodi ex impedit, reiciendis aliquam ipsam perspiciatis incidunt ad modi maiores! Alias exercitationem provident sequi voluptatem eveniet excepturi illum dolor, ad odit officiis perspiciatis? Doloribus ab molestiae consectetur vitae repellendus ipsa voluptatibus?</p>
-  <p style="text-align: justify;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rem amet illum praesentium enim, temporibus aut, consectetur cum aliquid, inventore repudiandae eveniet. Saepe alias deleniti autem quam fuga accusantium qui eveniet exercitationem quos, inventore quae dicta voluptate consequuntur sint eaque quo voluptatem aliquam tempore repudiandae! Nobis hic ipsum vitae eum voluptatibus, totam deserunt accusamus eius perferendis sed quibusdam repellat ipsa temporibus laborum? Ex eveniet autem debitis nostrum, quibusdam magnam nisi minus.</p>
-  <div class="pamphlet pamphlet-banner"></div>
-  <p style="text-align: justify;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facilis vero velit cum vitae dolor aspernatur aliquam similique quidem? Veritatis molestiae recusandae atque. Pariatur, fuga et nulla mollitia animi eius sapiente enim quidem, ex reiciendis quasi aut ad molestiae quo repudiandae! Eum nesciunt repellat quia! Delectus saepe, a fugiat, molestiae at amet eum expedita ipsum laudantium non quaerat inventore earum vel obcaecati aut ea voluptatum possimus vitae vero corporis nesciunt architecto ab nisi? Omnis, veritatis autem delectus vero fuga modi, esse labore nulla, numquam doloribus possimus perspiciatis? Facere optio blanditiis reiciendis! Consequatur sint voluptates, nostrum dolor, labore facere quis veritatis perspiciatis, molestias fuga perferendis accusamus nemo rem! Aperiam dolore illum aliquid sequi fuga. Quasi, porro qui? Illum possimus corporis error temporibus voluptates, rerum hic, atque recusandae quo blanditiis vitae in? Minima tenetur expedita quisquam architecto, ullam rerum laudantium quae provident ex? Tenetur aliquid omnis unde laudantium provident excepturi et autem quo itaque perspiciatis, veniam recusandae aperiam delectus repellat dicta placeat! Labore rerum ea voluptatum, sed deleniti accusamus ducimus fugiat, quis provident voluptates, placeat temporibus reiciendis minus dolorem consectetur. Laborum architecto ipsam molestias ut. Temporibus, quis qui laboriosam sunt numquam consectetur distinctio, natus adipisci odit commodi autem eum harum. Animi, soluta enim?</p>
-  <p style="text-align: justify;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque esse eos consequatur dolorum inventore consequuntur ea veniam et amet, eligendi ab deleniti natus repellendus ipsam non velit sit optio! Et commodi accusantium deserunt illo, doloribus, similique sapiente, minus ullam nam eos dolores necessitatibus suscipit nemo laudantium? Nemo vitae quae odit quis aspernatur temporibus, blanditiis vel veritatis cupiditate deleniti vero laborum dolorum error dolorem quam velit repellat quas nihil placeat? Sint nisi in commodi tempora sapiente distinctio atque voluptatem maxime, reiciendis, consectetur repellendus vel expedita cum harum consequuntur unde nobis. Quia sed rem ea ad totam laboriosam ratione pariatur eaque odit!</p>
-  <div class="pamphlet pamphlet-banner"></div>
-  <p style="text-align: justify;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo quae, possimus deleniti cumque nostrum similique doloribus minus, ipsa numquam, minima quam eius dolorum ad quas soluta asperiores reprehenderit! Dolores voluptatem quidem dicta et quo, nesciunt ab excepturi. Dolorum fuga, quae provident voluptate excepturi molestias, nemo explicabo cupiditate eligendi eius assumenda quo cum ex fugit nobis veniam! Alias neque dicta, eligendi reiciendis reprehenderit sit repudiandae praesentium omnis temporibus molestiae fugit est, maiores fuga officia molestias quae. Iste rem architecto est fuga.</p>
-  <p style="text-align: justify;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Alias, veritatis accusantium praesentium quidem, saepe ut et dolore voluptatibus aliquid vitae iusto cupiditate dolorum. Velit iure necessitatibus debitis. Libero, molestias obcaecati.</p>
+<div id="welcome">
+  <p>
+    Welcome to the home of <strong>Shifoo</strong> (previously <i>That Computer Scientist</i>). My name is <a href="#">@bobby</a>, and this is my personal
+    website. I aim to build a retro looking personal website, where I share my thoughts, ideas, and experiences through articles, and will showcase some cool nostalgic features and tools.
+  </p>
+  <p>
+  Please note that I am continuously working on this site, and it is still under construction. So, not all features are available yet, and some features may not work as intended.
+  </p>
+  <p>
+    There's also a some of <a href="#thegoodstuff">The Good Stuff</a> you can find in the sidebar, that you can play around with. I will be adding more in the not so distant future.
+    Also, To participate around various sections of the site, you will need to <a href="#">register</a> for an account. I hope you enjoy your stay here.
+  </p>
+  <div id="chatbox">
+    <div id="messages"></div>
+    <textarea id="chatbox-input" placeholder="Type your message here... (⏎ to send)"></textarea>
+  </div>
+</div>
+<img src="{% static 'images/core/gifs/construction.gif' %}" id="uc">
 {% endblock %}
diff --git a/templates/ja/core/home.html b/templates/ja/core/home.html
index d43b491f..6dbaee74 100644
--- a/templates/ja/core/home.html
+++ b/templates/ja/core/home.html
@@ -1,10 +1,25 @@
 {% extends 'shared/base.html' %}
+{% load static %}
+{% block head %}
+<link rel="stylesheet" href="{% static 'css/core/home.css' %}">
+{% endblock head %}
 {% block content %}
-<p style="text-align: justify;">ロレム・イプサム・ドロール、シット・アメット・コンセクテトゥル・アディピシング・エリト。デセラント・ドローレ・アウト・ジュレ・オフィキア、ドロール・ドローレム・テンポラ！シミリクエ・クイ・インピディット、ドロリブス・ジュレ・ドローレス・レペレンドゥス・ドローレムクエ・ボルプターテ・ベニアム・ボルプタトゥム・レプディアンダエ・アニミ・エウム・モレスティアエ・コンセクエントゥル・ファケレ・コルポリス、ディスティンチオ・イロ？レルム・ノン・アウテム・クアム・コルプティ・テンポリブス・アリクイド・セド・エヴェニエト。ドローレス・クムクエ・ドロルム・フギアト・ネスキウント・ノビス・ボルプターテ・ススチピット？テンポリブス、セクイ。ネクエ・フガ・ウラム・アリクアム・プラエセンティウム・エニム、ペルフェレンディス・シット・イロ・アニミ・エオス・アスペルナトゥル・ドローレム、ネモ・ススチピット・ア・オフィキア・クピディターテ・インピディット・ファキリス・コンセクエントゥル・マクシメ・クィスクァム・レイシンディス・ネセシタティブス・クオ・レプディアンダエ・イプサム。ドロルム・ネスキウント、ボルプタトゥム・ニシ、ドロール・ディグニッシモス、セクイ・ドロリブス・クイア・クィスクァム・オディット・レペッラト・エクセプトゥリ・ドローレムクエ・インピディット・イルム・デレニティ・モルティア・マクシメ・ファキリス！ヴェロ、ナム・ドロルム・クルパ・ウト・クアム・ウンデ、ボルプタトゥム・イプサム・クム・レム・アスムンダ・ディグニッシモス・クアエラト・コモディ・エクス・インピディット、レイシンディス・アリクアム・イプサム・ペルスピキアティス・インチドゥント・アド・モディ・マイオレス！アリアス・エクサーキタティオネム・プロビデント・セクイ・ボルプタテム・エヴェニエト・エクセプトゥリ・イルム・ドロール、アド・オディット・オフィキイス・ペルスピキアティス？ドロリブス・アブ・モレスティアエ・コンセクテトゥル・ウィタエ・レペレンドゥス・イプサ・ボルプタティブス？</p>
-<p style="text-align: justify;">ロレム・イプサム・ドロール、シット・アメット・コンセクテトゥル・アディピシング・エリト。レム・アメット・イルム・プラエセンティウム・エニム、テンポリブス・アウト、コンセクテトゥル・クム・アリクイド、インヴェントレ・レプディアンダエ・エヴェニエト。サエペ・アリアス・デレニティ・アウテム・クアム・フガ・アクサンティウム・クイ・エヴェニエト・エクサーキタティオネム・クォス、インヴェントレ・クエ・ディクタ・ボルプターテ・コンセクエントゥル・シント・エアクエ・クオ・ボルプタテム・アリクアム・テンポレ・レプディアンダエ！ノビス・ヒク・イプサム・ウィタエ・エウム・ボルプタティブス、トタム・デセラント・アクサムス・エイウス・ペルフェレンディス・セド・クィブスダム・レペッラト・イプサ・テンポリブス・ラボラム？エクス・エヴェニエト・アウテム・デビティス・ノストルム、クィブスダム・マグナム・ニシ・ミヌス。</p>
-<div class="pamphlet pamphlet-banner"></div>
-<p style="text-align: justify;">ロレム・イプサム、シット・アメット・コンセクテトゥル・アディピシング・エリト。ファキリス・ヴェロ・ヴェリット・クム・ウィタエ・ドロール・アスペルナトゥル・アリクアム・シミリクエ・クィデム？ヴェリタティス・モレスティアエ・レクサンダエ・アトクエ。パリアトゥル、フガ・エト・ヌッラ・モルティア・アニミ・エイウス・サピエンテ・エニム・クィデム、エクス・レイシンディス・クアシ・アウト・アド・モレスティアエ・クオ・レプディアンダエ！エウム・ネスキウント・レペッラト・クイア！デレクタス・サエペ、ア・フギアト、モレスティアエ・アト・アメット・エウム・エクスペディタ・イプサム・ラウダンティウム・ノン・クアエラト・インヴェントレ・エアラム・ヴェル・オブカエカティ・アウト・エア・ボルプタトゥム・ポシシムス・ウィタエ・ヴェロ・コルポリス・ネスキウント・アルキテクト・アブ・ニシ？オムニス、ヴェリタティス・アウテム・デレクタス・ヴェロ・フガ・モディ、エッセ・ラボレ・ヌッラ、ヌムクアム・ドロリブス・ポシシムス・ペルスピキアティス？ファケレ・オプティオ・ブランディティイス・レイシンディス！コンセクエントゥル・シント・ボルプタテス、ノストルム・ドロール、ラボレ・ファケレ・クィス・ヴェリタティス・ペルスピキアティス、モレスティアス・フガ・ペルフェレンディス・アクサムス・ネモ・レム！アペリアム・ドローレ・イルム・アリクイド・セクイ・フガ。クアシ、ポロ・クイ？イルム・ポシシムス・コルポリス・エロル・テンポリブス・ボルプタテス、レルム・ヒク、アトクエ・レクサンダエ・クオ・ブランディティス・ウィタエ・イン？ミニマ・テネトゥル・エクスペディタ・クィスクァム・アルキテクト、ウラム・レルム・ラウダンティウム・クエ・プロビデント・エクス？テネトゥル・アリクイド・オムニス・ウンデ・ラウダンティウム・プロビデント・エクセプトゥリ・エト・アウテム・クオ・イタケ・ペルスピキアティス、ベニアム・レクサンダエ・アペリアム・レペッラト・ディクタ・プレカエト！ラボレ・レルム・エア・ボルプタトゥム、セド・デレニティ・アクサムス・ドゥキムス・フギアト、クィス・プロビデント・ボルプタテス、プレカエト・テンポリブス・レイシンディス、デレニティ・ファキリス。</p>
-<p style="text-align: justify;">ロレム・イプサム・ドロール・シット・アメット・コンセクテトゥル・アディピシング・エリト。イタケ・エッセ・エオス・コンセクエントゥル・ドロロルム・インヴェントレ・コンセクテトゥル・エア・ヴェニアム・エト・アメット、エリゲンディ・アブ・デレニティ・ナトゥス・レペッラトゥス・イプサム・ノン・ヴェリット・シット・オプティオ！エト・コモディ・アクカサンティウム・デセルント・イルロ、ドローレス・ヴォルプタテ・エクセプトゥリ・モレスティアス、ネモ・エクスプリカボ・クピディタテ・エリゲンディ・エイウス・アッサムンダ・クオ・レプディアンダエ・クイ・クム・エクス・フギット・ノビス・ヴェニアム！アリアス・ネケ・ディクタ、エリゲンディ・レイシンディス・レプディアンダエ・シット・レプディアンダエ・プラエセンティウム・オムニス・テンポリブス・モレスティアエ・フギット・エスト、マイオレス・フガ・オフィキア・モレスティアス・クエ。イステ・レム・アルキテクトォ・エスト・フガ。</p>
-<div class="pamphlet pamphlet-banner"></div>
-<p style="text-align: justify;">>ロレム・イプサム・ドロール・シット・アメット・コンセクテトゥル・アディピシング・エリト。イタケ・エッセ・エオス・コンセクエントゥル・ドロロルム・インヴェントレ・コンセクテトゥル・エア・ヴェニアム・エト・アメット、エリゲンディ・アブ・デレニティ・ナトゥス・レペッラトゥス・イプサム・ノン・ヴェリット・シット・オプティオ！エト・コモディ・アクカサンティウム・デセルント・イルロ、ドローレス・ヴォルプタテ・エクセプトゥリ・モレスティアス、ネモ・エクスプリカボ・クピディタテ・エリゲンディ・エイウス・アッサムンダ・クオ・レプディアンダエ・クイ・クム・エクス・フギット・ノビス・ヴェニアム！アリアス・ネケ・ディクタ、エリゲンディ・レイシンディス・レプディアンダエ・シット・レプディアンダエ・プラエセンティウム・オムニス・テンポリブス・モレスティアエ・フギット・エスト、マイオレス・フガ・オフィキア・モレスティアス・クエ。イステ・レム・アルキテクトォ・エスト・フガ。</p>
+<div id="welcome">
+    <p>
+        ようこそ、<strong>シフー</strong>（旧称 <i>That Computer Scientist</i>）のホームページへ。私は<a href="#">@bobby</a>と申します。
+        これは私の個人サイトです。レトロな雰囲気の個人サイトを目指しており、記事を通じて私の考えやアイデア、経験を共有し、懐かしさを感じられる機能やツールをご紹介していきます。
+    </p>
+    <p>
+        このサイトは現在も開発中であり、継続的に更新作業を行っております。そのため、一部の機能はまだご利用いただけないか、意図した通りに動作しない可能性がございます。
+    </p>
+    <p>
+        サイドバーには<a href="#thegoodstuff">おすすめ</a>もございますので、ぜひお試しください。今後もコンテンツを追加していく予定です。
+        また、サイト内の様々なセクションに参加するには、アカウントの<a href="#">登録</a>が必要となります。どうぞごゆっくりお楽しみください。
+    </p>
+    <div id="chatbox">
+        <div id="messages"></div>
+        <textarea id="chatbox-input" placeholder="メッセージを入力してください...（⏎で送信）"></textarea>
+    </div>
+</div>
+<img src="{% static 'images/core/gifs/construction.gif' %}" id="uc">
 {% endblock %}
diff --git a/templates/shared/footer.html b/templates/shared/footer.html
index d3b680cd..73dc174c 100644
--- a/templates/shared/footer.html
+++ b/templates/shared/footer.html
@@ -17,9 +17,9 @@
     <span class="pamphlet pamphlet-button"></span>
 </div>
 <p class="footer-copyright">
-    &copy; {% now "y" %} Shifoo. Source code available on
+    &copy; {% now "Y" %} Shifoo. Source code available on
     <a href="https://github.com/luciferreeves/thatcomputerscientist" target="_blank">GitHub</a>.
-    All rights reserved.
+    All rights reserved. Every pixel on this website is handcrafted with love and care.
 </p>
 <p class="footer-credits">
     <strong>PS:</strong> The ads shown on this website are fake and purely for
diff --git a/templates/shared/left_sidebar.html b/templates/shared/left_sidebar.html
index 6d6d47b6..2d5e8b96 100644
--- a/templates/shared/left_sidebar.html
+++ b/templates/shared/left_sidebar.html
@@ -42,6 +42,10 @@
         <a href="#shrines">{% if request.LANGUAGE_CODE == 'ja' %}神社{% else %}Shrines{% endif %}</a>
       </div>
       <div class="navigation-item">
+        <img src="{% static 'images/core/icons/screenshots.png' %}" alt="Screenshots Icon" />
+        <a href="#screenshots">{% if request.LANGUAGE_CODE == 'ja' %}スクリーンショット{% else %}Screenshots{% endif %}</a>
+      </div>
+      <div class="navigation-item">
         <img src="{% static 'images/core/icons/chatrooms.png' %}" alt="Chatrooms Icon" />
         <a href="#chatrooms">{% if request.LANGUAGE_CODE == 'ja' %}チャットルーム{% else %}Chatrooms{% endif %}</a>
       </div>
@@ -53,6 +57,17 @@
         <img src="{% static 'images/core/icons/preferences.png' %}" alt="Site Preferences Icon" />
         <a href="#preferences">{% if request.LANGUAGE_CODE == 'ja' %}サイトの設定{% else %}Site Preferences{% endif %}</a>
       </div>
+      <div class="navigation-item">
+        {% if not user.is_authenticated %}
+          <img src="{% static 'images/core/icons/registeraccount.png' %}" alt="Register Account Icon" />
+          <a href="#register">{% if request.LANGUAGE_CODE == 'ja' %}アカウント登録{% else %}Register Account{% endif %}</a>
+        {% else %}
+          <img src="{% static 'images/core/icons/useraccount.png' %}" alt="My Account Icon" />
+          <a href="#account">{% if request.LANGUAGE_CODE == 'ja' %}マイアカウント{% else %}My Account{% endif %}</a>
+        {% endif %}
+      </div>
+
+
       <div class="navigation-item {% if request.LANGUAGE_CODE == 'ja' %}en{% else %}ja{% endif %}">
         <img src="{% static 'images/core/icons/changelanguage.png' %}" alt="Change Language Icon" />
         <a href="#" onclick="changeLanguage({% if request.LANGUAGE_CODE == 'ja' %}'en'{% else %}'ja'{% endif %})">
@@ -100,6 +115,10 @@
         <img src="{% static 'images/core/icons/marketplace.png' %}" alt="Marketplace Icon" />
         <a href="#marketplace">{% if request.LANGUAGE_CODE == 'ja' %}マーケットプレイス{% else %}Marketplace{% endif %}</a>
       </div>
+      <div class="navigation-item">
+        <img src="{% static 'images/core/icons/discussions.png' %}" alt="Discussions Icon" />
+        <a href="#discussions">{% if request.LANGUAGE_CODE == 'ja' %}ディスカッション{% else %}Discussions{% endif %}</a>
+      </div>
     </div>
   </div>
 
diff --git a/templates/shared/right_sidebar.html b/templates/shared/right_sidebar.html
index 0f45c51a..48ecced9 100644
--- a/templates/shared/right_sidebar.html
+++ b/templates/shared/right_sidebar.html
@@ -38,6 +38,10 @@
         <img src="{% static 'images/core/icons/myanimelist.png' %}" alt="My Anime List Icon" />
         <a href="#myanimelist">{% if request.LANGUAGE_CODE == 'ja' %}マイアニメリスト{% else %}My Anime List{% endif %}</a>
       </div>
+      <div class="navigation-item">
+        <img src="{% static 'images/core/icons/games.png' %}" alt="My Games Icon" />
+        <a href="#mygames">{% if request.LANGUAGE_CODE == 'ja' %}マイゲーム{% else %}My Games{% endif %}</a>
+      </div>
     </div>
   </div>
   <div class="pamphlet pamphlet-big"></div>