diff --git a/apps/console/src/pages/HomePage.tsx b/apps/console/src/pages/HomePage.tsx
index 0ab652f6e..59a46f62a 100644
--- a/apps/console/src/pages/HomePage.tsx
+++ b/apps/console/src/pages/HomePage.tsx
@@ -8,111 +8,109 @@ import {
 import { Link } from "react-router";
 import type { HomePageQuery as HomePageQueryType } from "./__generated__/HomePageQuery.graphql";
 
-    export const HomePageQuery = graphql`
-      query HomePageQuery {
-        node(id: "AZSfP_xAcAC5IAAAAAAltA") {
-          id
-          ... on Organization {
-            name
-            createdAt
-            updatedAt
-            vendors {
-              edges {
-                node {
-                  id
-                  name
-                  createdAt
-                  updatedAt
-                }
-              }
+export const HomePageQuery = graphql`
+  query HomePageQuery {
+    node(id: "AZSfP_xAcAC5IAAAAAAltA") {
+      id
+      ... on Organization {
+        name
+        createdAt
+        updatedAt
+        vendors {
+          edges {
+            node {
+              id
+              name
+              createdAt
+              updatedAt
             }
-            peoples {
-              edges {
-                node {
-                  id
-                  fullName
-                  primaryEmailAddress
-                  additionalEmailAddresses
-                  createdAt
-                  updatedAt
-                }
-              }
+          }
+        }
+        peoples {
+          edges {
+            node {
+              id
+              fullName
+              primaryEmailAddress
+              additionalEmailAddresses
+              createdAt
+              updatedAt
             }
-            frameworks {
-              pageInfo {
-                hasNextPage
-                hasPreviousPage
-                startCursor
-                endCursor
-              }
-              edges {
-                cursor
-                node {
-                  id
-                  name
-                  description
-                  controls {
-                    edges {
-                      node {
-                        id
-                        name
-                        state
-                        stateTransisions {
-                          edges {
-                            node {
-                              id
-                              toState
-                              fromState
-                              createdAt
-                              updatedAt
-                            }
-                          }
+          }
+        }
+        frameworks {
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+            startCursor
+            endCursor
+          }
+          edges {
+            cursor
+            node {
+              id
+              name
+              description
+              controls {
+                edges {
+                  node {
+                    id
+                    name
+                    state
+                    stateTransisions {
+                      edges {
+                        node {
+                          id
+                          toState
+                          fromState
+                          createdAt
+                          updatedAt
                         }
-                        tasks {
-                          edges {
-                            node {
-                              id
-                              name
-                              state
-                              evidences {
-                                edges {
-                                  node {
-                                    id
-                                    state
-                                    fileUrl
-                                    stateTransisions {
-                                      edges {
-                                        node {
-                                          id
-                                          fromState
-                                          toState
-                                          reason
-                                          createdAt
-                                          updatedAt
-                                        }
-                                      }
+                      }
+                    }
+                    tasks {
+                      edges {
+                        node {
+                          id
+                          name
+                          state
+                          evidences {
+                            edges {
+                              node {
+                                id
+                                state
+                                fileUrl
+                                stateTransisions {
+                                  edges {
+                                    node {
+                                      id
+                                      fromState
+                                      toState
+                                      reason
+                                      createdAt
+                                      updatedAt
                                     }
-                                    createdAt
-                                    updatedAt
                                   }
                                 }
+                                createdAt
+                                updatedAt
                               }
-                              stateTransisions {
-                                edges {
-                                  node {
-                                    id
-                                    toState
-                                    fromState
-                                    reason
-                                    createdAt
-                                    updatedAt
-                                  }
-                                }
-                              }
-                              createdAt
-                              updatedAt
                             }
                           }
+                          stateTransisions {
+                            edges {
+                              node {
+                                id
+                                toState
+                                fromState
+                                reason
+                                createdAt
+                                updatedAt
+                              }
+                            }
+                          }
+                          createdAt
+                          updatedAt
                         }
                       }
                     }
@@ -122,7 +120,10 @@ import type { HomePageQuery as HomePageQueryType } from "./__generated__/HomePag
             }
           }
         }
-      }`;
+      }
+    }
+  }
+`;
 
 export default function HomePage() {
   const [queryRef, loadQuery] =
@@ -154,9 +155,15 @@ function HomePageContent({
 
   return (
     <div>
-      <h1>User</h1>
-      <pre>{JSON.stringify(data, null, 2)}</pre>
-      <Link to="/foobar">Go to FooPage</Link>
+      <div className="grid auto-rows-min gap-4 md:grid-cols-3">
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+        <div className="aspect-video rounded-xl bg-muted/50" />
+      </div>
+      <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min">
+        <pre>{JSON.stringify(data, null, 2)}</pre>
+        <Link to="/foobar">Go to FooPage</Link>
+      </div>
     </div>
   );
 }