diff --git a/src/routes/resources/animtab/index.tsx b/src/routes/resources/animtab/index.tsx
index 6bf6e52f..58078aaa 100644
--- a/src/routes/resources/animtab/index.tsx
+++ b/src/routes/resources/animtab/index.tsx
@@ -208,8 +208,8 @@ export default component$(() => {
                 class={{
                   'motion-safe:transition-all absolute top-full mt-2 gap-1 z-[1000]': true,
                   'opacity-0 scale-95 pointer-events-none': store.opened != i,
-                  'left-0': i + 1 < Math.round(store.colors.length / 2),
-                  'right-0': i + 1 >= Math.round(store.colors.length / 2),
+                  'left-0': i < store.colors.length / 2,
+                  'right-0': i >= store.colors.length / 2,
                 }}
                 onInput$={(newColor: string) => {
                   const newColors = [...store.colors];
diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx
index 9ba6fb4d..eae8974d 100644
--- a/src/routes/resources/rgb/index.tsx
+++ b/src/routes/resources/rgb/index.tsx
@@ -5,7 +5,7 @@ import { Gradient } from '~/components/util/HexUtils';
 import { defaults, loadPreset, presets, v3formats } from '~/components/util/PresetUtils';
 import { convertToHex, convertToRGB, generateOutput, getBrightness, getRandomColor } from '~/components/util/RGBUtils';
 
-import { Add, ChevronDown, ChevronUp, ColorFillOutline, Remove, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons';
+import { Add, Remove, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons';
 
 import { Button, ColorPicker, Header, Dropdown, TextArea, TextInput, Toggle } from '@luminescent/ui';
 import { inlineTranslate, useSpeak } from 'qwik-speak';
@@ -69,7 +69,7 @@ export default component$(() => {
   });
 
   return (
-    <section class="flex mx-auto max-w-6xl px-6 justify-center min-h-svh pt-[72px] scale-for-mac">
+    <section class="flex mx-auto max-w-5xl px-6 justify-center min-h-svh pt-[72px] scale-for-mac">
       <div class="my-10 min-h-[60px] w-full">
         <h1 class="font-bold text-gray-50 text-2xl sm:text-4xl mb-2">
           {t('gradient.title@@RGBirdflop')}
@@ -119,32 +119,6 @@ export default component$(() => {
           })()}
         </h1>
 
-        <div id="mobile-navbuttons" class="my-4 sm:hidden">
-          <div class="flex gap-2">
-            <Button square aria-label="Colors" onClick$={() => {
-              document.getElementById('colors')!.classList.replace('hidden', 'flex');
-              document.getElementById('inputs')!.classList.replace('flex', 'hidden');
-              document.getElementById('formatting')!.classList.replace('flex', 'hidden');
-            }}>
-              <ColorFillOutline width="24" />
-            </Button>
-            <Button square aria-label="Inputs" onClick$={() => {
-              document.getElementById('colors')!.classList.replace('flex', 'hidden');
-              document.getElementById('inputs')!.classList.replace('hidden', 'flex');
-              document.getElementById('formatting')!.classList.replace('flex', 'hidden');
-            }}>
-              <SettingsOutline width="24" />
-            </Button>
-            <Button square aria-label="Formatting" onClick$={() => {
-              document.getElementById('colors')!.classList.replace('flex', 'hidden');
-              document.getElementById('inputs')!.classList.replace('flex', 'hidden');
-              document.getElementById('formatting')!.classList.replace('hidden', 'flex');
-            }}>
-              <Text width="24" class="fill-white" />
-            </Button>
-          </div>
-        </div>
-
         <div class="flex gap-2 my-4 items-center">
           <Button square disabled={store.colors.length < 3} transparent aria-label="Remove Color" onClick$={() => {
             const newColors = [...store.colors];
@@ -153,8 +127,26 @@ export default component$(() => {
           }}>
             <Remove width="24" />
           </Button>
-          <div class="w-full h-3 rounded-full flex justify-between items-center" style={`background: linear-gradient(to right, ${store.colors.join(', ')});`}>
-            {store.colors.map((color: string, i: number) => <div class="relative mt-1" key={i}>
+          <div class="w-full h-3 rounded-full items-center relative" id="colormap" style={`background: linear-gradient(to right, ${store.colors.join(', ')});`}>
+            {store.colors.map((color: string, i: number) => <div class="absolute -mt-1 -ml-3" key={i} onMouseDown$={() => {
+              const abortController = new AbortController();
+              const colormap = document.getElementById('colormap')!;
+              document.addEventListener('mousemove', (e) => {
+                const rect = colormap.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const width = rect.width;
+                const index = Math.round((store.colors.length - 1) * (x / width));
+                if (index != i) {
+                  handleSwap(i, index);
+                  abortController.abort();
+                }
+              }, { signal: abortController.signal });
+              document.addEventListener('mouseup', () => {
+                abortController.abort();
+              }, { signal: abortController.signal });
+            }} style={{
+              left: `${(100 / (store.colors.length - 1)) * i}%`,
+            }}>
               <button key={`color${i + 1}`} id={`color${i + 1}`}
                 class={{
                   'transition-transform w-5 h-5 hover:scale-125 rounded-full shadow-md border': true,
@@ -179,8 +171,8 @@ export default component$(() => {
                 class={{
                   'motion-safe:transition-all absolute top-full mt-2 gap-1 z-[1000]': true,
                   'opacity-0 scale-95 pointer-events-none': store.opened != i,
-                  'left-0': i + 1 < Math.round(store.colors.length / 2),
-                  'right-0': i + 1 >= Math.round(store.colors.length / 2),
+                  'left-0': i < store.colors.length / 2,
+                  'right-0': i >= store.colors.length / 2,
                 }}
                 onInput$={(newColor: string) => {
                   const newColors = [...store.colors];
@@ -189,6 +181,23 @@ export default component$(() => {
                 }}
                 horizontal
               />
+              {store.colors.length > 2 &&
+                <Button
+                  class={{
+                    'motion-safe:transition-all absolute top-full mt-2 gap-1 z-[1000]': true,
+                    'opacity-0 scale-95 pointer-events-none': store.opened != i,
+                    'left-0': i < store.colors.length / 2,
+                    'right-0': i >= store.colors.length / 2,
+                  }}
+                  square size='sm' color="red" onClick$={() => {
+                    const newColors = [...store.colors];
+                    newColors.splice(i, 1);
+                    store.colors = newColors;
+                  }
+                  }>
+                  <TrashOutline width="20" />
+                </Button>
+              }
             </div>,
             )}
           </div>
@@ -200,120 +209,74 @@ export default component$(() => {
           </Button>
         </div>
 
-        <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          <div class="hidden sm:flex flex-col gap-3 relative" id="colors">
-            <h1>
-              idk where to put these buttons yet
+        <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
+          <div class="flex flex-col gap-3 md:col-span-2" id="inputs">
+            <h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
+              <SettingsOutline width="32" />
+              {t('color.inputs@@Inputs')}
             </h1>
-            <Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
-              (event: any) => {
-                if (event.target!.value == 'custom') return;
-                store.colors = presets[event.target!.value as keyof typeof presets];
-              }
-            } values={[
-              ...Object.keys(presets).map(preset => ({ name: preset, value: preset })),
-              { name: t('color.custom@@Custom'), value: 'custom' },
-            ]} value={Object.keys(presets).find((preset: any) => presets[preset as keyof typeof presets].toString() == store.colors.toString()) ?? 'custom'}>
-              {t('color.colorPreset@@Color Preset')}
-            </Dropdown>
-            <div class="flex flex-col gap-2">
-              {store.colors.map((color: string, i: number) => {
-                return <div key={`color${i + 1}`} class="flex items-end">
-                  <div class="flex rounded-md gap-2 p-1 w-full items-center" style={{
-                    background: color,
-                    color: getBrightness(convertToRGB(color)) > 126 ? 'black' : 'white',
-                  }}>
-                    <Button square size='sm' color="red" onClick$={() => {
-                      const newColors = [...store.colors];
-                      newColors.splice(i, 1);
-                      store.colors = newColors;
-                    }
-                    }>
-                      <TrashOutline width="20" />
-                    </Button>
-                    <Button square size='sm' onClick$={() => handleSwap(i, i - 1)}>
-                      <ChevronUp width="20" />
-                    </Button>
-                    <Button square size='sm' onClick$={() => handleSwap(i, i + 1)}>
-                      <ChevronDown width="20" />
-                    </Button>
-                    {color}
-                  </div>
-                </div>;
-              })}
-            </div>
-          </div>
-          <div class="md:col-span-2 lg:col-span-3 sm:grid grid-cols-3 gap-4">
-            <div class="flex flex-col gap-3 col-span-2" id="inputs">
-              <h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
-                <SettingsOutline width="32" />
-                {t('color.inputs@@Inputs')}
-              </h1>
+
+            <div class="flex flex-col md:grid grid-cols-2 gap-2">
               <TextInput id="input" value={store.text} placeholder="birdflop" onInput$={(event: any) => { store.text = event.target!.value; }}>
                 {t('color.inputText@@Input Text')}
               </TextInput>
-
-              <div class="flex flex-col md:grid grid-cols-2 gap-2">
-                <Dropdown id="format" value={store.customFormat ? 'custom' : JSON.stringify(store.format)} class={{ 'w-full': true }} onChange$={
-                  (event: any) => {
-                    if (event.target!.value == 'custom') {
-                      store.customFormat = true;
-                    }
-                    else {
-                      store.customFormat = false;
-                      store.format = JSON.parse(event.target!.value);
-                    }
+              <Dropdown id="format" value={store.customFormat ? 'custom' : JSON.stringify(store.format)} class={{ 'w-full': true }} onChange$={
+                (event: any) => {
+                  if (event.target!.value == 'custom') {
+                    store.customFormat = true;
                   }
-                } values={[
-                  ...v3formats.map(format => ({
-                    name: format.color
-                      .replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
-                      .replace('$f', `${store.bold ? store.format.char + 'l' : ''}${store.italic ? store.format.char + 'o' : ''}${store.underline ? store.format.char + 'n' : ''}${store.strikethrough ? store.format.char + 'm' : ''}`)
-                      .replace('$c', ''),
-                    value: JSON.stringify(format),
-                  })),
-                  {
-                    name: store.customFormat ? store.format.color
-                      .replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
-                      .replace('$f', `${store.bold ? store.format.char + 'l' : ''}${store.italic ? store.format.char + 'o' : ''}${store.underline ? store.format.char + 'n' : ''}${store.strikethrough ? store.format.char + 'm' : ''}`)
-                      .replace('$c', '')
-                      : t('color.custom@@Custom'),
-                    value: 'custom',
-                  },
-                ]}>
-                  {t('color.colorFormat@@Color Format')}
-                </Dropdown>
-                <TextInput id="prefixsuffix" value={store.prefixsuffix} placeholder={'/nick $t'} onInput$={(event: any) => { store.prefixsuffix = event.target!.value; }}>
-                  Prefix/Suffix
-                </TextInput>
-              </div>
+                  else {
+                    store.customFormat = false;
+                    store.format = JSON.parse(event.target!.value);
+                  }
+                }
+              } values={[
+                ...v3formats.map(format => ({
+                  name: format.color
+                    .replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
+                    .replace('$f', `${store.bold ? store.format.char + 'l' : ''}${store.italic ? store.format.char + 'o' : ''}${store.underline ? store.format.char + 'n' : ''}${store.strikethrough ? store.format.char + 'm' : ''}`)
+                    .replace('$c', ''),
+                  value: JSON.stringify(format),
+                })),
+                {
+                  name: store.customFormat ? store.format.color
+                    .replace('$1', 'r').replace('$2', 'r').replace('$3', 'g').replace('$4', 'g').replace('$5', 'b').replace('$6', 'b')
+                    .replace('$f', `${store.bold ? store.format.char + 'l' : ''}${store.italic ? store.format.char + 'o' : ''}${store.underline ? store.format.char + 'n' : ''}${store.strikethrough ? store.format.char + 'm' : ''}`)
+                    .replace('$c', '')
+                    : t('color.custom@@Custom'),
+                  value: 'custom',
+                },
+              ]}>
+                {t('color.colorFormat@@Color Format')}
+              </Dropdown>
+            </div>
 
-              {
-                store.customFormat && <>
-                  <div class="grid grid-cols-2 gap-2">
-                    <div>
-                      <TextInput id="customformat" value={store.format.color} placeholder="&#$1$2$3$4$5$6$f$c" onInput$={(event: any) => { store.format.color = event.target!.value; }}>
-                        {t('color.customFormat@@Custom Format')}
-                      </TextInput>
-                      <div class="py-3 font-mono">
-                        <p>{t('color.placeholders@@Placeholders:')}</p>
-                        <p>$1 = <strong class="text-red-400">R</strong>RGGBB</p>
-                        <p>$2 = R<strong class="text-red-400">R</strong>GGBB</p>
-                        <p>$3 = RR<strong class="text-green-400">G</strong>GBB</p>
-                        <p>$4 = RRG<strong class="text-green-400">G</strong>BB</p>
-                        <p>$5 = RRGG<strong class="text-blue-400">B</strong>B</p>
-                        <p>$6 = RRGGB<strong class="text-blue-400">B</strong></p>
-                        {store.format.char && <p>$f = {t('color.formatting@@Formatting')}</p>}
-                        <p>$c = {t('color.character@@Character')}</p>
-                      </div>
+            {
+              store.customFormat && <>
+                <div class="grid grid-cols-2 gap-2">
+                  <div>
+                    <TextInput id="customformat" value={store.format.color} placeholder="&#$1$2$3$4$5$6$f$c" onInput$={(event: any) => { store.format.color = event.target!.value; }}>
+                      {t('color.customFormat@@Custom Format')}
+                    </TextInput>
+                    <div class="py-3 font-mono">
+                      <p>{t('color.placeholders@@Placeholders:')}</p>
+                      <p>$1 = <strong class="text-red-400">R</strong>RGGBB</p>
+                      <p>$2 = R<strong class="text-red-400">R</strong>GGBB</p>
+                      <p>$3 = RR<strong class="text-green-400">G</strong>GBB</p>
+                      <p>$4 = RRG<strong class="text-green-400">G</strong>BB</p>
+                      <p>$5 = RRGG<strong class="text-blue-400">B</strong>B</p>
+                      <p>$6 = RRGGB<strong class="text-blue-400">B</strong></p>
+                      {store.format.char && <p>$f = {t('color.formatting@@Formatting')}</p>}
+                      <p>$c = {t('color.character@@Character')}</p>
                     </div>
-                    <div class="flex flex-col gap-2">
-                      {(store.format.char != undefined && !store.format.bold && !store.format.italic && !store.format.underline && !store.format.strikethrough) &&
+                  </div>
+                  <div class="flex flex-col gap-2">
+                    {(store.format.char != undefined && !store.format.bold && !store.format.italic && !store.format.underline && !store.format.strikethrough) &&
                         <TextInput id="format-char" value={store.format.char} placeholder="&" onInput$={(event: any) => { store.format.char = event.target!.value; }}>
                           {t('color.format.character@@Format Character')}
                         </TextInput>
-                      }
-                      {!store.format.char &&
+                    }
+                    {!store.format.char &&
                         <>
                           <TextInput id="format-bold" value={store.format.bold} placeholder="<bold>$t</bold>" onInput$={(event: any) => { store.format.bold = event.target!.value; }}>
                             Bold
@@ -332,20 +295,21 @@ export default component$(() => {
                             <p>$t = Output Text</p>
                           </div>
                         </>
-                      }
-                    </div>
+                    }
                   </div>
-                </>
-              }
+                </div>
+              </>
+            }
 
+            <div class="grid md:grid-cols-3 gap-2">
               <div class="flex flex-col gap-2">
                 <TextInput id="import" name="import" placeholder={t('color.import@@Import (Paste here)')} onInput$={async (event: any) => {
                   let json: any;
                   try {
                     const preset = await loadPreset(event.target!.value);
-                    event.target!.value = JSON.stringify(preset);
-                    navigator.clipboard.writeText(JSON.stringify(preset));
-                    json = { ...rgbDefaults, ...preset };
+                      event.target!.value = JSON.stringify(preset);
+                      navigator.clipboard.writeText(JSON.stringify(preset));
+                      json = { ...rgbDefaults, ...preset };
                   } catch (error) {
                     const alert = {
                       class: 'text-red-500',
@@ -420,32 +384,46 @@ export default component$(() => {
                     {t('color.url@@Export As URL')}
                   </Button>
                 </div>
-                <Toggle id="trimspaces" checked={store.trimspaces}
-                  onChange$={(event: any) => { store.trimspaces = event.target!.checked; }}
-                  label={<p class="flex flex-col"><span>Trim color codes from spaces</span><span class="text-sm">Turn this off if you're using empty underlines / strikethroughs</span></p>} />
               </div>
-              {store.alerts.map((alert: any, i: number) => (
-                <p key={`preset-alert${i}`} class={alert.class} dangerouslySetInnerHTML={t(alert.text)} />
-              ))}
-            </div>
-            <div class="mb-4 hidden sm:flex flex-col gap-3" id="formatting">
-              <h1 class="hidden sm:flex text-2xl font-bold fill-current text-gray-50 gap-4 items-center justify-center">
-                <Text width="32" />
-                {t('color.colors@@Formatting')}
-              </h1>
-              <Toggle id="bold" checked={store.bold}
-                onChange$={(event: any) => { store.bold = event.target!.checked; }}
-                label={`${t('color.bold@@Bold')} - ${store.format.char ? `${store.format.char}l` : store.format.bold?.replace('$t', '')}`} />
-              <Toggle id="italic" checked={store.italic}
-                onChange$={(event: any) => { store.italic = event.target!.checked; }}
-                label={`${t('color.italic@@Italic')} - ${store.format.char ? `${store.format.char}o` : store.format.italic?.replace('$t', '')}`} />
-              <Toggle id="underline" checked={store.underline}
-                onChange$={(event: any) => { store.underline = event.target!.checked; }}
-                label={`${t('color.underline@@Underline')} - ${store.format.char ? `${store.format.char}n` : store.format.underline?.replace('$t', '')}`} />
-              <Toggle id="strikethrough" checked={store.strikethrough}
-                onChange$={(event: any) => { store.strikethrough = event.target!.checked; }}
-                label={`${t('color.strikethrough@@Strikethrough')} - ${store.format.char ? `${store.format.char}m` : store.format.strikethrough?.replace('$t', '')}`} />
+              <Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
+                (event: any) => {
+                  if (event.target!.value == 'custom') return;
+                  store.colors = presets[event.target!.value as keyof typeof presets];
+                }
+              } values={[
+                ...Object.keys(presets).map(preset => ({ name: preset, value: preset })),
+                { name: t('color.custom@@Custom'), value: 'custom' },
+              ]} value={Object.keys(presets).find((preset: any) => presets[preset as keyof typeof presets].toString() == store.colors.toString()) ?? 'custom'}>
+                {t('color.colorPreset@@Color Preset')}
+              </Dropdown>
+              <TextInput id="prefixsuffix" value={store.prefixsuffix} placeholder={'/nick $t'} onInput$={(event: any) => { store.prefixsuffix = event.target!.value; }}>
+                  Prefix/Suffix
+              </TextInput>
             </div>
+            <Toggle id="trimspaces" checked={store.trimspaces}
+              onChange$={(event: any) => { store.trimspaces = event.target!.checked; }}
+              label={<p class="flex flex-col"><span>Trim color codes from spaces</span><span class="text-sm">Turn this off if you're using empty underlines / strikethroughs</span></p>} />
+            {store.alerts.map((alert: any, i: number) => (
+              <p key={`preset-alert${i}`} class={alert.class} dangerouslySetInnerHTML={t(alert.text)} />
+            ))}
+          </div>
+          <div class="mb-4 flex flex-col gap-3" id="formatting">
+            <h1 class="hidden sm:flex text-2xl font-bold fill-current text-gray-50 gap-4 items-center justify-center">
+              <Text width="32" />
+              {t('color.colors@@Formatting')}
+            </h1>
+            <Toggle id="bold" checked={store.bold}
+              onChange$={(event: any) => { store.bold = event.target!.checked; }}
+              label={`${t('color.bold@@Bold')} - ${store.format.char ? `${store.format.char}l` : store.format.bold?.replace('$t', '')}`} />
+            <Toggle id="italic" checked={store.italic}
+              onChange$={(event: any) => { store.italic = event.target!.checked; }}
+              label={`${t('color.italic@@Italic')} - ${store.format.char ? `${store.format.char}o` : store.format.italic?.replace('$t', '')}`} />
+            <Toggle id="underline" checked={store.underline}
+              onChange$={(event: any) => { store.underline = event.target!.checked; }}
+              label={`${t('color.underline@@Underline')} - ${store.format.char ? `${store.format.char}n` : store.format.underline?.replace('$t', '')}`} />
+            <Toggle id="strikethrough" checked={store.strikethrough}
+              onChange$={(event: any) => { store.strikethrough = event.target!.checked; }}
+              label={`${t('color.strikethrough@@Strikethrough')} - ${store.format.char ? `${store.format.char}m` : store.format.strikethrough?.replace('$t', '')}`} />
           </div>
         </div>
         <div class="text-sm mt-8">