diff --git a/luckydiamond/src/assets/css/ComponentsStyles/developer.css b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
index 3164f67..7554e31 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/developer.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -677,6 +677,7 @@
         height: 732px;
         margin-top: 10px;
         margin-left: 1px;
+        /* overflow-y: auto; */
     }
     .bottom_card {
         display: flex;
diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index c2a4cbc..59af522 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -210,6 +210,10 @@ button {
     margin: 0.625rem 2.438rem 1.125rem 1.125rem;
 }
 
+.about {
+    grid-area: about;
+}
+
 /* /Profile */
 
 /* Saper */
@@ -235,6 +239,24 @@ button {
     grid-area: crashplayers;
 }
 
+
+.content-grid--about {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat"
+        "menu about about about about about chat";
+    grid-gap: 0.625rem;
+}
+
+
 /* /Crash */
 
 /* Media */
diff --git a/luckydiamond/src/pages/AboutPage.vue b/luckydiamond/src/pages/AboutPage.vue
index e36074e..5082734 100644
--- a/luckydiamond/src/pages/AboutPage.vue
+++ b/luckydiamond/src/pages/AboutPage.vue
@@ -1,13 +1,15 @@
 <template>
-    <div class="content__grid-profile" >
-        <aside-bar-component></aside-bar-component>
-    
-        
-    
-        <header-component></header-component>
+  <div class="content-grid--about">
+    <aside-bar-component></aside-bar-component>
 
-        <develop-component></develop-component>
-      </div>
+    <section class="about">
+
+    <develop-component></develop-component>
+
+    </section>
+    <header-component></header-component>
+
+  </div>
 </template>
 <script>
 import DevelopComponent from "@/components/DevelopComponent.vue";
@@ -15,21 +17,20 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 
 export default {
-    data () {
-        return {
-           Object: {
-            bg:'value',
-            nickname: 'value',
-            icons: {},
-            textTacholgy: {'text1': 'text2'}
-           }
-        }
-    }, 
-    components: {
+  data() {
+    return {
+      Object: {
+        bg: "value",
+        nickname: "value",
+        icons: {},
+        textTacholgy: { text1: "text2" },
+      },
+    };
+  },
+  components: {
     HeaderComponent,
     AsideBarComponent,
-    DevelopComponent    
-    }
-}
-
+    DevelopComponent,
+  },
+};
 </script>
\ No newline at end of file