diff --git a/docs/GNU Free Documentation License.txt b/docs/GNU Free Documentation License.txt
new file mode 100644
index 0000000..bf128be
--- /dev/null
+++ b/docs/GNU Free Documentation License.txt	
@@ -0,0 +1,451 @@
+
+                GNU Free Documentation License
+                 Version 1.3, 3 November 2008
+
+
+ Copyright (C) 2000, 2001, 2002, 2007, 2008 Free Software Foundation, Inc.
+     <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+0. PREAMBLE
+
+The purpose of this License is to make a manual, textbook, or other
+functional and useful document "free" in the sense of freedom: to
+assure everyone the effective freedom to copy and redistribute it,
+with or without modifying it, either commercially or noncommercially.
+Secondarily, this License preserves for the author and publisher a way
+to get credit for their work, while not being considered responsible
+for modifications made by others.
+
+This License is a kind of "copyleft", which means that derivative
+works of the document must themselves be free in the same sense.  It
+complements the GNU General Public License, which is a copyleft
+license designed for free software.
+
+We have designed this License in order to use it for manuals for free
+software, because free software needs free documentation: a free
+program should come with manuals providing the same freedoms that the
+software does.  But this License is not limited to software manuals;
+it can be used for any textual work, regardless of subject matter or
+whether it is published as a printed book.  We recommend this License
+principally for works whose purpose is instruction or reference.
+
+
+1. APPLICABILITY AND DEFINITIONS
+
+This License applies to any manual or other work, in any medium, that
+contains a notice placed by the copyright holder saying it can be
+distributed under the terms of this License.  Such a notice grants a
+world-wide, royalty-free license, unlimited in duration, to use that
+work under the conditions stated herein.  The "Document", below,
+refers to any such manual or work.  Any member of the public is a
+licensee, and is addressed as "you".  You accept the license if you
+copy, modify or distribute the work in a way requiring permission
+under copyright law.
+
+A "Modified Version" of the Document means any work containing the
+Document or a portion of it, either copied verbatim, or with
+modifications and/or translated into another language.
+
+A "Secondary Section" is a named appendix or a front-matter section of
+the Document that deals exclusively with the relationship of the
+publishers or authors of the Document to the Document's overall
+subject (or to related matters) and contains nothing that could fall
+directly within that overall subject.  (Thus, if the Document is in
+part a textbook of mathematics, a Secondary Section may not explain
+any mathematics.)  The relationship could be a matter of historical
+connection with the subject or with related matters, or of legal,
+commercial, philosophical, ethical or political position regarding
+them.
+
+The "Invariant Sections" are certain Secondary Sections whose titles
+are designated, as being those of Invariant Sections, in the notice
+that says that the Document is released under this License.  If a
+section does not fit the above definition of Secondary then it is not
+allowed to be designated as Invariant.  The Document may contain zero
+Invariant Sections.  If the Document does not identify any Invariant
+Sections then there are none.
+
+The "Cover Texts" are certain short passages of text that are listed,
+as Front-Cover Texts or Back-Cover Texts, in the notice that says that
+the Document is released under this License.  A Front-Cover Text may
+be at most 5 words, and a Back-Cover Text may be at most 25 words.
+
+A "Transparent" copy of the Document means a machine-readable copy,
+represented in a format whose specification is available to the
+general public, that is suitable for revising the document
+straightforwardly with generic text editors or (for images composed of
+pixels) generic paint programs or (for drawings) some widely available
+drawing editor, and that is suitable for input to text formatters or
+for automatic translation to a variety of formats suitable for input
+to text formatters.  A copy made in an otherwise Transparent file
+format whose markup, or absence of markup, has been arranged to thwart
+or discourage subsequent modification by readers is not Transparent.
+An image format is not Transparent if used for any substantial amount
+of text.  A copy that is not "Transparent" is called "Opaque".
+
+Examples of suitable formats for Transparent copies include plain
+ASCII without markup, Texinfo input format, LaTeX input format, SGML
+or XML using a publicly available DTD, and standard-conforming simple
+HTML, PostScript or PDF designed for human modification.  Examples of
+transparent image formats include PNG, XCF and JPG.  Opaque formats
+include proprietary formats that can be read and edited only by
+proprietary word processors, SGML or XML for which the DTD and/or
+processing tools are not generally available, and the
+machine-generated HTML, PostScript or PDF produced by some word
+processors for output purposes only.
+
+The "Title Page" means, for a printed book, the title page itself,
+plus such following pages as are needed to hold, legibly, the material
+this License requires to appear in the title page.  For works in
+formats which do not have any title page as such, "Title Page" means
+the text near the most prominent appearance of the work's title,
+preceding the beginning of the body of the text.
+
+The "publisher" means any person or entity that distributes copies of
+the Document to the public.
+
+A section "Entitled XYZ" means a named subunit of the Document whose
+title either is precisely XYZ or contains XYZ in parentheses following
+text that translates XYZ in another language.  (Here XYZ stands for a
+specific section name mentioned below, such as "Acknowledgements",
+"Dedications", "Endorsements", or "History".)  To "Preserve the Title"
+of such a section when you modify the Document means that it remains a
+section "Entitled XYZ" according to this definition.
+
+The Document may include Warranty Disclaimers next to the notice which
+states that this License applies to the Document.  These Warranty
+Disclaimers are considered to be included by reference in this
+License, but only as regards disclaiming warranties: any other
+implication that these Warranty Disclaimers may have is void and has
+no effect on the meaning of this License.
+
+2. VERBATIM COPYING
+
+You may copy and distribute the Document in any medium, either
+commercially or noncommercially, provided that this License, the
+copyright notices, and the license notice saying this License applies
+to the Document are reproduced in all copies, and that you add no
+other conditions whatsoever to those of this License.  You may not use
+technical measures to obstruct or control the reading or further
+copying of the copies you make or distribute.  However, you may accept
+compensation in exchange for copies.  If you distribute a large enough
+number of copies you must also follow the conditions in section 3.
+
+You may also lend copies, under the same conditions stated above, and
+you may publicly display copies.
+
+
+3. COPYING IN QUANTITY
+
+If you publish printed copies (or copies in media that commonly have
+printed covers) of the Document, numbering more than 100, and the
+Document's license notice requires Cover Texts, you must enclose the
+copies in covers that carry, clearly and legibly, all these Cover
+Texts: Front-Cover Texts on the front cover, and Back-Cover Texts on
+the back cover.  Both covers must also clearly and legibly identify
+you as the publisher of these copies.  The front cover must present
+the full title with all words of the title equally prominent and
+visible.  You may add other material on the covers in addition.
+Copying with changes limited to the covers, as long as they preserve
+the title of the Document and satisfy these conditions, can be treated
+as verbatim copying in other respects.
+
+If the required texts for either cover are too voluminous to fit
+legibly, you should put the first ones listed (as many as fit
+reasonably) on the actual cover, and continue the rest onto adjacent
+pages.
+
+If you publish or distribute Opaque copies of the Document numbering
+more than 100, you must either include a machine-readable Transparent
+copy along with each Opaque copy, or state in or with each Opaque copy
+a computer-network location from which the general network-using
+public has access to download using public-standard network protocols
+a complete Transparent copy of the Document, free of added material.
+If you use the latter option, you must take reasonably prudent steps,
+when you begin distribution of Opaque copies in quantity, to ensure
+that this Transparent copy will remain thus accessible at the stated
+location until at least one year after the last time you distribute an
+Opaque copy (directly or through your agents or retailers) of that
+edition to the public.
+
+It is requested, but not required, that you contact the authors of the
+Document well before redistributing any large number of copies, to
+give them a chance to provide you with an updated version of the
+Document.
+
+
+4. MODIFICATIONS
+
+You may copy and distribute a Modified Version of the Document under
+the conditions of sections 2 and 3 above, provided that you release
+the Modified Version under precisely this License, with the Modified
+Version filling the role of the Document, thus licensing distribution
+and modification of the Modified Version to whoever possesses a copy
+of it.  In addition, you must do these things in the Modified Version:
+
+A. Use in the Title Page (and on the covers, if any) a title distinct
+   from that of the Document, and from those of previous versions
+   (which should, if there were any, be listed in the History section
+   of the Document).  You may use the same title as a previous version
+   if the original publisher of that version gives permission.
+B. List on the Title Page, as authors, one or more persons or entities
+   responsible for authorship of the modifications in the Modified
+   Version, together with at least five of the principal authors of the
+   Document (all of its principal authors, if it has fewer than five),
+   unless they release you from this requirement.
+C. State on the Title page the name of the publisher of the
+   Modified Version, as the publisher.
+D. Preserve all the copyright notices of the Document.
+E. Add an appropriate copyright notice for your modifications
+   adjacent to the other copyright notices.
+F. Include, immediately after the copyright notices, a license notice
+   giving the public permission to use the Modified Version under the
+   terms of this License, in the form shown in the Addendum below.
+G. Preserve in that license notice the full lists of Invariant Sections
+   and required Cover Texts given in the Document's license notice.
+H. Include an unaltered copy of this License.
+I. Preserve the section Entitled "History", Preserve its Title, and add
+   to it an item stating at least the title, year, new authors, and
+   publisher of the Modified Version as given on the Title Page.  If
+   there is no section Entitled "History" in the Document, create one
+   stating the title, year, authors, and publisher of the Document as
+   given on its Title Page, then add an item describing the Modified
+   Version as stated in the previous sentence.
+J. Preserve the network location, if any, given in the Document for
+   public access to a Transparent copy of the Document, and likewise
+   the network locations given in the Document for previous versions
+   it was based on.  These may be placed in the "History" section.
+   You may omit a network location for a work that was published at
+   least four years before the Document itself, or if the original
+   publisher of the version it refers to gives permission.
+K. For any section Entitled "Acknowledgements" or "Dedications",
+   Preserve the Title of the section, and preserve in the section all
+   the substance and tone of each of the contributor acknowledgements
+   and/or dedications given therein.
+L. Preserve all the Invariant Sections of the Document,
+   unaltered in their text and in their titles.  Section numbers
+   or the equivalent are not considered part of the section titles.
+M. Delete any section Entitled "Endorsements".  Such a section
+   may not be included in the Modified Version.
+N. Do not retitle any existing section to be Entitled "Endorsements"
+   or to conflict in title with any Invariant Section.
+O. Preserve any Warranty Disclaimers.
+
+If the Modified Version includes new front-matter sections or
+appendices that qualify as Secondary Sections and contain no material
+copied from the Document, you may at your option designate some or all
+of these sections as invariant.  To do this, add their titles to the
+list of Invariant Sections in the Modified Version's license notice.
+These titles must be distinct from any other section titles.
+
+You may add a section Entitled "Endorsements", provided it contains
+nothing but endorsements of your Modified Version by various
+parties--for example, statements of peer review or that the text has
+been approved by an organization as the authoritative definition of a
+standard.
+
+You may add a passage of up to five words as a Front-Cover Text, and a
+passage of up to 25 words as a Back-Cover Text, to the end of the list
+of Cover Texts in the Modified Version.  Only one passage of
+Front-Cover Text and one of Back-Cover Text may be added by (or
+through arrangements made by) any one entity.  If the Document already
+includes a cover text for the same cover, previously added by you or
+by arrangement made by the same entity you are acting on behalf of,
+you may not add another; but you may replace the old one, on explicit
+permission from the previous publisher that added the old one.
+
+The author(s) and publisher(s) of the Document do not by this License
+give permission to use their names for publicity for or to assert or
+imply endorsement of any Modified Version.
+
+
+5. COMBINING DOCUMENTS
+
+You may combine the Document with other documents released under this
+License, under the terms defined in section 4 above for modified
+versions, provided that you include in the combination all of the
+Invariant Sections of all of the original documents, unmodified, and
+list them all as Invariant Sections of your combined work in its
+license notice, and that you preserve all their Warranty Disclaimers.
+
+The combined work need only contain one copy of this License, and
+multiple identical Invariant Sections may be replaced with a single
+copy.  If there are multiple Invariant Sections with the same name but
+different contents, make the title of each such section unique by
+adding at the end of it, in parentheses, the name of the original
+author or publisher of that section if known, or else a unique number.
+Make the same adjustment to the section titles in the list of
+Invariant Sections in the license notice of the combined work.
+
+In the combination, you must combine any sections Entitled "History"
+in the various original documents, forming one section Entitled
+"History"; likewise combine any sections Entitled "Acknowledgements",
+and any sections Entitled "Dedications".  You must delete all sections
+Entitled "Endorsements".
+
+
+6. COLLECTIONS OF DOCUMENTS
+
+You may make a collection consisting of the Document and other
+documents released under this License, and replace the individual
+copies of this License in the various documents with a single copy
+that is included in the collection, provided that you follow the rules
+of this License for verbatim copying of each of the documents in all
+other respects.
+
+You may extract a single document from such a collection, and
+distribute it individually under this License, provided you insert a
+copy of this License into the extracted document, and follow this
+License in all other respects regarding verbatim copying of that
+document.
+
+
+7. AGGREGATION WITH INDEPENDENT WORKS
+
+A compilation of the Document or its derivatives with other separate
+and independent documents or works, in or on a volume of a storage or
+distribution medium, is called an "aggregate" if the copyright
+resulting from the compilation is not used to limit the legal rights
+of the compilation's users beyond what the individual works permit.
+When the Document is included in an aggregate, this License does not
+apply to the other works in the aggregate which are not themselves
+derivative works of the Document.
+
+If the Cover Text requirement of section 3 is applicable to these
+copies of the Document, then if the Document is less than one half of
+the entire aggregate, the Document's Cover Texts may be placed on
+covers that bracket the Document within the aggregate, or the
+electronic equivalent of covers if the Document is in electronic form.
+Otherwise they must appear on printed covers that bracket the whole
+aggregate.
+
+
+8. TRANSLATION
+
+Translation is considered a kind of modification, so you may
+distribute translations of the Document under the terms of section 4.
+Replacing Invariant Sections with translations requires special
+permission from their copyright holders, but you may include
+translations of some or all Invariant Sections in addition to the
+original versions of these Invariant Sections.  You may include a
+translation of this License, and all the license notices in the
+Document, and any Warranty Disclaimers, provided that you also include
+the original English version of this License and the original versions
+of those notices and disclaimers.  In case of a disagreement between
+the translation and the original version of this License or a notice
+or disclaimer, the original version will prevail.
+
+If a section in the Document is Entitled "Acknowledgements",
+"Dedications", or "History", the requirement (section 4) to Preserve
+its Title (section 1) will typically require changing the actual
+title.
+
+
+9. TERMINATION
+
+You may not copy, modify, sublicense, or distribute the Document
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense, or distribute it is void, and
+will automatically terminate your rights under this License.
+
+However, if you cease all violation of this License, then your license
+from a particular copyright holder is reinstated (a) provisionally,
+unless and until the copyright holder explicitly and finally
+terminates your license, and (b) permanently, if the copyright holder
+fails to notify you of the violation by some reasonable means prior to
+60 days after the cessation.
+
+Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, receipt of a copy of some or all of the same material does
+not give you any rights to use it.
+
+
+10. FUTURE REVISIONS OF THIS LICENSE
+
+The Free Software Foundation may publish new, revised versions of the
+GNU Free Documentation License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in
+detail to address new problems or concerns.  See
+https://www.gnu.org/licenses/.
+
+Each version of the License is given a distinguishing version number.
+If the Document specifies that a particular numbered version of this
+License "or any later version" applies to it, you have the option of
+following the terms and conditions either of that specified version or
+of any later version that has been published (not as a draft) by the
+Free Software Foundation.  If the Document does not specify a version
+number of this License, you may choose any version ever published (not
+as a draft) by the Free Software Foundation.  If the Document
+specifies that a proxy can decide which future versions of this
+License can be used, that proxy's public statement of acceptance of a
+version permanently authorizes you to choose that version for the
+Document.
+
+11. RELICENSING
+
+"Massive Multiauthor Collaboration Site" (or "MMC Site") means any
+World Wide Web server that publishes copyrightable works and also
+provides prominent facilities for anybody to edit those works.  A
+public wiki that anybody can edit is an example of such a server.  A
+"Massive Multiauthor Collaboration" (or "MMC") contained in the site
+means any set of copyrightable works thus published on the MMC site.
+
+"CC-BY-SA" means the Creative Commons Attribution-Share Alike 3.0 
+license published by Creative Commons Corporation, a not-for-profit 
+corporation with a principal place of business in San Francisco, 
+California, as well as future copyleft versions of that license 
+published by that same organization.
+
+"Incorporate" means to publish or republish a Document, in whole or in 
+part, as part of another Document.
+
+An MMC is "eligible for relicensing" if it is licensed under this 
+License, and if all works that were first published under this License 
+somewhere other than this MMC, and subsequently incorporated in whole or 
+in part into the MMC, (1) had no cover texts or invariant sections, and 
+(2) were thus incorporated prior to November 1, 2008.
+
+The operator of an MMC Site may republish an MMC contained in the site
+under CC-BY-SA on the same site at any time before August 1, 2009,
+provided the MMC is eligible for relicensing.
+
+
+ADDENDUM: How to use this License for your documents
+
+To use this License in a document you have written, include a copy of
+the License in the document and put the following copyright and
+license notices just after the title page:
+
+    Copyright (c)  YEAR  YOUR NAME.
+    Permission is granted to copy, distribute and/or modify this document
+    under the terms of the GNU Free Documentation License, Version 1.3
+    or any later version published by the Free Software Foundation;
+    with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
+    A copy of the license is included in the section entitled "GNU
+    Free Documentation License".
+
+If you have Invariant Sections, Front-Cover Texts and Back-Cover Texts,
+replace the "with...Texts." line with this:
+
+    with the Invariant Sections being LIST THEIR TITLES, with the
+    Front-Cover Texts being LIST, and with the Back-Cover Texts being LIST.
+
+If you have Invariant Sections without Cover Texts, or some other
+combination of the three, merge those two alternatives to suit the
+situation.
+
+If your document contains nontrivial examples of program code, we
+recommend releasing these examples in parallel under your choice of
+free software license, such as the GNU General Public License,
+to permit their use in free software.
diff --git a/docs/dom-i18n.min.js b/docs/dom-i18n.min.js
new file mode 100644
index 0000000..990f18e
--- /dev/null
+++ b/docs/dom-i18n.min.js
@@ -0,0 +1 @@
+!function(a,b){"use strict";"function"==typeof define&&define.amd?define([],function(){return a.domI18n=b()}):"object"==typeof exports?module.exports=b():a.domI18n=b()}(this,function(){"use strict";return function(a){function b(a){return a||(a=window.navigator.languages?window.navigator.languages[0]:window.navigator.language||window.navigator.userLanguage),-1===q.indexOf(a)&&(r&&console.warn(a+" is not available on the list of languages provided"),a=a.indexOf("-")?a.split("-")[0]:a),-1===q.indexOf(a)&&(r&&console.error(a+" is not compatible with any language provided"),a=p),a}function c(a){v=b(a),l()}function d(){u={}}function e(a){var b=a.getAttribute("data-dom-i18n-id");return b&&u&&u[b]}function f(a,b){var c="i18n"+Date.now()+1e3*Math.random();a.setAttribute("data-dom-i18n-id",c),u[c]=b}function g(a){return u&&u[a.getAttribute("data-dom-i18n-id")]}function h(a,b){var c={},d=a.firstElementChild,e=!d&&a[b].split(o);return q.forEach(function(b,f){var g;d?(g=a.children[f],g&&g.cloneNode&&(c[b]=g.cloneNode(!0))):(g=e[f],g&&(c[b]=String(g)))}),c}function i(a){var b,c,d=a.getAttribute(t),i=null!==a.getAttribute(s),k=d?d:"textContent";!i&&e(a)?b=g(a):(b=h(a,k),i||f(a,b)),c=b[v],"string"==typeof c?a[k]=c:"object"==typeof c&&j(a,c)}function j(a,b){k(a),a.appendChild(b)}function k(a){for(;a.lastChild;)a.removeChild(a.lastChild)}function l(){for(var a="string"==typeof n||n instanceof String?m.querySelectorAll(n):n,b=0;b<a.length;++b)i(a[b])}a=a||{};var m=a.rootElement||window.document,n=a.selector||"[data-translatable]",o=a.separator||" // ",p=a.defaultLanguage||"en",q=a.languages||["en"],r=void 0!==a.enableLog?a.enableLog:!0,s="data-no-cache",t="data-translatable-attr",u={},v=b(a.currentLanguage);return l(n),{changeLanguage:c,clearCachedElements:d}}});
\ No newline at end of file
diff --git a/docs/img/logo_white.png b/docs/img/logo_white.png
new file mode 100644
index 0000000..1ace335
Binary files /dev/null and b/docs/img/logo_white.png differ
diff --git a/docs/img/preview-mobile.png b/docs/img/preview-mobile.png
new file mode 100644
index 0000000..603f155
Binary files /dev/null and b/docs/img/preview-mobile.png differ
diff --git a/docs/img/preview-mobile.psd b/docs/img/preview-mobile.psd
new file mode 100644
index 0000000..28c6acb
Binary files /dev/null and b/docs/img/preview-mobile.psd differ
diff --git a/docs/img/preview-pc.png b/docs/img/preview-pc.png
new file mode 100644
index 0000000..ed74a17
Binary files /dev/null and b/docs/img/preview-pc.png differ
diff --git a/docs/index.html b/docs/index.html
index 2a57cd8..856743c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,128 +1,116 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
   <head>
     <meta charset="utf-8">
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
-    <meta content="Reverse Proxy, Cluster, Gateway, Go, Homelab, Network Tools" name="keywords">
-    <meta content="A reverse proxy server and cluster network gateway for noobs" name="description">
+    <meta content="Reverse Proxy, Open Source, Aroz, Go, OS, NAS, Cloud" name="keywords">
+    <meta content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox" name="description">
     <meta name="author" content="tobychui">
 
     <!-- HTML Meta Tags -->
