diff --git a/public/assets/img/about/discord-icon.webp b/public/assets/img/about/discord-icon.webp
new file mode 100644
index 0000000..742de61
Binary files /dev/null and b/public/assets/img/about/discord-icon.webp differ
diff --git a/public/assets/img/about/discord-screenshot.webp b/public/assets/img/about/discord-screenshot.webp
new file mode 100644
index 0000000..824614c
Binary files /dev/null and b/public/assets/img/about/discord-screenshot.webp differ
diff --git a/public/assets/img/about/gamepad-icon.webp b/public/assets/img/about/gamepad-icon.webp
new file mode 100644
index 0000000..58ec06c
Binary files /dev/null and b/public/assets/img/about/gamepad-icon.webp differ
diff --git a/public/assets/img/about/games-screenshot.webp b/public/assets/img/about/games-screenshot.webp
new file mode 100644
index 0000000..e6d7462
Binary files /dev/null and b/public/assets/img/about/games-screenshot.webp differ
diff --git a/public/assets/img/about/people-icon.webp b/public/assets/img/about/people-icon.webp
new file mode 100644
index 0000000..5177043
Binary files /dev/null and b/public/assets/img/about/people-icon.webp differ
diff --git a/public/assets/img/about/raports-screenshot.webp b/public/assets/img/about/raports-screenshot.webp
new file mode 100644
index 0000000..89280e7
Binary files /dev/null and b/public/assets/img/about/raports-screenshot.webp differ
diff --git a/public/assets/img/about/repos-screenshot.webp b/public/assets/img/about/repos-screenshot.webp
new file mode 100644
index 0000000..11d7352
Binary files /dev/null and b/public/assets/img/about/repos-screenshot.webp differ
diff --git a/public/assets/img/about/repositories-icon.webp b/public/assets/img/about/repositories-icon.webp
new file mode 100644
index 0000000..8a56ffc
Binary files /dev/null and b/public/assets/img/about/repositories-icon.webp differ
diff --git a/src/components/about/About.vue b/src/components/about/About.vue
index 030e3dc..2936623 100644
--- a/src/components/about/About.vue
+++ b/src/components/about/About.vue
@@ -1,88 +1,169 @@
 <template>
   <section id="about">
-    <div class="card-ab">
-      <div class="row">
-        <div class="col-lg-6 col-md-12">
-          <h1>&nbsp;{{ $t("message.about.title") }}</h1>
-          <p>{{ $t("message.about.p1") }}</p>
-
-          <p>{{ $t("message.about.p2") }}</p>
-
-          <p>{{ $t("message.about.p3") }}</p>
-
-        </div>
-        <div class="intellij-container col-lg-6 col-md-12">
-          <img alt="intellij" class="intellij" src="/assets/img/header/about/eternalcore-intellij.webp">
-        </div>
+    <h3 class="title">{{ $t("message.about-us.title") }}</h3>
+    <p class="desc">{{ $t("message.about-us.desc") }}</p>
+
+    <div class="gallery">
+      <Gallery
+          v-for="(item, index) in items"
+          :key="index"
+          :title="$t('message.about-us.gallery-parts[' + (index) + '].title')"
+          :description="$t('message.about-us.gallery-parts[' + (index) + '].desc')"
+          :icon="item.icon"
+          :image="item.image"
+          :isActive="item.isActive"
+          @toggle-active="handleToggleActive(index)"
+      />
+    </div>
+    <div class="description-box">
+      <div class="description" :class="isActive ? 'active' : '' ">
+        <h3> {{ $t("message.about-us.gallery-parts[" + activeIndex + "].title") }} </h3>
+        <p> {{ $t("message.about-us.gallery-parts[" + activeIndex + "].desc") }} </p>
       </div>
     </div>
   </section>
 </template>
 
 <script>
