diff --git a/languages/en.json b/languages/en.json
index 0565542..78c64f5 100644
--- a/languages/en.json
+++ b/languages/en.json
@@ -17,5 +17,11 @@
     "bossbar.settings.cameraPan.hint":"When enabling the healthbars pan the camera to the token. When selecting multiple tokens the last one will be the one the camera pans to",
     "bossbar.settings.tempBarColor.name":"Temporary healthbar color",
     "bossbar.settings.tempBarColor.hint":"Set color for the temporary healthbar that shows when damage is taken",
-    "bossbar.settings.tempBarColor.label":"Color Picker"
+    "bossbar.settings.tempBarColor.label":"Color Picker",
+    "bossbar.settings.position.name":"Position",
+    "bossbar.settings.position.hint":"Position of the boss bars. Webcam positioning options require webcams to be active.",
+    "bossbar.settings.position.opt0":"Top (default)",
+    "bossbar.settings.position.opt1":"Bottom (above webcams)",
+    "bossbar.settings.position.opt2":"Bottom (below webcams)",
+    "bossbar.settings.position.opt3":"In player List"
 }
\ No newline at end of file
diff --git a/scripts/BossBar.js b/scripts/BossBar.js
index b5da9b2..258d9fa 100644
--- a/scripts/BossBar.js
+++ b/scripts/BossBar.js
@@ -4,23 +4,28 @@ class BossBar {
     this.token;
     this.bgPath = game.settings.get("bossbar", "backgroundPath");
     this.fgPath = game.settings.get("bossbar", "foregroundPath");
-    this.tempBarColor = game.settings.get("bossbar", "tempBarColor")
-    this.textSize = game.settings.get("bossbar", "textSize")
+    this.tempBarColor = game.settings.get("bossbar", "tempBarColor");
+    this.textSize = game.settings.get("bossbar", "textSize");
+    this.position = game.settings.get("bossbar", "position");
   }
 
