diff --git a/.github/workflows/ghpage.yaml b/.github/workflows/ghpage.yaml
new file mode 100644
index 0000000..dc963eb
--- /dev/null
+++ b/.github/workflows/ghpage.yaml
@@ -0,0 +1,26 @@
+on:
+  push:
+    branches:
+      - main  # Set a branch name to trigger deployment
+  pull_request:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true  
+          fetch-depth: 0    
+
+      - name: Build
+        run: |
+          npm install
+          npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v4
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
\ No newline at end of file
diff --git a/index.html b/index.html
index 085ccc3..0290f6a 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,7 @@
     <meta name="description" content="Grapycal is helpful for conducting experiments, including training AI, physical simulations, data analysis, computer art, and more. In the back-and-forth process between humans and machines, we need the higher interactivity provided by Grapycal to make the most of our creativity.">
     
     <!-- Facebook Meta Tags -->
-    <meta property="og:url" content="https://www.grapycal.org">
+    <meta property="og:url" content="https://www.grapycal.com">
     <meta property="og:type" content="website">
     <meta property="og:title" content="Grapycal - A Visual Programming Language Based on Python">
     <meta property="og:description" content="Grapycal is helpful for conducting experiments, including training AI, physical simulations, data analysis, computer art, and more. In the back-and-forth process between humans and machines, we need the higher interactivity provided by Grapycal to make the most of our creativity.">
@@ -16,8 +16,8 @@
 
     <!-- Twitter Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="grapycal.org">
-    <meta property="twitter:url" content="https://www.grapycal.org">
+    <meta property="twitter:domain" content="grapycal.com">
+    <meta property="twitter:url" content="https://www.grapycal.com">
     <meta name="twitter:title" content="Grapycal - A Visual Programming Language Based on Python">
     <meta name="twitter:description" content="Grapycal is helpful for conducting experiments, including training AI, physical simulations, data analysis, computer art, and more. In the back-and-forth process between humans and machines, we need the higher interactivity provided by Grapycal to make the most of our creativity.">
     <meta name="twitter:image" content="https://i.imgur.com/lTle1Kb.png"> <!-- Add your image URL here -->
