diff --git a/about.html b/about.html
index a4adc2d..f20e663 100644
--- a/about.html
+++ b/about.html
@@ -68,17 +68,23 @@
                     <h1 class="m-0 text-secondary"><span class="text-primary">ARK</span>ALL</h1>
                 </a>
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
-<span class="navbar-toggler-icon"></span>
-</button>
+                    <span class="navbar-toggler-icon"></span>
+                </button>
                 <div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
                     <div class="navbar-nav ml-auto py-0">
-                        <a name="home" href="index.html" class="nav-item nav-link">Home</a>
-                        <!-- <a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a> -->
-                        <!--<a name="bulletin" href="bulletin.html" class="nav-item nav-link">Bulletin</a> -->
-                        <a name="qa" href="qa.html" class="nav-item nav-link">Question and Answer</a>
-                        <a name="useragreement" href="user_agreement.html" class="nav-item nav-link">User Agreement</a>
-                        <a name="about" href="" class="nav-item nav-link">About</a>
-                        <!--<a name="contact" href="" class="nav-item nav-link">Contact</a> -->
+                        <a name="home" class="text-white mb-2" href="index.html"><i
+                                class="fa fa-angle-right mr-2"></i>Home</a>
+                        <a name="tutorial" class="text-white mb-2" href="tutorial.html"><i
+                                class="fa fa-angle-right mr-2"></i>Tutorial</a>
+                        <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i
+                                class="fa fa-angle-right mr-2"></i>User Agreement</a>
+                        <a name="qa" class="text-white mb-2" href="qa.html"><i
+                                class="fa fa-angle-right mr-2"></i>Question
+                            and Answer</a>
+                        <!-- <a name="about" class="text-white mb-2" href="about.html"><i
+                            class="fa fa-angle-right mr-2"></i>About Us</a>-->
+                        <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
+                        <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
                     </div>
                 </div>
             </nav>
@@ -142,10 +148,14 @@
             <div class="col-lg-4 col-md-6 mb-5">
                 <h4 name="quicklinks" class="text-white mb-4">Quick Links</h4>
                 <div class="d-flex flex-column justify-content-start">
-                    <a name="home" class="text-white mb-2" href="index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
-                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i class="fa fa-angle-right mr-2"></i>User Agreement</a>
-                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question and Answer</a>
-                    <a name="about" class="text-white mb-2" href="about.html"><i class="fa fa-angle-right mr-2"></i>About Us</a>
+                    <a name="home" class="text-white mb-2" href="index.html"><i
+                            class="fa fa-angle-right mr-2"></i>Home</a>
+                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i
+                            class="fa fa-angle-right mr-2"></i>User Agreement</a>
+                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question
+                        and Answer</a>
+                    <a name="about" class="text-white mb-2" href="about.html"><i
+                            class="fa fa-angle-right mr-2"></i>About Us</a>
                     <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
                     <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
                 </div>
diff --git a/bulletin.html b/bulletin.html
index c3b1abd..3f6259b 100644
--- a/bulletin.html
+++ b/bulletin.html
@@ -74,8 +74,11 @@
                         <a name="home" href="index.html" class="nav-item nav-link">Home</a>
                         <!-- <a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a> -->
                         <!--<a name="bulletin" href="bulletin.html" class="nav-item nav-link">Bulletin</a> -->
-                        <a name="about" href="" class="nav-item nav-link">About</a>
-                        <a name="contact" href="" class="nav-item nav-link">Contact</a>
+                        <a name="tutorial" href="tutorial.html" class="nav-item nav-link">Tutorial</a>
+                        <a name="qa" href="qa.html" class="nav-item nav-link">Question and Answer</a>
+                        <a name="useragreement" href="user_agreement.html" class="nav-item nav-link">User Agreement</a>
+                        <!--<a name="about" href="about.html" class="nav-item nav-link">About</a>-->
+                        <!--<a name="contact" href="" class="nav-item nav-link">Contact</a> -->
                     </div>
                 </div>
             </nav>
