diff --git a/src/main/webapp/index.xhtml b/src/main/webapp/index.xhtml
index dd8449c..d011908 100644
--- a/src/main/webapp/index.xhtml
+++ b/src/main/webapp/index.xhtml
@@ -8,47 +8,111 @@
     <h:head>
         <title>User Information - My Portfolio</title>
         <h:outputStylesheet library="css" name="styles.css"/>
+        <script type="text/javascript">
+            let editMode = false;
+
+            function toggleEditMode() {
+                editMode = !editMode;
+                document.getElementById('userInfoForm:displayState').style.display = editMode ? 'none' : 'block';
+                document.getElementById('userInfoForm:editState').style.display = editMode ? 'block' : 'none';
+            }
+
+            function cancelEdit() {
+                editMode = false;
+                document.getElementById('userInfoForm:displayState').style.display = 'block';
+                document.getElementById('userInfoForm:editState').style.display = 'none';
+            }
+        </script>
     </h:head>
     <h:body>
         <ui:include src="header.xhtml"/>
         <main>
-            <h:form id="userInfoForm">
-                <section id="user-info">
-<!--                    <h1>User Information</h1>-->
-                    <h2>
-                        <h:outputText value="#{projectBean.userInfo.name}"/>
-                    </h2>
-                    <div class="detail-item">
-                        <p>
-                            <strong>Introduction:</strong>
-                            <h:outputText value="#{projectBean.userInfo.introduction}"/>
-                        </p>
-                    </div>
-                    <div class="detail-item">
-                        <p>
-                            <strong>Interests:</strong>
-                            <h:outputText value="#{projectBean.userInfo.interests}"/>
-                        </p>
-                    </div>
-                    <div class="detail-item">
-                        <p>
-                            <strong>Experiences:</strong>
-                            <h:outputText value="#{projectBean.userInfo.experiences}"/>
-                        </p>
-                    </div>
-                    <div class="detail-item">
-                        <p>
-                            <strong>Skills:</strong>
-                            <h:outputText value="#{projectBean.userInfo.skills}"/>
-                        </p>
-                    </div>
-                    <div class="detail-item">
-                        <p>
-                            <strong>Career Goals:</strong>
-                            <h:outputText value="#{projectBean.userInfo.careerGoals}"/>
-                        </p>
-                    </div>
-                </section>
+            <h:form id="userInfoForm" rendered="#{projectBean.isLoggedIn}">
+                <h:panelGroup id="displayState" style="display: block;">
+                    <section id="user-info">
+
+                        <!--                    <h1>User Information</h1>-->
+                        <h2>
+                            <h:outputText value="#{projectBean.userInfo.name}"/>
+                        </h2>
+                        <div class="detail-item">
+                            <p>
+                                <strong>Introduction:</strong>
+                                <h:outputText value="#{projectBean.userInfo.introduction}"/>
+                            </p>
+                        </div>
+                        <div class="detail-item">
+                            <p>
+                                <strong>Interests:</strong>
+                                <h:outputText value="#{projectBean.userInfo.interests}"/>
+                            </p>
+                        </div>
+                        <div class="detail-item">
+                            <p>
+                                <strong>Experiences:</strong>
+                                <h:outputText value="#{projectBean.userInfo.experiences}"/>
+                            </p>
+                        </div>
+                        <div class="detail-item">
+                            <p>
+                                <strong>Skills:</strong>
+                                <h:outputText value="#{projectBean.userInfo.skills}"/>
+                            </p>
+                        </div>
+                        <div class="detail-item">
+                            <p>
+                                <strong>Career Goals:</strong>
+                                <h:outputText value="#{projectBean.userInfo.careerGoals}"/>
+                            </p>
+                        </div>
+                        <h:commandButton value="Edit" onclick="toggleEditMode();" styleClass="edit-button"
+                                         type="button"/>
+                    </section>
+
+                </h:panelGroup>
+
+                <h:panelGroup id="editState" style="display: none;">
+                    <section id="user-info-edit">
+                        <h2>
+                            Name:
+                            <h:inputText value="#{projectBean.userInfo.name}"/>
+                        </h2>
+                        <div class="form-group">
+                            <p>
+                                <strong>Introduction:</strong>
+                                <h:inputTextarea value="#{projectBean.userInfo.introduction}"/>
+                            </p>
+                        </div>
+                        <div class="form-group">
+                            <p>
+                                <strong>Interests:</strong>
+                                <h:inputTextarea value="#{projectBean.userInfo.interests}"/>
+                            </p>
+                        </div>
+                        <div class="form-group">
+                            <p>
+                                <strong>Experiences:</strong>
+                                <h:inputTextarea value="#{projectBean.userInfo.experiences}"/>
+                            </p>
+                        </div>
+                        <div class="form-group">
+                            <p>
+                                <strong>Skills:</strong>
+                                <h:inputTextarea value="#{projectBean.userInfo.skills}"/>
+                            </p>
+                        </div>
+                        <div class="form-group">
+                            <p>
+                                <strong>Career Goals:</strong>
+                                <h:inputTextarea value="#{projectBean.userInfo.careerGoals}"/>
+                            </p>
+                        </div>
+                        <h:commandButton value="Save" action="#{projectBean.updateUserInfo}" onclick="toggleEditMode();"
+                                         styleClass="saveButton"/>
+                        <h:commandButton value="Cancel" onclick="cancelEdit();" immediate="true"
+                                         styleClass="cancel-button" type="button"/>
+                    </section>
+                </h:panelGroup>
             </h:form>
             <p>Click <h:link value="here" outcome="project"/> to go to the project page</p>
         </main>