diff --git a/nginx.conf b/nginx.conf
index aaff4d0..d0b6da3 100644
--- a/nginx.conf
+++ b/nginx.conf
@@ -1,7 +1,7 @@
 server {
     listen 80;
     listen [::]:80;
-    server_name www.grapycal.org;
+    server_name www.grapycal.com;
     location / {
         root /usr/share/nginx/html;
         index index.html index.htm;
diff --git a/src/components/MainSections/MainSection.vue b/src/components/MainSections/MainSection.vue
index b9eb735..f764f70 100644
--- a/src/components/MainSections/MainSection.vue
+++ b/src/components/MainSections/MainSection.vue
@@ -1,76 +1,49 @@
 <template>
     <div class="main-section">
         <div class="column">
-            
+
             <SubSection title="Use Cases">
-                <UseCaseSection/>
+                <UseCaseSection />
             </SubSection>
-            <SubSection title="Get Started">
-                <h2>Requirements</h2>
-                Before installing Grapycal, make sure you have <a href="https://www.python.org/downloads/release/python-3117/">Python 3.11</a> installed.
-                <h2>Install</h2>
-                <p>
-                    Enter the following command to install Grapycal and its built-in extensions.
-                    <br/>
-                    <code class="bg-black rounded-md p-1">pip install grapycal grapycal-builtin</code>
-                </p>
-                <h2>Quick Start</h2>
-                <p>Enter the following command to start Grapycal.</p>
-                    <code class="bg-black rounded-md p-1">grapycal</code>
-                <p>Then go to <a href="http://localhost:9001">http://localhost:9001</a>. Have fun!
-                </p>
-                <h2>Documentation
-                </h2>
-                    <ul>
-                        <li><a href="https://wiki.grapycal.org/index.php?title=Installation">Getting Started</a></li>
-                        <li><a href="https://wiki.grapycal.org/index.php?title=Contribution">Contributing</a></li>
-                    </ul>
+            <SubSection title="Motivation">
+                <!-- max 1000 px width -->
+                <div class="max-w-[700px] mx-auto my-20 text-gray-300 text-justify">
+                    <p class="mb-4">
+                        In our daily lives, countless ideas emerge in our minds, only to be dismissed because the
+                        perceived cost of realizing them is too high. Over time, sadly, we tend to forget our inherent
+                        creativity.
+                    </p>
+                    <p class="mb-4">
+                        The mission of Grapycal is to push more ideas over the line to be worthy of trying out.
+                    </p>
+                    <p class="mb-4">
+                        Grapycal is helpful for conducting experiments, including training AI, physical simulations,
+                        data analysis, computer art, and more. These experiments require repeated parameter adjustments,
+                        swapping certain components of models, while simultaneously observing the phenomena generated by
+                        different parameters. We then use human judgment combined with domain knowledge to deduce the
+                        best model or other conclusions.
+                    </p>
+                    <p class="mb-4">
+                        In this back-and-forth process between humans and machines, using traditional Python execution
+                        methods or Jupyter notebooks can be cumbersome. Therefore, we need the higher interactivity
+                        provided by Grapycal.
+                    </p>
+                </div>
             </SubSection>
 
-            <SubSection title="Contribute">
+            <SubSection title="Get Started">
+                <a href="https://docs.grapycal.com/latest/docs/"
+                    class="text-white py-2 px-4 rounded-md flex items-center text-gray-400 justify-center text-lg">
+                    Documentation
+                </a>
+                <a href="https://resource.grapycal.com/releases/demo/"
+                    class="text-white py-2 px-4 rounded-md flex items-center text-gray-400 justify-center text-lg">
+                    Download Now
+                </a>
 
-                <p>
-                    Start by visiting
-                     the <a href="https://github.com/orgs/Grapycal/projects/2/views/1">Project Board</a> to see what we are working on. Pick one and assign yourself to it. If you have a new idea, you can also create a new issue.
-                </p>
-                <h2>What you can do</h2>
-                <ul class="list-disc list-inside ml-4">
-                            <li class="mb-2">Add features or fix bugs to the backend.</li>
-                            <li class="mb-2">Add features or fix bugs to the frontend.</li>
-                            <li class="mb-2">Create a new extension for any domain you like (such as image processing or music
-                                synthesis) by following <a href="https://wiki.grapycal.org/index.php?title=Extension"
-                                    >tutorial</a>.</li>
-                            <li class="mb-2">Improve current extensions by adding new nodes or fixing bugs. Existing extensions are in
-                                the extensions folder of the <a href="https://github.com/Grapycal/Grapycal"
-                                    >Grapycal repository</a>.</li>
-                            <li class="mb-2">Improve the documentation.</li>
-                            <li class="mb-2">Improve the <a href="https://www.grapycal.org"
-                                    >Website</a> by modifying the source code: <a
-                                    href="https://github.com/Grapycal/Main-Page" >Main-Page</a>.
-                            </li>
-                            <li class="mb-2">Create issues to report bugs or request features.</li>
-                            <li class="mb-2">Leave comments on the <a href="https://github.com/orgs/Grapycal/projects/2/views/1">Project Board</a> with your thoughts to the existing plans.</li>
-                        </ul>
-                
-                <h2>To start contributing</h2>
-                <ol>
-                    <li>Please <a href="https://wiki.grapycal.org/index.php?title=Installation#Install%20from%20source">install Grapycal from source</a>.</li>
-                    <li>Play around with Grapycal and feel how Grapycal helps you as a user. Find out what you like and what you don't like. If you feel something is missing, you can add it and create a <a href="https://github.com/Grapycal/Grapycal/pulls">pull request</a> or <a href="https://github.com/Grapycal/Grapycal/issues">open an issue</a>.</li>
-                    <li>Refer to the <a href="https://wiki.grapycal.org/index.php?title=Application_Overview">project overview</a> to understand the project structure.</li>
-                    <li>If you don't know where to start, visit the <a href="https://github.com/orgs/Grapycal/projects/2/views/1">Project Board</a>.
-                         Find a topic that interests you and assign yourself to it. If you have a new idea, you can also create a new topic.</li>
-                </ol>
-                <div class="flex justify-center items-center my-4">
-                    <img src="https://i.imgur.com/azSy00h.jpg" width="800px" alt="Discussion:Plans" />
-                </div>
-                
-                <p>To discuss with us, feel free to go to <a href="https://github.com/Grapycal/Grapycal/discussions">Discussion</a> or join the <a href="https://discord.gg/adNQcS42CT">Discord server</a>.</p>
-                <div class="flex justify-center items-center my-4">
-                    <img src="https://i.imgur.com/qZmegjO.jpg" width="800px" alt="Discord server" />
-                </div>
-                
             </SubSection>
 
+
             <PeopleSection></PeopleSection>
         </div>
 
@@ -90,8 +63,9 @@ const props = defineProps({
 .main-section {
     background-color: var(--color-background);
 }
+
 .column {
-    
+
     max-width: 1400px;
     padding: 50px 20px;
     margin: auto;
diff --git a/src/components/TitleSection/TitleSection.vue b/src/components/TitleSection/TitleSection.vue
index be072ca..a9f59d1 100644
--- a/src/components/TitleSection/TitleSection.vue
+++ b/src/components/TitleSection/TitleSection.vue
@@ -28,10 +28,9 @@
             <div class="flex flex-column w-full justify-center mt-16 gap-4 flex-wrap">
                 <!-- two buttons , one for download, one for go to github -->
                 <!-- use tailwind -->
-                <TitleSectionButton class="bg-purple-button  border-2 border-purple-button-border " text="Download" link="#get-started"></TitleSectionButton>
+                <TitleSectionButton class="w-60 bg-green-900  border-2 border-green-800 " text="Download Now" link="https://resource.grapycal.com/releases/demo/" icon="https://i.imgur.com/cfGLoZa.png"></TitleSectionButton>
 
-                <TitleSectionButton class="bg-gray-900 border-2 border-gray-700" text="Visit GitHub repository" link="https://github.com/grapycal/grapycal" ><div class="fa fa-1x fa-github"> &nbsp;</div></TitleSectionButton>
-                <TitleSectionButton class="bg-gray-900 border-2 border-gray-700" text="Join Discord" link="https://discord.com/invite/adNQcS42CT" icon="https://www.svgrepo.com/show/353655/discord-icon.svg"></TitleSectionButton>
+                <TitleSectionButton class="w-60 bg-gray-900 border-2 border-gray-700" text="Join Discord" link="https://discord.com/invite/adNQcS42CT" icon="https://www.svgrepo.com/show/353655/discord-icon.svg"></TitleSectionButton>
             </div>
                 
         </div>
diff --git a/src/components/TitleSection/TitleSectionButton.vue b/src/components/TitleSection/TitleSectionButton.vue
index 8b415fd..fca743e 100644
--- a/src/components/TitleSection/TitleSectionButton.vue
+++ b/src/components/TitleSection/TitleSectionButton.vue
@@ -1,7 +1,7 @@
 <template>
-    <a :href="props.link" class="text-white py-2 px-4 rounded-full flex items-center text-gray-400">
+    <a :href="props.link" class="text-white py-2 px-4 rounded-md flex items-center text-gray-400 justify-center text-lg">
         
-        <img v-if="props.icon" :src="props.icon" alt="icon" class="w-4 h-4 inline-block mr-2 fill-white">
+        <img v-if="props.icon" :src="props.icon" alt="icon" class="w-6 h-6 inline-block mr-2 fill-white">
         <slot></slot>
         {{ props.text }}