diff --git a/html/templates/factions/faction_modal.html b/html/templates/factions/faction_modal.html
index 7eec8fc..c1d975a 100644
--- a/html/templates/factions/faction_modal.html
+++ b/html/templates/factions/faction_modal.html
@@ -2,6 +2,8 @@
 
 <div class="my-modal">
   <p class="modal-title" id="faction-title"></p>
+  <p id="faction-description"></p>
+  <p id="faction-headquarters"></p>
   <div>
     <button id="btn-close" class="btn btn-cancel">Close</button>
   </div>
diff --git a/js/controllers/faction.js b/js/controllers/faction.js
index 4d5c78e..961f46c 100644
--- a/js/controllers/faction.js
+++ b/js/controllers/faction.js
@@ -16,16 +16,18 @@ export default (temp_engine) => {
     Faction.list_all((factions) => {
       add_factions(factions);
 
-      temp_engine.add_event("#btn-faction", "click", (button) => {
-        const attributes = button.target.attributes;
-        const faction_symbol = attributes["data-symbol"].value;
+      temp_engine.add_event("#btn-faction", "click", (e) => {
+        console.log(button);
+        const faction_symbol = $(e.target).attr("data-symbol");
         const faction = factions.find((element) => {
-          element.symbol == faction_symbol;
+          return element.symbol == faction_symbol;
         });
 
-        console.log(faction);
-
-        $("#faction-title").html("");
+        $("#faction-title").html(faction.symbol);
+        $("#faction-description").html(`Description: ${faction.description}`);
+        $("#faction-headquarters").html(
+          `Headquarters: ${faction.headquarters}`
+        );
 
         modal.show();
       });