diff --git a/src/App.vue b/src/App.vue
index f988d44..bf3cc40 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,15 +3,9 @@
     <div class="max-w-6xl mx-auto">
       <h1 class="text-4xl font-bold text-center mb-8 text-gray-900 tracking-tight">Spritesheet generator</h1>
       <div class="flex justify-center space-x-4 mb-8">
-        <a href="https://gitea.directonline.io/noxious/spritesheet-generator" target="_blank" class="text-blue-500 hover:text-blue-600 transition-colors">
-          <i class="fab fa-github"></i> Source
-        </a>
-        <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="text-blue-500 hover:text-blue-600 transition-colors">
-          <i class="fab fa-discord"></i> Discord
-        </a>
-        <a href="#" class="text-blue-500 hover:text-blue-600 transition-colors">
-          <i class="fas fa-question-circle"></i> Help
-        </a>
+        <a href="https://gitea.directonline.io/noxious/spritesheet-generator" target="_blank" class="text-blue-500 hover:text-blue-600 transition-colors"> <i class="fab fa-github"></i> Source </a>
+        <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="text-blue-500 hover:text-blue-600 transition-colors"> <i class="fab fa-discord"></i> Discord </a>
+        <a href="#" @click.prevent="openHelpModal" class="text-blue-500 hover:text-blue-600 transition-colors"> <i class="fas fa-question-circle"></i> Help </a>
       </div>
 
       <div class="bg-white rounded-2xl shadow-soft p-8">
@@ -26,12 +20,12 @@
 
             <button @click="downloadSpritesheet" class="px-6 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-lg transition-colors flex items-center space-x-2">
               <i class="fas fa-download"></i>
-              <span>Download Spritesheet</span>
+              <span>Download spritesheet</span>
             </button>
 
             <button @click="openPreviewModal" class="px-6 py-2.5 bg-green-500 hover:bg-green-600 text-white font-medium rounded-lg transition-colors flex items-center space-x-2">
               <i class="fas fa-play"></i>
-              <span>Preview Animation</span>
+              <span>Preview animation</span>
             </button>
           </div>
 
@@ -40,9 +34,11 @@
       </div>
     </div>
 
-    <Modal :is-open="isPreviewModalOpen" @close="closePreviewModal" title="Animation Preview">
+    <Modal :is-open="isPreviewModalOpen" @close="closePreviewModal" title="Animation preview">
       <sprite-preview :sprites="sprites" :columns="columns" @update-sprite="updateSpritePosition" />
     </Modal>
+
+    <HelpModal :is-open="isHelpModalOpen" @close="closeHelpModal" />
   </div>
 </template>
 
@@ -52,6 +48,7 @@
   import SpriteCanvas from './components/SpriteCanvas.vue';
   import Modal from './components/utilities/Modal.vue';
   import SpritePreview from './components/SpritePreview.vue';
