diff --git a/FOOS_ALT_WEBSITE/media.html b/FOOS_ALT_WEBSITE/media.html
index a780981..3706dd0 100644
--- a/FOOS_ALT_WEBSITE/media.html
+++ b/FOOS_ALT_WEBSITE/media.html
@@ -22,7 +22,38 @@
         </div>
     </header>
     <article>
-        
+        <nav>
+            <ul class="folder-list">
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/audio_editors.html">Audio</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/image_editing.html">Image editing</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/media_player.html">Media Player</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/multimedia_frontend.html">Multimedia Frontend</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/painting.html">Painting</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/photo_editing.html">Photo editing</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/photo_processing.html">Photo processing</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/recording.html">Screen capture & recording</a>
+                </li>
+                <li class="folder-list-item">
+                    <a class="folder-link" href="multimedia/video_editors.html">Video editing</a>
+                </li>
+                
+            </ul>
+        </nav>
     </article>
     <script>
       function toggleMenu() {
diff --git a/FOOS_ALT_WEBSITE/multimedia/audio_editors b/FOOS_ALT_WEBSITE/multimedia/audio_editors
deleted file mode 100644
index 194eca0..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/audio_editors
+++ /dev/null
@@ -1,2 +0,0 @@
-5/5
-Audacity
\ No newline at end of file
diff --git a/FOOS_ALT_WEBSITE/multimedia/audio_editors.html b/FOOS_ALT_WEBSITE/multimedia/audio_editors.html
new file mode 100644
index 0000000..c01f19c
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/audio_editors.html
@@ -0,0 +1,40 @@
+5/5
+Audacity
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>Audacity</li>            
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/image_editing b/FOOS_ALT_WEBSITE/multimedia/image_editing
deleted file mode 100644
index 3ef9dc5..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/image_editing
+++ /dev/null
@@ -1,2 +0,0 @@
-5/5
-GIMP
\ No newline at end of file
diff --git a/FOOS_ALT_WEBSITE/multimedia/image_editing.html b/FOOS_ALT_WEBSITE/multimedia/image_editing.html
new file mode 100644
index 0000000..6de5bed
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/image_editing.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>GIMP</li>            
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/media_player b/FOOS_ALT_WEBSITE/multimedia/media_player
deleted file mode 100644
index 34d96c0..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/media_player
+++ /dev/null
@@ -1,5 +0,0 @@
-5/5
-VLC
-
-4/5
-MPV
diff --git a/FOOS_ALT_WEBSITE/multimedia/media_player.html b/FOOS_ALT_WEBSITE/multimedia/media_player.html
new file mode 100644
index 0000000..b0ea87b
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/media_player.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>VLC</li>            
+        </ul>
+        <h1>3/5</h1>
+        <ul class="threeStar">
+            <li>MPV</li>
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/multimedia_frontend b/FOOS_ALT_WEBSITE/multimedia/multimedia_frontend
deleted file mode 100644
index c20b396..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/multimedia_frontend
+++ /dev/null
@@ -1,5 +0,0 @@
-5/5
-Kodi
-
-4/5
-Jellyfin
diff --git a/FOOS_ALT_WEBSITE/multimedia/multimedia_frontend.html b/FOOS_ALT_WEBSITE/multimedia/multimedia_frontend.html
new file mode 100644
index 0000000..1cf70df
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/multimedia_frontend.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>Kodi</li>            
+        </ul>
+        <h1>3/5</h1>
+        <ul class="threeStar">
+            <li>Jellyfin</li>
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/painting b/FOOS_ALT_WEBSITE/multimedia/painting
deleted file mode 100644
index fba0b3f..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/painting
+++ /dev/null
@@ -1,5 +0,0 @@
-5/5
-Krita
-
-4/5
-Inkscape
diff --git a/FOOS_ALT_WEBSITE/multimedia/painting.html b/FOOS_ALT_WEBSITE/multimedia/painting.html
new file mode 100644
index 0000000..bc8ead6
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/painting.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>Krita</li>            
+        </ul>
+        <h1>3/5</h1>
+        <ul class="threeStar">
+            <li>Inkscape</li>
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/photo_editing b/FOOS_ALT_WEBSITE/multimedia/photo_editing
deleted file mode 100644
index 3ef9dc5..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/photo_editing
+++ /dev/null
@@ -1,2 +0,0 @@
-5/5
-GIMP
\ No newline at end of file
diff --git a/FOOS_ALT_WEBSITE/multimedia/photo_editing.html b/FOOS_ALT_WEBSITE/multimedia/photo_editing.html
new file mode 100644
index 0000000..3b2a28f
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/photo_editing.html
@@ -0,0 +1,40 @@
+5/5
+GIMP
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>GIMP</li>            
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/photo_processing b/FOOS_ALT_WEBSITE/multimedia/photo_processing
deleted file mode 100644
index 01e601f..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/photo_processing
+++ /dev/null
@@ -1,5 +0,0 @@
-5/5
-Darktable
-
-4/5
-RawTherapee
diff --git a/FOOS_ALT_WEBSITE/multimedia/photo_processing.html b/FOOS_ALT_WEBSITE/multimedia/photo_processing.html
new file mode 100644
index 0000000..ca90993
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/photo_processing.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>Darktable</li>            
+        </ul>
+        <h1>3/5</h1>
+        <ul class="threeStar">
+            <li>RawTherapee</li>
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/recording b/FOOS_ALT_WEBSITE/multimedia/recording
deleted file mode 100644
index 923f5a0..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/recording
+++ /dev/null
@@ -1,5 +0,0 @@
-5/5
-OBS Studio
-
-4/5
-ShareX
diff --git a/FOOS_ALT_WEBSITE/multimedia/recording.html b/FOOS_ALT_WEBSITE/multimedia/recording.html
new file mode 100644
index 0000000..0e13bdf
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/recording.html
@@ -0,0 +1,47 @@
+5/5
+OBS Studio
+
+4/5
+ShareX
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>OBS Studio</li>            
+        </ul>
+        <h1>4/5</h1>
+        <ul class="fourStar">
+            <li>ShareX</li>
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
diff --git a/FOOS_ALT_WEBSITE/multimedia/video_editors b/FOOS_ALT_WEBSITE/multimedia/video_editors
deleted file mode 100644
index 6059d41..0000000
--- a/FOOS_ALT_WEBSITE/multimedia/video_editors
+++ /dev/null
@@ -1,5 +0,0 @@
-5/5
-Kdenlive
-
-4/5
-Shotcut
\ No newline at end of file
diff --git a/FOOS_ALT_WEBSITE/multimedia/video_editors.html b/FOOS_ALT_WEBSITE/multimedia/video_editors.html
new file mode 100644
index 0000000..445cb04
--- /dev/null
+++ b/FOOS_ALT_WEBSITE/multimedia/video_editors.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>FOSS Alternative</title>
+        <link rel="stylesheet" href="../list.css">
+    </head>
+    <body>
+        <header>
+            <div class="header-content">
+                <div class="project-name"><a href="../index.html">FOSS alternative</a></div>
+                <button class="burger-menu" onclick="toggleMenu()">☰</button>
+                <ul class="menu">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="features.html">Features</a></li>
+                    <li><a href="downloads.html">Downloads</a></li>
+                    <li><a href="community.html">Community</a></li>
+                    <li><a href="support.html">Support</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </div>
+        </header>
+        <article>
+        <h1>5/5</h1>
+        <ul class="fiveStar">
+            <li>Kdenlive</li>            
+        </ul>
+        <h1>4/5</h1>
+        <ul class="fourStar">
+            <li>Shotcut</li>
+        </ul>
+    </article>
+    <script>
+        function toggleMenu() {
+            const menu = document.querySelector(".menu");
+            menu.classList.toggle("active");
+        }
+    </script>
+</body>
+</html>
+
