diff --git a/frontend/src/package.json b/frontend/src/package.json
index 9ab9a10f..4c46e08f 100644
--- a/frontend/src/package.json
+++ b/frontend/src/package.json
@@ -43,5 +43,6 @@
     "last 2 versions",
     "not dead",
     "not ie 11"
-  ]
+  ],
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/frontend/src/src/App.vue b/frontend/src/src/App.vue
index e667641e..93bef0b9 100644
--- a/frontend/src/src/App.vue
+++ b/frontend/src/src/App.vue
@@ -1,7 +1,14 @@
 <template>
   <div id="app">
-    <h1>Streamlink-Web-UI</h1>
-    <StreamlinkUi />
+    <header class="hero">
+      <div class="hero-inner">
+        <h1 class="hero-title">Streamlink Web UI</h1>
+        <p class="hero-sub">Clean, modern dark interface</p>
+      </div>
+    </header>
+    <main class="app-shell">
+      <StreamlinkUi />
+    </main>
   </div>
 </template>
 
@@ -11,23 +18,55 @@ import '@fortawesome/fontawesome-free/css/all.css';
 
 export default {
   name: 'App',
-  components: {
-    StreamlinkUi
-  }
+  components: { StreamlinkUi }
 };
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #ababab;
-  margin-top: 30px;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
+
+:root{
+  --bg-1: #0f0c29;
+  --bg-2: #302b63;
+  --bg-3: #24243e;
+  --card: rgba(255,255,255,0.04);
+  --muted: #9aa0a6;
+  --accent: #6441a5; /* twitch-like */
+}
+
+*{box-sizing:border-box}
+html,body,#app{height:100%;margin:0}
+body{
+  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
+  background: #0b0c10;
+  color: var(--muted);
+  -webkit-font-smoothing:antialiased;
+  -moz-osx-font-smoothing:grayscale;
+}
+
+.hero{
+  padding: 28px 24px;
+  background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
+  border-bottom: 1px solid rgba(255,255,255,0.03);
 }
 
