diff --git a/classes/DJ.php b/classes/DJ.php
index 0fe5a41..56514fe 100644
--- a/classes/DJ.php
+++ b/classes/DJ.php
@@ -19,21 +19,43 @@ class DJ
     private $db = null;
 
 
-    public function __construct($slug, $db)
+    public function __construct($value, $db)
     {
-        $this->slug = $slug;
         $this->db = $db;
-        if (!$this->load_from_slug()) {
-            return false;
+        if (ctype_digit((string)$value)) {
+            $this->id = (int)$value;
+            return $this->load_from_id();
+
         } else {
-            return true;
+            $this->slug = $value;
+            return $this->load_from_slug();
         }
     }
 
-    private function load_from_slug(): bool
+    private function load_from_id(): bool
     {
         $socials = [];
-        $dj = $this->get_dj_by_slug($this->slug);
+        $dj = $this->get_dj_by_id($this->id);
+        return $this->build_dj($dj);
+    }
+
+    private function get_dj_by_id()
+    {
+        $stmt = $this->db->prepare("SELECT * FROM djs WHERE id = ?");
+        $stmt->bind_param("i", $this->id);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $dj = $result->fetch_assoc();
+        $stmt->close();
+        return $dj;
+    }
+
+    /**
+     * @param $dj
+     * @return bool
+     */
+    private function build_dj($dj): bool
+    {
         if ($dj) {
             if (isset($dj['id'])) {
                 $this->id = $dj['id'];
@@ -44,6 +66,10 @@ class DJ
             if (isset($dj['bio'])) {
                 $this->bio = $dj['bio'];
             }
+            if (isset($dj['slug'])) {
+                $this->slug = $dj['slug'];
+            }
+
             if (isset($dj['img'])) {
 
                 // is this legacy code?
@@ -109,6 +135,13 @@ class DJ
         }
     }
 
+    private function load_from_slug(): bool
+    {
+        $socials = [];
+        $dj = $this->get_dj_by_slug($this->slug);
+        return $this->build_dj($dj);
+    }
+
     private function get_dj_by_slug($slug)
     {
         $stmt = $this->db->prepare("SELECT * FROM djs WHERE slug = ?");
diff --git a/classes/Genre.php b/classes/Genre.php
index 8a74623..f724797 100644
--- a/classes/Genre.php
+++ b/classes/Genre.php
@@ -3,9 +3,9 @@
 class Genre
 {
 
-    private $id = "" ;
+    private $id = -1 ;
     private $enabled = "";
-    private $count = "";
+    private $count = 0;
     private $name = "";
     private $slug = "";
     private $db = "";
@@ -13,25 +13,15 @@ class Genre
     public function __construct($value, $db)
     {
         $this->db = $db;
-        if (intval($value)) {
-            $this->id = $value;
-            if ($this->load_by_id()) {
-                return true;
-            } else {
-                return false;
-            }
+
+        if (ctype_digit((string)$value)) {
+            $this->id = (int)$value;
+            return $this->load_by_id();
         } else {
             $this->slug = $value;
-            if ($this->load_by_slug()) {
-                return true;
-            } else {
-                return false;
-            }
+            return $this->load_by_slug();
         }
-
-
     }
-
     private function load_by_id(): bool
     {
         $genre = $this->get_genre_by_id();
@@ -98,5 +88,14 @@ class Genre
         return $this->name;
     }
 
+    public function get_img(): string
+    {
+        return "img/no-image1.png";
+    }
+
+    public function get_count(): int
+    {
+        return $this->count;
+    }
 
 }
\ No newline at end of file
diff --git a/classes/Genres.php b/classes/Genres.php
new file mode 100644
index 0000000..b881859
--- /dev/null
+++ b/classes/Genres.php
@@ -0,0 +1,53 @@
+<?php
+
+class Genres
+{
+
+    private $db;
+    private $genres = [];
+
+    public function __construct($db)
+    {
+
+        $this->db = $db;
+        if (!$this->load_all_genres()) {
+            return false;
+        } else {
+            return true;
+        }
+
+    }
+
+    private function load_all_genres(): bool
+    {
+        $genres = $this->get_all_genres();
+        if ($genres) {
+            $this->genres = $genres;
+            return true;
+        } else {
+            return false;
+        }
+
+
+    }
+
+    public function get_all_genres($order = "ASC")
+    {
+        $stmt = $this->db->prepare("SELECT * FROM genres ORDER BY name $order");
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $genres = $result->fetch_all(MYSQLI_ASSOC);
+        $stmt->close();
+        return $genres;
+    }
+
+    public function get_nonzero_genres()
+    {
+        $stmt = $this->db->prepare("SELECT * FROM genres WHERE count > 0 ORDER BY name ASC");
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $genres = $result->fetch_all(MYSQLI_ASSOC);
+        $stmt->close();
+        return $genres;
+    }
+}
\ No newline at end of file
diff --git a/classes/Mix.php b/classes/Mix.php
new file mode 100644
index 0000000..079718d
--- /dev/null
+++ b/classes/Mix.php
@@ -0,0 +1,195 @@
+<?php
+
+class Mix
+{
+
+    private $id = -1;
+    private $enabled = false;
+    private $name = "";
+    private $slug = "";
+    private $genre = [];
+    private $db = null;
+    private $description = "";
+    private $cover = "";
+    private $url = "";
+    private $seconds = 0;
+    private $mediaplayer = false;
+    private $djs = [];
+    private $genres = [];
+    private $recorded;
+    private $created;
+    private $updated;
+    private $playcount = 0;
+
+
+    public function __construct($value, $db)
+    {
+        $this->db = $db;
+
+        if (ctype_digit((string)$value)) {
+            $this->id = (int)$value;
+            return $this->load_by_id();
+
+        } else {
+            $this->slug = $value;
+            return $this->load_by_slug();
+        }
+    }
+
+    private function load_by_id(): bool
+    {
+        $mix = $this->get_mix_by_id();
+        if ($mix && $mix['name'] != "") {
+            return $this->build_mix($mix);
+        } else {
+            return false;
+        }
+    }
+
+    private function get_mix_by_id()
+    {
+        $stmt = $this->db->prepare("SELECT * FROM mix WHERE id = ?");
+        $stmt->bind_param("i", $this->id);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $mix = $result->fetch_assoc();
+        $stmt->close();
+        return $mix;
+    }
+
+    private function get_mix_genres()
+    {
+        $stmt = $this->db->prepare("SELECT * FROM mix_meta WHERE attribute = 'genre' AND mix_id = ?");
+        $stmt->bind_param("i", $this->id);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $genres = $result->fetch_all(MYSQLI_ASSOC);
+        $stmt->close();
+        return $genres;
+    }
+
+    private function get_playcount()
+    {
+        $stmt = $this->db->prepare("SELECT value FROM mix_meta WHERE attribute = 'playcount' AND mix_id = ?");
+        $stmt->bind_param("i", $this->id);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $genres = $result->fetch_all(MYSQLI_ASSOC);
+        $stmt->close();
+        return $genres;
+    }
+
+    private function load_by_slug(): bool
+    {
+        $mix = $this->get_mix_by_slug();
+
+        if ($mix['title'] != "") {
+            return $this->build_mix($mix);
+        } else {
+            return false;
+        }
+    }
+
+    private function get_mix_by_slug()
+    {
+        $stmt = $this->db->prepare("SELECT * FROM mix WHERE slug = ?");
+        $stmt->bind_param("s", $this->slug);
+        $stmt->execute();
+        $result = $stmt->get_result();
+        $mix = $result->fetch_assoc();
+        $stmt->close();
+        return $mix;
+    }
+
+    private function load_mix_genres()
+    {
+        $genres = $this->get_mix_genres();
+        if (count($genres) == 0) {
+            $this->genres = [];
+        } else {
+            // iterate through the genres;  add each of the rest to the array
+            $this->genres = [];
+            require_once 'Genre.php';
+            foreach ($genres as $genre) {
+                $genre = new Genre($genre['value'], $this->db);
+                if ($genre->get_id() != -1) {
+                    $this->genres[] = ['id' => $genre->get_id(), 'name' => $genre->get_name(), 'slug' => $genre->get_slug()];
+                }
+
+            }
+
+        }
+
+    }
+    public function get_img(): string
+    {
+        return $this->cover;
+    }
+
+    public function get_id(): int
+    {
+        return $this->id;
+    }
+
+    public function get_name(): string
+    {
+        return $this->name;
+    }
+
+    public function get_slug(): string
+    {
+        return $this->slug;
+    }
+
+    public function get_djs(){
+        return $this->djs;
+    }
+
+    /**
+     * @param $mix
+     * @return true
+     */
+    private function build_mix($mix): bool
+    {
+        $this->id = $mix['id'];
+        $this->name = $mix['title'];
+        $this->slug = $mix['slug'];
+        $this->description = $mix['description'];
+        if (isset($mix['cover'])) {
+
+            // is this legacy code?
+            // the code is legacy if it starts with /dj/,
+            // if it does, prefix with https://www.utahsdjs.com
+            if (substr($mix['cover'], 0, 5) == "/djs/") {
+                $mix['cover'] = substr($mix['cover'], 4);
+                $this->cover = "https://cdn.utahsdjs.com" . $mix['cover'];
+            } else {
+                $this->cover = $mix['cover'];
+            }
+        }
+        $this->url = $mix['url'];
+        $this->seconds = $mix['seconds'];
+        $this->mediaplayer = $mix['mediaplayer'];
+        $this->recorded = $mix['recorded'];
+        $this->created = $mix['created'];
+        $this->updated = $mix['lastupdated'];
+        $this->enabled = $mix['pending'];
+        require 'DJ.php';
+        $this->djs[] = new DJ($mix['dj1'], $this->db);
+        if ($mix['dj2'] != null)
+            $this->djs[] = new DJ($mix['dj2'], $this->db);
+        if ($mix['dj3'] != null)
+            $this->djs[] = new DJ($mix['dj3'], $this->db);
+
+        // delete any nulls from the array
+        $this->djs = array_filter($this->djs);
+
+        $this->genre = $this->get_mix_genres();
+        $this->playcount = $this->get_playcount();
+
+
+        return true;
+    }
+
+}
+
diff --git a/dj.php b/dj.php
index ae9438a..e8a319a 100644
--- a/dj.php
+++ b/dj.php
@@ -30,7 +30,7 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><?php echo $config['app']['name']; ?></title>
     <link href="css/bootstrap.min.css" rel="stylesheet">
-    <link href="fontawesome/css/all.css" rel="stylesheet" />
+    <link href="fontawesome/css/all.css" rel="stylesheet"/>
 
 
 </head>
@@ -42,11 +42,11 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
             <div class="col">
                 <nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
                     <ol class="breadcrumb mb-0">
-                        <li class="breadcrumb-item"><a href="#"><?php echo $locale['home']; ?></a></li>
-                        <li class="breadcrumb-item"><a href="#"><?php echo $locale['djs']; ?></a></li>
+                        <li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
+                        <li class="breadcrumb-item"><a href="/djs.php"><?php echo $locale['djs']; ?></a></li>
                         <li class="breadcrumb-item active"
                             aria-current="page"><?php
-                            if ($dj && $dj->get_name() != ""){
+                            if ($dj && $dj->get_name() != "") {
                                 echo $dj->get_name();
 
                             } else {
@@ -67,16 +67,16 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
                                  alt="avatar"
                                  class="rounded-circle img-fluid" style="width: 150px;">
                             <h5 class="my-3"><?php echo $dj->get_name();
-                             ?></h5>
+                                ?></h5>
                             <?php
 
-                                if ($dj->get_claimed()) {
-                                    echo '<p class="text-muted mb-1">';
+                            if ($dj->get_claimed()) {
+                                echo '<p class="text-muted mb-1">';
                                 echo "<i class='fa fa-user-shield' style='color: gold'>Claimed</i>";
                                 echo "</p>";
-                                }
+                            }
 
-                                ?>
+                            ?>
                             </p>
                             <p class="text-muted mb-4">$location1</p>
                             <div class="d-flex justify-content-center mb-2">
@@ -151,6 +151,7 @@ if (isset($_GET['dj']) && $_GET['dj'] != "") {
                                     </p>
                                     </li>";
                                 }
+
                                 $socials = $dj->get_socials();
 
                                 foreach ($socials as $key => $value) {
diff --git a/genre.php b/genre.php
index 4d3d8d4..85c519a 100644
--- a/genre.php
+++ b/genre.php
@@ -45,8 +45,8 @@ if (isset($_GET['genre']) && $_GET['genre'] != "") {
             <div class="col">
                 <nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
                     <ol class="breadcrumb mb-0">
-                        <li class="breadcrumb-item"><a href="#"><?php echo $locale['home']; ?></a></li>
-                        <li class="breadcrumb-item"><a href="#"><?php echo $locale['genres']; ?></a></li>
+                        <li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
+                        <li class="breadcrumb-item"><a href="/genres.php"><?php echo $locale['genres']; ?></a></li>
                         <li class="breadcrumb-item active"
                             aria-current="page"><?php
                             if ($genre && $genre->get_name() != "") {
@@ -59,120 +59,36 @@ if (isset($_GET['genre']) && $_GET['genre'] != "") {
                 </nav>
             </div>
         </div>
-        <?php if ($genreNotFound): ?>
+        <?php if ($genreFound): ?>
             <div class="row">
                 <div class="col-lg-4">
                     <div class="card mb-4">
                         <div class="card-body text-center">
-                            <img src="<?php echo $dj->get_img(); ?>"
+                            <img src="<?php echo $genre->get_img(); ?>"
                                  alt="avatar"
                                  class="rounded-circle img-fluid" style="width: 150px;">
-                            <h5 class="my-3"><?php echo $dj->get_name();
+                            <h5 class="my-3"><?php echo $genre->get_name();
                                 ?></h5>
-                            <?php
 
-                            if ($dj->get_claimed()) {
-                                echo '<p class="text-muted mb-1">';
-                                echo "<i class='fa fa-user-shield' style='color: gold'>Claimed</i>";
-                                echo "</p>";
-                            }
-
-                            ?>
                             </p>
-                            <p class="text-muted mb-4">$location1</p>
                             <div class="d-flex justify-content-center mb-2">
                                 <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">
                                     <?php echo $locale['follow']; ?>
                                 </button>
-                                <button type="button" data-mdb-button-init data-mdb-ripple-init
-                                        class="btn btn-outline-primary ms-1"><?php echo $locale['message']; ?>
-                                </button>
                             </div>
                         </div>
                     </div>
-                    <div class="card mb-4 mb-lg-0">
-                        <div class="card-body p-0">
-                            <ul class="list-group list-group-flush rounded-3">
-                                <?php
-                                function social_line($social, $value): string
-                                {
-                                    $icon = "";
-                                    $url = "";
-                                    $color = "#000000";
-
-                                    switch ($social) {
-                                        case "facebook":
-                                            $icon = "fa-brands fa-facebook";
-                                            $url = "https://www.facebook.com/$value";
-                                            $color = "#3b5998";
-                                            $name = "Facebook";
-                                            break;
-                                        case "instagram":
-                                            $icon = "fa-brands fa-instagram";
-                                            $url = "https://www.instagram.com/$value";
-                                            $color = "#ac2bac";
-                                            $name = "Instagram";
-                                            break;
-                                        case "twitter":
-                                            $icon = "fa-brands fa-twitter";
-                                            $url = "https://www.twitter.com/$value";
-                                            $color = "#55acee";
-                                            $name = "Twitter";
-                                            break;
-                                        case "myspace":
-                                            $icon = "fa-brands fa-myspace";
-                                            $url = "https://www.myspace.com/$value";
-                                            $color = "#000000";
-                                            $name = "Myspace";
-                                            break;
-                                        case "soundcloud":
-                                            $icon = "fa-brands fa-soundcloud";
-                                            $url = "https://www.soundcloud.com/$value";
-                                            $color = "#ff8800";
-                                            $name = "Soundcloud";
-                                            break;
-                                        case "mixcloud":
-                                            $icon = "fa-brands fa-mixcloud";
-                                            $url = "https://www.mixcloud.com/$value";
-                                            $color = "#00c7f7";
-                                            $name = "Mixcloud";
-                                            break;
-                                        case "spotify":
-                                            $icon = "fa-brands fa-spotify";
-                                            $url = "https://www.spotify.com/$value";
-                                            $color = "#1DB954";
-                                            $name = "Spotify";
-                                            break;
-                                    }
-
-                                    return "
-                                    <li class='list-group-item d-flex justify-content-between align-items-center p-3'>
-                                    <i class='fa $icon fa-lg' style='color: $color;'></i>
-                                    <p class='mb-0'><a href='$url'>$value</a>
-                                    </p>
-                                    </li>";
-                                }
-                                $socials = $dj->get_socials();
-
-                                foreach ($socials as $key => $value) {
-                                    echo social_line($key, $value);
-                                }
-
-                                ?>
-
-                            </ul>
-                        </div>
-                    </div>
                 </div>
                 <div class="col-lg-8">
                     <div class="card mb-4">
                         <div class="card-body">
                             <div class="row">
                                 <div class="col-sm-3">
-                                    <p class="mb-0">Full Name</p>
+                                    <p class="mb-0"><?php echo $locale['mix-count']; ?></p>
                                 </div>
                                 <div class="col-sm-9">
-                                    <p class="text-muted mb-0">Johnatan Smith</p>
+                                    <p class="text-muted mb-0"><?php echo $genre->get_count(); ?>
+</p>
                                 </div>
                             </div>
                             <hr>
@@ -184,33 +100,6 @@ if (isset($_GET['genre']) && $_GET['genre'] != "") {
                                     <p class="text-muted mb-0">example@example.com</p>
                                 </div>
                             </div>
-                            <hr>
-                            <div class="row">
-                                <div class="col-sm-3">
-                                    <p class="mb-0">Phone</p>
-                                </div>
-                                <div class="col-sm-9">
-                                    <p class="text-muted mb-0">(097) 234-5678</p>
-                                </div>
-                            </div>
-                            <hr>
-                            <div class="row">
-                                <div class="col-sm-3">
-                                    <p class="mb-0">Mobile</p>
-                                </div>
-                                <div class="col-sm-9">
-                                    <p class="text-muted mb-0">(098) 765-4321</p>
-                                </div>
-                            </div>
-                            <hr>
-                            <div class="row">
-                                <div class="col-sm-3">
-                                    <p class="mb-0">Address</p>
-                                </div>
-                                <div class="col-sm-9">
-                                    <p class="text-muted mb-0">Bay Area, San Francisco, CA</p>
-                                </div>
-                            </div>
                         </div>
                     </div>
                     <div class="row">
diff --git a/genres.php b/genres.php
new file mode 100644
index 0000000..a407117
--- /dev/null
+++ b/genres.php
@@ -0,0 +1,111 @@
+<?php
+
+// read toml config file
+require_once 'vendor/autoload.php';
+require_once 'functions/i18n.php';
+require_once 'classes/Database.php';
+require_once 'classes/Genres.php';
+
+use Yosymfony\Toml\Toml;
+
+$config = Toml::ParseFile('includes/config.toml');
+$lang = $_SESSION['lang'] ?? $config['app']['locale'];
+$locale = loadLocale($lang);
+$genresFound = false;
+// if there's a query parameter named 'dj', load the DJ class
+$db = new Database($config);
+$genres = new Genres($db);
+?>
+<!doctype html >
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><?php echo $config['app']['name']; ?></title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="fontawesome/css/all.css" rel="stylesheet"/>
+
+<style>
+    .card {
+        height: 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .card-body {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .card-title {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .card-text {
+        flex-grow: 1;
+    }
+
+    .btn {
+        margin-top: auto;
+    }
+
+</style>
+
+</head>
+<body style="background-color: #eee;">
+<?php require 'navbar.php'; ?>
+<section style="background-color: #eee;">
+    <div class="container py-5">
+        <div class="row">
+            <div class="col">
+                <nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
+                    <ol class="breadcrumb mb-0">
+                        <li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
+                        <li class="breadcrumb-item active"><a href="/genres.php"><?php echo $locale['genres']; ?></a>
+                        </li>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+
+        <?php
+        // we have a list of genres; we need to create them as cards
+        // loop through $genres->get_all_genres
+    // create a card for each genre, 4 max per row
+
+        $genres = $genres->get_nonzero_genres();
+        $count = 0;
+        foreach ($genres as $genre) {
+            if ($count % 4 == 0) {
+                echo '<div class="row">';
+            }
+            echo '<div class="col-md-3">';
+            echo '<div class="card mb-4">';
+            echo '<div class="card-body">';
+            echo '<h5 class="card-title" title="'.$genre['name'].'">' . $genre['name'] . '</h5>';
+            echo '<p class="card-text">' . $genre['count'] . ' ' ;
+            if ($genre['count'] == 1) {
+                echo $locale['mix'];
+            } else {
+                echo $locale['mixes'];
+            }
+            echo '</p>';
+            echo '<a href="/genre.php?genre=' . $genre['slug'] . '" class="btn btn-primary">' . $locale['view'] . '</a>';
+            echo '</div>';
+            echo '</div>';
+            echo '</div>';
+            if ($count % 4 == 3) {
+                echo '</div>';
+            }
+            $count++;
+        }
+        ?>
+
+    </div>
+</section>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/index.php b/index.php
index a864314..848107f 100644
--- a/index.php
+++ b/index.php
@@ -12,18 +12,32 @@ $lang = $_SESSION['lang'] ?? $config['app']['locale'];
 $locale = loadLocale($lang);
 
 ?>
-<!doctype html >
+
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title><?php echo $config['app']['name']; ?></title>
     <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="fontawesome/css/all.css" rel="stylesheet"/>
+
 
 </head>
-<body>
+<body style="background-color: #eee;">
 <?php require 'navbar.php'; ?>
-
-<script src="js/bootstrap.bundle.min.js"></script>
+<section style="background-color: #eee;">
+    <div class="container py-5">
+        <div class="row">
+            <div class="col">
+                <nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
+                    <ol class="breadcrumb mb-0">
+                        <li class="breadcrumb-item active"><a href="/"><?php echo $locale['home']; ?></a></li>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+    </div>
+</section>
+    <script src="js/bootstrap.bundle.min.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/locale/en_US/messages.php b/locale/en_US/messages.php
index cdc51d4..3bb19a8 100644
--- a/locale/en_US/messages.php
+++ b/locale/en_US/messages.php
@@ -19,4 +19,15 @@ return [
     "genre" => "Genre",
     "genres" => "Genres",
     "genreNotFound" => "Could not load genre; either the genre wasn't found, was empty, or this genre is private.",
+    "mix-count" => "Mix Count",
+    "mixes" => "Mixes",
+    "mix" => "Mix",
+    "mixNotFound" => "Could not load mix; either the mix wasn't found, was empty, or this mix is private.",
+    "mixName" => "Mix Name",
+    "mixDescription" => "Mix Description",
+    "mixLength" => "Mix Length",
+    "mixGenre" => "Mix Genre",
+    "view" => "View",
+    "mixname" => "Mix Name",
+
 ];
\ No newline at end of file
diff --git a/mix.php b/mix.php
new file mode 100644
index 0000000..9c54b69
--- /dev/null
+++ b/mix.php
@@ -0,0 +1,242 @@
+<?php
+
+// read toml config file
+require_once 'vendor/autoload.php';
+require_once 'functions/i18n.php';
+require_once 'classes/Database.php';
+require_once 'classes/Mix.php';
+
+use Yosymfony\Toml\Toml;
+
+$config = Toml::ParseFile('includes/config.toml');
+$lang = $_SESSION['lang'] ?? $config['app']['locale'];
+$locale = loadLocale($lang);
+// if there's a query parameter named 'dj', load the Mix class
+$db = new Database($config);
+$mixFound = false;
+if (isset($_GET['mix']) && $_GET['mix'] != "") {
+    $mix = new Mix($_GET['mix'], $db);
+    if ($mix->get_name() != "") {
+        $mixFound = true;
+    }
+}
+
+
+?>
+<!doctype html >
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title><?php echo $config['app']['name']; ?></title>
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="fontawesome/css/all.css" rel="stylesheet"/>
+
+
+</head>
+<body style="background-color: #eee;">
+<?php require 'navbar.php'; ?>
+<section style="background-color: #eee;">
+    <div class="container py-5">
+        <div class="row">
+            <div class="col">
+                <nav aria-label="breadcrumb" class="bg-body-tertiary rounded-3 p-3 mb-4">
+                    <ol class="breadcrumb mb-0">
+                        <li class="breadcrumb-item"><a href="/"><?php echo $locale['home']; ?></a></li>
+                        <li class="breadcrumb-item"><a href="/mixes.php"><?php echo $locale['mixes']; ?></a></li>
+                        <li class="breadcrumb-item active"
+                            aria-current="page"><?php
+                            if ($mix && $mix->get_name() != "") {
+                                echo $mix->get_name();
+
+                            } else {
+                                echo $locale['notfound'];
+                            }
+                            ?></li>
+                    </ol>
+                </nav>
+            </div>
+        </div>
+
+        <?php if ($mixFound): ?>
+            <div class="row">
+                <div class="col-lg-4">
+                    <div class="card mb-4">
+                        <div class="card-body text-center">
+                            <img src="<?php echo $mix->get_img(); ?>"
+                                 alt="avatar"
+                                 class="img-fluid" style="width: 150px;">
+                            <h5 class="my-3"><?php echo $mix->get_name();
+                                ?></h5>
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-8">
+                    <div class="card mb-4">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <p class="mb-0"><?php echo $locale['mixname'] ?></p>
+                                </div>
+                                <div class="col-sm-9">
+                                    <p class="text-muted mb-0"><?php echo $mix->get_name(); ?></p>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <p class="mb-0"><?php echo $locale['djs'] ?></p>
+                                </div>
+                                <div class="col-sm-9">
+                                    <p class="text-muted mb-0">
+                                        <?php
+
+                                        // loop through the $mix['djs'] array and output them in comma separated format
+                                        $djs = $mix->get_djs();
+                                        $djCount = count($djs);
+                                        $i = 0;
+                                        foreach ($djs as $dj) {
+                                            echo "<a href='/dj.php?dj=";
+                                            echo $dj->get_slug();
+                                            echo "'>" . $dj->get_name() . "</a>";
+                                            if ($i < $djCount - 1) {
+                                                echo ", ";
+                                            }
+                                            $i++;
+                                        }
+
+
+                                        ?>
+
+                                    </p>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <p class="mb-0">Phone</p>
+                                </div>
+                                <div class="col-sm-9">
+                                    <p class="text-muted mb-0">(097) 234-5678</p>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <p class="mb-0">Mobile</p>
+                                </div>
+                                <div class="col-sm-9">
+                                    <p class="text-muted mb-0">(098) 765-4321</p>
+                                </div>
+                            </div>
+                            <hr>
+                            <div class="row">
+                                <div class="col-sm-3">
+                                    <p class="mb-0">Address</p>
+                                </div>
+                                <div class="col-sm-9">
+                                    <p class="text-muted mb-0">Bay Area, San Francisco, CA</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="card mb-4 mb-md-0">
+                                <div class="card-body">
+                                    <p class="mb-4"><span class="text-primary font-italic me-1">assigment</span> Project
+                                        Status
+                                    </p>
+                                    <p class="mb-1" style="font-size: .77rem;">Web Design</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 80%"
+                                             aria-valuenow="80"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 72%"
+                                             aria-valuenow="72"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 89%"
+                                             aria-valuenow="89"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 55%"
+                                             aria-valuenow="55"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
+                                    <div class="progress rounded mb-2" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 66%"
+                                             aria-valuenow="66"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="card mb-4 mb-md-0">
+                                <div class="card-body">
+                                    <p class="mb-4"><span class="text-primary font-italic me-1">assigment</span> Project
+                                        Status
+                                    </p>
+                                    <p class="mb-1" style="font-size: .77rem;">Web Design</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 80%"
+                                             aria-valuenow="80"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">Website Markup</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 72%"
+                                             aria-valuenow="72"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">One Page</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 89%"
+                                             aria-valuenow="89"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">Mobile Template</p>
+                                    <div class="progress rounded" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 55%"
+                                             aria-valuenow="55"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                    <p class="mt-4 mb-1" style="font-size: .77rem;">Backend API</p>
+                                    <div class="progress rounded mb-2" style="height: 5px;">
+                                        <div class="progress-bar" role="progressbar" style="width: 66%"
+                                             aria-valuenow="66"
+                                             aria-valuemin="0" aria-valuemax="100"></div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        <?php else: ?>
+            <div class="row">
+                <div class="col">
+                    <div class="alert alert-danger" role="alert">
+                        <?php echo $locale['djNotFound']; ?>
+                    </div>
+                </div>
+            </div>
+        <?php endif;
+
+        ?>
+
+    </div>
+</section>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/navbar.php b/navbar.php
index 8f808f0..94f792a 100644
--- a/navbar.php
+++ b/navbar.php
@@ -1,28 +1,40 @@
-<header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
-    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#"><?php echo $config['app']['name'];?></a>
+<header class="navbar navbar-expand-md navbar-dark bg-dark sticky-top shadow">
+    <div class="container-fluid">
+        <a class="navbar-brand pe-3" href="#"><?php echo htmlspecialchars($config['app']['name']); ?></a>
 
-    <ul class="navbar-nav flex-row d-md-none">
-        <li class="nav-item text-nowrap">
-            <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false"
-                    aria-label="Toggle search">
-                <svg class="bi">
-                    <use xlink:href="#search"/>
-                </svg>
-            </button>
-        </li>
-        <li class="nav-item text-nowrap">
-            <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas"
-                    data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
-                    aria-label="Toggle navigation">
-                <svg class="bi">
-                    <use xlink:href="#list"/>
-                </svg>
-            </button>
-        </li>
-    </ul>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
+                aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <?php
+        function current_list(): string
+        {
+            return ' active" aria-current="page';
+        }
 
-    <div id="navbarSearch" class="navbar-search w-100 collapse">
-        <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
+        ?>
+        <div class="collapse navbar-collapse" id="navbarToggle">
+            <ul class="navbar-nav me-auto mb-2 mb-md-0">
+                <li class="nav-item">
+                    <a class="nav-link<?php
+                    // if the page is genres.php, set active and aria-current="page"
+                    if (basename($_SERVER['SCRIPT_NAME']) == 'index.php') {
+                        echo current_list();
+                    }
+                    ?>" href="/">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link<?php
+                    if (basename($_SERVER['SCRIPT_NAME']) == 'genres.php') {
+                        echo current_list();
+                    }?>" href="/genres.php">Genres</a>
+                </li>
+            </ul>
+
+            <form class="d-flex" role="search">
+                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success" type="submit">Search</button>
+            </form>
+        </div>
     </div>
-</header>
\ No newline at end of file
+</header>