diff --git a/css/mainpage.css b/css/mainpage.css
new file mode 100644
index 0000000..f7d0d96
--- /dev/null
+++ b/css/mainpage.css
@@ -0,0 +1,25 @@
+/* the text box isn't center yet */
+.box_body{
+    display: flex;
+    align-items:center;
+    justify-content:center;
+    flex-direction: column;
+}
+
+
+/* welcome text and name text color */
+.tittle_text{
+    font-size: 2.5rem;
+    font-family: 'Courier New', Courier, monospace;
+    margin-bottom: 10px;
+}
+
+.main_page_name{
+    color: var(--temp_primary-color);
+}
+
+.description{
+    font-family: monospace;
+    font-size: 1.5rems;
+    font-weight: normal;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index e512c5f..41b740e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -4,14 +4,25 @@
     --ground-footer-color: #CFAB8D;
     --second-footer-color: #D9C4B0;
     --secondary-background-color: #BBDCE5;
+    --temp_primary-color: #fffdd0;
+    --temp_secondary-color:#0070A9;
+    --text-color: #fcffe9;
+    margin: 0;
+    overflow: hidden;
 
 }
-
+/* darkmode color */
 .dark{
     --primary-background-color: #78B9B5;
     --ground-footer-color: #320A6B;
     --second-footer-color: #065084;
     --secondary-background-color: #0F828C;
+    --text-color: #1a033b;
+
+}
+/* background color */
+.bg_color{
+    background-color: var(--primary-background-color);
 }
 
 /* the darkmode button */
@@ -24,6 +35,7 @@
     border-style: none;
     cursor: pointer;
 }
+
 #theme_switch svg{
     width: 3.5rem;
     height: auto;
@@ -37,4 +49,39 @@
 
 .dark #theme_switch svg:first-child{
     display: none;
-}
\ No newline at end of file
+}
+
+.dark #theme_switch svg:last-child{
+    display: block;
+}
+
+/* the style of the main page */
+
+.content_container{
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+.Square_content{
+    width: 50rem;
+    height: 50rem;
+    background: var(--secondary-background-color);
+    border-radius: 1rem;
+    box-sizing: border-box;
+}
+
+.website_top{
+    background-color: var(--temp_secondary-color);
+    padding:1rem;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+
+}
+
+.website_text{
+    font-family: monospace;
+    font-size: 1.5rem;
+    color: var(--text-color);
+}
+
diff --git a/index.html b/index.html
index cb05175..9653a01 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,11 @@
     <!-- add a image -->
 
     <!-- css and js -->
-    <link rel="stylesheet" href="./css/style.css">
-    <link rel="mainJS" href="./js/main.js">
+    <link rel = "stylesheet" href="./css/style.css">
+    <link rel = "stylesheet" href="./css/mainpage.css">
+
+    <script type = "text/javascript" src = "./js/darkmode.js" defer></script>
+    <script type = "text/javascript" src = "./js/main.js" defer></script>
 
 </head>
 
@@ -30,17 +33,28 @@
         </div>
 
         <!-- my info from who i am and my social linke -->
-        <div class = "content">
-            <!-- this might be where the whole stuff should be in -->
-            <div class = "temp-mid-box">
-                <div class = "title_name">
-
+        <div class = "content_container">
+            <div class = "Square_content">
+                <div class = "website_top">
+                    <div class = "website_text">
+                        Home
+                    </div>                        
                 </div>
-                <!-- social box might need to move it -->
-                <div class = "social">
-                    
+                <!-- this might be where the whole stuff should be in -->
+                <div class = "box_body">
+                <!-- this is the text for the main page -->
+                    <p class = "tittle_text">
+                        HI I'm <span class = "main_page_name"> Simon Zheng</span>
+                    </p>
+                    <h2 class = "description">
+                        Student and Programmer
+                    </h2>
+                    <!-- social box might need to move it -->
+                    <div class = "social">
+                        
+                    </div>
                 </div>
-            </div>
+             </div>
         </div>
         
         <!-- footer for design look -->
diff --git a/js/darkmode.js b/js/darkmode.js
new file mode 100644
index 0000000..3ad04a9
--- /dev/null
+++ b/js/darkmode.js
@@ -0,0 +1,19 @@
+let darkmode = localStorage.getItem('dark')
+const switch_button = document.getElementById("theme_switch")
+
+const enableDarkmode = () => {
+    document.body.classList.add('dark')
+    localStorage.setItem('darkmode' , 'active')
+}
+
+const disableDarkmode = () => {
+    document.body.classList.remove('dark')
+    localStorage.setItem('darkmode', null)
+}
+
+if(darkmode === 'avtive') enableDarkmode()
+
+switch_button.addEventListener("click", () => {
+    darkmode = localStorage.getItem('darkmode')
+    darkmode !== "active" ? enableDarkmode() : disableDarkmode()
+}) 
\ No newline at end of file