diff --git a/app.py b/app.py
index a160f8e..a5effe2 100755
--- a/app.py
+++ b/app.py
@@ -58,6 +58,11 @@ def create_app():
     def serve_playlist(id):
         # The id parameter is captured, but you can use it as needed.
         return render_template('playlist.html')
+        # New route: Serve playlist.html under /playlist/<id>
+    @app.route('/album/<id>')
+    def serve_album(id):
+        # The id parameter is captured, but you can use it as needed.
+        return render_template('album.html')
 
     @app.route('/static/<path:path>')
     def serve_static(path):
diff --git a/static/css/album/album.css b/static/css/album/album.css
new file mode 100644
index 0000000..0ecc305
--- /dev/null
+++ b/static/css/album/album.css
@@ -0,0 +1,390 @@
+/* Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+body {
+    background-color: #121212;
+    color: #ffffff;
+    min-height: 100vh;
+    line-height: 1.4;
+}
+
+/* Main App Container */
+#app {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    position: relative;
+    z-index: 1;
+}
+
+/* Album Header */
+#album-header {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 2rem;
+    align-items: center;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #2a2a2a;
+    flex-wrap: wrap;
+}
+
+#album-image {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+    flex-shrink: 0;
+}
+
+#album-info {
+    flex: 1;
+    min-width: 0;
+}
+
+#album-name {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+#album-artist,
+#album-stats,
+#album-copyright {
+    font-size: 1rem;
+    color: #b3b3b3;
+    margin-bottom: 0.5rem;
+}
+
+#album-copyright {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+/* Playlist Header */
+#playlist-header {
+    display: flex;
+    gap: 20px;
+    margin-bottom: 2rem;
+    align-items: center;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid #2a2a2a;
+    flex-wrap: wrap;
+}
+
+#playlist-image {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 8px;
+    flex-shrink: 0;
+}
+
+#playlist-info {
+    flex: 1;
+    min-width: 0;
+}
+
+#playlist-name {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+}
+
+#playlist-owner,
+#playlist-stats,
+#playlist-description {
+    font-size: 1rem;
+    color: #b3b3b3;
+    margin-bottom: 0.5rem;
+}
+
+/* Tracks Container */
+#tracks-container {
+    margin-top: 2rem;
+}
+
+#tracks-container h2 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #2a2a2a;
+    padding-bottom: 0.5rem;
+}
+
+/* Tracks List */
+#tracks-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/* Individual Track Styling */
+.track {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    background: #181818;
+    border-radius: 8px;
+    transition: background 0.3s ease;
+    flex-wrap: wrap;
+}
+
+.track:hover {
+    background: #2a2a2a;
+}
+
+.track-number {
+    width: 30px;
+    font-size: 1rem;
+    font-weight: 500;
+    text-align: center;
+    margin-right: 1rem;
+    flex-shrink: 0;
+}
+
+.track-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    align-items: flex-start;
+}
+
+.track-name {
+    font-size: 1rem;
+    font-weight: bold;
+    word-wrap: break-word;
+}
+
+.track-artist {
+    font-size: 0.9rem;
+    color: #b3b3b3;
+}
+
+.track-album {
+    max-width: 200px;
+    font-size: 0.9rem;
+    color: #b3b3b3;
+    margin-left: 1rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: right;
+}
+
+.track-duration {
+    width: 60px;
+    text-align: right;
+    font-size: 0.9rem;
+    color: #b3b3b3;
+    margin-left: 1rem;
+    flex-shrink: 0;
+}
+
+/* Loading and Error States */
+.loading,
+.error {
+    width: 100%;
+    text-align: center;
+    font-size: 1rem;
+    padding: 1rem;
+}
+
+.error {
+    color: #c0392b;
+}
+
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+
+/* Unified Download Button Base Style */
+.download-btn {
+    background-color: #1db954;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0.5rem;
+}
+
+.download-btn:hover {
+    background-color: #17a44b;
+}
+
+.download-btn:active {
+    transform: scale(0.98);
+}
+
+/* Circular Variant for Compact Areas (e.g., in a queue list) */
+.download-btn--circle {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border-radius: 50%;
+    font-size: 0;
+}
+
+.download-btn--circle::before {
+    content: "↓";
+    font-size: 16px;
+    color: #fff;
+    display: inline-block;
+}
+
+/* Icon next to text */
+.download-btn .btn-icon {
+    margin-right: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+}
+
+/* Back Button Styling */
+.back-btn {
+    background-color: #333;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease, transform 0.2s ease;
+    margin-right: 1rem;
+}
+
+.back-btn:hover {
+    background-color: #444;
+}
+
+.back-btn:active {
+    transform: scale(0.98);
+}
+
+/* Download Queue Toggle Button */
+.queue-toggle {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: #1db954;
+    color: #fff;
+    border: none;
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: bold;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    z-index: 1002;
+}
+
+.queue-toggle:hover {
+    background: #1ed760;
+    transform: scale(1.05);
+}
+
+.queue-toggle:active {
+    transform: scale(1);
+}
+
+/* Responsive Styles */
+
+/* Medium Devices (Tablets) */
+@media (max-width: 768px) {
+    #playlist-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    #playlist-image {
+        width: 100%;
+        height: auto;
+        margin-bottom: 1rem;
+    }
+    
+    .track {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .track-album,
+    .track-duration {
+        margin-left: 0;
+        margin-top: 0.5rem;
+        width: 100%;
+        text-align: left;
+    }
+}
+
+/* Small Devices (Mobile Phones) */
+@media (max-width: 480px) {
+    #app {
+        padding: 10px;
+    }
+    
+    #playlist-name {
+        font-size: 1.5rem;
+    }
+    
+    .track {
+        padding: 0.8rem;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    
+    .track-number {
+        font-size: 0.9rem;
+        margin-right: 0;
+        margin-bottom: 0.5rem;
+    }
+    
+    .track-info {
+        align-items: center;
+    }
+    
+    .track-album,
+    .track-duration {
+        margin-left: 0;
+        margin-top: 0.5rem;
+        width: 100%;
+        text-align: center;
+    }
+    
+    /* Mobile-specific styles for Album Info */
+    #album-header {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    
+    #album-image {
+        width: 150px;
+        height: 150px;
+        margin-bottom: 1rem;
+    }
+    
+    #album-info {
+        width: 100%;
+    }
+    
+    #album-name {
+        font-size: 1.5rem;
+    }
+    
+    #album-artist,
+    #album-stats,
+    #album-copyright {
+        font-size: 0.9rem;
+    }
+}
diff --git a/static/js/album.js b/static/js/album.js
new file mode 100644
index 0000000..90a2073
--- /dev/null
+++ b/static/js/album.js
@@ -0,0 +1,201 @@
+import { downloadQueue } from './queue.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const pathSegments = window.location.pathname.split('/');
+  const albumId = pathSegments[pathSegments.indexOf('album') + 1];
+
+  if (!albumId) {
+    showError('No album ID provided.');
+    return;
+  }
+
+  fetch(`/api/album/info?id=${encodeURIComponent(albumId)}`)
+    .then(response => {
+      if (!response.ok) throw new Error('Network response was not ok');
+      return response.json();
+    })
+    .then(data => renderAlbum(data))
+    .catch(error => {
+      console.error('Error:', error);
+      showError('Failed to load album.');
+    });
+
+  const queueIcon = document.getElementById('queueIcon');
+  if (queueIcon) {
+    queueIcon.addEventListener('click', () => {
+      downloadQueue.toggleVisibility();
+    });
+  }
+});
+
+function renderAlbum(album) {
+  document.getElementById('loading').classList.add('hidden');
+  document.getElementById('error').classList.add('hidden');
+
+  // Album header info
+  document.getElementById('album-name').textContent = album.name;
+  document.getElementById('album-artist').textContent = 
+    `By ${album.artists.map(artist => artist.name).join(', ')}`;
+  
+  const releaseYear = new Date(album.release_date).getFullYear();
+  document.getElementById('album-stats').textContent =
+    `${releaseYear} • ${album.total_tracks} songs • ${album.label}`;
+  
+  document.getElementById('album-copyright').textContent =
+    album.copyrights.map(c => c.text).join(' • ');
+
+  const image = album.images[0]?.url || 'placeholder.jpg';
+  document.getElementById('album-image').src = image;
+
+  // Back Button
+  let backButton = document.getElementById('backButton');
+  if (!backButton) {
+    backButton = document.createElement('button');
+    backButton.id = 'backButton';
+    backButton.textContent = 'Back';
+    backButton.className = 'back-btn';
+    const headerContainer = document.getElementById('album-header');
+    headerContainer.insertBefore(backButton, headerContainer.firstChild);
+  }
+  backButton.addEventListener('click', () => {
+    window.location.href = window.location.origin;
+  });
+
+  // Download Album Button
+  let downloadAlbumBtn = document.getElementById('downloadAlbumBtn');
+  if (!downloadAlbumBtn) {
+    downloadAlbumBtn = document.createElement('button');
+    downloadAlbumBtn.id = 'downloadAlbumBtn';
+    downloadAlbumBtn.textContent = 'Download Full Album';
+    downloadAlbumBtn.className = 'download-btn download-btn--main';
+    document.getElementById('album-header').appendChild(downloadAlbumBtn);
+  }
+  
+  downloadAlbumBtn.addEventListener('click', () => {
+    document.querySelectorAll('.download-btn').forEach(btn => {
+      if (btn.id !== 'downloadAlbumBtn') btn.remove();
+    });
+
+    downloadAlbumBtn.disabled = true;
+    downloadAlbumBtn.textContent = 'Queueing...';
+
+    downloadWholeAlbum(album).then(() => {
+      downloadAlbumBtn.textContent = 'Queued!';
+    }).catch(err => {
+      showError('Failed to queue album download: ' + err.message);
+      downloadAlbumBtn.disabled = false;
+    });
+  });
+
+  // Render tracks
+  const tracksList = document.getElementById('tracks-list');
+  tracksList.innerHTML = '';
+
+  album.tracks.items.forEach((track, index) => {
+    const trackElement = document.createElement('div');
+    trackElement.className = 'track';
+    trackElement.innerHTML = `
+      <div class="track-number">${index + 1}</div>
+      <div class="track-info">
+        <div class="track-name">${track.name}</div>
+        <div class="track-artist">${track.artists.map(a => a.name).join(', ')}</div>
+      </div>
+      <div class="track-duration">${msToTime(track.duration_ms)}</div>
+      <button class="download-btn download-btn--circle" 
+              data-url="${track.external_urls.spotify}" 
+              data-type="track"
+              data-name="${track.name}">
+        Download
+      </button>
+    `;
+    tracksList.appendChild(trackElement);
+  });
+
+  document.getElementById('album-header').classList.remove('hidden');
+  document.getElementById('tracks-container').classList.remove('hidden');
+  attachDownloadListeners();
+}
+
+async function downloadWholeAlbum(album) {
+  const url = album.external_urls.spotify;
+  startDownload(url, 'album', { name: album.name });
+}
+
+function msToTime(duration) {
+  const minutes = Math.floor(duration / 60000);
+  const seconds = ((duration % 60000) / 1000).toFixed(0);
+  return `${minutes}:${seconds.padStart(2, '0')}`;
+}
+
+function showError(message) {
+  const errorEl = document.getElementById('error');
+  errorEl.textContent = message;
+  errorEl.classList.remove('hidden');
+}
+
+function attachDownloadListeners() {
+    document.querySelectorAll('.download-btn').forEach((btn) => {
+      if (btn.id === 'downloadAlbumBtn') return;
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const url = e.currentTarget.dataset.url;
+        const type = e.currentTarget.dataset.type;
+        const name = e.currentTarget.dataset.name || extractName(url);
+        const albumType = e.currentTarget.dataset.albumType;
+  
+        // Remove the button after click
+        e.currentTarget.remove();
+  
+        // Start the download for this track.
+        startDownload(url, type, { name }, albumType);
+      });
+    });
+}
+
+async function startDownload(url, type, item, albumType) {
+  // Retrieve configuration (if any) from localStorage
+  const config = JSON.parse(localStorage.getItem('activeConfig')) || {};
+  const {
+    fallback = false,
+    spotify = '',
+    deezer = '',
+    spotifyQuality = 'NORMAL',
+    deezerQuality = 'MP3_128',
+    realTime = false
+  } = config;
+
+  const service = url.includes('open.spotify.com') ? 'spotify' : 'deezer';
+  let apiUrl = '';
+
+  // Build API URL based on the download type.
+  if (type === 'album') {
+    apiUrl = `/api/album/download?service=${service}&url=${encodeURIComponent(url)}`;
+  } else if (type === 'artist') {
+    apiUrl = `/api/artist/download?service=${service}&artist_url=${encodeURIComponent(url)}&album_type=${encodeURIComponent(albumType || 'album,single,compilation')}`;
+  } else {
+    // Default is track download.
+    apiUrl = `/api/${type}/download?service=${service}&url=${encodeURIComponent(url)}`;
+  }
+
+  // Append account and quality details.
+  if (fallback && service === 'spotify') {
+    apiUrl += `&main=${deezer}&fallback=${spotify}`;
+    apiUrl += `&quality=${deezerQuality}&fall_quality=${spotifyQuality}`;
+  } else {
+    const mainAccount = service === 'spotify' ? spotify : deezer;
+    apiUrl += `&main=${mainAccount}&quality=${service === 'spotify' ? spotifyQuality : deezerQuality}`;
+  }
+
+  if (realTime) {
+    apiUrl += '&real_time=true';
+  }
+
+  try {
+    const response = await fetch(apiUrl);
+    const data = await response.json();
+    // Add the download to the queue using the working queue implementation.
+    downloadQueue.addDownload(item, type, data.prg_file);
+  } catch (error) {
+    showError('Download failed: ' + error.message);
+  }
+}
\ No newline at end of file
diff --git a/templates/album.html b/templates/album.html
new file mode 100644
index 0000000..1ecb1b0
--- /dev/null
+++ b/templates/album.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Album Viewer</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/queue/queue.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/main/icons.css') }}">
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/album/album.css') }}" />
+</head>
+<body>
+  <div id="app">
+    <div id="album-header" class="hidden">
+      <img id="album-image" alt="Album cover">
+      <div id="album-info">
+        <h1 id="album-name"></h1>
+        <p id="album-artist"></p>
+        <p id="album-stats"></p>
+        <p id="album-copyright"></p>
+      </div>
+      <button id="queueIcon" class="queue-icon" aria-label="Download queue" aria-controls="downloadQueue" aria-expanded="false">
+        <img src="{{ url_for('static', filename='images/queue.svg') }}" alt="Queue Icon">
+      </button>
+    </div>
+    
+    <div id="tracks-container" class="hidden">
+      <h2>Tracks</h2>
+      <div id="tracks-list"></div>
+    </div>
+
+    <div id="loading">Loading...</div>
+    <div id="error" class="hidden">Error loading album</div>
+  </div>
+
+  <script type="module" src="{{ url_for('static', filename='js/album.js') }}"></script>
+</body>
+</html>
\ No newline at end of file