diff --git a/src/renderer.js b/src/renderer.js
new file mode 100644
index 0000000..1b8b7bd
--- /dev/null
+++ b/src/renderer.js
@@ -0,0 +1,178 @@
+// DOM Elements
+const dependencyOverlay = document.getElementById('dependency-overlay');
+const depTitle = document.getElementById('dep-title');
+const depMsg = document.getElementById('dep-msg');
+const depProgress = document.getElementById('dep-progress');
+const depPercent = document.getElementById('dep-percent');
+
+const urlInput = document.getElementById('url-input');
+const analyzeBtn = document.getElementById('analyze-btn');
+const outputPath = document.getElementById('output-path');
+const changeFolderBtn = document.getElementById('change-folder-btn');
+
+const errorCard = document.getElementById('error-card');
+const errorMessage = document.getElementById('error-message');
+
+const previewSection = document.getElementById('preview-section');
+const videoThumbnail = document.getElementById('video-thumbnail');
+const videoTitle = document.getElementById('video-title');
+const videoUploader = document.getElementById('video-uploader');
+const videoDuration = document.getElementById('video-duration');
+const radioCards = document.querySelectorAll('.radio-card');
+
+const downloadBtn = document.getElementById('download-btn');
+const downloadSection = document.getElementById('download-section');
+const downloadStatus = document.getElementById('download-status');
+const downloadPercent = document.getElementById('download-percent');
+const downloadProgressBar = document.getElementById('download-progress-bar');
+const downloadSubtext = document.getElementById('download-subtext');
+
+let analyzedUrl = '';
+
+// 1. Check and Install Dependencies on load
+window.addEventListener('DOMContentLoaded', async () => {
+  // Set default output folder path
+  const defaultPath = await window.api.getDownloadsFolder();
+  outputPath.textContent = defaultPath;
+
+  // Listen to dependency download updates
+  window.api.onDependencyStatus(({ message, progress }) => {
+    depMsg.textContent = message;
+    depProgress.style.width = `${progress}%`;
+    depPercent.textContent = `${progress}%`;
+  });
+
+  try {
+    const result = await window.api.checkDependencies();
+    if (result.success) {
+      // Fade out overlay smoothly
+      dependencyOverlay.style.opacity = '0';
+      setTimeout(() => {
+        dependencyOverlay.classList.remove('active');
+      }, 400);
+    } else {
+      depTitle.textContent = 'Hata Oluştu';
+      depMsg.textContent = `Bileşenler yüklenemedi: ${result.error}`;
+      depPercent.textContent = 'Hata';
+    }
+  } catch (err) {
+    depTitle.textContent = 'Hata Oluştu';
+    depMsg.textContent = err.message;
+  }
+});
+
+// 2. Change Output Folder
+changeFolderBtn.addEventListener('click', async () => {
+  const newPath = await window.api.selectDirectory();
+  outputPath.textContent = newPath;
+});
+
+// 3. Radio Card Active Selection UI
+radioCards.forEach(card => {
+  const radio = card.querySelector('input[type="radio"]');
+  radio.addEventListener('change', () => {
+    radioCards.forEach(c => c.classList.remove('active'));
+    if (radio.checked) {
+      card.classList.add('active');
+    }
+  });
+});
+
+// 4. URL Validation & Analyze
+analyzeBtn.addEventListener('click', async () => {
+  const url = urlInput.value.trim();
+  if (!url) return;
+
+  // Reset state
+  errorCard.style.display = 'none';
+  previewSection.style.display = 'none';
+  downloadSection.style.display = 'none';
+  
+  // Set Loading Button state
+  analyzeBtn.disabled = true;
+  const analyzeSpan = analyzeBtn.querySelector('span');
+  const analyzeIcon = analyzeBtn.querySelector('.btn-icon');
+  analyzeSpan.textContent = 'Analiz ediliyor...';
+  analyzeIcon.style.display = 'inline-block';
+
+  try {
+    const result = await window.api.getVideoInfo(url);
+    if (result.success) {
+      analyzedUrl = url;
+      videoThumbnail.src = result.info.thumbnail;
+      videoTitle.textContent = result.info.title;
+      videoUploader.textContent = result.info.uploader;
+      videoDuration.textContent = `Süre: ${result.info.duration}`;
+      previewSection.style.display = 'block';
+    } else {
+      showError(result.error);
+    }
+  } catch (err) {
+    showError(err.message);
+  } finally {
+    analyzeBtn.disabled = false;
+    analyzeSpan.textContent = 'Analiz Et';
+    analyzeIcon.style.display = 'none';
+  }
+});
+
+// 5. Download Process
+downloadBtn.addEventListener('click', async () => {
+  if (!analyzedUrl) return;
+
+  const selectedFormat = document.querySelector('input[name="format-type"]:checked').value;
+  
+  // Setup download section UI
+  downloadSection.style.display = 'block';
+  downloadBtn.disabled = true;
+  downloadStatus.textContent = 'Bağlantı kuruluyor...';
+  downloadPercent.textContent = '0%';
+  downloadProgressBar.style.width = '0%';
+  downloadSubtext.textContent = selectedFormat === 'mp3' ? 'Ses akışı alınıyor...' : 'Video akışı alınıyor...';
+
+  // Smooth scroll to download progress card
+  downloadSection.scrollIntoView({ behavior: 'smooth' });
+
+  // Listen to progress events
+  window.api.onDownloadProgress(({ percent, status }) => {
+    downloadStatus.textContent = status;
+    downloadPercent.textContent = `${percent}%`;
+    downloadProgressBar.style.width = `${percent}%`;
+    
+    if (percent > 90) {
+      downloadSubtext.textContent = selectedFormat === 'mp3' 
+        ? 'Dönüştürme işlemi yapılıyor (Yüksek Kaliteli MP3)...' 
+        : 'Video ve ses dosyaları birleştiriliyor...';
+    } else {
+      downloadSubtext.textContent = `İndirme hızı ve boyuta göre işlem süresi değişebilir.`;
+    }
+  });
+
+  try {
+    const result = await window.api.downloadMedia(analyzedUrl, selectedFormat);
+    if (result.success) {
+      downloadStatus.textContent = 'Tamamlandı!';
+      downloadPercent.textContent = '100%';
+      downloadProgressBar.style.width = '100%';
+      downloadSubtext.textContent = `Dosyanız başarıyla kaydedildi!`;
+      
+      // Beautiful visual indicator of success
+      downloadProgressBar.style.background = 'linear-gradient(90deg, #00ff87 0%, #60efff 100%)';
+      downloadProgressBar.style.boxShadow = '0 0 15px rgba(0, 255, 135, 0.6)';
+    } else {
+      showError(result.error);
+      downloadSection.style.display = 'none';
+    }
+  } catch (err) {
+    showError(err.message);
+    downloadSection.style.display = 'none';
+  } finally {
+    downloadBtn.disabled = false;
+  }
+});
+
+function showError(msg) {
+  errorMessage.textContent = `Hata: ${msg}`;
+  errorCard.style.display = 'flex';
+  errorCard.scrollIntoView({ behavior: 'smooth' });
+}