+  import HelpModal from './components/HelpModal.vue';
 
   interface Sprite {
     id: string;
@@ -67,6 +64,7 @@
   const sprites = ref<Sprite[]>([]);
   const columns = ref(4);
   const isPreviewModalOpen = ref(false);
+  const isHelpModalOpen = ref(false);
 
   const handleSpritesUpload = (files: File[]) => {
     Promise.all(
@@ -157,4 +155,13 @@
   const closePreviewModal = () => {
     isPreviewModalOpen.value = false;
   };
+
+  // Help modal control
+  const openHelpModal = () => {
+    isHelpModalOpen.value = true;
+  };
+
+  const closeHelpModal = () => {
+    isHelpModalOpen.value = false;
+  };
 </script>
diff --git a/src/assets/tut.mp4 b/src/assets/tut.mp4
new file mode 100644
index 0000000..3f8e9b7
Binary files /dev/null and b/src/assets/tut.mp4 differ
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
new file mode 100644
index 0000000..119254a
--- /dev/null
+++ b/src/components/HelpModal.vue
@@ -0,0 +1,149 @@
+<template>
+  <Modal :is-open="isOpen" @close="close" title="Help & information" :initialWidth="800" :initialHeight="600">
+    <div class="flex flex-col h-full">
+      <!-- Tabs -->
+      <div class="flex border-b border-gray-200">
+        <button v-for="(tab, index) in tabs" :key="index" @click="activeTab = index" class="px-4 py-2 font-medium text-sm transition-colors" :class="activeTab === index ? 'text-blue-600 border-b-2 border-blue-500' : 'text-gray-600 hover:text-blue-500'">
+          {{ tab.name }}
+        </button>
+      </div>
+
+      <!-- Tab Content -->
+      <div class="flex-1 overflow-auto p-4">
+        <!-- Video Instructions Tab -->
+        <div v-if="activeTab === 0" class="h-full flex flex-col">
+          <h3 class="text-lg font-semibold mb-4">Video tutorial</h3>
+          <div class="flex-1 bg-gray-100 rounded-lg flex items-center justify-center">
+            <div class="w-full aspect-video max-w-3xl mx-auto">
+              <video controls class="w-full h-full object-contain rounded-lg shadow-md">
+                <source src="@/assets/tut.mp4" type="video/mp4" />
+              </video>
+            </div>
+          </div>
+        </div>
+
+        <!-- About & Instructions Tab -->
+        <div v-if="activeTab === 1" class="h-full overflow-y-auto">
+          <h3 class="text-lg font-semibold mb-4">About Spritesheet generator</h3>
+
+          <div class="max-w-none text-gray-700">
+            <p class="mb-4 text-base leading-relaxed">Spritesheet generator is a free, open-source tool for creating spritesheets for game development and animation projects. This tool allows you to upload individual sprite images and arrange them into a spritesheet with customizable layout.</p>
+
+            <h4 class="mt-6 mb-3 text-lg font-medium text-gray-900">How to use:</h4>
+            <ol class="list-decimal pl-6 space-y-2 mb-4">
+              <li>Upload your sprite images by dragging and dropping them or clicking the upload area</li>
+              <li>Arrange your sprites by dragging them to the desired position</li>
+              <li>Adjust the number of columns to change the layout</li>
+              <li>Preview your animation using the "Preview Animation" button</li>
+              <li>Download your spritesheet as a PNG file</li>
+            </ol>
+
+            <h4 class="mt-6 mb-3 text-lg font-medium text-gray-900">Tips:</h4>
+            <ul class="list-disc pl-6 space-y-2">
+              <li>For best results, use sprites with consistent dimensions</li>
+              <li>The preview animation plays frames in the order they appear in the spritesheet (left to right, top to bottom)</li>
+              <li>You can adjust the animation speed in the preview window</li>
+              <li>The tool works entirely in your browser - no files are uploaded to any server</li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Donations Tab -->
+        <div v-if="activeTab === 2" class="h-full overflow-y-auto">
+          <h3 class="text-lg font-semibold mb-4">Support my <a href="https://xvx.sh" title="XVX" target="_blank" class="text-blue-500 hover:text-blue-600 transition-colors">projects</a>.</h3>
+
+          <p class="mb-6">
+            Spritesheet generator is free and open-source software. If you find it useful, please consider supporting the project with a donation. Check out the source code on
+            <a href="https://gitea.directonline.io/noxious/spritesheet-generator" title="Source code" target="_blank" class="text-blue-500 hover:text-blue-600 transition-colors">Gitea</a>.
+          </p>
+
+          <div class="space-y-6">
+            <!-- Bitcoin -->
+            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
+              <div class="flex items-center mb-3">
+                <div class="w-8 h-8 mr-3 flex items-center justify-center bg-orange-100 rounded-full">
+                  <svg class="w-5 h-5 text-orange-500" viewBox="0 0 24 24" fill="currentColor">
+                    <path
+                      d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.548v-.002zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.705-.167-1.064-.25l.526-2.127-1.32-.33-.54 2.165c-.285-.067-.565-.132-.84-.2l-1.815-.45-.35 1.407s.975.225.955.236c.535.136.63.486.615.766l-1.477 5.92c-.075.166-.24.406-.614.314.015.02-.96-.24-.96-.24l-.66 1.51 1.71.426.93.242-.54 2.19 1.32.327.54-2.17c.36.1.705.19 1.05.273l-.51 2.154 1.32.33.545-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.76 1.68-1.93h.01zm-3.01 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.23 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.55l.654-2.64c.744.18 3.137.524 2.75 2.084v.006z"
+                    />
+                  </svg>
+                </div>
+                <h4 class="text-md font-medium">Bitcoin (BTC)</h4>
+              </div>
+              <div class="flex">
+                <input type="text" readonly value="bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq" class="flex-1 p-2 text-sm bg-white border border-gray-200 rounded-l-md focus:outline-none" />
+                <button @click="copyToClipboard('bc1ql2a3nxnhfwft7qex0cclj5ar2lfsslvs0aygeq')" class="px-3 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors">Copy</button>
+              </div>
+            </div>
+
+            <!-- Litecoin -->
+            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
+              <div class="flex items-center mb-3">
+                <div class="w-8 h-8 mr-3 flex items-center justify-center bg-blue-100 rounded-full">
+                  <svg class="w-5 h-5 text-blue-500" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-.738 4.8h2.616l-1.654 6.187 2.566-.338-1.017 3.63-2.115.338-1.23 4.6h7.12l-.56 2.07H6.96l1.654-6.16-2.565.337.952-3.38 2.18-.338 1.23-4.662H4.8l.504-2.285h5.958z" />
+                  </svg>
+                </div>
+                <h4 class="text-md font-medium">Litecoin (LTC)</h4>
+              </div>
+              <div class="flex">
+                <input type="text" readonly value="ltc1qdkn46hpt39ppmhk25ed2eycu7m2pj5cdzuxw84" class="flex-1 p-2 text-sm bg-white border border-gray-200 rounded-l-md focus:outline-none" />
+                <button @click="copyToClipboard('ltc1qdkn46hpt39ppmhk25ed2eycu7m2pj5cdzuxw84')" class="px-3 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors">Copy</button>
+              </div>
+            </div>
+
+            <!-- Ethereum -->
+            <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
+              <div class="flex items-center mb-3">
+                <div class="w-8 h-8 mr-3 flex items-center justify-center bg-purple-100 rounded-full">
+                  <svg class="w-5 h-5 text-purple-500" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z" />
+                  </svg>
+                </div>
+                <h4 class="text-md font-medium">Ethereum (ETH)</h4>
+              </div>
+              <div class="flex">
+                <input type="text" readonly value="0x30843c72DF6E9A9226d967bf2403602f1C2aB67b" class="flex-1 p-2 text-sm bg-white border border-gray-200 rounded-l-md focus:outline-none" />
+                <button @click="copyToClipboard('0x30843c72DF6E9A9226d967bf2403602f1C2aB67b')" class="px-3 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 transition-colors">Copy</button>
+              </div>
+            </div>
+
+            <p class="text-center text-gray-600 mt-6">Thank you for your support! ❤️</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Modal from './utilities/Modal.vue';
+
+  const props = defineProps<{
+    isOpen: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'close'): void;
+  }>();
+
+  const activeTab = ref(0);
+
+  const tabs = [{ name: 'Video tutorial' }, { name: 'About & instructions' }, { name: 'Support the project' }];
+
+  const close = () => {
+    emit('close');
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        alert('Address copied to clipboard!');
+      })
+      .catch(err => {
+        console.error('Failed to copy: ', err);
+      });
+  };
+</script>
diff --git a/src/components/SpritePreview.vue b/src/components/SpritePreview.vue
index 368b72e..3df465c 100644
--- a/src/components/SpritePreview.vue
+++ b/src/components/SpritePreview.vue
@@ -46,6 +46,13 @@
                 <span class="text-sm whitespace-nowrap">Show all sprites</span>
               </label>
             </div>