-    <title>Reverse Proxy Server | Zoraxy</title>
-    <meta name="description" content="A reverse proxy server and cluster network gateway for noobs">
+    <title>Homelab Gateway | Zoraxy</title>
+    <meta name="description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
 
     <!-- Facebook Meta Tags -->
     <meta property="og:url" content="https://zoraxy.aroz.org/">
     <meta property="og:type" content="website">
-    <meta property="og:title" content="Cluster Proxy Gateway | Zoraxy">
-    <meta property="og:description" content="A reverse proxy server and cluster network gateway for noobs">
+    <meta property="og:title" content="Hello Zoraxy">
+    <meta property="og:description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
     <meta property="og:image" content="https://zoraxy.aroz.org/img/og.png">
 
     <!-- Twitter Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta property="twitter:domain" content="aroz.org">
+    <meta property="twitter:domain" content="os.aroz.org">
     <meta property="twitter:url" content="https://zoraxy.aroz.org/">
-    <meta name="twitter:title" content="Cluster Proxy Gateway | Zoraxy">
-    <meta name="twitter:description" content="A reverse proxy server and cluster network gateway for noobs">
+    <meta name="twitter:title" content="Hello Zoraxy">
+    <meta name="twitter:description" content="Simplify your self-hosted services with Zoraxy, the ultimate homelab networking toolbox">
     <meta name="twitter:image" content="https://zoraxy.aroz.org/img/og.png">
 
