diff --git a/package.json b/package.json
index 6093281..49bf002 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     },
     "dependencies": {
         "chroma.ts": "^1.0.10",
+        "dompurify": "^3.3.0",
         "marked": "^16.4.2",
         "nuxt": "^3.21.6",
         "vue": "^3.5.34",
@@ -21,6 +22,7 @@
         "@nuxt/image": "1.10.0",
         "@nuxtjs/mdc": "^0.17.4",
         "@nuxtjs/tailwindcss": "^6.14.0",
+        "@types/dompurify": "^3.0.5",
         "prettier": "3.6.2",
         "prettier-plugin-tailwindcss": "0.6.13",
         "sass-embedded": "^1.99.0"
diff --git a/src/app.vue b/src/app.vue
index 14ac760..550a9fb 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -18,7 +18,7 @@ else API.Logout();
         </NuxtLayout>
     </div>
 
-    <div class="pointer-events-none fixed left-0 top-0 z-50 h-screen w-screen" id="panels"></div>
+    <div class="pointer-events-none fixed left-0 top-0 z-50 h-screen w-full max-w-full" id="panels"></div>
 </template>
 
 <style>
@@ -28,6 +28,25 @@ html {
 
 body {
     @apply bg-dark-1 font-base text-dark-text selection:bg-highlight selection:text-dark-1;
+    overflow-x: hidden;
+    max-width: 100vw;
+}
+
+* {
+    scrollbar-color: transparent;
+}
+
+*::-webkit-scrollbar {
+    width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    @apply bg-dark-3;
+    border-radius: 16px;
 }
 
 .fade-enter-active,
diff --git a/src/components/map-set/description.vue b/src/components/map-set/description.vue
new file mode 100644
index 0000000..a9870e6
--- /dev/null
+++ b/src/components/map-set/description.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { APIMapSet } from '~/models/maps/APIMapSet';
+import API from '~/utils/api';
+
+const noDescPlaceholder = "No description provided.";
+const loadingDescPlaceholder = "No description provided.";
+const descMaxHeight = "400px"
+
+const props = defineProps<{
+    mapset: APIMapSet;
+}>();
+
+const description = ref('');
+const isFetching = ref(true);
+const isSaving = ref(false);
+const fetchError = ref<string | null>(null);
+
+try {
+    const { data } = await API.PerformGet<string>(`/mapsets/${props.mapset.id}/description`);
+    description.value = data ?? '';
+} catch {
+    fetchError.value = 'Failed to load description.';
+} finally {
+    isFetching.value = false;
+}
+
+const canEdit = computed(
+    () =>
+        utils.IsModerator(API.CurrentUser.value) ||
+        API.CurrentUser.value?.id === props.mapset.creator.id
+);
+
+const handleSave = async (value: string) => {
+    isSaving.value = true;
+    try {
+        await API.PerformPatch<string | null>(
+            `/mapsets/${props.mapset.id}/description`,
+            {content : value || ""}
+        );
+        description.value = value;
+    } catch {
+        console.error('Failed to save description.');
+    } finally {
+        isSaving.value = false;
+    }
+};
+</script>
+
+<template>
+    <div v-if="fetchError" class="error-message">{{ fetchError }}</div>
+
+    <MarkdownViewer
+        v-else-if="!canEdit"
+        :model-value="description"
+        :loading="isFetching"
+        :max-height="descMaxHeight"
+        :placeholder="noDescPlaceholder"
+        :loading-placeholder="loadingDescPlaceholder"
+    />
+
+    <MarkdownEditor
+        v-else
+        v-model="description"
+        :can-edit="!isSaving"
+        :loading="isFetching || isSaving"
+        :max-characters="api.DescriptionMaxCharLimit"
+        :sanitize="true"
+        :max-height="descMaxHeight"
+        :placeholder="noDescPlaceholder"
+        edit-placeholder="Enter description..."
+        :loading-placeholder="loadingDescPlaceholder"
+        @save="handleSave"
+    />
+</template>
\ No newline at end of file
diff --git a/src/components/markdown/editor.vue b/src/components/markdown/editor.vue
new file mode 100644
index 0000000..b9b8327
--- /dev/null
+++ b/src/components/markdown/editor.vue
@@ -0,0 +1,362 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from 'vue';
+import Markdown, { MarkdownTagFilter } from '~/utils/markdown';
+import API from '~/utils/api';
+import MarkdownViewer from '~/components/markdown/viewer.vue';
+
+const props = withDefaults(defineProps<{
+    modelValue: string;
+    canEdit?: boolean;
+    loading?: boolean;
+    maxCharacters?: number;
+    renderDebounce?: number;
+    maxHeight?: string;
+    minHeight?: string;
+    placeholder?: string;
+    editPlaceholder?: string;
+    loadingPlaceholder?: string;
+    saveButtonText?: string;
+    cancelButtonText?: string;
+    sanitize?: boolean;
+    filter?: MarkdownTagFilter;
+    onSave?: (value: string) => Promise<void>;
+}>(), {
+    maxCharacters: 2000,
+    maxHeight: '400px',
+    minHeight: '400px',
+    saveButtonText: 'Save',
+    cancelButtonText: 'Cancel',
+    sanitize: true,
+    filter: () => new MarkdownTagFilter('blacklist', []),
+    renderDebounce: 300,
+    placeholder: 'No content provided.',
+    editPlaceholder: 'Enter content...',
+    loadingPlaceholder: 'Loading...',
+});
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string];
+    'save': [value: string];
+}>();
+
+const isEditing = ref(false);
+const isSaving = ref(false);
+const isDragging = ref(false);
+
+const savedText = ref(props.modelValue || '');
+const editBuffer = ref(props.modelValue || '');
+
+const hasUnsavedChanges = computed(() => !isEditing.value && editBuffer.value !== savedText.value);
+const charactersRemaining = computed(() => props.maxCharacters - editBuffer.value.length);
+const isOverLimit = computed(() => editBuffer.value.length > props.maxCharacters);
+const isDisabled = computed(() => isSaving.value || props.loading);
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+watch(() => props.modelValue, (newValue) => {
+    if (!isEditing.value) {
+        editBuffer.value = newValue;
+        savedText.value = newValue;
+    }
+});
+
+watch(editBuffer, (newValue) => {
+    emit('update:modelValue', newValue);
+});
+
+const toggleMode = () => {
+    isEditing.value = !isEditing.value;
+};
+
+const cancelEdit = () => {
+    editBuffer.value = savedText.value;
+    emit('update:modelValue', savedText.value);
+    isEditing.value = false;
+};
+
+const handleSave = async () => {
+    if (isDisabled.value || isOverLimit.value) return;
+    isSaving.value = true;
+    try {
+        await props.onSave?.(editBuffer.value);
+        savedText.value = editBuffer.value;
+        emit('save', editBuffer.value);
+        isEditing.value = false;
+    } catch (error) {
+        console.error('Failed to save:', error);
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+// toolbar helpers
+
+const wrapInline = (before: string, after: string, placeholder: string) => {
+    const textarea = textareaRef.value;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selected = editBuffer.value.slice(start, end) || placeholder;
+    const replacement = `${before}${selected}${after}`;
+
+    textarea.setRangeText(replacement, start, end, 'end');
+    textarea.dispatchEvent(new Event('input'));
+
+    nextTick(() => {
+        textarea.focus();
+        const newStart = start + before.length;
+        const newEnd = newStart + selected.length;
+        textarea.setSelectionRange(newStart, newEnd);
+    });
+};
+
+const prependLine = (prefix: string) => {
+    const textarea = textareaRef.value;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const before = editBuffer.value.slice(0, start);
+    const selected = editBuffer.value.slice(start, end);
+
+    const lineStart = before.lastIndexOf('\n') + 1;
+    const already_prefixed = editBuffer.value.slice(lineStart).startsWith(prefix);
+
+    let replacement: string;
+    if (already_prefixed) {
+        replacement = (before.slice(lineStart) + selected).replace(new RegExp(`^${prefix}`, 'gm'), '');
+        textarea.setRangeText(replacement, lineStart, end, 'end');
+    } else {
+        replacement = selected ? selected.split('\n').map(l => `${prefix}${l}`).join('\n') : prefix;
+        textarea.setRangeText(replacement, start, end, 'end');
+    }
+
+    textarea.dispatchEvent(new Event('input'));
+    nextTick(() => textarea.focus());
+};
+
+const isTagAllowed = (tag?: string): boolean =>
+    tag ? props.filter.isAllowed(tag) : true;
+
+const toolbarActions = [
+    { label: 'H1', title: 'Heading 1', tag: 'h1', action: () => prependLine('# ') },
+    { label: 'H2', title: 'Heading 2', tag: 'h2', action: () => prependLine('## ') },
+    { label: 'H3', title: 'Heading 3', tag: 'h3', action: () => prependLine('### ') },
+    { divider: true },
+    { icon: 'fa-solid fa-bold', title: 'Bold', action: () => wrapInline('**', '**', 'bold text') },
+    { icon: 'fa-solid fa-italic', title: 'Italic', action: () => wrapInline('*', '*', 'italic text') },
+    { divider: true },
+    { icon: 'fa-solid fa-align-center', title: 'Align Center', tag: 'center', action: () => wrapInline('[center]\n', '\n[/center]', 'centered text') },
+    { icon: 'fa-solid fa-eye-slash', title: 'Spoiler', tag: 'spoiler', action: () => wrapInline('[spoiler=Spoiler]', '[/spoiler]', 'hidden text') },
+    { icon: 'fa-solid fa-palette', title: 'Color', tag: 'color', action: () => wrapInline('[color=red]', '[/color]', 'colored text') },
+    { divider: true },
+    { icon: 'fa-solid fa-code', title: 'Inline code', tag: 'code', action: () => wrapInline('`', '`', 'code') },
+    { icon: 'fa-solid fa-file-code', title: 'Code block', tag: 'code', action: () => wrapInline('```\n', '\n```', 'code') },
+    { divider: true },
+    { icon: 'fa-solid fa-list-ul', title: 'Bullet list', tag: 'ul', action: () => prependLine('- ') },
+    { icon: 'fa-solid fa-list-ol', title: 'Ordered list', tag: 'ol', action: () => prependLine('1. ') },
+    { divider: true },
+    { icon: 'fa-solid fa-link', title: 'Link', tag: 'a', action: () => wrapInline('[', '](url)', 'link text') },
+    { divider: true },
+    { icon: 'fa-solid fa-image', title: 'Upload image', tag: 'img', action: () => fileInputRef.value?.click() },
+] as const;
+
+const insertAt = (text: string, pos: number): number => {
+    const textarea = textareaRef.value;
+    if (!textarea) return pos;
+
+    textarea.focus();
+    textarea.setRangeText(text, pos, pos, 'end');
+    textarea.dispatchEvent(new Event('input'));
+    return textarea.selectionEnd;
+};
+
+const getDropPosition = (e: DragEvent): number => {
+    const textarea = textareaRef.value;
+    if (!textarea) return editBuffer.value.length;
+
+    const rect = textarea.getBoundingClientRect();
+    const { lineHeight, fontSize } = getComputedStyle(textarea);
+
+    const y = e.clientY - rect.top + textarea.scrollTop;
+    const x = e.clientX - rect.left;
+    const line = Math.floor(y / parseFloat(lineHeight));
+    const col = Math.floor(x / (parseFloat(fontSize) * 0.6));
+
+    const lines = editBuffer.value.split('\n');
+    let pos = lines.slice(0, line).reduce((acc, l) => acc + l.length + 1, 0);
+    if (line < lines.length) pos += Math.min(col, lines[line].length);
+
+    return Math.min(pos, editBuffer.value.length);
+};
+
+const uploadImage = async (file: File, position?: number) => {
+    if (!file.type.startsWith('image/')) return;
+
+    const pos = position ?? textareaRef.value?.selectionStart ?? editBuffer.value.length;
+    const placeholder = `![Uploading ${file.name}...]()`;
+    const endPos = insertAt(placeholder, pos);
+
+    try {
+        const { data: url, error } = await API.UploadToCatbox(file);
+        if (error) throw new Error(error._request || 'Upload failed');
+
+        const textarea = textareaRef.value;
+        if (textarea && url) {
+            textarea.setRangeText(`![${file.name}](${url})`, endPos - placeholder.length, endPos, 'end');
+            textarea.dispatchEvent(new Event('input'));
+        }
+    } catch (error) {
+        console.error('Upload failed:', error);
+        const textarea = textareaRef.value;
+        if (textarea) {
+            textarea.setRangeText('Failed to upload image!', endPos - placeholder.length, endPos, 'end');
+            textarea.dispatchEvent(new Event('input'));
+        }
+    }
+};
+
+const handleFileInput = async (e: Event) => {
+    const files = Array.from((e.target as HTMLInputElement).files || []);
+    for (const file of files) await uploadImage(file);
+    if (fileInputRef.value) fileInputRef.value.value = '';
+};
+
+const handleDrop = async (e: DragEvent) => {
+    e.preventDefault();
+    isDragging.value = false;
+    if (!isEditing.value) return;
+
+    const files = Array.from(e.dataTransfer?.files || []);
+    if (!files.length) return;
+
+    textareaRef.value?.focus();
+    let pos = getDropPosition(e);
+    for (const file of files) {
+        await uploadImage(file, pos);
+        pos = textareaRef.value?.selectionEnd ?? pos;
+    }
+};
+
+const handlePaste = async (e: ClipboardEvent) => {
+    const items = Array.from(e.clipboardData?.items || []);
+    const imageItem = items.find(item => item.type.startsWith('image/'));
+    if (imageItem) {
+        e.preventDefault();
+        const file = imageItem.getAsFile();
+        if (file) await uploadImage(file);
+    }
+};
+</script>
+
+<template>
+    <div
+        class="relative"
+        @dragenter.prevent="isDragging = isEditing && !!$event.dataTransfer?.types.includes('Files')"
+        @dragover.prevent
+        @dragleave.prevent="isDragging = false"
+        @drop="handleDrop"
+    >
+        <!-- Toggle -->
+        <div v-if="canEdit" class="absolute top-0 right-0 z-10 p-4">
+            <button
+                @click="toggleMode"
+                :disabled="isDisabled"
+                class="relative hover:opacity-70 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
+                :title="hasUnsavedChanges ? 'Edit (Unsaved changes)' : isEditing ? 'Preview' : 'Edit'"
+            >
+                <i :class="isEditing ? 'fa-solid fa-book' : 'fa-solid fa-pen'" class="text-sm" />
+                <span v-if="hasUnsavedChanges" class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-yellow" />
+            </button>
+        </div>
+
+        <div class="p-4" :class="{ 'pr-12': canEdit }">
+
+            <!-- View mode -->
+            <MarkdownViewer
+                v-if="!isEditing"
+                :model-value="modelValue"
+                :loading="loading"
+                :max-height="maxHeight"
+                :placeholder="placeholder"
+                :loading-placeholder="loadingPlaceholder"
+                :sanitize="sanitize"
+                :render-debounce="renderDebounce"
+            />
+
+            <!-- Edit mode -->
+            <div v-else class="w-full">
+
+                <!-- Toolbar -->
+                <div class="flex items-center gap-1 mb-2 flex-wrap">
+                    <template v-for="(item, i) in toolbarActions" :key="i">
+                        <div v-if="'divider' in item" class="w-px h-4 bg-dark-5 mx-1" />
+                        <button
+                            v-else-if="isTagAllowed('tag' in item ? item.tag : undefined)"
+                            @click="item.action"
+                            :title="item.title"
+                            class="w-7 h-7 flex items-center justify-center rounded hover:bg-dark-5 transition-colors text-gray-400 hover:text-white"
+                        >
+                            <i v-if="'icon' in item" :class="item.icon" class="text-xs" />
+                            <span v-else class="text-xs font-bold">{{ item.label }}</span>
+                        </button>
+                    </template>
+                </div>
+
+                <textarea
+                    ref="textareaRef"
+                    v-model="editBuffer"
+                    class="w-full p-3 rounded-md focus:outline-none focus:ring-0 bg-transparent border transition-all duration-0 focus:border-highlight"
+                    :class="isDragging ? 'border-highlight' : 'border-dark-5'"
+                    :style="{
+                        minHeight,
+                        borderColor: isDragging ? '#8585e0' : undefined,
+                        boxShadow: isDragging ? '0 0 0 3px rgba(133, 133, 224, 0.1)' : undefined,
+                    }"
+                    :placeholder="editPlaceholder"
+                    :maxlength="maxCharacters"
+                    @paste="handlePaste"
+                />
+
+                <input
+                    ref="fileInputRef"
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    class="hidden"
+                    @change="handleFileInput"
+                />
+
+                <div class="text-xs text-right mb-2" :class="isOverLimit ? 'text-red-500' : 'text-gray-500'">
+                    {{ charactersRemaining }} characters remaining
+                </div>
+
+                <div class="flex gap-2 justify-end">
+                    <Button
+                        @click="cancelEdit"
+                        :disabled="isDisabled"
+                        class="bg-dark-3 px-3 py-0.5 text-sm"
+                    >
+                        {{ cancelButtonText }}
+                    </Button>
+                    <Button
+                        @click="handleSave"
+                        :disabled="isDisabled || isOverLimit"
+                        class="bg-highlight px-3 py-0.5 text-sm text-dark-2"
+                    >
+                        {{ isSaving ? 'Saving...' : saveButtonText }}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+textarea {
+    resize: vertical;
+    font-family: inherit;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/markdown/viewer.vue b/src/components/markdown/viewer.vue
new file mode 100644
index 0000000..ea517c6
--- /dev/null
+++ b/src/components/markdown/viewer.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Markdown from '~/utils/markdown';
+
+const props = withDefaults(defineProps<{
+    modelValue: string;
+    loading?: boolean;
+    renderDebounce?: number;
+    maxHeight?: string;
+    placeholder?: string;
+    loadingPlaceholder?: string;
+    sanitize?: boolean;
+    filter?: MarkdownTagFilter;
+}>(), {
+    maxHeight: '400px',
+    sanitize: true,
+    filter: () => new MarkdownTagFilter('blacklist', []),
+    renderDebounce: 300,
+    placeholder: 'No content provided.',
+    loadingPlaceholder: 'Loading...',
+});
+
+const isRendering = ref(true);
+const renderedMarkdownContent = ref('');
+
+watch(() => props.modelValue, async (newValue) => {
+    isRendering.value = true;
+    renderedMarkdownContent.value = await Markdown.Render(newValue || '', props.sanitize, props.filter);
+    isRendering.value = false;
+}, { immediate: true });
+</script>
+
+<template>
+    <div class="overflow-hidden w-full">
+        <p v-if="isRendering || loading" class="text-sm italic text-gray-500">{{ loadingPlaceholder }}</p>
+        <div
+            v-else-if="modelValue"
+            v-html="renderedMarkdownContent"
+            class="max-w-none md-content overflow-y-auto overflow-x-hidden"
+            :style="{ maxHeight }"
+        />
+        <p v-else class="text-sm italic text-gray-500">{{ placeholder }}</p>
+    </div>
+</template>
+
+<style scoped>
+.md-content {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+
+    :deep(*) {
+        box-sizing: content-box;
+    }
+
+    :deep(p) {
+        font-size: 0.875rem;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+    }
+
+    :deep(a) {
+        @apply text-highlight;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    :deep(ul),
+    :deep(ol) {
+        list-style-position: outside;
+        list-style-type: disc;
+        margin-top: 0.5rem;
+        padding-left: 1.25rem;
+    }
+
+    :deep(ol) {
+        list-style-type: decimal;
+    }
+
+    :deep(li) {
+        font-size: 0.875rem;
+        margin-bottom: 0.15rem;
+        padding-left: 0.25rem;
+
+        & > ul,
+        & > ol {
+            margin-top: 0.15rem;
+            margin-bottom: 0;
+        }
+    }
+
+    :deep(h1) {
+        font-size: 2.25rem;
+        line-height: 2.5rem;
+        margin-bottom: 1rem;
+    }
+
+    :deep(h2) {
+        font-size: 1.5rem;
+        line-height: 2rem;
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    :deep(h3) {
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+    }
+
+    :deep(h4) {
+        font-size: 1rem;
+        line-height: 1.5rem;
+    }
+
+    :deep(img) {
+        max-width: 100%;
+        height: auto;
+    }
+
+    :deep(pre) {
+        @apply bg-dark-2;
+        padding: 1rem;
+        border-radius: 0.5rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        overflow-x: auto;
+
+        code {
+            @apply bg-dark-2;
+            padding: 0;
+        }
+    }
+
+    :deep(code) {
+        @apply bg-dark-1 text-dark-text;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-weight: 700;
+        border-radius: 0.375rem;
+        padding: 0.25rem 0.5rem;
+    }
+
+    :deep(table) {
+        width: 100%;
+        margin-top: 0.5rem;
+
+        img {
+            margin-top: 0;
+            display: inline;
+        }
+
+        th,
+        td {
+            padding: 0.5rem;
+        }
+
+        tr {
+            &:nth-child(odd) { @apply bg-dark-2; }
+            &:nth-child(even) { @apply bg-dark-1; }
+        }
+
+        th {
+            @apply bg-dark-2 border-dark-1;
+            border-bottom-width: 2px;
+            border-bottom-style: solid;
+        }
+    }
+
+    :deep(blockquote) {
+        @apply bg-dark-2 border-highlight;
+        padding: 1.5rem;
+        border-radius: 1rem;
+        border-width: 2px;
+        border-style: solid;
+        margin-bottom: 1.15rem;
+
+        &.blockquote-warning { @apply border-yellow; }
+        &.blockquote-tip { @apply border-green; }
+        &.blockquote-danger { @apply border-red; }
+
+        &.blockquote-note { @apply border-cyan; }
+        &.blockquote-important { @apply border-highlight; }
+        &.blockquote-caution { @apply border-red; }
+
+        .blockquote-label {
+            @apply text-dark-text;
+            display: block;
+            font-weight: 700;
+            font-size: 0.8rem;
+            letter-spacing: 0.05em;
+            margin-bottom: 0.5rem;
+            text-transform: uppercase;
+        }
+    }
+
+    :deep(.footnote-ref) {
+        @apply text-highlight;
+        text-decoration: none;
+        font-size: 0.75rem;
+        vertical-align: super;
+    }
+
+    :deep(ol li[id^="note-"]) {
+        font-size: 0.875rem;
+        opacity: 0.7;
+    }
+
+    :deep(details) {
+        @apply bg-dark-1;
+        border-radius: 0.375rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    :deep(summary) {
+        @apply text-gray;
+        cursor: pointer;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        transition: color 150ms;
+        user-select: none;
+
+        &:hover {
+            @apply text-white;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/models/maps/APIMapSet.ts b/src/models/maps/APIMapSet.ts
index 1a44e6f..f8f4a4d 100644
--- a/src/models/maps/APIMapSet.ts
+++ b/src/models/maps/APIMapSet.ts
@@ -11,7 +11,6 @@ export type APIMapSet = {
     artist: string;
     source: string;
     tags: string[];
-    description: string;
     flags: number;
     status: APIMapSetStatus;
     submitted: number;
diff --git a/src/models/markdown/ParsedImage.ts b/src/models/markdown/ParsedImage.ts
new file mode 100644
index 0000000..f86f47d
--- /dev/null
+++ b/src/models/markdown/ParsedImage.ts
@@ -0,0 +1,11 @@
+export default class ParsedImage {
+    src: string;
+    alt: string;
+    lineNumber: number;
+
+    constructor(src: string, alt: string, lineNumber: number) {
+        this.src = src
+        this.alt = alt
+        this.lineNumber = lineNumber
+    }
+}
\ No newline at end of file
diff --git a/src/models/markdown/ParsedMarkdown.ts b/src/models/markdown/ParsedMarkdown.ts
index 030a097..126748d 100644
--- a/src/models/markdown/ParsedMarkdown.ts
+++ b/src/models/markdown/ParsedMarkdown.ts
@@ -1,10 +1,14 @@
+import type ParsedImage from "./ParsedImage";
 import type ParsedSection from "./ParsedSection"
 
 export default class ParsedMarkdown {
-    sections: ParsedSection[] = []
-    raw: string
+    raw: string;
+    sections: ParsedSection[];
+    images?: Array<ParsedImage>;
 
     constructor(raw: string) {
-        this.raw = raw
+        this.raw = raw;
+        this.sections = [];
+        this.images = [];
     }
 }
\ No newline at end of file
diff --git a/src/pages/set/[id]/info.vue b/src/pages/set/[id]/info.vue
index 90fe057..bc8c2b1 100644
--- a/src/pages/set/[id]/info.vue
+++ b/src/pages/set/[id]/info.vue
@@ -6,7 +6,7 @@ definePageMeta({
     alias: '/set/:id'
 });
 
-defineProps<{
+const props = defineProps<{
     mapset: APIMapSet;
     map: APIMap;
 }>();
@@ -15,8 +15,7 @@ defineProps<{
 <template>
     <div class="flex w-full flex-col gap-3 pt-2">
         <MapSetInfoSection title="Description">
-            <p class="text-sm" v-if="mapset.description">{{ mapset.description }}</p>
-            <p class="text-sm italic" v-else>No description provided.</p>
+            <MapSetDescription :mapset=mapset />
         </MapSetInfoSection>
         <MapSetInfoSection title="Source">
             <p class="text-sm" v-if="map.source">{{ map.source }}</p>
@@ -31,4 +30,4 @@ defineProps<{
             <p class="text-sm italic" v-else>No tags provided.</p>
         </MapSetInfoSection>
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 11faa1a..2eb0a4c 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -15,6 +15,8 @@ export default class API {
     static TokenCookie: CookieRef<string | undefined>;
     static CurrentUser: CookieRef<APIUser | undefined>;
 
+    static DescriptionMaxCharLimit = 4000;
+
     static Setup(dev: boolean = false) {
         this.APIUrl = dev ? 'http://localhost:2434' : 'https://fluxis.flux.moe/api';
         this.AssetsUrl = dev ? 'http://localhost:2434/assets' : 'https://assets.flux.moe';
@@ -97,6 +99,39 @@ export default class API {
 
         this.CurrentUser.value = user;
     }
+
+    static async UploadToCatbox(file: File): Promise<Result<string, APIResponseErrors>> {
+        try {
+            const formData = new FormData();
+            formData.append('reqtype', 'fileupload');
+            formData.append('fileToUpload', file);
+
+            const { data, error, status } = await useFetch('https://corsproxy.io/?' + encodeURIComponent('https://catbox.moe/user/api.php'), {
+                method: 'POST',
+                body: formData,
+            });
+
+            if (error.value || !data.value) {
+                return { 
+                    data: null, 
+                    error: { 
+                        _request: error.value?.message || 'Upload failed',
+                        _status: status.value
+                    } 
+                };
+            }
+
+            const url = typeof data.value === 'string' ? data.value : String(data.value);
+            return { data: url.trim(), error: null };
+        } catch (ex: any) {
+            return { 
+                data: null, 
+                error: { 
+                    _request: ex?.message || 'Unknown error during catbox upload' 
+                } 
+            };
+        }
+    }
 }
 
 async function tryPerform<T, E = APIResponseErrors>(endpoint: string, method: string, body: any = {}): Promise<Result<T, E>> {
diff --git a/src/utils/markdown.ts b/src/utils/markdown.ts
index f09d14b..fa4a00c 100644
--- a/src/utils/markdown.ts
+++ b/src/utils/markdown.ts
@@ -1,16 +1,89 @@
-import { marked, type RendererObject } from 'marked';
+import { marked, type RendererObject, type Tokens } from 'marked';
 import ParsedMarkdown from '~/models/markdown/ParsedMarkdown';
 import ParsedSection from '~/models/markdown/ParsedSection';
 import ParsedSubSection from '~/models/markdown/ParsedSubSection';
+import ParsedImage from '~/models/markdown/ParsedImage';
+import Sanitizer from './sanitize';
+
+export class MarkdownTagFilter {
+    mode: 'blacklist' | 'whitelist';
+    tags: string[];
+
+    constructor(mode: 'blacklist' | 'whitelist', tags: string[]) {
+        this.mode = mode;
+        this.tags = tags;
+    }
+
+    isAllowed(tag: string): boolean {
+        return this.mode === 'blacklist'
+            ? !this.tags.includes(tag)
+            : this.tags.includes(tag);
+    }
+
+    isBlocked(tag: string): boolean {
+        return !this.isAllowed(tag);
+    }
+}
 
 export default class Markdown {
     static FootnoteRegex = /\[\^(\d{1,2})\]/g;
     static BlockquoteRegex = /\{: \.(\w+) \}/g;
+    static ImageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
+    static GithubAlertRegex = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\n?/i;
+
+    static AllowedImageDomains: string[] = [
+        'flux.moe',
+        'catbox.moe',
+        'imgur.com',
+        "singlecolorimage.com"
+    ];
+
+    static CustomTags: Record<string, { inline?: boolean; render: (inner: string, attr?: string) => string }> = {
+        center: { render: (inner) => `<div class="text-center">${inner}</div>` },
+        spoiler: { render: (inner, attr) => `<details><summary>${attr || 'Spoiler'}</summary>${inner}</details>` },
+        color: { inline: true, render: (inner, attr) => `<span data-color="${attr || 'inherit'}">${inner}</span>` },
+    };
+
+    static GithubAlertIcons: Record<string, string> = {
+        note: 'fa-circle-info',
+        tip: 'fa-lightbulb',
+        important: 'fa-flag',
+        warning: 'fa-triangle-exclamation',
+        caution: 'fa-ban',
+    };
+
+    static isImageAllowed(url: string): boolean {
+        try {
+            if (url.startsWith('/')) {
+                return true;
+            }
+
+            if (url.startsWith('//')) {
+                return true;
+            }
+
+            const urlObj = new URL(url, window?.location?.href || '');
+            const hostname = urlObj.hostname;
+
+            const currentDomain = window?.location?.hostname || '';
+            if (hostname === currentDomain || hostname.endsWith('.' + currentDomain)) {
+                return true;
+            }
+
+            return this.AllowedImageDomains.some(domain => {
+                return hostname === domain || hostname.endsWith('.' + domain);
+            });
+        } catch {
+            return false;
+        }
+    }
 
     static Parse(md: string): ParsedMarkdown {
         const data = new ParsedMarkdown(md);
+        data.images = [];
+        const lines = md.split('\n');
 
-        data.raw.split('\n').forEach((line) => {
+        lines.forEach((line, index) => {
             if (line.startsWith('## ')) {
                 const text = line.slice(3);
                 const id = line
@@ -31,53 +104,150 @@ export default class Markdown {
                     .replace(/[^\w]+/g, '-');
                 last.subs.push(new ParsedSubSection(text, id));
             }
+
+            const imageMatches = [...line.matchAll(Markdown.ImageRegex)];
+            imageMatches.forEach((match) => {
+                const alt = match[1];
+                const src = match[2];
+                
+                if (this.isImageAllowed(src)) {
+                    if (!data.images) {
+                        data.images = [];
+                    }
+                    
+                    data.images.push(new ParsedImage(
+                        src,
+                        alt,
+                        index + 1
+                    ));
+                }
+            });
         });
 
         return data;
     }
 
-    static Render(md: string): string {
+    static async Render(md: string, sanitize: boolean = true, filter: MarkdownTagFilter = new MarkdownTagFilter('blacklist', [])): Promise<string> {
         md = md.replaceAll('<', '&lt;');
 
+        const extracted_customtags: Array<{ placeholder: string; tag: string | null; inner: string; attr?: string }> = [];
+
+        // extract custom tags
+        for (const [tag, def] of Object.entries(Markdown.CustomTags)) {
+            // bbcode style
+            const regex = new RegExp(`\\[${tag}(?:=([^\\]]+))?\\]([\\s\\S]*?)\\[\\/${tag}\\]`, 'gi');
+
+            if (def.inline) {
+                md = md.replace(regex, (_, attr, inner) => {
+                    if (filter.isBlocked(tag)) return inner;
+                    return def.render(inner, attr);
+                });
+            } else {
+                md = md.replace(regex, (_, attr, inner) => {
+                    if (filter.isBlocked(tag)) {
+                        const placeholder = `CUSTOM_TAG_${tag.toUpperCase()}_${extracted_customtags.length}`;
+                        extracted_customtags.push({ placeholder, tag: null, inner, attr });
+                        return placeholder;
+                    }
+                    const placeholder = `CUSTOM_TAG_${tag.toUpperCase()}_${extracted_customtags.length}`;
+                    extracted_customtags.push({ placeholder, tag, inner, attr });
+                    return placeholder;
+                });
+            }
+        }
+
+        // we need to recurse nested lists
+        const renderList = (list: Tokens.List): string => {
+            const tag = list.ordered ? 'ol' : 'ul';
+
+            const items = list.items.map(item => {
+                let content = '';
+
+                item.tokens?.forEach(token => {
+                    if (token.type === 'list') {
+                        content += renderList(token as Tokens.List);
+                    } else if (token.type === 'text') {
+                        content += (token as Tokens.Text).text;
+                    }
+                });
+
+                return `<li>${content}</li>`;
+            }).join('\n');
+
+            return `<${tag}>${items}</${tag}>`;
+        };
+
         const config: RendererObject = {
-            /* heading: (head) => {
-                if (head.depth == 2 || head.depth == 3)
-                    return `<MarkdownHeader text="${head.text.replace(/\"/g, '&quot;')}" :level="${head.depth}"></MarkdownHeader>`;
+            heading: (head) => {
+                if (filter.isBlocked(`h${head.depth}`)) return head.text;
 
-                return false;
-            }, */
+                return `<h${head.depth}>${head.text}</h${head.depth}>`;
+            },
+            list: (list) => {
+                if (filter.isBlocked(list.ordered ? 'ol' : 'ul')) return list.raw;
+                return renderList(list);
+            },
             link: (link) => {
+                if (filter.isBlocked('a')) return link.raw;
+                
                 if (link.href.startsWith('/')) {
                     return `<a href="${link.href}">${link.text}</a>`;
                 }
 
                 return false;
             },
-            /* code: (code) => {
-                const text = code.text;
-                const lines = text.split('\n');
-                return `<MarkdownCodeBlock lang="${code.lang}"><span>${lines.join('</span><span>')}</span></MarkdownCodeBlock>`;
-            }, */
-            /* blockquote: (block) => {
+            code: (code) => {
+                if (filter.isBlocked('code')) return code.text;
+
+                const lines = code.text.split('\n');
+                return `<pre><code class="language-${code.lang}">${lines.join('\n')}</code></pre>`;
+            },
+            blockquote: (block) => {
+                if (filter.isBlocked('blockquote')) return block.text;
+
                 let content = block.text;
                 let type = 'tip';
 
-                const matches = [...content.matchAll(Markdown.BlockquoteRegex)];
-
-                if (matches.length > 0) {
-                    const match = matches[0];
-                    type = match[1];
-                    content = content.replace(match[0], '').trim();
+                // github style for codeblocks: [!NOTE], [!WARNING], etc
+                const githubAlertMatch = content.match(Markdown.GithubAlertRegex);
+                if (githubAlertMatch) {
+                    type = githubAlertMatch[1].toLowerCase();
+                    content = content.replace(Markdown.GithubAlertRegex, '').trim();
+                } else {
+                    // normal {: .class }
+                    const matches = [...content.matchAll(Markdown.BlockquoteRegex)];
+                    if (matches.length > 0) {
+                        const match = matches[0];
+                        type = match[1];
+                        content = content.replace(match[0], '').trim();
+                    }
                 }
 
-                return `<MarkdownBlockquote type="${type}">${content}</MarkdownBlockquote>`;
-            }, */
-            /* image: (image) => `<MarkdownImage path="${image.href}" alt="${image.text}"></MarkdownImage>` */
+                const label = githubAlertMatch
+                ? `<span class="blockquote-label"><i class="fa-solid ${this.GithubAlertIcons[type]}"></i> ${type.toUpperCase()}</span>`
+                : '';
+
+                return `<blockquote class="blockquote-${type}">${label}${content}</blockquote>`;
+            },
+            image: (image) => {
+                if (filter.isBlocked('img') || !this.isImageAllowed(image.href)) return '';
+
+                const escapedAlt = image.text.replace(/\"/g, '&quot;');
+                const escapedHref = image.href.replace(/\"/g, '&quot;');
+                return `<img src="${escapedHref}" alt="${escapedAlt}"></MarkdownImage>`;
+            }
         };
 
         marked.use({ renderer: config });
         let html = marked.parse(md).toString();
 
+        // replace the placeholders with html
+        for (const { placeholder, tag, inner, attr } of extracted_customtags) {
+            const innerHtml = await Markdown.Render(inner, false, filter);
+            const final = tag ? Markdown.CustomTags[tag].render(innerHtml, attr) : innerHtml;
+            html = html.replace(new RegExp(`<p>\\s*${placeholder}\\s*<\\/p>|${placeholder}`), final);
+        }
+
         // footnote stuff
         const matches = [...html.matchAll(Markdown.FootnoteRegex)];
 
@@ -136,10 +306,15 @@ export default class Markdown {
                 const raw = m[0];
                 const num = m[1];
 
-                html = html.replace(raw, `<MarkdownFootnote :num="${num}"></MarkdownFootnote>`);
+                html = html.replace(raw, `<sup><a href="#note-${num}" class="footnote-ref">[${num}]</a></sup>`);
             });
         }
 
-        return html;
+        let finalHtml = sanitize ? Sanitizer.Sanitize(html) : html;
+
+        // important because style attr is blocked inside the sanitization
+        finalHtml = html.replace(/data-color="([^"]+)"/g, 'style="color:$1"');
+
+        return finalHtml;
     }
-}
+}
\ No newline at end of file
diff --git a/src/utils/sanitize.ts b/src/utils/sanitize.ts
new file mode 100644
index 0000000..4b676fd
--- /dev/null
+++ b/src/utils/sanitize.ts
@@ -0,0 +1,86 @@
+import type { Config } from 'dompurify';
+
+export interface SanitizeOptions {
+  allowedTags?: string[];
+  allowedAttr?: string[];
+  allowDataAttr?: boolean;
+  stripAll?: boolean;
+}
+
+export default class Sanitizer {
+
+  private static readonly DEFAULT_ALLOWED_TAGS: string[] = [
+    'p', 'br', 'span', 'div',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'strong', 'em', 'b', 'i', 'u', 's', 'strike', 'del',
+    'blockquote', 'code', 'pre',
+    'details', 'summary',
+    'ul', 'ol', 'li',
+    'a', 'img',
+    'table', 'thead', 'tbody', 'tr', 'th', 'td',
+    'hr',
+    'MarkdownHeader', 'MarkdownCodeBlock', 'MarkdownBlockquote', 
+    'MarkdownFootnote', 'MarkdownImage', 'NuxtLink'
+  ];
+
+  private static readonly DEFAULT_ALLOWED_ATTR: string[] = [
+    'href', 'src', 'alt', 'title', 'class', 'id',
+    'text', 'level', 'lang', 'type', 'path', 'num', 'to'
+  ];
+
+  static async Sanitize(dirty: string, options?: SanitizeOptions): Promise<string> {
+    if (!dirty || typeof dirty !== 'string') {
+      return '';
+    }
+
+    if (typeof window === 'undefined') {
+      return dirty;
+    }
+
+    if (options?.stripAll) {
+      return this.StripAllHtml(dirty);
+    }
+
+    const { default: DOMPurify } = await import('dompurify');
+
+    let config: Config = {
+      ALLOWED_TAGS: options?.allowedTags || this.DEFAULT_ALLOWED_TAGS,
+      ALLOWED_ATTR: options?.allowedAttr || this.DEFAULT_ALLOWED_ATTR,
+      ALLOW_DATA_ATTR: options?.allowDataAttr ?? false,
+      KEEP_CONTENT: true,
+      RETURN_TRUSTED_TYPE: false,
+      FORBID_TAGS: ['script', 'style', 'iframe', 'object', 'embed', 'link', 'base', 'meta', 'form'],
+      FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover', 'onfocus', 'onblur', 'onchange', 'oninput'],
+      ALLOW_UNKNOWN_PROTOCOLS: false,
+      ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i
+    };
+
+    try {
+      return DOMPurify.sanitize(dirty, config);
+    } catch (error) {
+      console.error('Sanitization error:', error);
+      return '';
+    }
+  }
+
+  static async StripAllHtml(dirty: string): Promise<string> {
+    if (!dirty || typeof dirty !== 'string') {
+      return '';
+    }
+
+    if (typeof window === 'undefined') {
+      return dirty;
+    }
+
+    const { default: DOMPurify } = await import('dompurify');
+
+    const sanitized = DOMPurify.sanitize(dirty, {
+      ALLOWED_TAGS: [],
+      KEEP_CONTENT: true
+    });
+
+    const textarea = document.createElement('textarea');
+    textarea.innerHTML = sanitized;
+    return textarea.value;
+  }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index c3e68bc..bc87f89 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
     theme: {
         colors: {
             white: '#FFF',
+            gray: '#AAA',
             black: '#000',
             transparent: 'transparent',