diff --git a/assets/main.css b/assets/main.css
index 6ab061c..3fcc456 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -32,6 +32,10 @@
     @apply font-bounded text-[24px] leading-[140%] font-bold uppercase md:text-[48px] xl:text-[64px];
   }
 
+  .h1-big {
+    @apply font-bounded text-[32px] leading-[140%] font-bold uppercase sm:text-[48px] xl:text-[64px];
+  }
+
   .h2-bold-bounded {
     @apply font-bounded text-[24px] leading-[150%] md:leading-[120%] font-bold sm:text-[36px] md:text-[40px];
   }
@@ -59,6 +63,10 @@
   .space-25-75 {
     @apply space-y-[25px] sm:space-y-[75px]
   }
+
+  .space-55-75 {
+    @apply space-y-[55px] sm:space-y-[75px]
+  }
 }
 
 .main {
diff --git a/components/section/about-us-page/AboutUsDifferent.vue b/components/section/about-us-page/AboutUsDifferent.vue
new file mode 100644
index 0000000..e421fa5
--- /dev/null
+++ b/components/section/about-us-page/AboutUsDifferent.vue
@@ -0,0 +1,69 @@
+<template>
+  <UiContainer class="space-25-55-75">
+    <div class="grid xl:grid-cols-2">
+      <div class="space-25-75 xl:col-start-2">
+        <h2 class="h2-bold-bounded">
+          {{ component.section_lang_data.title }}
+        </h2>
+        <p>{{ component.section_lang_data.description }}</p>
+      </div>
+    </div>
+    <div
+      class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 grid-rows-5 md:grid-rows-3 xl:grid-rows-2 gap-8"
+    >
+      <div
+        v-for="(item, index) in component.section_lang_data.feature_blocks"
+        :key="index"
+        :class="[
+          'p-8 rounded-2xl border border-block flex flex-col justify-between gap-4',
+          index === 0 && 'bg-block dark:text-bg-dark',
+          index === 1 && 'xl:col-start-2 xl:col-end-3',
+          index === 2 && 'xl:col-start-4 xl:col-end-5',
+          index === 3 &&
+            'md:col-start-1 md:col-end-3 xl:col-start-2 xl:col-end-4',
+        ]"
+      >
+        <h4 class="h4-uppercase-bold-inter">
+          <span>0{{ index + 1 }} <br></span
+          >{{ item.block_title }}
+        </h4>
+        <p>{{ item.block_description }}</p>
+      </div>
+      <div
+        class="sm:text-white xl:row-start-2 md:col-start-1 md:col-end-3 xl:col-end-2 w-full md:h-full flex justify-center xl:items-end"
+      >
+        <UiButtonArrow type="fill">Zakoupit zlato</UiButtonArrow>
+      </div>
+      <div
+        class="rounded-2xl row-start-4 md:row-start-2 md:col-start-2 md:col-end-3 xl:col-start-4 xl:col-end-5"
+        :style="{
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'top',
+        }"
+      />
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { UiButtonArrow } from "#components";
+
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    title: string;
+    description: string;
+    feature_blocks: [
+      {
+        block_title: string;
+        block_description: string;
+        fill: boolean;
+      }
+    ];
+  };
+};
+</script>
diff --git a/components/section/about-us-page/AboutUsHistory.vue b/components/section/about-us-page/AboutUsHistory.vue
new file mode 100644
index 0000000..95ebc86
--- /dev/null
+++ b/components/section/about-us-page/AboutUsHistory.vue
@@ -0,0 +1,128 @@
+<template>
+  <UiContainer class="space-55-75">
+    <div class="space-25-55-75">
+      <h2 class="h2-bold-bounded">
+        {{ component.section_lang_data.section_1.title }}
+      </h2>
+      <div class="flex flex-col xl:flex-row gap-12">
+        <div
+          class="rounded-2xl h-[255px] sm:h-[435px] md:h-[500px] w-full xl:min-w-[700px]"
+          :style="{
+            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'bottom',
+          }"
+        />
+        <div class="flex flex-col justify-between space-25-55">
+          <div class="flex flex-col gap-4">
+            <h4 class="h4-uppercase-bold-inter">
+              {{ component.section_lang_data.section_1.sub_title }}
+            </h4>
+            <div class="flex flex-col">
+              <p
+                v-for="item in component.section_lang_data.section_1
+                  .sub_description"
+              >
+                {{ item }}
+              </p>
+            </div>
+          </div>
+          <h4 class="h4-uppercase-bold-inter">
+            {{ component.section_lang_data.section_1.sub_title_second }}
+          </h4>
+        </div>
+      </div>
+    </div>
+    <div class="space-25-55-75">
+      <h2 class="h2-bold-bounded sm:text-center">
+        {{ component.section_lang_data.section_2.title }}
+      </h2>
+      <div class="space-25-55">
+        <div class="flex flex-col w-full xl:w-[55%]">
+          <p v-for="item in component.section_lang_data.section_2.description">
+            {{ item }}
+          </p>
+        </div>
+        <div class="w-full md:ml-10 xl:m-0 xl:grid xl:grid-cols-2">
+          <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
+            {{ component.section_lang_data.section_3.title }}
+          </h4>
+        </div>
+      </div>
+      <div class="flex flex-col xl:flex-row gap-12">
+        <div class="flex flex-col sm:flex-row gap-3 min-w-[60%]">
+          <div
+            class="rounded-2xl h-[230px] sm:h-[300px] w-full xl:h-[770px]"
+            :style="{
+              backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }"
+          />
+          <div
+            class="rounded-2xl xl:hidden w-full h-[230px] sm:h-[300px] xl:w-full xl:h-[328px]"
+            :style="{
+              backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }"
+          />
+        </div>
+        <div class="flex flex-col justify-between space-25-55 xl:w-[70%]">
+          <div
+            class="hidden xl:block rounded-2xl max-full min-h-[330px]"
+            :style="{
+              backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[2]}?thumb=1200x0')`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }"
+          />
+          <div class="h-full flex flex-col gap-5 xl:gap-0 justify-between">
+            <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
+              {{ component.section_lang_data.section_4.title }}
+            </h4>
+            <div class="flex flex-col">
+              <p
+                v-if="component.section_lang_data.section_4.description"
+                v-html="component.section_lang_data.section_4.description[0]"
+              ></p>
+              <br />
+              <p
+                v-if="component.section_lang_data.section_4.description"
+                v-html="component.section_lang_data.section_4.description[1]"
+              ></p>
+            </div>
+            <h4 class="col-start-2 col-end-3 h4-uppercase-bold-inter">
+              {{ component.section_lang_data.section_5.title }}
+            </h4>
+          </div>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+import { UiButtonArrow } from "#components";
+
+const props = defineProps<{ component: Component }>();
+interface ContentSection {
+  title: string;
+  sub_title?: string;
+  sub_title_second?: string;
+  sub_description?: string[];
+  description?: string[];
+}
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    section_1: ContentSection;
+    section_2: ContentSection;
+    section_3: ContentSection;
+    section_4: ContentSection;
+    section_5: ContentSection;
+  };
+};
+</script>
diff --git a/components/section/about-us-page/AboutUsMain.vue b/components/section/about-us-page/AboutUsMain.vue
new file mode 100644
index 0000000..2dce633
--- /dev/null
+++ b/components/section/about-us-page/AboutUsMain.vue
@@ -0,0 +1,82 @@
+<template>
+  <UiContainer class="space-y-[55px] sm:space-y-[75px] xl:space-y-[100px]">
+    <div class="w-full flex flex-col md:flex-row justify-between gap-7">
+      <div class="flex flex-col justify-between w-full gap-4 xl:w-[45%]">
+        <div class="space-y-[25px]">
+          <h1 class="h1-big text-accent-green-light dark:text-accent-green-dark">
+            {{ component.section_lang_data.main_title }}
+          </h1>
+          <p>
+            {{ component.section_lang_data.main_description }}
+          </p>
+        </div>
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.section_lang_data.main_subtitle }}
+        </h4>
+      </div>
+      <div
+        class="rounded-2xl h-[340px] sm:h-[380px] md:min-w-[324px] xl:h-[800px] xl:min-w-[740px] m-0 sm:mx-10 md:m-0"
+        :style="{
+          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }"
+      />
+    </div>
+    <div class="space-25-55-75">
+      <h2 class="h2-bold-bounded">
+        {{ component.section_lang_data.story_title }}
+      </h2>
+      <div class="flex flex-col-reverse md:flex-row w-full gap-6">
+        <div
+          class="rounded-2xl h-[390px] md:h-auto min-w-[40%] xl:min-w-[60%]"
+          :style="{
+            backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[1]}?thumb=1200x0')`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }"
+        />
+        <div class="flex flex-col">
+          <p v-for="(item, index) in component.section_lang_data.story_description">
+            {{ item }} 
+            <div v-if="index < component.section_lang_data.story_description.length-1">
+              <br>
+            </div>
+          </p>
+        </div>
+      </div>
+      <div class="flex flex-col w-full gap-6">
+        <h4 class="h4-uppercase-bold-inter">
+          {{ component.section_lang_data.story_subtitle }}
+        </h4>
+        <div class="flex flex-col justify-between xl:max-w-[70%]">
+          <p v-for="(el, indexEl) in component.section_lang_data.story_sub_description">
+            {{ el }}
+            <div v-if="indexEl < component.section_lang_data.story_sub_description.length-1">
+              <br>
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{ component: Component }>();
+type Component = {
+  image_collection: string;
+  section_id: string;
+  section_img: string;
+  section_lang_data: {
+    main_title: string;
+    main_description: string;
+    main_subtitle: string;
+    story_title: string;
+    story_description: [];
+    story_subtitle: string;
+    story_sub_description: [];
+  };
+};
+</script>
diff --git a/components/section/investment-page/InvestmentFaq.vue b/components/section/investment-page/InvestmentFaq.vue
index 1eabd27..cc01c90 100644
--- a/components/section/investment-page/InvestmentFaq.vue
+++ b/components/section/investment-page/InvestmentFaq.vue
@@ -7,13 +7,15 @@
         <div
           v-for="(item, index) in component.section_lang_data.faq"
           :key="index"
