diff --git a/packages/app/src/pages/streams/viewer/index.jsx b/packages/app/src/pages/live/[key].jsx
similarity index 98%
rename from packages/app/src/pages/streams/viewer/index.jsx
rename to packages/app/src/pages/live/[key].jsx
index 22600cb6..a1940d72 100644
--- a/packages/app/src/pages/streams/viewer/index.jsx
+++ b/packages/app/src/pages/live/[key].jsx
@@ -40,8 +40,7 @@ export default class StreamViewer extends React.Component {
             switchProtocol: this.switchProtocol,
         }
 
-        const query = new URLSearchParams(window.location.search)
-        const requestedUsername = query.get("key")
+        const requestedUsername = this.props.match.params.key
 
         const source = `${streamsSource}/${requestedUsername}`
         const player = new Plyr("#player", {
@@ -59,7 +58,7 @@ export default class StreamViewer extends React.Component {
         await this.loadWithProtocol[this.state.loadedProtocol]()
 
         // make the interface a bit confortable for a video player
-        app.style.applyVariant("dark")
+        //app.style.applyVariant("dark")
 
         app.eventBus.emit("toogleCompactMode", true)
 
diff --git a/packages/app/src/pages/streams/viewer/index.less b/packages/app/src/pages/live/index.less
similarity index 100%
rename from packages/app/src/pages/streams/viewer/index.less
rename to packages/app/src/pages/live/index.less
diff --git a/packages/app/src/pages/streams/index.jsx b/packages/app/src/pages/streams/index.jsx
index 21e33aa4..2c00f82a 100644
--- a/packages/app/src/pages/streams/index.jsx
+++ b/packages/app/src/pages/streams/index.jsx
@@ -48,7 +48,7 @@ export default class Streams extends React.Component {
     }
 
     onClickItem = (item) => {
-        window.app.setLocation(`/streams/viewer?key=${item}`)
+        window.app.setLocation(`/live/${item}`)
     }
 
     renderListItem = (stream) => {