-body {
-  background-color: #212121;  ;
+.hero-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
+.hero-title{
+  margin:0;color:#fff;font-size:28px;font-weight:700;letter-spacing:0.4px;text-shadow:0 6px 24px rgba(100,65,165,0.12)
 }
-</style>
\ No newline at end of file
+.hero-sub{margin:0;color:var(--muted);font-size:13px}
+
+.app-shell{max-width:1200px;margin:24px auto;padding:20px}
+
+/* Make StreamlinkUi content appear as elevated card */
+.content{background:var(--card);backdrop-filter:blur(6px);border-radius:12px;padding:22px;color:inherit}
+
+/* Stronger default card shadows for inner items */
+.stream-box{box-shadow:0 10px 30px rgba(2,6,23,0.6)}
+
+/* Accent links */
+a{color:var(--accent)}
+
+/* Ensure smaller UI elements look crisp */
+button{font-family:inherit}
+</style>
diff --git a/frontend/src/src/components/StreamlinkUi.vue b/frontend/src/src/components/StreamlinkUi.vue
index a857e3c6..01fce6ce 100644
--- a/frontend/src/src/components/StreamlinkUi.vue
+++ b/frontend/src/src/components/StreamlinkUi.vue
@@ -375,20 +375,6 @@ export default {
 </script>
 
 <style scoped>
-:root {
-  --twitch-purple: #9146ff;
-  --dark-grey: #2d2d2d;
-  --light-grey: #393939;
-  --white: #ffffff;
-  --hover-grey: #4d4d4d;
-  --dark-background: #212121;
-  --font-color: #ababab;
-}
-
-body {
-  background-color: var(--dark-background);
-}
-
 /* Layout */
 .container {
   display: flex;
@@ -399,20 +385,22 @@ body {
   background-color: var(--dark-grey);
   color: var(--white);
   padding: 15px;
-  width: 200px;
+  width: 220px;
 }
 
 .sidebar ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .sidebar li {
   cursor: pointer;
-  margin: 10px 0;
-  padding: 10px;
-  border-radius: 5px;
+  margin: 8px 0;
+  padding: 10px 12px;
+  border-radius: 6px;
   transition: background-color 0.3s ease;
+  text-align: left;
 }
 
 .sidebar li:hover {
@@ -428,37 +416,44 @@ body {
   background-color: var(--light-grey);
   color: var(--font-color);
   flex-grow: 1;
-  padding: 20px;
+  padding: 24px;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 40px); 
+  gap: 16px;
+  height: calc(100vh - 40px);
 }
 
 /* Form Styles */
 .form-group {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
+}
+
+label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 6px;
+  color: var(--white);
 }
 
 input,
 select {
   width: 100%;
-  padding: 8px;
-  margin-top: 5px;
+  padding: 10px;
   background-color: #333;
   border: none;
   color: var(--font-color);
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 /* Custom Quality Container Styles */
 .custom-quality-container {
-  margin-top: 15px;
+  margin-top: 12px;
   background-color: #333;
-  padding: 15px;
-  border-radius: 5px;
+  padding: 12px;
+  border-radius: 6px;
   border-left: 3px solid var(--twitch-purple);
 }
 
@@ -484,7 +479,7 @@ select {
   border: 1px solid #555;
   border-radius: 4px;
   padding: 8px;
-  width: 70px;
+  width: 80px;
 }
 
 /* Remove spinner for Firefox */
@@ -499,29 +494,27 @@ input[type="number"]::-webkit-inner-spin-button {
   margin: 0;
 }
 
-/* Stream Boxes */
+/* Stream Cards */
 .stream-box {
-  background-color: var(--dark-grey);
-  padding: 20px;
+  background-color: #333;
+  padding: 16px;
   border-radius: 10px;
-  margin-top: 10px;
   display: flex;
-  align-items: center; 
-  gap: 20px;
-  background-color: #333;
+  align-items: center;
+  gap: 16px;
   position: relative;
 }
 
 .stream-box .stream-info {
-  flex-grow: 1;
+  flex: 1 1 auto;
 }
 
 .stream-box h3 {
-  margin-top: 0;
+  margin: 0 0 6px 0;
 }
 
 .stream-box p {
-  margin: 5px 0;
+  margin: 4px 0;
 }
 
 .stream-box .profile-image-container {
@@ -532,32 +525,31 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .stream-box img.profile-image {
-  width: 140px;
-  height: 140px;
+  width: 120px;
+  height: 120px;
   border-radius: 50%;
-  margin-right: 10vw;
-  transition: transform 0.2s ease-in-out; 
+  transition: transform 0.2s ease-in-out;
 }
 
 .stream-box img.profile-image:hover {
-  transform: scale(1.1); 
+  transform: scale(1.06);
 }
 
 .stream-box .scheduled-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 10vw;
+  width: 48px;
 }
 
 .stream-box .scheduled-icon {
-  font-size: 2.5vw;
+  font-size: 24px;
   color: var(--twitch-purple);
   transition: transform 0.2s ease-in-out;
 }
 
 .stream-box .scheduled-icon:hover {
-  transform: scale(1.1); 
+  transform: scale(1.1);
 }
 
 .stream-box .scheduled-icon-container.invisible {
@@ -566,11 +558,11 @@ input[type="number"]::-webkit-inner-spin-button {
 
 .streams-container {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
-  gap: 20px;
-  flex-grow: 1; 
-  overflow-y: auto; 
-  max-height: calc(100vh - 140px); 
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+  flex-grow: 1;
+  overflow-y: auto;
+  max-height: calc(100vh - 140px);
 }
 
 button {
@@ -583,7 +575,7 @@ button i {
   font-size: 18px;
 }
 
-/* Button Styles */
+/* Icon-only Terminate Button */
 .terminate-btn {
   background-color: transparent;
   color: #d9534f;
@@ -611,6 +603,7 @@ button i {
   font-size: 12px;
   white-space: nowrap;
 }
+
 /* Terminate All Button */
 .terminate-all-btn {
   background-color: #d9534f;
@@ -629,9 +622,15 @@ button i {
   background-color: red;
 }
 
-/* Smaller version of styled button */
+/* Smaller StyledButton container when used inline */
 .small-button {
-  width: 10vw;
+  max-width: 200px;
+  margin-left: 8px;
+}
+
+/* Position refresh action to the right within its container */
+.refresh-btn {
+  margin-left: auto;
 }
 
 /* Avatar Container */
@@ -648,7 +647,7 @@ button i {
 }
 
 .profile-image-small {
-  width: 10vw; 
+  width: 10vw;
   height: 10vw;
   border-radius: 50%;
   border: 2px solid var(--white);
@@ -682,12 +681,12 @@ button i {
 .channel-input-avatar {
   display: flex;
   align-items: center;
-  gap: 15px;
+  gap: 12px;
 }
 
 .channel-input-avatar input {
   flex: 1;
   width: auto;
-  max-width: 60vw; 
+  max-width: 60vw;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/src/components/StyledButton.vue b/frontend/src/src/components/StyledButton.vue
index d78a15b4..90dfe949 100644
--- a/frontend/src/src/components/StyledButton.vue
+++ b/frontend/src/src/components/StyledButton.vue
@@ -1,41 +1,39 @@
 <template>
-    <div class="styled_button_container" :style="gradientStyle">
-      <button @click="onClick"><slot /></button>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    name: "StyledButton",
-    props: {
-      gradient: {
-        type: String,
-        default: "linear-gradient(90deg, #6441a5, #322052)",
-      },
-      clickHandler: {
-        type: Function,
-        default: () => {},
-      },
+  <div class="styled_button_container" :class="containerClasses">
+    <button @click="onClick"><slot /></button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StyledButton",
+  props: {
+    variant: {
+      type: String,
+      default: "primary",
+    },
+    clickHandler: {
+      type: Function,
+      default: () => {},
     },
-    computed: {
-      gradientStyle() {
-        return {
-          background: this.gradient,
-        };
-      },
+  },
+  computed: {
+    containerClasses() {
+      return [`gradient-${this.variant}`];
     },
-    methods: {
-      onClick() {
-        this.clickHandler();
-      },
+  },
+  methods: {
+    onClick() {
+      this.clickHandler();
     },
-  };
-  </script>
-  
-  <style scoped>
+  },
+};
+</script>
+
+<style scoped>
 button {
-  font-size: 1.4em;
-  padding: 0.6em 0.8em;
+  font-size: 1.1rem;
+  padding: 0.6em 0.9em;
   border-radius: 0.5em;
   border: none;
   background-color: #18181a;
@@ -43,21 +41,26 @@ button {
   cursor: pointer;
   box-shadow: 2px 2px 3px #000000b4;
   width: 100%;
-  margin: 1px 1px 1px 1px;
+  margin: 0;
   box-sizing: border-box;
 }
 
 .styled_button_container {
   position: relative;
   padding: 3px;
-  background: linear-gradient(90deg, #6441a5, #322052);
   border-radius: 0.9em;
-  transition: all 0.4s ease;
-  margin: 50px 50px 50px 50px;
+  transition: all 0.3s ease;
+  margin: 12px 0;
   display: flex;
   justify-content: center;
 }
 
+/* Gradient variants */
+.gradient-primary {
+  background: linear-gradient(90deg, #6441a5, #322052);
+}
+
+/* Glow on hover */
 .styled_button_container::before {
   content: "";
   position: absolute;
@@ -66,15 +69,21 @@ button {
   border-radius: 0.9em;
   z-index: -10;
   filter: blur(0);
-  transition: filter 0.4s ease;
+  transition: filter 0.3s ease;
 }
 
 .styled_button_container:hover::before {
-  background: linear-gradient(90deg, #6441a5, #322052);
-  filter: blur(1.2em);
+  background: inherit;
+  filter: blur(1em);
 }
+
 .styled_button_container:active::before {
   filter: blur(0.2em);
 }
 
-  </style>
\ No newline at end of file
+/* Compact modifier for smaller inline buttons */
+.small-button {
+  max-width: 200px;
+  margin: 0;
+}
+</style>
diff --git a/frontend/src/src/main.js b/frontend/src/src/main.js
index fb74d118..7cfb2e1f 100644
--- a/frontend/src/src/main.js
+++ b/frontend/src/src/main.js
@@ -8,6 +8,6 @@ const pinia = createPinia();
 app.use(pinia);
 
 const apiStore = useApiStore();
-apiStore.setBaseURL(window.config.baseURL); 
+apiStore.setBaseURL(window.config.baseURL);
 
-createApp(App).mount('#app')
+app.mount('#app')
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..fdf9e992
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "code",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}