-          @click="active = active === index ? null : index"
-          class="flex gap-60 cursor-pointer"
+          @click="active = active === index ? 0 : index"
+          class="flex gap-8 sm:gap-20 md:gap-40 xl:gap-60 cursor-pointer"
         >
-          <p>{{ index }}</p>
+          <h4 class="h4-uppercase-bold-inter">
+            <span v-if="index + 1 < 10">0</span>{{ index + 1 }}
+          </h4>
           <div
             :class="[
-              'flex justify-between w-full transition-all duration-300',
+              'flex justify-between w-full transition-all duration-300 gap-2 sm:gap-10 md:gap-2',
               active === index && 'pb-10 border-b border-bg-dark',
             ]"
           >
@@ -29,18 +31,14 @@
               </h4>
 
               <transition name="fade-slide">
-                <p
-                  v-if="active === index"
-                  class="transition-all duration-300 ease-in-out"
-                >
+                <p v-if="active === index">
                   {{ item.content }}
                 </p>
               </transition>
             </div>
 
             <svg
-              width="20"
-              height="20"
+              class="min-w-5 h-5 dark:text-bg-light"
               viewBox="0 0 20 21"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
@@ -51,12 +49,26 @@
                     ? 'M1.29289 17.4628L0.585786 18.1699L2 19.5841L2.70711 18.877L1.29289 17.4628ZM19.9706 1.19936C19.9706 0.647074 19.5228 0.199359 18.9706 0.199359L9.97056 0.19936C9.41828 0.199359 8.97056 0.647075 8.97056 1.19936C8.97056 1.75164 9.41828 2.19936 9.97056 2.19936L17.9706 2.19936L17.9706 10.1994C17.9706 10.7516 18.4183 11.1994 18.9706 11.1994C19.5228 11.1994 19.9706 10.7516 19.9706 10.1994L19.9706 1.19936ZM2 18.1699L2.70711 18.877L19.6777 1.90647L18.9706 1.19936L18.2635 0.492253L1.29289 17.4628L2 18.1699Z'
                     : 'M2.7364 1.49211L2.0293 0.785005L0.615083 2.19922L1.32219 2.90633L2.7364 1.49211ZM18.9999 20.1698C19.5521 20.1698 19.9999 19.7221 19.9999 19.1698L19.9999 10.1698C19.9999 9.6175 19.5521 9.16978 18.9999 9.16978C18.4476 9.16978 17.9999 9.6175 17.9999 10.1698L17.9999 18.1698L9.99986 18.1698C9.44758 18.1698 8.99986 18.6175 8.99986 19.1698C8.99986 19.7221 9.44757 20.1698 9.99986 20.1698L18.9999 20.1698ZM2.0293 2.19922L1.32219 2.90633L18.2928 19.8769L18.9999 19.1698L19.707 18.4627L2.7364 1.49211L2.0293 2.19922Z'
                 "
-                fill="#1A1A1A"
+                fill="currentColor"
               />
             </svg>
           </div>
         </div>
       </div>
+      <h4
+        class="h4-uppercase-bold-inter sm:text-start md:text-center xl:text-start xl:ml-66"
+      >
+        <span
+          v-for="(item, index) in component.section_lang_data.sub_title"
+          :key="index"
+          :class="{
+            'text-accent-green-light dark:text-accent-green-dark':
+              item.highlight,
+          }"
+        >
+          {{ item.text }}
+        </span>
+      </h4>
     </div>
   </UiContainer>
 </template>
@@ -75,8 +87,14 @@ type Component = {
         content: string;
       }
     ];
+    sub_title: [
+      {
+        text: string;
+        highlight: boolean;
+      }
+    ];
   };
 };
 
-const active = ref(0);
+const active = ref<number>(0);
 </script>