diff --git a/database/database.json b/database/database.json
index cc1f52d..bd29679 100644
--- a/database/database.json
+++ b/database/database.json
@@ -33,7 +33,7 @@
             },
             {
                 "name": "valeo",
-                "page-link": "valeo.com",
+                "page-link": "https://www.valeo.com",
                 "image-link": "https://picsum.photos/1024/480/?image=10"
             },
             {
@@ -390,9 +390,55 @@
     "contact-us": {},
     "mutex": {
         "years": [
-            2018,
-            2019,
-            2020
+            {
+                "title": "Mutex 2018",
+                "year": 2018,
+                "text": "Improved own provided blessing may peculiar domestic. Sight house has sex never. No visited raising gravity outward subject my cottage mr be. Hold do at tore in park feet near my case. Invitation at understood occasional sentiments insipidity inhabiting in.",
+                "Speakers": [
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/linus.jpg"
+                    },
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/cards/cs/cs.png"
+                    },
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/linus.jpg"
+                    },
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/linus.jpg"
+                    }
+                ]
+            },
+            {
+                "title": "Mutex 2019",
+                "year": 2019,
+                "text": "Finished her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently. Several any had enjoyed shewing studied two. Up intention remainder sportsmen behaviour ye happiness.",
+                "Speakers": [
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/linus.jpg"
+                    },
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/cards/cs/cs.png"
+                    }
+                ]
+            },
+            {
+                "title": "Mutex 2020",
+                "year": 2020,
+                "text": "Insipidity the sufficient discretion imprudence resolution sir him decisively. Proceed how any engaged visitor. Explained propriety off out perpetual his you. Feel sold off felt nay rose met you.",
+                "Speakers": [
+                    {
+                        "details": "linus tech tips",
+                        "imgSrc": "/images/linus.jpg"
+                    }
+                ]
+            }
         ]
     },
     "social": [
diff --git a/src/components/AppNavigation.vue b/src/components/AppNavigation.vue
index 01c467a..5db0799 100644
--- a/src/components/AppNavigation.vue
+++ b/src/components/AppNavigation.vue
@@ -19,17 +19,6 @@
           <!-- tbh about page isn't needed-->
 <!--           <b-nav-item class="text hover-underline" to="/about"><a>About Us</a></b-nav-item> -->
         </b-navbar-nav>
-
-        <b-navbar-nav class="ml-auto">
-          <b-nav-item-dropdown v-bind:text="lang" right>
-            <b-dropdown-item @click="changeSiteLangToEN" href="#">EN</b-dropdown-item>
-            <b-dropdown-item @click="changeSiteLangToAR" href="#">AR</b-dropdown-item>
-          </b-nav-item-dropdown>
-          <b-nav-form>
-            <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
-            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
-          </b-nav-form>
-        </b-navbar-nav>
       </b-collapse>
     </b-navbar>
   </div>
diff --git a/src/components/HomeFooter.vue b/src/components/HomeFooter.vue
index de7616f..b858c56 100644
--- a/src/components/HomeFooter.vue
+++ b/src/components/HomeFooter.vue
@@ -6,7 +6,7 @@
           <div class="contact-us">
             <h3>CONTACT US</h3>
             <div class="contact-info">
-              email: cs@ieee-zsb.org
+              email: info@ieee-zsb.org
             </div>
           </div>
         </b-col>
@@ -14,14 +14,9 @@
           <div class="follow-us">
             <h3>FOLLOW US</h3>
             <div class="follow-links">
-              <span class="link">
-                <a href="https://www.facebook.com/IEEE.CS.ZSC/">
-                  <b-icon-facebook/>
-                </a>
-              </span>
-              <span class="link">
-                <a href="https://www.linkedin.com/company/ieee-cs-zagazig-student-chapter/about/">
-                  <b-icon-linkedin/>
+              <span v-for="socialLink in socials" :key="socialLink.icon" class="link">
+                <a :href="socialLink.link">
+                  <b-icon :icon="socialLink.icon" />
                 </a>
               </span>
             </div>
@@ -33,8 +28,14 @@
 </template>
 
 <script>
+import json from '../../database/database'
 export default {
   name: "HomeFooter",
+  data(){
+    return {
+      socials:json.social
+    }
+  }
 }
 </script>
 
diff --git a/src/components/Mutex/MutexHistory.vue b/src/components/Mutex/MutexHistory.vue
index df69638..e278106 100644
--- a/src/components/Mutex/MutexHistory.vue
+++ b/src/components/Mutex/MutexHistory.vue
@@ -10,8 +10,8 @@
         </b-col>
       </b-row>
       <b-row class="pt-3">
-        <b-col class="pb-3" v-for="(year, index) in Years" :key="index">
-          <plain-card class="card" :title="year.title" :imgLink="year.imgLink" :text="year.text"/>
+        <b-col class="pb-3" v-for="(year, index) in Years" :key="index" v-on:click="select" :id="`year-${index}`">
+          <plain-card class="card h-100" v-bind:class="{ 'active' : index==selected }" :title="year.title" :imgLink="`./images/cards/mutex/mutex_${year.year}.jpg`" :text="year.text"/>
         </b-col>
       </b-row>
     </b-container>
@@ -31,8 +31,16 @@ export default {
   },
   data () {
     return {
+      selected:0,
       Years : json.mutex.years
     }
+  },
+  methods:{
+    select: function(event){
+      let currentIndex = event.currentTarget.id.replace("year-","")
+      this.selected = currentIndex
+      this.$emit('selected',currentIndex)
+    }
   }
 }
 </script>