diff --git a/data/img/三-1.JPG b/data/img/三-1.JPG
new file mode 100644
index 0000000..bcaafc3
Binary files /dev/null and b/data/img/三-1.JPG differ
diff --git a/data/img/三-2.JPG b/data/img/三-2.JPG
new file mode 100644
index 0000000..e3f0896
Binary files /dev/null and b/data/img/三-2.JPG differ
diff --git a/data/img/二-1.JPG b/data/img/二-1.JPG
new file mode 100644
index 0000000..2451f2a
Binary files /dev/null and b/data/img/二-1.JPG differ
diff --git a/data/img/二-2.JPG b/data/img/二-2.JPG
new file mode 100644
index 0000000..67d093e
Binary files /dev/null and b/data/img/二-2.JPG differ
diff --git a/data/img/二-3.JPG b/data/img/二-3.JPG
new file mode 100644
index 0000000..c161ccd
Binary files /dev/null and b/data/img/二-3.JPG differ
diff --git a/data/img/登陸.JPG b/data/img/登陸.JPG
new file mode 100644
index 0000000..1446ce4
Binary files /dev/null and b/data/img/登陸.JPG differ
diff --git a/data/language.json b/data/language.json
index 49abde4..2e53661 100644
--- a/data/language.json
+++ b/data/language.json
@@ -106,5 +106,11 @@
         "en":"To register a society account, please see Question and Answer (quesiton no.1) :",
         "zh":"如需註冊社團帳號，請閱常見問題第一點",
         "ch":"如需註册社团帐号，请阅常见问题第一点"
+    },
+    "tutorial":
+    {
+        "en":"Organization account tutorial with graphics",
+        "zh":"組織賬號圖文教學",
+        "ch":"组织账号图文教学"
     }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index e0ba595..5b4a444 100644
--- a/index.html
+++ b/index.html
@@ -76,9 +76,10 @@
                         <a name="home" href="index.html" class="nav-item nav-link">Home</a>
                         <!-- <a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a> -->
                         <!--<a name="bulletin" href="bulletin.html" class="nav-item nav-link">Bulletin</a> -->
+                        <a name="tutorial" href="tutorial.html" class="nav-item nav-link">Tutorial</a>
                         <a name="qa" href="qa.html" class="nav-item nav-link">Question and Answer</a>
                         <a name="useragreement" href="user_agreement.html" class="nav-item nav-link">User Agreement</a>
-                        <a name="about" href="about.html" class="nav-item nav-link">About</a>
+                        <!--<a name="about" href="about.html" class="nav-item nav-link">About</a>-->
                         <!--<a name="contact" href="" class="nav-item nav-link">Contact</a> -->
                     </div>
                 </div>
@@ -202,12 +203,18 @@
             <div class="col-lg-4 col-md-6 mb-5">
                 <h4 name="quicklinks" class="text-white mb-4">Quick Links</h4>
                 <div class="d-flex flex-column justify-content-start">
-                    <a name="home" class="text-white mb-2" href="index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
-                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i class="fa fa-angle-right mr-2"></i>User Agreement</a>
-                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question and Answer</a>
-                    <a name="about" class="text-white mb-2" href="about.html"><i class="fa fa-angle-right mr-2"></i>About Us</a>
-                    <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
-                    <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
+                    <a name="home" class="text-white mb-2" href="index.html"><i
+                        class="fa fa-angle-right mr-2"></i>Home</a>
+                <a name="tutorial" class="text-white mb-2" href="tutorial.html"><i
+                        class="fa fa-angle-right mr-2"></i>Tutorial</a>
+                <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i
+                        class="fa fa-angle-right mr-2"></i>User Agreement</a>
+                <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question
+                    and Answer</a>
+                <!-- <a name="about" class="text-white mb-2" href="about.html"><i
+                        class="fa fa-angle-right mr-2"></i>About Us</a>-->
+                <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
+                <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
                 </div>
             </div>
             <!--
diff --git a/qa.html b/qa.html
index 1b8ff00..0097433 100644
--- a/qa.html
+++ b/qa.html
@@ -75,9 +75,10 @@
                         <a name="home" href="index.html" class="nav-item nav-link">Home</a>
                         <!-- <a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a> -->
                         <!--<a name="bulletin" href="bulletin.html" class="nav-item nav-link">Bulletin</a> -->
+                        <a name="tutorial" href="tutorial.html" class="nav-item nav-link">Tutorial</a>
                         <a name="qa" href="qa.html" class="nav-item nav-link">Question and Answer</a>
                         <a name="useragreement" href="user_agreement.html" class="nav-item nav-link">User Agreement</a>
-                        <a name="about" href="about.html" class="nav-item nav-link">About</a>
+                        <!--<a name="about" href="about.html" class="nav-item nav-link">About</a>-->
                         <!--<a name="contact" href="" class="nav-item nav-link">Contact</a> -->
                     </div>
                 </div>
