diff --git a/client/src/components/ChalModal.vue b/client/src/components/ChalModal.vue
index e7084d6a..70e04ad9 100644
--- a/client/src/components/ChalModal.vue
+++ b/client/src/components/ChalModal.vue
@@ -16,6 +16,7 @@
               <div class="col-3">
                 <div class="nav flex-column nav-pills sticky-top" id="challengesCategory" role="tablist" aria-orientation="vertical">
                   <a class="nav-link active show" id="starters-tab" data-toggle="pill" href="#starters" role="tab" aria-controls="starters" aria-selected="true">Starters</a>
+                  <a class="nav-link" id="cyber-championships-tab" data-toggle="pill" href="#cyber-championship" role="tab" aria-controls="cyber-championship" aria-selected="false">Cyber Champ.</a>
                   <a class="nav-link" id="web-exploit-tab" data-toggle="pill" href="#web-exploit" role="tab" aria-controls="web-exploit" aria-selected="false">Web Exploit.</a>
                   <a class="nav-link" id="forensics-tab" data-toggle="pill" href="#forensics" role="tab" aria-controls="forensics" aria-selected="false">Forensics</a>
                   <a class="nav-link" id="binary-tab" data-toggle="pill" href="#binary" role="tab" aria-controls="binary" aria-selected="false">Binary</a>
@@ -29,64 +30,192 @@
                     <b-form-checkbox-group
                         id="challengesS"
                         v-model="selectedChallenges"
-                        :options="challengesTextS"
                         name="challengesS"
                         class="ml-4"
                         stacked
-                    ></b-form-checkbox-group>
+                    >
+                      <!--{{ selectedChallenges }}  Used for debugging-->
+                      <div
+                          v-for="text in challengesTextS"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                          <!--{{ text.orgDesc }}  This is just dummy data for now-->
+                        </div>
+                      </div>
+
+                    </b-form-checkbox-group>
+                  </div>
+
+                  <div class="tab-pane fade" id="cyber-championship" role="tabpanel" aria-labelledby="cyber-championship">
+                    <b-form-checkbox-group
+                        id="challengesCS"
+                        v-model="selectedChallenges"
+                        name="challengesCS"
+                        class="ml-4"
+                        stacked
+                    >
+                      <div
+                          v-for="text in challengesTextCS"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                          <!--{{ text.orgDesc }}  This is just dummy data for now-->
+                        </div>
+                      </div>
+
+                    </b-form-checkbox-group>
                   </div>
 
                   <div class="tab-pane fade" id="web-exploit" role="tabpanel" aria-labelledby="web-exploit-tab">
                     <b-form-checkbox-group
                         id="challengesWE"
                         v-model="selectedChallenges"
-                        :options="challengesTextWE"
                         name="challengesWE"
                         class="ml-4"
                         stacked
-                    ></b-form-checkbox-group>
+                    >
+                      <div
+                          v-for="text in challengesTextWE"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                        </div>
+                      </div>
+                    </b-form-checkbox-group>
                   </div>
 
                   <div class="tab-pane fade" id="forensics" role="tabpanel" aria-labelledby="forensics-tab">
                     <b-form-checkbox-group
                         id="challengesF"
                         v-model="selectedChallenges"
-                        :options="challengesTextF"
                         name="challengesF"
                         class="ml-4"
                         stacked
-                    ></b-form-checkbox-group>
+                    >
+                      <div
+                          v-for="text in challengesTextF"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                        </div>
+                      </div>
+                    </b-form-checkbox-group>
                   </div>
 
                   <div class="tab-pane fade" id="binary" role="tabpanel" aria-labelledby="binary-tab">
                     <b-form-checkbox-group
                         id="challengesB"
                         v-model="selectedChallenges"
-                        :options="challengesTextB"
-                        name="challengesWE"
+                        name="challengesB"
                         class="ml-4"
                         stacked
-                    ></b-form-checkbox-group>
+                    >
+                      <div
+                          v-for="text in challengesTextB"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                        </div>
+                      </div>
+                    </b-form-checkbox-group>
                   </div>
                   <div class="tab-pane fade" id="reverse-eng" role="tabpanel" aria-labelledby="reverse-eng-tab">
                     <b-form-checkbox-group
                         id="challengesRE"
                         v-model="selectedChallenges"
-                        :options="challengesTextRE"
                         name="challengesRE"
                         class="ml-4"
                         stacked
