From dc2b0a726e379d1c6f72225cfca68f0c6aa865fb Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Wed, 18 Oct 2023 12:04:03 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A9=94=EB=AA=A8=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=9E=AD=ED=81=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/rank/bronze_0.svg     | 14 ++++
 src/assets/icons/rank/bronze_1.svg     | 18 +++++
 src/assets/icons/rank/bronze_2.svg     | 20 ++++++
 src/assets/icons/rank/bronze_3.svg     | 21 ++++++
 src/assets/icons/rank/bronze_4.svg     | 19 +++++
 src/assets/icons/rank/bronze_5.svg     | 20 ++++++
 src/assets/icons/rank/diamond_0.svg    | 16 +++++
 src/assets/icons/rank/diamond_1.svg    | 20 ++++++
 src/assets/icons/rank/diamond_2.svg    | 22 ++++++
 src/assets/icons/rank/diamond_3.svg    | 23 ++++++
 src/assets/icons/rank/diamond_4.svg    | 21 ++++++
 src/assets/icons/rank/diamond_5.svg    | 22 ++++++
 src/assets/icons/rank/gold_0.svg       | 15 ++++
 src/assets/icons/rank/gold_1.svg       | 19 +++++
 src/assets/icons/rank/gold_2.svg       | 21 ++++++
 src/assets/icons/rank/gold_3.svg       | 22 ++++++
 src/assets/icons/rank/gold_4.svg       | 20 ++++++
 src/assets/icons/rank/gold_5.svg       | 21 ++++++
 src/assets/icons/rank/infinity_0.svg   | 20 ++++++
 src/assets/icons/rank/infinity_1.svg   | 24 +++++++
 src/assets/icons/rank/infinity_2.svg   | 26 +++++++
 src/assets/icons/rank/infinity_3.svg   | 27 +++++++
 src/assets/icons/rank/infinity_4.svg   | 25 +++++++
 src/assets/icons/rank/infinity_5.svg   | 26 +++++++
 src/assets/icons/rank/platinum_0.svg   | 15 ++++
 src/assets/icons/rank/platinum_1.svg   | 19 +++++
 src/assets/icons/rank/platinum_2.svg   | 21 ++++++
 src/assets/icons/rank/platinum_3.svg   | 22 ++++++
 src/assets/icons/rank/platinum_4.svg   | 20 ++++++
 src/assets/icons/rank/platinum_5.svg   | 21 ++++++
 src/assets/icons/rank/silver_0.svg     | 15 ++++
 src/assets/icons/rank/silver_1.svg     | 19 +++++
 src/assets/icons/rank/silver_2.svg     | 21 ++++++
 src/assets/icons/rank/silver_3.svg     | 22 ++++++
 src/assets/icons/rank/silver_4.svg     | 20 ++++++
 src/assets/icons/rank/silver_5.svg     | 21 ++++++
 src/components/memo/MemoCard.tsx       |  2 +
 src/components/memo/MemoCardHeader.tsx | 14 +++-
 src/service/rank.ts                    | 98 ++++++++++++++++++++++++++
 src/types/memo.ts                      |  3 +
 src/types/rank.ts                      | 31 ++++++++
 41 files changed, 885 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/icons/rank/bronze_0.svg
 create mode 100644 src/assets/icons/rank/bronze_1.svg
 create mode 100644 src/assets/icons/rank/bronze_2.svg
 create mode 100644 src/assets/icons/rank/bronze_3.svg
 create mode 100644 src/assets/icons/rank/bronze_4.svg
 create mode 100644 src/assets/icons/rank/bronze_5.svg
 create mode 100644 src/assets/icons/rank/diamond_0.svg
 create mode 100644 src/assets/icons/rank/diamond_1.svg
 create mode 100644 src/assets/icons/rank/diamond_2.svg
 create mode 100644 src/assets/icons/rank/diamond_3.svg
 create mode 100644 src/assets/icons/rank/diamond_4.svg
 create mode 100644 src/assets/icons/rank/diamond_5.svg
 create mode 100644 src/assets/icons/rank/gold_0.svg
 create mode 100644 src/assets/icons/rank/gold_1.svg
 create mode 100644 src/assets/icons/rank/gold_2.svg
 create mode 100644 src/assets/icons/rank/gold_3.svg
 create mode 100644 src/assets/icons/rank/gold_4.svg
 create mode 100644 src/assets/icons/rank/gold_5.svg
 create mode 100644 src/assets/icons/rank/infinity_0.svg
 create mode 100644 src/assets/icons/rank/infinity_1.svg
 create mode 100644 src/assets/icons/rank/infinity_2.svg
 create mode 100644 src/assets/icons/rank/infinity_3.svg
 create mode 100644 src/assets/icons/rank/infinity_4.svg
 create mode 100644 src/assets/icons/rank/infinity_5.svg
 create mode 100644 src/assets/icons/rank/platinum_0.svg
 create mode 100644 src/assets/icons/rank/platinum_1.svg
 create mode 100644 src/assets/icons/rank/platinum_2.svg
 create mode 100644 src/assets/icons/rank/platinum_3.svg
 create mode 100644 src/assets/icons/rank/platinum_4.svg
 create mode 100644 src/assets/icons/rank/platinum_5.svg
 create mode 100644 src/assets/icons/rank/silver_0.svg
 create mode 100644 src/assets/icons/rank/silver_1.svg
 create mode 100644 src/assets/icons/rank/silver_2.svg
 create mode 100644 src/assets/icons/rank/silver_3.svg
 create mode 100644 src/assets/icons/rank/silver_4.svg
 create mode 100644 src/assets/icons/rank/silver_5.svg
 create mode 100644 src/service/rank.ts
 create mode 100644 src/types/rank.ts

