diff --git a/public/ui-config.json b/public/ui-config.json
index e8fc85d1..1a5e6181 100644
--- a/public/ui-config.json
+++ b/public/ui-config.json
@@ -47,6 +47,15 @@
         5,
         101
     ],
+    "hc.center": {
+        "benefits.info": true,
+        "payday.info": true,
+        "gift.info": true,
+        "benefits.habbopage": "habboclub",
+        "payday.habbopage": "hcpayday",
+        "catalog.buy": "habbo_club",
+        "catalog.gifts": "club_gifts"
+    },
     "currency.display.number.short": false,
     "currency.asset.icon.url": "${images.url}/wallet/%type%.png",
     "catalog.asset.url": "${image.library.url}catalogue",
diff --git a/src/assets/images/hc-center/benefits.png b/src/assets/images/hc-center/benefits.png
new file mode 100644
index 00000000..508ecc82
Binary files /dev/null and b/src/assets/images/hc-center/benefits.png differ
diff --git a/src/assets/images/hc-center/clock.png b/src/assets/images/hc-center/clock.png
new file mode 100644
index 00000000..4c37e957
Binary files /dev/null and b/src/assets/images/hc-center/clock.png differ
diff --git a/src/assets/images/hc-center/hc_logo.gif b/src/assets/images/hc-center/hc_logo.gif
new file mode 100644
index 00000000..8834034f
Binary files /dev/null and b/src/assets/images/hc-center/hc_logo.gif differ
diff --git a/src/assets/images/hc-center/payday.png b/src/assets/images/hc-center/payday.png
new file mode 100644
index 00000000..c9bd80ba
Binary files /dev/null and b/src/assets/images/hc-center/payday.png differ
diff --git a/src/assets/styles/bootstrap/_nav.scss b/src/assets/styles/bootstrap/_nav.scss
index 3da71e93..cd1371d9 100644
--- a/src/assets/styles/bootstrap/_nav.scss
+++ b/src/assets/styles/bootstrap/_nav.scss
@@ -4,34 +4,37 @@
 // `<nav>`s, `<ul>`s or `<ol>`s.
 
 .nav {
-  display: flex;
-  flex-wrap: wrap;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
 }
 
 .nav-link {
-  display: block;
-  padding: $nav-link-padding-y $nav-link-padding-x;
-  @include font-size($nav-link-font-size);
-  font-weight: $nav-link-font-weight;
-  color: $nav-link-color;
-  text-decoration: if($link-decoration == none, null, none);
-  @include transition($nav-link-transition);
+    display: block;
+    padding: $nav-link-padding-y $nav-link-padding-x;
+    @include font-size($nav-link-font-size);
+    font-weight: $nav-link-font-weight;
+    color: $nav-link-color;
+    text-decoration: if($link-decoration == none, null, none);
+    @include transition($nav-link-transition);
 
-  &:hover,
-  &:focus {
-    color: $nav-link-hover-color;
-    text-decoration: if($link-hover-decoration == underline, none, null);
-  }
+    display: flex;
+    align-items: center;
 
-  // Disabled state lightens text
-  &.disabled {
-    color: $nav-link-disabled-color;
-    pointer-events: none;
-    cursor: default;
-  }
+    &:hover,
+    &:focus {
+        color: $nav-link-hover-color;
+        text-decoration: if($link-hover-decoration == underline, none, null);
+    }
+
+    // Disabled state lightens text
+    &.disabled {
+        color: $nav-link-disabled-color;
+        pointer-events: none;
+        cursor: default;
+    }
 }
 
 //
