diff --git a/templates/base.html.twig b/templates/base.html.twig
index cd518a3..2bcab85 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -12,38 +12,29 @@
         {% endblock %}
 
         {% block javascripts %}
+            <script src="https://kit.fontawesome.com/5a377fab5b.js" crossorigin="anonymous"></script>
         {% endblock %}
     </head>
-    <body>
-        <div class="mb-5">
+    <body class="bg-gray-800 text-white font-sans">
+        <div class="mb-20">
             <!-- Main Navigation -->
-            <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #27333A;">
-                <div class="container-fluid">
-                    <a class="navbar-brand" href="{{ path('app_homepage') }}">
+            <nav class="bg-gray-900">
+                <div class="container mx-auto flex items-center justify-between px-4 py-6">
+                    <a href="{{ path('app_homepage') }}">
                         <i class="fas fa-record-vinyl"></i>
                         Mixed Vinyl
                     </a>
-                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
-                    </button>
-                    <div class="collapse navbar-collapse d-flex justify-content-end" id="navbarNavDropdown">
-                        <ul class="navbar-nav">
-                            <li class="nav-item">
-                                <a class="nav-link" style="margin-top: 20px;" href="{{ path('app_browse') }}">Browse Mixes</a>
+                    <!-- For simplicity, the collapse feature is omitted -->
+                    <div class="flex justify-end items-center">
+                        <ul class="flex space-x-4">
+                            <li class="pt-4">
+                                <a href="{{ path('app_browse') }}">Browse Mixes</a>
                             </li>
-                            <!-- Not Authenticated -->
-                                <!-- <li class="nav-item"><button href="#" class="btn btn-primary btn-sm">Login</button></li> -->
-                            <!-- End Not Authenticated -->
-
                             <!-- If Authenticated -->
-                            <li class="nav-item dropdown">
-                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                    <i class="fas fa-user-astronaut p-2" style="border: solid 1px #fff; border-radius: 50px; font-size: 40px;"></i>
+                            <li class="relative group">
+                                <a href="#" class="flex items-center justify-center border-2 border-white rounded-full p-2 w-12 h-12">
+                                    <i class="fas fa-user-astronaut text-xl"></i>
                                 </a>
-                                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-                                    <li><a class="dropdown-item" href="#">My Mixes</a></li>
-                                    <li><a class="dropdown-item" href="#">Signout</a></li>
-                                </ul>
                             </li>
                             <!-- End If Authenticated -->
                         </ul>
@@ -62,22 +53,20 @@
         {% block body %}{% endblock %}
 
         <!-- Footer -->
-        <div class="container mt-5">
-            <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-                <div class="col-md-4 d-flex align-items-center">
-                    <span class="me-1" style="color: red;"><i class="fas fa-heart"></i></span>
-                    <span class="text-muted me-1">The guys and gals at</span>
-                    <a target="_blank" href="https://symfonycasts.com/" style="color: #25a1dd" class="mb-3 me-2 mb-md-0 text-decoration-none lh-1">
+        <div class="container mx-auto my-20">
+            <footer class="flex items-center justify-between py-12 border-t border-gray-600">
+                <div class="flex items-center space-x-2 text-red-600">
+                    <i class="fas fa-heart"></i>
+                    <span class="text-gray-400">The guys and gals at</span>
+                    <a target="_blank" href="https://symfonycasts.com/" class="text-blue-500">
                         SymfonyCasts
                     </a>
                 </div>
-
-                <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
-                    <li class="ms-3"><a class="text-muted" target="_blank" href="https://github.com/SymfonyCasts/symfony6"><i class="fab fa-github"></i></a></li>
+                <ul class="flex space-x-4">
+                    <li><a class="text-gray-400" target="_blank" href="https://github.com/SymfonyCasts/symfony6"><i class="fab fa-github"></i></a></li>
                 </ul>
             </footer>
         </div>
         <!-- End Footer -->
-
     </body>
 </html>
diff --git a/templates/mix/show.html.twig b/templates/mix/show.html.twig
index 19191ea..eaf4fa4 100644
--- a/templates/mix/show.html.twig
+++ b/templates/mix/show.html.twig
@@ -3,13 +3,13 @@
 {% block title %}{{ mix.title }} Mix{% endblock %}
 
 {% block body %}
-    <div class="container">
-        <h1 class="d-inline me-3">{{ mix.title }}</h1>
-        <div class="row mt-5">
-            <div class="col-12 col-md-4">
+    <div class="container mx-auto px-4">
+        <h1 class="inline-block mr-3">{{ mix.title }}</h1>
+        <div class="flex flex-wrap mt-20">
+            <div class="w-full md:w-1/3">
                 {{ include('mix/_recordSvg.html.twig') }}
             </div>
-            <div class="col-12 col-md-8 ps-5">
+            <div class="w-full md:w-2/3 pl-20">
                 <h2 class="mb-4">{{ mix.trackCount }} songs <small>(genre: {{ mix.genre }})</small></h2>
                 <p>{{ mix.description }}</p>
 
@@ -17,13 +17,13 @@
                 <form action="{{ path('app_mix_vote', {id: mix.id }) }}" method="POST">
                     <button
                         type="submit"