+    <!-- JavaScript Libs-->
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
+    <script src="dom-i18n.min.js"></script>
+    <link href="main.css" rel="stylesheet">
+    <script src="main.js" defer></script>
+
+    <!-- Css stuffs-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.js" integrity="sha512-gnoBksrDbaMnlE0rhhkcx3iwzvgBGz6mOEj4/Y5ZY09n55dYddx6+WYc72A55qEesV8VX2iMomteIwobeGK1BQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.3/semantic.min.css" integrity="sha512-3quBdRGJyLy79hzhDDcBzANW+mVqPctrGCfIPosHQtMKb3rKsCxfyslzwlz2wj1dT8A7UX+sEvDjaUv+WExQrA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
     <!-- Favicons -->
-    <link href="favicon.png" rel="icon">
+    <link href="img/favicon.png" rel="icon">
+    <link href="img/apple-touch-icon.png" rel="apple-touch-icon">
 
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@100;300;400;600;700;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400&display=swap" rel="stylesheet">
 
-    <!-- Main Stylesheet File -->
-    <link href="style.css" rel="stylesheet">
-    <script
-      src="https://code.jquery.com/jquery-3.7.0.min.js"
-      integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
-      crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js" integrity="sha512-5cguXwRllb+6bcc2pogwIeQmQPXEzn2ddsqAexIBhh7FO1z5Hkek1J9mrK2+rmZCTU6b6pERxI7acnp1MpAg4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" integrity="sha512-n//BDM4vMPvyca4bJjZPDh7hlqsQ7hqbP9RH18GF2hTXBY5amBwM2501M0GPiwCU/v9Tor2m13GOTFjk00tkQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <style>
-      p,a,div,span,h1,h2,h3,h4,h5,h6{
-        font-family: 'Source Sans Pro', sans-serif !important;
-        color: #404040;
-      }
-    </style>
+    <!-- AOS.js-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js" integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   </head>
   <body>
-    <div class="main section">
-      <div class="left-menu">
-        <div class="iconWrapper">
-          <a href="index.html"><img class="ui fluid image" src="img/icon.png"></a>
-        </div>
-        <a href="#home" class="menu-item active" align="center">
-          <img src="img/icons/home.svg">
-        </a>
-        <a href="#features" class="menu-item" align="center">
-          <img src="img/icons/awesome.svg">
-        </a>
-        <a href="#screenshots" class="menu-item" align="center">
-          <img src="img/icons/screenshots.svg">
-        </a>
-        <a href="#plugins" class="menu-item" align="center">
-          <img src="img/icons/plugin.svg">
-        </a>
-        <a href="#source" class="menu-item" align="center">
-          <img src="img/icons/code.svg">
-        </a>
-      </div>
-      <div class="right-content">
-        <!-- Hero Banner Section -->
-        <div class="headbanner"></div>
-        <div id="home" class="herotext">
-          <div class="ui basic segment">
-            <div class="bannerHeaderWrapper">
-              <h1 class="bannerHeader">Zoraxy</h1>
-			  <div class="ui divider"></div><br>
-              <p class="bannerSubheader">Beyond Reverse Proxy: Your Ultimate Homelab Network Tool</p>
+    <div id="backToTopBtn" class="ui big icon button" onclick="backToTop();">
+       <i class="ui arrow up icon"></i>
+    </div>
+    <button id="rwdmenubtn" class="ui black big icon button"><i class="ui bars icon"></i></button>
+    <div id="mainmenu" class="ui segment" style="background: transparent !important;">
+        <div class="ui container">
+            <div class="ui small stackable secondary menu">
+                <div class="item">
+                    <img class="ui tiny image" src="img/logo.png">
+                </div>
+                <a class="item" href="#mainmenu" i18n>
+                    Home // 主頁
+                </a>
+                <a class="item" href="#about" i18n>
+                    About Zoraxy // 關於 Zoraxy
+                </a>
+                <a class="item" href="#features" i18n>
+                    Screenshots // 系統截圖
+                </a>
+                <a class="item" href="#techspec" i18n>
+                    Videos // 介紹影片
+                </a>
+                <a class="item" href="#download" i18n>
+                    Download // 下載
+                </a>
+                <a class="item" href="#learnmore" i18n>
+                    Learn More // 了解更多
+                </a>
+                <a class="right floated item">
+                    <div class="ui small selection dropdown">
+                        <input type="hidden" id="language">
+                        <div class="default text" style="color: #6cacff;"><i class="language icon"></i> Default</div>
+                        <i class="dropdown icon"></i>
+                        <div class="menu">
+                            <div class="item" data-value="en">English</div>
+                            <div class="item" data-value="zh">中文（正體）</div>
+                        </div>
+                    </div>
+                </a>
             </div>