@@ -39,122 +42,119 @@
 //
 
 .nav-tabs {
-  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
 
-  .nav-link {
-    position: relative;
-    margin-bottom: -$nav-tabs-border-width;
-    background-color: $nav-tabs-link-bg;
-    border: $nav-tabs-border-width solid $nav-tabs-border-color;
-    @include border-top-radius($nav-tabs-border-radius);
+    .nav-link {
+        position: relative;
+        margin-bottom: -$nav-tabs-border-width;
+        background-color: $nav-tabs-link-bg;
+        border: $nav-tabs-border-width solid $nav-tabs-border-color;
+        @include border-top-radius($nav-tabs-border-radius);
 
-    &.active {
-      &:before {
-        background: #FFFFFF;
-      }
+        &.active {
+            &:before {
+                background: #ffffff;
+            }
+        }
+
+        &:before {
+            content: "";
+            position: absolute;
+            width: 93%;
+            height: 3px;
+            border-radius: $border-radius;
+            top: 1.5px;
+            left: 0;
+            right: 0;
+            margin: auto;
+            background: #c2c9d1;
+            z-index: 1;
+        }
+
+        &:hover,
+        &:focus {
+            border-color: $nav-tabs-link-hover-border-color;
+            // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
+            isolation: isolate;
+        }
+
+        &.disabled {
+            color: $nav-link-disabled-color;
+            background-color: transparent;
+            border-color: transparent;
+        }
     }
 
-    &:before {
-      content: "";
-      position: absolute;
-      width: 93%;
-      height: 3px;
-      border-radius: $border-radius;
-      top: 1.5px;
-      left: 0;
-      right: 0;
-      margin: auto;
-      background: #C2C9D1;
-      z-index: 1;
+    .nav-link.active,
+    .nav-item.show .nav-link {
+        color: $nav-tabs-link-active-color;
+        background-color: $nav-tabs-link-active-bg;
+        border-color: $nav-tabs-link-active-border-color;
     }
 
-    &:hover,
-    &:focus {
-      border-color: $nav-tabs-link-hover-border-color;
-      // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
-      isolation: isolate;
+    .dropdown-menu {
+        // Make dropdown border overlap tab border
+        margin-top: -$nav-tabs-border-width;
+        // Remove the top rounded corners here since there is a hard edge above the menu
+        @include border-top-radius(0);
     }
-
-    &.disabled {
-      color: $nav-link-disabled-color;
-      background-color: transparent;
-      border-color: transparent;
-    }
-  }
-
-  .nav-link.active,
-  .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color;
-    background-color: $nav-tabs-link-active-bg;
-    border-color: $nav-tabs-link-active-border-color;
-  }
-
-  .dropdown-menu {
-    // Make dropdown border overlap tab border
-    margin-top: -$nav-tabs-border-width;
-    // Remove the top rounded corners here since there is a hard edge above the menu
-    @include border-top-radius(0);
-  }
 }
 
-
 //
 // Pills
 //
 
 .nav-pills {
-  .nav-link {
-    background: none;
-    border: 0;
-    @include border-radius($nav-pills-border-radius);
-  }
+    .nav-link {
+        background: none;
+        border: 0;
+        @include border-radius($nav-pills-border-radius);
+    }
 
-  .nav-link.active,
-  .show > .nav-link {
-    color: $nav-pills-link-active-color;
-    @include gradient-bg($nav-pills-link-active-bg);
-  }
+    .nav-link.active,
+    .show > .nav-link {
+        color: $nav-pills-link-active-color;
+        @include gradient-bg($nav-pills-link-active-bg);
+    }
 }
 
-
 //
 // Justified variants
 //
 
 .nav-fill {
-  > .nav-link,
-  .nav-item {
-    flex: 1 1 auto;
-    text-align: center;
-  }
+    > .nav-link,
+    .nav-item {
+        flex: 1 1 auto;
+        text-align: center;
+    }
 }
 
 .nav-justified {
-  > .nav-link,
-  .nav-item {
-    flex-basis: 0;
-    flex-grow: 1;
-    text-align: center;
-  }
+    > .nav-link,
+    .nav-item {
+        flex-basis: 0;
+        flex-grow: 1;
+        text-align: center;
+    }
 }
 
 .nav-fill,
 .nav-justified {
-  .nav-item .nav-link {
-    width: 100%; // Make sure button will grow
-  }
+    .nav-item .nav-link {
+        width: 100%; // Make sure button will grow
+    }
 }
 
-
 // Tabbable tabs
 //
 // Hide tabbable panes to start, show them when `.active`
 
 .tab-content {
-  > .tab-pane {
-    display: none;
-  }
-  > .active {
-    display: block;
-  }
+    > .tab-pane {
+        display: none;
+    }
+    > .active {
+        display: block;
+    }
 }
diff --git a/src/assets/styles/bootstrap/_reboot.scss b/src/assets/styles/bootstrap/_reboot.scss
index 80bfffb6..7abee7e0 100644
--- a/src/assets/styles/bootstrap/_reboot.scss
+++ b/src/assets/styles/bootstrap/_reboot.scss
@@ -1,6 +1,5 @@
 // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
 
-
 // Reboot
 //
 // Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -8,7 +7,6 @@
 //
 // Normalize is licensed MIT. https://github.com/necolas/normalize.css
 
-
 // Document
 //
 // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
@@ -16,27 +14,26 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    line-height: normal;
+    box-sizing: border-box;
 }
 
-
 // Root
 //
 // Ability to the value of the root font sizes, affecting the value of `rem`.
 // null by default, thus nothing is generated.
 
 :root {
-  @if $font-size-root != null {
-    font-size: var(--#{$variable-prefix}-root-font-size);
-  }
-
-  @if $enable-smooth-scroll {
-    @media (prefers-reduced-motion: no-preference) {
-      scroll-behavior: smooth;
+    @if $font-size-root != null {
+        font-size: var(--#{$variable-prefix}-root-font-size);
     }
-  }
-}
 
+    @if $enable-smooth-scroll {
+        @media (prefers-reduced-motion: no-preference) {
+            scroll-behavior: smooth;
+        }
+    }
+}
 
 // Body
 //
@@ -47,38 +44,36 @@
 
 // scss-docs-start reboot-body-rules
 body {
-  margin: 0; // 1
-  font-family: var(--#{$variable-prefix}body-font-family);
-  @include font-size(var(--#{$variable-prefix}body-font-size));
-  font-weight: var(--#{$variable-prefix}body-font-weight);
-  line-height: var(--#{$variable-prefix}body-line-height);
-  color: var(--#{$variable-prefix}body-color);
-  text-align: var(--#{$variable-prefix}body-text-align);
-  background-color: var(--#{$variable-prefix}body-bg); // 2
-  -webkit-text-size-adjust: 100%; // 3
-  -webkit-tap-highlight-color: rgba($black, 0); // 4
+    margin: 0; // 1
+    font-family: var(--#{$variable-prefix}body-font-family);
+    @include font-size(var(--#{$variable-prefix}body-font-size));
+    font-weight: var(--#{$variable-prefix}body-font-weight);
+    line-height: var(--#{$variable-prefix}body-line-height);
+    color: var(--#{$variable-prefix}body-color);
+    text-align: var(--#{$variable-prefix}body-text-align);
+    background-color: var(--#{$variable-prefix}body-bg); // 2
+    -webkit-text-size-adjust: 100%; // 3
+    -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
 // scss-docs-end reboot-body-rules
 
-
 // Content grouping
 //
 // 1. Reset Firefox's gray color
 // 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
 
 hr {
-  margin: $hr-margin-y 0;
-  color: $hr-color; // 1
-  background-color: currentColor;
-  border: 0;
-  opacity: $hr-opacity;
+    margin: $hr-margin-y 0;
+    color: $hr-color; // 1
+    background-color: currentColor;
+    border: 0;
+    opacity: $hr-opacity;
 }
 
 hr:not([size]) {
-  height: $hr-height; // 2
+    height: $hr-height; // 2
 }
 
-
 // Typography
 //
 // 1. Remove top margins from headings
@@ -86,57 +81,55 @@ hr:not([size]) {
 //    margin for easier control within type scales as it avoids margin collapsing.
 
 %heading {
-  margin-top: 0; // 1
-  margin-bottom: $headings-margin-bottom;
-  font-family: $headings-font-family;
-  font-style: $headings-font-style;
-  font-weight: $headings-font-weight;
-  line-height: $headings-line-height;
-  color: $headings-color;
+    margin-top: 0; // 1
+    margin-bottom: $headings-margin-bottom;
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
 }
 
 h1 {
-  @extend %heading;
-  @include font-size($h1-font-size);
+    @extend %heading;
+    @include font-size($h1-font-size);
 }
 
 h2 {
-  @extend %heading;
-  @include font-size($h2-font-size);
+    @extend %heading;
+    @include font-size($h2-font-size);
 }
 
 h3 {
-  @extend %heading;
-  @include font-size($h3-font-size);
+    @extend %heading;
+    @include font-size($h3-font-size);
 }
 
 h4 {
-  @extend %heading;
-  @include font-size($h4-font-size);
+    @extend %heading;
+    @include font-size($h4-font-size);
 }
 
 h5 {
-  @extend %heading;
-  @include font-size($h5-font-size);
+    @extend %heading;
+    @include font-size($h5-font-size);
 }
 
 h6 {
-  @extend %heading;
-  @include font-size($h6-font-size);
+    @extend %heading;
+    @include font-size($h6-font-size);
 }
 
-
 // Reset margins on paragraphs
 //
 // Similarly, the top margin on `<p>`s get reset. However, we also reset the
 // bottom margin to use `rem` units instead of `em`.
 
 p {
-  margin-top: 0;
-  margin-bottom: $paragraph-margin-bottom;
+    margin-top: 0;
+    margin-bottom: $paragraph-margin-bottom;
 }
 
-
 // Abbreviations
 //
 // 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin
@@ -145,89 +138,83 @@ p {
 // 4. Prevent the text-decoration to be skipped.
 
 abbr[title],
-abbr[data-bs-original-title] { // 1
-  text-decoration: underline dotted; // 2
-  cursor: help; // 3
-  text-decoration-skip-ink: none; // 4
+abbr[data-bs-original-title] {
+    // 1
+    text-decoration: underline dotted; // 2
+    cursor: help; // 3
+    text-decoration-skip-ink: none; // 4
 }
 
-
 // Address
 
 address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
+    margin-bottom: 1rem;
+    font-style: normal;
+    line-height: inherit;
 }
 
-
 // Lists
 
 ol,
 ul {
-  padding-left: 2rem;
+    padding-left: 2rem;
 }
 
 ol,
 ul,
 dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
+    margin-top: 0;
+    margin-bottom: 1rem;
 }
 
 ol ol,
 ul ul,
 ol ul,
 ul ol {
-  margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 dt {
-  font-weight: $dt-font-weight;
+    font-weight: $dt-font-weight;
 }
 
 // 1. Undo browser default
 
 dd {
-  margin-bottom: .5rem;
-  margin-left: 0; // 1
+    margin-bottom: 0.5rem;
+    margin-left: 0; // 1
 }
 
-
 // Blockquote
 
 blockquote {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
-
 // Strong
 //
 // Add the correct font weight in Chrome, Edge, and Safari
 
 b,
 strong {
-  font-weight: $font-weight-bolder;
+    font-weight: $font-weight-bolder;
 }
 
-
 // Small
 //
 // Add the correct font size in all browsers
 
 small {
-  @include font-size($small-font-size);
+    @include font-size($small-font-size);
 }
 
-
 // Mark
 
 mark {
-  padding: $mark-padding;
-  background-color: $mark-bg;
+    padding: $mark-padding;
+    background-color: $mark-bg;
 }
 
-
 // Sub and Sup
 //
 // Prevent `sub` and `sup` elements from affecting the line height in
@@ -235,26 +222,29 @@ mark {
 
 sub,
 sup {
-  position: relative;
-  @include font-size($sub-sup-font-size);
-  line-height: 0;
-  vertical-align: baseline;
+    position: relative;
+    @include font-size($sub-sup-font-size);
+    line-height: 0;
+    vertical-align: baseline;
 }
 
-sub { bottom: -.25em; }
-sup { top: -.5em; }
-
+sub {
+    bottom: -0.25em;
+}
+sup {
+    top: -0.5em;
+}
 
 // Links
 
 a {
-  color: $link-color;
-  text-decoration: $link-decoration;
+    color: $link-color;
+    text-decoration: $link-decoration;
 
-  &:hover {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-  }
+    &:hover {
+        color: $link-hover-color;
+        text-decoration: $link-hover-decoration;
+    }
 }
 
 // And undo these styles for placeholder links/named anchors (without href).
@@ -263,24 +253,25 @@ a {
 // See https://github.com/twbs/bootstrap/issues/19402
 
 a:not([href]):not([class]) {
-  &,
-  &:hover {
-    color: inherit;
-    text-decoration: none;
-  }
+    &,
+    &:hover {
+        color: inherit;
+        text-decoration: none;
+    }
 }
 
-
 // Code
 
 pre,
 code,
 kbd,
 samp {
-  font-family: $font-family-code;
-  @include font-size(1em); // Correct the odd `em` font sizing in all browsers.
-  direction: ltr #{"/* rtl:ignore */"};
-  unicode-bidi: bidi-override;
+    font-family: $font-family-code;
+    @include font-size(
+        1em
+    ); // Correct the odd `em` font sizing in all browsers.
+    direction: ltr #{"/* rtl:ignore */"};
+    unicode-bidi: bidi-override;
 }
 
 // 1. Remove browser default top margin
@@ -288,78 +279,75 @@ samp {
 // 3. Don't allow content to break outside
 
 pre {
-  display: block;
-  margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
-  overflow: auto; // 3
-  @include font-size($code-font-size);
-  color: $pre-color;
+    display: block;
+    margin-top: 0; // 1
+    margin-bottom: 1rem; // 2
+    overflow: auto; // 3
+    @include font-size($code-font-size);
+    color: $pre-color;
 
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    @include font-size(inherit);
-    color: inherit;
-    word-break: normal;
-  }
+    // Account for some code outputs that place code tags in pre tags
+    code {
+        @include font-size(inherit);
+        color: inherit;
+        word-break: normal;
+    }
 }
 
 code {
-  @include font-size($code-font-size);
-  color: $code-color;
-  word-wrap: break-word;
+    @include font-size($code-font-size);
+    color: $code-color;
+    word-wrap: break-word;
 
-  // Streamline the style when inside anchors to avoid broken underline and more
-  a > & {
-    color: inherit;
-  }
+    // Streamline the style when inside anchors to avoid broken underline and more
+    a > & {
+        color: inherit;
+    }
 }
 
 kbd {
-  padding: $kbd-padding-y $kbd-padding-x;
-  @include font-size($kbd-font-size);
-  color: $kbd-color;
-  background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
+    padding: $kbd-padding-y $kbd-padding-x;
+    @include font-size($kbd-font-size);
+    color: $kbd-color;
+    background-color: $kbd-bg;
+    @include border-radius($border-radius-sm);
 
-  kbd {
-    padding: 0;
-    @include font-size(1em);
-    font-weight: $nested-kbd-font-weight;
-  }
+    kbd {
+        padding: 0;
+        @include font-size(1em);
+        font-weight: $nested-kbd-font-weight;
+    }
 }
 
-
 // Figures
 //
 // Apply a consistent margin strategy (matches our type styles).
 
 figure {
-  margin: 0 0 1rem;
+    margin: 0 0 1rem;
 }
 
-
 // Images and content
 
 img,
 svg {
-  vertical-align: middle;
+    vertical-align: middle;
 }
 
-
 // Tables
 //
 // Prevent double borders
 
 table {
-  caption-side: bottom;
-  border-collapse: collapse;
+    caption-side: bottom;
+    border-collapse: collapse;
 }
 
 caption {
-  padding-top: $table-cell-padding-y;
-  padding-bottom: $table-cell-padding-y;
-  color: $table-caption-color;
-  text-align: left;
+    padding-top: $table-cell-padding-y;
+    padding-bottom: $table-cell-padding-y;
+    color: $table-caption-color;
+    text-align: left;
 }
 
 // 1. Removes font-weight bold by inheriting
@@ -367,9 +355,9 @@ caption {
 // 3. Fix alignment for Safari
 
 th {
-  font-weight: $table-th-font-weight; // 1
-  text-align: inherit; // 2
-  text-align: -webkit-match-parent; // 3
+    font-weight: $table-th-font-weight; // 1
+    text-align: inherit; // 2
+    text-align: -webkit-match-parent; // 3
 }
 
 thead,
@@ -378,26 +366,25 @@ tfoot,
 tr,
 td,
 th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
+    border-color: inherit;
+    border-style: solid;
+    border-width: 0;
 }
 
-
 // Forms
 //
 // 1. Allow labels to use `margin` for spacing.
 
 label {
-  display: inline-block; // 1
+    display: inline-block; // 1
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
 // See https://github.com/twbs/bootstrap/issues/24093
 
 button {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 0;
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 0;
 }
 
 // Explicitly remove focus outline in Chromium when it shouldn't be
@@ -406,7 +393,7 @@ button {
 // confused and applies its very visible two-tone outline anyway.
 
 button:focus:not(:focus-visible) {
-  outline: 0;
+    outline: 0;
 }
 
 // 1. Remove the margin in Firefox and Safari
@@ -416,40 +403,40 @@ button,
 select,
 optgroup,
 textarea {
-  margin: 0; // 1
-  font-family: inherit;
-  @include font-size(inherit);
-  line-height: inherit;
+    margin: 0; // 1
+    font-family: inherit;
+    @include font-size(inherit);
+    line-height: inherit;
 }
 
 // Remove the inheritance of text transform in Firefox
 button,
 select {
-  text-transform: none;
+    text-transform: none;
 }
 // Set the cursor for non-`<button>` buttons
 //
 // Details at https://github.com/twbs/bootstrap/pull/30562
 [role="button"] {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 select {
-  // Remove the inheritance of word-wrap in Safari.
-  // See https://github.com/twbs/bootstrap/issues/24990
-  word-wrap: normal;
+    // Remove the inheritance of word-wrap in Safari.
+    // See https://github.com/twbs/bootstrap/issues/24990
+    word-wrap: normal;
 
-  // Undo the opacity change from Chrome
-  &:disabled {
-    opacity: 1;
-  }
+    // Undo the opacity change from Chrome
+    &:disabled {
+        opacity: 1;
+    }
 }
 
 // Remove the dropdown arrow in Chrome from inputs built with datalists.
 // See https://stackoverflow.com/a/54997118
 
 [list]::-webkit-calendar-picker-indicator {
-  display: none;
+    display: none;
 }
 
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
@@ -461,26 +448,26 @@ button,
 [type="button"], // 1
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button; // 2
+    -webkit-appearance: button; // 2
 
-  @if $enable-button-pointers {
-    &:not(:disabled) {
-      cursor: pointer; // 3
+    @if $enable-button-pointers {
+        &:not(:disabled) {
+            cursor: pointer; // 3
+        }
     }
-  }
 }
 
 // Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
 
 ::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
+    padding: 0;
+    border-style: none;
 }
 
 // 1. Textareas should really only resize vertically so they don't break their (horizontal) containers.
 
 textarea {
-  resize: vertical; // 1
+    resize: vertical; // 1
 }
 
 // 1. Browsers set a default `min-width: min-content;` on fieldsets,
@@ -491,10 +478,10 @@ textarea {
 // 2. Reset the default outline behavior of fieldsets so they don't affect page layout.
 
 fieldset {
-  min-width: 0; // 1
-  padding: 0; // 2
-  margin: 0; // 2
-  border: 0; // 2
+    min-width: 0; // 1
+    padding: 0; // 2
+    margin: 0; // 2
+    border: 0; // 2
 }
 
 // 1. By using `float: left`, the legend will behave like a block element.
@@ -503,17 +490,17 @@ fieldset {
 //    See https://github.com/twbs/bootstrap/issues/29712
 
 legend {
-  float: left; // 1
-  width: 100%;
-  padding: 0;
-  margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
-  font-weight: $legend-font-weight;
-  line-height: inherit;
+    float: left; // 1
+    width: 100%;
+    padding: 0;
+    margin-bottom: $legend-margin-bottom;
+    @include font-size($legend-font-size);
+    font-weight: $legend-font-weight;
+    line-height: inherit;
 
-  + * {
-    clear: left; // 2
-  }
+    + * {
+        clear: left; // 2
+    }
 }
 
 // Fix height of inputs with a type of datetime-local, date, month, week, or time
@@ -526,11 +513,11 @@ legend {
 ::-webkit-datetime-edit-day-field,
 ::-webkit-datetime-edit-month-field,
 ::-webkit-datetime-edit-year-field {
-  padding: 0;
+    padding: 0;
 }
 
 ::-webkit-inner-spin-button {
-  height: auto;
+    height: auto;
 }
 
 // 1. Correct the outline style in Safari.
@@ -540,8 +527,8 @@ legend {
 //    https://github.com/twbs/bootstrap/issues/11586.
 
 [type="search"] {
-  outline-offset: -2px; // 1
-  -webkit-appearance: textfield; // 2
+    outline-offset: -2px; // 1
+    -webkit-appearance: textfield; // 2
 }
 
 // 1. A few input types should stay LTR
@@ -561,40 +548,39 @@ legend {
 // Remove the inner padding in Chrome and Safari on macOS.
 
 ::-webkit-search-decoration {
-  -webkit-appearance: none;
+    -webkit-appearance: none;
 }
 
 // Remove padding around color pickers in webkit browsers
 
 ::-webkit-color-swatch-wrapper {
-  padding: 0;
+    padding: 0;
 }
 
-
 // Inherit font family and line height for file input buttons
 
 ::file-selector-button {
-  font: inherit;
+    font: inherit;
 }
 
 // 1. Change font properties to `inherit`
 // 2. Correct the inability to style clickable types in iOS and Safari.
 
 ::-webkit-file-upload-button {
-  font: inherit; // 1
-  -webkit-appearance: button; // 2
+    font: inherit; // 1
+    -webkit-appearance: button; // 2
 }
 
 // Correct element displays
 
 output {
-  display: inline-block;
+    display: inline-block;
 }
 
 // Remove border from iframe
 
 iframe {
-  border: 0;
+    border: 0;
 }
 
 // Summary
@@ -602,24 +588,22 @@ iframe {
 // 1. Add the correct display in all browsers
 
 summary {
-  display: list-item; // 1
-  cursor: pointer;
+    display: list-item; // 1
+    cursor: pointer;
 }
 
-
 // Progress
 //
 // Add the correct vertical alignment in Chrome, Firefox, and Opera.
 
 progress {
-  vertical-align: baseline;
+    vertical-align: baseline;
 }
 
-
 // Hidden attribute
 //
 // Always hide an element with the `hidden` HTML attribute.
 
 [hidden] {
-  display: none !important;
+    display: none !important;
 }
diff --git a/src/assets/styles/bootstrap/_variables.scss b/src/assets/styles/bootstrap/_variables.scss
index cc8c7a99..6062e840 100644
--- a/src/assets/styles/bootstrap/_variables.scss
+++ b/src/assets/styles/bootstrap/_variables.scss
@@ -390,7 +390,7 @@ $enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
-$enable-negative-margins:     false !default;
+$enable-negative-margins:     true !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
 
diff --git a/src/events/hc-center/HcCenterEvent.ts b/src/events/hc-center/HcCenterEvent.ts
new file mode 100644
index 00000000..1beec349
--- /dev/null
+++ b/src/events/hc-center/HcCenterEvent.ts
@@ -0,0 +1,6 @@
+import { NitroEvent } from '@nitrots/nitro-renderer';
+
+export class HcCenterEvent extends NitroEvent
+{
+    public static TOGGLE_HC_CENTER: string = 'HCC_TOGGLE';
+}
diff --git a/src/layout/card/NitroCardView.scss b/src/layout/card/NitroCardView.scss
index 0c7ba873..2e3d1924 100644
--- a/src/layout/card/NitroCardView.scss
+++ b/src/layout/card/NitroCardView.scss
@@ -66,6 +66,7 @@ $nitro-card-tabs-height: 33px;
 
         .nitro-card {
             width: 100%;
+            height: 100%;
             max-width: 100%;
             max-height: calc(100% - #{$toolbar-height});
             margin: 0;
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index 4a7438ed..f619727f 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -1,27 +1,28 @@
-@import './shared/Shared';
-@import './avatar-editor/AvatarEditorView';
-@import './camera/CameraWidgetView';
-@import './catalog/CatalogView';
-@import './friends/FriendsView';
-@import './groups/GroupView';
-@import './hotel-view/HotelView';
-@import './inventory/InventoryView';
-@import './loading/LoadingView';
-@import './main/MainView';
-@import './navigator/NavigatorView';
-@import './notification-center/NotificationCenterView';
-@import './purse/PurseView';
-@import './right-side/RightSideView';
-@import './room/RoomView';
-@import './room-host/RoomHostView';
-@import './toolbar/ToolbarView';
-@import './wired/WiredView';
-@import './mod-tools/ModToolsView';
-@import './achievements/AchievementsView';
-@import './user-settings/UserSettingsView';
-@import './user-profile/UserProfileVew';
-@import './chat-history/ChatHistoryView';
-@import './help/HelpView';
-@import './floorplan-editor/FloorplanEditorView';
-@import './nitropedia/NitropediaView';
+@import "./shared/Shared";
+@import "./avatar-editor/AvatarEditorView";
+@import "./camera/CameraWidgetView";
+@import "./catalog/CatalogView";
+@import "./friends/FriendsView";
+@import "./groups/GroupView";
+@import "./hotel-view/HotelView";
+@import "./inventory/InventoryView";
+@import "./loading/LoadingView";
+@import "./main/MainView";
+@import "./navigator/NavigatorView";
+@import "./notification-center/NotificationCenterView";
+@import "./purse/PurseView";
+@import "./right-side/RightSideView";
+@import "./room/RoomView";
+@import "./room-host/RoomHostView";
+@import "./toolbar/ToolbarView";
+@import "./wired/WiredView";
+@import "./mod-tools/ModToolsView";
+@import "./achievements/AchievementsView";
+@import "./user-settings/UserSettingsView";
+@import "./user-profile/UserProfileVew";
+@import "./chat-history/ChatHistoryView";
+@import "./help/HelpView";
+@import "./floorplan-editor/FloorplanEditorView";
+@import "./nitropedia/NitropediaView";
+@import "./hc-center/HcCenterView.scss";
 @import './campaign/CampaignView';
diff --git a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
index ffb0ebcb..d7d2e7f6 100644
--- a/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
+++ b/src/views/catalog/views/page/layout/vip-buy/CatalogLayoutVipBuyView.tsx
@@ -169,13 +169,14 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
                                     </div>
                                 </NitroCardGridItemView>
                             );
-                        }) }
+                    })}
+                    <div className="mt-auto text-black">{ LocalizeText('catalog.vip.buy.hccenter') }</div>
                 </NitroCardGridView>
             </NitroLayoutGridColumn>
             <NitroLayoutGridColumn size={ 5 }>
                 <NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
                     { GetCatalogPageImage(pageParser, 1) && <img className="" alt="" src={ GetCatalogPageImage(pageParser, 1) } /> }
-                    <NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } />
+                    <NitroLayoutBase className="text-center text-black" overflow="auto" dangerouslySetInnerHTML={{ __html: getSubscriptionDetails }} />
                 </NitroLayoutFlexColumn>
                 { pendingOffer && <div className="mt-auto w-100 text-black">
                     <div className="d-flex gap-2 mb-2 align-items-center">
diff --git a/src/views/hc-center/HcCenterView.scss b/src/views/hc-center/HcCenterView.scss
new file mode 100644
index 00000000..cc49d1ec
--- /dev/null
+++ b/src/views/hc-center/HcCenterView.scss
@@ -0,0 +1,44 @@
+.nitro-hc-center {
+    width: 430px;
+    resize: none;
+
+    .hc-logo {
+        width: 213px;
+        height: 37px;
+        background-image: url("../../assets/images/hc-center/hc_logo.gif");
+    }
+
+    .payday-special {
+        height: 128px;
+    }
+
+    .payday {
+        width: 222px;
+        height: 150px;
+        background-image: url("../../assets/images/hc-center/payday.png");
+        z-index: 3;
+        color: #6b3502;
+    }
+
+    .clock {
+        width: 24px;
+        height: 24px;
+        background-image: url("../../assets/images/hc-center/clock.png");
+    }
+
+    .streak-info {
+        min-height: 64px;
+        line-height: 16px;
+    }
+
+    .habbo-avatar {
+        z-index: 4;
+    }
+
+    .benefits {
+        background-image: url("../../assets/images/hc-center/benefits.png");
+        background-position: right top;
+        background-repeat: no-repeat;
+        height: 100%;
+    }
+}
diff --git a/src/views/hc-center/HcCenterView.tsx b/src/views/hc-center/HcCenterView.tsx
new file mode 100644
index 00000000..01e19d29
--- /dev/null
+++ b/src/views/hc-center/HcCenterView.tsx
@@ -0,0 +1,244 @@
+import { ClubGiftInfoEvent, FriendlyTime, GetClubGiftInfo, RequestBadgesComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
+import { BadgesEvent, FigureUpdateEvent } from '@nitrots/nitro-renderer/src';
+import { ScrGetKickbackInfoMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/user/ScrGetKickbackInfoMessageComposer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { OverlayTrigger, Popover } from 'react-bootstrap';
+import { CreateLinkEvent, GetConfiguration, LocalizeText } from '../../api';
+import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
+import { CreateMessageHook, SendMessageHook, useUiEvent } from '../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
+import { BadgeImageView } from '../shared/badge-image/BadgeImageView';
+import { BadgeResolver } from './util/BadgeResolver';
+import { ClubStatus } from './util/ClubStatus';
+
+
+export const HcCenterView: FC<{}> = props =>
+{
+    const [isVisible, setIsVisible] = useState(false);
+    const [userFigure, setUserFigure] = useState<string>(null);
+    const [kickbackData, setKickbackData] = useState<ScrKickbackData>(null);
+    const [clubDays, setClubDays] = useState(0);
+    const [pastClubDays, setPastClubDays] = useState(0);
+    const [clubPeriods, setPastClubPeriods] = useState(0);
+    const [minsTillExpire, setMinsTillExpire] = useState(0);
+    const [clubStatus, setClubStatus] = useState(ClubStatus.NONE);
+    const [unclaimedGifts, setUnclaimedGifts] = useState(0);
+
+    const [badgeCode, setBadgeCode] = useState(BadgeResolver.default_badge);
+
+    const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
+    {
+        const parser = event.getParser();
+        setUserFigure(parser.userInfo.figure);
+    }, []);
+
+    const onUserFigureEvent = useCallback((event: FigureUpdateEvent) =>
+    {
+        const parser = event.getParser();
+        setUserFigure(parser.figure);
+    }, []);
+
+    CreateMessageHook(UserInfoEvent, onUserInfoEvent);
+    CreateMessageHook(FigureUpdateEvent, onUserFigureEvent);
+
+    const onHcCenterEvent = useCallback((event: HcCenterEvent) =>
+    {
+        switch(event.type)
+        {
+            case HcCenterEvent.TOGGLE_HC_CENTER:
+                setIsVisible(!isVisible);
+                break;
+        }
+    }, [isVisible]);
+
+    useUiEvent(HcCenterEvent.TOGGLE_HC_CENTER, onHcCenterEvent);
+
+    const onClubGiftInfoEvent = useCallback((event: ClubGiftInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        setUnclaimedGifts(parser.giftsAvailable);
+    }, []);
+
+    const onScrSendKickbackInfo = useCallback((event: ScrSendKickbackInfoMessageEvent) =>
+    {
+        const parser = event.getParser();
+
+        setKickbackData(parser.data)
+    }, []);
+
+    const onBadges = useCallback((event: BadgesEvent) =>
+    {
+        const parser = event.getParser();
+
+        setBadgeCode(BadgeResolver.getClubBadge(parser.getAllBadgeCodes()));
+    }, [])
+
+    CreateMessageHook(ClubGiftInfoEvent, onClubGiftInfoEvent);
+    CreateMessageHook(ScrSendKickbackInfoMessageEvent, onScrSendKickbackInfo);
+    CreateMessageHook(BadgesEvent, onBadges);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new GetClubGiftInfo());
+        SendMessageHook(new ScrGetKickbackInfoMessageComposer());
+        SendMessageHook(new RequestBadgesComposer());
+    }, []);
+
+    const onUserSubscriptionEvent = useCallback((event: UserSubscriptionEvent) =>
+    {
+        const parser = event.getParser();
+
+        const productName = parser.productName;
+
+        if((productName !== 'club_habbo') && (productName !== 'habbo_club')) return;
+
+        setClubDays(Math.max(0, parser.daysToPeriodEnd));
+        setPastClubPeriods(Math.max(0, parser.periodsSubscribedAhead));
+        setPastClubDays(Math.max(0, parser.pastClubDays));
+        setMinsTillExpire(Math.max(0, parser.minutesUntilExpiration));
+    }, []);
+
+    useEffect(() =>
+    {
+        if(clubDays > 0) return setClubStatus(ClubStatus.ACTIVE)
+        if(pastClubDays > 0) return setClubStatus(ClubStatus.EXPIRED);
+
+    }, [clubDays, pastClubDays]);
+
+    CreateMessageHook(UserSubscriptionEvent, onUserSubscriptionEvent);
+
+    const getClubText = useCallback(() =>
+    {
+        const totalDays = ((clubPeriods * 31) + clubDays);
+        const minutesUntilExpiration = minsTillExpire;
+
+        if(clubStatus !== ClubStatus.ACTIVE)
+        {
+            return LocalizeText('purse.clubdays.zero.amount.text');
+        }
+        else if((minutesUntilExpiration > -1) && (minutesUntilExpiration < (60 * 24)))
+        {
+            return FriendlyTime.shortFormat(minutesUntilExpiration * 60);
+        }
+        else
+        {
+            return FriendlyTime.shortFormat(totalDays * 86400);
+        }
+    }, [clubStatus, clubDays, clubPeriods, minsTillExpire]);
+
+    const getInfoText = useCallback(() =>
+    {
+        switch(clubStatus)
+        {
+            case ClubStatus.ACTIVE:
+                return LocalizeText('hccenter.status.' + clubStatus + '.info',
+                    ['timeleft', 'joindate', 'streakduration'],
+                    [getClubText(), kickbackData.firstSubscriptionDate, FriendlyTime.shortFormat(kickbackData.currentHcStreak * 86400)]);
+            case ClubStatus.EXPIRED:
+                return LocalizeText('hccenter.status.' + clubStatus + '.info', ['joindate'], [kickbackData.firstSubscriptionDate])
+            default:
+                return LocalizeText('hccenter.status.' + clubStatus + '.info');
+        }
+    }, [clubStatus, kickbackData, getClubText]);
+
+    const getHcPaydayTime = useCallback(() =>
+    {
+        if(kickbackData.timeUntilPayday < 60) return LocalizeText('hccenter.special.time.soon');
+        return FriendlyTime.shortFormat(kickbackData.timeUntilPayday * 60);
+    }, [kickbackData]);
+
+    const getHcPaydayAmount = useCallback(() =>
+    {
+        return LocalizeText('hccenter.special.sum', ['credits'], [(kickbackData.creditRewardForStreakBonus + kickbackData.creditRewardForMonthlySpent).toString()])
+    }, [kickbackData])
+
+    if(!isVisible) return null;
+
+    const popover = (
+        <Popover id="popover-basic">
+            <Popover.Body className="text-black py-2 px-3">
+                <h5>{LocalizeText('hccenter.breakdown.title')}</h5>
+                <div>{LocalizeText('hccenter.breakdown.creditsspent', ['credits'], [kickbackData.totalCreditsSpent.toString()])}</div>
+                <div>{LocalizeText('hccenter.breakdown.paydayfactor.percent', ['percent'], [(kickbackData.kickbackPercentage * 100).toString()])}</div>
+                <div>{LocalizeText('hccenter.breakdown.streakbonus', ['credits'], [kickbackData.creditRewardForStreakBonus.toString()])}</div>
+                <hr className="w-100 text-black my-1" />
+                <div>{LocalizeText('hccenter.breakdown.total', ['credits', 'actual'], [getHcPaydayAmount(),
+                ((((kickbackData.kickbackPercentage * kickbackData.totalCreditsSpent) + kickbackData.creditRewardForStreakBonus) * 100) / 100).toString()])}</div>
+                <div className="btn btn-link text-primary p-0" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{
+                    LocalizeText('hccenter.special.infolink')}
+                </div>
+            </Popover.Body>
+        </Popover>
+    );
+
+    return (
+        <NitroCardView simple={true} className="nitro-hc-center">
+            <NitroCardHeaderView headerText={LocalizeText('generic.hccenter')} onCloseClick={() => setIsVisible(false)} />
+            <div className="bg-muted p-2 position-relative">
+                <div className="hc-logo mb-2" />
+                <button className="btn btn-success" onClick={ () => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.buy']) } }>
+                    {LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
+                </button>
+                <div className="position-absolute end-0 p-4 top-0 habbo-avatar">
+                    <AvatarImageView figure={userFigure} direction={4} scale={2} />
+                </div>
+            </div>
+            <NitroCardContentView>
+                <div className="d-flex flex-row mb-1">
+                    <BadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
+                    <div className="w-100 text-black streak-info">
+                        <h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
+                        <div dangerouslySetInnerHTML={{ __html: getInfoText() }} />
+                    </div>
+                </div>
+                {GetConfiguration('hc.center')['payday.info'] &&
+                    <div className="d-flex flex-row align-items-center mb-n2">
+                        <div className="rounded-start bg-primary p-2 payday-special mb-1 d-flex flex-column">
+                            <h4 className="mb-1">{LocalizeText('hccenter.special.title')}</h4>
+                            <div>{LocalizeText('hccenter.special.info')}</div>
+                            <div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }}>{LocalizeText('hccenter.special.infolink')}</div>
+                        </div>
+                        <div className="payday flex-shrink-0 p-2">
+                            <h5 className="mb-2 ms-2">{LocalizeText('hccenter.special.time.title')}</h5>
+                            <div className="d-flex flex-row mb-2">
+                                <div className="clock me-2" />
+                                <h6 className="mb-0 align-self-center">{getHcPaydayTime()}</h6>
+                            </div>
+                            {clubStatus === ClubStatus.ACTIVE &&
+                                <div className="pe-3">
+                                    <h5 className="ms-2 mb-1 bolder">{LocalizeText('hccenter.special.amount.title')}</h5>
+                                    <div className="d-flex flex-column">
+                                        <div className="w-100 text-center ms-4n">{getHcPaydayAmount()}</div>
+                                        <OverlayTrigger trigger="hover" placement="left" overlay={popover}>
+                                            <div className="btn btn-link align-self-end text-primary">
+                                                {LocalizeText('hccenter.breakdown.infolink')}
+                                            </div>
+                                        </OverlayTrigger>
+                                    </div>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                }
+                {GetConfiguration('hc.center')['gift.info'] &&
+                    <div className="rounded bg-success p-2 d-flex flex-row mb-0">
+                        <div>
+                            <h4 className="mb-1">{LocalizeText('hccenter.gift.title')}</h4>
+                            <div dangerouslySetInnerHTML={{ __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', ['unclaimedgifts'], [unclaimedGifts.toString()]) : LocalizeText('hccenter.gift.info') }}></div>
+                        </div>
+                        <button className="btn btn-primary btn-lg align-self-center ms-auto" onClick={() => { CreateLinkEvent('catalog/open/' + GetConfiguration('hc.center')['catalog.gifts']) }}>{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.gifts.redeem' : 'hccenter.btn.gifts.view')}</button>
+                    </div>
+                }
+                {GetConfiguration('hc.center')['benefits.info'] &&
+                    <div className="benefits text-black py-2">
+                        <h5 className="mb-1 text-primary">{LocalizeText('hccenter.general.title')}</h5>
+                        <div className="mb-2" dangerouslySetInnerHTML={{ __html: LocalizeText('hccenter.general.info') }} />
+                        <button className="btn btn-link p-0 text-primary" onClick={() => { CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) }}>{LocalizeText('hccenter.general.infolink')}</button>
+                    </div>
+                }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/views/hc-center/util/BadgeResolver.ts b/src/views/hc-center/util/BadgeResolver.ts
new file mode 100644
index 00000000..d61d66da
--- /dev/null
+++ b/src/views/hc-center/util/BadgeResolver.ts
@@ -0,0 +1,23 @@
+
+export class BadgeResolver 
+{
+    public static default_badge: string = 'HC1';
+    public static badges: string[] = ['ACH_VipHC1', 'ACH_VipHC2', 'ACH_VipHC3', 'ACH_VipHC4', 'ACH_VipHC5', 'HC1', 'HC2', 'HC3', 'HC4', 'HC5'];
+
+
+    public static getClubBadge(k: string[]): string
+    {
+        var badgeCode: string = null;
+
+        this.badges.forEach(badge =>
+        {
+            if (k.indexOf(badge) > -1)
+            {
+                badgeCode = badge;
+            }
+        });
+
+        return badgeCode || this.default_badge;
+    }
+
+}
diff --git a/src/views/hc-center/util/ClubStatus.ts b/src/views/hc-center/util/ClubStatus.ts
new file mode 100644
index 00000000..8200b148
--- /dev/null
+++ b/src/views/hc-center/util/ClubStatus.ts
@@ -0,0 +1,6 @@
+export class ClubStatus 
+{
+    public static ACTIVE: string = 'active';
+    public static NONE: string = 'none';
+    public static EXPIRED: string = 'expired';
+}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index e9eaab4f..5f0ee1f1 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -12,6 +12,7 @@ import { ChatHistoryView } from '../chat-history/ChatHistoryView';
 import { FloorplanEditorView } from '../floorplan-editor/FloorplanEditorView';
 import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
+import { HcCenterView } from '../hc-center/HcCenterView';
 import { HelpView } from '../help/HelpView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
@@ -115,6 +116,7 @@ export const MainView: FC<MainViewProps> = props =>
             <HelpView />
             <FloorplanEditorView />
             <NitropediaView />
+            <HcCenterView />
             <CampaignView />
         </div>
     );
diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss
index a4af3639..30ac9bff 100644
--- a/src/views/purse/PurseView.scss
+++ b/src/views/purse/PurseView.scss
@@ -1,21 +1,22 @@
 .nitro-purse {
-    background-color: rgba($dark,.95);
+    background-color: rgba($dark, 0.95);
     font-size: $font-size-sm;
     pointer-events: all;
     margin-bottom: 5px;
     padding: 6px 5px;
-    box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4);
+    box-shadow: inset 0px 5px lighten(rgba($dark, 0.6), 2.5),
+        inset 0 -4px darken(rgba($dark, 0.6), 4);
 
     .notification-button {
-        color:lighten($dark,20);
+        color: lighten($dark, 20);
         cursor: pointer;
         font-size: 0.9rem;
         pointer-events: all;
-        display: none
+        display: none;
     }
 
     .nitro-purse-hc {
-        background-color: rgba($light,.1);
+        background-color: rgba($light, 0.1);
         margin: 0 5px;
     }
 
@@ -29,9 +30,10 @@
         }
 
         &:hover {
-            background-color: rgba($light,.1);
+            background-color: rgba($light, 0.1);
+            cursor: pointer;
         }
     }
 }
 
-@import './views';
+@import "./views";
diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx
index bfab90ea..89a06071 100644
--- a/src/views/purse/PurseView.tsx
+++ b/src/views/purse/PurseView.tsx
@@ -1,6 +1,7 @@
 import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { GetConfiguration, LocalizeText } from '../../api';
+import { HcCenterEvent } from '../../events/hc-center/HcCenterEvent';
 import { HelpEvent } from '../../events/help/HelpEvent';
 import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent';
 import { dispatchUiEvent } from '../../hooks';
@@ -30,6 +31,11 @@ export const PurseView: FC<{}> = props =>
         dispatchUiEvent(new HelpEvent(HelpEvent.TOGGLE_HELP_CENTER));
     }, []);
 
+    const handleHcCenterClick = useCallback(() =>
+    {
+        dispatchUiEvent(new HcCenterEvent(HcCenterEvent.TOGGLE_HC_CENTER));
+    }, []);
+
     const displayedCurrencies = useMemo(() =>
     {
         return GetConfiguration<number[]>('system.currency.types', []);
@@ -139,7 +145,8 @@ export const PurseView: FC<{}> = props =>
                         </div>
                     </div>
                     <div className="col-4 px-0">
-                        <div className="nitro-purse-hc rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100">
+                        <div className="nitro-purse-hc nitro-purse-button rounded mx-1 p-1 d-flex flex-column justify-content-center align-items-center h-100"
+                        onClick={ handleHcCenterClick }>
                             <CurrencyIcon className="flex-shrink-0" type="hc" />
                             <span>{ getClubText() }</span>
                         </div>
diff --git a/src/views/purse/views/index.scss b/src/views/purse/views/index.scss
index 20184d7b..52330b9e 100644
--- a/src/views/purse/views/index.scss
+++ b/src/views/purse/views/index.scss
@@ -1,2 +1,2 @@
-@import './currency/CurrencyView';
-@import './seasonal/SeasonalView';
+@import "./currency/CurrencyView";
+@import "./seasonal/SeasonalView";