diff --git a/src/assets/icons/rank/bronze_0.svg b/src/assets/icons/rank/bronze_0.svg
new file mode 100644
index 00000000..a3d3d6f0
--- /dev/null
+++ b/src/assets/icons/rank/bronze_0.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/bronze_1.svg b/src/assets/icons/rank/bronze_1.svg
new file mode 100644
index 00000000..b83a9868
--- /dev/null
+++ b/src/assets/icons/rank/bronze_1.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.68,15.03h1.75V9.88h-1.47v-1c0.81-0.15,1.38-0.36,1.89-0.68h1.2v6.83h1.53v1.31h-4.9V15.03z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/bronze_2.svg b/src/assets/icons/rank/bronze_2.svg
new file mode 100644
index 00000000..d5177f43
--- /dev/null
+++ b/src/assets/icons/rank/bronze_2.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.25,15.41c2.21-1.98,3.52-3.51,3.52-4.76c0-0.83-0.45-1.32-1.22-1.32c-0.59,0-1.09,0.39-1.5,0.84
+			l-0.88-0.88c0.75-0.79,1.47-1.23,2.58-1.23c1.54,0,2.56,0.99,2.56,2.51c0,1.47-1.22,3.06-2.71,4.51c0.41-0.04,0.95-0.09,1.32-0.09
+			h1.77v1.36h-5.46V15.41z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/bronze_3.svg b/src/assets/icons/rank/bronze_3.svg
new file mode 100644
index 00000000..8f51aaff
--- /dev/null
+++ b/src/assets/icons/rank/bronze_3.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.36l0.76-1.02c0.48,0.47,1.08,0.84,1.82,0.84c0.83,0,1.39-0.41,1.39-1.13c0-0.8-0.47-1.3-2.25-1.3
+			v-1.17c1.5,0,1.98-0.52,1.98-1.24c0-0.64-0.4-1.01-1.09-1.02c-0.58,0.01-1.06,0.29-1.54,0.73l-0.83-0.99c0.7-0.62,1.49-1,2.44-1
+			c1.57,0,2.64,0.77,2.64,2.17c0,0.88-0.49,1.52-1.36,1.86v0.05c0.92,0.25,1.63,0.94,1.63,2c0,1.5-1.31,2.37-2.86,2.37
+			C14.51,16.49,13.64,16.01,13.07,15.36z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/bronze_4.svg b/src/assets/icons/rank/bronze_4.svg
new file mode 100644
index 00000000..506f1bf5
--- /dev/null
+++ b/src/assets/icons/rank/bronze_4.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M18.95,14.23h-0.97v2.11h-1.51v-2.11h-3.46v-1.1l3.04-4.93h1.94V13h0.97V14.23z M16.48,13v-1.66
+			c0-0.47,0.04-1.21,0.07-1.68H16.5c-0.2,0.43-0.42,0.88-0.65,1.32L14.59,13H16.48z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/bronze_5.svg b/src/assets/icons/rank/bronze_5.svg
new file mode 100644
index 00000000..4ce012c5
--- /dev/null
+++ b/src/assets/icons/rank/bronze_5.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.38l0.75-1.03c0.46,0.45,1.03,0.82,1.79,0.82c0.85,0,1.44-0.54,1.44-1.5c0-0.95-0.55-1.47-1.38-1.47
+			c-0.48,0-0.75,0.12-1.22,0.43l-0.74-0.48l0.22-3.95h4.36v1.35h-2.96l-0.15,1.73c0.32-0.15,0.61-0.23,0.98-0.23
+			c1.36,0,2.51,0.81,2.51,2.58c0,1.82-1.34,2.86-2.85,2.86C14.53,16.49,13.67,15.99,13.07,15.38z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/diamond_0.svg b/src/assets/icons/rank/diamond_0.svg
new file mode 100644
index 00000000..3f982e4d
--- /dev/null
+++ b/src/assets/icons/rank/diamond_0.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#61B6E5;}
+	.st2{fill:#70A4EF;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/diamond_1.svg b/src/assets/icons/rank/diamond_1.svg
new file mode 100644
index 00000000..2f07af94
--- /dev/null
+++ b/src/assets/icons/rank/diamond_1.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#61B6E5;}
+	.st2{fill:#70A4EF;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.68,15.03h1.75V9.88h-1.47v-1c0.81-0.15,1.38-0.36,1.89-0.68h1.2v6.83h1.53v1.31h-4.9V15.03z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/diamond_2.svg b/src/assets/icons/rank/diamond_2.svg
new file mode 100644
index 00000000..b23f187b
--- /dev/null
+++ b/src/assets/icons/rank/diamond_2.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#61B6E5;}
+	.st2{fill:#70A4EF;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.25,15.41c2.21-1.98,3.52-3.51,3.52-4.76c0-0.83-0.45-1.32-1.22-1.32c-0.59,0-1.09,0.39-1.5,0.84
+			l-0.88-0.88c0.75-0.79,1.47-1.23,2.58-1.23c1.54,0,2.56,0.99,2.56,2.51c0,1.47-1.22,3.06-2.71,4.51c0.41-0.04,0.95-0.09,1.32-0.09
+			h1.77v1.36h-5.46V15.41z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/diamond_3.svg b/src/assets/icons/rank/diamond_3.svg
new file mode 100644
index 00000000..aff457a5
--- /dev/null
+++ b/src/assets/icons/rank/diamond_3.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#61B6E5;}
+	.st2{fill:#70A4EF;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.07,15.36l0.76-1.02c0.48,0.47,1.08,0.84,1.82,0.84c0.83,0,1.39-0.41,1.39-1.13c0-0.8-0.47-1.3-2.25-1.3
+			v-1.17c1.5,0,1.98-0.52,1.98-1.24c0-0.64-0.4-1.01-1.09-1.02c-0.58,0.01-1.06,0.29-1.54,0.73l-0.83-0.99c0.7-0.62,1.49-1,2.44-1
+			c1.57,0,2.64,0.77,2.64,2.17c0,0.88-0.49,1.52-1.36,1.86v0.05c0.92,0.25,1.63,0.94,1.63,2c0,1.5-1.31,2.37-2.86,2.37
+			C14.51,16.49,13.64,16.01,13.07,15.36z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/diamond_4.svg b/src/assets/icons/rank/diamond_4.svg
new file mode 100644
index 00000000..cf1357b2
--- /dev/null
+++ b/src/assets/icons/rank/diamond_4.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#61B6E5;}
+	.st2{fill:#70A4EF;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M18.95,14.23h-0.97v2.11h-1.51v-2.11h-3.46v-1.1l3.04-4.93h1.94V13h0.97V14.23z M16.48,13v-1.66
+			c0-0.47,0.04-1.21,0.07-1.68H16.5c-0.2,0.43-0.42,0.88-0.65,1.32L14.59,13H16.48z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/diamond_5.svg b/src/assets/icons/rank/diamond_5.svg
new file mode 100644
index 00000000..3360a952
--- /dev/null
+++ b/src/assets/icons/rank/diamond_5.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#61B6E5;}
+	.st2{fill:#70A4EF;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.07,15.38l0.75-1.03c0.46,0.45,1.03,0.82,1.79,0.82c0.85,0,1.44-0.54,1.44-1.5c0-0.95-0.55-1.47-1.38-1.47
+			c-0.48,0-0.75,0.12-1.22,0.43l-0.74-0.48l0.22-3.95h4.36v1.35h-2.96l-0.15,1.73c0.32-0.15,0.61-0.23,0.98-0.23
+			c1.36,0,2.51,0.81,2.51,2.58c0,1.82-1.34,2.86-2.85,2.86C14.53,16.49,13.67,15.99,13.07,15.38z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/gold_0.svg b/src/assets/icons/rank/gold_0.svg
new file mode 100644
index 00000000..36535f1b
--- /dev/null
+++ b/src/assets/icons/rank/gold_0.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E8B646;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/gold_1.svg b/src/assets/icons/rank/gold_1.svg
new file mode 100644
index 00000000..ec1f2fcf
--- /dev/null
+++ b/src/assets/icons/rank/gold_1.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E8B646;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.68,15.03h1.75V9.88h-1.47v-1c0.81-0.15,1.38-0.36,1.89-0.68h1.2v6.83h1.53v1.31h-4.9V15.03z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/gold_2.svg b/src/assets/icons/rank/gold_2.svg
new file mode 100644
index 00000000..b1f8e9da
--- /dev/null
+++ b/src/assets/icons/rank/gold_2.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E8B646;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.25,15.41c2.21-1.98,3.52-3.51,3.52-4.76c0-0.83-0.45-1.32-1.22-1.32c-0.59,0-1.09,0.39-1.5,0.84
+			l-0.88-0.88c0.75-0.79,1.47-1.23,2.58-1.23c1.54,0,2.56,0.99,2.56,2.51c0,1.47-1.22,3.06-2.71,4.51c0.41-0.04,0.95-0.09,1.32-0.09
+			h1.77v1.36h-5.46V15.41z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/gold_3.svg b/src/assets/icons/rank/gold_3.svg
new file mode 100644
index 00000000..97576a75
--- /dev/null
+++ b/src/assets/icons/rank/gold_3.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E8B646;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="-0.01" class="st0" width="32" height="32"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,21.99 16,29.99 8,21.99 8,18.99 16,26.99 24,18.99 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.36l0.76-1.02c0.48,0.47,1.08,0.84,1.82,0.84c0.83,0,1.39-0.41,1.39-1.13c0-0.8-0.47-1.3-2.25-1.3
+			v-1.17c1.5,0,1.98-0.52,1.98-1.24c0-0.64-0.4-1.01-1.09-1.02c-0.58,0.01-1.06,0.29-1.54,0.73l-0.83-0.99c0.7-0.62,1.49-1,2.44-1
+			c1.57,0,2.64,0.77,2.64,2.17c0,0.88-0.49,1.52-1.36,1.86v0.05c0.92,0.25,1.63,0.94,1.63,2c0,1.5-1.31,2.37-2.86,2.37
+			C14.51,16.49,13.64,16,13.07,15.36z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/gold_4.svg b/src/assets/icons/rank/gold_4.svg
new file mode 100644
index 00000000..09d214bd
--- /dev/null
+++ b/src/assets/icons/rank/gold_4.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E8B646;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M18.95,14.23h-0.97v2.11h-1.51v-2.11h-3.46v-1.1l3.04-4.93h1.94V13h0.97V14.23z M16.48,13v-1.66
+			c0-0.47,0.04-1.21,0.07-1.68H16.5c-0.2,0.43-0.42,0.88-0.65,1.32L14.59,13H16.48z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/gold_5.svg b/src/assets/icons/rank/gold_5.svg
new file mode 100644
index 00000000..07023439
--- /dev/null
+++ b/src/assets/icons/rank/gold_5.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#E8B646;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="-0.01" class="st0" width="32" height="32"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,21.99 16,29.99 8,21.99 8,18.99 16,26.99 24,18.99 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.38l0.75-1.03c0.46,0.45,1.03,0.82,1.79,0.82c0.85,0,1.44-0.54,1.44-1.5c0-0.95-0.55-1.47-1.38-1.47
+			c-0.48,0-0.75,0.12-1.22,0.43l-0.74-0.48l0.22-3.95h4.36v1.35h-2.96l-0.15,1.73c0.32-0.15,0.61-0.23,0.98-0.23
+			c1.36,0,2.51,0.81,2.51,2.58c0,1.82-1.34,2.86-2.85,2.86C14.53,16.49,13.67,15.98,13.07,15.38z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/infinity_0.svg b/src/assets/icons/rank/infinity_0.svg
new file mode 100644
index 00000000..f3535120
--- /dev/null
+++ b/src/assets/icons/rank/infinity_0.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#D85BA0;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<polygon class="st2" points="31,15 26,20 26,17 31,12 	"/>
+	<polygon class="st2" points="31,20 26,25 26,22 31,17 	"/>
+	<polygon class="st2" points="1,15 6,20 6,17 1,12 	"/>
+	<polygon class="st2" points="1,20 6,25 6,22 1,17 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/infinity_1.svg b/src/assets/icons/rank/infinity_1.svg
new file mode 100644
index 00000000..44070d8d
--- /dev/null
+++ b/src/assets/icons/rank/infinity_1.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#D85BA0;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.68,15.03h1.75V9.88h-1.47v-1c0.81-0.15,1.38-0.36,1.89-0.68h1.2v6.83h1.53v1.31h-4.9V15.03z"/>
+	</g>
+	<polygon class="st2" points="31,15 26,20 26,17 31,12 	"/>
+	<polygon class="st2" points="31,20 26,25 26,22 31,17 	"/>
+	<polygon class="st2" points="1,15 6,20 6,17 1,12 	"/>
+	<polygon class="st2" points="1,20 6,25 6,22 1,17 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/infinity_2.svg b/src/assets/icons/rank/infinity_2.svg
new file mode 100644
index 00000000..dd5dbbb7
--- /dev/null
+++ b/src/assets/icons/rank/infinity_2.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#D85BA0;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.25,15.41c2.21-1.98,3.52-3.51,3.52-4.76c0-0.83-0.45-1.32-1.22-1.32c-0.59,0-1.09,0.39-1.5,0.84
+			l-0.88-0.88c0.75-0.79,1.47-1.23,2.58-1.23c1.54,0,2.56,0.99,2.56,2.51c0,1.47-1.22,3.06-2.71,4.51c0.41-0.04,0.95-0.09,1.32-0.09
+			h1.77v1.36h-5.46V15.41z"/>
+	</g>
+	<polygon class="st2" points="31,15 26,20 26,17 31,12 	"/>
+	<polygon class="st2" points="31,20 26,25 26,22 31,17 	"/>
+	<polygon class="st2" points="1,15 6,20 6,17 1,12 	"/>
+	<polygon class="st2" points="1,20 6,25 6,22 1,17 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/infinity_3.svg b/src/assets/icons/rank/infinity_3.svg
new file mode 100644
index 00000000..90dc6024
--- /dev/null
+++ b/src/assets/icons/rank/infinity_3.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#D85BA0;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="-0.01" class="st0" width="32" height="32"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,21.99 16,29.99 8,21.99 8,18.99 16,26.99 24,18.99 	"/>
+	<g>
+		<path class="st3" d="M13.07,15.36l0.76-1.02c0.48,0.47,1.08,0.84,1.82,0.84c0.83,0,1.39-0.41,1.39-1.13c0-0.8-0.47-1.3-2.25-1.3
+			v-1.17c1.5,0,1.98-0.52,1.98-1.24c0-0.64-0.4-1.01-1.09-1.02c-0.58,0.01-1.06,0.29-1.54,0.73l-0.83-0.99c0.7-0.62,1.49-1,2.44-1
+			c1.57,0,2.64,0.77,2.64,2.17c0,0.88-0.49,1.52-1.36,1.86v0.05c0.92,0.25,1.63,0.94,1.63,2c0,1.5-1.31,2.37-2.86,2.37
+			C14.51,16.49,13.64,16,13.07,15.36z"/>
+	</g>
+	<polygon class="st2" points="31,14.99 26,19.99 26,16.99 31,11.99 	"/>
+	<polygon class="st2" points="31,19.99 26,24.99 26,21.99 31,16.99 	"/>
+	<polygon class="st2" points="1,14.99 6,19.99 6,16.99 1,11.99 	"/>
+	<polygon class="st2" points="1,19.99 6,24.99 6,21.99 1,16.99 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/infinity_4.svg b/src/assets/icons/rank/infinity_4.svg
new file mode 100644
index 00000000..c7f4f7f3
--- /dev/null
+++ b/src/assets/icons/rank/infinity_4.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#D85BA0;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M18.95,14.23h-0.97v2.11h-1.51v-2.11h-3.46v-1.1l3.04-4.93h1.94V13h0.97V14.23z M16.48,13v-1.66
+			c0-0.47,0.04-1.21,0.07-1.68H16.5c-0.2,0.43-0.42,0.88-0.65,1.32L14.59,13H16.48z"/>
+	</g>
+	<polygon class="st2" points="31,15 26,20 26,17 31,12 	"/>
+	<polygon class="st2" points="31,20 26,25 26,22 31,17 	"/>
+	<polygon class="st2" points="1,15 6,20 6,17 1,12 	"/>
+	<polygon class="st2" points="1,20 6,25 6,22 1,17 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/infinity_5.svg b/src/assets/icons/rank/infinity_5.svg
new file mode 100644
index 00000000..c0a8fe0d
--- /dev/null
+++ b/src/assets/icons/rank/infinity_5.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A06127;}
+	.st2{fill:#D85BA0;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st2" width="16" height="16"/>
+	<polygon class="st2" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st3" d="M13.07,15.38l0.75-1.03c0.46,0.45,1.03,0.82,1.79,0.82c0.85,0,1.44-0.54,1.44-1.5c0-0.95-0.55-1.47-1.38-1.47
+			c-0.48,0-0.75,0.12-1.22,0.43l-0.74-0.48l0.22-3.95h4.36v1.35h-2.96l-0.15,1.73c0.32-0.15,0.61-0.23,0.98-0.23
+			c1.36,0,2.51,0.81,2.51,2.58c0,1.82-1.34,2.86-2.85,2.86C14.53,16.49,13.67,15.99,13.07,15.38z"/>
+	</g>
+	<polygon class="st2" points="31,15 26,20 26,17 31,12 	"/>
+	<polygon class="st2" points="31,20 26,25 26,22 31,17 	"/>
+	<polygon class="st2" points="1,15 6,20 6,17 1,12 	"/>
+	<polygon class="st2" points="1,20 6,25 6,22 1,17 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/platinum_0.svg b/src/assets/icons/rank/platinum_0.svg
new file mode 100644
index 00000000..65f198c2
--- /dev/null
+++ b/src/assets/icons/rank/platinum_0.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#68D8B8;}
+</style>
+<g>
+	<rect y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/platinum_1.svg b/src/assets/icons/rank/platinum_1.svg
new file mode 100644
index 00000000..501d0663
--- /dev/null
+++ b/src/assets/icons/rank/platinum_1.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#68D8B8;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.68,15.03h1.75V9.88h-1.47v-1c0.81-0.15,1.38-0.36,1.89-0.68h1.2v6.83h1.53v1.31h-4.9V15.03z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/platinum_2.svg b/src/assets/icons/rank/platinum_2.svg
new file mode 100644
index 00000000..8a3569e0
--- /dev/null
+++ b/src/assets/icons/rank/platinum_2.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#68D8B8;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.25,15.41c2.21-1.98,3.52-3.51,3.52-4.76c0-0.83-0.45-1.32-1.22-1.32c-0.59,0-1.09,0.39-1.5,0.84
+			l-0.88-0.88c0.75-0.79,1.47-1.23,2.58-1.23c1.54,0,2.56,0.99,2.56,2.51c0,1.47-1.22,3.06-2.71,4.51c0.41-0.04,0.95-0.09,1.32-0.09
+			h1.77v1.36h-5.46V15.41z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/platinum_3.svg b/src/assets/icons/rank/platinum_3.svg
new file mode 100644
index 00000000..0eae7029
--- /dev/null
+++ b/src/assets/icons/rank/platinum_3.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#68D8B8;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.36l0.76-1.02c0.48,0.47,1.08,0.84,1.82,0.84c0.83,0,1.39-0.41,1.39-1.13c0-0.8-0.47-1.3-2.25-1.3
+			v-1.17c1.5,0,1.98-0.52,1.98-1.24c0-0.64-0.4-1.01-1.09-1.02c-0.58,0.01-1.06,0.29-1.54,0.73l-0.83-0.99c0.7-0.62,1.49-1,2.44-1
+			c1.57,0,2.64,0.77,2.64,2.17c0,0.88-0.49,1.52-1.36,1.86v0.05c0.92,0.25,1.63,0.94,1.63,2c0,1.5-1.31,2.37-2.86,2.37
+			C14.51,16.49,13.64,16.01,13.07,15.36z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/platinum_4.svg b/src/assets/icons/rank/platinum_4.svg
new file mode 100644
index 00000000..ac99189e
--- /dev/null
+++ b/src/assets/icons/rank/platinum_4.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#68D8B8;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M18.95,14.23h-0.97v2.11h-1.51v-2.11h-3.46v-1.1l3.04-4.93h1.94V13h0.97V14.23z M16.48,13v-1.66
+			c0-0.47,0.04-1.21,0.07-1.68H16.5c-0.2,0.43-0.42,0.88-0.65,1.32L14.59,13H16.48z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/platinum_5.svg b/src/assets/icons/rank/platinum_5.svg
new file mode 100644
index 00000000..9ee198ee
--- /dev/null
+++ b/src/assets/icons/rank/platinum_5.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#68D8B8;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.38l0.75-1.03c0.46,0.45,1.03,0.82,1.79,0.82c0.85,0,1.44-0.54,1.44-1.5c0-0.95-0.55-1.47-1.38-1.47
+			c-0.48,0-0.75,0.12-1.22,0.43l-0.74-0.48l0.22-3.95h4.36v1.35h-2.96l-0.15,1.73c0.32-0.15,0.61-0.23,0.98-0.23
+			c1.36,0,2.51,0.81,2.51,2.58c0,1.82-1.34,2.86-2.85,2.86C14.53,16.49,13.67,15.99,13.07,15.38z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/silver_0.svg b/src/assets/icons/rank/silver_0.svg
new file mode 100644
index 00000000..dcbb9f0a
--- /dev/null
+++ b/src/assets/icons/rank/silver_0.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A8AEAF;}
+</style>
+<g>
+	<rect class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/silver_1.svg b/src/assets/icons/rank/silver_1.svg
new file mode 100644
index 00000000..60071a8b
--- /dev/null
+++ b/src/assets/icons/rank/silver_1.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A8AEAF;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.68,15.03h1.75V9.88h-1.47v-1c0.81-0.15,1.38-0.36,1.89-0.68h1.2v6.83h1.53v1.31h-4.9V15.03z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/silver_2.svg b/src/assets/icons/rank/silver_2.svg
new file mode 100644
index 00000000..8c5cde72
--- /dev/null
+++ b/src/assets/icons/rank/silver_2.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A8AEAF;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect y="0.03" class="st0" width="32" height="32"/>
+	<rect x="8" y="5.03" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.9012 -7.4967)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5.03" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.9012 -7.4967)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22.03 16,30.03 8,22.03 8,19.03 16,27.03 24,19.03 	"/>
+	<g>
+		<path class="st2" d="M13.25,15.44c2.21-1.98,3.52-3.51,3.52-4.76c0-0.83-0.45-1.32-1.22-1.32c-0.59,0-1.09,0.39-1.5,0.84
+			l-0.88-0.88c0.75-0.79,1.47-1.23,2.58-1.23c1.54,0,2.56,0.99,2.56,2.51c0,1.47-1.22,3.06-2.71,4.51c0.41-0.04,0.95-0.09,1.32-0.09
+			h1.77v1.36h-5.46V15.44z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/silver_3.svg b/src/assets/icons/rank/silver_3.svg
new file mode 100644
index 00000000..b937b21f
--- /dev/null
+++ b/src/assets/icons/rank/silver_3.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A8AEAF;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="-0.01" class="st0" width="32" height="32"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<rect x="8" y="4.99" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8745 -7.5078)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,21.99 16,29.99 8,21.99 8,18.99 16,26.99 24,18.99 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.36l0.76-1.02c0.48,0.47,1.08,0.84,1.82,0.84c0.83,0,1.39-0.41,1.39-1.13c0-0.8-0.47-1.3-2.25-1.3
+			v-1.17c1.5,0,1.98-0.52,1.98-1.24c0-0.64-0.4-1.01-1.09-1.02c-0.58,0.01-1.06,0.29-1.54,0.73l-0.83-0.99c0.7-0.62,1.49-1,2.44-1
+			c1.57,0,2.64,0.77,2.64,2.17c0,0.88-0.49,1.52-1.36,1.86v0.05c0.92,0.25,1.63,0.94,1.63,2c0,1.5-1.31,2.37-2.86,2.37
+			C14.51,16.49,13.64,16,13.07,15.36z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/silver_4.svg b/src/assets/icons/rank/silver_4.svg
new file mode 100644
index 00000000..bd490645
--- /dev/null
+++ b/src/assets/icons/rank/silver_4.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A8AEAF;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0.11" y="0" class="st0" width="32" height="32"/>
+	<rect x="8.11" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.9111 -7.5845)" class="st1" width="16" height="16"/>
+	<rect x="8.11" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.9111 -7.5845)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24.11,22 16.11,30 8.11,22 8.11,19 16.11,27 24.11,19 	"/>
+	<g>
+		<path class="st2" d="M19.06,14.23H18.1v2.11h-1.51v-2.11h-3.46v-1.1l3.04-4.93h1.94V13h0.97V14.23z M16.59,13v-1.66
+			c0-0.47,0.04-1.21,0.07-1.68h-0.04c-0.2,0.43-0.42,0.88-0.65,1.32L14.7,13H16.59z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/assets/icons/rank/silver_5.svg b/src/assets/icons/rank/silver_5.svg
new file mode 100644
index 00000000..9fbc84aa
--- /dev/null
+++ b/src/assets/icons/rank/silver_5.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{fill:#A8AEAF;}
+	.st2{fill:#FFFFFF;}
+</style>
+<g>
+	<rect x="0" y="0" class="st0" width="32" height="32"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<rect x="8" y="5" transform="matrix(0.7071 0.7071 -0.7071 0.7071 13.8787 -7.5061)" class="st1" width="16" height="16"/>
+	<polygon class="st1" points="24,22 16,30 8,22 8,19 16,27 24,19 	"/>
+	<g>
+		<path class="st2" d="M13.07,15.38l0.75-1.03c0.46,0.45,1.03,0.82,1.79,0.82c0.85,0,1.44-0.54,1.44-1.5c0-0.95-0.55-1.47-1.38-1.47
+			c-0.48,0-0.75,0.12-1.22,0.43l-0.74-0.48l0.22-3.95h4.36v1.35h-2.96l-0.15,1.73c0.32-0.15,0.61-0.23,0.98-0.23
+			c1.36,0,2.51,0.81,2.51,2.58c0,1.82-1.34,2.86-2.85,2.86C14.53,16.49,13.67,15.99,13.07,15.38z"/>
+	</g>
+</g>
+</svg>
diff --git a/src/components/memo/MemoCard.tsx b/src/components/memo/MemoCard.tsx
index c581ac90..8eab3de7 100644
--- a/src/components/memo/MemoCard.tsx
+++ b/src/components/memo/MemoCard.tsx
@@ -22,6 +22,7 @@ export default function MemoCard({
     memoTags,
     repliesCount,
     questionCount,
+    authorRank,
   },
 }: Props) {
   return (
@@ -45,6 +46,7 @@ export default function MemoCard({
         likes={likes}
         imagePath={authorProfileImagePath}
         authorId={authorId}
+        authorRank={authorRank}
       />
       <MemoCardMain
         memoId={memoId}
diff --git a/src/components/memo/MemoCardHeader.tsx b/src/components/memo/MemoCardHeader.tsx
index 36a5f275..efcb17b2 100644
--- a/src/components/memo/MemoCardHeader.tsx
+++ b/src/components/memo/MemoCardHeader.tsx
@@ -4,6 +4,8 @@ import fillHeart from '../../assets/icons/heart_fill.svg';
 import Link from 'next/link';
 import RelativeDate from '../shared/RelativeDate';
 import { azertMono } from '@/styles/fonts';
+import { getImageSrcFromRank } from '@/service/rank';
+import { Rank } from '@/types/rank';
 
 type Props = {
   createDate: string;
@@ -11,6 +13,7 @@ type Props = {
   likes: number;
   imagePath: string;
   authorId: number;
+  authorRank: Rank;
 };
 
 export default function MemoCardHeader({
@@ -19,6 +22,7 @@ export default function MemoCardHeader({
   likes,
   imagePath,
   authorId,
+  authorRank,
 }: Props) {
   return (
     <div className="flex justify-between h-10 items-center">
@@ -33,7 +37,15 @@ export default function MemoCardHeader({
           />
         </Link>
         <div className="ml-2">
-          <h4 className="text-soma-grey-60 font-medium">{authorName}</h4>
+          <div className="flex items-center gap-1">
+            <h4 className="text-soma-grey-60 font-medium">{authorName}</h4>
+            <Image
+              src={getImageSrcFromRank(authorRank)}
+              alt="rank"
+              width={20}
+              height={20}
+            />
+          </div>
           <RelativeDate date={createDate} type="YMD" />
         </div>
       </div>
diff --git a/src/service/rank.ts b/src/service/rank.ts
new file mode 100644
index 00000000..c0b994bf
--- /dev/null
+++ b/src/service/rank.ts
@@ -0,0 +1,98 @@
+import { Rank } from '@/types/rank';
+import bronze5 from '@/assets/icons/rank/bronze_5.svg';
+import bronze4 from '@/assets/icons/rank/bronze_4.svg';
+import bronze3 from '@/assets/icons/rank/bronze_3.svg';
+import bronze2 from '@/assets/icons/rank/bronze_2.svg';
+import bronze1 from '@/assets/icons/rank/bronze_1.svg';
+import silver5 from '@/assets/icons/rank/silver_5.svg';
+import silver4 from '@/assets/icons/rank/silver_4.svg';
+import silver3 from '@/assets/icons/rank/silver_3.svg';
+import silver2 from '@/assets/icons/rank/silver_2.svg';
+import silver1 from '@/assets/icons/rank/silver_1.svg';
+import gold5 from '@/assets/icons/rank/gold_5.svg';
+import gold4 from '@/assets/icons/rank/gold_4.svg';
+import gold3 from '@/assets/icons/rank/gold_3.svg';
+import gold2 from '@/assets/icons/rank/gold_2.svg';
+import gold1 from '@/assets/icons/rank/gold_1.svg';
+import platinum5 from '@/assets/icons/rank/platinum_5.svg';
+import platinum4 from '@/assets/icons/rank/platinum_4.svg';
+import platinum3 from '@/assets/icons/rank/platinum_3.svg';
+import platinum2 from '@/assets/icons/rank/platinum_2.svg';
+import platinum1 from '@/assets/icons/rank/platinum_1.svg';
+import diamond5 from '@/assets/icons/rank/diamond_5.svg';
+import diamond4 from '@/assets/icons/rank/diamond_4.svg';
+import diamond3 from '@/assets/icons/rank/diamond_3.svg';
+import diamond2 from '@/assets/icons/rank/diamond_2.svg';
+import diamond1 from '@/assets/icons/rank/diamond_1.svg';
+import infinity5 from '@/assets/icons/rank/infinity_5.svg';
+import infinity4 from '@/assets/icons/rank/infinity_4.svg';
+import infinity3 from '@/assets/icons/rank/infinity_3.svg';
+import infinity2 from '@/assets/icons/rank/infinity_2.svg';
+import infinity1 from '@/assets/icons/rank/infinity_1.svg';
+
+export function getImageSrcFromRank(rank: Rank): string {
+  switch (rank) {
+    case 'BRONZE_5':
+      return bronze5;
+    case 'BRONZE_4':
+      return bronze4;
+    case 'BRONZE_3':
+      return bronze3;
+    case 'BRONZE_2':
+      return bronze2;
+    case 'BRONZE_1':
+      return bronze1;
+    case 'SILVER_5':
+      return silver5;
+    case 'SILVER_4':
+      return silver4;
+    case 'SILVER_3':
+      return silver3;
+    case 'SILVER_2':
+      return silver2;
+    case 'SILVER_1':
+      return silver1;
+    case 'GOLD_5':
+      return gold5;
+    case 'GOLD_4':
+      return gold4;
+    case 'GOLD_3':
+      return gold3;
+    case 'GOLD_2':
+      return gold2;
+    case 'GOLD_1':
+      return gold1;
+    case 'PLATINUM_5':
+      return platinum5;
+    case 'PLATINUM_4':
+      return platinum4;
+    case 'PLATINUM_3':
+      return platinum3;
+    case 'PLATINUM_2':
+      return platinum2;
+    case 'PLATINUM_1':
+      return platinum1;
+    case 'DIAMOND_5':
+      return diamond5;
+    case 'DIAMOND_4':
+      return diamond4;
+    case 'DIAMOND_3':
+      return diamond3;
+    case 'DIAMOND_2':
+      return diamond2;
+    case 'DIAMOND_1':
+      return diamond1;
+    case 'INFINITY_5':
+      return infinity5;
+    case 'INFINITY_4':
+      return infinity4;
+    case 'INFINITY_3':
+      return infinity3;
+    case 'INFINITY_2':
+      return infinity2;
+    case 'INFINITY_1':
+      return infinity1;
+    default:
+      throw new Error('wrong rank type');
+  }
+}
diff --git a/src/types/memo.ts b/src/types/memo.ts
index 365f3d55..b7ee604c 100644
--- a/src/types/memo.ts
+++ b/src/types/memo.ts
@@ -1,3 +1,5 @@
+import { Rank } from './rank';
+
 export type Memo = {
   memoId: number;
   memoTitle: string;
@@ -17,6 +19,7 @@ export type Memo = {
   isMine: boolean;
   seriesId: number;
   isCreated: boolean;
+  authorRank: Rank;
 };
 
 export type PostMemoData = {
diff --git a/src/types/rank.ts b/src/types/rank.ts
new file mode 100644
index 00000000..d062cdfa
--- /dev/null
+++ b/src/types/rank.ts
@@ -0,0 +1,31 @@
+export type Rank =
+  | 'BRONZE_5'
+  | 'BRONZE_4'
+  | 'BRONZE_3'
+  | 'BRONZE_2'
+  | 'BRONZE_1'
+  | 'SILVER_5'
+  | 'SILVER_4'
+  | 'SILVER_3'
+  | 'SILVER_2'
+  | 'SILVER_1'
+  | 'GOLD_5'
+  | 'GOLD_4'
+  | 'GOLD_3'
+  | 'GOLD_2'
+  | 'GOLD_1'
+  | 'PLATINUM_5'
+  | 'PLATINUM_4'
+  | 'PLATINUM_3'
+  | 'PLATINUM_2'
+  | 'PLATINUM_1'
+  | 'DIAMOND_5'
+  | 'DIAMOND_4'
+  | 'DIAMOND_3'
+  | 'DIAMOND_2'
+  | 'DIAMOND_1'
+  | 'INFINITY_5'
+  | 'INFINITY_4'
+  | 'INFINITY_3'
+  | 'INFINITY_2'
+  | 'INFINITY_1';