@@ -48,5 +56,23 @@ export default {
 }
 .card {
   min-width: 300px;
+  transition: box-shadow .3s;
+
+}
+
+.card:hover{
+  cursor: pointer;
+  box-shadow: rgba(16, 95, 212, 0.35) 0px 5px 15px;
+}
+
+
+
+.active{
+  box-shadow: rgb(16, 94, 212) 0px 5px 15px;
 }
+.active:hover{
+  box-shadow: rgb(16, 94, 212) 0px 5px 15px;
+}
+
+
 </style>
diff --git a/src/components/Mutex/MutexSpeakers.vue b/src/components/Mutex/MutexSpeakers.vue
index 210e131..7f0e5d9 100644
--- a/src/components/Mutex/MutexSpeakers.vue
+++ b/src/components/Mutex/MutexSpeakers.vue
@@ -11,7 +11,7 @@
     <div class="speakers-container">
       <div v-for="(speaker, index) in Speakers" :key="index">
         <figure data-aos-delay="500" data-aos="fade-in" data-aos-once="true" class="figure">
-          <img :src="speaker.imgSrc" class="figure-img img-fluid rounded" :alt="speaker.details"/>
+          <img :src="speaker.imgSrc" class="figure-img img-fluid rounded"  :alt="speaker.details"/>
           <figcaption class="figure-caption">{{speaker.details}}</figcaption>
         </figure>
       </div>
@@ -21,55 +21,22 @@
 
 <script>
 import ExpandingLine from '../ExpandingLine.vue'
+import json from '../../../database/database'
 export default {
   components: { ExpandingLine },
+  props:['active'],
   name: "MutexSpeakers",
   data() {
     return {
-      Speakers: [
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-        {
-          details: "linus tech tips",
-          imgSrc: "/images/linus.jpg",
-        },
-      ]
+      Speakers: json.mutex.years[this.active].Speakers
+    }
+  },
+  watch:{
+    active(val){
+      this.Speakers = json.mutex.years[val].Speakers
     }
   }
+  
 }
 </script>
 
diff --git a/src/components/activities/Activity.vue b/src/components/activities/Activity.vue
index c126602..1ec9355 100644
--- a/src/components/activities/Activity.vue
+++ b/src/components/activities/Activity.vue
@@ -1,10 +1,9 @@
 <template>
-  <div class="activity" :style="backgroundStyles(backgroundColor)">
+  <div class="activity h-100" :style="backgroundStyles(backgroundColor)">
     <div class="activity-content">
-      <p class="activity-duration">Date: {{ date }}</p>
       <img class="activity-image" :src="activityImage" :alt="activityImageAlt">
       <h3 class="activity-title">{{ title }}</h3>
-      <p class="activity-description">{{ description }}</p>
+      <p class="activity-description p-3">{{ description }}</p>
     </div>
   </div>
 </template>
@@ -53,11 +52,12 @@ export default {
   background-size: cover;
   padding: 20px;
   border-radius: 5px;
-  height: 80vh;
   color: #002855;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
 }
 