@@ -142,12 +143,18 @@
             <div class="col-lg-4 col-md-6 mb-5">
                 <h4 name="quicklinks" class="text-white mb-4">Quick Links</h4>
                 <div class="d-flex flex-column justify-content-start">
-                    <a name="home" class="text-white mb-2" href="index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
-                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i class="fa fa-angle-right mr-2"></i>User Agreement</a>
-                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question and Answer</a>
-                    <a name="about" class="text-white mb-2" href="about.html"><i class="fa fa-angle-right mr-2"></i>About Us</a>
-                    <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
-                    <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
+                    <a name="home" class="text-white mb-2" href="index.html"><i
+                        class="fa fa-angle-right mr-2"></i>Home</a>
+                <a name="tutorial" class="text-white mb-2" href="tutorial.html"><i
+                        class="fa fa-angle-right mr-2"></i>Tutorial</a>
+                <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i
+                        class="fa fa-angle-right mr-2"></i>User Agreement</a>
+                <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question
+                    and Answer</a>
+                <!-- <a name="about" class="text-white mb-2" href="about.html"><i
+                        class="fa fa-angle-right mr-2"></i>About Us</a>-->
+                <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
+                <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
                 </div>
             </div>
             <!--
diff --git a/tutorial.html b/tutorial.html
new file mode 100644
index 0000000..235d931
--- /dev/null
+++ b/tutorial.html
@@ -0,0 +1,239 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>ARK ALL - APPs</title>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="Free HTML Templates" name="keywords">
+    <meta content="Free HTML Templates" name="description">
+
+    <link id="icon" href="ark_all_logo.png" rel="icon">
+
+    <link rel="preconnect" href="https://fonts.gstatic_fs.com/">
+    <link href="static_fs/css/css2.css" rel="stylesheet">
+
+    <link href="static_fs/css/all.min.css" rel="stylesheet">
+
+    <link href="static_fs/css/owl.carousel.min.css" rel="stylesheet">
+
+    <link href="static_fs/css/style.css" rel="stylesheet">
+
+    <script src="js/function.js?v=1"></script>
+</head>
+
+<body>
+
+    <div class="container-fluid bg-primary py-3">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 text-center text-lg-left mb-2 mb-lg-0">
+                    <div class="d-inline-flex align-items-center">
+                        <a class="text-white pr-3" href="javascript:set_language('zh')">繁體中文</a>
+                        <span class="text-white">|</span>
+                        <a class="text-white px-3" href="javascript:set_language('ch')">简体中文</a>
+                        <span class="text-white">|</span>
+                        <a class="text-white pl-3" href="javascript:set_language('en')">English</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid position-relative nav-bar p-0">
+        <div class="container-lg position-relative p-0 px-lg-3" style="z-index: 9;">
+            <nav class="navbar navbar-expand-lg bg-white navbar-light py-3 py-lg-0 pl-3 pl-lg-5">
+                <a href="index.html" class="navbar-brand">
+                    <h1 class="m-0 text-secondary"><span class="text-primary">ARK</span>ALL</h1>
+                </a>
+                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
+                    <div class="navbar-nav ml-auto py-0">
+                        <a name="home" href="index.html" class="nav-item nav-link">Home</a>
+                        <!-- <a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a> -->
+                        <!--<a name="bulletin" href="bulletin.html" class="nav-item nav-link">Bulletin</a> -->
+                        <a name="tutorial" href="tutorial.html" class="nav-item nav-link">Tutorial</a>
+                        <a name="qa" href="qa.html" class="nav-item nav-link">Question and Answer</a>
+                        <a name="useragreement" href="user_agreement.html" class="nav-item nav-link">User Agreement</a>
+                        <!--<a name="about" href="about.html" class="nav-item nav-link">About</a>-->
+                        <!--<a name="contact" href="" class="nav-item nav-link">Contact</a> -->
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </div>
+
+
+    <div class="page-header container-fluid bg-secondary pt-2 pt-lg-5 pb-2 mb-5">
+        <div class="container py-5">
+            <div class="row align-items-center py-4">
+                <div class="col-md-6 text-center text-md-left">
+                    <h1 name="tutorial" class="mb-4 mb-md-0 text-white">Quesstion and Answer</h1>
+                </div>
+                <div class="col-md-6 text-center text-md-right">
+                    <div class="d-inline-flex align-items-center">
+                        <a name="home" class="btn text-white" href="index.html">Home</a>
+                        <i class="fas fa-angle-right text-white"></i>
+                        <a name="tutorial" class="btn text-white disabled" href="">Quesstion and Answer</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div class="container-fluid py-2">
+        <div class="container">
+            <h1>登錄社團帳號</h1>
+            <div class="row">
+                <div class="col-lg-4"><a href="./data/img/登陸.JPG">
+                        <img src="./data/img/登陸.JPG" alt="" style="width:100%" />
+                    </a>
+                </div>
+            </div>
+            <h1>詳情編輯</h1>
+            <div class="row">
+                <div class="col-lg-4"><a href="./data/img/二-1.JPG">
+                        <img src="./data/img/二-1.JPG" alt="" style="width:100%" />
+                    </a>
+                </div>
+                <div class="col-lg-4"><a href="./data/img/二-2.JPG">
+                        <img src="./data/img/二-2.JPG" alt="" style="width:100%" />
+                    </a>
+                </div>
+                <div class="col-lg-4"><a href="./data/img/二-3.JPG">
+                        <img src="./data/img/二-3.JPG" alt="" style="width:100%" />
+                    </a>
+                </div>
+            </div>
+            <h1>編輯活動</h1>
+            <div class="row">
+                <div class="col-lg-4"><a href="./data/img/三-1.JPG">
+                        <img src="./data/img/三-1.JPG" alt="" style="width:100%" />
+                    </a>
+                </div>
+                <div class="col-lg-4"><a href="./data/img/三-2.JPG">
+                        <img src="./data/img/三-2.JPG" alt="" style="width:100%" />
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+    <div class="container-fluid bg-primary text-white mt-5 pt-5 px-sm-3 px-md-5">
+        <div class="row pt-5">
+            <div class="col-lg-4 col-md-6 mb-5">
+                <a href="">
+                    <h1 class="text-secondary mb-3"><span class="text-white">ARK</span>ALL</h1>
+                </a>
+                <p name="introduction">Integration of all information. Introduce what these are..</p>
+                <!--
+                <div class="d-flex justify-content-start mt-4">
+                    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-twitter"></i></a>
+                    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-facebook-f"></i></a>
+                    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-linkedin-in"></i></a>
+                    <a class="btn btn-outline-light rounded-circle text-center mr-2 px-0" style="width: 38px; height: 38px;" href="#"><i class="fab fa-instagram"></i></a>
+                </div>
+                -->
+            </div>
+            <div class="col-lg-4 col-md-6 mb-5">
+                <h4 name="contact" class="text-white mb-4">Get In Touch</h4>
+                <i class="fa fa-map-marker-alt mr-2"></i>
+                <p name="plice">University of Macau Avenida da Universidade Taipa, Macau, China</p>
+                <!-- <p><i class="fa fa-phone-alt mr-2"></i>+853 0000 0000</p> -->
+                <p><i class="fa fa-envelope mr-2"></i>umacark@gmail.com</p>
+            </div>
+            <div class="col-lg-4 col-md-6 mb-5">
+                <h4 name="quicklinks" class="text-white mb-4">Quick Links</h4>
+                <div class="d-flex flex-column justify-content-start">
+                    <a name="home" class="text-white mb-2" href="index.html"><i
+                            class="fa fa-angle-right mr-2"></i>Home</a>
+                    <a name="tutorial" class="text-white mb-2" href="tutorial.html"><i
+                            class="fa fa-angle-right mr-2"></i>Tutorial</a>
+                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i
+                            class="fa fa-angle-right mr-2"></i>User Agreement</a>
+                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question
+                        and Answer</a>
+                    <!-- <a name="about" class="text-white mb-2" href="about.html"><i
+                            class="fa fa-angle-right mr-2"></i>About Us</a>-->
+                    <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
+                    <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
+                </div>
+            </div>
+            <!--
+            <div class="col-lg-3 col-md-6 mb-5">
+                <h4 name="newsletter" class="text-white mb-4">Newsletter</h4>
+                <form action="">
+                    <div class="form-group">
+                        <input type="text" class="form-control border-0" placeholder="Your ID" required="required">
+                    </div>
+                    <div class="form-group">
+                        <input type="password" class="form-control border-0" placeholder="Your Password" required="required">
+                    </div>
+                    <div>
+                        <button name="submit" class="btn btn-lg btn-secondary btn-block border-0" type="submit">Submit Now</button>
+                    </div>
+                </form>
+            </div>
+            -->
+        </div>
+    </div>
+    <div class="container-fluid bg-dark text-white py-5 px-sm-5 px-md-5">
+        <p name="copyright" class="m-0 text-center text-white">
+
+
+        </p>
+    </div>
+
+
+
+
+
+</body>
+
+</html>
+
+<script data-cfasync="false" src="static_fs/js/email-decode.min.js"></script>
+<script src="static_fs/js/jquery-3.4.1.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/bootstrap.bundle.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/easing.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/waypoints.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/counterup.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/owl.carousel.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+
+<script src="static_fs/js/jqBootstrapValidation.min.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/contact.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+
+<script src="static_fs/js/main.js" type="02df5cf15e95243d2cd3d2f0-text/javascript"></script>
+<script src="static_fs/js/rocket-loader.min.js" data-cf-settings="02df5cf15e95243d2cd3d2f0-|49" defer=""></script>
+
+<script>
+    Printf("begin");
+
+    function set_language(lang) {
+        var web_language_path = "/data/language.json?v=" + Date.now();
+        var web_language_data = Get_Html(web_language_path);
+        var web_language = Get_Json(web_language_data);
+        for (var key in web_language) {
+            var langdata = web_language[key][lang];
+            if (langdata == null | langdata == "") {
+                langdata = web_language[key][en];
+            }
+            var objname = document.getElementsByName(key)
+            if (objname) {
+                for (var i = 0; i < objname.length; i++) {
+                    objname[i].innerHTML = langdata;
+                }
+
+            }
+
+
+        }
+    }
+
+    set_language("zh");
+</script>
\ No newline at end of file
diff --git a/user_agreement.html b/user_agreement.html
index 27b7d01..199e4bc 100644
--- a/user_agreement.html
+++ b/user_agreement.html
@@ -68,16 +68,17 @@
                     <h1 class="m-0 text-secondary"><span class="text-primary">ARK</span>ALL</h1>
                 </a>
                 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