-                        class="btn btn-outline-primary"
+                        class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-3 py-2 rounded"
                         name="direction"
                         value="up"
                     ><span class="fa fa-thumbs-up"></span></button>
                     <button
                         type="submit"
-                        class="btn btn-outline-primary"
+                        class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white px-3 py-2 rounded ml-2"
                         name="direction"
                         value="down"
                     ><span class="fa fa-thumbs-down"></span></button>
diff --git a/templates/vinyl/browse.html.twig b/templates/vinyl/browse.html.twig
index 1d4fb0f..3c7517c 100644
--- a/templates/vinyl/browse.html.twig
+++ b/templates/vinyl/browse.html.twig
@@ -1,43 +1,41 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-<div class="container">
-    <h1>Browse {{ genre ? genre : 'All Genres' }}</h1>
-
-    <h2 class="mt-5 mb-4">Filter by Genre</h2>
-    <ul class="genre-list ps-0 mt-2 mb-3">
-        <li class="d-inline">
-            <a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
+<div class="container mx-auto px-4">
+    <h1 class="text-3xl font-bold">{{ genre ? genre : 'All Genres' }}</h1>
+    <ul class="list-none mt-8 mb-12">
+        <li class="inline">
+            <a class="btn bg-blue-500 text-white py-1 px-2" href="{{ path('app_browse', {
                 slug: 'pop'
             }) }}">Pop</a>
         </li>
-        <li class="d-inline">
-            <a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
+        <li class="inline ml-2">
+            <a class="btn bg-blue-500 text-white py-1 px-2" href="{{ path('app_browse', {
                 slug: 'rock'
             }) }}">Rock</a>
         </li>
-        <li class="d-inline">
-            <a class="btn btn-primary btn-sm" href="{{ path('app_browse', {
+        <li class="inline ml-2">
+            <a class="btn bg-blue-500 text-white py-1 px-2" href="{{ path('app_browse', {
                 slug: 'heavy-metal'
             }) }}">Heavy Metal</a>
         </li>
     </ul>
 
     <div>
-        <h2 class="mt-5">Mixes</h2>
+        <h2 class="mt-10 text-2xl font-bold">Mixes</h2>
         <turbo-frame id="mix-browse-list-{{ pager.currentPage }}" target="_top">
-            <div class="row">
+            <div class="flex flex-wrap -mx-2">
                 {% for mix in pager %}
-                <div class="col col-md-4">
+                <div class="w-full md:w-1/3 px-2">
                     <a href="{{ path('app_mix_show', {
                         slug: mix.slug
-                    }) }}" class="mixed-vinyl-container p-3 text-center">
-                        <img src="{{ mix.getImageUrl(300) }}" alt="Mix album cover">
-                        <p class="mt-2"><strong>{{ mix.title }}</strong></p>
+                    }) }}" class="mixed-vinyl-container p-6 text-center block">
+                        <img src="{{ mix.getImageUrl(300) }}" alt="Mix album cover" class="mx-auto">
+                        <p class="mt-8 font-bold">{{ mix.title }}</p>
                         <span>{{ mix.trackCount }} Tracks</span>
-                        |
+                        <span class="mx-1">|</span>
                         <span>{{ mix.genre }}</span>
-                        |
+                        <span class="mx-1">|</span>
                         <span>{{ mix.createdAt|ago }}</span>
                         <br>
                         {{ mix.votesString }} votes
diff --git a/templates/vinyl/homepage.html.twig b/templates/vinyl/homepage.html.twig
index 1432a4e..7a8e32a 100644
--- a/templates/vinyl/homepage.html.twig
+++ b/templates/vinyl/homepage.html.twig
@@ -3,19 +3,19 @@
 {% block title %}Create a new Record | {{ parent() }}{% endblock %}
 
 {% block body %}
-<div class="container">
-    <h1 class="d-inline me-3">{{ title }}</h1> <i class="fas fa-edit"></i>
-    <div class="row mt-5">
-        <div class="col-12 col-md-4">
+<div class="container mx-auto px-4">
+    <h1 class="inline-block mr-3">{{ title }}</h1> <i class="fas fa-edit"></i>
+    <div class="flex flex-wrap mt-5">
+        <div class="w-full md:w-1/3">
             {{ include('mix/_recordSvg.html.twig') }}
         </div>
-        <div class="col-12 col-md-8 ps-5">
+        <div class="w-full md:w-2/3 pl-10">
             <h2 class="mb-4">10 songs (30 minutes of 60 still available)</h2>
             {% for track in tracks %}
             <div class="song-list">
-                <div class="d-flex mb-3">
+                <div class="flex mb-3">
                     <a href="#">
-                        <i class="fas fa-play me-3"></i>
+                        <i class="fas fa-play mr-3"></i>
                     </a>
                     <span class="song-details">{{ track.song }} - {{ track.artist }}</span>
                     <a href="#">
@@ -27,7 +27,7 @@
                 </div>
             </div>
             {% endfor %}
-            <button type="button" class="btn btn-success"><i class="fas fa-plus"></i> Add a song</button>
+            <button type="button" class="bg-green-500 text-white py-2 px-4 rounded"><i class="fas fa-plus"></i> Add a song</button>
         </div>
     </div>
 </div>
