diff --git a/partials/tabs/projects.html b/partials/tabs/projects.html
index 0cce9d3b..9c1bbeb1 100644
--- a/partials/tabs/projects.html
+++ b/partials/tabs/projects.html
@@ -106,7 +106,7 @@ <h6><b>Filter Google Summer of Code Projects</b></h6>
         <div ng-show="currentProject.developers_involved.length>0" class="project-detail-element">
           <div class="small-heading uppercase">Developers Involved</div> <span class="pr-element-detail chip" ng-repeat="developers in currentProject.developers_involved">@{{developers}}</span> </div>
         <div ng-show="currentProject.issues.length>0" class="project-detail-element">
-          <div class="small-heading uppercase">Related issues</div> <span ng-click="redirect(issue)" class="pr-element-detail chip clickable" ng-repeat="issue in currentProject.issues">{{ issue | format_issue }}</span>
+          <div class="small-heading uppercase">Related issues</div> <span ng-click="redirect(issue)" class="pr-element-detail chip clickable" ng-class="lc.getIssueStateClass(issue)" ng-repeat="issue in currentProject.issues">{{ issue | format_issue }}</span>
           <br>
           <br>
           <br>
diff --git a/resources/css/style.css b/resources/css/style.css
index c3a090c7..de6dd29c 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -31,6 +31,10 @@
 .center-content {
   justify-content: center;
 }
+.closed {
+  background-color: #cb2431;
+  color: white
+}
 .close-filters {
   right: 6%;
   margin-top: 1.25rem;
@@ -117,12 +121,23 @@ i.fa {
 .lighter-font {
   font-weight: lighter;
 }
+.merged {
+  background-color: #6f42c1;
+  color: white;
+}
 .no-events-available {
   font-size: 1.2em;
   height: 30vh;
   justify-content: center;
   flex-direction: column;
 }
+.no-state {
+  background-color: #e4e4e4;
+}
+.open, .opened {
+  background-color: #2cbe4e;
+  color: white;
+}
 .project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
   cursor: pointer;
   background-color: #f3f5f8;
diff --git a/resources/js/app.js b/resources/js/app.js
index b0567be4..c3f7b156 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -121,6 +121,7 @@
                     self.displayFilters = !self.displayFilters
                     $('select').material_select();
                 }
+                self.issueStates = {}
 
                 $scope.sortOrder = function(project) {
                     return mapping[project.status];
@@ -480,6 +481,34 @@
                 }
 
                 $scope.getAllFilters();
+                self.getIssueStateClass = function(issue){
+                    return self.issueStates[issue]
+                }
+
+                function getIssueState(issue) {
+                    self.issueStates[issue] = 'no-state'
+                    $http({
+                        method: 'GET',
+                        url: 'https://webservices.coala.io/issue/details',
+                        params: { url: issue }
+                    }).then(function (response) {
+                        var issue_data = response.data
+                        self.issueStates[issue] = issue_data.state
+                    })
+                }
+
+                function getAllRelatedIssuesState(){
+                    $http.get('data/projects.liquid')
+                        .then(function (res) {
+                            angular.forEach(res.data, function(project){
+                                angular.forEach(project.issues, function(issue){
+                                    getIssueState(issue)
+                                })
+                            })
+                        })
+                }
+                getAllRelatedIssuesState()
+
             },
             controllerAs: 'lc'
         }