diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 0554cda..1794a4e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,7 +4,7 @@
         {{partial "head" .}}
     </head>
     <body>
-        {{partial "header" .}}
+        {{partial "header-item" .}}
         {{partial "banner-item" .}}
         <main>
             <article>
diff --git a/layouts/partials/header-item.html b/layouts/partials/header-item.html
new file mode 100644
index 0000000..023150f
--- /dev/null
+++ b/layouts/partials/header-item.html
@@ -0,0 +1,37 @@
+<header>
+    <style>
+        header{
+            background-color: var(--theme-accent);
+            margin-top:0;
+            display:flex;
+            flex-direction: row;
+        }
+        header #logo img {
+            max-width:5vh;
+        }
+        header > a {
+            display:flex;
+            flex-direction: row;
+            align-items: center;
+        }
+        header span {
+            font-size:24px;
+            color:var(--theme-color-primary);
+        }
+        header svg {
+            stroke: var(--theme-color-primary);
+            fill: var(--theme-color-primary);
+        }
+        header .icon {
+            width:5vh;
+            height:5vh;
+        }
+    </style>
+    <a id="logo" href="/">
+        <img src="/logo.webp" alt="logo">
+    </a>
+    <a id="logo" href="/">
+        <span><strong>{{.Site.Title}}</strong></span>
+    </a>
+    {{ partial "rss-icon"}}
+</header>
diff --git a/layouts/partials/item-audio.html b/layouts/partials/item-audio.html
index ae59557..6bfc287 100644
--- a/layouts/partials/item-audio.html
+++ b/layouts/partials/item-audio.html
@@ -1,4 +1,199 @@
 
-<audio preload="none" controls>
-    <source src="{{.Params.audio}}">
-</audio>
\ No newline at end of file
+<script>
+    function audio_end(event){
+        p = event.target.parentElement;
+        if (!event.target.loop){
+            p.children[1].innerHTML=icons['play'];
+        }
+    }
+    function setup_display(event){
+        el = event.target.children[0];
+        el.style.display="flex";
+        console.log("Display audio")
+    }
+    function setup_audio_metadata(event) {
+        audio=event.target;
+        var seek = audio.parentElement.children[2];
+        seek.min = 0;
+        seek.max = audio.duration;
+        seek.value = audio.currentTime;
+        audio.parentElement.children[3].style.display="block";
+        audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
+        audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
+    }
+    function toggle_loop_audio(event) {
+        audio = event.target.parentElement.children[0];
+        audio.loop = !audio.loop;
+        if (audio.loop){
+            event.target.children[0].classList.add("spin");
+        }
+        else{
+            event.target.children[0].classList.remove("spin");
+        }
+    }
+    function update_audio_time(event) {
+        audio = event.target.parentElement.children[0];
+        audio.currentTime = event.target.value;
+    }
+    function toggle_play_audio(event) {
+        el = event.target;
+        audio = el.parentElement.children[0];
+        speed = el.parentElement.children[3].value;
+        audio.playbackRate = speed;
+        if (audio.paused) {
+            audio.play();
+            el.children[0].children[0].setAttribute("href","#pause");
+        }
+        else {
+            audio.pause();
+            el.children[0].children[0].setAttribute("href","#play")
+        }
+    }
+    function update_audio_speed(event) {
+        el = event.target;
+        audio = event.target.parentElement.children[0];
+        audio.playbackRate = el.value;
+
+    }
+    function timeToText(t) {
+        hours = 0;
+        minutes = 0;
+        seconds = 0;
+        if (t > 60 * 60) {
+            hours = Math.floor(t / 60 / 60);
+            t = t - hours * 60 * 60;
+        }
+        if (t > 60) {
+            minutes = Math.floor(t / 60);
+            t = t - minutes * 60
+
+        }
+        if (t > 1) {
+            seconds = Math.floor(t);
+        }
+        text = "";
+        if (hours > 0) {
+            text += hours + ":";
+        }
+        if (minutes > 0 || hours > 0) {
+            if (minutes == 0) {
+                minutes = "00"
+            }
+            if (minutes < 10) {
+                text += "0"
+            }
+            text += minutes + ":"
+        }
+        if (seconds == 0 && (minutes > 0 || hours > 0)) {
+            seconds = "00";
+        }
+        if (seconds < 10) {
+            text += "0";
+        }
+        text += seconds
+        return text;
+    }
+</script>
+<style>
+    .audio-player {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content:center;
+        width: 100%;
+    }
+    .audio-player>*{
+        margin:2px;
+        margin-right:5px;
+        margin-left:5px;
+    }
+    .audio-player p{
+        width: fit-content;
+    }
+
+    .media-seek {
+        width: 100%;
+    }
+    .audio-player{
+    border: 0.15rem solid var(--theme-accent);
+    padding:0.5rem;
+    border-radius: 0.5rem;
+    color:var(--theme-accent);
+    flex-wrap: nowrap;
+}
+.audio-player>*{
+    margin:5px;
+}
+
+.audio-player select, .audio-player button{
+    background-color: transparent;
+    border-color: var(--theme-accent);
+    color:var(--theme-accent);
+    border-radius: 3px;
+    padding:0.5rem;
+}
+
+.icon svg{
+    width:2.25rem;
+    height:2.25rem;
+    z-index: -1;
+    background-color: transparent;
+    pointer-events: none;
+}
+.icon path,
+    .icon rect {
+        stroke: var(--theme-accent);
+        fill: var(--theme-accent);
+    }
+
+.icon svg circle {
+    stroke: var(--theme-accent);
+    fill: transparent;
+    stroke-width: 6;
+}
+@keyframes spin-icon {
+    0%{rotate:0;}
+    100%{rotate:360deg;}  
+}
+.spin{
+    animation:spin-icon 3s linear infinite;
+}
+</style>
+<div class="media-container" style="width:100%;" onload="setup_display(event)">
+    <div class="audio-player">
+        <audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
+            <source src='{{.Params.audio}}'>
+        </audio>
+        <div class="icon" onclick="toggle_play_audio(event)">
+            <svg>
+                <use href="#play"></use>
+            </svg>
+        </div>
+        <input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
+        <select onchange="update_audio_speed(event)" style="display:none;">
+            <option value="1" selected>1x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+            <option value="2.5">2.5x</option>
+            <option value="3">3x</option>
+        </select>
+        <div class="audio-preview">
+        </div>
+        <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
+        <div class="icon" onclick="toggle_loop_audio(event)">
+            <svg>
+                <use href="#loop"></use>
+            </svg>
+        </div>
+    </div>
+    <noscript>
+        <style>
+            .audio-player {
+                display: none;
+            }
+        </style>
+        <audio controls preload="false" style="width:100%;min-width:40vw;">
+            <source src='{{.Params.audio}}'>
+        </audio>
+    </noscript>
+</div>
\ No newline at end of file
diff --git a/layouts/partials/item.html b/layouts/partials/item.html
index eea7b70..9e6a20c 100644
--- a/layouts/partials/item.html
+++ b/layouts/partials/item.html
@@ -2,7 +2,7 @@
 
     
     <div class="listing-text">
-    <a href="{{.Permalink}}"  ><h2>{{.Title}}</h2><i>{{.Params.description}}</i></a>
+    <a href="{{.Permalink}}"  ><h2>heh{{.Title}}</h2><i>{{.Params.description}}</i></a>
     
     <span></span>
     </div>
