diff --git a/code/static/PRC-Car.png b/code/static/PRC-Car.png
new file mode 100644
index 0000000..da5da69
Binary files /dev/null and b/code/static/PRC-Car.png differ
diff --git a/code/static/PRC-Text.png b/code/static/PRC-Text.png
new file mode 100644
index 0000000..ce60201
Binary files /dev/null and b/code/static/PRC-Text.png differ
diff --git a/code/static/panamaracing.css b/code/static/panamaracing.css
index cbcd9a4..81f220a 100644
--- a/code/static/panamaracing.css
+++ b/code/static/panamaracing.css
@@ -7,462 +7,537 @@
     --ifm-white: #ffffff;
 }
 
+html,
+body {
+    margin: 0;
+    padding: 0;
+    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
+}
 
-.h1
-{
-    font-family: Helvetica;
-    font-size: 16px;
+body {
+    margin: 5em;
+    background-color: var(--ifm-black);
     color: var(--ifm-white);
-    padding-top: 5px;
-    padding-bottom: 5px;
-    margin-bottom: 15px;
-    margin-top: 10px;
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    color: var(--ifm-white);
+}
+
+.container {
+    width: min(90%, 100rem);
+    /* 1600px */
+    margin: 0 auto;
+    font-size: 1rem;
+}
+
+.header-grid {
+    display: grid;
+    width: 100%;
+    grid-template-columns: auto 1fr;
+    gap: 0;
+    align-items: center;
+}
+
+.header-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.brand-logos {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.brand-logos img {
+    flex: 0 0 auto;
+    width: auto;
+    height: auto;
+    max-width: none;
+    display: block;
+}
+
+.prc-stripes,
+.header-title {
+    grid-column: 1 / span 2;
+}
+
+
+.prc-stripes {
+    width: 90%;
+    --square: 0.55rem;
+    /* 10px */
+    height: calc(var(--square) * 3);
+    background:
+        conic-gradient(from 90deg at 50% 50%, #000 0 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / calc(var(--square) * 2) calc(var(--square) * 2);
+}
+
+.header-title {
+    margin: 0.625rem 0 0.9375rem;
+    /* 10px 0 15px */
+    font-family: Helvetica, Arial, sans-serif;
+    line-height: 1em;
+    color: inherit;
+    padding-left: 5rem;
+    padding-right: 10rem;
+}
+
+.h1 {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: clamp(1.8rem, 1rem + 2vw, 3rem);
+    color: var(--ifm-white);
+    padding-top: 0.3125rem;
+    /* 5px */
+    padding-bottom: 0.3125rem;
+    /* 5px */
+    margin-bottom: 0.9375rem;
+    /* 15px */
+    margin-top: 0.625rem;
+    /* 10px */
     line-height: 1em;
 }
 
-.p
-{
-    font-family: Helvetica;
-    font-size: 6px;
+.p {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 1rem;
     color: var(--ifm-grey);
-    margin-bottom: 45px;
+    margin-bottom: 2.8125rem;
+    /* 45px */
 }
 
-.href
-{
-    font-family: Helvetica;
+.href {
+    font-family: Helvetica, Arial, sans-serif;
     text-decoration: none;
 }
 
-.mixlink
-{
-    line-height: 16px;
+.mixlink {
+    line-height: 1rem;
+    /* 16px */
     font-weight: 600;
-    font-size: 10px;
-    margin-bottom: 0;
-    margin-top: 0;
-    font-family: Helvetica;
+    font-size: 0.625rem;
+    /* 10px */
+    margin: 0;
+    font-family: Helvetica, Arial, sans-serif;
 }
 
-.amixlink
-{
-    font-family: Helvetica;
+.amixlink {
+    font-family: Helvetica, Arial, sans-serif;
     color: var(--ifm-grey);
     line-height: 1.6em;
     font-weight: 600;
-    font-size: 10px;
     text-decoration: none;
     background: var(--ifm-deep-black);
     display: inline-flex;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    padding: 2px 10px;
-    border-radius: 20px;
+    margin: 0.125rem 0;
+    /* 2px 0 */
+    padding: 0.125rem 0.625rem;
+    /* 2px 10px */
+    border-radius: 1.25rem;
+    /* 20px */
 }
 
-.amixlink:hover
-{
+.amixlink:hover {
     color: #000;
     background: var(--ifm-red);
 }
 
-.body
-{
+.body {
     width: 100%;
     background-color: var(--ifm-black);
 }
 
-.mixsections
-{
-    font-family: Helvetica;
+.mixsections {
+    font-family: Helvetica, Arial, sans-serif;
     font-weight: 900;
-    font-size: 12px;
     color: var(--ifm-grey);
-    padding: 5px;
+    padding: 0.3125rem;
+    /* 5px */
     margin-top: 2%;
-    margin-bottom: 5px;
-    margin-right: 15px;
-    border: solid 3px var(--ifm-grey);
+    margin-bottom: 0.3125rem;
+    /* 5px */
+    margin-right: 0.9375rem;
+    /* 15px */
+    border: solid 0.1875rem var(--ifm-grey);
+    /* 3px */
     text-decoration: none;
 }
 
-.prclogo
-{
-    height: 120px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-top: 10px;
+.prclogo {
+    height: 7.5rem;
+    /* 120px */
+    padding: 0.625rem 0 0.625rem 0.625rem;
+    /* 10px 0 10px 10px */
 }
 
-.divider
-{
-    height: 23px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-top: 10px;
+.divider {
+    height: 1.4375rem;
+    /* 23px */
+    padding: 0.625rem 0 0.625rem 0.625rem;
+    /* 10px 0 10px 10px */
 }
 
-.h2
-{
-    font-family: Helvetica;
-    font-size: 24px;
-    color: var(--ifm-grey);
-    font-weight: 200;
-    border-bottom: 2px solid var(--ifm-grey);
-    margin-bottom: 0px;
-}
-
-.header
-{
+.footer {
     width: 100%;
-    max-height: 120px;
-}
-
-.footer
-{
-    width: 100%;
-    height: 250px;
-    border-top: 2px solid var(--ifm-red);
+    height: 15.625rem;
+    /* 250px */
+    border-top: 0.125rem solid var(--ifm-red);
+    /* 2px */
     float: left;
     clear: both;
 }
 
-.djsectionmenu
-{
-    font-family: Helvetica;
-    font-size: 18px;
+.djsectionmenu {
+    font-family: Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    /* 18px */
     color: var(--ifm-red);
     line-height: 1em;
     z-index: 100;
     display: block;
     width: 10%;
-    height: 130px;
+    height: 8.125rem;
+    /* 130px */
     float: left;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    min-width: 130px;
+    margin-top: 0.3125rem;
+    /* 5px */
+    margin-bottom: 0.3125rem;
+    /* 5px */
+    min-width: 8.125rem;
+    /* 130px */
 }
 
-.djsectionmenu:hover
-{
+.djsectionmenu:hover {
     background-color: #e3301a;
 }
 
-.djsection
-{
-    font-family: Helvetica;
-    font-size: 18px;
+.djsection {
+    font-family: Helvetica, Arial, sans-serif;
     text-decoration: inherit;
     color: var(--ifm-red);
 }
 
-.djsection:hover
-{
+.djsection:hover {
     background-color: #000;
 }
 
-.h2
-{
-    font-family: Helvetica;
+.h2 {
+    font-family: Helvetica, Arial, sans-serif;
     color: var(--ifm-red);
-    font-size: 16px;
-    padding-top: 5px;
-    border-bottom: 2px solid var(--ifm-red);
+    padding-top: 0.3125rem;
+    /* 5px */
+    border-bottom: 0.125rem solid var(--ifm-red);
+    /* 2px */
 }
 
-.homeheader
-{
+.homeheader {
     background-image: url('/img/header.png');
     background-repeat: no-repeat;
-    padding-bottom: 20px;
+    padding-bottom: 1.25rem;
+    /* 20px */
 }
 
-.bottomimg
-{
+.bottomimg {}
+
+.imglink {
+    width: 12.5rem;
+    /* 200px */
 }
 
-.imglink
-{
-    width: 200px;
-}
-
-.footerlegal
-{
+.footerlegal {
     right: 0;
     float: right;
-    margin-top: 80px;
+    margin-top: 5rem;
+    /* 80px */
 }
 
-/* Three image containers (use 25% for four, and 50% for two, etc) */
-
-.column
-{
+.column {
     float: left;
-    margin-left: 0px;
+    margin-left: 0;
     padding-left: 2.5%;
     padding-right: 2.5%;
     width: 15%;
 }
 
-/* Clear floats after image containers */
-
-.row::after
-{
+.row::after {
     content: "";
     clear: both;
     display: table;
 }
 
-@media screen and (max-width: 768px)
-{
-    .column
-    {
+@media screen and (max-width: 48rem) {
+
+    /* 768px */
+    .column {
         padding-left: 5%;
         padding-right: 5%;
         width: 40%;
     }
 
-    .footer
-    {
+    .footer {
         margin-top: 15%;
     }
+
+    .brand-logos img {
+        max-width: 100%;
+        height: auto;
+    }
 }
 
-@media screen and (max-width: 500px)
-{
-    .column
-    {
-        padding-left: 0%;
+@media screen and (max-width: 31.25rem) {
+
+    /* 500px */
+    .column {
+        padding-left: 0;
         padding-right: 5%;
         width: 45%;
     }
+
+    .brand-logos img {
+        max-width: 100%;
+        height: auto;
+    }
 }
 
-.profileimg
-{
+.profileimg {
     overflow: hidden;
     height: auto;
     width: 30%;
 }
 
-.profilesection
-{
+.profilesection {
     width: 100%;
     overflow: hidden;
     margin-bottom: 2.5%;
     background-color: var(--ifm-red);
 }
 
-.image_collage
-{
+.image_collage {
     line-height: 0;
     -webkit-column-count: 5;
-    -webkit-column-gap: 0px;
+    -webkit-column-gap: 0;
     -moz-column-count: 5;
-    -moz-column-gap: 0px;
+    -moz-column-gap: 0;
     column-count: 5;
-    column-gap: 0px;
+    column-gap: 0;
 }
 
-.image_collage img
-{
+.image_collage img {
     width: 100% !important;
     height: auto !important;
 }
 
-@media (max-width: 1200px)
-{
-    .image_collage
-    {
+@media (max-width: 75rem) {
+
+    /* 1200px */
+    .image_collage {
         -moz-column-count: 4;
         -webkit-column-count: 4;
         column-count: 4;
     }
 }
 
-@media (max-width: 1000px)
-{
-    .image_collage
-    {
+@media (max-width: 62.5rem) {
+
+    /* 1000px */
+    .image_collage {
         -moz-column-count: 3;
         -webkit-column-count: 3;
         column-count: 3;
     }
 }
 
-@media (max-width: 800px)
-{
-    .image_collage
-    {
+@media (max-width: 50rem) {
+
+    /* 800px */
+    .image_collage {
         -moz-column-count: 2;
         -webkit-column-count: 2;
         column-count: 2;
     }
 }
 
-@media (max-width: 400px)
-{
-    .image_collage
-    {
+@media (max-width: 25rem) {
+
+    /* 400px */
+    .image_collage {
         -moz-column-count: 1;
         -webkit-column-count: 1;
         column-count: 1;
     }
 }
 
-.content
-{
-    width: 80%;
-    padding-left: 10%;
-    padding-right: 10%;
+.content {
+    padding-top: 3em;
+    width: min(90%, 100rem);
+    /* 1600px */
+    margin: 0 auto;
 }
 
-.latest
-{
+.latest {
     position: relative;
     clear: both;
 }
 
-.latestdiv
-{
+.latestdiv {
     width: 100%;
     position: relative;
     clear: both;
     float: left;
 }
 
-.sponsors
-{
-    margin-top: 20px;
+.sponsors {
+    margin-top: 1.25rem;
+    /* 20px */
     clear: both;
     float: left;
 }
 
-.linkimg:hover
-{
+.linkimg:hover {
     filter: invert(70%);
 }
 
-@media (max-width:499px)
-{
-    .djsectionmenu500
-    {
-        height: 70px;
+@media (max-width: 31.1875rem) {
+
+    /* 499px */
+    .djsectionmenu500 {
+        height: 4.375rem;
+        /* 70px */
         overflow: hidden;
-        min-width: 60px;
+        min-width: 3.75rem;
+        /* 60px */
         width: 50%;
     }
 }
 
-@media screen and (min-width: 600px) {
+@media screen and (min-width: 37.5rem) {
 
-    .h1{
-        font-size: 18px;
+    /* 600px */
+    .h1 {
+        font-size: 1.125rem;
+        /* 18px */
     }
 
-    .p
-    {
-        font-size: 8px;
+    .p {
+        font-size: 0.5rem;
+        /* 8px */
     }
 
-    .mixlink
-    {
-        font-size: 12px;
+    .mixlink {
+        font-size: 0.75rem;
+        /* 12px */
     }
 
-    .amixlink
-    {
-        font-size: 12px;
+    .amixlink {
+        font-size: 0.75rem;
+        /* 12px */
     }
 
-    .mixsections
-    {
-        font-size: 14px;
+    .mixsections {
+        font-size: 0.875rem;
+        /* 14px */
     }
 
-    .h2
-    {
-        font-size: 18px;
+    .h2 {
+        font-size: 1.125rem;
+        /* 18px */
     }
 
-    .header
-    {
-        max-height: 180px;
+    .header {
+        max-height: 11.25rem;
+        /* 180px */
     }
 
-    .prclogo
-    {
-        height: 180px;
+    .prclogo {
+        height: 11.25rem;
+        /* 180px */
     }
 
-    .divider
-    {
-        height: 35px;
+    .divider {
+        height: 2.1875rem;
+        /* 35px */
     }
 
-    .djsectionmenu
-    {
-        font-size: 25px;
+    .djsectionmenu {
+        font-size: 1.5625rem;
+        /* 25px */
     }
 
-    .djsection
-    {
-        font-size: 28px;
+    .djsection {
+        font-size: 1.75rem;
+        /* 28px */
+    }
+
+    .header-title {
+        font-size: 1.125rem;
+        /* 18px */
     }
 }
 
-@media screen and (min-width: 768px) {
-    .h1{
-        font-size: 26px;
+@media screen and (min-width: 48rem) {
+
+    /* 768px */
+    .h1 {
+        font-size: 1.625rem;
+        /* 26px */
     }
 
-    .p
-    {
-        font-size: 10px;
+    .p {
+        font-size: 0.625rem;
+        /* 10px */
     }
 
-    .mixlink
-    {
-        font-size: 14px;
+    .mixlink {
+        font-size: 0.875rem;
+        /* 14px */
     }
 
-    .amixlink
-    {
-        font-size: 14px;
+    .amixlink {
+        font-size: 0.875rem;
+        /* 14px */
     }
 
-    .mixsections
-    {
-        font-size: 16px;
+    .mixsections {
+        font-size: 1rem;
+        /* 16px */
     }
 
-    .h2
-    {
-        font-size: 24px;
+    .h2 {
+        font-size: 1.5rem;
+        /* 24px */
     }
 
-    .header
-    {
-        max-height: 220px;
+    .header {
+        max-height: 13.75rem;
+        /* 220px */
     }
 
-    .prclogo
-    {
-        height: 220px;
+    .prclogo {
+        height: 13.75rem;
+        /* 220px */
     }
 
-    .divider
-    {
-        height: 43px;
+    .divider {
+        height: 2.6875rem;
+        /* 43px */
     }
 
-    .djsectionmenu
-    {
-        font-size: 33px;
+    .djsectionmenu {
+        font-size: 2.0625rem;
+        /* 33px */
     }
 
-    .djsection
-    {
-        font-size: 33px;
+    .djsection {
+        font-size: 2.0625rem;
+        /* 33px */
+    }
+
+    .header-title {
+        font-size: 1.625rem;
+        /* 26px */
     }
 }
diff --git a/code/views/prc_layout.etlua b/code/views/prc_layout.etlua
index 2c84f92..3b1ef9d 100644
--- a/code/views/prc_layout.etlua
+++ b/code/views/prc_layout.etlua
@@ -12,33 +12,48 @@
   <link rel="stylesheet" href="/static/<%= titles.css %>">
 </head>
     <body class="body">
-    <header class="header">
-      <a href="/"><img src="/static/<%= titles['header'] %>" alt="prc logo" class="prclogo"/></a>
-    </header>
-    <div class="content">
-        <h1 class="h1">Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
-            <%= titles.name %><br>
-            Sharing <%= total[0] %> files
-        </h1>
-    </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
-    <div class="content">
-        <% content_for("inner") %>
-    </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
-    <div class="content">
-        <section class="latest">
-            <div class="latest_files">
-                <h1 class="h1">Latest uploads:</h1>
-            <% for i, file in ipairs(latestpath) do %>
-                <a class="amixlink" href="<%= '/data/' .. titles.url .. '/' .. file:gsub("#", "%%23") %>">
-                    <span class="mixlink"><%= latestname[i] %></span>
+        <div class="container">
+        <header class="header">
+            <div class="header-grid">
+                <a href="/" class="header-link">
+                    <div class="brand-logos">
+                        <img src="/static/PRC-Car.png" alt="Panama Racing Club car">
+                        <img src="/static/PRC-Text.png" alt="Panama Racing Club">
+                    </div>
                 </a>
-                </br>
-            <% end %>
+
+                <div class="prc-stripes" aria-hidden="true"></div>
+
+                <h1 class="header-title">
+                    Tons Of Mix - Downloads & Streams (right click + Save link as... for downloads)<br>
+                    <%= titles.name %><br>
+                    Sharing <%= total[0] %> files
+                </h1>
+
+                <div class="prc-stripes" aria-hidden="true"></div>
             </div>
-        </section>
+        </header>
+
+        <br>
+        <div class="content">
+            <% content_for("inner") %>
+        </div>
+        <div class="prc-stripes" aria-hidden="true"></div>
+        <div class="content">
+            <section class="latest">
+                <div class="latest_files">
+                    <h1 class="h1">Latest uploads:</h1>
+                <% for i, file in ipairs(latestpath) do %>
+                    <a class="amixlink" href="<%= '/data/' .. titles.url .. '/' .. file:gsub("#", "%%23") %>">
+                        <span class="mixlink"><%= latestname[i] %></span>
+                    </a>
+                    </br>
+                <% end %>
+                </div>
+            </section>
+        </div>
+        <br>
+        <div class="prc-stripes" aria-hidden="true"></div>
     </div>
-        <img class="divider" src="/static/panamaracing.club_divider.png">
     </body>
 </html>