diff --git a/.env.example b/.env.example
new file mode 100644
index 00000000..c71b5e68
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,8 @@
+MAIN_VITE_API_URL=https://api-staging.hydralauncher.gg
+MAIN_VITE_AUTH_URL=https://auth-staging.hydralauncher.gg
+MAIN_VITE_WS_URL=wss://ws-staging.hydralauncher.gg
+MAIN_VITE_EXTERNAL_RESOURCES_URL=https://assets.hydralauncher.gg
+RENDERER_VITE_EXTERNAL_RESOURCES_URL=https://assets.hydralauncher.gg
+MAIN_VITE_CHECKOUT_URL=https://checkout-staging.hydralauncher.gg
+RENDERER_VITE_REAL_DEBRID_REFERRAL_ID=
+RENDERER_VITE_TORBOX_REFERRAL_CODE=
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.scss b/src/renderer/src/pages/game-details/hero/hero-panel.scss
index 9fbdf453..fa797988 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss
@@ -1,78 +1,78 @@
 @use "../../../scss/globals.scss";
 
-.hero-panel-wrapper {
+.hero-panel {
+  width: 100%;
+  height: 72px;
+  min-height: 72px;
+  padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: solid 1px rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all ease 0.2s;
+  border-bottom: solid 1px globals.$border-color;
+  overflow: hidden;
+  top: 0;
+  z-index: 2;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;  
+  
+  &__container {
   padding: 0px 12px 12px;
   margin: 0;
+  }
 
-  .hero-panel {
-    width: 100%;
-    height: 72px;
-    min-height: 72px;
-    padding: calc(globals.$spacing-unit * 2) calc(globals.$spacing-unit * 3);
-    background: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    border: solid 1px rgba(255, 255, 255, 0.15);
+  &--stuck {
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
+  }
+
+  &__content {
     display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+  }
+
+  &__download-details {
+    gap: globals.$spacing-unit;
+    display: flex;
+    color: globals.$body-color;
     align-items: center;
-    justify-content: space-between;
+  }
+
+  &__downloads-link {
+    color: globals.$body-color;
+    text-decoration: underline;
+  }
+
+  &__progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
     transition: all ease 0.2s;
-    border-bottom: solid 1px globals.$border-color;
-    overflow: hidden;
-    top: 0;
-    z-index: 2;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
 
-    &--stuck {
-      background: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
-      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.8);
+    &::-webkit-progress-bar {
+      background-color: transparent;
     }
 
-    &__content {
-      display: flex;
-      flex-direction: column;
-      gap: globals.$spacing-unit;
+    &::-webkit-progress-value {
+      background-color: globals.$muted-color;
     }
 
-    &__actions {
-      display: flex;
-      gap: globals.$spacing-unit;
-    }
-
-    &__download-details {
-      gap: globals.$spacing-unit;
-      display: flex;
-      color: globals.$body-color;
-      align-items: center;
-    }
-
-    &__downloads-link {
-      color: globals.$body-color;
-      text-decoration: underline;
-    }
-
-    &__progress-bar {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: 3px;
-      transition: all ease 0.2s;
-
-      &::-webkit-progress-bar {
-        background-color: transparent;
-      }
-
-      &::-webkit-progress-value {
-        background-color: globals.$muted-color;
-      }
-
-      &--disabled {
-        opacity: globals.$disabled-opacity;
-      }
+    &--disabled {
+      opacity: globals.$disabled-opacity;
     }
   }
 }
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.tsx b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
index db0164de..a1e6fed5 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.tsx
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.tsx
@@ -50,7 +50,7 @@ export function HeroPanel() {
     game?.download?.status === "paused";
 
   return (
-    <div className="hero-panel-wrapper">
+    <div className="hero-panel__container">
       <div className="hero-panel">
         <div className="hero-panel__content">{getInfo()}</div>
         <div className="hero-panel__actions">