diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 59af522..8876ba7 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -256,6 +256,33 @@ button {
     grid-gap: 0.625rem;
 }
 
+.content-grid--help {
+    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 help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat"
+        "menu help help help help help chat";
+    grid-gap: 0.625rem;
+}
+
+.help {
+    grid-area: help;
+    display: flex;
+    height: 95%;
+    border-radius: 3.125rem;
+    background: #17181C;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
+    /*height: 96.2%;*/
+}
+
 
 /* /Crash */
 
diff --git a/luckydiamond/src/pages/HelpPage.vue b/luckydiamond/src/pages/HelpPage.vue
index 98e3284..a110c68 100644
--- a/luckydiamond/src/pages/HelpPage.vue
+++ b/luckydiamond/src/pages/HelpPage.vue
@@ -1,36 +1,35 @@
 <template>
-    <div class="content-grid--help">
-      <aside-bar-component></aside-bar-component>
-  
-      <section class="help">
-  
-      <develop-component></develop-component>
-  
-      </section>
-      <header-component></header-component>
-  
-    </div>
-  </template>
+  <div class="content-grid--help">
+    <aside-bar-component></aside-bar-component>
+
+    <develop-component></develop-component>
+    <header-component></header-component>
+
+    <section class="help">
+      <h1>gfsdlkgdfk</h1>
+    </section>
+  </div>
+</template>
   <script>
-  import HelpComponent from "@/components/HelpComponent.vue";
-  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: {
-      HeaderComponent,
-      AsideBarComponent,
-      HelpComponent,
-    },
-  };
-  </script>
\ No newline at end of file
+// import HelpComponent from "@/components/HelpComponent.vue";
+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: {
+    HeaderComponent,
+    AsideBarComponent,
+    // HelpComponent,
+  },
+};
+</script>
\ No newline at end of file