-  static async create(token,render = true) {
+  static async create(token, render = true) {
     let instance = new BossBar();
     instance.actor = token.actor;
-    instance.token = token
-    let bgFlag = token.document.getFlag("bossbar", "bgTex")
-    let fgFlag = token.document.getFlag("bossbar", "fgTex")
-    if(bgFlag) instance.bgPath = bgFlag
-    if(fgFlag) instance.fgPath = fgFlag
-    this.addBossBar(instance)
+    instance.token = token;
+    let bgFlag = token.document.getFlag("bossbar", "bgTex");
+    let fgFlag = token.document.getFlag("bossbar", "fgTex");
+    if (bgFlag) instance.bgPath = bgFlag;
+    if (fgFlag) instance.fgPath = fgFlag;
+    this.addBossBar(instance);
     if (render) instance.draw(game.settings.get("bossbar", "barHeight"));
-    if (game.user.isGM){
-      let oldBars = canvas.scene.getFlag("bossbar", "bossBarActive")
-      if(Array.isArray(oldBars)){oldBars.push(token.id)}else{oldBars=[token.id]}
+    if (game.user.isGM) {
+      let oldBars = canvas.scene.getFlag("bossbar", "bossBarActive");
+      if (Array.isArray(oldBars)) {
+        oldBars.push(token.id);
+      } else {
+        oldBars = [token.id];
+      }
       await canvas.scene.setFlag("bossbar", "bossBarActive", oldBars);
     }
     this.hookId = Hooks.on("updateActor", (actor, updates) => {
@@ -35,19 +40,49 @@ class BossBar {
   }
 
   draw(h) {
-    if($("body").find(`div[id="bossBar-${this.id}"]`).length > 0) return
-    $("#navigation").append(
-      `<div style="flex-basis: 100%;height: 0px;" id="bossBarSpacer-${this.id}"></div><div id="bossBar-${this.id}" class="bossBar">
-        <a class="bossBarName" style="font-size: ${this.textSize}px;">${this.name}</a>
-        <div id ="bossBarBar-${this.id}" style="z-index: 1000;">
-          <div id="bossBarMax-${this.id}" class="bossBarMax" style="background-image:url('${this.bgPath}');height:${h}px;"></div>
-          <div id="bossBarTemp-${this.id}" class="bossBarTemp" style="background-color:${this.tempBarColor};height:${h}px"></div>
-          <div id="bossBarCurrent-${this.id}" class="bossBarCurrent" style="background-image:url('${this.fgPath}');height:${h}px"></div>
-        </div>
-      </div>
-      <div style="flex-basis: 100%;height: ${this.textSize+3}px;" id ="bossBarSpacer-${this.id}"></div>
-      `
-    );
+    if ($("body").find(`div[id="bossBar-${this.id}"]`).length > 0) return; //#navigation
+    const bossBarHtml = `<div style="flex-basis: 100%;height: 0px;" id="bossBarSpacer-${
+      this.id
+    }"></div><div id="bossBar-${this.id}" class="bossBar">
+    <a class="bossBarName" style="font-size: ${this.textSize}px;">${
+      this.name
+    }</a>
+    <div id ="bossBarBar-${this.id}" style="z-index: 1000;">
+      <div id="bossBarMax-${
+        this.id
+      }" class="bossBarMax" style="background-image:url('${
+      this.bgPath
+    }');height:${h}px;"></div>
+      <div id="bossBarTemp-${
+        this.id
+      }" class="bossBarTemp" style="background-color:${
+      this.tempBarColor
+    };height:${h}px"></div>
+      <div id="bossBarCurrent-${
+        this.id
+      }" class="bossBarCurrent" style="background-image:url('${
+      this.fgPath
+    }');height:${h}px"></div>
+    </div>
+  </div>
+  <div style="flex-basis: 100%;height: ${
+    this.textSize + 3
+  }px;" id ="bossBarSpacer-${this.id}"></div>
+  `;
+    switch (this.position) {
+      case 0:
+        $("#navigation").append(bossBarHtml);
+        break;
+      case 1:
+        $("#camera-views").prepend(bossBarHtml);
+        break;
+      case 2:
+        $("#camera-views").append(bossBarHtml);
+        break;
+      case 3:
+        $("#players").prepend(bossBarHtml);
+        break;
+    }
     this.update();
   }
 
@@ -64,18 +99,17 @@ class BossBar {
     $("body").find(`div[id="bossBar-${this.id}"]`).remove();
   }
 
-  static clearAll(){
-    if(!canvas.scene._bossBars) return
-    for(let bar of Object.entries(canvas.scene._bossBars)){
+  static clearAll() {
+    if (!canvas.scene._bossBars) return;
+    for (let bar of Object.entries(canvas.scene._bossBars)) {
       $("body").find(`div[id="bossBar-${bar[1].id}"]`).remove();
       $("body").find(`div[id="bossBarSpacer-${bar[1].id}"]`).remove();
     }
-
   }
 
   static remove() {
     canvas.scene.unsetFlag("bossbar", "bossBarActive").then(() => {
-      canvas.scene._bossBars={}
+      canvas.scene._bossBars = {};
       this.clearAll();
     });
   }
@@ -87,8 +121,8 @@ class BossBar {
     canvas.scene._bossBars[bossBar.id] = bossBar;
   }
 
-  static cameraPan(tokenId,scale,duration){
-    const token = canvas.tokens.get(tokenId)
+  static cameraPan(tokenId, scale, duration) {
+    const token = canvas.tokens.get(tokenId);
     canvas.animatePan({
       x: token.center.x,
       y: token.center.y,
@@ -97,13 +131,13 @@ class BossBar {
     });
   }
 
-  static panCamera(token,scale=1.8,duration=1000){
-    _BossBarSocket.executeForEveryone("cameraPan", token.id,scale,duration);
+  static panCamera(token, scale = 1.8, duration = 1000) {
+    _BossBarSocket.executeForEveryone("cameraPan", token.id, scale, duration);
   }
 
-  static async renderBossBar(){
+  static async renderBossBar() {
     if (canvas.scene) {
-      BossBar.clearAll()
+      BossBar.clearAll();
       const ids = canvas.scene.getFlag("bossbar", "bossBarActive");
       if (!ids) return;
       for (let id of ids) {
diff --git a/scripts/main.js b/scripts/main.js
index 0a154b2..08d89eb 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -44,6 +44,21 @@ Hooks.once("ready", function () {
     default: false,
   });
 
+  game.settings.register("bossbar", "position", {
+    name: game.i18n.localize("bossbar.settings.position.name"),
+    hint: game.i18n.localize("bossbar.settings.position.hint"),
+    scope: "world",
+    config: true,
+    type: Number,
+    choices: {
+      0: game.i18n.localize("bossbar.settings.position.opt0"),
+      1: game.i18n.localize("bossbar.settings.position.opt1"),
+      2: game.i18n.localize("bossbar.settings.position.opt2"),
+      3: game.i18n.localize("bossbar.settings.position.opt3")
+    },
+    default: 0,
+  });
+
   game.settings.register("bossbar", "backgroundPath", {
     name: game.i18n.localize("bossbar.settings.backgroundPath.name"),
     hint: game.i18n.localize("bossbar.settings.backgroundPath.hint"),