diff --git a/public/css/main-site.css b/public/css/main-site.css
deleted file mode 100644
index 7d27064..0000000
--- a/public/css/main-site.css
+++ /dev/null
@@ -1,1492 +0,0 @@
-/*! 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
deleted file mode 100644
index 6e98ba0..0000000
--- a/public/css/styles.css
+++ /dev/null
@@ -1,423 +0,0 @@
-@import "tailwindcss";
-
-@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 {
-    @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 bg-gray-900 text-white;
-    font-family: 'Roboto', 'Verdana', sans-serif;
-    overflow-x: hidden;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    @apply font-[Minecraft] text-white;
-    letter-spacing: 0.5px;
-  }
-
-  #app {
-    @apply flex-grow;
-  }
-
-  main {
-    @apply flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6;
-  }
-
-  footer {
-    @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 {
-  .section-bg {
-    @apply bg-gray-800 p-6 rounded-lg shadow-lg mb-6 w-full max-w-full;
-    overflow-x: hidden;
-  }
-
-  .modal {
-    @apply fixed inset-0 bg-black/75 flex items-center justify-center z-[1000];
-  }
-
-  .modal-content {
-    @apply bg-gray-800 p-6 rounded-lg w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
-    scrollbar-width: thin;
-    scrollbar-color: #4B5563 #1F2937;
-  }
-
-  @media (max-width: 640px) {
-    .holesail-output-mobile-hidden {
-      display: none;
-    }
-  }
-  
-
-  .modal-content::-webkit-scrollbar {
-    @apply w-2;
-  }
-
-  .modal-content::-webkit-scrollbar-track {
-    @apply bg-gray-800;
-  }
-
-  .modal-content::-webkit-scrollbar-thumb {
-    @apply bg-gray-600 rounded;
-  }
-
-  .modal-content::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500;
-  }
-
-  .modal-close {
-    @apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer;
-  }
-
-  .control-btn {
-    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded transition duration-200;
-  }
-
-  .spinner {
-    @apply border-4 border-gray-700 border-t-blue-600 rounded-full w-6 h-6 animate-spin inline-block;
-  }
-
-  @keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  #notificationContainer {
-    @apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-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;
-  }
-
-  .notification.success {
-    @apply bg-green-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-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;
-  }
-}
-
-.nav-btn {
-  @apply bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded transition duration-200;
-}
-
-.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;
-  }
-
-  .section-bg .flex {
-    @apply flex-col gap-2;
-  }
-
-  canvas {
-    @apply max-w-[120px];
-  }
-
-  .section-bg input,
-  .section-bg textarea,
-  .section-bg select {
-    @apply p-2 text-sm;
-  }
-
-  .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;
-  }
-}
-
-@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;
-  }
-}
-
diff --git a/public/css/styles.min.css b/public/css/styles.min.css
index 139b279..ea78bb7 100644
--- a/public/css/styles.min.css
+++ b/public/css/styles.min.css
@@ -1,5 +1,17 @@
 /*! 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 {
@@ -14,8 +26,6 @@
     --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);
@@ -40,9 +50,6 @@
     --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;
@@ -55,25 +62,15 @@
     --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);
@@ -241,9 +238,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .z-2 {
-    z-index: 2;
-  }
   .z-50 {
     z-index: 50;
   }
@@ -274,9 +268,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -286,9 +277,6 @@
   .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);
   }
@@ -301,15 +289,6 @@
   .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);
   }
@@ -331,15 +310,9 @@
   .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);
   }
@@ -367,12 +340,6 @@
   .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);
   }
@@ -382,18 +349,12 @@
   .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;
   }
@@ -433,9 +394,6 @@
   .items-center {
     align-items: center;
   }
-  .items-start {
-    align-items: flex-start;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -451,9 +409,6 @@
   .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;
@@ -532,24 +487,12 @@
     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);
   }
@@ -568,12 +511,6 @@
   .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);
   }
@@ -586,9 +523,6 @@
   .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);
   }
@@ -598,21 +532,6 @@
   .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);
   }
@@ -652,18 +571,9 @@
   .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);
   }
@@ -674,14 +584,6 @@
     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));
@@ -718,10 +620,6 @@
     --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;
   }
@@ -731,9 +629,6 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
-  .text-\[\#e0e7ff\] {
-    color: #e0e7ff;
-  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -752,85 +647,32 @@
   .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) {
@@ -887,37 +729,6 @@
       }
     }
   }
-  .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) {
@@ -946,20 +757,6 @@
       }
     }
   }
-  .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%;
@@ -970,36 +767,6 @@
       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%;
@@ -1020,111 +787,264 @@
       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;
-    color: var(--color-white);
-    letter-spacing: 0.5px;
+    font-family: 'Minecraft', sans-serif;
   }
   #app {
-    flex-grow: 1;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
   }
   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 {
-    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);
+    flex-shrink: 0;
   }
 }
 @layer components {
-  .section-bg {
-    margin-bottom: calc(var(--spacing) * 6);
-    width: 100%;
-    max-width: 100%;
+  .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);
     border-radius: var(--radius-lg);
     background-color: var(--color-gray-800);
-    padding: calc(var(--spacing) * 6);
+    padding: calc(var(--spacing) * 4);
+    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);
-    overflow-x: hidden;
+    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);
   }
   .modal {
     position: fixed;
@@ -1150,11 +1070,6 @@
     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);
   }
@@ -1180,181 +1095,25 @@
     line-height: var(--tw-leading, var(--text-xl--line-height));
     color: var(--color-white);
   }
-  .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 {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 50%;
   }
-  .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);
+  .disabled-btn:hover {
+    cursor: not-allowed;
   }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  #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: calc(var(--spacing) * 2);
-    color: var(--color-white);
-    @media (width >= 40rem) {
-      width: auto;
-    }
-  }
-  .item-entry .item-amount {
-    width: calc(var(--spacing) * 16);
-    @media (width >= 40rem) {
-      width: calc(var(--spacing) * 12);
-    }
-  }
-  [role="switch"] {
-    position: relative;
-    display: inline-block;
-    height: calc(var(--spacing) * 6);
-    width: calc(var(--spacing) * 10);
-    cursor: pointer;
-  }
-  [role="switch"] > div:first-child {
+  #searchContainer {
+    margin-bottom: calc(var(--spacing) * 4);
     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;
-  }
-  [role="switch"] > div:last-child {
-    position: absolute;
-    top: calc(var(--spacing) * 1);
-    height: calc(var(--spacing) * 4);
-    width: calc(var(--spacing) * 4);
-    border-radius: calc(infinity * 1px);
-    background-color: var(--color-white);
-    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;
-  }
-  [role="switch"][aria-checked="true"] > div:first-child {
-    background-color: var(--color-blue-600);
-  }
-  [role="switch"][aria-checked="true"] > div:last-child {
-    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 {
+    display: block;
     width: 100%;
     border-radius: 0.25rem;
     background-color: var(--color-gray-700);
-    padding: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
     color: var(--color-white);
   }
   #propertiesList {
@@ -1364,291 +1123,85 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-}
-.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);
-    }
+  [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 {
+    height: 100%;
+    width: 100%;
+    border-radius: calc(infinity * 1px);
+    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);
+    background-color: var(--color-white);
+    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;
+    --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);
+  }
+  [role="switch"][aria-checked="true"] > div:last-child {
+    left: calc(var(--spacing) * 6);
+  }
+  [role="switch"][aria-checked="false"] > div:last-child {
+    left: calc(var(--spacing) * 1);
   }
 }
-.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 {
+@layer utilities;
+@media (max-width: 640px) {
+  .bg-gray-800.p-6.rounded-lg.shadow-lg .grid {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
-  .section-bg .flex {
+  .bg-gray-800.p-6.rounded-lg.shadow-lg p {
+    display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 2);
+    word-break: break-all;
   }
-  canvas {
-    max-width: 120px;
+  .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;
   }
-  .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 {
+  .bg-gray-800.p-6.rounded-lg.shadow-lg button {
+    margin-top: calc(var(--spacing) * 2);
     width: 100%;
   }
-}
-@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));
+  .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: 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));
-  }
+.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%;
 }
 @property --tw-rotate-x {
   syntax: "*";
@@ -1685,48 +1238,6 @@
   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;
@@ -1735,10 +1246,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -1857,42 +1364,6 @@
   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;
@@ -1932,18 +1403,8 @@
       --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%;
@@ -1971,15 +1432,6 @@
       --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 78a1933..c1ad243 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,564 +2,472 @@
 <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">
-    <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>
+  <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">
 </head>
 
-<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>
+<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>
     </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>
 
-    <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>
+    <!-- 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>
             </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 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>
         </div>
-    </header>
+      </div>
 
-    <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 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>
+            <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="notificationContainer"></div>
-
-        <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>
-                            <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="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>
+        <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>
-        </footer>
+            <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 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    |
+              |                                                                                                                       |
+              |                                                                                                                       |
+              |                                                                                                                       |
+              └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+                </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>
+
+          <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!
+            </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>
 
-        <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 9f03949..6b36a89 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -28,137 +28,6 @@ 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'),
@@ -452,7 +321,7 @@ document.addEventListener('DOMContentLoaded', () => {
       terminal.clear();
     } else {
       terminal = new Terminal({
-        rows: 22,
+        rows: 8,
         fontSize: 14,
         fontFamily: 'monospace',
         theme: {
@@ -1169,7 +1038,9 @@ 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;
@@ -1198,35 +1069,13 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     elements.loginPage.classList.add('hidden');
     elements.mainContent.classList.remove('hidden');
-     // 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);
- 
+    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');
+    }
     initializeCharts();
     initializeTerminal();
   }
@@ -1246,18 +1095,6 @@ 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 = '';
@@ -1850,6 +1687,7 @@ 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';
@@ -2080,7 +1918,7 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  // elements.apiKeyInput.addEventListener('change', handleApiKeyChange);
+  elements.apiKeyInput.addEventListener('change', handleApiKeyChange);
 
   elements.generateMyLinkBtn.addEventListener('click', async () => {
     try {
@@ -2227,8 +2065,6 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
-  
-
   elements.updateModsBtn.addEventListener('click', updateMods);
 
   elements.closeUpdateModsBtn.addEventListener('click', () => {
@@ -2341,42 +2177,4 @@ 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/public/screenshots/panel.png b/public/screenshots/panel.png
index 7d9d5c1..7e5a9fe 100644
Binary files a/public/screenshots/panel.png and b/public/screenshots/panel.png differ