-            <br><br>
-            <a class="ui basic big button" style="background-color: white;" href="#features"><i class="ui blue arrow down icon"></i> Learn More</a>
-            <br><br>
-            <table class="ui very basic collapsing unstackable celled table">
-              <thead>
-                <tr><th colspan="2">Quick Access</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <h4 class="ui image header">
-                    <i class="ui download icon"></i>
-                    <div class="content">
-                      Download
-                      <div class="sub header">Prebuild Binary
-                    </div>
-                  </div>
-                </h4></td>
-                <td>
-                  <a href="https://github.com/tobychui/zoraxy/releases" target="_blank">Open <i class="ui external icon"></i></a>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  <h4 class="ui image header">
-                    <i class="ui github icon"></i>
-                    <div class="content">
-                      Github
-                      <div class="sub header">Source Code
-                    </div>
-                  </div>
-                </h4></td>
-                <td>
-                  <a href="https://github.com/tobychui/zoraxy" target="_blank">Open <i class="ui external icon"></i></a>
-                </td>
-              </tr>
-            </table>
-          </div>
-		  
-		  <div id="wavesWrapper">
+        </div>
+    </div>
+    <div id="slideshowBanner">
+        <div class="title">
+            <h1 i18n>Zoraxy</h1>
+            <div class="ui divider" style="border-top: 1px solid rgba(255,255,255,0.5); "></div>
+            <p i18n>The ultimate homelab networking toolbox for self-hosted services
+                // 簡化自家伺服器部署之事，初學者居家網絡必備良器
+            </p>
+            <a href="https://github.com/tobychui/zoraxy/releases" class="ui basic white button" target="_blank"><i style="color:white;" class="ui download icon"></i><span i18n>Download // 立即下載</span></a>
+            <a href="https://github.com/tobychui/zoraxy" class="ui basic white button" target="_blank"><i style="color: white;" class="ui code icon"></i><span i18n>Source Code // 查看原始碼</span></a>
+            
+            <div class="scrolldownTips">
+                <img class="ui tiny image" src="img/scrolldown.webp"><br>
+                <span i18n>Scroll down to learn more // 向下滑以了解更多 // スクロールダウンして詳細をご覧ください // 下滑了解更多</span>
+            </div>
+        </div>
+        <div id="wavesWrapper">
             <!-- CSS waves-->
             <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
@@ -137,250 +125,354 @@
                 </g>
             </svg>
         </div>
-        </div>
-
-        <!-- Features -->
-        <div id="features" class="section">
-          <div class="ui container">
-            <div class="ui basic segment">
-              <h1 class="ui header">
-                <img class="ui small image" src="img/icons/awesome.svg">
-                <div class="content">
-                    Features
-                    <div class="sub header">Highlighting a few important features of Zoraxy</div>
-                </div>
-              </h1>
-              <br>
-              <div class="ui stackable grid featureList">
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/proxy.svg">
-                    <div class="content">
-                      Reverse Proxy
-                    </div>
-                  </h3>
-                  <p>Simple to use noob-friendly reverse proxy server that can be easily set up using a web form and a few toggle switches.</p>
-                </div>
-
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/redirect.svg">
-                    <div class="content">
-                      Redirection
-                    </div>
-                  </h3>
-                  <p>Direct and intuitive redirection rules with basic rewrite options. Suitable for most simple use cases.</p>
-                </div>
-
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/blacklist.svg">
-                    <div class="content">
-                      Geo-IP & Blacklist
-                    </div>
-                  </h3>
-                  <p>Blacklist with GeoIP support. Allows easy setup for regional services.</p>
-                </div>
-
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/gan.svg">
-                    <div class="content">
-                      Global Area Network
-                    </div>
-                  </h3>
-                  <p>ZeroTier controller integrated GAN. Enable unlimited nodes in your network with a few clicks.</p>
-                </div>
-
-                <!-- Row 2-->
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/terminal.svg">
-                    <div class="content">
-                      Web SSH
-                    </div>
-                  </h3>
-                  <p>Integration with Gotty Web SSH terminal allows one-stop management of your nodes inside private LAN via gateway nodes.</p>
-                </div>
-
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/stats.svg">
-                    <div class="content">
-                      Real Time Statistics
-                    </div>
-                  </h3>
-                  <p>Traffic data collection and real-time analytic tools provide you the best insight of visitors data without cookies.</p>
-                </div>
-
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/scan.svg">
-                    <div class="content">
-                      Scanner & Utilities
-                    </div>
-                  </h3>
-                  <p>Build in IP scanner and mDNS discovery service to enable automatic service discovery within LAN.</p>
-                </div>
-
-                <div class="four wide column featureItem">
-                  <h3 class="ui header featureHeader">
-                    <img class="ui image" src="img/icons/code.svg">
-                    <div class="content">
-                      Open Source
-                    </div>
-                  </h3>
-                  <p>Project is open-source under AGPL on Github. Feel free to contribute on missing functions you need! </p>
-                </div>
-              </div>
+    </div>
+    <br><br><br><br>
+    <!-- About ArozOS-->
+    <div id="about" class="ui text container">
+        <div class="ui stackable grid" data-aos="fade-up">
+            <div class="six wide column" align="right">
+                <img class="ui medium image" src="img/preview-pc.png">
             </div>
-          </div>
-        </div>
+            <div class="ten wide column">
+                <div class="about-text-wrapper">
+                    <p class="about-title"><b i18n>Reverse Proxy // 反向代理</b></p>
+                    <p><span i18n>Easy setups with dynamic updates // 讓你想不到般簡單易用、迅速設定、動態更新</span></p>
+                    <p i18n>Access your reverse proxy and self-hosted services from any computer with a browser, anytime, anywhere.
+                        // 透過瀏覽器，隨時隨地在任何裝置上存取您的反向代理及自家伺服器服務。
+                   
+                    </p>
+                    <div class="ui list">
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                Simple setups with web UI
+                                // 透過網頁介面簡單設定即可使用
+                               
+                            </div>
+                        </div>
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                Change settings on the fly without restarting
+                                // 即時更改設定，無需重新啟動
+  
+                            </div>
+                        </div>
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                One of the best reverse proxy manager for beginners
+                                // 可能是最適合初學者的反向代理管理器之一
 
-        <!-- Screenshots -->
-        <div id="screenshots" class="ui container">
-          <div class="ui basic segment">
-            <br>
-            <h1 class="ui header">
-              <img class="ui small image" src="img/icons/screenshots.svg">
-              <div class="content">
-                  Screenshots
-                  <div class="sub header">A quick overview of the UI designs</div>
-              </div>
-            </h1>
-            
-            <div class="ui three column stackable grid">
-              <div class="column">
-                <a href="img/screenshots/1.png" target="_blank"><img src="img/screenshots/1.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/2.png" target="_blank"><img src="img/screenshots/2.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/3.png" target="_blank"><img src="img/screenshots/3.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/4.png" target="_blank"><img src="img/screenshots/4.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/5.png" target="_blank"><img src="img/screenshots/5.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/6.png" target="_blank"><img src="img/screenshots/6.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/7.png" target="_blank"><img src="img/screenshots/7.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/8.png" target="_blank"><img src="img/screenshots/8.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/9.png" target="_blank"><img src="img/screenshots/9.png" class="ui fluid image screenshot"></a>
-              </div>
-              <div class="column">
-                <a href="img/screenshots/10.png" target="_blank"><img src="img/screenshots/10.png" class="ui fluid image screenshot"></a>
-              </div>
-            </div> 
-          </div>
-        </div>
-
-        <!-- Plugin Developments -->
-        <div id="plugins" class="ui container">
-          <div class="ui basic segment">
-            <br>
-            <h1 class="ui header">
-              <img class="ui small image" src="img/icons/plugin.svg">
-              <div class="content">
-                  Plugins
-                  <div class="sub header">Add custom routing rules via simple scripts</div>
-              </div>
-            </h1>
-            <div style="width: 100%; text-align: center;">
-              <br>
-              <p>Documentation work in progress</p>
-            </div>
-          </div>
-        </div>
-
-        <!-- Source code -->
-        <div id="source" class="ui container">
-          <div class="ui basic segment">
-            <br>
-            <h1 class="ui header">
-              <img class="ui small image" src="img/icons/code.svg">
-              <div class="content">
-                  Source Code
-                  <div class="sub header">Feel free to give us a ⭐ star ⭐.</div>
-              </div>
-            </h1>
-            <br>
-            <div class="ui two column stackable grid">
-              <div class="column">
-                  <h3 class="ui header">
-                    <i class="grey github icon"></i>
-                    <div class="content" style="text-align: left;">
-                      <a href="https://github.com/tobychui/zoraxy">
-                        Github
-                        <div class="sub header">https://github.com/tobychui/zoraxy</div>
-                      </a>
+                            </div>
+                        </div>
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                Easily install plugins and edit configurations
+                                // 輕鬆安裝插件並編輯設定
+                            </div>
+                        </div>
                     </div>
