diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index ff210c1..9ab9483 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -87,6 +87,11 @@ $sourcecardbadge-background-color: #ffff88;
$sourcecardbadge-border: 2px solid #384048;
$sourcecardbadge-text-color: #384048;
+// Highscores
+$highscores-border-color: #00a0e0;
+$highscores-background-color: $background-primary-color;
+$highscores-text-color: #ffffff;
+
// Engine Debug
$debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none;
diff --git a/client/src/components/Highscores.vue b/client/src/components/Highscores.vue
index 6168a49..a7f7e1c 100644
--- a/client/src/components/Highscores.vue
+++ b/client/src/components/Highscores.vue
@@ -1,9 +1,250 @@
- Highscores.vue
+
+
+
+
+
+
+
+ {{ player.name }} |
+ {{ player.score }} |
+
+
+
+
+
+
+
\ No newline at end of file
+@import '~/assets/css/components';
+
+.highscores {
+ &__container-outer {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__container-inner {
+ margin: 64px 0;
+ width: 600px;
+ min-height: 600px;
+ }
+
+ &__table-outer-border {
+ display: flex;
+ flex-direction: column;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ padding: 2px;
+ border-radius: 32px;
+ background: linear-gradient(45deg, $highscores-border-color 0, $highscores-border-color 68%, #ffffff 70%, $highscores-border-color 72%, $highscores-border-color 100%);
+ background-size: 1000% 1000%;
+ animation: highscores-gradient 10s linear infinite 5s;
+ color: $highscores-text-color;
+
+ &::after {
+ content: '';
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(45deg, rgba(128, 96, 192, 0) 50%, $highscores-background-color 60%);
+ background-size: 1000% 1000%;
+ animation: highscores-gradient__fade-in 10s ease forwards;
+ }
+ }
+
+ &__table-head {
+ display: flex;
+ width: 100%;
+ height: 100px;
+ align-items: center;
+ justify-content: center;
+ background-color: $highscores-background-color;
+ border-radius: 32px 32px 0 0;
+ margin-bottom: 2px;
+ }
+
+ &__title {
+ font-family: $font-primary;
+ font-size: 48px;
+ }
+
+ &__table-body {
+ width: 100%;
+ height: 100%;
+ background-color: $highscores-background-color;
+ border-radius: 0 0 32px 32px;
+ font-family: $font-secondary;
+ font-size: 32px;
+
+ }
+
+ &__table {
+ width: 100%;
+ padding: 64px;
+
+ &-row {
+ opacity: 0;
+ animation: highscores-text 1s ease forwards;
+
+ &:nth-child(1) {
+ animation-delay: 5.5s;
+ }
+
+ &:nth-child(2) {
+ animation-delay: 4.5s;
+ }
+
+ &:nth-child(3) {
+ animation-delay: 3.5s;
+ }
+
+ &:nth-child(4) {
+ animation-delay: 2.4s;
+ }
+
+ &:nth-child(5) {
+ animation-delay: 2.2s;
+ }
+
+ &:nth-child(6) {
+ animation-delay: 2s;
+ }
+
+ &:nth-child(7) {
+ animation-delay: 1.9s;
+ }
+
+ &:nth-child(8) {
+ animation-delay: 1.8s;
+ }
+
+ &:nth-child(9) {
+ animation-delay: 1.7s;
+ }
+
+ &:nth-child(10) {
+ animation-delay: 1.6s;
+ }
+
+ &:nth-child(11) {
+ animation-delay: 1.5s;
+ }
+
+ &:nth-child(12) {
+ animation-delay: 1.4s;
+ }
+
+ &:nth-child(13) {
+ animation-delay: 1.3s;
+ }
+
+ &:nth-child(14) {
+ animation-delay: 1.2s;
+ }
+
+ &:nth-child(15) {
+ animation-delay: 1.1s;
+ }
+
+ &:nth-child(16) {
+ animation-delay: 1s;
+ }
+ }
+
+ &-col-name {
+ max-width: 300px;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ &-col-score {
+ text-align: right;
+ }
+ }
+
+ &__progress {
+ opacity: 0;
+ color: #ffffff;
+ animation: highscores-progress 4s ease forwards;
+ animation-delay: 2s;
+ }
+}
+
+@keyframes highscores-gradient__fade-in {
+ 0% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+@keyframes highscores-gradient {
+ 0% {
+ background-position: 130% 50%;
+ }
+
+ 10% {
+ background-position: 130% 50%;
+ }
+
+ 90% {
+ background-position: 0% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+}
+
+@keyframes highscores-text {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes highscores-progress {
+ 0% {
+ margin-left: 50%;
+ margin-right: 50%;
+ opacity: 0.5;
+ }
+
+ 85% {
+ margin-left: 20px;
+ margin-right: 20px;
+ opacity: 0.5;
+ }
+
+ 100% {
+ margin-left: 20px;
+ margin-right: 20px;
+ opacity: 0;
+ }
+}
+