diff --git a/classes/Genres.php b/classes/Genres.php
index b881859..9253186 100644
--- a/classes/Genres.php
+++ b/classes/Genres.php
@@ -1,53 +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;
-    }
+<?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
index 079718d..1108d8a 100644
--- a/classes/Mix.php
+++ b/classes/Mix.php
@@ -1,195 +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;
-    }
-
-}
-
+<?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/genres.php b/genres.php
index a407117..1ac9647 100644
--- a/genres.php
+++ b/genres.php
@@ -1,111 +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>
+<?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/mix.php b/mix.php
index 9c54b69..c5697e7 100644
--- a/mix.php
+++ b/mix.php
@@ -1,242 +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>
+<?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