diff --git a/index.html b/index.html
index 217c8565..fbcca516 100755
--- a/index.html
+++ b/index.html
@@ -82,7 +82,7 @@
           </li>
           <li class="nav-item dark-mode">
             <label class="switch">
-              <input type="checkbox">
+              <input type="checkbox" id="checkbox">
               <span class="slider round"></span>
             </label>
           </li>
diff --git a/js/main.js b/js/main.js
index 5b800744..25211b98 100644
--- a/js/main.js
+++ b/js/main.js
@@ -193,6 +193,9 @@ $(document).ready(function() {
             $("#participants").empty();
             participants = all_participants.slice((current_page-1)*per_page, (current_page-1)*per_page+per_page);
             loadpage();
+            if($('#checkbox').is(':checked')){
+                $('.card').toggleClass('dark')
+            }
         }
         });
 
@@ -203,7 +206,10 @@ $(document).ready(function() {
             $('.prev').removeClass('disabled');
             $(this).removeClass('disabled');
             participants = all_participants.slice((current_page-1)*per_page, (current_page-1)*per_page+per_page);
-            loadpage();
+            loadpage(); 
+            if($('#checkbox').is(':checked')){
+                $('.card').toggleClass('dark')
+            }
             }
         });
 
@@ -217,7 +223,10 @@ $(document).ready(function() {
             $("#participants").empty();
             participants = all_participants.slice((current_page-1)*per_page, (current_page-1)*per_page+per_page);
             loadpage();
-        });
+            if($('#checkbox').is(':checked')){
+                $('.card').addClass('dark')
+            }
+        }); 
 
     //this function load the data
     function loadpage(){
@@ -330,14 +339,14 @@ $(document).ready(function() {
             if(participantabout==="")
                 participantabout="Talk is cheap. Show me the code";
             var participantDiv =
-                  "<div class='col-lg-2  col-md-4 col-sm-6 text-center mb-4'>" +
-                "<div class='card participant-card' style='width: 18rem;'>" +
-                "<div class = 'side'>" +
-                "<img class='participant-img img-fluid card-img-top' src=" +
+                  "<div class='p-card col-lg-2  col-md-4 col-sm-6 text-center mb-4'>" +
+                "<div class='p-card card participant-card' style='width: 18rem;'>" +
+                "<div class = 'side p-card'>" +
+                "<img class='p-card participant-img img-fluid card-img-top' src=" +
                 participant.imageurl +
                 " alt=''>" +
-                "<div class='card-body project-card-body'>" +
-                "<h4 class='card-title card-name'>" +
+                "<div class='p-card card-body project-card-body'>" +
+                "<h4 class='p-card card-title card-name'>" +
                 participant.name +
                 "</h4>" +
                 "<p class='card-text card-college'>" +
@@ -345,11 +354,11 @@ $(document).ready(function() {
                 "</p>" +
                 "</div>"+
                 "</div>" +
-                "<div class='side back'>" +
+                "<div class='p-card side back'>" +
                 "<p class='card-about'>" +
                 participantabout +
                 "</p>" +
-                "<div class='social-media-links'>" +
+                "<div class='p-card social-media-links'>" +
                 "<a href=" +
                 participant.facebook +
                 "><i class='fab fa-facebook-f'></i></a>" +
@@ -412,6 +421,10 @@ $(document).ready(function() {
             $("#projects").empty();
             projects = all_projects.slice((current_page-1)*per_page, (current_page-1)*per_page+per_page);
             loadpage();
+            if($('#checkbox').is(':checked')){
+              $('.card').addClass('dark')
+              $('.stack-ref').addClass('dark')
+          }
         }
         });
 
@@ -423,7 +436,11 @@ $(document).ready(function() {
             $('.next-project').removeClass('disabled');
             $("#projects").empty();
             projects = all_projects.slice((current_page-1)*per_page, (current_page-1)*per_page+per_page);
-            loadpage();
+            loadpage(); 
+            if($('#checkbox').is(':checked')){
+              $('.card').addClass('dark')
+              $('.stack-ref').addClass('dark')
+          }
             }
         });
 
@@ -437,8 +454,12 @@ $(document).ready(function() {
             $("#projects").empty();
             projects = all_projects.slice((current_page-1)*per_page, (current_page-1)*per_page+per_page);
             loadpage();
-        });
-
+            if($('#checkbox').is(':checked')){
+              $('.card').addClass('dark')
+              $('.stack-ref').addClass('dark')
+          }
+        }); 
+   
       //this function load the data
     function loadpage(){
         //show the active page
@@ -457,36 +478,37 @@ $(document).ready(function() {
         }
         $.each(projects, function(i, project) {
             var projectDiv =
-                "<div class='col-lg-3 col-md-4 col-sm-6 4 d-flex align-items-stretch portfolio-item'>" +
-                "<div class='card h-100 project-card'>" +
+                "<div class='p-card col-lg-3 col-md-4 col-sm-6 4 d-flex align-items-stretch portfolio-item'>" +
+                "<div class='p-card card h-100'>" +   
                 "<div class = 'side'>" +
                 "<a href=" +
                 project.github +
-                "><img class='card-img-top card-img-project' src=" +
+                "><img class='p-card card-img-top card-img-project' src=" +
                 project.imageurl +
                 " alt=''></a>" +
-                "<div class='card-body'>" +
+                "<div class='p-card card-body'>" +
                 "<h4 class='card-title'>" +
-                "<a href=" +
+                "<a class='card-title-text' href=" +
                 project.github +
                 ">" +
                 project.name +
                 "</a>" +
                 "</h4>" +
+                "<p class='p-card card-text'>" +
+                project.about +
+                "</p>" +
+                "</div>"+
+                "<div class='p-card stack-ref card-footer card-footer-project'>"+
                 "</div>"+
                 "</div>"+
                 "<div class='side back'>" +
-                "<p class='card-text project-text'>" +
-                project.about +
-                "</p>" +
-                "<div class='card-footer card-footer-project'>"+
                 "<h5>"+
                 "Mentors" +
                 "</h5>"+
                 "<p>" +
                 project.mentors +
                 "</p>" +
-                "<h5>"+
+                "<h5 class='p-card stack-ref'>"+
                 "Tech Stack" +
                 "</h5>"+
                 "<p>" +
@@ -568,6 +590,7 @@ $(function(){
   });
 
 // dark mode
+var i=1; 
 $(document).ready(function(){
     $('.slider').click(function(){
         $('body').toggleClass('dark')
@@ -576,13 +599,21 @@ $(document).ready(function(){
         $('nav,div,footer').toggleClass('dark')
         $('.countdownContainer,.info,.labels,.values,.labellings').toggleClass('dark',false)
         $('.countdownContainer,.info,.labels,.values,.labellings').toggleClass('nightcountdown')
-        $('h2,h3,h5').toggleClass('dark')
+        $('h2,h3').toggleClass('dark')
         $('span,img,ul,li').toggleClass('dark')
-        $('h1,h4,a').toggleClass('dark-landing-text')
+        $('h1,a').toggleClass('dark-landing-text')
         $('footer').toggleClass('night-footer')
         $('.footer_media').toggleClass('footer-dark')
         $('.fab-night').toggleClass('footer-dark')
         $('.night-footer-ref').toggleClass('footer-dark')
+        $('.issue-btn-section').toggleClass('dark')
+        $('.card-footer').toggleClass('dark')
+        $('.stack-ref').toggleClass('dark')
+        if($('#checkbox').is(':checked')){
+            $('.p-card').removeClass('dark');
+            $('.card-title-text').removeClass('dark-landing-text');
+              console.log(i++);
+          }
     })
 })