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>
+