diff --git a/src/components/GenerationImage.vue b/src/components/GenerationImage.vue
new file mode 100644
index 0000000..a125ea5
--- /dev/null
+++ b/src/components/GenerationImage.vue
@@ -0,0 +1,181 @@
+<script setup>
+import { ref, computed } from 'vue'
+import Button from 'primevue/button'
+
+const props = defineProps({
+    generation: {
+        type: Object,
+        required: true
+    },
+    apiUrl: {
+        type: String,
+        required: true
+    },
+    isSelectMode: {
+        type: Boolean,
+        default: false
+    },
+    isSelected: {
+        type: Boolean,
+        default: false
+    },
+    showNsfwGlobal: {
+        type: Boolean,
+        default: false
+    },
+    activeOverlayId: {
+        type: [String, Number],
+        default: null
+    }
+})
+
+const emit = defineEmits(['toggle-select', 'open-preview', 'toggle-like', 'delete', 'reuse-prompt', 'reuse-asset', 'use-result', 'toggle-overlay'])
+
+const isTemporarilyUnblurred = ref(false)
+
+const isBlurred = computed(() => {
+    return props.generation.nsfw && !props.showNsfwGlobal && !isTemporarilyUnblurred.value
+})
+
+const toggleBlur = () => {
+    isTemporarilyUnblurred.value = !isTemporarilyUnblurred.value
+}
+
+const handleImageClick = (e) => {
+    if (props.isSelectMode) {
+        emit('toggle-select', props.generation.result_list[0])
+    } else {
+        if (isBlurred.value) {
+            // If blurred, click might just unblur or do nothing? 
+            // Let's let the button handle unblur, and click opens preview if unblurred?
+            // Or maybe click unblurs? Let's stick to button for unblur to be explicit.
+            // But if user clicks image, maybe show preview anyway? 
+            // Usually blurred images shouldn't be previewed full size unless unblurred.
+            // Let's allow preview, but maybe preview also needs to handle blur? 
+            // For now, let's just open preview. The preview modal might need its own blur logic or just show it.
+            // Let's assume preview shows it.
+             emit('open-preview', props.apiUrl + '/assets/' + props.generation.result_list[0])
+        } else {
+            emit('open-preview', props.apiUrl + '/assets/' + props.generation.result_list[0])
+        }
+    }
+}
+
+const handleOverlayClick = () => {
+    emit('toggle-overlay', props.generation.id)
+}
+
+</script>
+
+<template>
+    <div class="w-full h-full relative group" @click="handleOverlayClick">
+        
+        <!-- Image -->
+        <div class="w-full h-full overflow-hidden relative">
+            <img v-if="generation.result_list && generation.result_list.length > 0"
+                :src="apiUrl + '/assets/' + generation.result_list[0] + '?thumbnail=true'"
+                class="w-full h-full object-cover transition-all duration-300"
+                :class="{ 'blur-xl scale-110': isBlurred, 'cursor-pointer': !isSelectMode }"
+                @click.stop="handleImageClick" 
+            />
+            
+            <!-- NSFW Badge / Unblur Button -->
+            <div v-if="isBlurred" class="absolute inset-0 flex flex-col items-center justify-center z-20 pointer-events-none">
+                <div class="bg-black/60 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10 flex items-center gap-2 pointer-events-auto cursor-pointer hover:bg-black/80 transition-colors" @click.stop="toggleBlur">
+                    <i class="pi pi-eye-slash text-red-400 text-xs"></i>
+                    <span class="text-[10px] font-bold text-red-400 uppercase tracking-wider">NSFW</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Liked badge -->
+        <div v-if="generation.is_liked && !isBlurred"
+            class="absolute top-2 right-2 z-20 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
+            <i class="pi pi-heart-fill text-white text-[10px]"></i>
+        </div>
+
+        <!-- FAILED state -->
+        <div v-if="generation.status === 'failed'"
+            class="absolute inset-0 flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20">
+            <div class="w-full flex justify-end">
+                <Button icon="pi pi-trash" class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
+                    @click.stop="emit('delete', generation)" />
+            </div>
+            <div class="flex flex-col items-center justify-center flex-1">
+                <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
+                <span class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
+                <span v-if="generation.failed_reason" class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
+                    v-tooltip.top="generation.failed_reason">{{ generation.failed_reason }}</span>
+            </div>
+            <div class="w-full flex gap-1 z-10">
+                <Button icon="pi pi-comment" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                    @click.stop="emit('reuse-prompt', generation)" />
+                <Button icon="pi pi-images" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                    @click.stop="emit('reuse-asset', generation)" />
+            </div>
+        </div>
+
+        <!-- PROCESSING state -->
+        <div v-else-if="['processing', 'starting', 'running'].includes(generation.status)"
+            class="absolute inset-0 flex flex-col items-center justify-center bg-slate-800/50 border border-violet-500/20">
+            <div class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse"></div>
+            <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
+            <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ generation.status }}...</span>
+        </div>
+
+        <!-- HOVER OVERLAY (Success & Not Blurred) -->
+        <div v-if="generation.result_list && generation.result_list.length > 0 && !isBlurred"
+            class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
+            :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== generation.id, 'opacity-100 pointer-events-auto': activeOverlayId === generation.id }">
+
+            <!-- Top Right -->
+            <div class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
+                <div class="flex gap-1">
+                    <Button :icon="generation.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'"
+                        class="!w-6 !h-6 !rounded-full !border-none !text-[10px] transition-colors"
+                        :class="generation.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
+                        @click.stop="emit('toggle-like', generation)" />
+                    <Button icon="pi pi-pencil"
+                        class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
+                        @click.stop="emit('use-result', generation)" />
+                    <Button icon="pi pi-trash"
+                        class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
+                        @click.stop="emit('delete', generation)" />
+                </div>
+            </div>
+
+            <!-- Center -->
+            <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
+                <div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
+                    <span class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{ generation.cost }} $</span>
+                    <span v-if="generation.execution_time_seconds" class="text-[8px] text-slate-500 font-mono">{{ generation.execution_time_seconds.toFixed(1) }}s</span>
+                </div>
+                <Button icon="pi pi-eye" rounded text
+                    class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
+                    @click.stop="emit('open-preview', apiUrl + '/assets/' + generation.result_list[0])" />
+            </div>
+
+            <!-- Bottom -->
+            <div class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
+                <div class="flex gap-1 mb-1">
+                    <Button icon="pi pi-comment" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                        @click.stop="emit('reuse-prompt', generation)" />
+                    <Button icon="pi pi-images" class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
+                        @click.stop="emit('reuse-asset', generation)" />
+                </div>
+                <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ generation.prompt }}</p>
+            </div>
+        </div>
+
+        <!-- Select mode checkbox overlay -->
+        <div v-if="isSelectMode && generation.result_list && generation.result_list.length > 0"
+            class="absolute inset-0 z-30 cursor-pointer"
+            @click.stop="emit('toggle-select', generation.result_list[0])">
+            <div class="absolute top-2 left-2 w-6 h-6 rounded-lg flex items-center justify-center transition-all"
+                :class="isSelected ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent hover:border-white/60'">
+                <i class="pi pi-check" style="font-size: 12px"></i>
+            </div>
+            <div v-if="isSelected" class="absolute inset-0 bg-violet-600/20 pointer-events-none"></div>
+        </div>
+    </div>
+</template>
diff --git a/src/views/FlexibleGenerationView.vue b/src/views/FlexibleGenerationView.vue
index 92047e1..65ae666 100644
--- a/src/views/FlexibleGenerationView.vue
+++ b/src/views/FlexibleGenerationView.vue
@@ -12,12 +12,14 @@ import Checkbox from 'primevue/checkbox'
 import Dropdown from 'primevue/dropdown'
 import DatePicker from 'primevue/datepicker'
 import Tag from 'primevue/tag'
