diff --git a/static/css/components/lora-modal.css b/static/css/components/lora-modal.css
deleted file mode 100644
index bf00c6c1..00000000
--- a/static/css/components/lora-modal.css
+++ /dev/null
@@ -1,1843 +0,0 @@
-/* Lora Modal Header */
-.modal-header {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    margin-bottom: var(--space-3);
-    padding-bottom: var(--space-2);
-    border-bottom: 1px solid var(--lora-border);
-}
-
-/* Info Grid */
-.info-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--space-2);
-    margin-bottom: var(--space-3);
-}
-
-.info-item {
-    padding: var(--space-2);
-    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-sm);
-}
-
-/* 调整深色主题下的样式 */
-[data-theme="dark"] .info-item {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--lora-border);
-}
-
-.info-item.full-width {
-    grid-column: 1 / -1;
-}
-
-.info-item label {
-    display: block;
-    font-size: 0.85em;
-    color: var(--text-color);
-    opacity: 0.8;
-    margin-bottom: 4px;
-}
-
-.info-item span {
-    color: var(--text-color);
-    word-break: break-word;
-}
-
-.info-item.usage-tips,
-.info-item.notes {
-    grid-column: 1 / -1 !important; /* Make notes section full width */
-}
-
-/* Add specific styles for notes content */
-.info-item.notes .editable-field [contenteditable] {
-    min-height: 60px; /* Increase height for multiple lines */
-    max-height: 150px; /* Limit maximum height */
-    overflow-y: auto; /* Add scrolling for long content */
-    white-space: pre-wrap; /* Preserve line breaks */
-    line-height: 1.5; /* Improve readability */
-    padding: 8px 12px; /* Slightly increase padding */
-}
-
-.file-path {
-    font-family: monospace;
-    font-size: 0.9em;
-}
-
-.description-text {
-    line-height: 1.5;
-    max-height: 100px;
-    overflow-y: auto;
-}
-
-/* Showcase Section */
-.showcase-section {
-    position: relative;
-    margin-top: var(--space-4);
-}
-
-.carousel {
-    transition: max-height 0.3s ease-in-out;
-    overflow: hidden;
-}
-
-.carousel.collapsed {
-    max-height: 0;
-}
-
-.carousel-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-}
-
-.media-wrapper {
-    position: relative;
-    width: 100%;
-    background: var(--lora-surface);
-    margin-bottom: var(--space-2);
-    overflow: hidden; /* Ensure metadata panel is contained */
-}
-
-.media-wrapper:last-child {
-    margin-bottom: 0;
-}
-
-.media-wrapper img,
-.media-wrapper video {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-/* Scroll Indicator */
-.scroll-indicator {
-    cursor: pointer;
-    padding: var(--space-2);
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin-bottom: var(--space-2);
-    transition: background-color 0.2s, transform 0.2s;
-}
-
-.scroll-indicator:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    transform: translateY(-1px);
-}
-
-.scroll-indicator span {
-    font-size: 0.9em;
-    color: var(--text-color);
-}
-
-.lazy {
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.lazy[src] {
-    opacity: 1;
-}
-
-/* Update Trigger Words styles */
-.info-item.trigger-words {
-    padding: var(--space-2);
-    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-sm);
-}
-
-/* 调整 trigger words 样式 */
-[data-theme="dark"] .info-item.trigger-words {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--lora-border);
-}
-
-/* New header style for trigger words */
-.trigger-words-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 6px;
-}
-
-.edit-trigger-words-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    opacity: 0.5;
-    cursor: pointer;
-    padding: 2px 5px;
-    border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
-}
-
-.edit-trigger-words-btn:hover {
-    opacity: 0.8;
-    background: rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .edit-trigger-words-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Edit mode active state */
-.trigger-words.edit-mode .edit-trigger-words-btn {
-    opacity: 0.8;
-    color: var(--lora-accent);
-}
-
-.trigger-words-content {
-    margin-bottom: var(--space-1);
-}
-
-.trigger-words-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: flex-start;
-}
-
-/* No trigger words message */
-.no-trigger-words {
-    color: var(--text-color);
-    opacity: 0.7;
-    font-style: italic;
-    font-size: 0.9em;
-}
-
-/* Update Trigger Words styles */
-.trigger-word-tag {
-    display: inline-flex;
-    align-items: center;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    padding: 4px 8px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    gap: 6px;
-    position: relative;
-}
-
-/* Update trigger word content color to use theme accent */
-.trigger-word-content {
-    color: var(--lora-accent) !important; /* Override general span color */
-    font-size: 0.85em;
-    line-height: 1.4;
-    word-break: break-word;
-}
-
-/* Keep the hover effect using accent color */
-.trigger-word-tag:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.trigger-word-copy {
-    display: flex;
-    align-items: center;
-    color: var(--text-color);
-    opacity: 0.5;
-    flex-shrink: 0;
-    transition: opacity 0.2s;
-}
-
-/* Delete button for trigger word */
-.delete-trigger-word-btn {
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    width: 16px;
-    height: 16px;
-    background: var(--lora-error);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-    transition: transform 0.2s ease;
-}
-
-.delete-trigger-word-btn:hover {
-    transform: scale(1.1);
-}
-
-/* Edit controls */
-.trigger-words-edit-controls {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-2);
-    margin-top: var(--space-2);
-}
-
-.trigger-words-edit-controls button {
-    padding: 3px 8px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid var(--border-color);
-    background: var(--bg-color);
-    color: var(--text-color);
-    font-size: 0.85em;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    transition: all 0.2s ease;
-}
-
-.trigger-words-edit-controls button:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.trigger-words-edit-controls button i {
-    font-size: 0.8em;
-}
-
-.save-trigger-words-btn {
-    background: var(--lora-accent) !important;
-    color: white !important;
-    border-color: var(--lora-accent) !important;
-}
-
-.save-trigger-words-btn:hover {
-    opacity: 0.9;
-}
-
-/* Add trigger word form */
-.add-trigger-word-form {
-    margin-top: var(--space-2);
-    display: flex;
-    gap: var(--space-1);
-    position: relative; /* Added for dropdown positioning */
-}
-
-.new-trigger-word-input {
-    flex: 1;
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid var(--border-color);
-    background: var(--bg-color);
-    color: var(--text-color);
-    font-size: 0.9em;
-}
-
-.new-trigger-word-input:focus {
-    border-color: var(--lora-accent);
-    outline: none;
-}
-
-.confirm-add-trigger-word-btn,
-.cancel-add-trigger-word-btn {
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid var(--border-color);
-    background: var (--bg-color);
-    color: var(--text-color);
-    font-size: 0.85em;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.confirm-add-trigger-word-btn {
-    background: var(--lora-accent);
-    color: white;
-    border-color: var(--lora-accent);
-}
-
-.confirm-add-trigger-word-btn:hover {
-    opacity: 0.9;
-}
-
-.cancel-add-trigger-word-btn:hover {
-    background: rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .cancel-add-trigger-word-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Trained Words Loading Indicator */
-.trained-words-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: var(--space-1) 0;
-    color: var(--text-color);
-    opacity: 0.7;
-    font-size: 0.9em;
-    gap: 8px;
-}
-
-.trained-words-loading i {
-    color: var(--lora-accent);
-}
-
-/* Trained Words Dropdown Styles */
-.trained-words-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    margin-top: 4px;
-    z-index: 100;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.trained-words-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    background: var(--card-bg);
-    border-bottom: 1px solid var(--border-color);
-}
-
-.trained-words-header span {
-    font-size: 0.9em;
-    font-weight: 500;
-    color: var(--text-color);
-}
-
-.trained-words-header small {
-    font-size: 0.8em;
-    opacity: 0.7;
-}
-
-.trained-words-container {
-    max-height: 200px;
-    overflow-y: auto;
-    padding: 10px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-content: flex-start;
-}
-
-.trained-word-item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 10px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: var(--border-radius-xs);
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    max-width: 150px;
-}
-
-.trained-word-item:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.trained-word-item.already-added {
-    opacity: 0.7;
-    cursor: default;
-}
-
-.trained-word-item.already-added:hover {
-    background: var(--lora-surface);
-    border-color: var(--lora-border);
-}
-
-.trained-word-text {
-    color: var(--lora-accent);
-    font-size: 0.9em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-right: 4px;
-    max-width: 100px;
-}
-
-.trained-word-meta {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-}
-
-.trained-word-freq {
-    color: var (--text-color);
-    font-size: 0.75em;
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: 10px;
-    min-width: 20px;
-    padding: 1px 5px;
-    text-align: center;
-    line-height: 1.2;
-}
-
-[data-theme="dark"] .trained-word-freq {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.added-indicator {
-    color: var(--lora-accent);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.75em;
-}
-
-.no-trained-words {
-    padding: 16px 12px;
-    text-align: center;
-    color: var(--text-color);
-    opacity: 0.7;
-    font-style: italic;
-    font-size: 0.9em;
-}
-
-/* Editable Fields */
-.editable-field {
-    position: relative;
-    display: flex;
-    gap: 8px;
-    align-items: flex-start;
-}
-
-.editable-field [contenteditable] {
-    flex: 1;
-    min-height: 24px;
-    padding: 4px 8px;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    font-size: 0.9em;
-    line-height: 1.4;
-    color: var(--text-color);
-    transition: border-color 0.2s;
-    word-break: break-word;
-}
-
-.editable-field [contenteditable]:focus {
-    outline: none;
-    border-color: var(--lora-accent);
-    background: var(--bg-color);
-}
-
-.editable-field [contenteditable]:empty::before {
-    content: attr(data-placeholder);
-    color: var(--text-color);
-    opacity: 0.5;
-}
-
-.save-btn {
-    padding: 4px 8px;
-    background: var(--lora-accent);
-    border: none;
-    border-radius: var(--border-radius-xs);
-    color: white;
-    cursor: pointer;
-    transition: opacity 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.save-btn:hover {
-    opacity: 0.9;
-}
-
-.save-btn i {
-    font-size: 0.9em;
-}
-
-@media (max-width: 640px) {
-    .info-item.usage-tips,
-    .info-item.notes {
-        grid-column: 1 / -1;
-    }
-}
-
-/* 修改 back-to-top 按钮样式，使其固定在 modal 内部 */
-.modal-content .back-to-top {
-    position: sticky; /* 改用 sticky 定位 */
-    float: right; /* 使用 float 确保按钮在右侧 */
-    bottom: 20px; /* 距离底部的距离 */
-    margin-right: 20px; /* 右侧间距 */
-    margin-top: -56px; /* 负边距确保不占用额外空间 */
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(10px);
-    transition: all 0.3s ease;
-    z-index: 10;
-}
-
-.modal-content .back-to-top.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-}
-
-.modal-content .back-to-top:hover {
-    background: var(--lora-accent);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Update Preset Controls styles */
-.preset-controls {
-    display: flex;
-    gap: var(--space-2);
-    margin-bottom: var(--space-2);
-}
-
-.preset-controls select,
-.preset-controls input {
-    padding: var(--space-1);
-    background: var(--bg-color);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-xs);
-    color: var(--text-color);
-}
-
-.preset-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-1);
-}
-
-.preset-tag {
-    display: flex;
-    align-items: center;
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-xs);
-    padding: calc(var(--space-1) * 0.5) var(--space-1);
-    gap: var(--space-1);
-    transition: all 0.2s ease;
-}
-
-.preset-tag span {
-    color: var(--lora-accent);
-    font-size: 0.9em;
-}
-
-.preset-tag i {
-    color: var(--text-color);
-    opacity: 0.5;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.preset-tag:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.preset-tag i:hover {
-    color: var(--lora-error);
-    opacity: 1;
-}
-
-.add-preset-btn {
-    padding: calc(var(--space-1) * 0.5) var(--space-2);
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border: none;
-    border-radius: var(--border-radius-xs);
-    cursor: pointer;
-    transition: opacity 0.2s;
-}
-
-.add-preset-btn:hover {
-    opacity: 0.9;
-}
-
-/* File name copy styles */
-.file-name-wrapper {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 4px;
-    border-radius: var(--border-radius-xs);
-    transition: background-color 0.2s;
-    position: relative;
-}
-
-.file-name-content {
-    padding: 2px 4px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid transparent;
-    flex: 1;
-}
-
-.file-name-wrapper.editing .file-name-content {
-    border: 1px solid var(--lora-accent);
-    background: var(--bg-color);
-    outline: none;
-}
-
-.edit-file-name-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    opacity: 0;
-    cursor: pointer;
-    padding: 2px 5px;
-    border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
-    margin-left: var(--space-1);
-}
-
-.edit-file-name-btn.visible,
-.file-name-wrapper:hover .edit-file-name-btn {
-    opacity: 0.5;
-}
-
-.edit-file-name-btn:hover {
-    opacity: 0.8 !important;
-    background: rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .edit-file-name-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Base Model and Size combined styles */
-.info-item.base-size {
-    display: flex;
-    gap: var(--space-3);
-}
-
-.base-wrapper {
-    flex: 2;  /* 分配更多空间给base model */
-}
-
-/* Base model display and editing styles */
-.base-model-display {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-
-.base-model-content {
-    padding: 2px 4px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid transparent;
-    color: var(--text-color);
-    flex: 1;
-}
-
-.edit-base-model-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    opacity: 0;
-    cursor: pointer;
-    padding: 2px 5px;
-    border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
-    margin-left: var(--space-1);
-}
-
-.edit-base-model-btn.visible,
-.base-model-display:hover .edit-base-model-btn {
-    opacity: 0.5;
-}
-
-.edit-base-model-btn:hover {
-    opacity: 0.8 !important;
-    background: rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .edit-base-model-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.base-model-selector {
-    width: 100%;
-    padding: 3px 5px;
-    background: var(--bg-color);
-    border: 1px solid var(--lora-accent);
-    border-radius: var(--border-radius-xs);
-    color: var(--text-color);
-    font-size: 0.9em;
-    outline: none;
-    margin-right: var(--space-1);
-}
-
-.size-wrapper {
-    flex: 1;
-    border-left: 1px solid var(--lora-border);
-    padding-left: var(--space-3);
-}
-
-.base-wrapper label,
-.size-wrapper label {
-    display: block;
-    margin-bottom: 4px;
-}
-
-.size-wrapper span {
-    font-family: monospace;
-    font-size: 0.9em;
-    opacity: 0.9;
-}
-
-/* New Model Name Header Styles */
-.model-name-header {
-    display: flex;
-    align-items: center;
-    width: calc(100% - 40px); /* Avoid overlap with close button */
-    position: relative;
-}
-
-.model-name-content {
-    margin: 0;
-    padding: var(--space-1);
-    border-radius: var(--border-radius-xs);
-    font-size: 1.5em !important;
-    font-weight: 600;
-    line-height: 1.2;
-    color: var(--text-color);
-    border: 1px solid transparent;
-    outline: none;
-    flex: 1;
-}
-
-.model-name-content:focus {
-    border: 1px solid var(--lora-accent);
-    background: var(--bg-color);
-}
-
-.edit-model-name-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    opacity: 0;
-    cursor: pointer;
-    padding: 2px 5px;
-    border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
-    margin-left: var(--space-1);
-}
-
-.edit-model-name-btn.visible,
-.model-name-header:hover .edit-model-name-btn {
-    opacity: 0.5;
-}
-
-.edit-model-name-btn:hover {
-    opacity: 0.8 !important;
-    background: rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .edit-model-name-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Tab System Styling */
-.showcase-tabs {
-    display: flex;
-    border-bottom: 1px solid var(--lora-border);
-    margin-bottom: var(--space-2);
-    position: relative;
-    z-index: 2;
-}
-
-.tab-btn {
-    padding: var(--space-1) var(--space-2);
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    color: var(--text-color);
-    cursor: pointer;
-    font-size: 0.95em;
-    transition: all 0.2s;
-    opacity: 0.7;
-    position: relative;
-}
-
-.tab-btn:hover {
-    opacity: 1;
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.05);
-}
-
-.tab-btn.active {
-    border-bottom: 2px solid var(--lora-accent);
-    opacity: 1;
-    font-weight: 600;
-}
-
-.tab-content {
-    position: relative;
-    min-height: 100px;
-}
-
-.tab-pane {
-    display: none;
-}
-
-.tab-pane.active {
-    display: block;
-}
-
-/* Model Description Styling */
-.model-description-container {
-    background: var(--lora-surface);
-    border-radius: var(--border-radius-sm);
-    overflow: hidden;
-    min-height: 200px;
-    position: relative;
-    /* Remove the max-height and overflow-y to allow content to expand naturally */
-}
-
-.model-description-loading {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-3);
-    color: var(--text-color);
-    opacity: 0.7;
-    font-size: 0.9em;
-}
-
-.model-description-loading .fa-spinner {
-    margin-right: var(--space-1);
-}
-
-.model-description-content {
-    padding: var(--space-2);
-    line-height: 1.5;
-    overflow-wrap: break-word;
-    font-size: 0.95em;
-}
-
-.model-description-content h1,
-.model-description-content h2,
-.model-description-content h3,
-.model-description-content h4,
-.model-description-content h5,
-.model-description-content h6 {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    font-weight: 600;
-}
-
-.model-description-content p {
-    margin-bottom: 1em;
-}
-
-.model-description-content img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--border-radius-xs);
-    display: block;
-    margin: 1em 0;
-}
-
-.model-description-content pre {
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: var(--border-radius-xs);
-    padding: var(--space-1);
-    white-space: pre-wrap;
-    margin: 1em 0;
-    overflow-x: auto;
-}
-
-.model-description-content code {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: rgba(0, 0, 0, 0.05);
-    padding: 0.1em 0.3em;
-    border-radius: 3px;
-}
-
-.model-description-content pre code {
-    background: transparent;
-    padding: 0;
-}
-
-.model-description-content ul,
-.model-description-content ol {
-    margin-left: 1.5em;
-    margin-bottom: 1em;
-}
-
-.model-description-content li {
-    margin-bottom: 0.5em;
-}
-
-.model-description-content blockquote {
-    border-left: 3px solid var (--lora-accent);
-    padding-left: 1em;
-    margin-left: 0;
-    margin-right: 0;
-    font-style: italic;
-    opacity: 0.8;
-}
-
-/* Adjust dark mode for model description */
-[data-theme="dark"] .model-description-content pre,
-[data-theme="dark"] .model-description-content code {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.hidden {
-    display: none !important;
-}
-
-.no-examples {
-    text-align: center;
-    padding: var(--space-3);
-    color: var(--text-color);
-    opacity: 0.7;
-}
-
-/* Adjust the media wrapper for tab system */
-#showcase-tab .carousel-container {
-    margin-top: var(--space-2);
-}
-
-/* Enhanced Model Description Styling */
-.model-description-container {
-    background: var(--lora-surface);
-    border-radius: var(--border-radius-sm);
-    overflow: hidden;
-    min-height: 200px;
-    position: relative;
-    /* Remove the max-height and overflow-y to allow content to expand naturally */
-}
-
-.model-description-content {
-    padding: var(--space-2);
-    line-height: 1.5;
-    overflow-wrap: break-word;
-    font-size: 0.95em;
-}
-
-.model-description-content h1,
-.model-description-content h2,
-.model-description-content h3,
-.model-description-content h4,
-.model-description-content h5,
-.model-description-content h6 {
-    margin-top: 1em;
-    margin-bottom: 0.5em;
-    font-weight: 600;
-}
-
-.model-description-content p {
-    margin-bottom: 1em;
-}
-
-.model-description-content img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--border-radius-xs);
-    display: block;
-    margin: 1em 0;
-}
-
-.model-description-content pre {
-    background: rgba(0, 0, 0, 0.05);
-    border-radius: var(--border-radius-xs);
-    padding: var (--space-1);
-    white-space: pre-wrap;
-    margin: 1em 0;
-    overflow-x: auto;
-}
-
-.model-description-content code {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: rgba(0, 0, 0, 0.05);
-    padding: 0.1em 0.3em;
-    border-radius: 3px;
-}
-
-.model-description-content pre code {
-    background: transparent;
-    padding: 0;
-}
-
-.model-description-content ul,
-.model-description-content ol {
-    margin-left: 1.5em;
-    margin-bottom: 1em;
-}
-
-.model-description-content li {
-    margin-bottom: 0.5em;
-}
-
-.model-description-content blockquote {
-    border-left: 3px solid var (--lora-accent);
-    padding-left: 1em;
-    margin-left: 0;
-    margin-right: 0;
-    font-style: italic;
-    opacity: 0.8;
-}
-
-/* Adjust dark mode for model description */
-[data-theme="dark"] .model-description-content pre,
-[data-theme="dark"] .model-description-content code {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Model Tags styles */
-.model-tags {
-    display: none;
-}
-
-.model-tag {
-    display: none;
-}
-
-/* Updated Model Tags styles - improved visibility in light theme */
-.model-tags-container {
-    position: relative;
-}
-
-.model-tags-compact {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 6px;
-    align-items: center;
-}
-
-.model-tag-compact {
-    /* Updated styles to match info-item appearance */
-    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-xs);
-    padding: 2px 8px;
-    font-size: 0.75em;
-    color: var(--text-color);
-    white-space: nowrap;
-}
-
-/* Style for empty tags placeholder */
-.model-tag-empty {
-    background: rgba(0, 0, 0, 0.02);
-    border: 1px dashed rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-xs);
-    padding: 2px 8px;
-    font-size: 0.75em;
-    color: var(--text-color);
-    white-space: nowrap;
-    opacity: 0.7;
-    font-style: italic;
-}
-
-/* Adjust dark theme tag styles */
-[data-theme="dark"] .model-tag-compact {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--lora-border);
-}
-
-/* Dark theme for empty tags */
-[data-theme="dark"] .model-tag-empty {
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px dashed var(--lora-border);
-}
-
-.model-tag-more {
-    background: var(--lora-accent);
-    color: var(--lora-text);
-    border-radius: var(--border-radius-xs);
-    padding: 2px 8px;
-    font-size: 0.75em;
-    cursor: pointer;
-    white-space: nowrap;
-    font-weight: 500;
-}
-
-.model-tags-tooltip {
-    position: absolute;
-    top: calc(100% + 8px);
-    left: 0;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow for better visibility */
-    padding: 10px 14px;
-    max-width: 400px;
-    z-index: 10;
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(-4px);
-    transition: all 0.2s ease;
-    pointer-events: none;
-}
-
-.model-tags-tooltip.visible {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-    pointer-events: auto; /* Enable interactions when visible */
-}
-
-.tooltip-content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.tooltip-tag {
-    /* Updated styles to match info-item appearance */
-    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-xs);
-    padding: 3px 8px;
-    font-size: 0.75em;
-    color: var(--text-color);
-}
-
-/* Adjust dark theme tooltip tag styles */
-[data-theme="dark"] .tooltip-tag {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--lora-border);
-}
-
-/* Add styles for blurred showcase content */
-.nsfw-media-wrapper {
-    position: relative;
-}
-
-.media-wrapper img.blurred,
-.media-wrapper video.blurred {
-    filter: blur(25px);
-}
-
-.media-wrapper .nsfw-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-    pointer-events: none;
-}
-
-/* Position the toggle button at the top left of showcase media */
-.showcase-toggle-btn {
-    position: absolute;
-    left: var(--space-1);
-    top: var(--space-1);
-    z-index: 3;
-}
-
-/* Make sure media wrapper maintains position: relative for absolute positioning of children */
-.carousel .media-wrapper {
-    position: relative;
-}
-
-/* Image Metadata Panel Styles */
-.image-metadata-panel {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--bg-color);
-    border-top: 1px solid var(--border-color);
-    padding: var(--space-2);
-    transform: translateY(100%);
-    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
-    z-index: 5;
-    max-height: 50%; /* Reduced to take less space */
-    overflow-y: auto;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-    opacity: 0;
-    pointer-events: none;
-}
-
-/* Show metadata panel only when the 'visible' class is added */
-.media-wrapper .image-metadata-panel.visible {
-    transform: translateY(0);
-    opacity: 0.98;
-    pointer-events: auto;
-}
-
-/* Adjust to dark theme */
-[data-theme="dark"] .image-metadata-panel {
-    background: var(--card-bg);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.metadata-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-/* Styling for parameters tags */
-.params-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-bottom: var(--space-1);
-    padding-bottom: var(--space-1);
-    border-bottom: 1px solid var(--lora-border);
-}
-
-.param-tag {
-    display: inline-flex;
-    align-items: center;
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-xs);
-    padding: 2px 6px;
-    font-size: 0.8em;
-    line-height: 1.2;
-    white-space: nowrap;
-}
-
-.param-tag .param-name {
-    font-weight: 600;
-    color: var(--text-color);
-    margin-right: 4px;
-    opacity: 0.8;
-}
-
-.param-tag .param-value {
-    color: var(--lora-accent);
-}
-
-/* Special styling for prompt row */
-.metadata-row.prompt-row {
-    flex-direction: column;
-    padding-top: 0;
-}
-
-.metadata-row.prompt-row + .metadata-row.prompt-row {
-    margin-top: var(--space-2);
-}
-
-.metadata-label {
-    font-weight: 600;
-    color: var(--text-color);
-    opacity: 0.8;
-    font-size: 0.85em;
-    display: block;
-    margin-bottom: 4px;
-}
-
-.metadata-prompt-wrapper {
-    position: relative;
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    border-radius: var(--border-radius-xs);
-    padding: 6px 30px 6px 8px;
-    margin-top: 2px;
-    max-height: 80px; /* Reduced from 120px */
-    overflow-y: auto;
-    word-break: break-word;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.metadata-prompt {
-    color: var(--text-color);
-    font-family: monospace;
-    font-size: 0.85em;
-    white-space: pre-wrap;
-}
-
-.copy-prompt-btn {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    opacity: 0.6;
-    cursor: pointer;
-    padding: 3px;
-    transition: all 0.2s ease;
-}
-
-.copy-prompt-btn:hover {
-    opacity: 1;
-    color: var(--lora-accent);
-}
-
-/* Scrollbar styling for metadata panel */
-.image-metadata-panel::-webkit-scrollbar {
-    width: 6px;
-}
-
-.image-metadata-panel::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.image-metadata-panel::-webkit-scrollbar-thumb {
-    background-color: var(--border-color);
-    border-radius: 3px;
-}
-
-/* For Firefox */
-.image-metadata-panel {
-    scrollbar-width: thin;
-    scrollbar-color: var(--border-color) transparent;
-}
-
-/* No metadata message styling */
-.no-metadata-message {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-2);
-    color: var(--text-color);
-    opacity: 0.7;
-    text-align: center;
-    font-style: italic;
-    gap: 8px;
-}
-
-.no-metadata-message i {
-    font-size: 1.1em;
-    color: var(--lora-accent);
-    opacity: 0.8;
-}
-
-.view-all-btn {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    padding: 6px 12px;
-    background-color: var(--lora-accent);
-    color: var(--lora-text);
-    border: none;
-    border-radius: var(--border-radius-sm);
-    cursor: pointer;
-    transition: background-color 0.2s;
-    font-size: 13px;
-}
-
-.view-all-btn:hover {
-    opacity: 0.9;
-}
-
-/* Loading, error and empty states */
-.recipes-loading,
-.recipes-error,
-.recipes-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px;
-    text-align: center;
-    min-height: 200px;
-}
-
-.recipes-loading i,
-.recipes-error i,
-.recipes-empty i {
-    font-size: 32px;
-    margin-bottom: 15px;
-    color: var(--lora-accent);
-}
-
-.recipes-error i {
-    color: var(--lora-error);
-}
-
-/* Creator Information Styles */
-.creator-info {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: var(--space-1);
-    padding: 6px 10px;
-    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-sm);
-    max-width: fit-content;
-}
-
-[data-theme="dark"] .creator-info {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--lora-border);
-}
-
-.creator-avatar {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    overflow: hidden;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-}
-
-.creator-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.creator-placeholder {
-    background: var(--lora-accent);
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.creator-username {
-    font-size: 0.9em;
-    font-weight: 500;
-    color: var(--text-color);
-}
-
-/* Optional: add hover effect for creator info */
-.creator-info:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-/* Class tokens styling */
-.class-tokens-container {
-    padding: 10px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.class-token-item {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1) !important;
-    border: 1px solid var(--lora-accent) !important;
-}
-
-.token-badge {
-    background: var(--lora-accent);
-    color: white;
-    font-size: 0.7em;
-    padding: 2px 5px;
-    border-radius: 8px;
-    white-space: nowrap;
-}
-
-.dropdown-separator {
-    height: 1px;
-    background: var(--lora-border);
-    margin: 5px 10px;
-}
-
-/* Model Tags Edit Mode */
-.model-tags-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.edit-tags-btn {
-    background: transparent;
-    border: none;
-    color: var(--text-color);
-    opacity: 0;
-    cursor: pointer;
-    padding: 2px 5px;
-    border-radius: var(--border-radius-xs);
-    transition: all 0.2s ease;
-    margin-left: var(--space-1);
-}
-
-.edit-tags-btn.visible,
-.model-tags-container:hover .edit-tags-btn {
-    opacity: 0.5;
-}
-
-.edit-tags-btn:hover {
-    opacity: 0.8 !important;
-    background: rgba(0, 0, 0, 0.05);
-}
-
-[data-theme="dark"] .edit-tags-btn:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-/* Edit mode active state */
-.model-tags-container.edit-mode {
-    width: 100%;
-    display: block; /* Change to block display in edit mode */
-    flex-basis: 100%; /* Take full width in flex contexts */
-    grid-column: 1 / -1; /* Ensure it spans full width in grid layouts */
-}
-
-/* Fix for tags edit container width and position */
-.tags-edit-container {
-    padding: var(--space-2);
-    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid rgba(0, 0, 0, 0.1);
-    border-radius: var(--border-radius-sm);
-    margin-top: var(--space-2);
-    width: 100%; /* Ensure it takes full width */
-    min-width: 100%; /* Force minimum width */
-    max-width: 100%; /* Limit maximum width */
-    box-sizing: border-box; /* Include padding in width calculation */
-    position: relative; /* For proper positioning of elements inside */
-    display: block; /* Force block display */
-}
-
-[data-theme="dark"] .tags-edit-container {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--lora-border);
-}
-
-.tags-edit-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--lora-border);
-    width: 100%; /* Ensure header takes full width */
-}
-
-/* Style for the edit button when positioned in the header */
-.edit-header-btn {
-    display: inline-flex !important; /* Always show */
-    opacity: 0.8 !important;
-    color: var(--lora-accent) !important;
-    margin-left: auto; /* Push to right */
-}
-
-.tags-edit-content {
-    margin-bottom: var(--space-1);
-    width: 100%; /* Ensure full width */
-    display: block; /* Force block display */
-}
-
-.tags-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-items: flex-start;
-    margin-bottom: var(--space-2);
-    width: 100%; /* Ensure full width */
-}
-
-.tag-edit-tag {
-    display: inline-flex;
-    align-items: center;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-xs);
-    padding: 4px 8px;
-    position: relative;
-}
-
-.tag-edit-content {
-    color: var(--lora-accent) !important;
-    font-size: 0.85em;
-    line-height: 1.4;
-    word-break: break-word;
-}
-
-/* Delete button for tag */
-.delete-tag-btn {
-    position: absolute;
-    top: -5px;
-    right: -5px;
-    width: 16px;
-    height: 16px;
-    background: var(--lora-error);
-    color: white;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-    transition: transform 0.2s ease;
-}
-
-.delete-tag-btn:hover {
-    transform: scale(1.1);
-}
-
-/* Edit controls */
-.tags-edit-controls {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-2);
-    margin-top: var(--space-2);
-    margin-bottom: var(--space-2);
-}
-
-.tags-edit-controls button {
-    padding: 3px 8px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid var(--border-color);
-    background: var(--bg-color);
-    color: var(--text-color);
-    font-size: 0.85em;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    transition: all 0.2s ease;
-}
-
-.tags-edit-controls button:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.save-tags-btn {
-    background: var(--lora-accent) !important;
-    color: white !important;
-    border-color: var(--lora-accent) !important;
-}
-
-.save-tags-btn:hover {
-    opacity: 0.9;
-}
-
-/* Add tag form */
-.add-tag-form {
-    display: flex;
-    gap: var(--space-1);
-    position: relative;
-    width: 100%; /* Ensure full width */
-}
-
-.new-tag-input {
-    flex: 1;
-    padding: 4px 8px;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid var(--border-color);
-    background: var(--bg-color);
-    color: var(--text-color);
-    font-size: 0.9em;
-}
-
-.new-tag-input:focus {
-    border-color: var(--lora-accent);
-    outline: none;
-}
-
-/* Tag Suggestions Dropdown Styles */
-.tag-suggestions-dropdown {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: var(--bg-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius-sm);
-    margin-top: 4px;
-    z-index: 100;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.tag-suggestions-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 12px;
-    background: var(--card-bg);
-    border-bottom: 1px solid var(--border-color);
-}
-
-.tag-suggestions-header span {
-    font-size: 0.9em;
-    font-weight: 500;
-    color: var(--text-color);
-}
-
-.tag-suggestions-header small {
-    font-size: 0.8em;
-    opacity: 0.7;
-}
-
-.tag-suggestions-container {
-    max-height: 200px;
-    overflow-y: auto;
-    padding: 10px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-content: flex-start;
-}
-
-.tag-suggestion-item {
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 10px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: var(--border-radius-xs);
-    background: var(--lora-surface);
-    border: 1px solid var(--lora-border);
-    max-width: 150px;
-}
-
-.tag-suggestion-item:hover {
-    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
-    border-color: var(--lora-accent);
-}
-
-.tag-suggestion-item.already-added {
-    opacity: 0.7;
-    cursor: default;
-}
-
-.tag-suggestion-item.already-added:hover {
-    background: var(--lora-surface);
-    border-color: var(--lora-border);
-}
-
-.tag-suggestion-text {
-    color: var(--lora-accent);
-    font-size: 0.9em;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-right: 4px;
-    max-width: 100px;
-}
\ No newline at end of file
diff --git a/static/css/components/lora-modal/description.css b/static/css/components/lora-modal/description.css
new file mode 100644
index 00000000..495ca641
--- /dev/null
+++ b/static/css/components/lora-modal/description.css
@@ -0,0 +1,100 @@
+/* Model Description Styling */
+.model-description-container {
+  background: var(--lora-surface);
+  border-radius: var(--border-radius-sm);
+  overflow: hidden;
+  min-height: 200px;
+  position: relative;
+  /* Remove the max-height and overflow-y to allow content to expand naturally */
+}
+
+.model-description-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-3);
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 0.9em;
+}
+
+.model-description-loading .fa-spinner {
+  margin-right: var(--space-1);
+}
+
+.model-description-content {
+  padding: var(--space-2);
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  font-size: 0.95em;
+}
+
+.model-description-content h1,
+.model-description-content h2,
+.model-description-content h3,
+.model-description-content h4,
+.model-description-content h5,
+.model-description-content h6 {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+}
+
+.model-description-content p {
+  margin-bottom: 1em;
+}
+
+.model-description-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius-xs);
+  display: block;
+  margin: 1em 0;
+}
+
+.model-description-content pre {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: var(--border-radius-xs);
+  padding: var(--space-1);
+  white-space: pre-wrap;
+  margin: 1em 0;
+  overflow-x: auto;
+}
+
+.model-description-content code {
+  font-family: monospace;
+  font-size: 0.9em;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 0.1em 0.3em;
+  border-radius: 3px;
+}
+
+.model-description-content pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.model-description-content ul,
+.model-description-content ol {
+  margin-left: 1.5em;
+  margin-bottom: 1em;
+}
+
+.model-description-content li {
+  margin-bottom: 0.5em;
+}
+
+.model-description-content blockquote {
+  border-left: 3px solid var (--lora-accent);
+  padding-left: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+/* Adjust dark mode for model description */
+[data-theme="dark"] .model-description-content pre,
+[data-theme="dark"] .model-description-content code {
+  background: rgba(255, 255, 255, 0.05);
+}
\ No newline at end of file
diff --git a/static/css/components/lora-modal/lora-modal.css b/static/css/components/lora-modal/lora-modal.css
new file mode 100644
index 00000000..728d7d5f
--- /dev/null
+++ b/static/css/components/lora-modal/lora-modal.css
@@ -0,0 +1,501 @@
+/* Lora Modal Header */
+.modal-header {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: var(--space-3);
+    padding-bottom: var(--space-2);
+    border-bottom: 1px solid var(--lora-border);
+}
+
+/* Info Grid */
+.info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-2);
+    margin-bottom: var(--space-3);
+}
+
+.info-item {
+    padding: var(--space-2);
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+}
+
+/* 调整深色主题下的样式 */
+[data-theme="dark"] .info-item {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.info-item.full-width {
+    grid-column: 1 / -1;
+}
+
+.info-item label {
+    display: block;
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.8;
+    margin-bottom: 4px;
+}
+
+.info-item span {
+    color: var(--text-color);
+    word-break: break-word;
+}
+
+.info-item.usage-tips,
+.info-item.notes {
+    grid-column: 1 / -1 !important; /* Make notes section full width */
+}
+
+/* Add specific styles for notes content */
+.info-item.notes .editable-field [contenteditable] {
+    min-height: 60px; /* Increase height for multiple lines */
+    max-height: 150px; /* Limit maximum height */
+    overflow-y: auto; /* Add scrolling for long content */
+    white-space: pre-wrap; /* Preserve line breaks */
+    line-height: 1.5; /* Improve readability */
+    padding: 8px 12px; /* Slightly increase padding */
+}
+
+.file-path {
+    font-family: monospace;
+    font-size: 0.9em;
+}
+
+.description-text {
+    line-height: 1.5;
+    max-height: 100px;
+    overflow-y: auto;
+}
+
+/* Editable Fields */
+.editable-field {
+    position: relative;
+    display: flex;
+    gap: 8px;
+    align-items: flex-start;
+}
+
+.editable-field [contenteditable] {
+    flex: 1;
+    min-height: 24px;
+    padding: 4px 8px;
+    background: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-xs);
+    font-size: 0.9em;
+    line-height: 1.4;
+    color: var(--text-color);
+    transition: border-color 0.2s;
+    word-break: break-word;
+}
+
+.editable-field [contenteditable]:focus {
+    outline: none;
+    border-color: var(--lora-accent);
+    background: var(--bg-color);
+}
+
+.editable-field [contenteditable]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-color);
+    opacity: 0.5;
+}
+
+.save-btn {
+    padding: 4px 8px;
+    background: var(--lora-accent);
+    border: none;
+    border-radius: var(--border-radius-xs);
+    color: white;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.save-btn:hover {
+    opacity: 0.9;
+}
+
+.save-btn i {
+    font-size: 0.9em;
+}
+
+@media (max-width: 640px) {
+    .info-item.usage-tips,
+    .info-item.notes {
+        grid-column: 1 / -1;
+    }
+}
+
+/* 修改 back-to-top 按钮样式，使其固定在 modal 内部 */
+.modal-content .back-to-top {
+    position: sticky; /* 改用 sticky 定位 */
+    float: right; /* 使用 float 确保按钮在右侧 */
+    bottom: 20px; /* 距离底部的距离 */
+    margin-right: 20px; /* 右侧间距 */
+    margin-top: -56px; /* 负边距确保不占用额外空间 */
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: all 0.3s ease;
+    z-index: 10;
+}
+
+.modal-content .back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.modal-content .back-to-top:hover {
+    background: var(--lora-accent);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* File name copy styles */
+.file-name-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px;
+    border-radius: var(--border-radius-xs);
+    transition: background-color 0.2s;
+    position: relative;
+}
+
+.file-name-content {
+    padding: 2px 4px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid transparent;
+    flex: 1;
+}
+
+.file-name-wrapper.editing .file-name-content {
+    border: 1px solid var(--lora-accent);
+    background: var(--bg-color);
+    outline: none;
+}
+
+.edit-file-name-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-file-name-btn.visible,
+.file-name-wrapper:hover .edit-file-name-btn {
+    opacity: 0.5;
+}
+
+.edit-file-name-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-file-name-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Base Model and Size combined styles */
+.info-item.base-size {
+    display: flex;
+    gap: var(--space-3);
+}
+
+.base-wrapper {
+    flex: 2;  /* 分配更多空间给base model */
+}
+
+/* Base model display and editing styles */
+.base-model-display {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.base-model-content {
+    padding: 2px 4px;
+    border-radius: var(--border-radius-xs);
+    border: 1px solid transparent;
+    color: var(--text-color);
+    flex: 1;
+}
+
+.edit-base-model-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-base-model-btn.visible,
+.base-model-display:hover .edit-base-model-btn {
+    opacity: 0.5;
+}
+
+.edit-base-model-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-base-model-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.base-model-selector {
+    width: 100%;
+    padding: 3px 5px;
+    background: var(--bg-color);
+    border: 1px solid var(--lora-accent);
+    border-radius: var(--border-radius-xs);
+    color: var(--text-color);
+    font-size: 0.9em;
+    outline: none;
+    margin-right: var(--space-1);
+}
+
+.size-wrapper {
+    flex: 1;
+    border-left: 1px solid var(--lora-border);
+    padding-left: var(--space-3);
+}
+
+.base-wrapper label,
+.size-wrapper label {
+    display: block;
+    margin-bottom: 4px;
+}
+
+.size-wrapper span {
+    font-family: monospace;
+    font-size: 0.9em;
+    opacity: 0.9;
+}
+
+/* New Model Name Header Styles */
+.model-name-header {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 40px); /* Avoid overlap with close button */
+    position: relative;
+}
+
+.model-name-content {
+    margin: 0;
+    padding: var(--space-1);
+    border-radius: var(--border-radius-xs);
+    font-size: 1.5em !important;
+    font-weight: 600;
+    line-height: 1.2;
+    color: var(--text-color);
+    border: 1px solid transparent;
+    outline: none;
+    flex: 1;
+}
+
+.model-name-content:focus {
+    border: 1px solid var(--lora-accent);
+    background: var(--bg-color);
+}
+
+.edit-model-name-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    opacity: 0;
+    cursor: pointer;
+    padding: 2px 5px;
+    border-radius: var(--border-radius-xs);
+    transition: all 0.2s ease;
+    margin-left: var(--space-1);
+}
+
+.edit-model-name-btn.visible,
+.model-name-header:hover .edit-model-name-btn {
+    opacity: 0.5;
+}
+
+.edit-model-name-btn:hover {
+    opacity: 0.8 !important;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-model-name-btn:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+/* Tab System Styling */
+.showcase-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--lora-border);
+    margin-bottom: var(--space-2);
+    position: relative;
+    z-index: 2;
+}
+
+.tab-btn {
+    padding: var(--space-1) var(--space-2);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-color);
+    cursor: pointer;
+    font-size: 0.95em;
+    transition: all 0.2s;
+    opacity: 0.7;
+    position: relative;
+}
+
+.tab-btn:hover {
+    opacity: 1;
+    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.05);
+}
+
+.tab-btn.active {
+    border-bottom: 2px solid var(--lora-accent);
+    opacity: 1;
+    font-weight: 600;
+}
+
+.tab-content {
+    position: relative;
+    min-height: 100px;
+}
+
+.tab-pane {
+    display: none;
+}
+
+.tab-pane.active {
+    display: block;
+}
+
+.view-all-btn {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 12px;
+    background-color: var(--lora-accent);
+    color: var(--lora-text);
+    border: none;
+    border-radius: var(--border-radius-sm);
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 13px;
+}
+
+.view-all-btn:hover {
+    opacity: 0.9;
+}
+
+/* Loading, error and empty states */
+.recipes-loading,
+.recipes-error,
+.recipes-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    text-align: center;
+    min-height: 200px;
+}
+
+.recipes-loading i,
+.recipes-error i,
+.recipes-empty i {
+    font-size: 32px;
+    margin-bottom: 15px;
+    color: var(--lora-accent);
+}
+
+.recipes-error i {
+    color: var(--lora-error);
+}
+
+/* Creator Information Styles */
+.creator-info {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: var(--space-1);
+    padding: 6px 10px;
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+    max-width: fit-content;
+}
+
+[data-theme="dark"] .creator-info {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
+.creator-avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    overflow: hidden;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--lora-surface);
+    border: 1px solid var(--lora-border);
+}
+
+.creator-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.creator-placeholder {
+    background: var(--lora-accent);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.creator-username {
+    font-size: 0.9em;
+    font-weight: 500;
+    color: var(--text-color);
+}
+
+/* Optional: add hover effect for creator info */
+.creator-info:hover {
+    background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+    border-color: var(--lora-accent);
+}
\ No newline at end of file
diff --git a/static/css/components/lora-modal/preset-tags.css b/static/css/components/lora-modal/preset-tags.css
new file mode 100644
index 00000000..315e5bda
--- /dev/null
+++ b/static/css/components/lora-modal/preset-tags.css
@@ -0,0 +1,68 @@
+/* Update Preset Controls styles */
+.preset-controls {
+  display: flex;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.preset-controls select,
+.preset-controls input {
+  padding: var(--space-1);
+  background: var(--bg-color);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  color: var(--text-color);
+}
+
+.preset-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+}
+
+.preset-tag {
+  display: flex;
+  align-items: center;
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  padding: calc(var(--space-1) * 0.5) var(--space-1);
+  gap: var(--space-1);
+  transition: all 0.2s ease;
+}
+
+.preset-tag span {
+  color: var(--lora-accent);
+  font-size: 0.9em;
+}
+
+.preset-tag i {
+  color: var(--text-color);
+  opacity: 0.5;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.preset-tag:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.preset-tag i:hover {
+  color: var(--lora-error);
+  opacity: 1;
+}
+
+.add-preset-btn {
+  padding: calc(var(--space-1) * 0.5) var(--space-2);
+  background: var(--lora-accent);
+  color: var(--lora-text);
+  border: none;
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.add-preset-btn:hover {
+  opacity: 0.9;
+}
\ No newline at end of file
diff --git a/static/css/components/lora-modal/showcase.css b/static/css/components/lora-modal/showcase.css
new file mode 100644
index 00000000..d1d684e8
--- /dev/null
+++ b/static/css/components/lora-modal/showcase.css
@@ -0,0 +1,292 @@
+/* Showcase Section */
+.showcase-section {
+  position: relative;
+  margin-top: var(--space-4);
+}
+
+.carousel {
+  transition: max-height 0.3s ease-in-out;
+  overflow: hidden;
+}
+
+.carousel.collapsed {
+  max-height: 0;
+}
+
+.carousel-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.media-wrapper {
+  position: relative;
+  width: 100%;
+  background: var(--lora-surface);
+  margin-bottom: var(--space-2);
+  overflow: hidden; /* Ensure metadata panel is contained */
+}
+
+.media-wrapper:last-child {
+  margin-bottom: 0;
+}
+
+.media-wrapper img,
+.media-wrapper video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.no-examples {
+  text-align: center;
+  padding: var(--space-3);
+  color: var(--text-color);
+  opacity: 0.7;
+}
+
+/* Adjust the media wrapper for tab system */
+#showcase-tab .carousel-container {
+  margin-top: var(--space-2);
+}
+
+/* Add styles for blurred showcase content */
+.nsfw-media-wrapper {
+  position: relative;
+}
+
+.media-wrapper img.blurred,
+.media-wrapper video.blurred {
+  filter: blur(25px);
+}
+
+.media-wrapper .nsfw-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* Position the toggle button at the top left of showcase media */
+.showcase-toggle-btn {
+  position: absolute;
+  left: var(--space-1);
+  top: var(--space-1);
+  z-index: 3;
+}
+
+/* Make sure media wrapper maintains position: relative for absolute positioning of children */
+.carousel .media-wrapper {
+  position: relative;
+}
+
+/* Image Metadata Panel Styles */
+.image-metadata-panel {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--bg-color);
+  border-top: 1px solid var(--border-color);
+  padding: var(--space-2);
+  transform: translateY(100%);
+  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.25s ease;
+  z-index: 5;
+  max-height: 50%; /* Reduced to take less space */
+  overflow-y: auto;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Show metadata panel only when the 'visible' class is added */
+.media-wrapper .image-metadata-panel.visible {
+  transform: translateY(0);
+  opacity: 0.98;
+  pointer-events: auto;
+}
+
+/* Adjust to dark theme */
+[data-theme="dark"] .image-metadata-panel {
+  background: var(--card-bg);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.metadata-content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+/* Styling for parameters tags */
+.params-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: var(--space-1);
+  padding-bottom: var(--space-1);
+  border-bottom: 1px solid var(--lora-border);
+}
+
+.param-tag {
+  display: inline-flex;
+  align-items: center;
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 6px;
+  font-size: 0.8em;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.param-tag .param-name {
+  font-weight: 600;
+  color: var(--text-color);
+  margin-right: 4px;
+  opacity: 0.8;
+}
+
+.param-tag .param-value {
+  color: var(--lora-accent);
+}
+
+/* Special styling for prompt row */
+.metadata-row.prompt-row {
+  flex-direction: column;
+  padding-top: 0;
+}
+
+.metadata-row.prompt-row + .metadata-row.prompt-row {
+  margin-top: var(--space-2);
+}
+
+.metadata-label {
+  font-weight: 600;
+  color: var(--text-color);
+  opacity: 0.8;
+  font-size: 0.85em;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.metadata-prompt-wrapper {
+  position: relative;
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-xs);
+  padding: 6px 30px 6px 8px;
+  margin-top: 2px;
+  max-height: 80px; /* Reduced from 120px */
+  overflow-y: auto;
+  word-break: break-word;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.metadata-prompt {
+  color: var(--text-color);
+  font-family: monospace;
+  font-size: 0.85em;
+  white-space: pre-wrap;
+}
+
+.copy-prompt-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 3px;
+  transition: all 0.2s ease;
+}
+
+.copy-prompt-btn:hover {
+  opacity: 1;
+  color: var(--lora-accent);
+}
+
+/* Scrollbar styling for metadata panel */
+.image-metadata-panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.image-metadata-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.image-metadata-panel::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 3px;
+}
+
+/* For Firefox */
+.image-metadata-panel {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border-color) transparent;
+}
+
+/* No metadata message styling */
+.no-metadata-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  color: var(--text-color);
+  opacity: 0.7;
+  text-align: center;
+  font-style: italic;
+  gap: 8px;
+}
+
+.no-metadata-message i {
+  font-size: 1.1em;
+  color: var(--lora-accent);
+  opacity: 0.8;
+}
+
+/* Scroll Indicator */
+.scroll-indicator {
+  cursor: pointer;
+  padding: var(--space-2);
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  border-radius: var(--border-radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: var(--space-2);
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.scroll-indicator:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  transform: translateY(-1px);
+}
+
+.scroll-indicator span {
+  font-size: 0.9em;
+  color: var(--text-color);
+}
+
+.lazy {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.lazy[src] {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/static/css/components/lora-modal/tag.css b/static/css/components/lora-modal/tag.css
new file mode 100644
index 00000000..3d4d1ffa
--- /dev/null
+++ b/static/css/components/lora-modal/tag.css
@@ -0,0 +1,397 @@
+/* Model Tags styles */
+.model-tags {
+  display: none;
+}
+
+.model-tag {
+  display: none;
+}
+
+/* Updated Model Tags styles - improved visibility in light theme */
+.model-tags-container {
+  position: relative;
+}
+
+.model-tags-compact {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.model-tag-compact {
+  /* Updated styles to match info-item appearance */
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 8px;
+  font-size: 0.75em;
+  color: var(--text-color);
+  white-space: nowrap;
+}
+
+/* Style for empty tags placeholder */
+.model-tag-empty {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px dashed rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 8px;
+  font-size: 0.75em;
+  color: var(--text-color);
+  white-space: nowrap;
+  opacity: 0.7;
+  font-style: italic;
+}
+
+/* Adjust dark theme tag styles */
+[data-theme="dark"] .model-tag-compact {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* Dark theme for empty tags */
+[data-theme="dark"] .model-tag-empty {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px dashed var(--lora-border);
+}
+
+.model-tag-more {
+  background: var(--lora-accent);
+  color: var(--lora-text);
+  border-radius: var(--border-radius-xs);
+  padding: 2px 8px;
+  font-size: 0.75em;
+  cursor: pointer;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+.model-tags-tooltip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow for better visibility */
+  padding: 10px 14px;
+  max-width: 400px;
+  z-index: 10;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: all 0.2s ease;
+  pointer-events: none;
+}
+
+.model-tags-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto; /* Enable interactions when visible */
+}
+
+.tooltip-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.tooltip-tag {
+  /* Updated styles to match info-item appearance */
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-xs);
+  padding: 3px 8px;
+  font-size: 0.75em;
+  color: var(--text-color);
+}
+
+/* Adjust dark theme tooltip tag styles */
+[data-theme="dark"] .tooltip-tag {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* Model Tags Edit Mode */
+.model-tags-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.edit-tags-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  opacity: 0;
+  cursor: pointer;
+  padding: 2px 5px;
+  border-radius: var(--border-radius-xs);
+  transition: all 0.2s ease;
+  margin-left: var(--space-1);
+}
+
+.edit-tags-btn.visible,
+.model-tags-container:hover .edit-tags-btn {
+  opacity: 0.5;
+}
+
+.edit-tags-btn:hover {
+  opacity: 0.8 !important;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-tags-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Edit mode active state */
+.model-tags-container.edit-mode {
+  width: 100%;
+  display: block; /* Change to block display in edit mode */
+  flex-basis: 100%; /* Take full width in flex contexts */
+  grid-column: 1 / -1; /* Ensure it spans full width in grid layouts */
+}
+
+/* Fix for tags edit container width and position */
+.tags-edit-container {
+  padding: var(--space-2);
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-sm);
+  margin-top: var(--space-2);
+  width: 100%; /* Ensure it takes full width */
+  min-width: 100%; /* Force minimum width */
+  max-width: 100%; /* Limit maximum width */
+  box-sizing: border-box; /* Include padding in width calculation */
+  position: relative; /* For proper positioning of elements inside */
+  display: block; /* Force block display */
+}
+
+[data-theme="dark"] .tags-edit-container {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+.tags-edit-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--lora-border);
+  width: 100%; /* Ensure header takes full width */
+}
+
+/* Style for the edit button when positioned in the header */
+.edit-header-btn {
+  display: inline-flex !important; /* Always show */
+  opacity: 0.8 !important;
+  color: var(--lora-accent) !important;
+  margin-left: auto; /* Push to right */
+}
+
+.tags-edit-content {
+  margin-bottom: var(--space-1);
+  width: 100%; /* Ensure full width */
+  display: block; /* Force block display */
+}
+
+.tags-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+  margin-bottom: var(--space-2);
+  width: 100%; /* Ensure full width */
+}
+
+.tag-edit-tag {
+  display: inline-flex;
+  align-items: center;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-xs);
+  padding: 4px 8px;
+  position: relative;
+}
+
+.tag-edit-content {
+  color: var(--lora-accent) !important;
+  font-size: 0.85em;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* Delete button for tag */
+.delete-tag-btn {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  background: var(--lora-error);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  transition: transform 0.2s ease;
+}
+
+.delete-tag-btn:hover {
+  transform: scale(1.1);
+}
+
+/* Edit controls */
+.tags-edit-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.tags-edit-controls button {
+  padding: 3px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 0.85em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s ease;
+}
+
+.tags-edit-controls button:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.save-tags-btn {
+  background: var(--lora-accent) !important;
+  color: white !important;
+  border-color: var(--lora-accent) !important;
+}
+
+.save-tags-btn:hover {
+  opacity: 0.9;
+}
+
+/* Add tag form */
+.add-tag-form {
+  display: flex;
+  gap: var(--space-1);
+  position: relative;
+  width: 100%; /* Ensure full width */
+}
+
+.new-tag-input {
+  flex: 1;
+  padding: 4px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 0.9em;
+}
+
+.new-tag-input:focus {
+  border-color: var(--lora-accent);
+  outline: none;
+}
+
+/* Tag Suggestions Dropdown Styles */
+.tag-suggestions-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  margin-top: 4px;
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.tag-suggestions-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tag-suggestions-header span {
+  font-size: 0.9em;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.tag-suggestions-header small {
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+
+.tag-suggestions-container {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-content: flex-start;
+}
+
+.tag-suggestion-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: var(--border-radius-xs);
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  max-width: 150px;
+}
+
+.tag-suggestion-item:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.tag-suggestion-item.already-added {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.tag-suggestion-item.already-added:hover {
+  background: var(--lora-surface);
+  border-color: var(--lora-border);
+}
+
+.tag-suggestion-text {
+  color: var(--lora-accent);
+  font-size: 0.9em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+  max-width: 100px;
+}
\ No newline at end of file
diff --git a/static/css/components/lora-modal/triggerwords.css b/static/css/components/lora-modal/triggerwords.css
new file mode 100644
index 00000000..dcdacc3e
--- /dev/null
+++ b/static/css/components/lora-modal/triggerwords.css
@@ -0,0 +1,389 @@
+/* Update Trigger Words styles */
+.info-item.trigger-words {
+  padding: var(--space-2);
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-sm);
+}
+
+/* 调整 trigger words 样式 */
+[data-theme="dark"] .info-item.trigger-words {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--lora-border);
+}
+
+/* New header style for trigger words */
+.trigger-words-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.edit-trigger-words-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-color);
+  opacity: 0.5;
+  cursor: pointer;
+  padding: 2px 5px;
+  border-radius: var(--border-radius-xs);
+  transition: all 0.2s ease;
+}
+
+.edit-trigger-words-btn:hover {
+  opacity: 0.8;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .edit-trigger-words-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Edit mode active state */
+.trigger-words.edit-mode .edit-trigger-words-btn {
+  opacity: 0.8;
+  color: var(--lora-accent);
+}
+
+.trigger-words-content {
+  margin-bottom: var(--space-1);
+}
+
+.trigger-words-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+/* No trigger words message */
+.no-trigger-words {
+  color: var(--text-color);
+  opacity: 0.7;
+  font-style: italic;
+  font-size: 0.9em;
+}
+
+/* Update Trigger Words styles */
+.trigger-word-tag {
+  display: inline-flex;
+  align-items: center;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-xs);
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  gap: 6px;
+  position: relative;
+}
+
+/* Update trigger word content color to use theme accent */
+.trigger-word-content {
+  color: var(--lora-accent) !important; /* Override general span color */
+  font-size: 0.85em;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* Keep the hover effect using accent color */
+.trigger-word-tag:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.trigger-word-copy {
+  display: flex;
+  align-items: center;
+  color: var(--text-color);
+  opacity: 0.5;
+  flex-shrink: 0;
+  transition: opacity 0.2s;
+}
+
+/* Delete button for trigger word */
+.delete-trigger-word-btn {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 16px;
+  height: 16px;
+  background: var(--lora-error);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  transition: transform 0.2s ease;
+}
+
+.delete-trigger-word-btn:hover {
+  transform: scale(1.1);
+}
+
+/* Edit controls */
+.trigger-words-edit-controls {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+}
+
+.trigger-words-edit-controls button {
+  padding: 3px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 0.85em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: all 0.2s ease;
+}
+
+.trigger-words-edit-controls button:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.trigger-words-edit-controls button i {
+  font-size: 0.8em;
+}
+
+.save-trigger-words-btn {
+  background: var(--lora-accent) !important;
+  color: white !important;
+  border-color: var(--lora-accent) !important;
+}
+
+.save-trigger-words-btn:hover {
+  opacity: 0.9;
+}
+
+/* Add trigger word form */
+.add-trigger-word-form {
+  margin-top: var(--space-2);
+  display: flex;
+  gap: var(--space-1);
+  position: relative; /* Added for dropdown positioning */
+}
+
+.new-trigger-word-input {
+  flex: 1;
+  padding: 4px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var(--bg-color);
+  color: var(--text-color);
+  font-size: 0.9em;
+}
+
+.new-trigger-word-input:focus {
+  border-color: var(--lora-accent);
+  outline: none;
+}
+
+.confirm-add-trigger-word-btn,
+.cancel-add-trigger-word-btn {
+  padding: 4px 8px;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--border-color);
+  background: var (--bg-color);
+  color: var(--text-color);
+  font-size: 0.85em;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.confirm-add-trigger-word-btn {
+  background: var(--lora-accent);
+  color: white;
+  border-color: var(--lora-accent);
+}
+
+.confirm-add-trigger-word-btn:hover {
+  opacity: 0.9;
+}
+
+.cancel-add-trigger-word-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] .cancel-add-trigger-word-btn:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+/* Trained Words Loading Indicator */
+.trained-words-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--space-1) 0;
+  color: var(--text-color);
+  opacity: 0.7;
+  font-size: 0.9em;
+  gap: 8px;
+}
+
+.trained-words-loading i {
+  color: var(--lora-accent);
+}
+
+/* Trained Words Dropdown Styles */
+.trained-words-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  margin-top: 4px;
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.trained-words-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--card-bg);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.trained-words-header span {
+  font-size: 0.9em;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.trained-words-header small {
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+
+.trained-words-container {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-content: flex-start;
+}
+
+.trained-word-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border-radius: var(--border-radius-xs);
+  background: var(--lora-surface);
+  border: 1px solid var(--lora-border);
+  max-width: 150px;
+}
+
+.trained-word-item:hover {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1);
+  border-color: var(--lora-accent);
+}
+
+.trained-word-item.already-added {
+  opacity: 0.7;
+  cursor: default;
+}
+
+.trained-word-item.already-added:hover {
+  background: var(--lora-surface);
+  border-color: var(--lora-border);
+}
+
+.trained-word-text {
+  color: var(--lora-accent);
+  font-size: 0.9em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 4px;
+  max-width: 100px;
+}
+
+.trained-word-meta {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.trained-word-freq {
+  color: var (--text-color);
+  font-size: 0.75em;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 10px;
+  min-width: 20px;
+  padding: 1px 5px;
+  text-align: center;
+  line-height: 1.2;
+}
+
+[data-theme="dark"] .trained-word-freq {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.added-indicator {
+  color: var(--lora-accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+}
+
+.no-trained-words {
+  padding: 16px 12px;
+  text-align: center;
+  color: var(--text-color);
+  opacity: 0.7;
+  font-style: italic;
+  font-size: 0.9em;
+}
+
+/* Class tokens styling */
+.class-tokens-container {
+  padding: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.class-token-item {
+  background: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.1) !important;
+  border: 1px solid var(--lora-accent) !important;
+}
+
+.token-badge {
+  background: var(--lora-accent);
+  color: white;
+  font-size: 0.7em;
+  padding: 2px 5px;
+  border-radius: 8px;
+  white-space: nowrap;
+}
+
+.dropdown-separator {
+  height: 1px;
+  background: var(--lora-border);
+  margin: 5px 10px;
+}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index d51fa391..6f61dcda 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -13,7 +13,12 @@
 @import 'components/loading.css';
 @import 'components/menu.css';
 @import 'components/update-modal.css';
-@import 'components/lora-modal.css';
+@import 'components/lora-modal/lora-modal.css';
+@import 'components/lora-modal/description.css';
+@import 'components/lora-modal/tag.css';
+@import 'components/lora-modal/preset-tags.css';
+@import 'components/lora-modal/showcase.css';
+@import 'components/lora-modal/triggerwords.css';
 @import 'components/support-modal.css';
 @import 'components/search-filter.css';
 @import 'components/bulk.css';