-                  </h3>
-              </div>
-              <div class="column">
-                <h3 class="ui header">
-                  <i class="blue mail icon"></i>
-                  <div class="content" style="text-align: left;">
-                    <a href="mailto:toby@imuslab.com">
-                      Email Contact
-                      <div class="sub header">toby@imuslab.com</div>
-                    </a>
-                  </div>
-                </h3>
-              </div>
+                </div>
             </div>
-          </div>
         </div>
+        <div class="ui stackable grid" data-aos="fade-up">
+            <div class="six wide column" align="right">
+                <img class="ui medium image" src="img/preview-mobile.png">
+            </div>
+            <div class="ten wide column">
+                <div class="about-text-wrapper">
+                    <p class="about-title"><b i18n>Real-time Analytics // 即時流量分析</b></p>
+                    <p><span i18n>Dynamic statistic and access control // 動態流量數據、權限與路由設定</span></p>
+                    <p i18n>Provide real time statistical overview, take advantage of the real time traffic and situations to make better decisions.
+                        // 提供即時統計概覽，利用即時流量和情況做出更好的決策。
 
-        <br><br>
-        <div class="ui container">
-          <p style="color: #3a3a3a">CopyRight Zoraxy Project and its authors © 2021 - <span class="year"></span></p>
+                    </p>
+                    <div class="ui list">
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                Real time visitor statistic
+                                // 即時訪客統計概覽
+
+                            </div>
+                        </div>
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                Instant network utilitization overview
+                                // 即時網路使用率概覽
+
+                            </div>
+                        </div>
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                No-reload access control and settings
+                                // 即時生效存取控制和設定
+
+                            </div>
+                        </div>
+                        <div class="item">
+                            <i class="caret right icon"></i>
+                            <div class="content" i18n>
+                                One-click setting change with no downtime
+                                // 一鍵設定更改，無需停機
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <br><br><br><br>
+    <!-- Features -->
+    <div class="ui divider"></div>
+    <div id="features" class="ui container">
+        <div class="centered title">
+            <h1 i18n>Screenshots // 系統截圖</h1>
+        </div>
+        <div class="ui three column grid">
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/1.png">
+            </div>
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/2.png">
+            </div>
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/3.png">
+            </div>
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/4.png">
+            </div>  
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/5.png">
+            </div>  
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/6.png">
+            </div>
+            <!-- <div class="column">
+                <img class="ui fluid image" src="img/screenshots/7.png">
+            </div> -->
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/8.png">
+            </div>
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/9.png">
+            </div>
+            <div class="column">
+                <img class="ui fluid image" src="img/screenshots/10.png">
+            </div>
         </div>
         <br><br><br>
-      </div>
     </div>
-    <br>
+
+    <!-- Spec -->
+    <div id="techspec" class="blackbanner">
+        <br><br>
+        <div class="centered title">
+            <h1 i18n>Review Videos // 介紹影片 </h1>
+        </div>
+        <div>
+            <div class="videoScrollBar">
+                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/5-lps8DC6_Y?si=rkfePn9kiYKCvYUZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/49xQYLpmedE?si=fgba2iK55s1760Xr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/I_F97he5F2A?si=qKEXwDcjkX1nPejq" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+                <div class="introvideo"><iframe width="560" height="315" src="https://www.youtube.com/embed/FNU08-ufByM?si=I2hq9vsapeXB2Oqb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
+            </div>   
+        </div>
+        <br><br><br>
+    </div>
+
+    <!-- Download -->
+    <div id="download" class="ui text container">
+        <br><br>
+        <div class="centered title">
+            <h1 i18n>Download // 下載</h1>
+        </div>
+        
+        <div class="downloadTabWrapper">
+            <div class="ui top attached fluid stackable tabular menu">
+                <a class="active item" data-tab="linux"><i class="grey linux icon"></i> Linux</a>
+                <a class="item" data-tab="windows"><i class="blue windows icon"></i> Windows</a>
+                <a class="item" data-tab="rpi"><i class="red raspberry pi icon"></i><span i18n>SBCs // ARM 開發板 </span></a>
+                <a class="item" data-tab="build"><i class="code icon"></i> <span i18n>Build from source // 從原始碼建置 </span> </a>
+            </div>
+            <div class="ui bottom attached active tab segment" data-tab="linux">
+                <p i18n>Install with command line // 使用 CLI 下載並執行發行版本 </p>
+                <div class="ui black message">
+                    <code>
+                        wget https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_amd64<br>
+                        chmod +x ./zoraxy_linux_amd64<br>
+                        sudo ./zoraxy_linux_amd64
+                    </code>
+                </div>
+                <br>
+                <p i18n>Install with precompiled binary // 下載發行版本 </p>
+                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_amd64");'><i class="black linux icon"></i> <span i18n>Download x64 // 下載 64位元 執行檔 </span></button>
+                <span style="font-size: 1.2em; font-weight: 600; margin-right: 0.4em">OR</span>
+                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_386");'><i class="black linux icon"></i> <span i18n>Download x32 // 下載 32位元 執行檔 </span></button>
+            </div>
+            <div class="ui bottom attached tab segment" data-tab="windows">
+                <p i18n>Install with precompiled binary // 下載發行版本 </p>
+                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_windows_amd64.exe");'><i class="blue windows icon"></i> <span i18n>Download Zoraxy for Windows // 下載 Windows 版 Zoraxy</span></button>
+                <br><br>
+            </div>
+            <div class="ui bottom attached tab segment" data-tab="rpi">
+                <p i18n>Install with command line (armv6-7, arm64, x86) // 使用 CLI 下載並執行 （armv6-7, arm64, x86）</p>
+                <div class="ui black message">
+                    <code>
+                        # Check your CPU architecture<br>
+                        uname -m <br>
+                        <br>
+                        # For arm64 (aarch64) CPU<br>
+                        wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_arm64<br>
+                        <br>
+                        # For armv6 (armv6l) / armv7 (armv7l) CPU<br>
+                        wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_arm<br>
+                        <br>
+                        # For RISC-V (riscv64) CPU<br>
+                        wget -O zoraxy https://github.com/tobychui/zoraxy/releases/latest/download/zoraxy_linux_riscv64<br>
+                        <br>
+
+                        chmod +x ./zoraxy<br>
+                        sudo ./zoraxy <br>
+                    </code>
+                </div>
+                <br>
+                <p i18n>Install with precompiled binary // 下載發行版本</p>
+                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_arm");'><i class="black download icon"></i> <span i18n></span>arm (v6, v7)</button>
+                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_arm64");'><i class="black download icon"></i> <span i18n></span>arm64</button>
+                <button class="ui basic downloadButton button" onclick='handleDownload("zoraxy_linux_riscv64");'><i class="grey download icon"></i> <span i18n></span>riscv64</button>
+            </div>
+            <div class="ui bottom attached tab segment" data-tab="build">
+                <p i18n>Require Go (Golang) compiler. Details build from source instruction can be found on Zoraxy Github README file. 
+                    // 需要 Go (Go 語言）編譯器。建置詳情可以在 Zoraxy Github README 檔案中找到。
+                </p>
+                <div class="ui black message">
+                    <code>
+                        git clone https://github.com/tobychui/zoraxy<br>
+                        cd ./zoraxy/src/<br>
+                        go mod tidy<br>
+                        go build<br>
+                        sudo ./zoraxy <br>
+                    </code>
+                </div>
+            </div>
+        </div>
+        <p i18n>After the Zoraxy is started, navigate to http://localhost:8000 to continue account and system setup.
+            // 當 Zoraxy 執行檔 / 服務啟動後，使用瀏覽器開啟 http://localhost:8000 以繼續帳戶和系統設定。
+        </p>
+        <br><br>
+    </div>
+
+    <!-- Learn More -->
+    <div class="ui divider"></div>
+    <div id="learnmore" class="ui text container">
+        <div class="centered title" style="margin-bottom: 0px;">
+            <h1 i18n>Learn More // 了解更多</h1>
+            <p i18n>If you like this project, please feel free to give us a ⭐ star ⭐.
+                // 如果您喜歡這個開源專案，歡迎來給我們一顆 ⭐星星⭐ 喔！!
+            </p>
+        </div>
+        <div class="ui basic segment linkicons">
+            <div class="ui big breadcrumb">
+                <a class="section externallink" href="https://github.com/tobychui/zoraxy" target="_blank">
+                    <div class="ui icon header">
+                        <i class="black github icon"></i>
+                        <div class="content" i18n>
+                            Github
+                            // 源碼
+                        </div>
+                    </div>
+                </a>
+                <i class="divider"> </i>
+                <a class="section externallink" href="" target="_blank">
+                    <div class="ui icon header">
+                        <i class="green code icon"></i>
+                        <div class="content" i18n>
+                            Plugin Devs
+                            // 插件開發
+                        </div>
+                    </div>
+                </a>
+                <i class=" divider"> </i>
+                <a class="section externallink" href="mailto:toby@imuslab.com" target="_blank">
+                    <div class="ui icon header">
+                        <i class="yellow mail icon"></i>
+                        <div class="content" i18n>
+                            Email
+                            // 電子郵件
+                        </div>
+                    </div>
+                </a>
+                <i class=" divider"> </i>
+                <a class="section externallink" href="https://t.me/ArOZBeta" target="_blank">
+                    <div class="ui icon header">
+                        <i class="blue telegram icon"></i>
+                        <div class="content">
+                            Telegram
+                        </div>
+                    </div>
+                </a>
+            </div>  
+        </div>
+        <br><br><br><br>
+    </div>
+
+     <!-- Footer -->
+     <div id="footer">
+        <div class="ui container">
+            <br><br>
+            <div class="ui stackable grid" style="height: 100%;">
+                <div class="six wide column" style="height: 100%;">
+                    <a href="https://zoraxy.aroz.org"><img src="img/logo_white.png" class="ui small image"></a>
+                    <p><span style="font-weight: 300;">The Zoraxy Project</span><br>
+                        © Toby Chui</p>
+                       
+                    <div class="bottom-attach">
+                       <br><br>
+                        <div class="ui breadcrumb" style="margin-top: 0.4em;">
+                            <div class="section" i18n><a style="color: white;" href="https://zoraxy.aroz.org" target="_blank">zoraxy.aroz.org</a></div>
+                            <div class="divider"> / </div>
+                            <div class="section">2018 - <span class="year">now</span></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="three wide column">
+                    <div class="ui list">
+                        <div class="item title" i18n>Developer Tools // 開發者工具</div>
+                        <div class="item"><a href="" target="_blank">Zoraxy Wiki</a></div>
+                        <div class="item"><a href="" target="_blank">Source Code</a></div>
+                        <div class="item"><a href="" target="_blank">Offical Plugin List</a></div>
+                        <div class="item"><a href="" target="_blank">Plugin Development Guide</a></div>
+                    </div>
+                </div>	
+                <div class="three wide column">
+                    <div class="ui list">
+                        <div class="item title" i18n>Project Spin-offs // 衍生開源計劃</div>
+                        <div class="item"><a href="https://os.aroz.org" target="_blank">ArozOS</a></div>
+                    </div>
+                </div>
+                <div class="three wide column">
+                    <div class="ui list">
+                        <div class="item title" i18n>Related Links // 相關連接</div>
+                        <div class="item"><a href="" target="_blank" i18n>Getting Started</a></div>
+                        <div class="item"><a href="" target="_blank">Zoraxy Release</a></div>
+                        <div class="item"><a href="" target="_blank">Zoraxy Docker</a></div>
+                        <div class="item"><a href="https://imuslab.com" target="_blank">imuslab</a></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <br><br><br><br>
+    </div>
+    
     <script>