+import InputSwitch from 'primevue/inputswitch'
 
 import Skeleton from 'primevue/skeleton'
 import {useAlbumStore} from '../stores/albums'
 import {useToast} from 'primevue/usetoast'
 import Toast from 'primevue/toast'
 import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
+import GenerationImage from '../components/GenerationImage.vue'
 
 const router = useRouter()
 const API_URL = import.meta.env.VITE_API_URL
@@ -161,6 +163,13 @@ const isImprovingPrompt = ref(false)
 const previousPrompt = ref('')
 let _savedEnvironmentId = null
 
+// NSFW Toggle
+const showNsfwGlobal = ref(localStorage.getItem('show_nsfw_global') === 'true')
+
+watch(showNsfwGlobal, (val) => {
+    localStorage.setItem('show_nsfw_global', val)
+})
+
 const loadEnvironments = async (charId) => {
     if (!charId) {
         environments.value = []
@@ -923,111 +932,24 @@ const confirmAddToAlbum = async () => {
                             <div class="w-full h-full grid gap-0.5"
                                 :class="item.children.length <= 2 ? 'grid-cols-1' : 'grid-cols-2'">
                                 <div v-for="child in item.children" :key="child.id"
-                                    class="relative group overflow-hidden" @click="toggleMobileOverlay(child.id)">
-
-                                    <!-- Child: has result -->
-                                    <img v-if="child.result_list && child.result_list.length > 0"
-                                        :src="API_URL + '/assets/' + child.result_list[0] + '?thumbnail=true'"
-                                        class="w-full h-full object-cover" />
+                                    class="relative group overflow-hidden">
                                     
-                                    <!-- Child: Liked badge -->
-                                    <div v-if="child.is_liked"
-                                        class="absolute top-1 right-1 z-20 w-4 h-4 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
-                                        <i class="pi pi-heart-fill text-white text-[6px]"></i>
-                                    </div>
-
-                                    <!-- Child: processing -->
-                                    <div v-else-if="['processing', 'starting', 'running'].includes(child.status)"
-                                        class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50">
-                                        <div
-                                            class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
-                                        </div>
-                                        <div
-                                            class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
-                                        </div>
-                                        <i class="pi pi-spin pi-spinner text-violet-500 text-sm relative z-10"></i>
-                                    </div>
-
-                                    <!-- Child: FAILED -->
-                                    <div v-else-if="child.status === 'failed'"
-                                        class="w-full h-full flex flex-col items-center justify-center bg-red-500/10 relative group p-2 text-center"
-                                        v-tooltip.bottom="item.children.length > 1 ? (child.failed_reason || 'Generation failed') : null">
-                                        <i class="pi pi-times-circle text-red-500 text-lg mb-0.5"></i>
-                                        <span
-                                            class="text-[8px] font-bold text-red-400 uppercase tracking-wide leading-tight">Failed</span>
-
-                                        <!-- Show error text if only 1 child -->
-                                        <span v-if="item.children.length === 1 && child.failed_reason"
-                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight">
-                                            {{ child.failed_reason }}
-                                        </span>
-
-                                        <!-- Delete Persistent for failed child -->
-                                        <div class="absolute top-0 right-0 p-1 z-10">
-                                            <Button icon="pi pi-trash" size="small"
-                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white pointer-events-auto"
-                                                @click.stop="deleteGeneration(child)" />
-                                        </div>
-                                    </div>
-
-                                    <!-- Child: other -->
-                                    <div v-else class="w-full h-full flex items-center justify-center bg-slate-800">
-                                        <i class="pi pi-image text-lg opacity-20 text-slate-600"></i>
-                                    </div>
-
-                                    <!-- SUCCESS overlay per child (hover) -->
-                                    <div v-if="child.result_list && child.result_list.length > 0"
-                                        class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-1 z-10"
-                                        :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== child.id, 'opacity-100 pointer-events-auto': activeOverlayId === child.id }">
-
-                                        <!-- Top right: edit, delete -->
-                                        <div class="flex justify-end items-start gap-0.5">
-                                            <Button :icon="child.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'" size="small"
-                                                class="!w-5 !h-5 !rounded-full !border-none !text-[8px] transition-colors"
-                                                :class="child.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
-                                                @click.stop="toggleLike(child)" />
-                                            <Button icon="pi pi-pencil" size="small"
-                                                class="!w-5 !h-5 !rounded-full !bg-white/20 !border-none !text-white !text-[8px] hover:!bg-violet-500"
-                                                @click.stop="useResultAsAsset(child)" />
-                                            <Button icon="pi pi-trash" size="small"
-                                                class="!w-5 !h-5 !rounded-full !bg-red-500/20 !border-none !text-red-400 !text-[8px] hover:!bg-red-500 hover:!text-white"
-                                                @click.stop="deleteGeneration(child)" />
-                                        </div>
-
-                                        <!-- Center: view button + cost -->
-                                        <div
-                                            class="flex-1 flex flex-col items-center justify-center pointer-events-none">
-                                            <span class="text-[8px] font-bold text-slate-300 font-mono mb-1">{{
-                                                child.cost }} $</span>
-                                            <Button icon="pi pi-eye" rounded text
-                                                class="!bg-black/50 !text-white !w-8 !h-8 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border !border-white/20"
-                                                @click.stop="openImagePreview(API_URL + '/assets/' + child.result_list[0])" />
-                                        </div>
-
-                                        <!-- Bottom: reuse prompt + reuse assets -->
-                                        <div class="flex gap-0.5">
-                                            <Button icon="pi pi-comment" size="small"
-                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
-                                                @click.stop="reusePrompt(child)" />
-                                            <Button icon="pi pi-images" size="small"
-                                                class="!w-5 !h-5 flex-1 !bg-white/10 !border-white/10 !text-slate-200 !text-[8px] hover:!bg-white/20"
-                                                @click.stop="reuseAsset(child)" />
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Selection overlay for group children -->
-                            <div v-if="isSelectMode" class="absolute inset-0 z-30 pointer-events-none">
-                                <div class="absolute top-1 left-1 z-30 flex flex-col gap-0.5 pointer-events-auto">
-                                    <template v-for="child in item.children" :key="'chk-'+child.id">
-                                        <div v-if="child.result_list && child.result_list.length > 0"
-                                            @click.stop="toggleImageSelection(child.result_list[0])"
-                                            class="w-5 h-5 rounded-md flex items-center justify-center cursor-pointer transition-all"
-                                            :class="selectedAssetIds.has(child.result_list[0]) ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent'">
-                                            <i class="pi pi-check" style="font-size: 10px"></i>
-                                        </div>
-                                    </template>
+                                    <GenerationImage 
+                                        :generation="child"
+                                        :api-url="API_URL"
+                                        :is-select-mode="isSelectMode"
+                                        :is-selected="selectedAssetIds.has(child.result_list?.[0])"
+                                        :show-nsfw-global="showNsfwGlobal"
+                                        :active-overlay-id="activeOverlayId"
+                                        @toggle-select="toggleImageSelection"
+                                        @open-preview="openImagePreview"
+                                        @toggle-like="toggleLike"
+                                        @delete="deleteGeneration"
+                                        @reuse-prompt="reusePrompt"
+                                        @reuse-asset="reuseAsset"
+                                        @use-result="useResultAsAsset"
+                                        @toggle-overlay="toggleMobileOverlay"
+                                    />
                                 </div>
                             </div>
                         </template>
@@ -1036,144 +958,22 @@ const confirmAddToAlbum = async () => {
                         <!-- SINGLE GENERATION (full slot)                -->
                         <!-- ============================================ -->
                         <template v-else>
-                            <div class="w-full h-full relative group" @click="toggleMobileOverlay(item.id)">
-
-                                <!-- SUCCESS: image -->
-                                <img v-if="item.result_list && item.result_list.length > 0"
-                                    :src="API_URL + '/assets/' + item.result_list[0] + '?thumbnail=true'"
-                                    class="w-full h-full object-cover cursor-pointer"
-                                    @click.stop="isSelectMode ? toggleImageSelection(item.result_list[0]) : openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
-
-                                <!-- Liked badge for single item -->
-                                <div v-if="item.is_liked"
-                                    class="absolute top-2 right-2 z-20 w-6 h-6 rounded-full bg-pink-500 shadow-lg flex items-center justify-center border border-pink-400">
-                                    <i class="pi pi-heart-fill text-white text-[10px]"></i>
-                                </div>
-
-                                <!-- FAILED: error display -->
-                                <div v-else-if="item.status === 'failed'"
-                                    class="w-full h-full flex flex-col items-center justify-between p-3 text-center bg-red-500/10 border border-red-500/20 relative group">
-
-                                    <!-- Top Right: Delete (Persistent) -->
-                                    <div class="w-full flex justify-end">
-                                        <Button icon="pi pi-trash" v-tooltip.right="'Delete'"
-                                            class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white z-10"
-                                            @click.stop="deleteGeneration(item)" />
-                                    </div>
-
-                                    <!-- Center: Error Info -->
-                                    <div class="flex flex-col items-center justify-center flex-1">
-                                        <i class="pi pi-times-circle text-red-500 text-2xl mb-1"></i>
-                                        <span
-                                            class="text-[10px] font-bold text-red-400 uppercase tracking-wide">Failed</span>
-                                        <span v-if="item.failed_reason"
-                                            class="text-[8px] text-red-300/70 mt-1 line-clamp-3 leading-tight"
-                                            v-tooltip.top="item.failed_reason">{{ item.failed_reason }}</span>
-                                    </div>
-
-                                    <!-- Bottom: Reuse Buttons (Persistent) -->
-                                    <div class="w-full flex gap-1 z-10">
-                                        <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
-                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                                            @click.stop="reusePrompt(item)" />
-                                        <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
-                                            class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                                            @click.stop="reuseAsset(item)" />
-                                    </div>
-                                </div>
-
-                                <!-- PROCESSING -->
-                                <div v-else-if="['processing', 'starting', 'running'].includes(item.status)"
-                                    class="w-full h-full flex flex-col items-center justify-center relative overflow-hidden bg-slate-800/50 border border-violet-500/20">
-                                    <div
-                                        class="absolute inset-0 bg-gradient-to-tr from-violet-500/5 via-violet-500/10 to-cyan-500/5 animate-pulse">
-                                    </div>
-                                    <div
-                                        class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/5 to-transparent">
-                                    </div>
-                                    <i class="pi pi-spin pi-spinner text-violet-500 text-xl mb-2 relative z-10"></i>
-                                    <span class="text-[10px] text-violet-300/70 relative z-10 capitalize">{{ item.status
-                                        }}...</span>
-                                    <span v-if="item.progress"
-                                        class="text-[9px] text-violet-400/60 font-mono mt-1 relative z-10">{{
-                                            item.progress }}%</span>
-                                </div>
-
-                                <!-- EMPTY -->
-                                <div v-else
-                                    class="w-full h-full flex items-center justify-center text-slate-600 bg-slate-800">
-                                    <i class="pi pi-image text-4xl opacity-20"></i>
-                                </div>
-
-                                <!-- HOVER OVERLAY (for successful single gen state only) -->
-                                <div v-if="item.result_list && item.result_list.length > 0"
-                                    class="absolute inset-0 bg-black/60 transition-opacity duration-200 flex flex-col justify-between p-2 z-10"
-                                    :class="{ 'opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto': activeOverlayId !== item.id, 'opacity-100 pointer-events-auto': activeOverlayId === item.id }">
-
-                                    <!-- Top Right: buttons -->
-                                    <div
-                                        class="flex justify-end items-start translate-y-[-10px] group-hover:translate-y-0 transition-transform duration-200 w-full z-10">
-                                        <div class="flex gap-1">
-                                            <Button :icon="item.is_liked ? 'pi pi-heart-fill' : 'pi pi-heart'"
-                                                class="!w-6 !h-6 !rounded-full !border-none !text-[10px] transition-colors"
-                                                :class="item.is_liked ? '!bg-pink-500 !text-white' : '!bg-white/20 !text-white hover:!bg-pink-500'"
-                                                @click.stop="toggleLike(item)" />
-                                            <Button v-if="item.result_list && item.result_list.length > 0"
-                                                icon="pi pi-pencil" v-tooltip.left="'Edit (Use Result)'"
-                                                class="!w-6 !h-6 !rounded-full !bg-white/20 !border-none !text-white text-[10px] hover:!bg-violet-500"
-                                                @click.stop="useResultAsAsset(item)" />
-                                            <Button icon="pi pi-trash" v-tooltip.left="'Delete'"
-                                                class="!w-6 !h-6 !rounded-full !bg-red-500/20 !border-none !text-red-400 text-[10px] hover:!bg-red-500 hover:!text-white"
-                                                @click.stop="deleteGeneration(item)" />
-                                        </div>
-                                    </div>
-
-                                    <!-- Center: View button + Cost/Time -->
-                                    <div
-                                        class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none z-0">
-                                        <!-- Cost & Time -->
-                                        <div class="flex flex-col items-center gap-0.5 mb-2 pointer-events-none">
-                                            <span
-                                                class="text-[10px] font-bold text-slate-300 font-mono tracking-wider">{{
-                                                    item.cost }} $</span>
-                                            <span v-if="item.execution_time_seconds"
-                                                class="text-[8px] text-slate-500 font-mono">{{
-                                                    item.execution_time_seconds.toFixed(1) }}s</span>
-                                        </div>
-                                        <!-- View Button -->
-                                        <Button icon="pi pi-eye" rounded text
-                                            class="!bg-black/50 !text-white !w-12 !h-12 !rounded-full hover:!bg-black/70 hover:!scale-110 transition-all pointer-events-auto !border-2 !border-white/20"
-                                            @click.stop="openImagePreview(API_URL + '/assets/' + item.result_list[0])" />
-                                    </div>
-
-                                    <!-- Bottom: reuse buttons -->
-                                    <div
-                                        class="translate-y-[10px] group-hover:translate-y-0 transition-transform duration-200 z-10">
-                                        <div class="flex gap-1 mb-1">
-                                            <Button icon="pi pi-comment" v-tooltip.bottom="'Reuse Prompt'"
-                                                class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                                                @click.stop="reusePrompt(item)" />
-                                            <Button icon="pi pi-images" v-tooltip.bottom="'Reuse Assets'"
-                                                class="!w-6 !h-6 flex-1 !bg-white/10 !border-white/10 !text-slate-200 text-[10px] hover:!bg-white/20"
-                                                @click.stop="reuseAsset(item)" />
-                                        </div>
-                                        <p class="text-[10px] text-white/70 line-clamp-1 leading-tight">{{ item.prompt
-                                            }}</p>
-                                    </div>
-                                </div>
-
-                                <!-- Select mode checkbox overlay -->
-                                <div v-if="isSelectMode && item.result_list && item.result_list.length > 0"
-                                    class="absolute inset-0 z-20 cursor-pointer"
-                                    @click.stop="toggleImageSelection(item.result_list[0])">
-                                    <div class="absolute top-2 left-2 w-6 h-6 rounded-lg flex items-center justify-center transition-all"
-                                        :class="selectedAssetIds.has(item.result_list[0]) ? 'bg-violet-600 text-white' : 'bg-black/40 border border-white/30 text-transparent hover:border-white/60'">
-                                        <i class="pi pi-check" style="font-size: 12px"></i>
-                                    </div>
-                                    <div v-if="selectedAssetIds.has(item.result_list[0])"
-                                        class="absolute inset-0 bg-violet-600/20 pointer-events-none"></div>
-                                </div>
-                            </div>
+                            <GenerationImage 
+                                :generation="item"
+                                :api-url="API_URL"
+                                :is-select-mode="isSelectMode"
+                                :is-selected="selectedAssetIds.has(item.result_list?.[0])"
+                                :show-nsfw-global="showNsfwGlobal"
+                                :active-overlay-id="activeOverlayId"
+                                @toggle-select="toggleImageSelection"
+                                @open-preview="openImagePreview"
+                                @toggle-like="toggleLike"
+                                @delete="deleteGeneration"
+                                @reuse-prompt="reusePrompt"
+                                @reuse-asset="reuseAsset"
+                                @use-result="useResultAsAsset"
+                                @toggle-overlay="toggleMobileOverlay"
+                            />
                         </template>
                     </div>
                 </div>
@@ -1393,6 +1193,14 @@ const confirmAddToAlbum = async () => {
                             </div>
                         </div>
 
+                        <!-- NSFW Toggle -->
+                        <div class="flex flex-col gap-2 bg-slate-800/50 p-3 rounded-xl border border-white/5">
+                            <div class="flex items-center justify-between">
+                                <label class="text-xs text-slate-300 cursor-pointer">Show NSFW</label>
+                                <InputSwitch v-model="showNsfwGlobal" />
+                            </div>
+                        </div>
+
                         <div class="mt-auto">
                             <Button :label="isSubmitting ? 'Starting...' : 'Generate'"
                                 :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"
diff --git a/src/views/IdeaDetailView.vue b/src/views/IdeaDetailView.vue
index 8db344a..21292db 100644
--- a/src/views/IdeaDetailView.vue
+++ b/src/views/IdeaDetailView.vue
@@ -27,7 +27,9 @@ import ConfirmDialog from 'primevue/confirmdialog'
 import InputText from 'primevue/inputtext'
 import DatePicker from 'primevue/datepicker'
 import Tag from 'primevue/tag'
+import InputSwitch from 'primevue/inputswitch'
 import GenerationPreviewModal from '../components/GenerationPreviewModal.vue'
+import GenerationImage from '../components/GenerationImage.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -98,6 +100,13 @@ const previousPrompt = ref('')
 let _savedCharacterId = null
 let _savedEnvironmentId = null
 
+// NSFW Toggle
+const showNsfwGlobal = ref(localStorage.getItem('show_nsfw_global') === 'true')
+
+watch(showNsfwGlobal, (val) => {
+    localStorage.setItem('show_nsfw_global', val)
+})
+
 const loadEnvironments = async (charId) => {
     if (!charId) {
         environments.value = []
@@ -1364,7 +1373,7 @@ watch(viewMode, (v) => {
                                                             class="flex-shrink-0 flex items-center gap-2 px-2 py-1.5 rounded-lg border-2 transition-all cursor-pointer group bg-slate-800/40"
                                                             :class="[
                                                                 (selectedEnvironment?.id === (env.id || env._id) || selectedEnvironment?._id === (env.id || env._id))
-                                                                ? 'border-violet-500 bg-violet-500/10 shadow-[0_0_15px_rgba(124,58,237,0.1)]' 
+                                                                ? 'border-violet-500 bg-violet-500/10 shadow-[0_0_15px_rgba(124,58,237,0.15)]' 
                                                                 : 'border-white/5 hover:border-white/20'
                                                             ]"
                                                         >
@@ -1435,6 +1444,14 @@ watch(viewMode, (v) => {
                             </div>
                         </div>
 
+                        <!-- NSFW Toggle -->
+                        <div class="flex flex-col gap-1 bg-slate-800/50 p-2 rounded-lg border border-white/5">
+                            <div class="flex items-center justify-between">
+                                <label class="text-xs text-slate-300 cursor-pointer">Show NSFW</label>
+                                <InputSwitch v-model="showNsfwGlobal" />
+                            </div>
+                        </div>
+
                         <div class="mt-auto">
                             <Button :label="isSubmitting ? 'Starting...' : 'Generate'"
                                 :icon="isSubmitting ? 'pi pi-spin pi-spinner' : 'pi pi-sparkles'"