-<span class="navbar-toggler-icon"></span>
-</button>
+                    <span class="navbar-toggler-icon"></span>
+                </button>
                 <div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
                     <div class="navbar-nav ml-auto py-0">
                         <a name="home" href="index.html" class="nav-item nav-link">Home</a>
                         <!-- <a name="activity" href="Activity.html" class="nav-item nav-link">Activity</a> -->
                         <!--<a name="bulletin" href="bulletin.html" class="nav-item nav-link">Bulletin</a> -->
+                        <a name="tutorial" href="tutorial.html" class="nav-item nav-link">Tutorial</a>
                         <a name="qa" href="qa.html" class="nav-item nav-link">Question and Answer</a>
                         <a name="useragreement" href="user_agreement.html" class="nav-item nav-link">User Agreement</a>
-                        <a name="about" href="about.html" class="nav-item nav-link">About</a>
+                        <!--<a name="about" href="about.html" class="nav-item nav-link">About</a>-->
                         <!--<a name="contact" href="" class="nav-item nav-link">Contact</a> -->
                     </div>
                 </div>
@@ -142,10 +143,16 @@
             <div class="col-lg-4 col-md-6 mb-5">
                 <h4 name="quicklinks" class="text-white mb-4">Quick Links</h4>
                 <div class="d-flex flex-column justify-content-start">