+
+
 .activity-duration {
   text-align: right;
   text-decoration-line: underline;
diff --git a/src/components/committees/AboutUs.vue b/src/components/committees/AboutUs.vue
index 4e1a59c..e2098be 100644
--- a/src/components/committees/AboutUs.vue
+++ b/src/components/committees/AboutUs.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="about-section">
       <center class="background">
-        <img :src="img">
+        <img style="max-width:820px;width:100%;" :src="img">
       </center>
         <b-container fluid="xl" class="text-center" >
 
@@ -65,7 +65,7 @@
         <b-container fluid='xl'>
           <b-row>
             <b-col md="4" class="py-2 px-0 px-md-3 activity" v-for="(activity, index) in Activities" :key="index">
-                <card-with-button :title="activity.title" :text="activity.text" :buttonLink="activity.pageLink" :imgLink="activity.imgLink" />
+                <PlainCard :title="activity.title" :text="activity.text" :imgLink="activity.imgLink" />
             </b-col>
           </b-row>
         </b-container>
@@ -75,11 +75,11 @@
 </template>
 
 <script>
-import CardWithButton from '../Home/HomeCards/CardsTemplates/CardWithButton.vue'
+import PlainCard from '../CardsTemplates/PlainCard.vue'
 export default {
     props:['data','img'],
     components: {
-      CardWithButton,
+      PlainCard,
     },
     
     data(){
diff --git a/src/views/Activities.vue b/src/views/Activities.vue
index 36c5295..8e4c8fe 100644
--- a/src/views/Activities.vue
+++ b/src/views/Activities.vue
@@ -26,7 +26,7 @@
     <section>
       <b-container fluid class="activity-section">
         <h2 class="activity-section-heading" data-aos="fade-down">Workshops</h2>
-        <b-row class="justify-content-center">
+        <b-row >
             <b-col md="4" class="activity-container" v-for="index in workshopData.length" :key="index">
               <Activity
                 :title="workshopData[index-1].title"
@@ -117,9 +117,9 @@ hr {
 }
 
 .activity-container {
-  margin: auto;
-}
+  margin-bottom: 2rem;
 
+}
 .activity {
   margin: 2em;
   margin-left: auto;
diff --git a/src/views/CS.vue b/src/views/CS.vue
index 8568c2d..c28c728 100644
--- a/src/views/CS.vue
+++ b/src/views/CS.vue
@@ -3,7 +3,6 @@
     <carousel v-bind:carousel="data['carousel']"/>
     <about-us v-bind:data="data['about']" v-bind:img="img" />
     <team v-bind:data="data['team']"/>
-    <contact-us v-bind:contact="data['contact-us']"/>
   </div>
 </template>
 
@@ -12,7 +11,6 @@ import Database from '/database/database';
 import AboutUs from '@/components/committees/AboutUs';
 import Carousel from '@/components/committees/Carousel';
 import Team from '@/components/committees/Team';
-import contactus from '@/components/ContactUs/contactus';
 
 
 export default{
@@ -20,8 +18,7 @@ export default{
   components:{
     'about-us':AboutUs,
     'carousel':Carousel,
-    'team':Team,
-    'contact-us':contactus
+    'team':Team
 
   },
 
diff --git a/src/views/MutexEvent.vue b/src/views/MutexEvent.vue
index fc445b9..a1077d8 100644
--- a/src/views/MutexEvent.vue
+++ b/src/views/MutexEvent.vue
@@ -6,9 +6,9 @@
     <mutex-cards-container/>
     <div class="space"/>
     <div class="space"/>
-    <mutex-history/>
+    <mutex-history @selected="updatePartners"/>
     <div class="space"/>
-    <mutex-speakers/>
+    <mutex-speakers :active="selectedEvent"/>
     <div class="space"/>
   </div>
 </template>
@@ -31,6 +31,17 @@ export default {
     MutexCardsContainer,
     MutexSpeakers,
   },
+  data(){
+    return {
+      selectedEvent:0
+    }
+  },
+  methods:{
+    updatePartners:function (index){
+      this.selectedEvent = index
+
+    }
+  }
 }
 </script>
 
diff --git a/src/views/RAS.vue b/src/views/RAS.vue
index 1b0bb96..249f997 100644
--- a/src/views/RAS.vue
+++ b/src/views/RAS.vue
@@ -3,7 +3,6 @@
     <carousel v-bind:carousel="data['carousel']"/>
     <about-us v-bind:data="data['about']" v-bind:img="img" />
     <team v-bind:data="data['team']"/>
-    <contact-us v-bind:contact="data['contact-us']"/>
   </div>
 </template>
 
@@ -11,7 +10,6 @@
 import Database from '/database/database';
 import AboutUs from '@/components/committees/AboutUs';
 import Carousel from '@/components/committees/Carousel';
-import contactus from '@/components/ContactUs/contactus';
 import Team from '@/components/committees/Team';
 
 export default{
@@ -20,7 +18,6 @@ export default{
     'about-us':AboutUs,
     'carousel':Carousel,
     'team':Team,
-    'contact-us':contactus
   },
 
   data(){