diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss
index 350c794dc12bb..84fc1fbb91942 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/app.scss
@@ -1,4 +1,5 @@
 @import 'variables.scss';
+@import './compose-box.scss';
 
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
@@ -721,3 +722,7 @@ div.service-action-mask img {
   background-color: $yarn-header-bg;
   border-bottom: 1px solid $yarn-border-color;
 }
+
+#tree-selector-container {
+  width: calc(100% - #{$compose-box-width});
+}
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss
new file mode 100644
index 0000000000000..3df45317334fe
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/compose-box.scss
@@ -0,0 +1,42 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+
+@import 'variables.scss';
+
+.yarn-compose-box {
+  position: fixed;
+  bottom: 0;
+  top: 50px;
+  right: 0px;
+  background-color: $yarn-panel-bg;
+  border: 1px solid $yarn-border-color;
+  border-radius: 3px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+
+  .panel-heading {
+    background-color: $yarn-header-bg !important;
+    border-color: $yarn-border-color;
+    border-radius: 3px;
+  }
+
+  .panel-body {
+    max-width: $compose-box-width;
+    overflow: scroll;
+  }
+}
\ No newline at end of file
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss
index 377ac0070ba85..5dbe534b61f30 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/styles/variables.scss
@@ -36,5 +36,6 @@ $yarn-info-bg: $color-blue-primary;
 $yarn-warn-border: $color-yellow-secondary;
 $yarn-warn-bg: $color-yellow-primary;
 
+$compose-box-width: 350px;
 
 //shadows
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs
index 8b63b661bbd2d..6fdba79485459 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/capacity-queue.hbs
@@ -19,44 +19,46 @@
 {{queue-navigator model=model.queues selected=model.selected
   used="usedCapacity" max="absMaxCapacity"}}
 
-<div class="row">
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
+<div class="yarn-compose-box">
+  <div class="panel-heading">
+    Queue Information: {{model.selected}}
+  </div>
+  <div class="panel-body">
+    <div class="container-fluid">
+      <div class="panel panel-default">
+          {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}}
       </div>
-        {{yarn-queue.capacity-queue-conf-table queue=model.selectedQueue}}
     </div>
-  </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=175
-        ratio=0.55
-        maxHeight=350}}
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Queue Capacities: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="capacity-bar-chart">
+          <br/>
+          {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+          title=""
+          parentId="capacity-bar-chart"
+          textWidth=175
+          ratio=0.55
+          maxHeight=350}}
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Running Apps: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="numapplications-donut-chart">
-        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-        showLabels=true
-        parentId="numapplications-donut-chart"
-        ratio=0.6
-        maxHeight=350}}
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Running Apps: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="numapplications-donut-chart">
+          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+          showLabels=true
+          parentId="numapplications-donut-chart"
+          ratio=0.6
+          maxHeight=350}}
+        </div>
       </div>
     </div>
   </div>
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs
index 6d0e994091d20..dcc80c10b307f 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fair-queue.hbs
@@ -19,44 +19,46 @@
 {{queue-navigator model=model.queues selected=model.selected
   used="usedResources.memory" max="clusterResources.memory"}}
 
-<div class="row">
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
+<div class="yarn-compose-box">
+  <div class="panel-heading">
+    Queue Information: {{model.selected}}
+  </div>
+  <div class="panel-body">
+    <div class="container-fluid">
+      <div class="panel panel-default">
+          {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
       </div>
-        {{yarn-queue.fair-queue-conf-table queue=model.selectedQueue}}
     </div>
-  </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=175
-        ratio=0.55
-        maxHeight=350}}
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Queue Capacities: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="capacity-bar-chart">
+          <br/>
+          {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+          title=""
+          parentId="capacity-bar-chart"
+          textWidth=175
+          ratio=0.55
+          maxHeight=350}}
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="col-lg-4 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Running Apps: {{model.selected}}
-      </div>
-      <div class="container-fluid" id="numapplications-donut-chart">
-        {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
-        showLabels=true
-        parentId="numapplications-donut-chart"
-        ratio=0.6
-        maxHeight=350}}
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Running Apps: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="numapplications-donut-chart">
+          {{donut-chart data=model.selectedQueue.numOfApplicationsDonutChartData
+          showLabels=true
+          parentId="numapplications-donut-chart"
+          ratio=0.6
+          maxHeight=350}}
+        </div>
       </div>
     </div>
   </div>
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs
index 90cbd2798bbeb..98db5cb4153e2 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-ui/src/main/webapp/app/templates/components/yarn-queue/fifo-queue.hbs
@@ -19,29 +19,30 @@
 {{queue-navigator model=model.queues selected=model.selected
   used="usedNodeCapacity" max="totalNodeCapacity"}}
 
-<div class="row">
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Information: {{model.selected}}
-      </div>
-        {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
-    </div>
+<div class="yarn-compose-box">
+  <div class="panel-heading">
+    Queue Information: {{model.selected}}
   </div>
-
-  <div class="col-lg-6 container-fluid">
-    <div class="panel panel-default">
-      <div class="panel-heading">
-        Queue Capacities: {{model.selected}}
+  <div class="panel-body">
+    <div class="container-fluid">
+      <div class="panel panel-default">
+          {{yarn-queue.fifo-queue-conf-table queue=model.selectedQueue}}
       </div>
-      <div class="container-fluid" id="capacity-bar-chart">
-        <br/>
-        {{bar-chart data=model.selectedQueue.capacitiesBarChartData
-        title=""
-        parentId="capacity-bar-chart"
-        textWidth=175
-        ratio=0.55
-        maxHeight=350}}
+    </div>
+    <div class="container-fluid">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          Queue Capacities: {{model.selected}}
+        </div>
+        <div class="container-fluid" id="capacity-bar-chart">
+          <br/>
+          {{bar-chart data=model.selectedQueue.capacitiesBarChartData
+          title=""
+          parentId="capacity-bar-chart"
+          textWidth=175
+          ratio=0.55
+          maxHeight=350}}
+        </div>
       </div>
     </div>
   </div>