diff --git a/src/routes/acornmc/vote/index.tsx b/src/routes/acornmc/vote/index.tsx
index b8a0403d..81aec100 100644
--- a/src/routes/acornmc/vote/index.tsx
+++ b/src/routes/acornmc/vote/index.tsx
@@ -1,6 +1,5 @@
 import { component$, useVisibleTask$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import { LoadingIcon } from '@luminescent/ui-qwik';
 import Background from '~/components/images/background.png?jsx';
 
 export default component$(() => {
@@ -20,7 +19,7 @@ export default component$(() => {
       </h1>
       <h2 class="text-gray-400 text-base sm:text-2xl flex gap-2 items-center">
         Opening Links
-        <LoadingIcon width={24} class={{ 'ml-2': true }} />
+        <div class={{ 'lum-loading ml-2 w-6 h-6': true }} />
       </h2>
     </section>
   );
diff --git a/src/routes/resources/animtexture/index.tsx b/src/routes/resources/animtexture/index.tsx
index 595e4aa7..483ec0ce 100644
--- a/src/routes/resources/animtexture/index.tsx
+++ b/src/routes/resources/animtexture/index.tsx
@@ -1,7 +1,7 @@
 import { $, component$, useOn, useStore, useVisibleTask$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 
-import { Button, ButtonAnchor, TextInput, Toggle } from '@luminescent/ui-qwik';
+import { Toggle } from '@luminescent/ui-qwik';
 import {
   inlineTranslate,
   useSpeak,
@@ -62,8 +62,10 @@ export default component$(() => {
           {t('animtexture.subtitle@@Easily merge textures for resource pack animations')}
         </h2>
 
-        <label for="fileInput">Select Frame(s) or a GIF</label><br />
-        <input id="fileInput" type="file" multiple accept="image/*" class="text-white text-xl file:bg-gray-600 file:hover:bg-gray-500 file:rounded-lg file:cursor-pointer file:px-4 file:py-2 file:mr-4 mt-2 text-transparent file:text-white file:text-lg file:border-none" />
+        <div class="flex flex-col gap-2">
+          <label for="fileInput">Select Frame(s) or a GIF</label>
+          <input id="fileInput" type="file" multiple accept="image/*" class="file:lum-btn rounded-lg file:cursor-pointer flex" />
+        </div>
 
         <div id="imgs" class="flex flex-wrap max-h-[620px] overflow-auto my-4 gap-2">
           {store.frames.map((frame, i) => (
@@ -74,15 +76,14 @@ export default component$(() => {
           ))}
         </div>
 
-        <TextInput id="textureName" class={{ 'mb-3': true }} value={store.textureName} onInput$={(e, el) => { store.textureName = el.value; }}>
-          {t('animtexture.textureName@@Texture Name')}
-        </TextInput>
+        <label for="textureName">{t('animtexture.textureName@@Texture Name')}</label><br />
+        <input id="textureName" class={{ 'lum-input mb-3 mt-2': true }} value={store.textureName} onInput$={(e, el) => { store.textureName = el.value; }}/>
 
         <Toggle id="Cumulative" checked={store.cumulative}
           onChange$={(e, el) => { store.cumulative = el.checked; }}
           label={t('animtexture.cumulative@@Cumulative (Turn this on if gif frames are broken)')} />
 
-        <Button class={{ 'my-6': true }} onClick$={() => {
+        <button class={{ 'lum-btn my-6': true }} onClick$={() => {
           const canvas = document.getElementById('c') as HTMLCanvasElement;
           canvas.classList.add('sm:flex');
           const imglist = document.getElementById('imgs') as HTMLDivElement;
@@ -128,16 +129,18 @@ export default component$(() => {
           links.className = 'inline';
         }}>
           {t('animtexture.generate@@Generate')}
-        </Button>
+        </button>
 
         <div id="links" class="hidden">
           <p class="mb-4">Animated Texture Generated Successfully!</p>
-          <ButtonAnchor id="pngd" class={{ 'mr-2': true }} href='/'>
-            {t('animtexture.downloadPNG@@Download PNG')}
-          </ButtonAnchor>
-          <ButtonAnchor id="mcmeta" target="_blank" href='data:text/plain;charset=utf-8,{"animation":{}}'>
-            {t('animtexture.downloadMCMETA@@Download MCMETA')}
-          </ButtonAnchor>
+          <div class="flex gap-2">
+            <a class="lum-btn" id="pngd" href='/'>
+              {t('animtexture.downloadPNG@@Download PNG')}
+            </a>
+            <a class="lum-btn" id="mcmeta" target="_blank" href='data:text/plain;charset=utf-8,{"animation":{}}'>
+              {t('animtexture.downloadMCMETA@@Download MCMETA')}
+            </a>
+          </div>
         </div>
 
       </div>
diff --git a/src/routes/resources/flags/index.tsx b/src/routes/resources/flags/index.tsx
index 9c7a3b4e..4a0207a3 100644
--- a/src/routes/resources/flags/index.tsx
+++ b/src/routes/resources/flags/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable qwik/valid-lexical-scope */
 import { component$, useStore, useTask$ } from '@builder.io/qwik';
 import { routeLoader$, type DocumentHead } from '@builder.io/qwik-city';
-import { Header, Dropdown, TextArea, TextInput, Toggle, DropdownRaw, ButtonAnchor } from '@luminescent/ui-qwik';
+import { Dropdown, Toggle, DropdownRaw } from '@luminescent/ui-qwik';
 import { CodeWorkingOutline, CubeOutline, HelpOutline, RefreshCircleOutline, TerminalOutline } from 'qwik-ionicons';
 import { inlineTranslate, useSpeak } from 'qwik-speak';
 import { getCookies, setCookies } from '~/components/util/SharedUtils';
@@ -140,7 +140,7 @@ export default component$(() => {
   }, { deep: true });
 
   useTask$(({ track }) => {
-    isBrowser && setCookies('parsed', store);
+    if (isBrowser) setCookies('parsed', store);
     (Object.keys(store) as Array<keyof typeof store>).forEach((key) => {
       track(() => store[key]);
     });
@@ -158,14 +158,17 @@ export default component$(() => {
 
         <div class="flex [&>*]:flex-1 flex-wrap gap-4 justify-between my-6 fill-current">
           <div class="flex flex-col gap-4">
-            <TextInput id="input" value={store.fileName} placeholder="server.jar" onChange$={(e, el) => {
-              if (el.value.replace(/ /g, '') == '') return;
-              if (!el.value.endsWith('.jar')) { el.value += '.jar'; }
-              store.fileName = el.value;
-            }}>
-              <span class="font-bold">{t('flags.fileName.label@@File Name')}</span><br/>
-              {t('flags.fileName.description@@The name of the file that will be used to start your server.')}
-            </TextInput>
+            <div class="flex flex-col gap-1">
+              <label for="input">
+                <span class="font-bold">{t('flags.fileName.label@@File Name')}</span><br/>
+                {t('flags.fileName.description@@The name of the file that will be used to start your server.')}
+              </label>
+              <input class="lum-input" id="input" value={store.fileName} placeholder="server.jar" onChange$={(e, el) => {
+                if (el.value.replace(/ /g, '') == '') return;
+                if (!el.value.endsWith('.jar')) { el.value += '.jar'; }
+                store.fileName = el.value;
+              }}/>
+            </div>
             <div class="flex gap-2">
               <Dropdown id="os" class={{ 'w-full': true }} onChange$={(e, el) => {
                 store.operatingSystem = el.value;
@@ -186,8 +189,8 @@ export default component$(() => {
             <div>
               <span class="font-bold">{t('memory.label@@Memory')}</span><br/>
               {t('flags.memory.description@@The amount of memory (RAM) to allocate to your server.')}
-              <div class="group relative w-full h-2 bg-gray-800 hover:bg-gray-700 select-none rounded-lg my-2">
-                <div class="h-2 bg-blue-800 group-hover:bg-blue-700 rounded-lg" style={{ width: `${store.memory / 32 * 100}%` }} />
+              <div class="group relative w-full h-2 lum-bg-gray-800 hover:lum-bg-gray-700 select-none rounded-lg my-2">
+                <div class="h-2 lum-bg-blue-800 group-hover:lum-bg-blue-700 rounded-lg" style={{ width: `${store.memory / 32 * 100}%` }} />
                 <div class="absolute w-full top-1 flex justify-between">
                   <span class="text-left">|</span>
                   <span class="text-center">|</span>
@@ -196,7 +199,7 @@ export default component$(() => {
                   <span class="text-right">|</span>
                 </div>
                 <div class="absolute -top-1 flex flex-col gap-4 items-center" style={{ left: `calc(${store.memory / 32 * 100}% - 48px)` }}>
-                  <div class="w-4 h-4 bg-blue-700 group-hover:bg-blue-600 rounded-full" />
+                  <div class="w-4 h-4 lum-bg-blue-700 group-hover:lum-bg-blue-600 rounded-full" />
                   <div class="opacity-0 group-hover:opacity-100 w-24 py-2 bg-gray-800 rounded-lg flex justify-center transition-all z-50">
                     {store.memory} GB
                   </div>
@@ -221,18 +224,18 @@ export default component$(() => {
               <DropdownRaw id="flagshelp" onChange$={(e, el) => {
                 store.flags = el.value as keyof typeof flagTypes;
               }} display={<><HelpOutline width={24}/></>}>
-                <ButtonAnchor q:slot='extra-buttons' transparent href="https://docs.papermc.io/paper/aikars-flags" target="_blank">
+                <a class="lum-btn lum-bg-transparent" q:slot='extra-buttons' href="https://docs.papermc.io/paper/aikars-flags" target="_blank">
                   Aikar's Flags
-                </ButtonAnchor>
-                <ButtonAnchor q:slot='extra-buttons' transparent href="https://github.com/brucethemoose/Minecraft-Performance-Flags-Benchmarks" target="_blank">
+                </a>
+                <a class="lum-btn lum-bg-transparent" href="https://github.com/brucethemoose/Minecraft-Performance-Flags-Benchmarks" target="_blank">
                   Benchmarked Flags
-                </ButtonAnchor>
-                <ButtonAnchor q:slot='extra-buttons' transparent href="https://github.com/hilltty/hilltty-flags/blob/main/english-lang.md" target="_blank">
+                </a>
+                <a class="lum-btn lum-bg-transparent" href="https://github.com/hilltty/hilltty-flags/blob/main/english-lang.md" target="_blank">
                   hilltty's Flags
-                </ButtonAnchor>
-                <ButtonAnchor q:slot='extra-buttons' transparent href="https://github.com/Obydux/Minecraft-GraalVM-Flags" target="_blank">
+                </a>
+                <a class="lum-btn lum-bg-transparent" href="https://github.com/Obydux/Minecraft-GraalVM-Flags" target="_blank">
                   Obydux's Flags
-                </ButtonAnchor>
+                </a>
               </DropdownRaw>
             </div>
             <div class="flex flex-col gap-2">
@@ -265,11 +268,11 @@ export default component$(() => {
         </div>
 
         {/* charlimit={256} */}
-        <TextArea output class={{ 'h-96 mt-2': true }} id="Output" value={((p: any) => generateResult(p).script)(store)}>
-          <Header subheader={t('flags.script.description@@The resulting script that can be used to start your server. Place this file in the same location as {{fileName}}, then execute it!', { fileName: store.fileName })}>
-            {t('flags.script.label@@Script')}
-          </Header>
-        </TextArea>
+        <label for="Output" class="text-gray-50">
+          <span class="font-bold">{t('flags.script.label@@Script')}</span><br/>
+          {t('flags.script.description@@The resulting script that can be used to start your server. Place this file in the same location as {{fileName}}, then execute it!', { fileName: store.fileName })}
+        </label>
+        <textarea class={{ 'lum-input h-96 font-mono mt-2 w-full': true }} id="Output" value={((p: any) => generateResult(p).script)(store)}/>
       </div>
     </section>
   );
diff --git a/src/routes/resources/jars/index.tsx b/src/routes/resources/jars/index.tsx
index fef71997..47eef29e 100644
--- a/src/routes/resources/jars/index.tsx
+++ b/src/routes/resources/jars/index.tsx
@@ -1,6 +1,6 @@
 import { component$, useStore, useSignal } from '@builder.io/qwik';
-import { Card, Header, TextInput, ButtonAnchor, Button } from '@luminescent/ui-qwik';
-import { CloseOutline } from 'qwik-ionicons';
+import { Header } from '@luminescent/ui-qwik';
+import { CloseOutline, DownloadOutline } from 'qwik-ionicons';
 
 async function fetchLatestPurpurVersion() {
   const response = await fetch('https://api.purpurmc.org/v2/purpur');
@@ -89,7 +89,8 @@ export default component$(() => {
       <div class="w-full max-w-2xl flex flex-col items-center space-y-4 p-4">
         <h1 class="text-3xl font-bold mb-4 text-center">Jarflop - The Minecraft Server Jar Hub!</h1>
         <div class="w-full mb-6">
-          <TextInput
+          <input
+            class="lum-input w-full"
             id="search-input"
             placeholder="Search for a version..."
             value={store.searchTerm}
@@ -103,7 +104,7 @@ export default component$(() => {
           >
             {filteredJars.length > 0 ? (
               filteredJars.map((jar, index) => (
-                <Card key={index} hover="clickable" onClick$={async () => {
+                <button class="lum-card lum-bg-gray-800/40 hover:lum-bg-gray-800 w-full transition duration-1000 hover:duration-75 ease-out" key={index} onClick$={async () => {
                   try {
                     store.selectedJar = jar;
                     modalRef.value?.showModal();
@@ -121,7 +122,7 @@ export default component$(() => {
                       </Header>
                     </div>
                   </div>
-                </Card>
+                </button>
               ))
             ) : (
               <p class="text-center text-gray-400">No results found. If you are wanting a new server jar added please contact us!</p>
@@ -129,18 +130,18 @@ export default component$(() => {
           </div>
         </div>
       </div>
-      <dialog ref={modalRef} class="bg-gray-800 text-white p-6 rounded-lg shadow-lg relative max-w-lg w-full transform transition-transform duration-300 ease-out scale-100">
+      <dialog ref={modalRef} class="lum-bg-gray-800/20 lum-pad-equal-2xl shadow-lg backdrop-blur-xl rounded-lg relative max-w-lg w-full transform transition-transform duration-300 ease-out">
         <div class="flex items-center mb-4">
           <img src={store.selectedJar?.logo} alt={`${store.selectedJar?.name} logo`} class="w-12 h-12 mr-4" height="1" width="1"/>
           <h2 class="text-2xl font-bold flex-1">{store.selectedJar?.name}</h2>
-          <Button square onClick$={() => modalRef.value?.close()}>
+          <button class="lum-btn lum-bg-transparent " onClick$={() => modalRef.value?.close()}>
             <CloseOutline width="24" style={{ color: 'white' }} />
-          </Button>
+          </button>
         </div>
         <p class="mb-4">{store.selectedJar?.longDescription}</p>
-        <ButtonAnchor href={store.downloadLink}>
-          Download Latest Version
-        </ButtonAnchor>
+        <a class="lum-btn" href={store.downloadLink}>
+          <DownloadOutline width="24"/> Download Latest Version
+        </a>
       </dialog>
     </div>
   );
diff --git a/src/routes/resources/papertimings/[id]/index.tsx b/src/routes/resources/papertimings/[id]/index.tsx
index 00bc34b5..f07a3bec 100644
--- a/src/routes/resources/papertimings/[id]/index.tsx
+++ b/src/routes/resources/papertimings/[id]/index.tsx
@@ -1,7 +1,6 @@
 import { component$, Resource } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 import { routeLoader$ } from '@builder.io/qwik-city';
-import { ButtonAnchor, Card } from '@luminescent/ui-qwik';
 
 import analyzeTimings from '~/analyze/functions/analyzeTimings';
 import { collector } from '~/analyze/functions/collector';
@@ -31,19 +30,19 @@ export default component$(() => {
           onResolved={(fields: Field[]) => <>
             {fields.map((field: Field, i: number) => {
               return (
-                <Card key={`field${i}`}>
+                <div class="lum-card" key={`field${i}`}>
                   <p class="text-white font-bold text-xl break-words">
                     {field.name.replace(/\./g, '\n> ')}
                   </p>
                   {field.value}
                   {field.buttons?.map((button: any, i2: number) => {
                     return (
-                      <ButtonAnchor key={`button${i2}-${i}`} href={button.url}>
+                      <a class="lum-btn" key={`button${i2}-${i}`} href={button.url}>
                         {button.text}
-                      </ButtonAnchor>
+                      </a>
                     );
                   })}
-                </Card>
+                </div>
               );
             })}
           </>}
diff --git a/src/routes/resources/sparkprofile/[id]/index.tsx b/src/routes/resources/sparkprofile/[id]/index.tsx
index 1c6a5d3f..a39841bb 100644
--- a/src/routes/resources/sparkprofile/[id]/index.tsx
+++ b/src/routes/resources/sparkprofile/[id]/index.tsx
@@ -1,7 +1,6 @@
 import { component$, Resource } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 import { routeLoader$ } from '@builder.io/qwik-city';
-import { ButtonAnchor, Card } from '@luminescent/ui-qwik';
 
 import analyzeProfile from '~/analyze/functions/analyzeProfile';
 import { collector } from '~/analyze/functions/collector';
@@ -31,19 +30,19 @@ export default component$(() => {
           onResolved={(fields: Field[]) => <>
             {fields.map((field: Field, i: number) => {
               return (
-                <Card key={`field${i}`}>
+                <div class="lum-card" key={`field${i}`}>
                   <p class="text-white font-bold text-xl break-words">
                     {field.name.replace(/\./g, '\n> ')}
                   </p>
                   {field.value}
                   {field.buttons?.map((button: any, i2: number) => {
                     return (
-                      <ButtonAnchor key={`button${i2}-${i}`} href={button.url}>
+                      <a class="lum-btn" key={`button${i2}-${i}`} href={button.url}>
                         {button.text}
-                      </ButtonAnchor>
+                      </a>
                     );
                   })}
-                </Card>
+                </div>
               );
             })}
           </>}