-                    <a name="home" class="text-white mb-2" href="index.html"><i class="fa fa-angle-right mr-2"></i>Home</a>
-                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i class="fa fa-angle-right mr-2"></i>User Agreement</a>
-                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question and Answer</a>
-                    <a name="about" class="text-white mb-2" href="about.html"><i class="fa fa-angle-right mr-2"></i>About Us</a>
+                    <a name="home" class="text-white mb-2" href="index.html"><i
+                            class="fa fa-angle-right mr-2"></i>Home</a>
+                    <a name="tutorial" class="text-white mb-2" href="tutorial.html"><i
+                            class="fa fa-angle-right mr-2"></i>Tutorial</a>
+                    <a name="useragreement" class="text-white mb-2" href="user_agreement.html"><i
+                            class="fa fa-angle-right mr-2"></i>User Agreement</a>
+                    <a name="qa" class="text-white mb-2" href="qa.html"><i class="fa fa-angle-right mr-2"></i>Question
+                        and Answer</a>
+                    <!-- <a name="about" class="text-white mb-2" href="about.html"><i
+                        class="fa fa-angle-right mr-2"></i>About Us</a>-->
                     <!-- <a name="pricing" class="text-white mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Pricing</a> -->
                     <!-- <a name="contact" class="text-white" href="#"><i class="fa fa-angle-right mr-2"></i>Contact Us</a> -->
                 </div>