diff --git a/src/main/webapp/resources/css/styles.css b/src/main/webapp/resources/css/styles.css
index cca8795..034c2b4 100644
--- a/src/main/webapp/resources/css/styles.css
+++ b/src/main/webapp/resources/css/styles.css
@@ -201,7 +201,7 @@ footer {
 }
 
 /* 通用样式 */
-.project-form {
+.project-form, #user-info-edit {
     font-family: Arial, sans-serif;
     background-color: #f9f9f9;
     padding: 20px;
@@ -211,7 +211,7 @@ footer {
     margin: 20px auto;
 }
 
-.project-form h2 {
+.project-form h2, #user-info-edit h2 {
     text-align: center;
     color: #333;
     margin-bottom: 20px;
@@ -284,7 +284,7 @@ footer {
 }
 
 /* 保存按钮样式 */
-#saveButton {
+#saveButton,.saveButton {
     background-color: #007bff;
     color: white;
     border: none;
@@ -321,4 +321,42 @@ footer {
     margin-bottom: 15px; /* 底部外边距 */
     text-align: justify; /* 文本对齐 */
     color: #555; /* 文字颜色 */
+}
+
+.edit-button {
+    background-color: #4CAF50; /* 绿色背景 */
+    color: white; /* 白色文字 */
+    border: none; /* 无边框 */
+    padding: 10px 20px; /* 内边距 */
+    text-align: center; /* 文字居中 */
+    text-decoration: none; /* 无下划线 */
+    display: inline-block; /* 行内块 */
+    font-size: 16px; /* 字体大小 */
+    margin: 4px 2px; /* 外边距 */
+    cursor: pointer; /* 鼠标指针 */
+    border-radius: 4px; /* 圆角 */
+    transition: background-color 0.3s; /* 背景色过渡效果 */
+}
+
+.edit-button:hover {
+    background-color: #45a049; /* 悬停时背景颜色 */
+}
+
+.cancel-button {
+    background-color: #ffffff; /* 红色背景 */
+    color: #000000; /* 黑色文字 */
+    border: none; /* 无边框 */
+    padding: 10px 20px; /* 内边距 */
+    text-align: center; /* 文字居中 */
+    text-decoration: none; /* 无下划线 */
+    display: inline-block; /* 行内块 */
+    font-size: 16px; /* 字体大小 */
+    margin: 4px 2px; /* 外边距 */
+    cursor: pointer; /* 鼠标指针 */
+    border-radius: 4px; /* 圆角 */
+    transition: background-color 0.3s; /* 背景色过渡效果 */
+}
+
+.cancel-button:hover {
+    background-color: #d2d2d2; /* 悬停时背景颜色 */
 }
\ No newline at end of file