-                    ></b-form-checkbox-group>
+                    >
+                      <div
+                          v-for="text in challengesTextRE"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                        </div>
+                      </div>
+                    </b-form-checkbox-group>
                   </div>
                   <div class="tab-pane fade" id="cryptography" role="tabpanel" aria-labelledby="cryptography-tab">
                     <b-form-checkbox-group
                         id="challengesC"
                         v-model="selectedChallenges"
-                        :options="challengesTextC"
                         name="challengesC"
                         class="ml-4"
                         stacked
-                    ></b-form-checkbox-group>
+                    >
+                      <div
+                          v-for="text in challengesTextC"
+                          :key="text"
+                          class="challenge-container"
+                      >
+                        <div class="checkbox-container">
+                          <b-form-checkbox
+                              :value="text.value"
+                          >
+                            {{ text.text }}
+                          </b-form-checkbox>
+                          <div class="info-icon" v-on:click="text.isInfoShown = !text.isInfoShown"><b-icon icon="info-circle"></b-icon></div>
+                        </div>
+                        <div class="chalInfo" v-bind:class="{ visible: text.isInfoShown}" v-html="text.orgDesc">
+                        </div>
+                      </div>
+                    </b-form-checkbox-group>
                   </div>
                 </div>
               </div>
@@ -134,6 +263,7 @@ export default {
       challengesRE: [], challengesTextRE: [],
       challengesC: [], challengesTextC: [],
       challengesS: [], challengesTextS: [],
+      challengeCS: [], challengesTextCS:[],
       cat: '', childrenChallenges: '', isDisabled: false,
     }
   },
@@ -147,6 +277,7 @@ export default {
           .concat(this.challengesF)
           .concat(this.challengesRE)
           .concat(this.challengesS)
+          .concat(this.challengeCS)
           .concat(this.challengesC): []
     },
     encodeHTML: function(s) {
@@ -187,7 +318,8 @@ export default {
 
           let taglist = element.getTagsList();
           let name = element.getName();
-          let parentChallenge = { text: name + that.childrenChallenges, value: taglist[0] };
+          let orgDesc = element.getOrgdescription()
+          let parentChallenge = { text: name + that.childrenChallenges, value: taglist[0], orgDesc: orgDesc, isInfoShown: false  };
           switch (that.cat) {
             case "Web exploitation":
               that.challengesTextWE.push(parentChallenge);
@@ -212,6 +344,11 @@ export default {
             case "Starters":
               that.challengesTextS.push(parentChallenge);
               that.challengesS.push(taglist[0])
+              break;
+            case "Cybermesterskaberne":
+              that.challengesTextCS.push(parentChallenge);
+              that.challengesCS.push(taglist[0]);
+              break;
           }
         })
       });
@@ -260,6 +397,67 @@ export default {
   border: 1px solid #ced4da;
   border-radius: .35rem;
 }
+
+
+.info-icon {
+  position: relative;
+  top: 1px;
+  left: -515px;
+  width: 16px;
+  padding: 0px;
+  margin: 0px;
+  z-index: 99999;
+}
+.chalInfo{
+  background-color: #221d52;
+  color: #ffffff;
+  position: relative;
+  margin: auto;
+  padding-left: 10px;
+  padding-right: 10px;
+  width: 500px;
+  max-height: 0;
+  overflow: hidden;
+  transition: all .5s ease-in-out;
+  visibility: hidden;
+}
+.chalInfo.visible {
+  max-height: 200px;
+  /*transform-origin: top-center;*/
+  transition: all .5s ease-in-out;
+  padding: 10px;
+  overflow-y: auto;
+  box-shadow: 5px 5px 5px rgba(73, 80, 87, 0.83);
+  visibility: visible;
+}
+
+.checkbox-container {
+  display: flex;
+}
+
+.custom-control{
+  width: 100%;
+}
+
+.chalInfo::-webkit-scrollbar {
+  background-color: #221d52;
+  width: 5px;
+}
+
+.chalInfo::-webkit-scrollbar-track {
+  background-color: #221d52;
+}
+
+/* scrollbar itself */
+.chalInfo::-webkit-scrollbar-thumb {
+  background-color: #babac0;
+  border-radius: 16px;
+}
+
+/* set button(top and bottom of the scrollbar) */
+.chalInfo::-webkit-scrollbar-button {
+  display:none;
+}
 .my-is-invalid{
   border: 2px solid rgba(220,53,69,0.9);
   box-shadow: 1px 1px 2px rgba(220,53,69,0.7);