+import Gallery from "@/components/about/components/Gallery.vue";
 
 export default {
   name: "about",
+  components: {Gallery},
+  data() {
+    return {
+      activeIndex: 0,
+      isActive: false,
+      items: [
+        {
+          icon: "/assets/img/about/people-icon.webp",
+          image: "/assets/img/about/raports-screenshot.webp",
+          isActive: true,
+        },
+        {
+          icon: "/assets/img/about/repositories-icon.webp",
+          image: "/assets/img/about/repos-screenshot.webp",
+        },
+        {
+          icon: "/assets/img/about/discord-icon.webp",
+          image: "/assets/img/about/discord-screenshot.webp",
+        },
+        {
+          icon: "/assets/img/about/gamepad-icon.webp",
+          image: "/assets/img/about/games-screenshot.webp",
+        }
+      ]
+    };
+  },
+  created() {
+    this.autoToggleActive();
+  },
+  mounted() {
+  },
+  methods: {
+    isMobileScreenWidth() {
+      return window.innerWidth < 1000;
+    },
+    handleToggleActive(index) {
+      this.items.forEach((item, i) => {
+        if (i === index) {
+          item.isActive = true;
+        } else {
+          item.isActive = false;
+          this.activeIndex = index;
+        }
+      });
+    },
+    autoToggleActive() {
+      setTimeout(() => {
+        this.autoToggleActive();
+
+        if (!this.isMobileScreenWidth()) {
+
+          return
+        }
+
+        if (this.activeIndex === this.items.length - 1) {
+          this.handleToggleActive(0);
+          return;
+        }
+
+        this.handleToggleActive(this.activeIndex + 1);
+      }, 5000);
+    }
+  }
 };
 </script>
 
 <style>
-@media only screen and (max-width: 1000px) {
-  #about {
-    padding: 0 7% 3% 8%;
-  }
-
-  .card-ab {
-    border-radius: 12px;
-    padding: 15% 15% 4% 10%;
-  }
-
-  .card-ab h1 {
-    border-left: 5px solid var(--black);
-  }
+.title {
+  color: var(--primary-title);
+}
 
-  .card-ab p {
-    margin-top: 8%;
-  }
+.desc {
+  color: var(--secondary-title);
+  margin-bottom: 25px;
 }
 
-.card-ab {
-  border-radius: 12px;
-  padding: 5% 5%;
+.gallery {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  overflow: hidden;
+  gap: 15px;
+  margin-bottom: 10px;
+}
 
-  background: rgb(63, 94, 251);
-  background: -moz-linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
-  background: -webkit-linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
-  background: linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f5efb", endColorstr="#fc466b", GradientType=1);
-  color: var(--white);
+#about {
+  padding: 3% 12% 3% 12%;
 }
 
