From 82c597006013ca28ff18c0b547d6297890c5a5d2 Mon Sep 17 00:00:00 2001
From: MCHost <hypermc@ssh.surf>
Date: Sun, 6 Jul 2025 10:27:26 -0400
Subject: [PATCH] Move panel to website theme

---
 public/css/main-site.css  | 1492 +++++++++++++++++++++++++++++++++++++
 public/css/styles.css     |  500 ++++++++-----
 public/css/styles.min.css | 1140 ++++++++++++++++++++--------
 public/index.html         |  994 +++++++++++++-----------
 public/js/app.js          |  226 +++++-
 tailwind.config.js        |    1 +
 6 files changed, 3418 insertions(+), 935 deletions(-)
 create mode 100644 public/css/main-site.css

diff --git a/public/css/main-site.css b/public/css/main-site.css
new file mode 100644
index 0000000..7d27064
--- /dev/null
+++ b/public/css/main-site.css
@@ -0,0 +1,1492 @@
+/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-7xl: 80rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
+    --tracking-wide: 0.025em;
+    --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --blur-xl: 24px;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-2 {
+    z-index: 2;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+  .bg-gray-900 {
+    background-color: var(--color-gray-900);
+  }
+  .bg-gray-900\/20 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 20%, transparent);
+    }
+  }
+  .bg-gray-900\/80 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 80%, transparent);
+    }
+  }
+  .bg-gray-900\/98 {
+    background-color: color-mix(in srgb, oklch(21% 0.034 264.665) 98%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-900) 98%, transparent);
+    }
+  }
+  .bg-teal-400 {
+    background-color: var(--color-teal-400);
+  }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-teal-400 {
+    --tw-gradient-from: var(--color-teal-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-blue-500 {
+    --tw-gradient-to: var(--color-blue-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .bg-clip-text {
+    background-clip: text;
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .leading-relaxed {
+    --tw-leading: var(--leading-relaxed);
+    line-height: var(--leading-relaxed);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .text-teal-300 {
+    color: var(--color-teal-300);
+  }
+  .text-teal-400 {
+    color: var(--color-teal-400);
+  }
+  .text-transparent {
+    color: transparent;
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .opacity-90 {
+    opacity: 90%;
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .hover\:bg-gradient-to-r {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-position: to right in oklab;
+        background-image: linear-gradient(var(--tw-gradient-stops));
+      }
+    }
+  }
+  .hover\:from-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: var(--color-blue-500);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:to-teal-400 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-teal-400);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:text-blue-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-400);
+      }
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .sm\:mb-8 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:grid-cols-2 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:p-10 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .sm\:p-12 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 12);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\:text-lg {
+    @media (width >= 40rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
+  .md\:p-10 {
+    @media (width >= 48rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .md\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  .lg\:grid-cols-4 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+  .lg\:p-16 {
+    @media (width >= 64rem) {
+      padding: calc(var(--spacing) * 16);
+    }
+  }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+}
+@font-face {
+  font-family: 'Minecraft';
+  src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+html, body {
+  margin: 0;
+  padding: 0;
+  background: none;
+  min-height: 100vh;
+}
+body {
+  background: #10142b;
+  background-size: 200% 200%;
+  animation: bgShift 15s ease infinite;
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  overflow-x: hidden;
+  position: relative;
+  min-height: 100vh;
+  scroll-behavior: smooth;
+}
+@keyframes bgShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-track {
+  background: linear-gradient(135deg, #0b0f2b, #1a2249);
+  border: none;
+}
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(45deg, #14b8a6, #3b82f6);
+  border-radius: 4px;
+  border: 1px solid rgba(10, 17, 40, 0.8);
+  transition: background 0.3s ease;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(45deg, #2dd4bf, #60a5fa);
+  box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
+}
+.minecraft-font {
+  font-family: 'Minecraft', sans-serif;
+  letter-spacing: 0.8px;
+  text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(to right, #14b8a6, #3b82f6);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  transform: translateZ(0);
+  position: relative;
+}
+.minecraft-font:hover {
+  animation: glitch 0.3s linear infinite;
+}
+@keyframes glitch {
+  0% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  }
+  20% {
+    transform: translate(-2px, 2px);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
+  }
+  40% {
+    transform: translate(2px, -2px);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
+  }
+  60% {
+    transform: translate(-2px, 0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
+  }
+  80% {
+    transform: translate(2px, 0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
+  }
+  100% {
+    transform: translate(0);
+    text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  }
+}
+.section-bg {
+  background: rgba(10, 17, 40, 0.3);
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 0 15px rgba(255, 255, 255, 0.1);
+  transition: box-shadow 0.4s ease, background 0.4s ease, -webkit-backdrop-filter 0.4s ease, backdrop-filter 0.4s ease;
+  animation: floatSection 4s ease-in-out infinite;
+  z-index: 2;
+}
+.section-bg h1, .section-bg h2, .section-bg h3, .section-bg h4 {
+  transform: translateZ(0);
+}
+.section-bg p, .section-bg a:not(.btn-minecraft) {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+.section-bg:hover {
+  background: rgba(10, 17, 40, 0.4);
+  -webkit-backdrop-filter: blur(14px);
+  backdrop-filter: blur(14px);
+  box-shadow: 0 12px 40px rgba(20, 184, 166, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.12);
+}
+@keyframes floatSection {
+  0%, 100% {
+    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
+  }
+  50% {
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
+  }
+}
+.btn-minecraft {
+  background: linear-gradient(45deg, #14b8a6, #3b82f6);
+  background-size: 300% 300%;
+  border: none;
+  color: #fff;
+  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
+  border-radius: 14px;
+  padding: 14px 30px;
+  font-weight: 700;
+  position: relative;
+  overflow: hidden;
+  transition: transform 0.3s, box-shadow 0.3s;
+  animation: gradientShift 5s ease infinite;
+  box-shadow: 0 0 15px rgba(20, 184, 166, 0.5), 0 0 25px rgba(59, 130, 246, 0.3);
+}
+.btn-minecraft::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+  transition: left 0.5s;
+}
+.btn-minecraft:hover::before {
+  left: 100%;
+}
+.btn-minecraft:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 20px rgba(20, 184, 166, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 40px rgba(20, 184, 166, 0.3);
+  animation: neonPulse 1.5s ease-in-out infinite;
+}
+.btn-minecraft::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background: radial-gradient(circle, rgba(20, 184, 166, 0.5), transparent);
+  opacity: 0;
+  transition: width 0.3s, height 0.3s, opacity 0.3s;
+  transform: translate(-50%, -50%);
+}
+.btn-minecraft:hover::after {
+  width: 200px;
+  height: 200px;
+  opacity: 1;
+}
+@keyframes neonPulse {
+  0%, 100% {
+    filter: brightness(1);
+  }
+  50% {
+    filter: brightness(1.2);
+  }
+}
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.hero-bg {
+  position: relative;
+  overflow: hidden;
+  min-height: 600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 24px;
+  background: rgba(10, 17, 40, 0.75);
+  z-index: 2;
+}
+.hero-bg iframe {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120%;
+  height: 120%;
+  min-height: 600px;
+  transform: translate(-50%, -50%) scale(1.2);
+  object-fit: cover;
+  z-index: 1;
+  border: none;
+  pointer-events: none;
+  backface-visibility: hidden;
+}
+.hero-bg img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+  display: none;
+}
+.hero-bg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
+  z-index: 2;
+}
+.hero-content {
+  position: relative;
+  z-index: 3;
+  text-align: center;
+  padding: 4rem;
+  animation: scaleIn 1.2s ease-out;
+}
+.hero-content h2 {
+  transform: translateZ(0);
+}
+.hero-content p {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+.header-content {
+  animation: scaleIn 1s ease-out;
+}
+.header-content h1 {
+  transform: translateZ(0);
+}
+.header-content p {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+  transform: translateZ(0);
+}
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+.feature-card {
+  background: rgba(15, 23, 50, 0.85);
+  border-radius: 18px;
+  padding: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  position: relative;
+  overflow: hidden;
+}
+
+.feature-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.feature-card:hover::before {
+  opacity: 1;
+}
+.feature-card h3, .feature-card h4 {
+}
+.feature-card p {
+  font-family: 'Roboto', 'Verdana', sans-serif;
+  color: #e0e7ff;
+}
+.particle {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: linear-gradient(45deg, #14b8a6, #3b82f6);
+  border-radius: 50%;
+  opacity: 0;
+  animation: float linear infinite, fadeInOut ease-in-out infinite;
+  z-index: -1;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  will-change: transform, opacity;
+}
+.particle.large {
+  width: 12px;
+  height: 12px;
+}
+@keyframes fadeInOut {
+  0%, 100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+@keyframes float {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-100vh);
+  }
+}
+.particle.fade-out {
+  animation: fadeOut 0.5s ease-out forwards;
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.header-bg {
+  background: linear-gradient(180deg, rgba(10, 17, 40, 0.95), rgba(5, 15, 35, 0.95));
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+}
+footer {
+  background: rgba(10, 17, 40, 0.75);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  z-index: 2;
+}
+footer a {
+  color: #2dd4bf;
+  transition: color 0.3s, text-shadow 0.3s;
+}
+footer a:hover {
+  color: #60a5fa;
+  text-shadow: 0 0 8px rgba(96, 165, 250, 0.7);
+}
+.nav-btn {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background: linear-gradient(to right, #14b8a6, #3b82f6);
+  color: white;
+  text-decoration: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: transform 0.2s, box-shadow 0.2s;
+  min-width: 100px;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.nav-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  transition: left 0.4s ease;
+}
+.nav-btn:hover::before {
+  left: 100%;
+}
+.nav-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.hamburger {
+  display: none;
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 20001;
+}
+.hamburger.active .bar:nth-child(1) {
+  transform: translateY(8px) rotate(45deg);
+}
+.hamburger.active .bar:nth-child(2) {
+  opacity: 0;
+}
+.hamburger.active .bar:nth-child(3) {
+  transform: translateY(-8px) rotate(-45deg);
+}
+.mobile-nav-container {
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+  background: linear-gradient(135deg, rgba(10, 17, 40, 0.98), rgba(5, 15, 35, 0.98));
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  z-index: 20000;
+  padding: 4rem 2rem;
+  pointer-events: auto;
+}
+.mobile-nav-container.active {
+  display: flex;
+  opacity: 1;
+  visibility: visible;
+}
+.mobile-nav-container ul li a {
+  display: block;
+  padding: 1rem 2rem;
+  border-radius: 8px;
+  transition: background 0.3s ease;
+  font-size: 1.25rem;
+  text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
+  transform: translateZ(0);
+}
+.mobile-nav-container ul li a:hover {
+  transform: translateX(10px);
+}
+@media not all and (min-resolution:.001dpcm) {
+  .particle {
+    z-index: -2;
+    backface-visibility: hidden;
+  }
+}
+@media (max-width: 768px) {
+  .hero-bg {
+    min-height: 500px;
+  }
+  .hero-bg iframe {
+    min-height: 500px;
+  }
+  .btn-minecraft {
+    padding: 12px 26px;
+    font-size: 0.9rem;
+  }
+  .minecraft-font.text-5xl {
+    font-size: 2.5rem;
+  }
+  .minecraft-font.text-4xl {
+    font-size: 2rem;
+  }
+  .minecraft-font.text-3xl {
+    font-size: 1.75rem;
+  }
+  .feature-card {
+    padding: 1.5rem;
+  }
+  .nav-btn {
+    display: none;
+  }
+  .hamburger {
+    display: flex;
+  }
+}
+@media (max-width: 640px) {
+  .hero-bg {
+    min-height: 400px;
+  }
+  .hero-bg iframe {
+    min-height: 400px;
+  }
+  .minecraft-font.text-5xl {
+    font-size: 2rem;
+  }
+  .minecraft-font.text-4xl {
+    font-size: 1.75rem;
+  }
+  .minecraft-font.text-3xl {
+    font-size: 1.5rem;
+  }
+  .mobile-nav-container ul li a {
+    font-size: 1rem;
+    padding: 0.75rem 1.5rem;
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+    }
+  }
+}
diff --git a/public/css/styles.css b/public/css/styles.css
index fa6fcde..6e98ba0 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,3 +1,5 @@
+@import "tailwindcss";
+
 @font-face {
   font-family: 'Minecraft';
   src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
@@ -5,148 +7,69 @@
   font-style: normal;
   font-display: swap;
 }
-@media (max-width: 640px) {
-  .holesail-output-mobile-hidden {
-    display: none;
-  }
-}
-
-@import "tailwindcss";
 
 @layer base {
-  /* Sticky footer base styles */
   html {
     @apply h-full;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
   }
 
   body {
-    @apply min-h-full flex flex-col;
+    @apply min-h-full flex flex-col bg-gray-900 text-white;
+    font-family: 'Roboto', 'Verdana', sans-serif;
+    overflow-x: hidden;
   }
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Minecraft', sans-serif;
+    @apply font-[Minecraft] text-white;
+    letter-spacing: 0.5px;
   }
 
   #app {
-    @apply flex-1 flex flex-col;
-  }
-
-  main {
     @apply flex-grow;
   }
 
+  main {
+    @apply flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6;
+  }
+
   footer {
-    @apply flex-shrink-0;
+    @apply bg-gray-800 py-4 text-center;
+  }
+
+  canvas {
+    @apply w-full max-w-[150px] h-auto;
+    aspect-ratio: 1/1;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-800;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-blue-600 rounded;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-blue-700;
   }
 }
 
 @layer components {
-  .spinner {
-    @apply border-4 border-gray-700 border-t-white rounded-full w-6 h-6 animate-spin inline-block;
-  }
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  #notificationContainer {
-    @apply fixed bottom-5 right-5 z-[1000] flex flex-col-reverse gap-2;
-  }
-
-  .notification {
-    @apply bg-gray-800 text-white p-4 rounded-lg flex items-center gap-3 shadow-lg transition-opacity duration-300;
-  }
-
-  .notification.success {
-    @apply bg-green-700;
-  }
-
-  .notification.error {
-    @apply bg-red-700;
-  }
-
-  #dockerLogsTerminal {
-    @apply bg-gray-800 p-4 rounded-lg max-h-48 w-full;
-  }
-
-  .xterm .xterm-viewport {
-    @apply overflow-y-auto;
-    scrollbar-width: thin;
-    scrollbar-color: #4B5563 #1F2937;
-  }
-
-  .xterm .xterm-viewport::-webkit-scrollbar {
-    @apply w-2;
-  }
-
-  .xterm .xterm-viewport::-webkit-scrollbar-track {
-    @apply bg-gray-800;
-  }
-
-  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
-    @apply bg-gray-600 rounded;
-  }
-
-  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500;
-  }
-
-  .xterm .xterm-screen {
-    @apply w-full;
-  }
-
-  .control-btn {
-    @apply px-4 py-2 text-sm font-medium transition-all duration-200 min-w-[80px] text-center shadow-sm;
-  }
-
-  .control-btn:hover:not(.disabled-btn) {
-    @apply -translate-y-px;
-  }
-
-  .control-btn:active:not(.disabled-btn) {
-    @apply translate-y-0;
-  }
-
-  /* Player button styles */
-  .tell-player {
-    @apply bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
-  }
-
-  .give-player {
-    @apply bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
-  }
-
-  .op-player, .deop-player {
-    @apply bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
-  }
-
-  .kick-player, .ban-player {
-    @apply bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
-  }
-
-  .teleport-player {
-    @apply bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
-  }
-
-  .teleport-player:hover:not(.disabled-btn) {
-    @apply -translate-y-px;
-  }
-
-  .teleport-player:active:not(.disabled-btn) {
-    @apply translate-y-0;
-  }
-
-  .effect-player {
-    @apply bg-teal-600 hover:bg-teal-700 px-2 py-1 rounded text-sm font-[Minecraft] transition-all duration-200;
-  }
-
-  .effect-player:hover:not(.disabled-btn) {
-    @apply -translate-y-px;
-  }
-
-  .effect-player:active:not(.disabled-btn) {
-    @apply translate-y-0;
+  .section-bg {
+    @apply bg-gray-800 p-6 rounded-lg shadow-lg mb-6 w-full max-w-full;
+    overflow-x: hidden;
   }
 
   .modal {
@@ -159,6 +82,13 @@
     scrollbar-color: #4B5563 #1F2937;
   }
 
+  @media (max-width: 640px) {
+    .holesail-output-mobile-hidden {
+      display: none;
+    }
+  }
+  
+
   .modal-content::-webkit-scrollbar {
     @apply w-2;
   }
@@ -179,97 +109,315 @@
     @apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer;
   }
 
-  .disabled-btn {
-    @apply opacity-50 cursor-not-allowed pointer-events-none;
+  .control-btn {
+    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded transition duration-200;
   }
 
-  .disabled-btn:hover {
-    @apply cursor-not-allowed;
+  .spinner {
+    @apply border-4 border-gray-700 border-t-blue-600 rounded-full w-6 h-6 animate-spin inline-block;
   }
 
-  /* Search box and properties fields */
-  #searchContainer {
-    @apply mb-4 block;
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
   }
 
-  #propertiesSearch {
-    @apply bg-gray-700 px-4 py-2 rounded text-white w-full block;
+  #notificationContainer {
+    @apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-2;
   }
 
-  #propertiesList {
-    @apply space-y-2;
+  .notification {
+    @apply bg-gray-800 p-3 rounded-lg text-white flex items-center gap-2 shadow-lg;
+    max-width: 90%;
+    font-size: 0.875rem;
   }
 
-  /* Toggle switch styles */
-  [role="switch"] {
-    @apply inline-block relative w-10 h-6 cursor-pointer z-10;
-  }
-
-  [role="switch"] > div:first-child {
-    @apply w-full h-full rounded-full transition-colors duration-200 ease-in-out;
-  }
-
-  [role="switch"] > div:last-child {
-    @apply absolute w-4 h-4 rounded-full bg-white top-1 transition-all duration-200 ease-in-out z-[11];
-  }
-
-  [role="switch"][aria-checked="true"] > div:first-child {
+  .notification.success {
     @apply bg-green-600;
   }
 
-  [role="switch"][aria-checked="false"] > div:first-child {
-    @apply bg-gray-600;
+  .notification.error {
+    @apply bg-red-600;
+  }
+  #dockerLogsTerminal {
+    @apply bg-gray-900 p-4 rounded-lg w-full max-w-full box-border;
+    height: 250px; /* Increase height to make the section taller */
+    overflow-y: hidden; /* Remove vertical scrollbar */
+    overflow-x: hidden; /* Maintain no horizontal scrollbar */
+}
+  .xterm .xterm-viewport {
+    @apply overflow-y-auto;
+    height: 250px; /* Increase height to make the section taller */
+    scrollbar-width: thin;
+    scrollbar-color: #3b82f6 #1f2937;
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar-track {
+    @apply bg-gray-800;
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+    @apply bg-blue-600 rounded;
+  }
+
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    @apply bg-blue-700;
+  }
+
+  .xterm .xterm-screen {
+    @apply w-full;
+  }
+
+  .item-entry {
+    @apply flex items-center gap-2 mb-2 w-full flex-wrap;
+  }
+
+  .item-entry input {
+    @apply bg-gray-700 p-2 rounded text-white w-full sm:w-auto;
+  }
+
+  .item-entry .item-amount {
+    @apply w-16 sm:w-12;
+  }
+
+  [role="switch"] {
+    @apply inline-block relative w-10 h-6 cursor-pointer;
+  }
+
+  [role="switch"] > div:first-child {
+    @apply block w-full h-full rounded-full bg-gray-700 transition-colors duration-200;
+  }
+
+  [role="switch"] > div:last-child {
+    @apply absolute w-4 h-4 rounded-full bg-white top-1 transition-all duration-200;
+  }
+
+  [role="switch"][aria-checked="true"] > div:first-child {
+    @apply bg-blue-600;
   }
 
   [role="switch"][aria-checked="true"] > div:last-child {
-    @apply left-6;
+    @apply left-5;
   }
 
   [role="switch"][aria-checked="false"] > div:last-child {
     @apply left-1;
   }
+
+  #sftpIframe {
+    @apply w-full rounded;
+    height: 50vh;
+    min-height: 300px;
+  }
+
+  #propertiesSearch {
+    @apply bg-gray-700 p-2 rounded text-white w-full;
+  }
+
+  #propertiesList {
+    @apply space-y-2;
+  }
 }
 
-@layer utilities {
-  /* Custom utilities */
+.nav-btn {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded transition duration-200;
 }
 
-/* Media queries */
-@media (max-width: 640px) {
-  .bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
+.hamburger {
+  @apply md:hidden flex flex-col justify-center items-center w-10 h-10 fixed top-4 right-4 z-[99999];
+}
+
+.hamburger .bar {
+  @apply w-6 h-0.5 bg-blue-400 mb-1.5 transition-all duration-300;
+}
+
+.hamburger.active .bar:nth-child(1) {
+  @apply translate-y-2 rotate-45;
+}
+
+.hamburger.active .bar:nth-child(2) {
+  @apply opacity-0;
+}
+
+.hamburger.active .bar:nth-child(3) {
+  @apply -translate-y-2 -rotate-45;
+}
+
+.mobile-nav-container {
+  @apply hidden fixed inset-0 flex-col items-center justify-center bg-gray-900 z-[99998] p-4;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.mobile-nav-container.active {
+  @apply flex opacity-100 visible;
+}
+
+.mobile-nav-container ul li a,
+.mobile-nav-container ul li button {
+  @apply block px-4 py-2 rounded text-lg text-white bg-blue-600 hover:bg-blue-700 mb-4;
+}
+
+@media (max-width: 768px) {
+  .section-bg {
+    @apply p-4;
+  }
+
+  .modal-content {
+    @apply p-4 max-w-[95%];
+  }
+
+  .section-bg .grid {
     @apply grid-cols-1;
   }
 
-  .bg-gray-800.p-6.rounded-lg.shadow-lg p {
-    @apply flex flex-col gap-2 break-all;
+  .section-bg .flex {
+    @apply flex-col gap-2;
   }
 
-  .bg-gray-800.p-6.rounded-lg.shadow-lg a,
-  .bg-gray-800.p-6.rounded-lg.shadow-lg span {
-    @apply break-words whitespace-normal;
+  canvas {
+    @apply max-w-[120px];
   }
 
-  .bg-gray-800.p-6.rounded-lg.shadow-lg button {
-    @apply w-full mt-2;
+  .section-bg input,
+  .section-bg textarea,
+  .section-bg select {
+    @apply p-2 text-sm;
   }
 
-  .tell-player,
-  .give-player,
-  .teleport-player,
-  .effect-player,
-  .op-player,
-  .deop-player,
-  .kick-player,
-  .ban-player {
-    @apply w-full text-center mt-1;
+  .section-bg pre {
+    @apply text-sm;
+  }
+
+  #sftpIframe {
+    @apply h-[40vh] min-h-[300px];
+  }
+
+  #consoleOutput {
+    @apply h-32 text-sm;
+  }
+
+  .notification {
+    @apply text-sm p-2 max-w-[80%];
+  }
+
+  h1 { @apply text-3xl; }
+  h2 { @apply text-xl; }
+  h3 { @apply text-base; }
+  p, span, a { @apply text-sm; }
+
+  .nav-btn {
+    @apply hidden;
+  }
+
+  .hamburger {
+    @apply flex;
+  }
+
+  .control-btn {
+    @apply px-3 py-1 text-sm;
+  }
+
+  .item-entry {
+    @apply flex-col gap-1;
+  }
+
+  .item-entry .item-amount {
+    @apply w-full;
   }
 }
 
-/* Additional styles */
-.bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
-  @apply overflow-x-hidden;
+@media (max-width: 640px) {
+  .section-bg {
+    @apply p-3;
+  }
+
+  .modal-content {
+    @apply p-3 max-w-[95%];
+  }
+
+  canvas {
+    @apply max-w-[100px];
+  }
+
+  .section-bg input,
+  .section-bg textarea,
+  .section-bg select {
+    @apply p-1 text-xs;
+  }
+
+  .section-bg pre {
+    @apply text-xs;
+  }
+
+  #sftpIframe {
+    @apply h-[35vh] min-h-[250px];
+  }
+
+  #consoleOutput {
+    @apply h-28 text-xs;
+  }
+
+  .notification {
+    @apply text-xs p-1 max-w-[90%];
+  }
+
+  h1 { @apply text-2xl; }
+  h2 { @apply text-lg; }
+  h3 { @apply text-sm; }
+  p, span, a { @apply text-xs; }
+
+  .control-btn {
+    @apply px-2 py-1 text-xs;
+  }
+}
+
+@media (max-width: 480px) {
+  .section-bg {
+    @apply p-2;
+  }
+
+  .modal-content {
+    @apply p-2 max-w-[98%];
+  }
+
+  canvas {
+    @apply max-w-[80px];
+  }
+
+  .section-bg input,
+  .section-bg textarea,
+  .section-bg select {
+    @apply p-1 text-xs;
+  }
+
+  .section-bg pre {
+    @apply text-xs;
+  }
+
+  #sftpIframe {
+    @apply h-[30vh] min-h-[200px];
+  }
+
+
+  #consoleOutput {
+    @apply h-24 text-xs;
+  }
+
+  .notification {
+    @apply text-xs p-1 max-w-[95%];
+  }
+
+  h1 { @apply text-xl; }
+  h2 { @apply text-base; }
+  h3 { @apply text-xs; }
+  p, span, a { @apply text-xs; }
+
+  .control-btn {
+    @apply px-2 py-1 text-xs;
+  }
 }
 
-.bg-gray-800.p-6.rounded-lg.shadow-lg p {
-  @apply max-w-full;
-}
\ No newline at end of file
diff --git a/public/css/styles.min.css b/public/css/styles.min.css
index ea78bb7..139b279 100644
--- a/public/css/styles.min.css
+++ b/public/css/styles.min.css
@@ -1,17 +1,5 @@
 /*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
 @layer properties;
-@font-face {
-  font-family: 'Minecraft';
-  src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
-  font-weight: normal;
-  font-style: normal;
-  font-display: swap;
-}
-@media (max-width: 640px) {
-  .holesail-output-mobile-hidden {
-    display: none;
-  }
-}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -26,6 +14,8 @@
     --color-yellow-700: oklch(55.4% 0.135 66.442);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-teal-300: oklch(85.5% 0.138 181.071);
+    --color-teal-400: oklch(77.7% 0.152 181.912);
     --color-teal-600: oklch(60% 0.118 184.704);
     --color-teal-700: oklch(51.1% 0.096 186.391);
     --color-cyan-600: oklch(60.9% 0.126 221.723);
@@ -50,6 +40,9 @@
     --spacing: 0.25rem;
     --container-md: 28rem;
     --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -62,15 +55,25 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
+    --tracking-wide: 0.025em;
     --leading-relaxed: 1.625;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
+    --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
@@ -238,6 +241,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .z-2 {
+    z-index: 2;
+  }
   .z-50 {
     z-index: 50;
   }
@@ -268,6 +274,9 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -277,6 +286,9 @@
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -289,6 +301,15 @@
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .mb-12 {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -310,9 +331,15 @@
   .inline-block {
     display: inline-block;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -340,6 +367,12 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -349,12 +382,18 @@
   .w-full {
     width: 100%;
   }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
   .max-w-\[95\%\] {
     max-width: 95%;
   }
   .max-w-md {
     max-width: var(--container-md);
   }
+  .min-w-\[250px\] {
+    min-width: 250px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -394,6 +433,9 @@
   .items-center {
     align-items: center;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -409,6 +451,9 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -487,12 +532,24 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-\[rgba\(255\,255\,255\,0\.12\)\] {
+    border-color: rgba(255,255,255,0.12);
+  }
+  .border-\[rgba\(255\,255\,255\,0\.15\)\] {
+    border-color: rgba(255,255,255,0.15);
+  }
   .border-gray-500 {
     border-color: var(--color-gray-500);
   }
   .border-gray-600 {
     border-color: var(--color-gray-600);
   }
+  .bg-\[rgba\(10\,17\,40\,0\.3\)\] {
+    background-color: rgba(10,17,40,0.3);
+  }
+  .bg-\[rgba\(10\,17\,40\,0\.75\)\] {
+    background-color: rgba(10,17,40,0.75);
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -511,6 +568,12 @@
   .bg-gray-800 {
     background-color: var(--color-gray-800);
   }
+  .bg-gray-800\/40 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
+    }
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -523,6 +586,9 @@
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
+  .bg-teal-400 {
+    background-color: var(--color-teal-400);
+  }
   .bg-teal-600 {
     background-color: var(--color-teal-600);
   }
@@ -532,6 +598,21 @@
   .bg-yellow-600 {
     background-color: var(--color-yellow-600);
   }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-teal-400 {
+    --tw-gradient-from: var(--color-teal-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-blue-500 {
+    --tw-gradient-to: var(--color-blue-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .bg-clip-text {
+    background-clip: text;
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -571,9 +652,18 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-16 {
+    padding-block: calc(var(--spacing) * 16);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-16 {
+    padding-bottom: calc(var(--spacing) * 16);
+  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
@@ -584,6 +674,14 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
   .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -620,6 +718,10 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
   .break-words {
     overflow-wrap: break-word;
   }
@@ -629,6 +731,9 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-\[\#e0e7ff\] {
+    color: #e0e7ff;
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -647,32 +752,85 @@
   .text-red-500 {
     color: var(--color-red-500);
   }
+  .text-teal-400 {
+    color: var(--color-teal-400);
+  }
+  .text-transparent {
+    color: transparent;
+  }
   .text-white {
     color: var(--color-white);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-50 {
     opacity: 50%;
   }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur-\[12px\] {
+    --tw-backdrop-blur: blur(12px);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-blur-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -729,6 +887,37 @@
       }
     }
   }
+  .hover\:bg-gradient-to-r {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-position: to right in oklab;
+        background-image: linear-gradient(var(--tw-gradient-stops));
+      }
+    }
+  }
+  .hover\:from-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-from: var(--color-blue-500);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:to-teal-400 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-gradient-to: var(--color-teal-400);
+        --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+      }
+    }
+  }
+  .hover\:text-blue-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-400);
+      }
+    }
+  }
   .hover\:text-blue-500 {
     &:hover {
       @media (hover: hover) {
@@ -757,6 +946,20 @@
       }
     }
   }
+  .hover\:shadow-lg {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .sm\:w-\[90\%\] {
     @media (width >= 40rem) {
       width: 90%;
@@ -767,6 +970,36 @@
       padding: calc(var(--spacing) * 4);
     }
   }
+  .sm\:p-8 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 8);
+    }
+  }
+  .sm\:p-10 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 10);
+    }
+  }
+  .sm\:px-6 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+  .md\:mt-0 {
+    @media (width >= 48rem) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+  .md\:flex {
+    @media (width >= 48rem) {
+      display: flex;
+    }
+  }
+  .md\:hidden {
+    @media (width >= 48rem) {
+      display: none;
+    }
+  }
   .md\:w-\[85\%\] {
     @media (width >= 48rem) {
       width: 85%;
@@ -787,264 +1020,111 @@
       width: 80%;
     }
   }
+  .lg\:px-8 {
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
+}
+@font-face {
+  font-family: 'Minecraft';
+  src: url('../font/MinecraftRegular-Bmg3.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 @layer base {
   html {
     height: 100%;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    overflow-x: hidden;
+  }
+  *, *:before, *:after {
+    box-sizing: inherit;
   }
   body {
     display: flex;
     min-height: 100%;
     flex-direction: column;
+    background-color: var(--color-gray-900);
+    color: var(--color-white);
+    font-family: 'Roboto', 'Verdana', sans-serif;
+    overflow-x: hidden;
   }
   h1, h2, h3, h4, h5, h6 {
-    font-family: 'Minecraft', sans-serif;
+    font-family: Minecraft;
+    color: var(--color-white);
+    letter-spacing: 0.5px;
   }
   #app {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-  }
-  main {
     flex-grow: 1;
   }
+  main {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+    margin-inline: auto;
+    flex-grow: 1;
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 6);
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    @media (width >= 64rem) {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+  }
   footer {
-    flex-shrink: 0;
+    background-color: var(--color-gray-800);
+    padding-block: calc(var(--spacing) * 4);
+    text-align: center;
+  }
+  canvas {
+    height: auto;
+    width: 100%;
+    max-width: 150px;
+    aspect-ratio: 1/1;
+  }
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: var(--color-gray-800);
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 0.25rem;
+    background-color: var(--color-blue-600);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-blue-700);
   }
 }
 @layer components {
-  .spinner {
-    display: inline-block;
-    height: calc(var(--spacing) * 6);
-    width: calc(var(--spacing) * 6);
-    animation: var(--animate-spin);
-    border-radius: calc(infinity * 1px);
-    border-style: var(--tw-border-style);
-    border-width: 4px;
-    border-color: var(--color-gray-700);
-    border-top-color: var(--color-white);
-  }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  #notificationContainer {
-    position: fixed;
-    right: calc(var(--spacing) * 5);
-    bottom: calc(var(--spacing) * 5);
-    z-index: 1000;
-    display: flex;
-    flex-direction: column-reverse;
-    gap: calc(var(--spacing) * 2);
-  }
-  .notification {
-    display: flex;
-    align-items: center;
-    gap: calc(var(--spacing) * 3);
+  .section-bg {
+    margin-bottom: calc(var(--spacing) * 6);
+    width: 100%;
+    max-width: 100%;
     border-radius: var(--radius-lg);
     background-color: var(--color-gray-800);
-    padding: calc(var(--spacing) * 4);
-    color: var(--color-white);
+    padding: calc(var(--spacing) * 6);
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    transition-property: opacity;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
-  .notification.success {
-    background-color: var(--color-green-700);
-  }
-  .notification.error {
-    background-color: var(--color-red-700);
-  }
-  #dockerLogsTerminal {
-    max-height: calc(var(--spacing) * 48);
-    width: 100%;
-    border-radius: var(--radius-lg);
-    background-color: var(--color-gray-800);
-    padding: calc(var(--spacing) * 4);
-  }
-  .xterm .xterm-viewport {
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: #4B5563 #1F2937;
-  }
-  .xterm .xterm-viewport::-webkit-scrollbar {
-    width: calc(var(--spacing) * 2);
-  }
-  .xterm .xterm-viewport::-webkit-scrollbar-track {
-    background-color: var(--color-gray-800);
-  }
-  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
-    border-radius: 0.25rem;
-    background-color: var(--color-gray-600);
-  }
-  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-gray-500);
-  }
-  .xterm .xterm-screen {
-    width: 100%;
-  }
-  .control-btn {
-    min-width: 80px;
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 2);
-    text-align: center;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-  }
-  .control-btn:hover:not(.disabled-btn) {
-    --tw-translate-y: -1px;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .control-btn:active:not(.disabled-btn) {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .tell-player {
-    border-radius: 0.25rem;
-    background-color: var(--color-blue-600);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-    font-family: Minecraft;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-blue-700);
-      }
-    }
-  }
-  .give-player {
-    border-radius: 0.25rem;
-    background-color: var(--color-green-600);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-    font-family: Minecraft;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-green-700);
-      }
-    }
-  }
-  .op-player, .deop-player {
-    border-radius: 0.25rem;
-    background-color: var(--color-purple-600);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-    font-family: Minecraft;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-purple-700);
-      }
-    }
-  }
-  .kick-player, .ban-player {
-    border-radius: 0.25rem;
-    background-color: var(--color-red-600);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-    font-family: Minecraft;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-red-700);
-      }
-    }
-  }
-  .teleport-player {
-    border-radius: 0.25rem;
-    background-color: var(--color-cyan-600);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-    font-family: Minecraft;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-cyan-700);
-      }
-    }
-  }
-  .teleport-player:hover:not(.disabled-btn) {
-    --tw-translate-y: -1px;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .teleport-player:active:not(.disabled-btn) {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .effect-player {
-    border-radius: 0.25rem;
-    background-color: var(--color-teal-600);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-    font-family: Minecraft;
-    font-size: var(--text-sm);
-    line-height: var(--tw-leading, var(--text-sm--line-height));
-    transition-property: all;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-teal-700);
-      }
-    }
-  }
-  .effect-player:hover:not(.disabled-btn) {
-    --tw-translate-y: -1px;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .effect-player:active:not(.disabled-btn) {
-    --tw-translate-y: calc(var(--spacing) * 0);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
+    overflow-x: hidden;
   }
   .modal {
     position: fixed;
@@ -1070,6 +1150,11 @@
     scrollbar-width: thin;
     scrollbar-color: #4B5563 #1F2937;
   }
+  @media (max-width: 640px) {
+    .holesail-output-mobile-hidden {
+      display: none;
+    }
+  }
   .modal-content::-webkit-scrollbar {
     width: calc(var(--spacing) * 2);
   }
@@ -1095,58 +1180,151 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     color: var(--color-white);
   }
-  .disabled-btn {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 50%;
+  .control-btn {
+    border-radius: 0.25rem;
+    background-color: var(--color-blue-600);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-white);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-700);
+      }
+    }
   }
-  .disabled-btn:hover {
-    cursor: not-allowed;
+  .spinner {
+    display: inline-block;
+    height: calc(var(--spacing) * 6);
+    width: calc(var(--spacing) * 6);
+    animation: var(--animate-spin);
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+    border-color: var(--color-gray-700);
+    border-top-color: var(--color-blue-600);
   }
-  #searchContainer {
-    margin-bottom: calc(var(--spacing) * 4);
-    display: block;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
   }
-  #propertiesSearch {
-    display: block;
+  #notificationContainer {
+    position: fixed;
+    right: calc(var(--spacing) * 4);
+    bottom: calc(var(--spacing) * 4);
+    z-index: 1000;
+    display: flex;
+    flex-direction: column-reverse;
+    gap: calc(var(--spacing) * 2);
+  }
+  .notification {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-gray-800);
+    padding: calc(var(--spacing) * 3);
+    color: var(--color-white);
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    max-width: 90%;
+    font-size: 0.875rem;
+  }
+  .notification.success {
+    background-color: var(--color-green-600);
+  }
+  .notification.error {
+    background-color: var(--color-red-600);
+  }
+  #dockerLogsTerminal {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-gray-900);
+    padding: calc(var(--spacing) * 4);
+    height: 250px;
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+  .xterm .xterm-viewport {
+    overflow-y: auto;
+    height: 250px;
+    scrollbar-width: thin;
+    scrollbar-color: #3b82f6 #1f2937;
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar-track {
+    background-color: var(--color-gray-800);
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb {
+    border-radius: 0.25rem;
+    background-color: var(--color-blue-600);
+  }
+  .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-blue-700);
+  }
+  .xterm .xterm-screen {
+    width: 100%;
+  }
+  .item-entry {
+    margin-bottom: calc(var(--spacing) * 2);
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+  .item-entry input {
     width: 100%;
     border-radius: 0.25rem;
     background-color: var(--color-gray-700);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 2);
+    padding: calc(var(--spacing) * 2);
     color: var(--color-white);
+    @media (width >= 40rem) {
+      width: auto;
+    }
   }
-  #propertiesList {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  .item-entry .item-amount {
+    width: calc(var(--spacing) * 16);
+    @media (width >= 40rem) {
+      width: calc(var(--spacing) * 12);
     }
   }
   [role="switch"] {
     position: relative;
-    z-index: 10;
     display: inline-block;
     height: calc(var(--spacing) * 6);
     width: calc(var(--spacing) * 10);
     cursor: pointer;
   }
   [role="switch"] > div:first-child {
+    display: block;
     height: 100%;
     width: 100%;
     border-radius: calc(infinity * 1px);
+    background-color: var(--color-gray-700);
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 200ms;
     transition-duration: 200ms;
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
   }
   [role="switch"] > div:last-child {
     position: absolute;
     top: calc(var(--spacing) * 1);
-    z-index: 11;
     height: calc(var(--spacing) * 4);
     width: calc(var(--spacing) * 4);
     border-radius: calc(infinity * 1px);
@@ -1156,52 +1334,321 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
     --tw-duration: 200ms;
     transition-duration: 200ms;
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
   }
   [role="switch"][aria-checked="true"] > div:first-child {
-    background-color: var(--color-green-600);
-  }
-  [role="switch"][aria-checked="false"] > div:first-child {
-    background-color: var(--color-gray-600);
+    background-color: var(--color-blue-600);
   }
   [role="switch"][aria-checked="true"] > div:last-child {
-    left: calc(var(--spacing) * 6);
+    left: calc(var(--spacing) * 5);
   }
   [role="switch"][aria-checked="false"] > div:last-child {
     left: calc(var(--spacing) * 1);
   }
+  #sftpIframe {
+    width: 100%;
+    border-radius: 0.25rem;
+    height: 50vh;
+    min-height: 300px;
+  }
+  #propertiesSearch {
+    width: 100%;
+    border-radius: 0.25rem;
+    background-color: var(--color-gray-700);
+    padding: calc(var(--spacing) * 2);
+    color: var(--color-white);
+  }
+  #propertiesList {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
 }
-@layer utilities;
-@media (max-width: 640px) {
-  .bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
+.nav-btn {
+  border-radius: 0.25rem;
+  background-color: var(--color-blue-600);
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 2);
+  --tw-font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-white);
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 200ms;
+  transition-duration: 200ms;
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--color-blue-700);
+    }
+  }
+}
+.hamburger {
+  position: fixed;
+  top: calc(var(--spacing) * 4);
+  right: calc(var(--spacing) * 4);
+  z-index: 99999;
+  display: flex;
+  height: calc(var(--spacing) * 10);
+  width: calc(var(--spacing) * 10);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  @media (width >= 48rem) {
+    display: none;
+  }
+}
+.hamburger .bar {
+  margin-bottom: calc(var(--spacing) * 1.5);
+  height: calc(var(--spacing) * 0.5);
+  width: calc(var(--spacing) * 6);
+  background-color: var(--color-blue-400);
+  transition-property: all;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+  --tw-duration: 300ms;
+  transition-duration: 300ms;
+}
+.hamburger.active .bar:nth-child(1) {
+  --tw-translate-y: calc(var(--spacing) * 2);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  rotate: 45deg;
+}
+.hamburger.active .bar:nth-child(2) {
+  opacity: 0%;
+}
+.hamburger.active .bar:nth-child(3) {
+  --tw-translate-y: calc(var(--spacing) * -2);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  rotate: calc(45deg * -1);
+}
+.mobile-nav-container {
+  position: fixed;
+  inset: calc(var(--spacing) * 0);
+  z-index: 99998;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-gray-900);
+  padding: calc(var(--spacing) * 4);
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.mobile-nav-container.active {
+  visibility: visible;
+  display: flex;
+  opacity: 100%;
+}
+.mobile-nav-container ul li a, .mobile-nav-container ul li button {
+  margin-bottom: calc(var(--spacing) * 4);
+  display: block;
+  border-radius: 0.25rem;
+  background-color: var(--color-blue-600);
+  padding-inline: calc(var(--spacing) * 4);
+  padding-block: calc(var(--spacing) * 2);
+  font-size: var(--text-lg);
+  line-height: var(--tw-leading, var(--text-lg--line-height));
+  color: var(--color-white);
+  &:hover {
+    @media (hover: hover) {
+      background-color: var(--color-blue-700);
+    }
+  }
+}
+@media (max-width: 768px) {
+  .section-bg {
+    padding: calc(var(--spacing) * 4);
+  }
+  .modal-content {
+    max-width: 95%;
+    padding: calc(var(--spacing) * 4);
+  }
+  .section-bg .grid {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .bg-gray-800.p-6.rounded-lg.shadow-lg p {
-    display: flex;
+  .section-bg .flex {
     flex-direction: column;
     gap: calc(var(--spacing) * 2);
-    word-break: break-all;
   }
-  .bg-gray-800.p-6.rounded-lg.shadow-lg a, .bg-gray-800.p-6.rounded-lg.shadow-lg span {
-    overflow-wrap: break-word;
-    white-space: normal;
+  canvas {
+    max-width: 120px;
   }
-  .bg-gray-800.p-6.rounded-lg.shadow-lg button {
-    margin-top: calc(var(--spacing) * 2);
+  .section-bg input, .section-bg textarea, .section-bg select {
+    padding: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .section-bg pre {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  #sftpIframe {
+    height: 40vh;
+    min-height: 300px;
+  }
+  #consoleOutput {
+    height: calc(var(--spacing) * 32);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .notification {
+    max-width: 80%;
+    padding: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  h1 {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  h2 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  h3 {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  p, span, a {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .nav-btn {
+    display: none;
+  }
+  .hamburger {
+    display: flex;
+  }
+  .control-btn {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .item-entry {
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1);
+  }
+  .item-entry .item-amount {
     width: 100%;
   }
-  .tell-player, .give-player, .teleport-player, .effect-player, .op-player, .deop-player, .kick-player, .ban-player {
-    margin-top: calc(var(--spacing) * 1);
-    width: 100%;
-    text-align: center;
+}
+@media (max-width: 640px) {
+  .section-bg {
+    padding: calc(var(--spacing) * 3);
+  }
+  .modal-content {
+    max-width: 95%;
+    padding: calc(var(--spacing) * 3);
+  }
+  canvas {
+    max-width: 100px;
+  }
+  .section-bg input, .section-bg textarea, .section-bg select {
+    padding: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .section-bg pre {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  #sftpIframe {
+    height: 35vh;
+    min-height: 250px;
+  }
+  #consoleOutput {
+    height: calc(var(--spacing) * 28);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .notification {
+    max-width: 90%;
+    padding: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  h1 {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  h2 {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  h3 {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  p, span, a {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .control-btn {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 }
-.bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
-  overflow-x: hidden;
-}
-.bg-gray-800.p-6.rounded-lg.shadow-lg p {
-  max-width: 100%;
+@media (max-width: 480px) {
+  .section-bg {
+    padding: calc(var(--spacing) * 2);
+  }
+  .modal-content {
+    max-width: 98%;
+    padding: calc(var(--spacing) * 2);
+  }
+  canvas {
+    max-width: 80px;
+  }
+  .section-bg input, .section-bg textarea, .section-bg select {
+    padding: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .section-bg pre {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  #sftpIframe {
+    height: 30vh;
+    min-height: 200px;
+  }
+  #consoleOutput {
+    height: calc(var(--spacing) * 24);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .notification {
+    max-width: 95%;
+    padding: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  h1 {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  h2 {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  h3 {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  p, span, a {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .control-btn {
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
 }
 @property --tw-rotate-x {
   syntax: "*";
@@ -1238,6 +1685,48 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -1246,6 +1735,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -1364,6 +1857,42 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -1403,8 +1932,18 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -1432,6 +1971,15 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-translate-x: 0;
diff --git a/public/index.html b/public/index.html
index c1ad243..78a1933 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,472 +2,564 @@
 <html lang="en" class="h-full">
 
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Permissions-Policy" content="clipboard-write=(self https://sftp.my-mc.link)">
-  <title>My-MC Panel</title>
-  <link rel="stylesheet" href="/css/styles.min.css?p=1">
-  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
-  <link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" rel="stylesheet" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/favicon/site.webmanifest">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Permissions-Policy" content="clipboard-write=(self https://sftp.my-mc.link)">
+    <title>My-MC Panel</title>
+    <link rel="stylesheet" href="css/styles.min.css">
+    <link rel="stylesheet" href="css/main-site.css">
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" rel="stylesheet" />
+    <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/favicon/site.webmanifest">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
 </head>
 
-<body class="bg-gray-900 text-white overflow-x-hidden min-h-full flex flex-col">
-  <div id="app" class="flex-grow">
-    <!-- Login Page and Modals (unchanged) -->
-    <div id="loginPage" class="hidden fixed inset-0 bg-gray-900 flex items-center justify-center">
-      <div class="bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
-        <h2 class="text-2xl font-bold mb-6 text-center">My-MC Panel</h2>
-        <div class="mb-4">
-          <input id="loginApiKey" type="text" placeholder="Enter API Key"
-            class="bg-gray-700 px-4 py-2 rounded text-white w-full">
-        </div>
-        <button id="loginBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Login</button>
-        <p id="loginError" class="text-red-500 text-sm mt-2 hidden"></p>
-      </div>
-    </div>
-
-    <div id="notificationContainer"></div>
-
-    <div id="tellModal" class="modal hidden">
-      <div class="modal-content">
-        <button class="modal-close">×</button>
-        <h2 class="text-xl font-semibold mb-4">Send Message to <span id="tellPlayerName"></span></h2>
-        <form id="tellForm">
-          <textarea id="tellMessage" placeholder="Enter your message"
-            class="bg-gray-700 px-4 py-2 rounded text-white w-full h-24 mb-4"></textarea>
-          <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Send</button>
-        </form>
-      </div>
-    </div>
-
-    <div id="giveModal" class="modal hidden">
-      <div class="modal-content">
-        <button class="modal-close">×</button>
-        <h2 class="text-xl font-semibold mb-4">Give Items to <span id="givePlayerName"></span></h2>
-        <form id="giveForm">
-          <div class="mb-4">
-            <label for="loadoutSelect" class="block text-sm font-medium mb-1">Select Loadout</label>
-            <select id="loadoutSelect" class="bg-gray-700 px-4 py-2 rounded text-white w-full">
-              <option value="custom">Custom</option>
-              <option value="starter">Starter Kit (Torches, Food)</option>
-              <option value="builder">Builder Kit (Stone, Wood)</option>
-              <option value="combat">Combat Kit (Sword, Armor)</option>
-              <option value="miner">Miner Kit (Pickaxe, Torches, Shovel)</option>
-              <option value="adventurer">Adventurer Kit (Bow, Arrows, Compass)</option>
-              <option value="alchemist">Alchemist Kit (Potions, Brewing Stand)</option>
-              <option value="enchanter">Enchanter Kit (Books, Lapis, Enchanting Table)</option>
-              <option value="farmer">Farmer Kit (Seeds, Hoe, Bone Meal)</option>
-              <option value="nether">Nether Survival Kit (Fire Resistance, Obsidian)</option>
-              <option value="end">End Prep Kit (Ender Pearls, Blaze Rods)</option>
-            </select>
-          </div>
-          <div id="customGiveFields" class="hidden mb-4">
-            <div id="itemList" class="space-y-2"></div>
-            <button type="button" id="addItemBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded mt-2">Add
-              Item</button>
-          </div>
-          <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Give</button>
-        </form>
-      </div>
-    </div>
-
-    <div id="teleportModal" class="modal hidden">
-      <div class="modal-content">
-        <button class="modal-close">×</button>
-        <h2 class="text-xl font-semibold mb-4">Teleport <span id="teleportPlayerName"></span></h2>
-        <form id="teleportForm">
-          <div class="mb-4">
-            <label for="teleportDestination" class="block text-sm font-medium mb-1">Select Destination Player</label>
-            <select id="teleportDestination" class="bg-gray-700 px-4 py-2 rounded text-white w-full">
-              <!-- Options populated dynamically -->
-            </select>
-          </div>
-          <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Teleport</button>
-        </form>
-      </div>
-    </div>
-
-    <div id="effectModal" class="modal hidden">
-      <div class="modal-content">
-        <button class="modal-close">×</button>
-        <h2 class="text-xl font-semibold mb-4">Apply Effect to <span id="effectPlayerName"></span></h2>
-        <form id="effectForm">
-          <div class="mb-4">
-            <label for="effectSelect" class="block text-sm font-medium mb-1">Select Effect</label>
-            <select id="effectSelect" class="bg-gray-700 px-4 py-2 rounded text-white w-full">
-              <option value="speed:30:1">Speed (30s, Level 1)</option>
-              <option value="strength:30:1">Strength (30s, Level 1)</option>
-              <option value="regeneration:30:1">Regeneration (30s, Level 1)</option>
-              <option value="jump_boost:30:1">Jump Boost (30s, Level 1)</option>
-              <option value="invisibility:30:1">Invisibility (30s, Level 1)</option>
-              <option value="night_vision:60:1">Night Vision (60s, Level 1)</option>
-              <option value="fire_resistance:60:1">Fire Resistance (60s, Level 1)</option>
-              <option value="water_breathing:60:1">Water Breathing (60s, Level 1)</option>
-            </select>
-          </div>
-          <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Apply Effect</button>
-        </form>
-      </div>
-    </div>
-
-    <div id="editPropertiesModal" class="modal hidden">
-      <div class="modal-content">
-        <button class="modal-close">×</button>
-        <h2 class="text-xl font-semibold mb-4">Edit server.properties</h2>
-        <form id="editPropertiesForm" class="space-y-4">
-          <div id="propertiesFields" class="space-y-2"></div>
-          <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded w-full">Save</button>
-        </form>
-      </div>
-    </div>
-
-    <div id="updateModsModal"
-      class="modal hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-2 sm:p-4">
-      <div
-        class="modal-content bg-gray-900 rounded-lg max-w-[95%] w-full sm:w-[90%] md:w-[85%] lg:w-[80%] mx-auto flex flex-col max-h-[95vh]">
-        <div class="flex justify-between items-center p-4 border-b">
-          <h2 class="text-xl font-semibold text-white">Mod Update Output</h2>
-          <button class="modal-close text-2xl font-bold text-white">×</button>
-        </div>
-        <pre id="updateModsOutput"
-          class="flex-1 p-4 text-white text-sm max-h-[calc(95vh-10rem)] overflow-y-auto overflow-x-auto whitespace-pre-wrap break-words leading-relaxed"></pre>
-        <div class="p-4 border-t">
-          <button id="closeUpdateModsBtn"
-            class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded w-full">Close</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Navigation (unchanged) -->
-    <nav class="bg-gray-800 p-4 shadow-lg">
-      <div class="container mx-auto flex justify-between items-center">
-        <h1 class="text-2xl font-bold">My-MC Panel</h1>
-        <div class="flex space-x-4">
-          <button id="refresh" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded">Refresh</button>
-          <button id="backupBtn" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded">Backup</button>
-          <div id="authControls">
-            <input id="apiKey" type="text" placeholder="Enter API Key" class="bg-gray-700 px-4 py-2 rounded text-white">
-          </div>
-        </div>
-      </div>
+<body class="min-h-full flex flex-col">
+    <!-- Hamburger Menu Icon (visible on mobile) -->
+    <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none"
+        style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto;">
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+    </button>
+    <!-- Mobile Navigation Menu -->
+    <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden"
+        data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto;">
+        <ul class="text-center">
+            <li class="mb-6">
+                <a href="https://my-mc.link"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Home</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://stats.my-mc.link"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System
+                    Stats</a>
+            </li>
+            <li class="mb-6">
+                <button id="mobileRefresh"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Refresh</button>
+            </li>
+            <li class="mb-6">
+                <button id="mobileBackupBtn"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Backup</button>
+            </li>
+            <li class="mb-6">
+                <a href="https://info.my-mc.link"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400"
+                    target="_blank">Wiki</a>
+            </li>
+            <li class="mb-6">
+                <button id="mobileLogoutBtn"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Logout</button>
+            </li>
+        </ul>
     </nav>
+    <!-- Particle Effects -->
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
+    <div class="particle large"></div>
+    <div class="particle"></div>
 
-    <!-- Main Content (unchanged except for Holesail Keys section) -->
-    <main id="mainContent" class="container mx-auto p-6">
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6" data-section="server-status">
-        <h2 class="text-xl font-semibold mb-4">Server Status</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div>
-            <p><strong>User:</strong> <span id="user">Loading...</span></p>
-            <p><strong>Key Expiry:</strong> <span id="keyExpiry">Loading...</span></p>
-            <p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p>
-          </div>
-          <div class="flex space-x-4 justify-center">
-            <div class="text-center">
-              <canvas id="memoryMeter" width="150" height="150"></canvas>
-              <p class="text-sm mt-2"><b>Memory Usage</b></p>
-              <p id="memoryPercent" class="text-lg font-bold">0%</p>
+    <header class="header-bg py-16 text-center relative z-2">
+        <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div>
+                <h1
+                    class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+                    My-MC Panel</h1>
+                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Manage Your Minecraft Server</p>
             </div>
-            <div class="text-center">
-              <canvas id="cpuMeter" width="150" height="150"></canvas>
-              <p class="text-sm mt-2"><b>CPU Usage</b></p>
-              <p id="cpuPercent" class="text-lg font-bold">0%</p>
-            </div>
-          </div>
-          <div class="flex flex-wrap space-x-2 justify-end items-center">
-            <div class="flex space-x-2">
-              <button id="startBtn"
-                class="bg-green-600 hover:bg-green-700 rounded font-medium control-btn">Start</button>
-              <button id="stopBtn" class="bg-red-600 hover:bg-red-700 rounded font-medium control-btn">Stop</button>
-              <button id="restartBtn"
-                class="bg-yellow-600 hover:bg-yellow-700 rounded font-medium control-btn">Restart</button>
-            </div>
-            <button id="editPropertiesBtn"
-              class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded control-btn w-full mt-2">Edit Server
-              Properties</button>
-            <button id="updateModsBtn"
-              class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded control-btn w-full mt-2">Update Mods</button>
-          </div>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://my-mc.link" class="nav-btn">Home</a>
+                <a href="https://stats.my-mc.link" class="nav-btn" target="_blank">System Stats</a>
+                <button id="refresh" class="nav-btn">Refresh</button>
+                <button id="backupBtn" class="nav-btn">Backup</button>
+                <a href="https://info.my-mc.link" class="nav-btn" target="_blank">Wiki</a>
+                <button id="logoutBtn" class="nav-btn">Logout</button>
+            </nav>
         </div>
-      </div>
+    </header>
 
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
-        <h2 class="text-xl font-semibold mb-4">Player Management</h2>
-        <div class="mb-4"></div>
-        <p><strong>Connected Players:</strong><br> <span id="playerList">Loading...</span></p>
-      </div>
-
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
-        <h2 class="text-xl font-semibold mb-4">Server Logs</h2>
-        <div id="dockerLogsTerminal" class="mt-4"></div>
-      </div>
-
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
-        <h2 class="text-xl font-semibold mb-4">Server Console</h2>
-        <form id="consoleForm" onsubmit="event.preventDefault(); sendConsoleCommand();">
-          <input id="consoleInput" type="text" placeholder="Enter RCON Command (Hit Enter To Submit)"
-            class="bg-gray-700 px-4 py-2 rounded text-white w-full mb-2">
-          <button id="sendConsole" type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
-            style="display: none;">Send</button>
-        </form>
-        <pre id="consoleOutput" class="bg-gray-900 p-4 rounded mt-4 h-48 overflow-y-auto"></pre>
-      </div>
-
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6" id="sftpBrowserSection" style="display: none;">
-        <div class="flex justify-between items-baseline mb-4">
-          <h2 class="text-xl font-semibold">SFTP Browser</h2>
-          <button id="sftpBtn" class="px-3 py-1 rounded text-sm flex items-center space-x-1"
-            style="background-color: #121724; color: #ffffff;">
-            <i class="fas fa-sync-alt" style="color: #121724;"></i>
-            <span>Refresh SFTP</span>
-          </button>
-        </div>
-        <iframe id="sftpIframe" class="w-full rounded" style="height: 650px; min-height: 650px;"
-          allow="clipboard-read; clipboard-write"></iframe>
-      </div>
-
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
-        <h2 class="text-xl font-semibold mb-4">Mod Management</h2>
-        <form id="modSearchForm" onsubmit="event.preventDefault(); searchMods(1);">
-          <div class="mb-4 flex space-x-2">
-            <input id="modSearch" type="text" placeholder="Search Mods (Hit Enter To Submit)"
-              class="bg-gray-700 px-4 py-2 rounded text-white flex-grow">
-            <button id="searchBtn" type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
-              style="display: none;">Search</button>
-            <button id="closeSearchBtn" type="button"
-              class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded hidden">Close</button>
-          </div>
-        </form>
-        <div id="modResults" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
-        <div id="pagination" class="mt-4 flex justify-center space-x-2"></div>
-        <h3 class="text-lg font-semibold mt-4">Installed Mods</h3>
-        <div class="mb-4 flex space-x-2">
-          <input id="modListSearch" type="text" placeholder="Search Installed Mods"
-            class="bg-gray-700 px-4 py-2 rounded text-white flex-grow">
-          <button id="clearModListSearch" type="button"
-            class="bg-gray-600 hover:bg-gray-700 px-4 py-2 rounded hidden">Clear</button>
-        </div>
-        <div id="modList" class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
-        <div id="modListPagination" class="mt-4 flex justify-center space-x-2"></div>
-      </div>
-
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
-        <h2 class="text-xl font-semibold mb-4">Server Links</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <p><strong>Advanced Log URL:</strong> <a id="logUrl" href="#" class="text-blue-400"
-              target="_blank">Loading...</a></p>
-          <p><strong>Website URL:</strong> <a id="websiteUrl" href="#" class="text-blue-400"
-              target="_blank">Loading...</a></p>
-          <p><strong>BlueMap URL:</strong> <a id="mapUrl" href="#" class="text-blue-400" target="_blank">Loading...</a>
-          </p>
-          <div>
-            <p><strong>Connection Link:</strong> <span id="myLink">Link Not Created</span> <span
-                id="connectionStatus"></span></p>
-            <button id="generateMyLinkBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded mt-2">Generate
-              Connection Link</button>
-          </div>
-          <div>
-            <p><strong>Geyser Link:</strong> <span id="geyserLink">Link Not Created</span> <span
-                id="geyserStatus"></span></p>
-            <button id="generateGeyserLinkBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded mt-2">Generate
-              Geyser Link</button>
-          </div>
-          <div>
-            <p><strong>SFTP Link:</strong> <span id="sftpLink">Link Not Created</span> <span id="sftpStatus"></span></p>
-            <button id="generateSftpLinkBtn" class="bg-blue-600 hover:bg-blue-700 px-4 py-1 rounded mt-2">Generate SFTP
-              Link</button>
-          </div>
-        </div>
-      </div>
-
-      <!-- Updated Holesail Keys Section -->
-      <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-xl font-semibold text-white">Holesail Keys</h2>
-          <button id="toggleTutorial"
-            class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Tutorial</button>
-        </div>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-          <div class="flex items-center bg-gray-700 p-3 rounded-md">
-            <div class="flex-grow">
-              <p class="text-gray-300"><strong>Minecraft Key:</strong></p>
-              <p class="text-gray-100 break-all" id="holesailHash">Not Loaded</p>
-              <p class="text-sm text-gray-400">Port: 127.0.0.1:25565</p>
+    <div id="app" class="flex-grow">
+        <!-- Login Page and Modals -->
+        <div id="loginPage" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-2xl minecraft-font mb-6 text-center">My-MC Panel Login</h2>
+                <div class="mb-4">
+                    <input id="loginApiKey" type="text" placeholder="Enter API Key"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                </div>
+                <button id="loginBtn" class="btn-minecraft w-full">Login</button>
+                <p id="loginError" class="text-red-500 text-sm mt-2 hidden"></p>
             </div>
-            <button class="copy-key-btn ml-2 text-gray-300 hover:text-white" data-key-id="holesailHash"
-              data-key-type="Minecraft" title="Copy">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
-                </path>
-              </svg>
-            </button>
-          </div>
-          <div class="flex items-center bg-gray-700 p-3 rounded-md">
-            <div class="flex-grow">
-              <p class="text-gray-300"><strong>Geyser Key:</strong></p>
-              <p class="text-gray-100 break-all" id="geyserHash">Not Loaded</p>
-              <p class="text-sm text-gray-400">Port: 127.0.0.1:19132</p>
-            </div>
-            <button class="copy-key-btn ml-2 text-gray-300 hover:text-white" data-key-id="geyserHash"
-              data-key-type="Geyser" title="Copy">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
-                </path>
-              </svg>
-            </button>
-          </div>
-          <div class="flex items-center bg-gray-700 p-3 rounded-md">
-            <div class="flex-grow">
-              <p class="text-gray-300"><strong>SFTP Key:</strong></p>
-              <p class="text-gray-100 break-all" id="sftpHash">Not Loaded</p>
-              <p class="text-sm text-gray-400">Port: 127.0.0.1:22</p>
-            </div>
-            <button class="copy-key-btn ml-2 text-gray-300 hover:text-white" data-key-id="sftpHash" data-key-type="SFTP"
-              title="Copy">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                  d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
-                </path>
-              </svg>
-            </button>
-          </div>
         </div>
 
-        <div id="tutorialSection" class="hidden">
-          <div class="bg-gray-700 p-6 rounded-xl mb-6 border border-gray-600">
-            <h3 class="text-xl font-bold mb-4 text-white border-b border-gray-500 pb-2">What is Holesail.io?</h3>
-            <p class="text-gray-200 text-base leading-relaxed mb-4">
-              <a href="https://holesail.io" target="_blank"
-                class="text-blue-400 hover:underline font-medium">Holesail.io</a> is an open-source, peer-to-peer
-              networking tool that creates secure, encrypted tunnels that bypass network restrictions, firewalls, and
-              NAT.<BR>It exposes your local network to the internet without needing port forwarding, static IPs, or
-              Dynamic DNS, acting as a versatile tunneling and reverse proxy solution.
-            </p>
-            <div class="mb-4">
-              <p class="text-gray-200 font-semibold mb-2">With Holesail, you can:</p>
-              <ul class="list-disc pl-6 space-y-1 text-gray-200 text-base">
-                <li>Access machines over the internet securely.</li>
-                <li>Share locally running servers, websites, or AI models with other ports/services.</li>
-                <li>Transfer files and folders remotely without bandwidth or size limits.</li>
-                <li>Play LAN games like Minecraft with friends remotely.</li>
-                <li>Secure SSH servers by blocking IP access and using Holesail for connections.</li>
-                <li>Built for ANY application, Holesail supports both the TCP and UDP Protocols nativly.</li>
-                <li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your entire local
-                  network.</li>
-                <BR>And so much more! With Holesail, the possiblities are endless!
-              </ul>
-            </div>
-            <p class="text-gray-200 text-base leading-relaxed">
-              Built with security in mind, Holesail ensures all data is encrypted and never touches third-party
-              servers.<BR>Connections are truly peer-to-peer, accessible only to those with whom you share your private
-              key, providing both ease of use and robust security.<BR>Other peers cannot detect your activity or
-              services.<BR>As an open-source tool, Holesail enables third-party services to integrate it, enhancing
-              their security and connectivity.
-            </p>
-            <p class="text-gray-200 text-base leading-relaxed">
-              <BR>Your Public My-MC Ports are Holesail connections hosted on a separate server, not our Minecraft
-              host.<BR>They use the same keys from the tutorial below. We hook 'em up at our jump host to go public.
-              Pretty dope, right?
-            </p>
-          </div>
+        <div id="notificationContainer"></div>
 
-          <div class="bg-gray-700 p-4 rounded-md mb-6">
-            <h3 class="text-lg font-semibold mb-3 text-white">How to Use Holesail Keys</h3>
-            <ol class="list-decimal list-inside space-y-2 text-gray-300">
-              <li>Ensure <a href="https://nodejs.org/" target="_blank" class="text-blue-400 hover:underline">Node.js</a>
-                is installed on your system.</li>
-              <li>Install Holesail by running:
-                <pre class="bg-gray-800 p-2 rounded mt-1 text-sm">npm i holesail@2.1.0</pre>
-              </li>
-              <li>Connect to a key using the appropriate command:
-                <ul class="list-disc list-inside ml-4 mt-1">
-                  <li>For Minecraft Key (e.g., Minecraft server):
-                    <pre
-                      class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialHolesailHash">Not Loaded</span></pre>
-                  </li>
-                  <li>For Geyser key (e.g., cross-platform Minecraft):
-                    <pre
-                      class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialGeyserHash">Not Loaded</span></pre>
-                  </li>
-                  <li>For SFTP key (e.g., file transfer):
-                    <pre
-                      class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialSftpHash">Not Loaded</span></pre>
-                  </li>
-                </ul>
-              </li>
-              <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example output for your
-                Minecraft server:
-                <pre class="bg-gray-800 p-2 rounded mt-1 text-sm">
-              ~ ❯ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span>
-              ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
-              |                                                                                                                       |
-              |                                                                                                                       |
-              |                                            Holesail TCP Client Started ⛵️                                             |
-              |                                      Connection Mode: Private Connection String                                       |
-              |                                     Access application on http://127.0.0.1:25565/                                     |
-              |                              Connected to key: <span id="tutorialHolesailHashOutput2">Not Loaded</span>                              |
-              |   NOTE: TREAT PRIVATE CONNECTION STRINGS HOW YOU WOULD TREAT SSH KEY, DO NOT SHARE IT WITH ANYONE YOU DO NOT TRUST    |
-              |                                                                                                                       |
-              |                                                                                                                       |
-              |                                                                                                                       |
-              └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+        <div id="tellModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Send Message to <span id="tellPlayerName"></span></h2>
+                <form id="tellForm">
+                    <textarea id="tellMessage" placeholder="Enter your message"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full h-24 mb-4 border border-[rgba(255,255,255,0.15)]"></textarea>
+                    <button type="submit" class="btn-minecraft w-full">Send</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="giveModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Give Items to <span id="givePlayerName"></span></h2>
+                <form id="giveForm">
+                    <div class="mb-4">
+                        <label for="loadoutSelect" class="block text-sm font-medium mb-1">Select Loadout</label>
+                        <select id="loadoutSelect"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                            <option value="custom">Custom</option>
+                            <option value="starter">Starter Kit (Torches, Food)</option>
+                            <option value="builder">Builder Kit (Stone, Wood)</option>
+                            <option value="combat">Combat Kit (Sword, Armor)</option>
+                            <option value="miner">Miner Kit (Pickaxe, Torches, Shovel)</option>
+                            <option value="adventurer">Adventurer Kit (Bow, Arrows, Compass)</option>
+                            <option value="alchemist">Alchemist Kit (Potions, Brewing Stand)</option>
+                            <option value="enchanter">Enchanter Kit (Books, Lapis, Enchanting Table)</option>
+                            <option value="farmer">Farmer Kit (Seeds, Hoe, Bone Meal)</option>
+                            <option value="nether">Nether Survival Kit (Fire Resistance, Obsidian)</option>
+                            <option value="end">End Prep Kit (Ender Pearls, Blaze Rods)</option>
+                        </select>
+                    </div>
+                    <div id="customGiveFields" class="hidden mb-4">
+                        <div id="itemList" class="space-y-2"></div>
+                        <button type="button" id="addItemBtn" class="btn-minecraft mt-2">Add Item</button>
+                    </div>
+                    <button type="submit" class="btn-minecraft w-full">Give</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="teleportModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Teleport <span id="teleportPlayerName"></span></h2>
+                <form id="teleportForm">
+                    <div class="mb-4">
+                        <label for="teleportDestination" class="block text-sm font-medium mb-1">Select Destination
+                            Player</label>
+                        <select id="teleportDestination"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                            <!-- Options populated dynamically -->
+                        </select>
+                    </div>
+                    <button type="submit" class="btn-minecraft w-full">Teleport</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="effectModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Apply Effect to <span id="effectPlayerName"></span></h2>
+                <form id="effectForm">
+                    <div class="mb-4">
+                        <label for="effectSelect" class="block text-sm font-medium mb-1">Select Effect</label>
+                        <select id="effectSelect"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                            <option value="speed:30:1">Speed (30s, Level 1)</option>
+                            <option value="strength:30:1">Strength (30s, Level 1)</option>
+                            <option value="regeneration:30:1">Regeneration (30s, Level 1)</option>
+                            <option value="jump_boost:30:1">Jump Boost (30s, Level 1)</option>
+                            <option value="invisibility:30:1">Invisibility (30s, Level 1)</option>
+                            <option value="night_vision:60:1">Night Vision (60s, Level 1)</option>
+                            <option value="fire_resistance:60:1">Fire Resistance (60s, Level 1)</option>
+                            <option value="water_breathing:60:1">Water Breathing (60s, Level 1)</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="btn-minecraft w-full">Apply Effect</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="editPropertiesModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Edit server.properties</h2>
+                <form id="editPropertiesForm" class="space-y-4">
+                    <div id="propertiesFields" class="space-y-2"></div>
+                    <button type="submit" class="btn-minecraft w-full">Save</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="updateModsModal" class="modal hidden">
+            <div class="modal-content flex flex-col">
+                <div class="flex justify-between items-center p-4 border-b border-[rgba(255,255,255,0.12)]">
+                    <h2 class="text-xl minecraft-font">Mod Update Output</h2>
+                    <button class="modal-close text-2xl">×</button>
+                </div>
+                <pre id="updateModsOutput"
+                    class="flex-1 p-4 text-[#e0e7ff] text-sm max-h-[calc(95vh-10rem)] overflow-y-auto overflow-x-auto whitespace-pre-wrap break-words leading-relaxed"></pre>
+                <div class="p-4 border-t border-[rgba(255,255,255,0.12)]">
+                    <button id="closeUpdateModsBtn" class="btn-minecraft w-full">Close</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <main id="mainContent" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-2">
+            <div class="section-bg p-6 sm:p-8 mb-8" data-section="server-status">
+                <div class="flex flex-col space-y-2 mb-4">
+                    <div class="flex justify-between items-center">
+                        <h2 class="text-3xl minecraft-font">Server Status</h2>
+                        <div class="flex space-x-2">
+                            <button id="startBtn" class="control-btn">Start</button>
+                            <button id="stopBtn" class="control-btn">Stop</button>
+                            <button id="restartBtn" class="control-btn">Restart</button>
+                        </div>
+                    </div>
+                    <div class="flex justify-end space-x-2">
+                        <button id="editPropertiesBtn" class="control-btn">Edit Server Properties</button>
+                        <button id="updateModsBtn" class="control-btn">Update Mods</button>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="flex flex-col space-y-1">
+                        <p><strong>User:</strong> <span id="user">Loading...</span></p>
+                        <p><strong>Key Expiry:</strong> <span id="keyExpiry">Loading...</span></p>
+                        <p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p>
+                    </div>
+                    <div class="flex space-x-4 justify-center items-start">
+                        <div class="text-center">
+                            <canvas id="memoryMeter" width="120" height="120"></canvas>
+                            <p class="text-sm mt-1"><b>Memory Usage</b></p>
+                            <p id="memoryPercent" class="text-lg font-bold">0%</p>
+                        </div>
+                        <div class="text-center">
+                            <canvas id="cpuMeter" width="120" height="120"></canvas>
+                            <p class="text-sm mt-1"><b>CPU Usage</b></p>
+                            <p id="cpuPercent" class="text-lg font-bold">0%</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        
+            
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Player Management</h2>
+                <p><strong>Connected Players:</strong><br> <span id="playerList">Loading...</span></p>
+            </div>
+
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Server Logs</h2>
+                <div id="dockerLogsTerminal" class="mt-4"></div>
+            </div>
+
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Server Console</h2>
+                <form id="consoleForm" onsubmit="event.preventDefault(); sendConsoleCommand();">
+                    <input id="consoleInput" type="text" placeholder="Enter RCON Command (Hit Enter To Submit)"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full mb-2 border border-[rgba(255,255,255,0.15)]">
+                    <button id="sendConsole" type="submit" class="btn-minecraft" style="display: none;">Send</button>
+                </form>
+                <pre id="consoleOutput"
+                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-4 rounded mt-4 h-48 overflow-y-auto border border-[rgba(255,255,255,0.15)]"></pre>
+            </div>
+
+            <div class="section-bg mb-12" id="sftpBrowserSection" style="display: none;">
+                <div class="flex justify-between items-baseline mb-4">
+                    <h2 class="text-3xl minecraft-font">SFTP Browser</h2>
+                    <button id="sftpBtn" class="control-btn text-sm flex items-center space-x-1">
+                        <i class="fas fa-sync-alt"></i>
+                        <span>Refresh SFTP</span>
+                    </button>
+                </div>
+                <iframe id="sftpIframe" class="w-full rounded" allow="clipboard-read; clipboard-write"></iframe>
+            </div>
+
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Mod Management</h2>
+                <form id="modSearchForm" onsubmit="event.preventDefault(); searchMods(1);">
+                    <div class="mb-4 flex space-x-2">
+                        <input id="modSearch" type="text" placeholder="Search Mods (Hit Enter To Submit)"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white flex-grow border border-[rgba(255,255,255,0.15)]">
+                        <button id="searchBtn" type="submit" class="btn-minecraft"
+                            style="display: none;">Search</button>
+                        <button id="closeSearchBtn" type="button" class="btn-minecraft hidden">Close</button>
+                    </div>
+                </form>
+                <div id="modResults" class="grid grid-cols-1 md:grid-cols-2 gap-6"></div>
+                <div id="pagination" class="mt-4 flex justify-center space-x-2"></div>
+                <h3 class="text-xl minecraft-font mt-4">Installed Mods</h3>
+                <div class="mb-4 flex space-x-2">
+                    <input id="modListSearch" type="text" placeholder="Search Installed Mods"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white flex-grow border border-[rgba(255,255,255,0.15)]">
+                    <button id="clearModListSearch" type="button" class="btn-minecraft hidden">Clear</button>
+                </div>
+                <div id="modList" class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-6"></div>
+                <div id="modListPagination" class="mt-4 flex justify-center space-x-2"></div>
+            </div>
+
+            <div class="section-bg mb-12 p-8 rounded-lg">
+                <h2 class="text-3xl minecraft-font mb-10 font-bold text-white">Server Links</h2>
+                <div class="flex flex-wrap gap-6 mb-6">
+                    <!-- Connection Link Card -->
+                    <div class="bg-gray-800/40 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-xl minecraft-font font-semibold text-white mb-3">Connection Link</h3>
+                        <p class="text-gray-300 mb-4 break-all">
+                            <span id="myLink" class="text-blue-400">Link Not Created</span>
+                            <span id="connectionStatus" class="text-sm"></span>
+                        </p>
+                        <button id="generateMyLinkBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors">
+                            Generate Connection Link
+                        </button>
+                    </div>
+            
+                    <!-- Geyser Link Card -->
+                    <div class="bg-gray-800/40 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-xl minecraft-font font-semibold text-white mb-3">Geyser Link</h3>
+                        <p class="text-gray-300 mb-4 break-all">
+                            <span id="geyserLink" class="text-blue-400">Link Not Created</span>
+                            <span id="geyserStatus" class="text-sm"></span>
+                        </p>
+                        <button id="generateGeyserLinkBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors">
+                            Generate Geyser Link
+                        </button>
+                    </div>
+            
+                    <!-- SFTP Link Card -->
+                    <div class="bg-gray-800/40 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-xl minecraft-font font-semibold text-white mb-3">SFTP Link</h3>
+                        <p class="text-gray-300 mb-4 break-all">
+                            <span id="sftpLink" class="text-blue-400">Link Not Created</span>
+                            <span id="sftpStatus" class="text-sm"></span>
+                        </p>
+                        <button id="generateSftpLinkBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors">
+                            Generate SFTP Link
+                        </button>
+                    </div>
+                </div>
+            
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Advanced Log URL Card -->
+                    <div class="bg-gray-800/40 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                        <h3 class="text-xl minecraft-font font-semibold text-white mb-3">Advanced Log</h3>
+                        <p class="text-gray-300 mb-4 break-all">
+                            <a id="logUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
+                        </p>
+                    </div>
+            
+                    <!-- Website URL Card -->
+                    <div class="bg-gray-800/40 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                        <h3 class="text-xl minecraft-font font-semibold text-white mb-3">Website</h3>
+                        <p class="text-gray-300 mb-4 break-all">
+                            <a id="websiteUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
+                        </p>
+                    </div>
+            
+                    <!-- BlueMap URL Card -->
+                    <div class="bg-gray-800/40 p-6 rounded-xl shadow-md hover:shadow-lg transition-shadow">
+                        <h3 class="text-xl minecraft-font font-semibold text-white mb-3">BlueMap</h3>
+                        <p class="text-gray-300 mb-4 break-all">
+                            <a id="mapUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Holesail Keys Section -->
+            <div class="section-bg mb-12">
+                <div class="flex items-center justify-between mb-4 flex-wrap">
+                    <h2 class="text-3xl minecraft-font">Holesail Keys</h2>
+                    <button id="toggleTutorial"
+                        class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200 md:mt-0 mt-2">Tutorial</button>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                    <div class="flex items-center p-4">
+                        <div class="flex-grow">
+                            <p><strong>Minecraft Key:</strong></p>
+                            <p class="break-all" id="holesailHash">Not Loaded</p>
+                            <p class="text-sm">Port: 127.0.0.1:25565</p>
+                        </div>
+                        <button class="copy-key-btn ml-2" data-key-id="holesailHash" data-key-type="Minecraft"
+                            title="Copy">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                                </path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class=" flex items-center p-4">
+                        <div class="flex-grow">
+                            <p><strong>Geyser Key:</strong></p>
+                            <p class="break-all" id="geyserHash">Not Loaded</p>
+                            <p class="text-sm">Port: 127.0.0.1:19132</p>
+                        </div>
+                        <button class="copy-key-btn ml-2" data-key-id="geyserHash" data-key-type="Geyser" title="Copy">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                                </path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="flex items-center p-4">
+                        <div class="flex-grow">
+                            <p><strong>SFTP Key:</strong></p>
+                            <p class="break-all" id="sftpHash">Not Loaded</p>
+                            <p class="text-sm">Port: 127.0.0.1:22</p>
+                        </div>
+                        <button class="copy-key-btn ml-2" data-key-id="sftpHash" data-key-type="SFTP" title="Copy">
+                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                                </path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div id="tutorialSection" class="hidden">
+                    <div class="feature-card tilt-card p-6 mb-6">
+                        <h3 class="text-xl minecraft-font mb-4">What is Holesail.io?</h3>
+                        <p class="text-base leading-relaxed mb-4">
+                            <a href="https://holesail.io" target="_blank"
+                                class="text-teal-400 hover:text-blue-400">Holesail.io</a> is an open-source,
+                            peer-to-peer networking tool that creates secure, encrypted tunnels that bypass network
+                            restrictions, firewalls, and NAT. It exposes your local network to the internet without
+                            needing port forwarding, static IPs, or Dynamic DNS, acting as a versatile tunneling and
+                            reverse proxy solution.
+                        </p>
+                        <div class="mb-4">
+                            <p class="font-semibold mb-2">With Holesail, you can:</p>
+                            <ul class="list-disc pl-6 space-y-1 text-base">
+                                <li>Access machines over the internet securely.</li>
+                                <li>Share locally running servers, websites, or AI models with other ports/services.
+                                </li>
+                                <li>Transfer files and folders remotely without bandwidth or size limits.</li>
+                                <li>Play LAN games like Minecraft with friends remotely.</li>
+                                <li>Secure SSH servers by blocking IP access and using Holesail for connections.</li>
+                                <li>Built for ANY application, Holesail supports both the TCP and UDP Protocols
+                                    natively.</li>
+                                <li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your
+                                    entire local network.</li>
+                            </ul>
+                        </div>
+                        <p class="text-base leading-relaxed">
+                            Built with security in mind, Holesail ensures all data is encrypted and never touches
+                            third-party servers. Connections are truly peer-to-peer, accessible only to those with whom
+                            you share your private key, providing both ease of use and robust security. Other peers
+                            cannot detect your activity or services. As an open-source tool, Holesail enables
+                            third-party services to integrate it, enhancing their security and connectivity.
+                        </p>
+                        <p class="text-base leading-relaxed mt-4">
+                            Your Public My-MC Ports are Holesail connections hosted on a separate server, not our
+                            Minecraft host. They use the same keys from the tutorial below. We hook 'em up at our jump
+                            host to go public.
+                        </p>
+                    </div>
+
+                    <div class="feature-card tilt-card p-6 mb-6">
+                        <h3 class="text-xl minecraft-font mb-4">How to Use Holesail Keys</h3>
+                        <ol class="list-decimal list-inside space-y-2">
+                            <li>Ensure <a href="https://nodejs.org/" target="_blank"
+                                    class="text-teal-400 hover:text-blue-400">Node.js</a> is installed on your system.
+                            </li>
+                            <li>Install Holesail by running:
+                                <pre
+                                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">npm i holesail@2.1.0</pre>
+                            </li>
+                            <li>Connect to a key using the appropriate command:
+                                <ul class="list-disc list-inside ml-4 mt-1">
+                                    <li>For Minecraft Key (e.g., Minecraft server):
+                                        <pre
+                                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHash">Not Loaded</span></pre>
+                                    </li>
+                                    <li>For Geyser key (e.g., cross-platform Minecraft):
+                                        <pre
+                                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialGeyserHash">Not Loaded</span></pre>
+                                    </li>
+                                    <li>For SFTP key (e.g., file transfer):
+                                        <pre
+                                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialSftpHash">Not Loaded</span></pre>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example
+                                output for your Minecraft server:
+                                <pre
+                                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">
+~ ❯ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span>
+┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+|                                                                                                                       |
+|                                                                                                                       |
+|                                            Holesail TCP Client Started ⛵️                                             |
+|                                      Connection Mode: Private Connection String                                       |
+|                                     Access application on http://127.0.0.1:25565/                                     |
+|                              Connected to key: <span id="tutorialHolesailHashOutput2">Not Loaded</span>                              |
+|   NOTE: TREAT PRIVATE CONNECTION STRINGS HOW YOU WOULD TREAT SSH KEY, DO NOT SHARE IT WITH ANYONE YOU DO NOT TRUST    |
+|                                                                                                                       |
+|                                                                                                                       |
+|                                                                                                                       |
+└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
                 </pre>
-              </li>
-              <BR>Now you can connect to your own localhost within Minecraft!<BR><BR>Connect to:
-                <code class="bg-gray-800 px-1 rounded">127.0.0.1:25565</code><BR><BR>
-              <li>To share the port over your internet IP as an open port, add the <code
-                  class="bg-gray-800 px-1 rounded">--host 0.0.0.0</code> switch:
-                <pre
-                  class="bg-gray-800 p-2 rounded mt-1 text-sm">holesail <span id="tutorialHolesailHashHost">Not Loaded</span> --host 0.0.0.0</pre><BR>
-                  Note: Using the --host 0.0.0.0 method will require you open your port within your router in order to serve the port from your IP Address remotely.
-              </li>
-            </ol>
-          </div>
+                            </li>
+                            <li>Now you can connect to your own localhost within Minecraft!<br>Connect to:
+                                <code
+                                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">127.0.0.1:25565</code><br><br>
+                            </li>
+                            <li>To share the port over your internet IP as an open port, add the <code
+                                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">--host 0.0.0.0</code>
+                                switch:
+                                <pre
+                                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHashHost">Not Loaded</span> --host 0.0.0.0</pre>
+                                <br>Note: Using the --host 0.0.0.0 method will require you open your port within your
+                                router in order to serve the port from your IP Address remotely.
+                            </li>
+                        </ol>
+                    </div>
 
-          <div class="bg-gray-700 p-4 rounded-md">
-            <h3 class="text-lg font-semibold mb-3 text-white">Share with Friends</h3>
-            <p class="text-gray-300 mb-3">
-              Share this tutorial with your friends so they can connect to your Minecraft server or other services on
-              their own localhosts!<BR>With Holesail, no public IPs are needed! Everything stays secure and
-              peer-to-peer!
+                    <div class="feature-card tilt-card p-6">
+                        <h3 class="text-xl minecraft-font mb-4">Share with Friends</h3>
+                        <p class="mb-3">
+                            Share this tutorial with your friends so they can connect to your Minecraft server or other
+                            services on their own localhosts! With Holesail, no public IPs are needed! Everything stays
+                            secure and peer-to-peer!
+                        </p>
+                        <button id="copyTutorial" class="btn-minecraft">Copy Tutorial</button>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="bg-[rgba(10,17,40,0.75)] backdrop-filter backdrop-blur-xl py-8 text-center relative z-2">
+            <p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>
+            <p class="text-sm opacity-90 mt-3">
+                Powered by <a href="https://holesail.io" class="underline text-teal-400 hover:text-blue-400"
+                    target="_blank">Holesail</a> with services
+                donated by <a href="https://raven-scott.fyi"
+                    class="underline text-teal-400 hover:text-blue-400">SNXRaven</a> |
+                <a href="https://git.ssh.surf/hypermc/panel" class="underline text-teal-400 hover:text-blue-400"
+                    target="_blank">Source Code</a>
             </p>
-            <button id="copyTutorial"
-              class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-200">Copy
-              Tutorial</button>
-          </div>
-        </div>
-
-      </div>
-
-    </main>
-
-    <footer class="bg-gray-800 py-4">
-      <div class="container mx-auto px-6 text-center">
-        <p class="text-gray-400 text-sm">
-          © 2025 My-MC.Link. All rights reserved.<br>
-          <a href="https://raven-scott.fyi" target="_blank" class="text-blue-400 hover:text-blue-500">Made with ❤️ by
-            SNXRaven</a> | <a href="https://git.ssh.surf/hypermc/panel" target="_blank"
-            class="text-blue-400 hover:text-blue-500">Source Code</a>
-        </p>
-      </div>
-    </footer>
-  </div>
-
-  <script src="js/app.js"></script>
-  <script src="js/tutorial.js"></script>
+        </footer>
 
+        <script src="js/app_test.js"></script>
+        <script src="js/tutorial.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 6b36a89..9f03949 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -28,6 +28,137 @@ document.addEventListener('DOMContentLoaded', () => {
     'enable-status'
   ];
 
+  const sections = document.querySelectorAll('.section-bg');
+  const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry, index) => {
+          if (entry.isIntersecting) {
+              entry.target.style.transform = 'translateY(0)';
+              entry.target.style.opacity = '1';
+              entry.target.style.transitionDelay = `${index * 0.1}s`;
+          }
+      });
+  }, { threshold: 0.1 });
+  
+  // sections.forEach(section => {
+  //     section.style.transform = 'translateY(30px)';
+  //     section.style.opacity = '0';
+  //     section.style.transition = 'transform 0.7s ease-out, opacity 0.7s ease-out';
+  //     observer.observe(section);
+  // });
+  
+  // const PARTICLE_POOL_SIZE = 50;
+  // const particlePool = [];
+  // const activeParticles = new Set();
+  
+  // function createParticleElement() {
+  //     const particle = document.createElement('div');
+  //     particle.classList.add('particle');
+  //     if (Math.random() > 0.6) particle.classList.add('large');
+  //     return particle;
+  // }
+  
+  // function initializeParticlePool() {
+  //     for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
+  //         particlePool.push(createParticleElement());
+  //     }
+  // }
+  
+  // function resetParticle(particle) {
+  //     particle.style.left = `${Math.random() * 100}%`;
+  //     particle.style.top = `${Math.random() * 100}%`;
+  //     particle.style.animationDelay = `${Math.random() * 8}s`;
+  //     particle.style.animationDuration = `${8 + Math.random() * 6}s`;
+  //     particle.classList.remove('fade-out');
+  //     return particle;
+  // }
+  
+  // function spawnParticle() {
+  //     if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
+  
+  //     const particle = resetParticle(particlePool.pop());
+  //     if (!particle.parentNode) document.body.appendChild(particle);
+  //     activeParticles.add(particle);
+  
+  //     setTimeout(() => {
+  //         particle.classList.add('fade-out');
+  //         setTimeout(() => {
+  //             activeParticles.delete(particle);
+  //             particlePool.push(particle);
+  //         }, 500);
+  //     }, 14000);
+  // }
+  
+  // function animate() {
+  //     if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
+  //     requestAnimationFrame(animate);
+  // }
+  
+  // // Initialize and start
+  // setTimeout(() => {
+  //     initializeParticlePool();
+  //     animate();
+  // }, 500);
+  
+  function throttle(fn, wait) {
+      let lastTime = 0;
+      return function (...args) {
+          const now = Date.now();
+          if (now - lastTime >= wait) {
+              fn.apply(this, args);
+              lastTime = now;
+          }
+      };
+  }
+  
+
+  
+  
+  // const buttons = document.querySelectorAll('.btn-minecraft');
+  // buttons.forEach(button => {
+  //     button.addEventListener('mousemove', (e) => {
+  //         const rect = button.getBoundingClientRect();
+  //         const x = e.clientX - rect.left;
+  //         const y = e.clientY - rect.top;
+  //         button.style.setProperty('--x', `${x}px`);
+  //         button.style.setProperty('--y', `${y}px`);
+  //     });
+  // });
+  
+  // Hamburger Menu Toggle
+  const hamburger = document.querySelector('.hamburger');
+  const mobileNav = document.querySelector('[data-mobile-nav]');
+  const navLinks = mobileNav.querySelectorAll('a');
+  
+  // Debounce function to prevent rapid clicks
+  function debounce(fn, wait) {
+      let timeout;
+      return function (...args) {
+          clearTimeout(timeout);
+          timeout = setTimeout(() => fn.apply(this, args), wait);
+      };
+  }
+  
+  hamburger.addEventListener('click', debounce(() => {
+      console.log('Hamburger clicked, toggling menu');
+      mobileNav.classList.toggle('active');
+      hamburger.classList.toggle('active');
+  }, 100));
+  
+  navLinks.forEach(link => {
+      link.addEventListener('click', () => {
+          console.log('Nav link clicked, closing menu');
+          mobileNav.classList.remove('active');
+          hamburger.classList.remove('active');
+      });
+  });
+  
+  document.addEventListener('click', (e) => {
+      if (!mobileNav.contains(e.target) && !hamburger.contains(e.target) && mobileNav.classList.contains('active')) {
+          console.log('Clicked outside, closing menu');
+          mobileNav.classList.remove('active');
+          hamburger.classList.remove('active');
+      }
+  });
   const elements = {
     loginPage: document.getElementById('loginPage'),
     loginApiKey: document.getElementById('loginApiKey'),
@@ -321,7 +452,7 @@ document.addEventListener('DOMContentLoaded', () => {
       terminal.clear();
     } else {
       terminal = new Terminal({
-        rows: 8,
+        rows: 22,
         fontSize: 14,
         fontFamily: 'monospace',
         theme: {
@@ -1038,9 +1169,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     elements.loginPage.classList.remove('hidden');
     elements.mainContent.classList.add('hidden');
-    elements.authControls.innerHTML = '<input id="apiKey" type="text" placeholder="Enter API Key" class="bg-gray-700 px-4 py-2 rounded text-white">';
     elements.apiKeyInput = document.getElementById('apiKey');
-    elements.apiKeyInput.addEventListener('change', handleApiKeyChange);
     if (ws) {
       ws.close();
       ws = null;
@@ -1069,13 +1198,35 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     elements.loginPage.classList.add('hidden');
     elements.mainContent.classList.remove('hidden');
-    elements.authControls.innerHTML = '<button id="logoutBtn" class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded">Logout</button>';
-    const logoutBtn = document.getElementById('logoutBtn');
-    if (logoutBtn) {
-      logoutBtn.addEventListener('click', handleLogout);
-    } else {
-      console.error('Logout button not found after insertion');
-    }
+     // Verify buttons exist
+     const logoutBtn = document.getElementById('logoutBtn');
+     const mobileLogoutBtn = document.getElementById('mobileLogoutBtn');
+ 
+     if (logoutBtn) {
+       console.log('Desktop logout button found');
+     } else {
+       console.error('Desktop logout button (#logoutBtn) not found');
+     }
+ 
+     if (mobileLogoutBtn) {
+       console.log('Mobile logout button found');
+     } else {
+       console.error('Mobile logout button (#mobileLogoutBtn) not found');
+     }
+ 
+     // Remove any existing logout listeners to prevent duplicates
+     document.removeEventListener('click', handleLogoutClick);
+ 
+     // Event delegation for logout buttons
+     function handleLogoutClick(event) {
+       if (event.target.id === 'logoutBtn' || event.target.id === 'mobileLogoutBtn') {
+         console.log(`Logout button clicked: ${event.target.id}`);
+         handleLogout();
+       }
+     }
+ 
+     document.addEventListener('click', handleLogoutClick);
+ 
     initializeCharts();
     initializeTerminal();
   }
@@ -1095,6 +1246,18 @@ document.addEventListener('DOMContentLoaded', () => {
     showLoginPage();
   }
 
+  async function handleRefresh() {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      const key = `action-refresh`;
+      const notification = showNotification('Refreshing server data...', 'loading', key);
+      ws.send(JSON.stringify({ type: 'refresh' }));
+      initializeTerminal();
+      setTimeout(() => updateNotification(notification, 'Server data refreshed successfully', 'success', key), 1000);
+    } else {
+      showNotification('Not connected to server. Please log in.', 'error', 'ws-disconnected');
+    }
+  }
+
   function updatePagination() {
     const totalPages = Math.max(1, Math.ceil(totalResults / resultsPerPage));
     elements.pagination.innerHTML = '';
@@ -1687,7 +1850,6 @@ document.addEventListener('DOMContentLoaded', () => {
         switchContainer.className = 'relative inline-block';
         switchContainer.setAttribute('role', 'switch');
         switchContainer.setAttribute('aria-checked', value.toLowerCase());
-        switchContainer.setAttribute('tabindex', '0');
         switchContainer.dataset.name = key;
         switchContainer.style.width = '40px';
         switchContainer.style.height = '24px';
@@ -1918,7 +2080,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  elements.apiKeyInput.addEventListener('change', handleApiKeyChange);
+  // elements.apiKeyInput.addEventListener('change', handleApiKeyChange);
 
   elements.generateMyLinkBtn.addEventListener('click', async () => {
     try {
@@ -2065,6 +2227,8 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  
+
   elements.updateModsBtn.addEventListener('click', updateMods);
 
   elements.closeUpdateModsBtn.addEventListener('click', () => {
@@ -2177,4 +2341,42 @@ document.addEventListener('DOMContentLoaded', () => {
     showLoginPage();
   }
   window.showNotification = showNotification;
+
+  // Add this at the end of the document.addEventListener('DOMContentLoaded', ...) block
+function applyResponsiveStyles() {
+  const sections = document.querySelectorAll('.section-bg');
+  sections.forEach(section => {
+    section.style.padding = window.innerWidth <= 640 ? '1rem' : window.innerWidth <= 768 ? '1.5rem' : '2rem';
+    section.style.maxWidth = '100%';
+    section.style.overflowX = 'hidden';
+  });
+
+  const iframes = document.querySelectorAll('#sftpIframe');
+  iframes.forEach(iframe => {
+    iframe.style.height = window.innerWidth <= 640 ? '300px' : window.innerWidth <= 768 ? '400px' : '650px';
+    iframe.style.minHeight = iframe.style.height;
+    iframe.style.width = '100%';
+    iframe.style.maxWidth = '100%';
+  });
+
+  const canvases = document.querySelectorAll('#memoryMeter, #cpuMeter');
+  canvases.forEach(canvas => {
+    canvas.style.width = window.innerWidth <= 640 ? '80px' : window.innerWidth <= 768 ? '100px' : '150px';
+    canvas.style.height = canvas.style.width;
+  });
+
+  const terminals = document.querySelectorAll('#dockerLogsTerminal');
+  terminals.forEach(terminal => {
+    terminal.style.maxHeight = window.innerWidth <= 640 ? '7rem' : window.innerWidth <= 768 ? '8rem' : '12rem';
+  });
+
+  const consoles = document.querySelectorAll('#consoleOutput');
+  consoles.forEach(console => {
+    console.style.height = window.innerWidth <= 640 ? '7rem' : window.innerWidth <= 768 ? '8rem' : '12rem';
+  });
+}
+
+window.addEventListener('resize', applyResponsiveStyles);
+
+
 });
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 6c81a2c..861f340 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
         './public/**/*.html',
         './public/**/*.js',
         './public/*.html',
+        './public/css/*.css',
         './public/*.js'
       ],
     theme: {