-      $(".year").text(new Date().getFullYear()  );
-
-      $(".menu-item").on("click", function(){
-        $(".menu-item.active").removeClass("active");
-        $(this).addClass("active");
-      });
-
-      $(".right-content").on("scroll", function() {
-        var scrollPos = $(".right-content").scrollTop();
-        if (scrollPos < 10){
-          //Reaching the top
-          $('.menu-item.active').removeClass("active");
-          $($('.menu-item')[0]).addClass('active');
-          return;
-        }else if ($(".right-content")[0].scrollHeight  ==  $(".right-content").scrollTop() + window.innerHeight ){
-          //Reaching the bottom
-          $('.menu-item.active').removeClass("active");
-          $($('.menu-item').get().reverse()[0]).addClass('active');
-          return
-        }
-        $('.menu-item').each(function() {
-          var currLink = $(this);
-          var refElement = $(currLink.attr("href"));
-          if (refElement.offset().top <= (window.innerHeight / 2)) {
-            $('.menu-item.active').removeClass("active");
-            currLink.addClass("active");
-            console.log(currLink.attr("href"));
-          }
-        });
-      });
-
+        AOS.init();
+        $(".year").text(new Date().getFullYear());
     </script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/docs/index_legacy.html b/docs/index_legacy.html
new file mode 100644
index 0000000..2a57cd8
--- /dev/null
+++ b/docs/index_legacy.html
@@ -0,0 +1,386 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta content="Reverse Proxy, Cluster, Gateway, Go, Homelab, Network Tools" name="keywords">
+    <meta content="A reverse proxy server and cluster network gateway for noobs" name="description">
+    <meta name="author" content="tobychui">
+
+    <!-- HTML Meta Tags -->
+    <title>Reverse Proxy Server | Zoraxy</title>
+    <meta name="description" content="A reverse proxy server and cluster network gateway for noobs">
+
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://zoraxy.aroz.org/">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="Cluster Proxy Gateway | Zoraxy">
+    <meta property="og:description" content="A reverse proxy server and cluster network gateway for noobs">
+    <meta property="og:image" content="https://zoraxy.aroz.org/img/og.png">
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta property="twitter:domain" content="aroz.org">
+    <meta property="twitter:url" content="https://zoraxy.aroz.org/">
+    <meta name="twitter:title" content="Cluster Proxy Gateway | Zoraxy">
+    <meta name="twitter:description" content="A reverse proxy server and cluster network gateway for noobs">
+    <meta name="twitter:image" content="https://zoraxy.aroz.org/img/og.png">
+
+    <!-- Favicons -->
+    <link href="favicon.png" rel="icon">
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@100;300;400;600;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+
+    <!-- Main Stylesheet File -->
+    <link href="style.css" rel="stylesheet">
+    <script
+      src="https://code.jquery.com/jquery-3.7.0.min.js"
+      integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
+      crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.js" integrity="sha512-5cguXwRllb+6bcc2pogwIeQmQPXEzn2ddsqAexIBhh7FO1z5Hkek1J9mrK2+rmZCTU6b6pERxI7acnp1MpAg4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" integrity="sha512-n//BDM4vMPvyca4bJjZPDh7hlqsQ7hqbP9RH18GF2hTXBY5amBwM2501M0GPiwCU/v9Tor2m13GOTFjk00tkQA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <style>
+      p,a,div,span,h1,h2,h3,h4,h5,h6{
+        font-family: 'Source Sans Pro', sans-serif !important;
+        color: #404040;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="main section">
+      <div class="left-menu">
+        <div class="iconWrapper">
+          <a href="index.html"><img class="ui fluid image" src="img/icon.png"></a>
+        </div>
+        <a href="#home" class="menu-item active" align="center">
+          <img src="img/icons/home.svg">
+        </a>
+        <a href="#features" class="menu-item" align="center">
+          <img src="img/icons/awesome.svg">
+        </a>
+        <a href="#screenshots" class="menu-item" align="center">
+          <img src="img/icons/screenshots.svg">
+        </a>
+        <a href="#plugins" class="menu-item" align="center">
+          <img src="img/icons/plugin.svg">
+        </a>
+        <a href="#source" class="menu-item" align="center">
+          <img src="img/icons/code.svg">
+        </a>
+      </div>
+      <div class="right-content">
+        <!-- Hero Banner Section -->
+        <div class="headbanner"></div>
+        <div id="home" class="herotext">
+          <div class="ui basic segment">
+            <div class="bannerHeaderWrapper">
+              <h1 class="bannerHeader">Zoraxy</h1>
+			  <div class="ui divider"></div><br>
+              <p class="bannerSubheader">Beyond Reverse Proxy: Your Ultimate Homelab Network Tool</p>
+            </div>
+            <br><br>
+            <a class="ui basic big button" style="background-color: white;" href="#features"><i class="ui blue arrow down icon"></i> Learn More</a>
+            <br><br>
+            <table class="ui very basic collapsing unstackable celled table">
+              <thead>
+                <tr><th colspan="2">Quick Access</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <h4 class="ui image header">
+                    <i class="ui download icon"></i>
+                    <div class="content">
+                      Download
+                      <div class="sub header">Prebuild Binary
+                    </div>
+                  </div>
+                </h4></td>
+                <td>
+                  <a href="https://github.com/tobychui/zoraxy/releases" target="_blank">Open <i class="ui external icon"></i></a>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <h4 class="ui image header">
+                    <i class="ui github icon"></i>
+                    <div class="content">
+                      Github
+                      <div class="sub header">Source Code
+                    </div>
+                  </div>
+                </h4></td>
+                <td>
+                  <a href="https://github.com/tobychui/zoraxy" target="_blank">Open <i class="ui external icon"></i></a>
+                </td>
+              </tr>
+            </table>
+          </div>
+		  
+		  <div id="wavesWrapper">
+            <!-- CSS waves-->
+            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+            viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+                <defs>
+                <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+                </defs>
+                <g class="parallax">
+                <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
+                <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
+                <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
+                <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+                </g>
+            </svg>
+        </div>
+        </div>
+
+        <!-- Features -->
+        <div id="features" class="section">
+          <div class="ui container">
+            <div class="ui basic segment">
+              <h1 class="ui header">
+                <img class="ui small image" src="img/icons/awesome.svg">
+                <div class="content">
+                    Features
+                    <div class="sub header">Highlighting a few important features of Zoraxy</div>
+                </div>
+              </h1>
+              <br>
+              <div class="ui stackable grid featureList">
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/proxy.svg">
+                    <div class="content">
+                      Reverse Proxy
+                    </div>
+                  </h3>
+                  <p>Simple to use noob-friendly reverse proxy server that can be easily set up using a web form and a few toggle switches.</p>
+                </div>
+
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/redirect.svg">
+                    <div class="content">
+                      Redirection
+                    </div>
+                  </h3>
+                  <p>Direct and intuitive redirection rules with basic rewrite options. Suitable for most simple use cases.</p>
+                </div>
+
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/blacklist.svg">
+                    <div class="content">
+                      Geo-IP & Blacklist
+                    </div>
+                  </h3>
+                  <p>Blacklist with GeoIP support. Allows easy setup for regional services.</p>
+                </div>
+
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/gan.svg">
+                    <div class="content">
+                      Global Area Network
+                    </div>
+                  </h3>
+                  <p>ZeroTier controller integrated GAN. Enable unlimited nodes in your network with a few clicks.</p>
+                </div>
+
+                <!-- Row 2-->
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/terminal.svg">
+                    <div class="content">
+                      Web SSH
+                    </div>
+                  </h3>
+                  <p>Integration with Gotty Web SSH terminal allows one-stop management of your nodes inside private LAN via gateway nodes.</p>
+                </div>
+
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/stats.svg">
+                    <div class="content">
+                      Real Time Statistics
+                    </div>
+                  </h3>
+                  <p>Traffic data collection and real-time analytic tools provide you the best insight of visitors data without cookies.</p>
+                </div>
+
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/scan.svg">
+                    <div class="content">
+                      Scanner & Utilities
+                    </div>
+                  </h3>
+                  <p>Build in IP scanner and mDNS discovery service to enable automatic service discovery within LAN.</p>
+                </div>
+
+                <div class="four wide column featureItem">
+                  <h3 class="ui header featureHeader">
+                    <img class="ui image" src="img/icons/code.svg">
+                    <div class="content">
+                      Open Source
+                    </div>
+                  </h3>
+                  <p>Project is open-source under AGPL on Github. Feel free to contribute on missing functions you need! </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Screenshots -->
+        <div id="screenshots" class="ui container">
+          <div class="ui basic segment">
+            <br>
+            <h1 class="ui header">
+              <img class="ui small image" src="img/icons/screenshots.svg">
+              <div class="content">
+                  Screenshots
+                  <div class="sub header">A quick overview of the UI designs</div>
+              </div>
+            </h1>
+            
+            <div class="ui three column stackable grid">
+              <div class="column">
+                <a href="img/screenshots/1.png" target="_blank"><img src="img/screenshots/1.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/2.png" target="_blank"><img src="img/screenshots/2.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/3.png" target="_blank"><img src="img/screenshots/3.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/4.png" target="_blank"><img src="img/screenshots/4.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/5.png" target="_blank"><img src="img/screenshots/5.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/6.png" target="_blank"><img src="img/screenshots/6.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/7.png" target="_blank"><img src="img/screenshots/7.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/8.png" target="_blank"><img src="img/screenshots/8.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/9.png" target="_blank"><img src="img/screenshots/9.png" class="ui fluid image screenshot"></a>
+              </div>
+              <div class="column">
+                <a href="img/screenshots/10.png" target="_blank"><img src="img/screenshots/10.png" class="ui fluid image screenshot"></a>
+              </div>
+            </div> 
+          </div>
+        </div>
+
+        <!-- Plugin Developments -->
+        <div id="plugins" class="ui container">
+          <div class="ui basic segment">
+            <br>
+            <h1 class="ui header">
+              <img class="ui small image" src="img/icons/plugin.svg">
+              <div class="content">
+                  Plugins
+                  <div class="sub header">Add custom routing rules via simple scripts</div>
+              </div>
+            </h1>
+            <div style="width: 100%; text-align: center;">
+              <br>
+              <p>Documentation work in progress</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Source code -->
+        <div id="source" class="ui container">
+          <div class="ui basic segment">
+            <br>
+            <h1 class="ui header">
+              <img class="ui small image" src="img/icons/code.svg">
+              <div class="content">
+                  Source Code
+                  <div class="sub header">Feel free to give us a ⭐ star ⭐.</div>
+              </div>
+            </h1>
+            <br>
+            <div class="ui two column stackable grid">
+              <div class="column">
+                  <h3 class="ui header">
+                    <i class="grey github icon"></i>
+                    <div class="content" style="text-align: left;">
+                      <a href="https://github.com/tobychui/zoraxy">
+                        Github
+                        <div class="sub header">https://github.com/tobychui/zoraxy</div>
+                      </a>
+                    </div>
+                  </h3>
+              </div>
+              <div class="column">
+                <h3 class="ui header">
+                  <i class="blue mail icon"></i>
+                  <div class="content" style="text-align: left;">
+                    <a href="mailto:toby@imuslab.com">
+                      Email Contact
+                      <div class="sub header">toby@imuslab.com</div>
+                    </a>
+                  </div>
+                </h3>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <br><br>
+        <div class="ui container">
+          <p style="color: #3a3a3a">CopyRight Zoraxy Project and its authors © 2021 - <span class="year"></span></p>
+        </div>
+        <br><br><br>
+      </div>
+    </div>
+    <br>
+    <script>
+      $(".year").text(new Date().getFullYear()  );
+
+      $(".menu-item").on("click", function(){
+        $(".menu-item.active").removeClass("active");
+        $(this).addClass("active");
+      });
+
+      $(".right-content").on("scroll", function() {
+        var scrollPos = $(".right-content").scrollTop();
+        if (scrollPos < 10){
+          //Reaching the top
+          $('.menu-item.active').removeClass("active");
+          $($('.menu-item')[0]).addClass('active');
+          return;
+        }else if ($(".right-content")[0].scrollHeight  ==  $(".right-content").scrollTop() + window.innerHeight ){
+          //Reaching the bottom
+          $('.menu-item.active').removeClass("active");
+          $($('.menu-item').get().reverse()[0]).addClass('active');
+          return
+        }
+        $('.menu-item').each(function() {
+          var currLink = $(this);
+          var refElement = $(currLink.attr("href"));
+          if (refElement.offset().top <= (window.innerHeight / 2)) {
+            $('.menu-item.active').removeClass("active");
+            currLink.addClass("active");
+            console.log(currLink.attr("href"));
+          }
+        });
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/docs/main.css b/docs/main.css
new file mode 100644
index 0000000..a1b9abb
--- /dev/null
+++ b/docs/main.css
@@ -0,0 +1,410 @@
+/* Global */
+
+p,a,div,span,h1,h2,h3,h4,h5,h6{
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+body.en *:not(i){
+    font-family: 'Source Sans Pro', 'Noto Sans TC',sans-serif !important;
+}
+
+body.zh *:not(i){
+    font-family: 'Noto Sans TC',sans-serif !important;
+}
+
+body.jp *:not(i){
+    font-family: "Noto Sans JP", sans-serif !important;
+}
+
+body.zh-cn *:not(i){
+    font-family: 'Noto Sans SC',sans-serif !important;
+}
+
+
+.centered.title{
+    padding: 2em;
+    margin-bottom: 2em;
+    text-align: center;
+}
+.centered.title h1{
+    font-weight: 300 !important;
+}
+
+#backToTopBtn{
+    position: fixed;
+    bottom: 1em;
+    right: 1em;
+    display:none;
+    z-index: 999;
+    border: 1px solid white;
+    background: #8debff;
+}
+
+#backToTopBtn:hover{
+    opacity: 0.8;
+}
+
+#backToTopBtn i{
+    color: white;
+}
+
+/* Main Menu */
+#mainmenu{
+    padding-top: 0.4em;
+    padding-bottom: 0.4em;
+    border-radius: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+#slideshowBanner .ui.basic.white.button{
+    color: white;
+    box-shadow: 0 0 0 1px rgb(231, 231, 231) inset;
+    border-radius: 0.4em;
+    background: none !important;
+}
+#slideshowBanner .ui.basic.white.button:hover{
+    background-color: rgba(255, 255, 255, 0.3) !important;
+}
+
+#slideshowBanner .ui.basic.white.button:active{
+    background: rgba(255, 255, 255, 0.5) !important;
+}
+
+#rwdmenubtn{
+    display:none;
+    position: absolute;
+}
+
+#mainmenu .ui.secondary.inverted.menu .link.item:not(.disabled), .ui.secondary.inverted.menu a.item:not(.disabled){
+    font-size: 1.1em;
+    font-weight: 500;
+    border-bottom: 1px solid transparent;
+    transition: border-bottom ease-in-out 0.1s;
+    color: white !important;
+    border-radius: 0;
+}
+
+#mainmenu #mainmenu .ui.secondary.inverted.menu .link.item:not(.disabled), .ui.secondary.inverted.menu a.item:not(.disabled):hover{
+    background-color: transparent;
+    border-bottom: 1px solid #82adfc;
+    color: #82adfc !important;
+}
+
+/* Image Sldiers */
+#slideshowBanner{
+    background: rgb(108,172,255);
+    background: linear-gradient(48deg, rgba(108,172,255,1) 8%, rgba(141,235,255,1) 65%); 
+    position: relative;
+    height: 80vh;
+}
+
+.slideshow {
+    width: 100%;
+    overflow: hidden;
+    border-radius: 0;
+    max-height: 500px;
+}
+
+.slideshow .slides {
+    display: flex;
+    transition: transform 1s ease-in-out;
+    opacity: 0.6;
+    filter: blur(2px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.slideshow .slide {
+    min-width: 100%;
+    box-sizing: border-box;
+}
+
+.slideshow .slide img {
+    width: 100%;
+    display: block;
+}
+
+.slideshow .dots{
+    text-align: center;
+    position: absolute;
+    bottom: 15px;
+    width: 100%;
+}
+
+.slideshow .dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin: 0 5px;
+    background-color: #bebebe;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.6s ease;
+}
+
+.dot.active {
+    background-color: #ffffff;
+}
+
+#slideshowBanner .title{
+    display: inline-block;
+    width: 100%;
+    max-width: 500px;
+    text-align: left;
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    transform: translateX(0%) translateY(-50%);
+    color: white;
+}
+
+#slideshowBanner .title .scrolldownTips{
+    display: none;
+}
+
+#slideshowBanner .title h1{
+    font-size: 4em;
+    font-weight: 600;
+    margin-bottom: 0;
+}
+
+#slideshowBanner .title p{
+    font-size: 1.2em;
+}
+
+/* About ArozOS */
+.about-text-wrapper{
+    margin-top: 3em;
+}
+.about-text-wrapper p, .about-text-wrapper .list .item{
+    font-weight: 300;
+}
+.about-title{
+    font-size: 2.4em;
+    font-weight: 300;
+    margin-bottom: 0em;
+}
+.about-title b{
+    font-weight: 800;
+}
+.about-text-wrapper .ui.list .item{
+    margin-bottom: 0.6em;
+}
+.about-text-wrapper .ui.list .item .icon{
+    padding-top: 0.15em;
+}
+
+/* Features */
+#features{
+    margin-bottom: 3em;
+}
+
+/* Tech Spec */
+#techspec .centered.title{
+    color: white;
+}
+
+#techspec p {
+    color: white;
+}
+
+#techspec .videoScrollBar{
+    overflow-x: scroll; 
+    display: block; 
+    white-space: nowrap; 
+    scrollbar-color: #dee6f7 #5888f0;
+    padding-top: 2em;
+    padding-bottom: 3em;
+}
+
+.introvideo{
+    display: inline-block !important;
+    
+}
+
+.blackbanner{
+    width: 100%;
+    background: rgb(85,131,238);
+    background: linear-gradient(48deg, rgba(85,131,238,1) 21%, rgba(108,172,255,1) 73%);
+    min-height: 300px;
+
+}
+
+/* Download */
+.downloadButton {
+    margin-top: 0.4em !important;
+}
+
+.downloadTabWrapper{
+    width: 100%;
+    overflow-x: hidden;
+}
+
+#download .ui.black.message{
+    word-break: break-all;
+}
+
+/* Learn More */
+#learnmore .linkicons{
+    text-align: center;
+    width: 100%;
+}
+
+#learnmore .linkicons .divider{
+    margin-left: 1em;
+    margin-right: 1em;
+}
+
+#learnmore .linkicons .externallink{
+    margin-bottom: 0.6em;
+    transition: opacity 0.1s ease-in-out;
+}
+
+#learnmore .linkicons .externallink i{
+    /* color: #1b1c1d; */
+    font-weight: 300;
+    font-size: 1.5em;
+}
+
+#learnmore .linkicons .externallink:hover{
+    opacity: 0.8;
+}
+
+
+#learnmore .linkicons .externallink .content{
+    color: #1b1c1d;
+    font-weight: 500;
+    font-size: 0.6em;
+}
+
+
+/* Footer */
+#footer{
+    background: rgb(85,131,238);
+    background: linear-gradient(48deg, rgba(85,131,238,1) 21%, rgba(108,172,255,1) 73%);
+    color: rgb(255, 255, 255);
+}
+
+#footer a {
+    color: rgb(209, 224, 255);
+}
+
+#footer .bottom-attach .divider{
+    color: rgb(212, 212, 212);
+}
+
+#footer .ui.list .title{
+    margin-bottom: 0.6em;
+}
+
+/* RWD Rules */
+@media (max-width:960px) {
+    /* Main menu */
+    #mainmenu{
+        display:none;
+        z-index: 99;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+    }
+
+    #rwdmenubtn{
+        display: block;
+        position: absolute;
+        top: 0.4em;
+        right: 0.4em;
+        z-index: 100;
+    }
+
+    /* Slideshows */
+    .slideshow {
+        min-height: 100vh;
+    }
+
+    .slideshow .slide{
+        height: 100% !important;
+        min-width: none;
+    }
+
+    .slideshow .slide img{
+        height: 100%;
+        width: auto;
+    }
+
+    #slideshowBanner .title .scrolldownTips{
+        margin-top: 2em;
+        display: block;
+    }
+
+    #slideshowBanner .title .scrolldownTips img{
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    #download .stackable.tabular.menu .active.item{
+        background-color: rgb(243, 243, 243);
+        border-width: 0;
+        border-radius: 0.4em !important;
+    }   
+
+}
+
+
+
+/* 
+	Waves CSS 
+*/
+
+#wavesWrapper{
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	left: 0;
+}
+
+.waves {
+	position:relative;
+	width: 100%;
+	height:15vh;
+	margin-bottom:-7px; /*Fix for safari gap*/
+	min-height:100px;
+	max-height:150px;
+}
+
+
+.parallax > use {
+	animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
+}
+.parallax > use:nth-child(1) {
+	animation-delay: -8s;
+	animation-duration: 28s;
+}
+.parallax > use:nth-child(2) {
+	animation-delay: -12s;
+	animation-duration: 40s;
+}
+.parallax > use:nth-child(3) {
+	animation-delay: -16s;
+	animation-duration: 52s;
+}
+.parallax > use:nth-child(4) {
+	animation-delay: -20s;
+	animation-duration: 80s;
+}
+@keyframes move-forever {
+	0% {
+		transform: translate3d(-90px,0,0);
+	}
+	100% { 
+		transform: translate3d(85px,0,0);
+	}
+}
+/*Shrinking for mobile*/
+@media (max-width: 768px) {
+	.waves {
+		height:40px;
+		min-height:40px;
+	}
+}
\ No newline at end of file
diff --git a/docs/main.js b/docs/main.js
new file mode 100644
index 0000000..2711c1d
--- /dev/null
+++ b/docs/main.js
@@ -0,0 +1,73 @@
+/*
+    Localization
+
+    To add more locales, add to the html file with // (translated text)
+    after each DOM elements with attr i18n
+
+    And then add the language ISO key to the list below.
+*/
+let languages = ['en', 'zh', 'jp', 'zh-cn'];
+
+
+//Bind language change dropdown events
+$(".dropdown").dropdown();
+$("#language").on("change",function(){
+   let newLang = $("#language").parent().dropdown("get value");
+   i18n.changeLanguage(newLang);
+   $("body").attr("class", newLang);
+});
+
+//Initialize the i18n dom library
+var i18n = domI18n({
+    selector: '[i18n]',
+    separator: ' // ',
+    languages: languages,
+    defaultLanguage: 'en'
+});
+i18n.changeLanguage('en');
+
+/* Main Menu */
+$("#rwdmenubtn").on("click", function(){
+    $("#mainmenu").slideToggle("fast");
+})
+
+//Handle resize 
+$(window).on("resize", function(){
+    if (window.innerWidth > 960){
+        $("#mainmenu").show();
+    }else{
+        $("#mainmenu").hide();
+    }
+})
+
+/*
+    Download
+*/
+
+$('.menu .item').tab();
+
+//Download webpack and binary at the same time
+function handleDownload(releasename){
+    let binaryURL = "https://github.com/tobychui/zoraxy/releases/latest/download/" + releasename;
+    window.open(binaryURL);
+}
+
+/* RWD */
+window.addEventListener('scroll', function() {
+    var scrollPosition = window.scrollY || window.pageYOffset;
+    var windowHeight = window.innerHeight;
+    var hiddenDiv = document.querySelector('#backToTopBtn');
+
+    if (scrollPosition > windowHeight / 2) {
+    hiddenDiv.style.display = 'block';
+    } else {
+    hiddenDiv.style.display = 'none';
+    }
+});
+
+
+function backToTop(){
+    $('html, body').animate({scrollTop : 0},800, function(){
+        window.location.hash = "";
+    });
+}
\ No newline at end of file