diff --git a/radioradiofrontend/dist/assets/index-cbd20ecd.js b/radioradiofrontend/dist/assets/index-cbd20ecd.js
new file mode 100644
index 0000000..3fb4aa3
--- /dev/null
+++ b/radioradiofrontend/dist/assets/index-cbd20ecd.js
@@ -0,0 +1 @@
+(function(){const _=document.createElement("link").relList;if(_&&_.supports&&_.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))r(i);new MutationObserver(i=>{for(const o of i)if(o.type==="childList")for(const l of o.addedNodes)l.tagName==="LINK"&&l.rel==="modulepreload"&&r(l)}).observe(document,{childList:!0,subtree:!0});function t(i){const o={};return i.integrity&&(o.integrity=i.integrity),i.referrerpolicy&&(o.referrerPolicy=i.referrerpolicy),i.crossorigin==="use-credentials"?o.credentials="include":i.crossorigin==="anonymous"?o.credentials="omit":o.credentials="same-origin",o}function r(i){if(i.ep)return;i.ep=!0;const o=t(i);fetch(i.href,o)}})();var I,u,n_,$,j,F={},o_=[],v_=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function b(e,_){for(var t in _)e[t]=_[t];return e}function r_(e){var _=e.parentNode;_&&_.removeChild(e)}function y_(e,_,t){var r,i,o,l={};for(o in _)o=="key"?r=_[o]:o=="ref"?i=_[o]:l[o]=_[o];if(arguments.length>2&&(l.children=arguments.length>3?I.call(arguments,2):t),typeof e=="function"&&e.defaultProps!=null)for(o in e.defaultProps)l[o]===void 0&&(l[o]=e.defaultProps[o]);return P(e,l,r,i,null)}function P(e,_,t,r,i){var o={type:e,props:_,key:t,ref:r,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:i??++n_};return i==null&&u.vnode!=null&&u.vnode(o),o}function E(e){return e.children}function T(e,_){this.props=e,this.context=_}function x(e,_){if(_==null)return e.__?x(e.__,e.__.__k.indexOf(e)+1):null;for(var t;_<e.__k.length;_++)if((t=e.__k[_])!=null&&t.__e!=null)return t.__e;return typeof e.type=="function"?x(e):null}function i_(e){var _,t;if((e=e.__)!=null&&e.__c!=null){for(e.__e=e.__c.base=null,_=0;_<e.__k.length;_++)if((t=e.__k[_])!=null&&t.__e!=null){e.__e=e.__c.base=t.__e;break}return i_(e)}}function z(e){(!e.__d&&(e.__d=!0)&&$.push(e)&&!M.__r++||j!==u.debounceRendering)&&((j=u.debounceRendering)||setTimeout)(M)}function M(){for(var e;M.__r=$.length;)e=$.sort(function(_,t){return _.__v.__b-t.__v.__b}),$=[],e.some(function(_){var t,r,i,o,l,f;_.__d&&(l=(o=(t=_).__v).__e,(f=t.__P)&&(r=[],(i=b({},o)).__v=o.__v+1,B(f,o,i,t.__n,f.ownerSVGElement!==void 0,o.__h!=null?[l]:null,r,l??x(o),o.__h),f_(r,o),o.__e!=l&&i_(o)))})}function l_(e,_,t,r,i,o,l,f,p,d){var n,h,s,c,a,H,v,m=r&&r.__k||o_,k=m.length;for(t.__k=[],n=0;n<_.length;n++)if((c=t.__k[n]=(c=_[n])==null||typeof c=="boolean"?null:typeof c=="string"||typeof c=="number"||typeof c=="bigint"?P(null,c,null,null,c):Array.isArray(c)?P(E,{children:c},null,null,null):c.__b>0?P(c.type,c.props,c.key,c.ref?c.ref:null,c.__v):c)!=null){if(c.__=t,c.__b=t.__b+1,(s=m[n])===null||s&&c.key==s.key&&c.type===s.type)m[n]=void 0;else for(h=0;h<k;h++){if((s=m[h])&&c.key==s.key&&c.type===s.type){m[h]=void 0;break}s=null}B(e,c,s=s||F,i,o,l,f,p,d),a=c.__e,(h=c.ref)&&s.ref!=h&&(v||(v=[]),s.ref&&v.push(s.ref,null,c),v.push(h,c.__c||a,c)),a!=null?(H==null&&(H=a),typeof c.type=="function"&&c.__k===s.__k?c.__d=p=c_(c,p,e):p=u_(e,c,s,m,a,p),typeof t.type=="function"&&(t.__d=p)):p&&s.__e==p&&p.parentNode!=e&&(p=x(s))}for(t.__e=H,n=k;n--;)m[n]!=null&&a_(m[n],m[n]);if(v)for(n=0;n<v.length;n++)s_(v[n],v[++n],v[++n])}function c_(e,_,t){for(var r,i=e.__k,o=0;i&&o<i.length;o++)(r=i[o])&&(r.__=e,_=typeof r.type=="function"?c_(r,_,t):u_(t,r,r,i,r.__e,_));return _}function u_(e,_,t,r,i,o){var l,f,p;if(_.__d!==void 0)l=_.__d,_.__d=void 0;else if(t==null||i!=o||i.parentNode==null)_:if(o==null||o.parentNode!==e)e.appendChild(i),l=null;else{for(f=o,p=0;(f=f.nextSibling)&&p<r.length;p+=1)if(f==i)break _;e.insertBefore(i,o),l=o}return l!==void 0?l:i.nextSibling}function m_(e,_,t,r,i){var o;for(o in t)o==="children"||o==="key"||o in _||O(e,o,null,t[o],r);for(o in _)i&&typeof _[o]!="function"||o==="children"||o==="key"||o==="value"||o==="checked"||t[o]===_[o]||O(e,o,_[o],t[o],r)}function G(e,_,t){_[0]==="-"?e.setProperty(_,t):e[_]=t==null?"":typeof t!="number"||v_.test(_)?t:t+"px"}function O(e,_,t,r,i){var o;_:if(_==="style")if(typeof t=="string")e.style.cssText=t;else{if(typeof r=="string"&&(e.style.cssText=r=""),r)for(_ in r)t&&_ in t||G(e.style,_,"");if(t)for(_ in t)r&&t[_]===r[_]||G(e.style,_,t[_])}else if(_[0]==="o"&&_[1]==="n")o=_!==(_=_.replace(/Capture$/,"")),_=_.toLowerCase()in e?_.toLowerCase().slice(2):_.slice(2),e.l||(e.l={}),e.l[_+o]=t,t?r||e.addEventListener(_,o?J:K,o):e.removeEventListener(_,o?J:K,o);else if(_!=="dangerouslySetInnerHTML"){if(i)_=_.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if(_!=="href"&&_!=="list"&&_!=="form"&&_!=="tabIndex"&&_!=="download"&&_ in e)try{e[_]=t??"";break _}catch{}typeof t=="function"||(t==null||t===!1&&_.indexOf("-")==-1?e.removeAttribute(_):e.setAttribute(_,t))}}function K(e){this.l[e.type+!1](u.event?u.event(e):e)}function J(e){this.l[e.type+!0](u.event?u.event(e):e)}function B(e,_,t,r,i,o,l,f,p){var d,n,h,s,c,a,H,v,m,k,C,N,R,S,w,g=_.type;if(_.constructor!==void 0)return null;t.__h!=null&&(p=t.__h,f=_.__e=t.__e,_.__h=null,o=[f]),(d=u.__b)&&d(_);try{_:if(typeof g=="function"){if(v=_.props,m=(d=g.contextType)&&r[d.__c],k=d?m?m.props.value:d.__:r,t.__c?H=(n=_.__c=t.__c).__=n.__E:("prototype"in g&&g.prototype.render?_.__c=n=new g(v,k):(_.__c=n=new T(v,k),n.constructor=g,n.render=k_),m&&m.sub(n),n.props=v,n.state||(n.state={}),n.context=k,n.__n=r,h=n.__d=!0,n.__h=[],n._sb=[]),n.__s==null&&(n.__s=n.state),g.getDerivedStateFromProps!=null&&(n.__s==n.state&&(n.__s=b({},n.__s)),b(n.__s,g.getDerivedStateFromProps(v,n.__s))),s=n.props,c=n.state,h)g.getDerivedStateFromProps==null&&n.componentWillMount!=null&&n.componentWillMount(),n.componentDidMount!=null&&n.__h.push(n.componentDidMount);else{if(g.getDerivedStateFromProps==null&&v!==s&&n.componentWillReceiveProps!=null&&n.componentWillReceiveProps(v,k),!n.__e&&n.shouldComponentUpdate!=null&&n.shouldComponentUpdate(v,n.__s,k)===!1||_.__v===t.__v){for(n.props=v,n.state=n.__s,_.__v!==t.__v&&(n.__d=!1),n.__v=_,_.__e=t.__e,_.__k=t.__k,_.__k.forEach(function(A){A&&(A.__=_)}),C=0;C<n._sb.length;C++)n.__h.push(n._sb[C]);n._sb=[],n.__h.length&&l.push(n);break _}n.componentWillUpdate!=null&&n.componentWillUpdate(v,n.__s,k),n.componentDidUpdate!=null&&n.__h.push(function(){n.componentDidUpdate(s,c,a)})}if(n.context=k,n.props=v,n.__v=_,n.__P=e,N=u.__r,R=0,"prototype"in g&&g.prototype.render){for(n.state=n.__s,n.__d=!1,N&&N(_),d=n.render(n.props,n.state,n.context),S=0;S<n._sb.length;S++)n.__h.push(n._sb[S]);n._sb=[]}else do n.__d=!1,N&&N(_),d=n.render(n.props,n.state,n.context),n.state=n.__s;while(n.__d&&++R<25);n.state=n.__s,n.getChildContext!=null&&(r=b(b({},r),n.getChildContext())),h||n.getSnapshotBeforeUpdate==null||(a=n.getSnapshotBeforeUpdate(s,c)),w=d!=null&&d.type===E&&d.key==null?d.props.children:d,l_(e,Array.isArray(w)?w:[w],_,t,r,i,o,l,f,p),n.base=_.__e,_.__h=null,n.__h.length&&l.push(n),H&&(n.__E=n.__=null),n.__e=!1}else o==null&&_.__v===t.__v?(_.__k=t.__k,_.__e=t.__e):_.__e=g_(t.__e,_,t,r,i,o,l,p);(d=u.diffed)&&d(_)}catch(A){_.__v=null,(p||o!=null)&&(_.__e=f,_.__h=!!p,o[o.indexOf(f)]=null),u.__e(A,_,t)}}function f_(e,_){u.__c&&u.__c(_,e),e.some(function(t){try{e=t.__h,t.__h=[],e.some(function(r){r.call(t)})}catch(r){u.__e(r,t.__v)}})}function g_(e,_,t,r,i,o,l,f){var p,d,n,h=t.props,s=_.props,c=_.type,a=0;if(c==="svg"&&(i=!0),o!=null){for(;a<o.length;a++)if((p=o[a])&&"setAttribute"in p==!!c&&(c?p.localName===c:p.nodeType===3)){e=p,o[a]=null;break}}if(e==null){if(c===null)return document.createTextNode(s);e=i?document.createElementNS("http://www.w3.org/2000/svg",c):document.createElement(c,s.is&&s),o=null,f=!1}if(c===null)h===s||f&&e.data===s||(e.data=s);else{if(o=o&&I.call(e.childNodes),d=(h=t.props||F).dangerouslySetInnerHTML,n=s.dangerouslySetInnerHTML,!f){if(o!=null)for(h={},a=0;a<e.attributes.length;a++)h[e.attributes[a].name]=e.attributes[a].value;(n||d)&&(n&&(d&&n.__html==d.__html||n.__html===e.innerHTML)||(e.innerHTML=n&&n.__html||""))}if(m_(e,s,h,i,f),n)_.__k=[];else if(a=_.props.children,l_(e,Array.isArray(a)?a:[a],_,t,r,i&&c!=="foreignObject",o,l,o?o[0]:t.__k&&x(t,0),f),o!=null)for(a=o.length;a--;)o[a]!=null&&r_(o[a]);f||("value"in s&&(a=s.value)!==void 0&&(a!==e.value||c==="progress"&&!a||c==="option"&&a!==h.value)&&O(e,"value",a,h.value,!1),"checked"in s&&(a=s.checked)!==void 0&&a!==e.checked&&O(e,"checked",a,h.checked,!1))}return e}function s_(e,_,t){try{typeof e=="function"?e(_):e.current=_}catch(r){u.__e(r,t)}}function a_(e,_,t){var r,i;if(u.unmount&&u.unmount(e),(r=e.ref)&&(r.current&&r.current!==e.__e||s_(r,null,_)),(r=e.__c)!=null){if(r.componentWillUnmount)try{r.componentWillUnmount()}catch(o){u.__e(o,_)}r.base=r.__P=null,e.__c=void 0}if(r=e.__k)for(i=0;i<r.length;i++)r[i]&&a_(r[i],_,t||typeof e.type!="function");t||e.__e==null||r_(e.__e),e.__=e.__e=e.__d=void 0}function k_(e,_,t){return this.constructor(e,t)}function b_(e,_,t){var r,i,o;u.__&&u.__(e,_),i=(r=typeof t=="function")?null:t&&t.__k||_.__k,o=[],B(_,e=(!r&&t||_).__k=y_(E,null,[e]),i||F,F,_.ownerSVGElement!==void 0,!r&&t?[t]:i?null:_.firstChild?I.call(_.childNodes):null,o,!r&&t?t:i?i.__e:_.firstChild,r),f_(o,e)}I=o_.slice,u={__e:function(e,_,t,r){for(var i,o,l;_=_.__;)if((i=_.__c)&&!i.__)try{if((o=i.constructor)&&o.getDerivedStateFromError!=null&&(i.setState(o.getDerivedStateFromError(e)),l=i.__d),i.componentDidCatch!=null&&(i.componentDidCatch(e,r||{}),l=i.__d),l)return i.__E=i}catch(f){e=f}throw e}},n_=0,T.prototype.setState=function(e,_){var t;t=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=b({},this.state),typeof e=="function"&&(e=e(b({},t),this.props)),e&&b(t,e),e!=null&&this.__v&&(_&&this._sb.push(_),z(this))},T.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),z(this))},T.prototype.render=E,$=[],M.__r=0;var p_,y,W,Q,V=0,d_=[],L=[],X=u.__b,Y=u.__r,Z=u.diffed,__=u.__c,e_=u.unmount;function H_(e,_){u.__h&&u.__h(y,e,V||_),V=0;var t=y.__H||(y.__H={__:[],__h:[]});return e>=t.__.length&&t.__.push({__V:L}),t.__[e]}function N_(e){return V=1,$_(h_,e)}function $_(e,_,t){var r=H_(p_++,2);if(r.t=e,!r.__c&&(r.__=[t?t(_):h_(void 0,_),function(o){var l=r.__N?r.__N[0]:r.__[0],f=r.t(l,o);l!==f&&(r.__N=[f,r.__[1]],r.__c.setState({}))}],r.__c=y,!y.u)){y.u=!0;var i=y.shouldComponentUpdate;y.shouldComponentUpdate=function(o,l,f){if(!r.__c.__H)return!0;var p=r.__c.__H.__.filter(function(n){return n.__c});if(p.every(function(n){return!n.__N}))return!i||i.call(this,o,l,f);var d=!1;return p.forEach(function(n){if(n.__N){var h=n.__[0];n.__=n.__N,n.__N=void 0,h!==n.__[0]&&(d=!0)}}),!(!d&&r.__c.props===o)&&(!i||i.call(this,o,l,f))}}return r.__N||r.__}function x_(){for(var e;e=d_.shift();)if(e.__P&&e.__H)try{e.__H.__h.forEach(U),e.__H.__h.forEach(q),e.__H.__h=[]}catch(_){e.__H.__h=[],u.__e(_,e.__v)}}u.__b=function(e){y=null,X&&X(e)},u.__r=function(e){Y&&Y(e),p_=0;var _=(y=e.__c).__H;_&&(W===y?(_.__h=[],y.__h=[],_.__.forEach(function(t){t.__N&&(t.__=t.__N),t.__V=L,t.__N=t.i=void 0})):(_.__h.forEach(U),_.__h.forEach(q),_.__h=[])),W=y},u.diffed=function(e){Z&&Z(e);var _=e.__c;_&&_.__H&&(_.__H.__h.length&&(d_.push(_)!==1&&Q===u.requestAnimationFrame||((Q=u.requestAnimationFrame)||E_)(x_)),_.__H.__.forEach(function(t){t.i&&(t.__H=t.i),t.__V!==L&&(t.__=t.__V),t.i=void 0,t.__V=L})),W=y=null},u.__c=function(e,_){_.some(function(t){try{t.__h.forEach(U),t.__h=t.__h.filter(function(r){return!r.__||q(r)})}catch(r){_.some(function(i){i.__h&&(i.__h=[])}),_=[],u.__e(r,t.__v)}}),__&&__(e,_)},u.unmount=function(e){e_&&e_(e);var _,t=e.__c;t&&t.__H&&(t.__H.__.forEach(function(r){try{U(r)}catch(i){_=i}}),t.__H=void 0,_&&u.__e(_,t.__v))};var t_=typeof requestAnimationFrame=="function";function E_(e){var _,t=function(){clearTimeout(r),t_&&cancelAnimationFrame(_),setTimeout(e)},r=setTimeout(t,100);t_&&(_=requestAnimationFrame(t))}function U(e){var _=y,t=e.__c;typeof t=="function"&&(e.__c=void 0,t()),y=_}function q(e){var _=y;e.__c=e.__(),y=_}function h_(e,_){return typeof _=="function"?_(e):_}var C_=0;function D(e,_,t,r,i){var o,l,f={};for(l in _)l=="ref"?o=_[l]:f[l]=_[l];var p={type:e,props:f,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:--C_,__source:i,__self:r};if(typeof e=="function"&&(o=e.defaultProps))for(l in o)f[l]===void 0&&(f[l]=o[l]);return u.vnode&&u.vnode(p),p}function S_(){return N_(0),D(E,{children:D("div",{class:"container",children:D("div",{})})})}b_(D(S_,{}),document.getElementById("app"));
diff --git a/radioradiofrontend/dist/assets/index-d2306003.css b/radioradiofrontend/dist/assets/index-d2306003.css
new file mode 100644
index 0000000..3977d3a
--- /dev/null
+++ b/radioradiofrontend/dist/assets/index-d2306003.css
@@ -0,0 +1 @@
+#sfw{display:block;width:400px;height:400px;background-color:var(--accent-colour)}:root{--background-colour: lightyellow;--accent-colour: purple;background-color:var(--background-colour)}
diff --git a/radioradiofrontend/dist/index.html b/radioradiofrontend/dist/index.html
new file mode 100644
index 0000000..e8703e4
--- /dev/null
+++ b/radioradiofrontend/dist/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Preact + TS</title>
+    <script type="module" crossorigin src="/assets/index-cbd20ecd.js"></script>
+    <link rel="stylesheet" href="/assets/index-d2306003.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    
+  </body>
+</html>