+
+            <div v-if="showAllSprites" class="w-full">
+              <label class="block text-sm font-medium text-gray-700 mb-2">Hide frames</label>
+              <select multiple v-model="hiddenFrames" class="w-full rounded-md border border-gray-300 shadow-sm px-3 py-2 focus:ring-blue-500 focus:border-blue-500" size="4">
+                <option v-for="(sprite, index) in props.sprites" :key="sprite.id" :value="index" class="py-1">Frame {{ index + 1 }}</option>
+              </select>
+            </div>
           </div>
         </div>
 
@@ -135,6 +142,9 @@
   // Computed properties
   const totalFrames = computed(() => props.sprites.length);
 
+  // Add this after other refs
+  const hiddenFrames = ref<number[]>([]);
+
   // Canvas drawing
   const calculateMaxDimensions = () => {
     let maxWidth = 0;
@@ -186,8 +196,8 @@
     if (showAllSprites.value && props.sprites.length > 1) {
       ctx.value.globalAlpha = 0.3;
       props.sprites.forEach((sprite, index) => {
-        if (index !== currentFrameIndex.value) {
-          ctx.value.drawImage(sprite.img, sprite.x, sprite.y);
+        if (index !== currentFrameIndex.value && !hiddenFrames.value.includes(index)) {
+          ctx.value?.drawImage(sprite.img, sprite.x, sprite.y);
         }
       });
       ctx.value.globalAlpha = 1.0;
@@ -200,13 +210,6 @@
     ctx.value.strokeStyle = '#e5e7eb';
     ctx.value.lineWidth = 1;
     ctx.value.strokeRect(0, 0, maxWidth, maxHeight);
-
-    // Highlight current frame if draggable
-    if (isDraggable.value) {
-      ctx.value.strokeStyle = '#3b82f6';
-      ctx.value.lineWidth = 2;
-      ctx.value.strokeRect(0, 0, maxWidth, maxHeight);
-    }
   };
 
   // Animation control
@@ -357,6 +360,7 @@
   watch(zoom, drawPreviewCanvas);
   watch(isDraggable, drawPreviewCanvas);
   watch(showAllSprites, drawPreviewCanvas);
+  watch(hiddenFrames, drawPreviewCanvas);
 
   // Initial draw
   if (props.sprites.length > 0) {
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index fa65068..eb1972b 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,33 +1,32 @@
 <template>
   <Teleport to="body">
-    <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center">
-      <div
-        ref="modalRef"
-        :style="{
-          position: 'absolute',
-          left: `${position.x}px`,
-          top: `${position.y}px`,
-          width: `${size.width}px`,
-          height: `${size.height}px`,
-        }"
-        class="bg-white rounded-2xl border-2 border-gray-300 shadow-xl flex flex-col"
-      >
-        <!-- Header with drag handle -->
-        <div class="flex justify-between items-center p-4 border-b border-gray-200 cursor-move" @mousedown="startDrag" @touchstart="startDrag">
-          <h3 class="text-2xl font-semibold text-gray-900">{{ title }}</h3>
-          <button @click="close" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
-            <img src="@/assets/images/close-icon.svg" class="w-5 h-5" alt="Close" />
-          </button>
-        </div>
-
-        <!-- Body -->
-        <div class="p-6 flex-1 overflow-auto">
-          <slot></slot>
-        </div>
-
-        <!-- Resize handle -->
-        <div class="absolute bottom-0 right-0 w-5 h-5 cursor-se-resize" @mousedown="startResize" @touchstart="startResize"></div>
+    <div
+      v-if="isOpen"
+      ref="modalRef"
+      :style="{
+        position: 'absolute',
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        width: `${size.width}px`,
+        height: `${size.height}px`,
+      }"
+      class="bg-white rounded-2xl border-2 border-gray-300 shadow-xl flex flex-col z-50"
+    >
+      <!-- Header with drag handle -->
+      <div class="flex justify-between items-center p-4 border-b border-gray-200 cursor-move" @mousedown="startDrag" @touchstart="startDrag">
+        <h3 class="text-2xl font-semibold text-gray-900">{{ title }}</h3>
+        <button @click="close" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
+          <img src="@/assets/images/close-icon.svg" class="w-5 h-5" alt="Close" />
+        </button>
       </div>
+
+      <!-- Body -->
+      <div class="p-6 flex-1 overflow-auto">
+        <slot></slot>
+      </div>
+
+      <!-- Resize handle -->
+      <div class="absolute bottom-0 right-0 w-5 h-5 cursor-se-resize" @mousedown="startResize" @touchstart="startResize"></div>
     </div>
   </Teleport>
 </template>