-.card-ab h1 {
-  font-weight: 800;
-  border-left: 5px solid var(--white);
+.description-box {
+  width: 100%;
+  border-radius: 15px;
+  background: var(--light-gray);
+  border: var(--light-gray) 5px solid;
 }
 
-.card-ab p {
-  margin-top: 6%;
+.description {
+  padding: 15px 15px 0 15px;
 }
 
-#about {
-  padding: 0 12% 3% 12%;
+.description h3 {
+  color: var(--primary-title);
+  font-size: 1.5rem;
 }
 
-.intellij-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 10px !important;
+.description p {
+  color: var(--secondary-title);
+  font-size: 0.95rem;
 }
 
+@media only screen and (max-width: 1000px) {
+  #about {
+    padding: 0 7% 3% 8%;
+  }
+
+  .gallery {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 5px;
+    overflow: hidden;
+    width: 100%;
+    height: 40vh;
+  }
 
-.intellij {
-  box-shadow: var(--black) 0 0 15px;
-  width: 100%;
-  border-radius: 15px;
+  .description h3 {
+    font-size: 1.2rem;
+  }
+
+  .description p {
+    font-size: 0.9rem;
+  }
 }
 
 </style>
\ No newline at end of file
diff --git a/src/components/about/components/Gallery.vue b/src/components/about/components/Gallery.vue
new file mode 100644
index 0000000..051ae6a
--- /dev/null
+++ b/src/components/about/components/Gallery.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="gallery-section" @click="toggleActive" :class="isActive ? 'active' : '' "
+       :style="{ backgroundImage: 'url(' + image + ')' }">
+    <div class="shadow"></div>
+    <div class="icon" :class="isActive ? 'active' : '' ">
+      <img :src="icon" alt="Gallery Image" class="gallery-icon"/>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Gallery",
+  props: {
+    key: Number,
+    title: "",
+    description: "",
+    icon: String,
+    image: String,
+    isActive: Boolean
+  },
+  methods: {
+    toggleActive() {
+      this.$emit('toggle-active', this.key);
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+.gallery-section {
+  position: relative;
+  width: 20%;
+  overflow: hidden;
+  height: 60vh;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  background-repeat: no-repeat;
+  background-size: auto 120%;
+  background-position: center;
+  border: 5px solid var(--light-gray);
+  cursor: pointer;
+  min-width: 100px;
+  margin: 0 ;
+  transition: .5s cubic-bezier(.68,.04,0,.91) all;
+}
+
+.gallery-section.active {
+  flex-grow: 10000;
+  transform: scale(1);
+  max-width: 100%;
+  margin: 0;
+  border-radius: 15px;
+  background-size: auto 110%;
+  background-position: center;
+}
+
+.gallery-section:not(.active) {
+  flex-grow: 1;
+  max-width: 150px;
+  border-radius: 15px;
+}
+
+.icon {
+  align-items: center;
+  top: 80%;
+  left: 20%;
+  z-index: 3;
+  width: 80px;
+  height: 80px;
+  background: transparent;
+  border-radius: 50%;
+  border: var(--primary-dark-gray) 4px solid;
+  padding: 5px;
+  position: relative;
+}
+
+.icon.active {
+  display: none;
+  opacity: 0;
+}
+
+.gallery-icon {
+  width: 60%;
+  height: auto;
+  z-index: 3;
+  filter: brightness(0) invert(0.40);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  align-items: center;
+  justify-content: center;
+}
+
+.shadow {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
+}
+
+@media only screen and (max-width: 1000px) {
+  .gallery-section {
+    width: 100%;
+    height: 70vh;
+    margin: 10px;
+    align-items: center;
+    justify-content: center;
+    max-width: max-content;
+    flex-grow: inherit;
+    transform: matrix();
+  }
+
+  .icon {
+    display: none;
+  }
+
+  .gallery-section:not(.active) {
+    display: none;
+    flex-grow: inherit;
+    max-width: none;
+    border-radius: 15px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/lang/en.json b/src/lang/en.json
index 403be7c..c8e283b 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -12,11 +12,27 @@
       "hello": "Hello there! 👋",
       "motto": "EternalCode is a fantastic community of developers!"
     },
-    "about": {
-      "title": "About 🎉",
-      "p1": "We are a team of programmers with many years of experience, offering a lot of services related to the IT industry!",
-      "p2": "A close-knit team is what sets us apart, we are a pioneer of this type of service in the market. Among other things, we offer help with games, Linux & Windows servers. support related to the choice of hosting, security of server machines and we love to share our programming knowledge!",
-      "p3": "Do you need something more? Or maybe you want us to do a top-notch design for you on commission? We can accomplish everything without much difficulty! We are open to any type of cooperation!"
+    "about-us": {
+      "title": "About us 🎉",
+      "desc": "Learn more about our organization and our members!",
+      "gallery-parts": [
+        {
+          "title": "Members",
+          "desc": "Our open source organization consists of eight computer science enthusiasts, including several experienced programmers. Our main area of work is Minecraft plugins written in Java and projects in other languages such as Vue and JavaScript. We have opened several repositories on GitHub, which are constantly being developed and improved to provide the best possible experience for users."
+        },
+        {
+          "title": "Our work",
+          "desc": "The basis of our development lies in the work we invest in projects, plugins, and extensions. We strive to create increasingly better code that will benefit others. That is why we adopt an Agile approach, putting in efforts to ensure that what we create is of the highest quality."
+        },
+        {
+          "title": "Discord",
+          "desc": "Discord serves as our primary platform for communication, where we are active. We provide guidance, share memes, and play games. We aim to create an inclusive community open to everyone, encouraging interaction with us. We strive to assist other developers in advancing their projects, don't hesitate to ask us for help!"
+        },
+        {
+          "title": "Entertainment",
+          "desc": "In addition to working on open-source projects, our members also value their free time and entertainment. We often play Minecraft and Fortnite to relax and enjoy playing together. Moreover, we like to play many games, such as Sons of the Forest and Witcher, as well as watch anime and other movies to broaden our horizons and draw inspiration for creating our projects."
+        }
+      ]
     },
     "skills": {
       "title": "Our magic powers!",
diff --git a/src/lang/pl.json b/src/lang/pl.json
index f3ef3c6..162085c 100644
--- a/src/lang/pl.json
+++ b/src/lang/pl.json
@@ -12,11 +12,27 @@
       "hello": "Witaj! 👋",
       "motto": "EternalCode to fantastyczna społeczność programistów!"
     },
-    "about": {
+    "about-us": {
       "title": "O nas 🎉",
-      "p1": "Jesteśmy zespołem programistów z wieloletnim doświadczeniem, oferującym mnóstwo usług związanych z branżą IT!",
-      "p2": "Zgrany zespół to coś, co nas wyróżnia, jesteśmy pionierem tego typu usług na rynku. Oferujemy między innymi pomoc dotyczącą serwerów gier, Linuxa oraz Windowsa, wsparcie związane z wyborem hostingu, zabezpieczenia maszyn serwerowych oraz uwielbiamy się dzielić wiedzą na temat programowania!",
-      "p3": "Potrzebujesz czegoś więcej? A może chcesz, abyśmy wykonali Ci projekt na najwyższym poziomie na zlecenie? Wszystko możemy bez większego trudu zrealizować! Jesteśmy otwarci na każdego typu współpracę!"
+      "desc": "Poznaj naszą organizację open source i dowiedz się, co robimy i jak możemy ci pomóc!",
+      "gallery-parts": [
+        {
+          "title": "Członkowie",
+          "desc": "Nasza organizacja open source składa się z ośmiu entuzjastów IT, w tym kilku doświadczonych programistów. Głównym obszarem naszej pracy są pluginy do Minecrafta napisane w Javie oraz projekty w innych językach, takich jak Vue i JavaScript. Otworzyliśmy kilkanaście repozytoriów na GitHubie, które są stale rozwijane i ulepszane, aby zapewnić jak najlepsze doświadczenie użytkownikom Minecrafta."
+        },
+        {
+          "title": "Nasza praca",
+          "desc": "Podstawą naszego rozwoju jest praca, którą wkładamy w projekty, pluginy i rozszerzenia. Chcemy tworzyć co raz lepszy kod, który posłuży innym, dlatego pracujemy Agile'owo dokładając starań, by to co tworzymy było jak najlepsze."
+        },
+        {
+          "title": "Discord",
+          "desc": "Główną platformą naszego kontaktu jest Discord, gdzie jesteśmy aktywni. Udzielamy porad, dzielimy się memami czy gramy w gry. Chcemy stworzyć społeczność otwartą dla każdego, dlatego zachęcamy do interakcji z nami. Chcemy pomagać innym pasjonatom programowania w rozwijaniu ich projektów, dlatego piszcie śmiało!"
+        },
+        {
+          "title": "Rozrywka",
+          "desc": "Poza pracą nad projektami open-source, nasi członkowie również cenią sobie czas wolny i rozrywkę. Często gramy w Minecrafta i Fortnite, aby odprężyć się i cieszyć się grą ze sobą. Ponadto, lubimy grać w Sons of the Forest oraz wiedźmina, a także oglądać anime i inne filmy, aby poszerzać nasze horyzonty i czerpać inspirację do tworzenia naszych projektów."
+        }
+      ]
     },
     "skills": {
       "title": "Nasze magiczne moce!",