diff --git a/anms-ui/public/app/components/management/agents/AgentModal.vue b/anms-ui/public/app/components/management/agents/AgentModal.vue
index 2994ef4..8adde3f 100644
--- a/anms-ui/public/app/components/management/agents/AgentModal.vue
+++ b/anms-ui/public/app/components/management/agents/AgentModal.vue
@@ -5,12 +5,18 @@
       size="xl"
       ok-only
       @hide="closeModal"
-      title="'Agent Details:' agentInfo.agent_id_string">
+      title="Agent Details">
       <div v-if="agentInfo">
-        <div>Registered Agents ID = {{ agentInfo.registered_agents_id }}</div>
-        <div>First Registered: {{ agentInfo.first_registered }}</div>
-        <div>Last Registered: {{ agentInfo.last_registered }}</div>
-
+        <div class="agent-info">
+          <div>Agent: <b-badge pill
+              variant="primary"> {{ agentInfo.agent_id_string }} </b-badge></div>
+          <div>Registered Agents ID: <b-badge pill
+              variant="primary"> {{ agentInfo.registered_agents_id }} </b-badge></div>
+          <div>First Registered: <b-badge pill
+              variant="primary">{{ agentInfo.first_registered }}</b-badge></div>
+          <div>Last Registered: <b-badge pill
+              variant="primary">{{ agentInfo.last_registered }}</b-badge></div>
+        </div>
         <reports :agentName="agentInfo.agent_id_string"
           :rptts="rptt" />
 
@@ -81,5 +87,13 @@ export default {
   },
 }
 </script>
-<style>
+<style scoped>
+.agent-info {
+  padding: 16px;
+  margin-bottom: 16px;
+  background-color: grey;
+  display: inline-block;
+  border-radius: 10px;
+  color: black;
+}
 </style>
diff --git a/anms-ui/public/app/components/management/agents/crud.vue b/anms-ui/public/app/components/management/agents/crud.vue
index fd0ab1b..2a23ac0 100644
--- a/anms-ui/public/app/components/management/agents/crud.vue
+++ b/anms-ui/public/app/components/management/agents/crud.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div style="margin-top: 16px;">
     <!-- what are the inputs  -->
     <!-- request name -->
     <!-- request input -->
-    <p>Operation: </p>
+    <h5>Operation: </h5>
     <b-form-select v-model="selected"
       @change="setParams(selected.command_parameters)"
       size="md"
diff --git a/anms-ui/public/app/components/management/agents/reports.vue b/anms-ui/public/app/components/management/agents/reports.vue
index da56986..0591738 100644
--- a/anms-ui/public/app/components/management/agents/reports.vue
+++ b/anms-ui/public/app/components/management/agents/reports.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div>
-    <p>Reports sent:</p>
+    <h5>Reports sent:</h5>
     <div v-if="loading"
       class="spinner-border text-primary"
       role="status">
@@ -29,7 +29,7 @@
     </b-table>
   </div>
 
-      <!-- :items="reports[selected]" -->
+  <!-- :items="reports[selected]" -->
 </template>
 
 <script>