diff --git a/.prettierrc.js b/.prettierrc.js
index 1f50f3e..3c2169e 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,10 +1,7 @@
 "use strict";
 module.exports = {
-  plugins: [
-    "@trivago/prettier-plugin-sort-imports",
-    "prettier-plugin-tailwindcss",
-  ],
-  printWidth: 80,
+  plugins: ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"],
+  printWidth: 120,
   tabWidth: 2,
   useTabs: false,
   semi: true,
@@ -31,6 +28,7 @@ module.exports = {
     "^~/(utils|hooks|context)/(.*)$",
     "^~/types/(.*)$",
     "^~/(config|styles)/(.*)$",
+    "^(config|actions)$",
     "^[./]",
   ],
   importOrderSeparation: true,
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..3972c30
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 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.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  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, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public 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.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) 2024  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
diff --git a/README.md b/README.md
index 36ff322..21d862f 100644
--- a/README.md
+++ b/README.md
@@ -1,201 +1,175 @@
-![next-gdrive-index](./public/og.png)
+![banner](/public/og.png)
 
 <p align='center'>
-  <a href='https://drive-demo.mbaharip.com'>Demo</a>
-  ·
-  <a href='https://github.com/mbahArip/next-gdrive-index/wiki/Deploying'>Deploying Guide</a>
-  ·
-  <a href='https://github.com/mbahArip/next-gdrive-index/wiki/FAQ'>FAQ</a>
+	<a href='https://drive-demo.mbaharip.com' target='_blank'>Demo Site</a>
+		·
+	<a href='https://drive-demo.mbaharip.com/deploy' target='_blank'>Deploy / Version Upgrade Guide</a>
+		·
+	<a href='https://github.com/mbahArip/next-gdrive-index/wiki/FAQ' target='_blank'>FAQ</a>
+</p>
+<p align='center'>
+	<img src='https://img.shields.io/github/package-json/v/mbaharip/next-gdrive-index?label=prod' alt='Demo version' />
+	<img src='https://img.shields.io/github/package-json/v/mbaharip/next-gdrive-index/v2?label=dev' alt='Dev' />
 </p>
 
-## Version 2 is here!
+---
 
-It seems there are some bugs on mobile devices that prevent the files list from rendering properly.  
-So I will use this chance to upgrade the project to `Next.js 14`, use `shadcn/ui`, and also add some new features.
+<!-- Generate TOC -->
 
-There also some changes on the configuration file, so make sure to read the [Migration Guide](#migration-guide) if you're upgrading from version 1.x.
+## Table of Contents
 
-Here's what changed in version 2:
-
-### New Features
-
-- **Theme Select**, light mode? dark mode? you choose.
-- **[shadcn/ui](https://ui.shadcn.com/)**, change the UI library to `shadcn/ui`.
-- **Faster Response Time**, added cache to improve the response time.
-- **Revalidate Data**, data fetching now utilizing revalidate. (can be changed from config file)
-  > You can manually revalidate the data by sending POST request to `/api/revalidate` with `Authorization` header set to `{{ process.env.SITE_PASSWORD }}`.
-
-### Changed
-
-- **General Layout**, New fresh look with `shadcn/ui`.
-- **Download Link**, Added token that will be expired after x hour(s). (can be changed from config file)
-- **Raw Link**, Raw link only available for image, video, and audio files. Raw link are recommended for hosting web project assets or comments on forum.
-- **Footer**, now you can customize the footer from config file, also added support for Markdown.
-- **Data Fetching**, now using `Server Actions` instead of `API Routes`.
-- **Encryption**, moved to `Server Actions`.
-- **Typescript Config**, target changed from `ES5` to `ES2021`.
-- **Environment Variable**, now focus on Server Side Environment Variable.
-  - `NEXT_PUBLIC_ENCRYPTION_KEY` changed to `ENCRYPTION_KEY`.
-  - `NEXT_PUBLIC_SITE_PASSWORD` changed to `SITE_PASSWORD`.
-  - `MASTER_KEY` added.
-- **Configuration File**, things are changed:
-  - `version` bumped to `2.0`.
-  - `masterKey` moved to `Environment Variable`.
-  - `apiConfig.revalidate` added.
-  - `siteConfig.siteNameTemplate` added.
-  - `siteConfig.siteAuthor` added.
-  - `siteConfig.robots` added.
-  - `siteConfig.footer` added.
-  - `siteConfig.defaultAccentColor` deprecated.
-  - `siteConfig.breadcrumbMax` added.
-  - `siteConfig.toaster` added.
-  - `siteConfig.navbarItems[number].icons` changed to `lucide icons`.
-  - `siteConfig.supports` added.
-
-### Fixed
-
-- Rendering issue on mobile devices.
-
-### Dependency Update
-
-- `@iconify/react` switched to `lucide-react`.
-- `@mdx-js/loader` removed.
-- `@mdx-js/react` removed.
-- `@next/mdx` removed.
-- `@popperjs/core` removed.
-- `next` updated to `^14.1.4`.
-- `next-seo` removed.
-- `tailwind-merge` updated to `^2.2.2`.
+- [What is this?](#what-is-this)
+- [Why I made this?](#why-i-made-this)
+- [Features](#features)
+- [Known Issues](#known-issues)
+  - [File size limit](#file-size-limit)
+  - [No support for Google Docs, Sheets, and Slides](#no-support-for-google-docs-sheets-and-slides)
+  - [Can't seek on audio and video preview](#cant-seek-on-audio-and-video-preview)
+  - [Shared Drive is not supported](#shared-drive-is-not-supported)
+- [Might be Implemented](#might-be-implemented)
+  - [Internationalization / i18n](#internationalization--i18n)
+  - [Multiple drive](#multiple-drive)
+  - [Authentication](#authentication)
+- [Running on Local](#running-on-local)
+- [How to Contribute](#how-to-contribute)
+- [Support and Donations](#support-and-donations)
+- [License](#license)
 
 ## What is this?
 
-`next-gdrive-index` is an indexer for Google Drive, it's a simple project that I made to index my files in Google Drive.  
-It's aim to simplify the process of sharing files using Google Drive, and also implements some features that I think is useful for sharing files.
+`next-gdrive-index` is a Google Drive directory index.
+The aim of this project is to simplify the process of sharing files using Google Drive, and also add some features that _I think_ is useful when sharing a files.
 
-This project are **HEAVILY INSPIRED** by [onedrive-vercel-index](https://github.com/spencerwooo/onedrive-vercel-index) by SpencerWooo.
+> This project are **HEAVILY INSPIRED** by [onedrive-vercel-index](https://github.com/spencerwooo/onedrive-vercel-index) by [SpencerWooo](https://github.com/spencerwooo).
 
-### Why I made this?
+## Why I made this?
 
-when I compare the price between these two services, Google Drive still cheaper than Onedrive.  
-For 100GB plan, Google Drive is IDR 269.000 / ~$18 USD annually, and Onedrive is IDR 319.000 / ~$21 USD annually.  
-For free plan, Google Drive offering 15GB of storage, and Onedrive offering 5GB of storage.
+> **TLDR;**
+> It is cheaper to use Google Drive than other similar service
 
-I know there are a lot of people selling cheap edu account for Google Drive and Onedrive, but most of the time those account doesn't last long, especially Google Drive account. So I want to do it legit without buying cheap edu account or anything similar this time.
+There are a lot cloud storage service like Onedrive, Dropbox, Mega, etc.
+But, between all those service, I think Google Drive is a lot cheaper than others (at least in my region).
+
+Here are the pricing comparison between free and cheapest plan
+_Price are converted to IDR, since it's easier for me to compare this using my own currency_
+
+| Service          | Free plan       | Paid plan | Price                  | Price to Storage                            | Transfer Quota |
+| :--------------- | :-------------- | :-------- | :--------------------- | :------------------------------------------ | :------------: |
+| **Google Drive** | 15GB            | 2TB       | 135k IDR<br>~112k IDR  | <u>14.8GB / 1k / mo<br>17.8GB / 1k / yr</u> |  **<u>X</u>**  |
+| **Onedrive**\*\* | 5GB             | 1TB       | 96k IDR<br>80k IDR     | 10.4GB / 1k / mo<br>12.5GB / 1k / yr        |  **<u>X</u>**  |
+| **Dropbox**\*    | 2GB             | 2TB       | ~191k IDR<br>~159k IDR | 10.5GB / 1k / mo<br>12.5GB / 1k / yr        |       O        |
+| **MEGA**         | **<u>20GB</u>** | 2TB       | ~174k IDR<br>~145k IDR | 11.5GB / 1k / mo<br>13.8GB / 1k / yr        |       O        |
+
+\* Price are in USD, and there are no regional price for IDR
+\*\* There are no 2TB plan
+
+By using this data, I picked Google Drive instead other service.
+I know there are a lot of people selling cheap education account especially for Google Drive and Onedrive, but most of the time <u>those account doesn't last long</u>.
 
 ## Features
 
-- **Private Index**, lock the whole index site with password.
-- **Folder and file protection**, you can protect your folder and files with password.
-- **Readme file**, you can add readme file for your folder, so you can add some description for your folder.
-- **File preview**, you can preview some file types directly from the browser, without downloading it first.
+- **Private Index**, protect the whole site with a password
+- **Folder and file protection**, protect certain path with a password
+- **Readme file**, add description (or whatever) inside a readme to be rendered when you open the folder
+- **File preview**, preview the file before download ( Preview file size limit can be adjusted )
   - Image preview
   - Video preview
   - Audio preview
-  - Markdown preview
-  - PDF preview
-  - Document preview (docx, pptx, xlsx)
-  - Code preview
-  - Text preview
+  - Document preview
+  - Code / Text / Markdown preview
   - Manga preview (cbz)
-- **File search**, you can search for files and folders easily.
-- **Direct download**, you can download files directly from index site without opening Google Drive.
-- **Raw file link**, you can use the raw file link for hosting your web project assets or comments on forum.
+- **File search**, search by the file or folder name
+- **Direct download**, download directly via API route instead of google drive link ( Size limit can be adjusted )
+- **Raw file link**, embed your media files
+- **Light/Dark mode**, choose your side!
+- **Customizable Theme**, we are using `shadcn/ui` now! you can customize your site [https;//drive-demo.mbaharip.com/deploy#theme]
+- **Links**, add social, or information link on the navbar
+- **Sponsors**, using this for thing for community? add a sponsor / donate button on your navbar!
 
-## File Security
-
-> This only apply if `maxFileSize` is enabled.
-
-You need to set the file sharing permission to `Anyone with the link can view` for the files that you want to share.
-
-**Why?** because the download link will be redirected to the Google Drive download link, and it can only be accessed if the file is shared with `Anyone with the link can view` permission.
-
-If not, the download link will be redirected to the Google Drive web content link, and it can be accessed without sharing the file.
-
-But this might expose the file ID, so people might be able to access the files directly from Google Drive. (But I'm sure they can't access the folder itself, only the file that are being downloaded)
-
-## Known Issue
+## Known Issues
 
 ### File size limit
 
-> This only apply if you're using platform that have file size limit, like Vercel.  
-> If you're using VPS or other platform that doesn't have file size limit, you can disable `maxFileSize` inside config file.
+> This only apply if `maxFileSize` is enabled / more than 0
 
-File size limit causing some files can't be previewed, and the download will be redirected to the raw file link.  
-**This won't be fixed**, because it's a limitation from the deployment platform itself.
+You need to set the file sharing permission to `Anyone with the link can view` on the root folder.
 
-### Long Response Time
+**Why?**
+The download link will be redirected if the file you're trying to download is bigger than the `maxFileSize`, and most of platform are limiting the response body size (ex: Vercel limit is 4MB).  
+If you don't set the permission, people can't access or download the file.
 
-From version 2.0, We are using Cache to improve the response time.  
-It might take a long time for deep nested folders, but once the data is fetched, it will be cached and the response time will be faster.
-
-I also add [revalidate](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) config on page file to 5 minutes. You can change the value inside `src/app/page.tsx` & `src/app/[...rest]/page.tsx`.
-
-~~The flow of the project are:~~
-
-- ~~Validate the path is valid or not. (Only applied for `/...[path]`)~~
-- ~~Fetch the password, readme, and files from Google Drive.~~
-- ~~Show to the user.~~
-
-~~So, if you have a lot of files in your Google Drive, it might take a long time to fetch all the files.  
-To improve the response time, I added a cache to the response, so the next time you access the same path, it will be faster.~~
-
-~~ATM, it roughly take around 600 - 2 seconds to fetch all the data on my Google Drive.~~
-
-### Can't seek on audio and video preview
-
-It looks like the audio and video preview can't seek, so you need to listen/watch from the beginning.  
-I'm still looking for a solution for this.
-
-### ~~Shared Drive is now supported~~
-
-~~I don't have Google Shared Drive, so I can't test it and implement it.~~  
-Implemented by [@loadingthedev](https://github.com/loadingthedev) [(PR #4)](https://github.com/mbahArip/next-gdrive-index/pull/4)
+This will <u>expose the file ID</u>, and people can access the file directly from Google Drive.  
+But it <u>only apply to the file</u>, and they can't see or browse the folder directly from Google Drive.
 
 ### No support for Google Docs, Sheets, and Slides
 
-For now, I don't have any plan to implement this, because I think it's not necessary.  
-All Google Drive files like Docs, Sheets, and Slides are hidden from the list.
+For now, I don't have any plan to implement this, because I think it's not necessary.
 
-**PR are welcome if you want to implement this.**
+### ~~Can't seek on audio and video preview~~
 
-## Migration Guide
+~~It looks like you can't seek the audio and video preview, so you need to listen / watch from the beginning.~~
+Fixed on v2.0.2
 
-If you're upgrading from version 1.x to version 2, there are some changes that you need to do:
+### ~~Shared Drive is not supported~~
 
-### Configuration File
+~~I don't have Shared Drive, so I can't test it and implement it~~
+Implemented by [@loadingthedev](https://github.com/loadingthedev) [(PR #4)](https://github.com/mbahArip/next-gdrive-index/pull/4)
 
-> You can check the new Configuration Schema on `/src/schema.ts`
+## Might be Implemented
 
-There are some changes on the configuration file, here's the list of changes:
+Here are things that I want, and might be implemented on the future
 
-- `masterKey` **REMOVED**, we don't need this anymore
+### Internationalization / i18n
 
-- `apiConfig.rootFolder` **CHANGED**, you need to encrypt the folder ID on your localhost first  
-  `http://localhost:3000/api/internal/encrypt?q={{ folderId }}`
+It should be a good idea to have the site and deploying guide with multiple language support.
 
-- `apiConfig.proxyThumbnail` **ADDED**, default value is `true`
-- `siteConfig.siteNameTemplate` **ADDED**, default value is `%s - next-gdrive-index`
-- `siteConfig.siteAuthor` **ADDED**, default value is `mbahArip`
-- `siteConfig.robots` **ADDED**, default value is `noindex, nofollow`
-- `siteConfig.footer` **ADDED**, default value is `Powered by next-gdrive-index`
-- `siteConfig.defaultAccentColor` **REMOVED**, you can set the theme from `/src/app/globals.css` (more information about [shadcn/ui theme](https://ui.shadcn.com/docs/theming))
-- `siteConfig.breadcrumbMax` **ADDED**, default value is `3`
-- `siteConfig.toaster` **ADDED**, default value is `{ position: "bottom-right', duration: 3000 }`
-- `siteConfig.navbarItems[number].icons` **CHANGED**, you need to use [Lucide Icons](https://lucide.dev/icons) now
-- `siteConfig.supports` **ADDED**, you can leave it empty if you don't want to use it
+### Multiple drive
 
-### Environment Variable
+It's either from multiple Google Drive account with multiple Service Account, or a basic single Google Drive account with multiple root start point either in their own Drive or Shared Drive
 
-Now all the environment variable are on the server side, so you need to change the environment variable:
+### Authentication
 
-- `NEXT_PUBLIC_ENCRYPTION_KEY` **CHANGED** to `ENCRYPTION_KEY`
-- `NEXT_PUBLIC_SITE_PASSWORD` **CHANGED** to `SITE_PASSWORD`
-- `NEXT_PUBLIC_VERCEL_URL` **CHANGED** to `NEXT_PUBLIC_DOMAIN`
+Probably a good feature if you are a content creator that only want the one who subscribed to you get the files.  
+It might need a database, but idk if I can implement it without the need of database
 
-## Sponsors and Donations
+## Running on Local
+
+- **Clone the repository**
+  `git clone https://github.com/mbaharip/next-gdrive-index.git`
+  `cd next-gdrive-index`
+- **Install required dependencies**
+  `npm install`
+  `yarn install`
+- **Add environment file**
+  - **Using Configuration**
+    - Open [Deploy guide page](https://drive-demo.mbaharip.com/deploy#config)
+    - Scroll to the bottom to see the configuration form
+    - Fill out the form and download the file
+    - Extract the `.env` file to the root folder
+  - **Using example file**
+    - `cp .env.example .env`
+    - Fill out everything
+- Run the app
+  `npm run dev`
+  `yarn dev`
+- Check the app on `http://localhost:3000`
+
+## How to Contribute
+
+Want to add new feature or improve the existing one? or you find a bug and fixed it yourself?
+
+- Please check the issue tab first to see if someone already reporting a bug, or if you want to check any new feature / enhancement that not yet implemented
+- Use code base from `v2` branch instead of the `main`, since it was made for development on current version
+- Create a Pull Request, and wait for me checking your code
+
+## Support and Donations
 
 If you think I deserve it, you can support me by:
 
 - [Paypal (USD)](https://paypal.me/mbaharip)
 - [Ko-fi (USD)](https://ko-fi.com/mbaharip)
 - [Saweria (IDR)](https://saweria.co/mbaharip)
+
+## License
+
+This project is licensed under the AGPL-3.0 License - see the [LICENSE](LICENSE) file for details.
diff --git a/components.json b/components.json
index e048066..848837b 100644
--- a/components.json
+++ b/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "~/components",
-    "utils": "~/utils"
+    "utils": "~/utils/cn"
   }
 }
diff --git a/data/mockFiles.ts b/data/mockFiles.ts
deleted file mode 100644
index 6b435f9..0000000
--- a/data/mockFiles.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { IGDriveFiles } from "types/api/files";
-import { APIFilesResponse } from "types/api/response";
-
-const mockFiles: APIFilesResponse = {
-  timestamp: Date.now(),
-  responseTime: 0,
-  folders: [],
-  files: [],
-  nextPageToken: "nextpageToken",
-  readmeExists: true,
-  bannerExists: true,
-  passwordExists: false,
-};
-const mockFilesProtected: APIFilesResponse = {
-  timestamp: Date.now(),
-  responseTime: 0,
-  folders: [],
-  files: [],
-  nextPageToken: "nextpageToken",
-  readmeExists: true,
-  bannerExists: true,
-  passwordExists: true,
-};
-
-for (let i = 0; i < 10; i++) {
-  const folder: IGDriveFiles = {
-    mimeType: "application/vnd.google-apps.folder",
-    encryptedId: `encryptedId${i + 1}`,
-    name: `folder${i + 1}`,
-    trashed: false,
-    modifiedTime: new Date().toISOString(),
-  };
-  const file: IGDriveFiles = {
-    mimeType: "application/vnd.google-apps.file",
-    encryptedId: `encryptedId${i + 1}`,
-    name: `file${i + 1}`,
-    trashed: false,
-    modifiedTime: new Date().toISOString(),
-    fileExtension: "txt",
-    encryptedWebContentLink: "encryptedWebContentLink",
-    size: Math.floor(Math.random() * 1000000000),
-    thumbnailLink: "/og.png",
-    imageMediaMetadata:
-      Math.random() > 0.5
-        ? {
-            width: 1920,
-            height: 1080,
-            rotation: 0,
-          }
-        : null,
-    videoMediaMetadata:
-      Math.random() > 0.5
-        ? {
-            width: 1920,
-            height: 1080,
-            durationMillis: 100000,
-          }
-        : null,
-  };
-
-  mockFiles.folders.push(folder);
-  mockFiles.files.push(file);
-
-  folder.name = `folder${i + 1}protected`;
-  file.name = `file${i + 1}protected`;
-  mockFilesProtected.folders.push(folder);
-  mockFilesProtected.files.push(file);
-}
-
-export { mockFiles, mockFilesProtected };
diff --git a/package.json b/package.json
index 06ccf5e..0fe4e26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-gdrive-index",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",
diff --git a/public/fonts/Exo2-Bold.ttf b/public/fonts/Exo2-Bold.ttf
deleted file mode 100644
index 8404285..0000000
Binary files a/public/fonts/Exo2-Bold.ttf and /dev/null differ
diff --git a/public/fonts/Exo2-Regular.ttf b/public/fonts/Exo2-Regular.ttf
deleted file mode 100644
index 63bc4bb..0000000
Binary files a/public/fonts/Exo2-Regular.ttf and /dev/null differ
diff --git a/public/images/setup/google-cloud-1.png b/public/images/setup/google-cloud-1.png
deleted file mode 100644
index f603793..0000000
Binary files a/public/images/setup/google-cloud-1.png and /dev/null differ
diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28..0000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/setup/googleCloud.md b/public/setup/googleCloud.md
deleted file mode 100644
index e69de29..0000000
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422..0000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/app/@explorer.tsx b/src/app/@explorer.tsx
deleted file mode 100644
index 9acdbc8..0000000
--- a/src/app/@explorer.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useContext, useEffect, useMemo, useState } from "react";
-import toast from "react-hot-toast";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-import { Separator } from "~/components/ui/separator";
-
-import { LayoutContext } from "~/context/layoutContext";
-
-import config from "~/config/gIndex.config";
-
-import FileGrid from "./@file.grid";
-import FileList from "./@file.list";
-import { GetFiles } from "./actions";
-
-type Props = {
-  files: z.infer<typeof Schema_File>[];
-  nextPageToken?: string;
-  root?: boolean;
-};
-export default function FileBrowser({ files, nextPageToken, root }: Props) {
-  const { layout } = useContext(LayoutContext);
-  const pathname = usePathname();
-  const prevPath = useMemo<string>(() => {
-    const path = pathname
-      .split("/")
-      .slice(0, -1)
-      .join("/")
-      .replace(/\/+/g, "/");
-
-    return new URL(path, config.basePath).pathname;
-  }, [pathname]);
-
-  const [fileList, setFileList] =
-    useState<z.infer<typeof Schema_File>[]>(files);
-  const [nextToken, setNextToken] = useState<string | undefined>(nextPageToken);
-  const [loadMoreLoading, setLoadMoreLoading] = useState<boolean>(false);
-
-  const [loading, setLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
-  const onLoadMore = async () => {
-    setLoadMoreLoading(true);
-    try {
-      if (!nextToken) throw new Error("No more files to load");
-      const data = await GetFiles({ pageToken: nextToken });
-      const uniqueData = [...fileList, ...data.files].filter(
-        (item, index, array) =>
-          index === array.findIndex((i) => i.encryptedId === item.encryptedId),
-      );
-      setFileList(uniqueData);
-      // const uniqueData = new Set([...fileList, ...data.files]);
-      // setFileList([...uniqueData]);
-      setNextToken(data.nextPageToken);
-    } catch (error) {
-      const e = error as Error;
-      console.error(e.message);
-      toast.error(e.message);
-    } finally {
-      setLoadMoreLoading(false);
-    }
-  };
-
-  if (loading) {
-    return (
-      <div
-        className={cn(
-          "mx-auto h-[50dvh] w-full max-w-screen-desktop",
-          "rounded-[var(--radius)] bg-card",
-          "gap-3 p-3",
-          "flex-grow-0",
-          "flex flex-col items-center justify-center",
-        )}
-      >
-        <Icon
-          name='LoaderCircle'
-          size={32}
-          className='animate-spin'
-        />
-        <p>Wait a moment while we load your files...</p>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        "mx-auto w-full max-w-screen-desktop",
-        "gap-3 p-3",
-        "flex-grow-0",
-        "flex flex-col",
-      )}
-    >
-      {!root && (
-        <Button
-          size={"sm"}
-          variant={"ghost"}
-          className='justify-start'
-          asChild
-        >
-          <Link href={prevPath}>
-            <Icon
-              name='CornerLeftUp'
-              size={14}
-              className='mr-3'
-            />
-            Back
-          </Link>
-        </Button>
-      )}
-      {!fileList.length && (
-        <div className='col-span-full flex h-full min-h-[25vh] flex-col items-center justify-center gap-3'>
-          <Icon
-            name='Frown'
-            size={32}
-            className='text-muted-foreground'
-          />
-          <span className='text-center text-muted-foreground'>
-            There are no files in this folder
-          </span>
-        </div>
-      )}
-      {layout === "list" && (
-        <div className='flex w-full flex-col gap-1.5'>
-          {fileList.map((file) => (
-            <div
-              key={file.encryptedId}
-              className='group'
-            >
-              <FileList
-                key={file.encryptedId}
-                data={file}
-              />
-              <Separator className='mt-1.5 group-last:hidden' />
-            </div>
-          ))}
-        </div>
-      )}
-      {layout === "grid" && (
-        <div className='grid grid-cols-1 gap-3 mobile:grid-cols-2 tablet:grid-cols-3 desktop:grid-cols-4'>
-          {fileList.map((file) => (
-            <div
-              key={file.encryptedId}
-              className='group'
-            >
-              <FileGrid
-                key={file.encryptedId}
-                data={file}
-              />
-            </div>
-          ))}
-        </div>
-      )}
-
-      {nextToken && (
-        <Button
-          className='col-span-full gap-3'
-          size={"sm"}
-          variant={"secondary"}
-          disabled={loadMoreLoading}
-          onClick={onLoadMore}
-        >
-          {loadMoreLoading ? (
-            <>
-              <Icon
-                name='LoaderCircle'
-                size={16}
-                className='animate-spin'
-              />
-              Loading...
-            </>
-          ) : (
-            <>Load More</>
-          )}
-        </Button>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/@file.grid.tsx b/src/app/@file.grid.tsx
deleted file mode 100644
index ac5d9ba..0000000
--- a/src/app/@file.grid.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useMemo, useState } from "react";
-import toast from "react-hot-toast";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "~/components/ui/drawer";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
-
-import useMediaQuery from "~/hooks/useMediaQuery";
-import bytesToReadable from "~/utils/bytesFormat";
-import { durationToReadable } from "~/utils/durationFormat";
-import { getPreviewIcon } from "~/utils/previewHelper";
-
-import config from "~/config/gIndex.config";
-
-import { CreateDownloadToken } from "./actions";
-
-type Props = {
-  data: z.infer<typeof Schema_File>;
-};
-export default function FileGrid({ data }: Props) {
-  const pathname = usePathname();
-  const filePath = useMemo<string>(() => {
-    // const currentPath = pathname.startsWith("/e") ? pathname : `/e${pathname}`;
-    // Set to pathname to remove the /e prefix
-    const path = [pathname, encodeURIComponent(data.name)]
-      .join("/")
-      .replace(/\/+/g, "/");
-
-    return new URL(path, config.basePath).pathname;
-  }, [data, pathname]);
-
-  const [thumbnailURL, setThumbnailURL] = useState<string>(
-    `/api/thumb/${data.encryptedId}?size=2`,
-  );
-  const [actionOpen, setActionOpen] = useState<boolean>(false);
-  const isDesktop = useMediaQuery("(min-width: 768px)");
-
-  const onCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    try {
-      toast.promise(
-        navigator.clipboard.writeText(
-          new URL(filePath, config.basePath).toString(),
-        ),
-        {
-          loading: "Copying link...",
-          success: "Link copied!",
-          error: "Failed to copy link",
-        },
-      );
-    } catch (error) {
-      const e = error as Error;
-      console.error(e.message);
-    }
-  };
-  const onDownload = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    toast.loading("Creating download token...", {
-      id: `download-${data.encryptedId}`,
-    });
-    try {
-      const token = await CreateDownloadToken();
-      if (!token) throw new Error("Failed to create download token");
-      toast.success("Opening download link...", {
-        id: `download-${data.encryptedId}`,
-      });
-
-      const timeout = setTimeout(() => {
-        clearTimeout(timeout);
-        window.open(`/api/download/${data.encryptedId}?token=${token}`);
-      }, 1000);
-    } catch (error) {
-      const e = error as Error;
-      console.error(e.message);
-      toast.error(e.message, {
-        id: `download-${data.encryptedId}`,
-      });
-    }
-  };
-
-  return (
-    <div className='relative h-full w-full'>
-      {isDesktop ? (
-        <DropdownMenu
-          open={actionOpen}
-          onOpenChange={setActionOpen}
-        >
-          <DropdownMenuTrigger asChild>
-            <Button
-              size={"icon"}
-              variant={"secondary"}
-              className='absolute right-1 top-1 z-20 size-8'
-            >
-              <Icon
-                name='EllipsisVertical'
-                size={16}
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align='end'>
-            <DropdownMenuItem onClick={onCopy}>
-              <Icon
-                name='Link'
-                className='mr-3'
-                size={"1rem"}
-              />
-              Copy link
-            </DropdownMenuItem>
-            {data.mimeType.includes("folder") ? null : (
-              <DropdownMenuItem onClick={onDownload}>
-                <Icon
-                  name='Download'
-                  className='mr-3'
-                  size={"1rem"}
-                />
-                Download
-              </DropdownMenuItem>
-            )}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : (
-        <Drawer
-          open={actionOpen}
-          onOpenChange={setActionOpen}
-          shouldScaleBackground
-        >
-          <DrawerTrigger asChild>
-            <Button
-              size={"icon"}
-              variant={"secondary"}
-              className='absolute right-1 top-1 z-20 size-8'
-            >
-              <Icon
-                name='EllipsisVertical'
-                size={16}
-              />
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent>
-            <DrawerHeader className='text-left'>
-              <DrawerTitle>Actions</DrawerTitle>
-              <DrawerDescription>
-                What would you like to do with this file?
-              </DrawerDescription>
-            </DrawerHeader>
-            <div className='grid gap-1.5 px-4'>
-              <DrawerClose asChild>
-                <Button onClick={onCopy}>
-                  <Icon
-                    name='Link'
-                    className='mr-3'
-                    size={"1rem"}
-                  />
-                  Copy link
-                </Button>
-              </DrawerClose>
-              {data.mimeType.includes("folder") ? null : (
-                <DrawerClose asChild>
-                  <Button onClick={onDownload}>
-                    <Icon
-                      name='Download'
-                      className='mr-3'
-                      size={"1rem"}
-                    />
-                    Download
-                  </Button>
-                </DrawerClose>
-              )}
-            </div>
-
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button variant={"secondary"}>Close</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-      )}
-      <Link
-        href={filePath}
-        className={cn(
-          "h-full w-full",
-          "rounded-[var(--radius)]",
-          "flex flex-col content-stretch justify-stretch gap-3",
-          "hover:bg-muted/50",
-          "transition",
-          "border border-border",
-        )}
-      >
-        <div
-          className={cn(
-            "flex-shrink flex-grow",
-            "flex flex-col items-center gap-3",
-            "relative",
-          )}
-        >
-          {/* If it's media, show thumbnail */}
-          <div className='relative grid h-32 w-full flex-shrink-0 place-items-center overflow-hidden bg-muted/25'>
-            {data.thumbnailLink &&
-            (data.mimeType.startsWith("video") ||
-              data.mimeType.startsWith("image")) ? (
-              <>
-                <img
-                  src={thumbnailURL}
-                  alt={data.name}
-                  onLoad={(e) => {
-                    if (thumbnailURL.includes("size=2")) {
-                      setThumbnailURL(`/api/thumb/${data.encryptedId}`);
-                    }
-                  }}
-                  className='rounded-top-[var(--radius)] absolute -z-0 h-32 w-full flex-shrink-0 flex-grow-0 object-cover opacity-50'
-                />
-                <img
-                  src={thumbnailURL}
-                  alt={data.name}
-                  onLoad={(e) => {
-                    if (thumbnailURL.includes("size=2")) {
-                      setThumbnailURL(`/api/thumb/${data.encryptedId}`);
-                    }
-                  }}
-                  className='relative z-0 h-32 w-full flex-shrink-0 flex-grow-0 object-contain backdrop-blur'
-                />
-
-                {data.mimeType.startsWith("video") && (
-                  <>
-                    <Icon
-                      name='Play'
-                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
-                      size={32}
-                    />
-                    <div className='absolute bottom-0 right-0 z-10 bg-background px-1 py-0.5 text-xs text-foreground'>
-                      {durationToReadable(
-                        data.videoMediaMetadata?.durationMillis || 0,
-                      )}
-                    </div>
-                  </>
-                )}
-              </>
-            ) : (
-              <Icon
-                name={
-                  data.mimeType.includes("folder")
-                    ? "Folder"
-                    : getPreviewIcon(data.fileExtension || "", data.mimeType)
-                }
-                className='size-16 flex-shrink-0 flex-grow-0 p-3'
-              />
-            )}
-          </div>
-
-          {/* File data */}
-          <div className='flex h-full w-full flex-col justify-between gap-1.5 px-3 py-1.5'>
-            <span className='line-clamp-2 h-full whitespace-pre-wrap text-pretty break-all'>
-              {config.siteConfig.showFileExtension
-                ? data.name
-                : data.fileExtension
-                ? data.name.replace(new RegExp(`.${data.fileExtension}$`), "")
-                : data.name}
-            </span>
-            <div className='muted flex items-center gap-1'>
-              <span
-                className={cn(
-                  "line-clamp-1 whitespace-pre-wrap break-all text-sm",
-                  config.siteConfig.showFileExtension &&
-                    !data.mimeType.includes("folder")
-                    ? "hidden"
-                    : "",
-                )}
-              >
-                {data.mimeType.includes("folder")
-                  ? "folder"
-                  : data.fileExtension}
-              </span>
-              {!data.mimeType.includes("folder") && (
-                <>
-                  {config.siteConfig.showFileExtension ? null : (
-                    <Icon
-                      name='Slash'
-                      size={"0.875rem"}
-                    />
-                  )}
-                  <span className='whitespace-nowrap text-sm'>
-                    {bytesToReadable(data.size || 0)}
-                  </span>
-                </>
-              )}
-            </div>
-            <div className='muted flex items-center gap-1'>
-              <span className='whitespace-nowrap text-sm'>
-                {new Date(data.modifiedTime).toLocaleDateString()}
-              </span>
-            </div>
-          </div>
-        </div>
-      </Link>
-    </div>
-  );
-}
diff --git a/src/app/@file.list.tsx b/src/app/@file.list.tsx
deleted file mode 100644
index 0513e51..0000000
--- a/src/app/@file.list.tsx
+++ /dev/null
@@ -1,308 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useMemo, useState } from "react";
-import toast from "react-hot-toast";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "~/components/ui/drawer";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
-
-import useMediaQuery from "~/hooks/useMediaQuery";
-import bytesToReadable from "~/utils/bytesFormat";
-import { durationToReadable } from "~/utils/durationFormat";
-import { getPreviewIcon } from "~/utils/previewHelper";
-
-import config from "~/config/gIndex.config";
-
-import { CreateDownloadToken } from "./actions";
-
-type Props = {
-  data: z.infer<typeof Schema_File>;
-};
-export default function FileList({ data }: Props) {
-  const pathname = usePathname();
-
-  const filePath = useMemo<string>(() => {
-    const path = [pathname, encodeURIComponent(data.name)]
-      .join("/")
-      .replace(/\/+/g, "/");
-
-    return new URL(path, config.basePath).pathname;
-  }, [data, pathname]);
-
-  const [thumbnailURL, setThumbnailURL] = useState<string>(
-    `/api/thumb/${data.encryptedId}?size=2`,
-  );
-  const [actionOpen, setActionOpen] = useState<boolean>(false);
-  const isDesktop = useMediaQuery("(min-width: 768px)");
-
-  const onCopy = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    try {
-      toast.promise(
-        navigator.clipboard.writeText(
-          new URL(filePath, config.basePath).toString(),
-        ),
-        {
-          loading: "Copying link...",
-          success: "Link copied!",
-          error: "Failed to copy link",
-        },
-      );
-    } catch (error) {
-      const e = error as Error;
-      console.error(e.message);
-    }
-  };
-  const onDownload = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    toast.loading("Creating download token...", {
-      id: `download-${data.encryptedId}`,
-    });
-    try {
-      const token = await CreateDownloadToken();
-      if (!token) throw new Error("Failed to create download token");
-      toast.success("Opening download link...", {
-        id: `download-${data.encryptedId}`,
-      });
-
-      const timeout = setTimeout(() => {
-        clearTimeout(timeout);
-        window.open(`/api/download/${data.encryptedId}?token=${token}`);
-      }, 1000);
-    } catch (error) {
-      const e = error as Error;
-      console.error(e.message);
-      toast.error(e.message, {
-        id: `download-${data.encryptedId}`,
-      });
-    }
-  };
-
-  return (
-    <div className='relative flex h-full w-full flex-row-reverse items-center'>
-      <div className='absolute bottom-auto right-0 top-auto grid flex-grow place-items-center'>
-        {isDesktop ? (
-          <DropdownMenu
-            open={actionOpen}
-            onOpenChange={setActionOpen}
-          >
-            <DropdownMenuTrigger asChild>
-              <Button
-                size={"icon"}
-                variant={"ghost"}
-                // className='size-8'
-                className='absolute right-1 z-20 size-8'
-              >
-                <Icon
-                  name='EllipsisVertical'
-                  size={16}
-                />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align='end'>
-              <DropdownMenuItem onClick={onCopy}>
-                <Icon
-                  name='Link'
-                  className='mr-3'
-                  size={"1rem"}
-                />
-                Copy link
-              </DropdownMenuItem>
-              {data.mimeType.includes("folder") ? null : (
-                <DropdownMenuItem onClick={onDownload}>
-                  <Icon
-                    name='Download'
-                    className='mr-3'
-                    size={"1rem"}
-                  />
-                  Download
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        ) : (
-          <Drawer
-            open={actionOpen}
-            onOpenChange={setActionOpen}
-            shouldScaleBackground
-          >
-            <DrawerTrigger asChild>
-              <Button
-                size={"icon"}
-                variant={"ghost"}
-                // className='size-8'
-                className='z-20 size-8'
-              >
-                <Icon
-                  name='EllipsisVertical'
-                  size={16}
-                />
-              </Button>
-            </DrawerTrigger>
-            <DrawerContent>
-              <DrawerHeader className='text-left'>
-                <DrawerTitle>Actions</DrawerTitle>
-                <DrawerDescription>
-                  What would you like to do with this file?
-                </DrawerDescription>
-              </DrawerHeader>
-              <div className='grid gap-1.5 px-4'>
-                <DrawerClose asChild>
-                  <Button onClick={onCopy}>
-                    <Icon
-                      name='Link'
-                      className='mr-3'
-                      size={"1rem"}
-                    />
-                    Copy link
-                  </Button>
-                </DrawerClose>
-                {data.mimeType.includes("folder") ? null : (
-                  <DrawerClose asChild>
-                    <Button onClick={onDownload}>
-                      <Icon
-                        name='Download'
-                        className='mr-3'
-                        size={"1rem"}
-                      />
-                      Download
-                    </Button>
-                  </DrawerClose>
-                )}
-              </div>
-
-              <DrawerFooter>
-                <DrawerClose asChild>
-                  <Button variant={"secondary"}>Close</Button>
-                </DrawerClose>
-              </DrawerFooter>
-            </DrawerContent>
-          </Drawer>
-        )}
-      </div>
-      <Link
-        href={filePath}
-        className={cn(
-          "relative",
-          // "w-full",
-          "px-1.5 py-1 pr-10", // since action button is size-8
-          "rounded-[var(--radius)]",
-          "flex flex-grow items-center justify-between gap-3",
-          "hover:bg-muted/50",
-          "transition",
-        )}
-      >
-        <div className={cn("flex-shrink flex-grow", "flex items-center gap-3")}>
-          {/* If it's media, show thumbnail */}
-          <div className='relative flex-shrink-0 rounded-[var(--radius)] bg-muted/25'>
-            {data.thumbnailLink &&
-            (data.mimeType.startsWith("video") ||
-              data.mimeType.startsWith("image")) ? (
-              <>
-                <img
-                  src={thumbnailURL}
-                  alt={data.name}
-                  onLoad={(e) => {
-                    if (thumbnailURL.includes("size=2")) {
-                      setThumbnailURL(`/api/thumb/${data.encryptedId}`);
-                    }
-                  }}
-                  className='size-16 flex-shrink-0 flex-grow-0 rounded-[var(--radius)] object-cover tablet:size-20'
-                />
-
-                {data.mimeType.startsWith("video") && (
-                  <>
-                    <Icon
-                      name='Play'
-                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
-                      size={24}
-                    />
-                    <div className='absolute bottom-0 right-0 z-10 bg-background px-1 py-0.5 text-[10px] text-foreground tablet:text-xs'>
-                      {durationToReadable(
-                        data.videoMediaMetadata?.durationMillis || 0,
-                      )}
-                    </div>
-                  </>
-                )}
-              </>
-            ) : (
-              <Icon
-                name={
-                  data.mimeType.includes("folder")
-                    ? "Folder"
-                    : getPreviewIcon(data.fileExtension || "", data.mimeType)
-                }
-                className='size-16 flex-shrink-0 flex-grow-0 p-3 tablet:size-20'
-              />
-            )}
-          </div>
-
-          {/* File data */}
-          <div className='flex flex-grow flex-col'>
-            <span className='line-clamp-1 whitespace-pre-wrap break-all'>
-              {config.siteConfig.showFileExtension
-                ? data.name
-                : data.fileExtension
-                ? data.name.replace(new RegExp(`.${data.fileExtension}$`), "")
-                : data.name}
-            </span>
-            <div className='muted flex items-center gap-1'>
-              <span
-                className={cn(
-                  "line-clamp-1 whitespace-pre-wrap break-all text-sm",
-                  config.siteConfig.showFileExtension &&
-                    !data.mimeType.includes("folder")
-                    ? "hidden"
-                    : "",
-                )}
-              >
-                {data.mimeType.includes("folder")
-                  ? "folder"
-                  : data.fileExtension}
-              </span>
-              {!data.mimeType.includes("folder") && (
-                <>
-                  {config.siteConfig.showFileExtension ? null : (
-                    <Icon
-                      name='Slash'
-                      size={"0.875rem"}
-                    />
-                  )}
-                  <span className='whitespace-nowrap text-sm'>
-                    {bytesToReadable(data.size || 0)}
-                  </span>
-                </>
-              )}
-            </div>
-            <div className='muted flex items-center gap-1'>
-              <span className='whitespace-nowrap text-sm'>
-                {new Date(data.modifiedTime).toLocaleDateString()}
-              </span>
-            </div>
-          </div>
-        </div>
-      </Link>
-    </div>
-  );
-}
diff --git a/src/app/@header.breadcrumb.tsx b/src/app/@header.breadcrumb.tsx
deleted file mode 100644
index d371315..0000000
--- a/src/app/@header.breadcrumb.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-"use client";
-
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
-import Link from "next/link";
-import { Fragment, useState } from "react";
-import { z } from "zod";
-import { Schema_Breadcrumb } from "~/schema";
-
-import Icon from "~/components/Icon";
-import {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "~/components/ui/breadcrumb";
-import { Button } from "~/components/ui/button";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "~/components/ui/drawer";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "~/components/ui/dropdown-menu";
-import { Separator } from "~/components/ui/separator";
-import { Skeleton } from "~/components/ui/skeleton";
-
-import useMediaQuery from "~/hooks/useMediaQuery";
-
-import config from "~/config/gIndex.config";
-
-type Props = {
-  data: z.infer<typeof Schema_Breadcrumb>[];
-  loading?: boolean;
-};
-export default function HeaderBreadcrumb({ data, loading }: Props) {
-  const [open, setOpen] = useState<boolean>(false);
-  const isDesktop = useMediaQuery("(min-width: 768px)");
-
-  if (loading) return <Skeleton className='h-5 w-1/2' />;
-
-  return (
-    <div className='flex w-full flex-nowrap items-center'>
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <Link href={"/"}>
-                <div className='flex items-center gap-1'>
-                  <Icon
-                    name='FolderRoot'
-                    size={16}
-                  />
-                  ~
-                </div>
-              </Link>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          {!!data.length ? (
-            <>
-              <BreadcrumbSeparator />
-
-              {data.length > config.siteConfig.breadcrumbMax ? (
-                <>
-                  {isDesktop ? (
-                    <DropdownMenu
-                      open={open}
-                      onOpenChange={setOpen}
-                    >
-                      <DropdownMenuTrigger>
-                        <BreadcrumbEllipsis className='w-4' />
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align='start'>
-                        {data
-                          .slice(0, -config.siteConfig.breadcrumbMax + 1)
-                          .map((item, _, array) => (
-                            <DropdownMenuItem
-                              key={`${item.label}/${item.href}`}
-                            >
-                              <BreadcrumbLink asChild>
-                                <Link
-                                  href={`/${array
-                                    .slice(0, array.indexOf(item) + 1)
-                                    .map((item) => item.href)
-                                    .join("/")}`}
-                                  className='w-full'
-                                >
-                                  {item.label}
-                                </Link>
-                              </BreadcrumbLink>
-                            </DropdownMenuItem>
-                          ))}
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  ) : (
-                    <Drawer
-                      open={open}
-                      onOpenChange={setOpen}
-                    >
-                      <DrawerTrigger>
-                        <BreadcrumbEllipsis className='w-4' />
-                      </DrawerTrigger>
-                      <DrawerContent>
-                        <DrawerHeader className='text-left'>
-                          <DrawerTitle>
-                            Navigate to parent directories
-                          </DrawerTitle>
-                          <Separator />
-                        </DrawerHeader>
-                        <div className='grid gap-1.5 px-4'>
-                          {data
-                            .slice(0, -config.siteConfig.breadcrumbMax + 1)
-                            .map((item, _, array) => (
-                              <BreadcrumbItem
-                                key={`${item.label}/${item.href}`}
-                              >
-                                <BreadcrumbLink asChild>
-                                  <Link
-                                    href={`/${array
-                                      .slice(0, array.indexOf(item) + 1)
-                                      .map((item) => item.href)
-                                      .join("/")}`}
-                                    className='w-full py-1.5'
-                                  >
-                                    {item.label}
-                                  </Link>
-                                </BreadcrumbLink>
-                              </BreadcrumbItem>
-                            ))}
-                        </div>
-
-                        <DrawerFooter>
-                          <DrawerClose asChild>
-                            <Button variant={"secondary"}>Close</Button>
-                          </DrawerClose>
-                        </DrawerFooter>
-                      </DrawerContent>
-                    </Drawer>
-                  )}
-
-                  <BreadcrumbSeparator />
-                </>
-              ) : null}
-
-              {data.slice(-config.siteConfig.breadcrumbMax + 1).map((item) => (
-                <Fragment key={`${item.label}/${item.href}`}>
-                  <BreadcrumbItem className='line-clamp-1 whitespace-pre-wrap break-all'>
-                    {item.href ? (
-                      <>
-                        <BreadcrumbLink asChild>
-                          <Link
-                            href={`/${data
-                              .map((item) => item.href)
-                              .join("/")
-                              .replace(/\/\//g, "/")}`}
-                          >
-                            {item.label}
-                          </Link>
-                        </BreadcrumbLink>
-                      </>
-                    ) : (
-                      <BreadcrumbPage className='line-clamp-1 whitespace-pre-wrap break-all'>
-                        {item.label}
-                      </BreadcrumbPage>
-                    )}
-                  </BreadcrumbItem>
-                  {item.href && <BreadcrumbSeparator />}
-                </Fragment>
-              ))}
-            </>
-          ) : null}
-        </BreadcrumbList>
-      </Breadcrumb>
-    </div>
-  );
-}
diff --git a/src/app/@header.title.tsx b/src/app/@header.title.tsx
deleted file mode 100644
index 3a9da84..0000000
--- a/src/app/@header.title.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import { PropsWithChildren } from "react";
-
-import { Skeleton } from "~/components/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
-
-export default function HeaderTitle({
-  children,
-  loading,
-}: PropsWithChildren<{ loading?: boolean }>) {
-  if (loading) return <Skeleton className='my-0.5 h-8 w-full' />;
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <h2 className='line-clamp-1'>{children}</h2>
-      </TooltipTrigger>
-      <TooltipContent>{children}</TooltipContent>
-    </Tooltip>
-  );
-}
diff --git a/src/app/@header.tsx b/src/app/@header.tsx
deleted file mode 100644
index 9ef6071..0000000
--- a/src/app/@header.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { z } from "zod";
-import { Schema_Breadcrumb } from "~/schema";
-import { cn } from "~/utils";
-
-import HeaderBreadcrumb from "./@header.breadcrumb";
-
-type Props = {
-  name: string;
-  breadcrumb?: z.infer<typeof Schema_Breadcrumb>[];
-};
-export default function Header({ name, breadcrumb }: Props) {
-  const [loading, setLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
-  return (
-    <div
-      className={cn(
-        "w-full",
-        "flex flex-col items-center justify-between gap-3",
-      )}
-    >
-      <div
-        className={cn(
-          "w-full",
-          "flex flex-grow items-center justify-between gap-3",
-        )}
-      >
-        {/* <HeaderTitle loading={loading}>{name}</HeaderTitle> */}
-
-        <HeaderBreadcrumb
-          data={breadcrumb || []}
-          loading={loading}
-        />
-        {/* <HeaderButton loading={loading} /> */}
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/@not-found.tsx b/src/app/@not-found.tsx
deleted file mode 100644
index 9b73830..0000000
--- a/src/app/@not-found.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client";
-
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-
-import useRouter from "~/hooks/usePRouter";
-
-export default function NotFoundComponent() {
-  const router = useRouter();
-  return (
-    <div
-      className={cn(
-        "mx-auto h-full w-full max-w-md",
-        "flex flex-grow flex-col items-center justify-center gap-3",
-      )}
-    >
-      <Icon
-        name='Frown'
-        size={32}
-        className='text-muted-foreground'
-      />
-      <span className='text-center text-muted-foreground'>
-        The file you are looking for does not exist
-      </span>
-
-      <div className='flex w-full flex-col items-center gap-3 pt-8'>
-        <Button
-          className='w-full'
-          onClick={() => router.push("/")}
-        >
-          Back to home
-        </Button>
-        <Button
-          variant={"outline"}
-          className='w-full'
-          onClick={() => router.back()}
-        >
-          Back to previous page
-        </Button>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/@preview.audio.tsx b/src/app/@preview.audio.tsx
deleted file mode 100644
index ba5d2dc..0000000
--- a/src/app/@preview.audio.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
-import "react-h5-audio-player/lib/styles.css";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-
-import { CreateDownloadToken } from "./actions";
-
-// import "./r5-style.css";
-
-const Plyr = dynamic(() => import("plyr-react"), {
-  ssr: false,
-  loading: () => (
-    <div
-      className={cn(
-        "h-auto min-h-[50dvh] w-full",
-        "flex flex-grow flex-col items-center justify-center gap-3",
-      )}
-    >
-      <Icon
-        name='LoaderCircle'
-        size={32}
-        className='animate-spin text-foreground'
-      />
-      <p>Loading player...</p>
-    </div>
-  ),
-});
-
-type Props = {
-  file: z.infer<typeof Schema_File>;
-};
-export default function PreviewAudio({ file }: Props) {
-  const [audioSrc, setAudioSrc] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string>("");
-
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!file.encryptedWebContentLink) {
-          setError("No audio to preview");
-          return;
-        }
-        const token = await CreateDownloadToken();
-        setAudioSrc(`/api/stream/${file.encryptedId}?token=${token}`);
-      } catch (error) {
-        const e = error as Error;
-        console.error(e);
-        setError(e.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [file]);
-
-  return (
-    <div className='flex h-full min-h-[33dvh] w-full items-center justify-center py-3'>
-      {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[50dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Loading player...</p>
-        </div>
-      ) : error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-3'>
-          <Icon
-            name='CircleX'
-            size={24}
-            className='text-destructive'
-          />
-          <span className='text-center text-destructive'>{error}</span>
-        </div>
-      ) : (
-        <div className='w-full'>
-          <Plyr
-            source={{
-              type: "audio",
-              sources: [
-                {
-                  src: audioSrc,
-                  type: file.mimeType,
-                  size: file.size,
-                },
-              ],
-              title: file.name,
-            }}
-            options={{
-              controls: [
-                "play-large",
-                "play",
-                "progress",
-                "current-time",
-                "duration",
-                "mute",
-                "volume",
-                "settings",
-                "fullscreen",
-              ],
-              volume: 0.5,
-              muted: false,
-              loop: {
-                active: false,
-              },
-              speed: {
-                selected: 1,
-                options: [0.5, 1, 1.5, 2],
-              },
-              keyboard: {
-                focused: true,
-                global: false,
-              },
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/@preview.image.tsx b/src/app/@preview.image.tsx
deleted file mode 100644
index 0d60d27..0000000
--- a/src/app/@preview.image.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
-
-import config from "~/config/gIndex.config";
-
-import { CreateDownloadToken } from "./actions";
-
-type Props = {
-  file: z.infer<typeof Schema_File>;
-};
-export default function PreviewImage({ file }: Props) {
-  const [imgSrc, setImgSrc] = useState<string>(
-    `/api/thumb/${file.encryptedId}?size=4`,
-  );
-  const [imgLoaded, setImgLoaded] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string>("");
-
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!file.encryptedWebContentLink) {
-          setError("No image to preview");
-          return;
-        }
-        const token = await CreateDownloadToken();
-
-        const streamURL = new URL(
-          `/api/thumb/${file.encryptedId}?size=1000`,
-          config.basePath,
-        );
-        streamURL.searchParams.set("token", token);
-        fetch(streamURL, {
-          headers: {
-            Range: `bytes=0-${(file.size || 1) - 1}`,
-          },
-        })
-          .then((res) => {
-            if (!res.ok) {
-              throw new Error("Could not load image");
-            }
-            return res.blob();
-          })
-          .then((blob) => {
-            const urlobject = URL.createObjectURL(blob);
-            setImgSrc(urlobject);
-            const timeout = setTimeout(() => {
-              setImgLoaded(true);
-              clearTimeout(timeout);
-            }, 150); // Add a delay to show the image
-          });
-      } catch (error) {
-        const e = error as Error;
-        console.error(e);
-        setError(e.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [file]);
-
-  return (
-    <div className='flex min-h-[33dvh] w-full items-center justify-center py-3'>
-      {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[50dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Loading image...</p>
-        </div>
-      ) : error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-3'>
-          <Icon
-            name='CircleX'
-            size={24}
-            className='text-destructive'
-          />
-          <span className='text-center text-destructive'>{error}</span>
-        </div>
-      ) : (
-        <div className='h-fit w-full space-y-3 overflow-hidden rounded-[var(--radius)]'>
-          <img
-            src={imgSrc}
-            alt={file.name}
-            className={cn(
-              "h-full max-h-[70dvh] w-full bg-muted object-contain object-center transition",
-              imgLoaded ? "blur-none" : "animate-pulse blur",
-            )}
-            onError={(e) => {
-              console.error(e);
-              setError(
-                "Could not preview this image, try downloading the file",
-              );
-            }}
-          />
-
-          <Alert className='bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-500'>
-            <div className='flex items-start gap-3'>
-              <Icon
-                name='TriangleAlert'
-                className='size-5'
-              />
-              <div className='flex flex-col'>
-                <AlertTitle>Preview Only</AlertTitle>
-                <AlertDescription>
-                  This image is a preview and may not be the full resolution.
-                  Please download the file for the full resolution.
-                </AlertDescription>
-              </div>
-            </div>
-          </Alert>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/@preview.layout.tsx b/src/app/@preview.layout.tsx
deleted file mode 100644
index 01119cf..0000000
--- a/src/app/@preview.layout.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Card, CardContent } from "~/components/ui/card";
-
-import { getFileType } from "~/utils/previewHelper";
-
-import config from "~/config/gIndex.config";
-
-import PreviewAction from "./@preview.action";
-import PreviewAudio from "./@preview.audio";
-import PreviewDoc from "./@preview.doc";
-import PreviewImage from "./@preview.image";
-import PreviewManga from "./@preview.manga";
-import PreviewRich from "./@preview.rich";
-import PreviewUnknown from "./@preview.unknown";
-import PreviewVideo from "./@preview.video";
-import RichHeader from "./@rich-header";
-
-type Props = {
-  data: z.infer<typeof Schema_File>;
-  fileType: "unknown" | ReturnType<typeof getFileType>;
-};
-export default function FilePreviewLayout({ data, fileType }: Props) {
-  const [view, setView] = useState<"markdown" | "raw">("markdown");
-
-  return (
-    <div className='flex flex-col gap-3'>
-      <Card>
-        <RichHeader
-          title={data.name}
-          view={view}
-          onViewChange={setView}
-          fileType={fileType}
-        />
-        <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
-          {config.apiConfig.streamMaxSize &&
-          Number(data.size || 0) > config.apiConfig.streamMaxSize ? (
-            <div
-              className={cn(
-                "h-auto min-h-[33dvh] w-full",
-                "flex flex-grow flex-col items-center justify-center gap-3",
-              )}
-            >
-              <Icon
-                name='Frown'
-                size={32}
-                className='text-muted-foreground'
-              />
-              <h4 className='text-muted-foreground'>Preview not available</h4>
-              <p className='text-center text-muted-foreground tablet:text-sm'>
-                Looks like this file size exceed the preview size limit
-              </p>
-            </div>
-          ) : (
-            /**
-             * TODO: Might need a better way to handle large files preview
-             * like manga, pdf, etc
-             *
-             * For now it's downloading the whole file and then previewing it
-             * which is not a good implementation
-             */
-            <div className='px-3'>
-              {fileType === "image" ? (
-                <PreviewImage file={data} />
-              ) : fileType === "audio" ? (
-                <PreviewAudio file={data} />
-              ) : fileType === "video" ? (
-                <PreviewVideo file={data} />
-              ) : fileType === "code" ? (
-                <PreviewRich
-                  file={data}
-                  code
-                  view={view}
-                />
-              ) : fileType === "text" ? (
-                <PreviewRich
-                  file={data}
-                  view={view}
-                />
-              ) : fileType === "markdown" ? (
-                <PreviewRich
-                  file={data}
-                  view={view}
-                />
-              ) : fileType === "document" ? (
-                <PreviewDoc file={data} />
-              ) : fileType === "pdf" ? (
-                <PreviewDoc file={data} />
-              ) : fileType === "manga" ? (
-                <PreviewManga file={data} />
-              ) : (
-                <PreviewUnknown />
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
-      <PreviewAction file={data} />
-    </div>
-  );
-}
diff --git a/src/app/@preview.rich.tsx b/src/app/@preview.rich.tsx
deleted file mode 100644
index 1d56239..0000000
--- a/src/app/@preview.rich.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-
-import Markdown from "./@markdown";
-import { GetContent } from "./actions";
-
-type Props = {
-  file: z.infer<typeof Schema_File>;
-  view: "markdown" | "raw";
-  code?: boolean;
-};
-export default function PreviewRich({ file, code, view }: Props) {
-  const [fetchedContent, setFetchedContent] = useState<string>("");
-  const [content, setContent] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string>("");
-
-  const [expand, setExpand] = useState<boolean>(false);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const text = await GetContent(file.encryptedId);
-        if (!text) {
-          setError("Looks like there is no content to preview");
-          return;
-        }
-        // setFetchedContent(text);
-        // if (code) {
-        //   setContent(`\`\`\`${file.fileExtension}\n${text}\`\`\``);
-        // } else {
-        setContent(text.trim());
-        // }
-      } catch (error) {
-        const e = error as Error;
-        console.error(e);
-        setError(e.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [file, code]);
-
-  return (
-    <div className='flex h-fit min-h-[33dvh] w-full items-center justify-center py-3'>
-      {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[50dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Loading content...</p>
-        </div>
-      ) : error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-3'>
-          <Icon
-            name='CircleX'
-            size={24}
-            className='text-destructive'
-          />
-          <span className='text-center text-destructive'>{error}</span>
-        </div>
-      ) : (
-        <div
-          className={cn(
-            "relative w-full overflow-hidden",
-            expand ? "h-full" : "max-h-[50dvh]",
-          )}
-        >
-          <div
-            className={cn(
-              "w-full overflow-hidden",
-              expand
-                ? "[mask-image:linear-gradient(180deg,white_65%,white] h-full"
-                : "h-[50dvh] max-h-[50dvh] [mask-image:linear-gradient(180deg,white_65%,rgba(255,255,255,0))]",
-            )}
-          >
-            <Markdown
-              content={
-                code && view === "markdown"
-                  ? `\`\`\`${file.fileExtension}\n${content}`
-                  : content
-              }
-              view={view}
-            />
-          </div>
-          <div
-            className={cn(
-              "bottom-0 z-10 flex w-full items-center justify-center py-3 transition",
-              expand ? "relative" : "absolute",
-              // expand
-              //   ? "pointer-events-none opacity-0"
-              //   : "pointer-events-auto opacity-100",
-            )}
-          >
-            <Button
-              size={"sm"}
-              variant={"secondary"}
-              className='gap-1.5'
-              onClick={() => {
-                setExpand((prev) => !prev);
-              }}
-            >
-              <Icon
-                name={expand ? "ChevronUp" : "ChevronDown"}
-                size={16}
-              />
-              {expand ? "Collapse" : "Expand"}
-            </Button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/@preview.unknown.tsx b/src/app/@preview.unknown.tsx
deleted file mode 100644
index b044810..0000000
--- a/src/app/@preview.unknown.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-
-export default function PreviewUnknown() {
-  const [loading, setLoading] = useState<boolean>(true);
-
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
-  return (
-    <div className='flex min-h-[33dvh] w-full items-center justify-center py-3'>
-      {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[33dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Loading content...</p>
-        </div>
-      ) : (
-        <div
-          className={cn(
-            "h-auto min-h-[33dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='Frown'
-            size={32}
-            className='text-muted-foreground'
-          />
-          <h4 className='text-muted-foreground'>Preview not available</h4>
-          <p className='text-center text-muted-foreground tablet:text-sm'>
-            This file type is not supported for preview, try downloading the
-            file instead.
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/@preview.video.tsx b/src/app/@preview.video.tsx
deleted file mode 100644
index 1a4e634..0000000
--- a/src/app/@preview.video.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
-import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-
-import { CreateDownloadToken } from "./actions";
-
-const Plyr = dynamic(() => import("plyr-react"), {
-  ssr: false,
-  loading: () => (
-    <div
-      className={cn(
-        "h-auto min-h-[50dvh] w-full",
-        "flex flex-grow flex-col items-center justify-center gap-3",
-      )}
-    >
-      <Icon
-        name='LoaderCircle'
-        size={32}
-        className='animate-spin text-foreground'
-      />
-      <p>Loading player...</p>
-    </div>
-  ),
-});
-
-type Props = {
-  file: z.infer<typeof Schema_File>;
-};
-export default function PreviewVideo({ file }: Props) {
-  const [videoSrc, setVideoSrc] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(true);
-  const [error, setError] = useState<string>("");
-
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!file.encryptedWebContentLink) {
-          setError("No video to preview");
-          return;
-        }
-        const token = await CreateDownloadToken();
-        setVideoSrc(`/api/stream/${file.encryptedId}?token=${token}`);
-      } catch (error) {
-        const e = error as Error;
-        console.error(e);
-        setError(e.message);
-      } finally {
-        setLoading(false);
-      }
-    })();
-  }, [file]);
-
-  return (
-    <div className='flex h-full min-h-[33dvh] w-full items-center justify-center py-3'>
-      {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[50dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Loading video...</p>
-        </div>
-      ) : error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-3'>
-          <Icon
-            name='CircleX'
-            size={24}
-            className='text-destructive'
-          />
-          <span className='text-center text-destructive'>{error}</span>
-        </div>
-      ) : (
-        <div className='h-full w-full'>
-          <Plyr
-            source={{
-              type: "video",
-              sources: [
-                {
-                  src: videoSrc,
-                  type: file.mimeType,
-                  size: file.size,
-                },
-              ],
-              poster: `/api/thumb/${file.encryptedId}?size=1000`,
-            }}
-            // crossOrigin='anonymous'
-            options={{
-              toggleInvert: true,
-              settings: ["quality", "speed"],
-              ratio: "16:9",
-              controls: [
-                "play-large",
-                "play",
-                "progress",
-                "current-time",
-                "duration",
-                "mute",
-                "volume",
-                "settings",
-                "pip",
-                "download",
-                "fullscreen",
-              ],
-              volume: 0.5,
-              muted: false,
-              loop: { active: false },
-              speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
-              keyboard: {
-                focused: true,
-                global: true,
-              },
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/app/@readme.tsx b/src/app/@readme.tsx
deleted file mode 100644
index 8990720..0000000
--- a/src/app/@readme.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import { Card, CardContent } from "~/components/ui/card";
-
-import Markdown from "./@markdown";
-import RichHeader from "./@rich-header";
-
-type Props = {
-  content: string;
-  title: string;
-};
-export default function Readme({ content, title }: Props) {
-  const [view, setView] = useState<"markdown" | "raw">("markdown");
-
-  return (
-    <div
-      slot='readme'
-      className='w-full'
-    >
-      <Card>
-        <RichHeader
-          title={title}
-          view={view}
-          onViewChange={setView}
-          fileType={"markdown"}
-        />
-        <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
-          <Markdown
-            content={content}
-            view={view}
-          />
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/src/app/@rich-header.tsx b/src/app/@rich-header.tsx
deleted file mode 100644
index 3c984f5..0000000
--- a/src/app/@rich-header.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { Button } from "~/components/ui/button";
-import { CardHeader } from "~/components/ui/card";
-import { Separator } from "~/components/ui/separator";
-
-import { getFileType } from "~/utils/previewHelper";
-
-type Props = {
-  title: string;
-  view: "markdown" | "raw";
-  onViewChange: (value: "markdown" | "raw") => void;
-  fileType: ReturnType<typeof getFileType> | "unknown";
-};
-export default function RichHeader({
-  title,
-  view,
-  onViewChange,
-  fileType,
-}: Props) {
-  return (
-    <CardHeader className='pb-0'>
-      <div className='flex flex-col gap-3 overflow-hidden mobile:flex-row mobile:items-center mobile:justify-between'>
-        {/* <CardTitle> */}
-        <h3 className='line-clamp-1 flex-grow whitespace-pre-wrap break-all'>
-          {title}
-        </h3>
-        {/* </CardTitle> */}
-        {["markdown", "code", "text"].includes(fileType) && (
-          <div className='flex w-full items-center mobile:w-fit'>
-            <Button
-              size={"sm"}
-              variant={view === "markdown" ? "default" : "secondary"}
-              onClick={() => onViewChange("markdown")}
-              className='w-full rounded-r-none mobile:w-fit'
-            >
-              Markdown
-            </Button>
-            <Button
-              size={"sm"}
-              variant={view === "raw" ? "default" : "secondary"}
-              onClick={() => onViewChange("raw")}
-              className='w-full rounded-l-none mobile:w-fit'
-            >
-              Raw
-            </Button>
-          </div>
-        )}
-      </div>
-      <Separator />
-    </CardHeader>
-  );
-}
diff --git a/src/app/[...rest]/deploy/@form.api-config.tsx b/src/app/[...rest]/deploy/@form.api-config.tsx
deleted file mode 100644
index def64e0..0000000
--- a/src/app/[...rest]/deploy/@form.api-config.tsx
+++ /dev/null
@@ -1,403 +0,0 @@
-"use client";
-
-import toast from "react-hot-toast";
-import { z } from "zod";
-import {
-  ConfigurationCategory,
-  ConfigurationKeys,
-  ConfigurationValue,
-  Schema_App_Configuration,
-} from "~/schema";
-
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Separator } from "~/components/ui/separator";
-
-import { decryptData } from "~/utils/encryptionHelper/hash";
-import { parseConfigFile } from "~/utils/parseConfigFile";
-
-import ConfigInput from "./@form.input";
-
-type Props = {
-  state: {
-    get: z.input<typeof Schema_App_Configuration>;
-    set: <
-      T extends ConfigurationCategory = ConfigurationCategory,
-      K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
-    >(
-      category: T,
-      key: K,
-      value: ConfigurationValue<T, K>,
-    ) => void;
-  };
-  error: {
-    get: Partial<Record<ConfigurationKeys<"api">, string>>;
-    set: <T extends ConfigurationKeys<"api">>(key: T, value: string) => void;
-  };
-  onReset: (category: ConfigurationCategory) => void;
-};
-export default function ApiConfig({
-  state: { get, set },
-  error,
-  onReset,
-}: Props) {
-  return (
-    <form
-      className='flex w-full flex-col gap-3 py-3'
-      onReset={(e) => {
-        e.preventDefault();
-        onReset("api");
-      }}
-    >
-      <div
-        slot='header'
-        className='flex flex-col gap-3 tablet:flex-row tablet:items-center tablet:justify-between'
-      >
-        <h4>API</h4>
-        <div className='flex w-full items-center gap-3 tablet:w-fit'>
-          <Button
-            variant={"outline"}
-            size={"sm"}
-            onClick={(e) => {
-              e.preventDefault();
-
-              try {
-                const fileInput = document.createElement("input");
-                fileInput.type = "file";
-                fileInput.accept = ".config.ts";
-                fileInput.onchange = async (fileEvent) => {
-                  const file = (fileEvent.target as HTMLInputElement)
-                    .files?.[0];
-                  if (!file) return toast.error("No file selected");
-                  const fileName = file.name;
-                  if (fileName.toLowerCase() !== "gindex.config.ts")
-                    return toast.error("Please select a config file");
-
-                  const reader = new FileReader();
-                  reader.onload = async (read) => {
-                    const result = read.target?.result as string;
-                    if (!result) return toast.error("Failed to read file");
-
-                    const config = parseConfigFile(result);
-                    if ("success" in config) return toast.error(config.message);
-
-                    if (get.environment.ENCRYPTION_KEY) {
-                      try {
-                        const root = config.api.rootFolder;
-                        const shared = config.api.sharedDrive || null;
-                        if (root && typeof root === "string") {
-                          const decrypted = await decryptData(
-                            root,
-                            get.environment.ENCRYPTION_KEY,
-                          );
-                          if (decrypted) {
-                            set("api", "rootFolder", decrypted);
-                          }
-                        }
-                        if (shared && typeof shared === "string") {
-                          const decrypted = await decryptData(
-                            shared,
-                            get.environment.ENCRYPTION_KEY,
-                          );
-                          if (decrypted) {
-                            set("api", "sharedDrive", decrypted);
-                          }
-                        }
-                      } catch (error) {
-                        const e = error as Error;
-                        console.error(e);
-                        toast.error(
-                          "Skipping Root Folder / Shared Drive ID, can't decrypt with current Encryption Key",
-                        );
-                      }
-                    } else {
-                      toast.error(
-                        "Can't decrypt Root Folder / Shared Drive ID without Encryption Key",
-                      );
-                    }
-                    set("api", "isTeamDrive", config.api.isTeamDrive || false);
-                    set(
-                      "api",
-                      "proxyThumbnail",
-                      config.api.proxyThumbnail || true,
-                    );
-                    set(
-                      "api",
-                      "allowDownloadProtectedFile",
-                      config.api.allowDownloadProtectedFile || false,
-                    );
-                    set(
-                      "api",
-                      "temporaryTokenDuration",
-                      config.api.temporaryTokenDuration || 6,
-                    );
-                    set(
-                      "api",
-                      "maxFileSize",
-                      config.api.maxFileSize || 4 * 1024 * 1024,
-                    );
-
-                    fileInput.value = "";
-                    toast.success("Config loaded from file");
-                  };
-                  reader.readAsText(file);
-                };
-                fileInput.click();
-              } catch (error) {
-                const e = error as Error;
-                console.error(e);
-                toast.error(e.message);
-              }
-            }}
-          >
-            Load from file
-          </Button>
-          <Button
-            type='reset'
-            variant={"destructive"}
-            size={"sm"}
-          >
-            Reset
-          </Button>
-        </div>
-      </div>
-
-      <Separator />
-
-      <div
-        slot='inputs'
-        className='flex flex-col gap-3'
-      >
-        <ConfigInput<ConfigurationKeys<"api">>
-          key='rootFolder'
-          title='Root Folder ID'
-          description={`Starting point of the drive, will be used as the root folder to display files and folders.
-This ID will be encrypted in the config file.`}
-          error={error.get.rootFolder}
-          required
-        >
-          <Input
-            id='rootFolder'
-            name='rootFolder'
-            value={get.api.rootFolder}
-            onChange={(e) => {
-              if (error.get.rootFolder) {
-                error.set("rootFolder", "");
-              }
-              set("api", "rootFolder", e.target.value);
-            }}
-            onBlur={async () => {
-              try {
-                const value = get.api.rootFolder;
-                error.set("rootFolder", "");
-
-                if (!value) throw new Error("Root Folder ID is required");
-              } catch (err) {
-                const e = err as Error;
-                error.set("rootFolder", e.message);
-              }
-            }}
-          />
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"api">>
-          key='isTeamDrive'
-          title='Use Team Drive'
-          description={`If you are using Shared Drive, you NEED to enable this option.`}
-          error={error.get.isTeamDrive}
-          required
-        >
-          <Select
-            value={get.api.isTeamDrive.toString()}
-            onValueChange={(value) => {
-              set("api", "isTeamDrive", value === "true");
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={"Select an option"} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={"true"}>Enable</SelectItem>
-              <SelectItem value={"false"}>Disable</SelectItem>
-            </SelectContent>
-          </Select>
-        </ConfigInput>
-
-        {get.api.isTeamDrive && (
-          <ConfigInput<ConfigurationKeys<"api">>
-            key='sharedDrive'
-            title='Shared Drive ID'
-            description={`The Drive ID of the Shared Drive.
-This ID will be encrypted in the config file`}
-            error={error.get.sharedDrive}
-            required={get.api.isTeamDrive}
-          >
-            <Input
-              id='sharedDrive'
-              name='sharedDrive'
-              value={get.api.sharedDrive}
-              onChange={(e) => {
-                if (error.get.sharedDrive) {
-                  error.set("sharedDrive", "");
-                }
-                set("api", "sharedDrive", e.target.value);
-              }}
-              onBlur={async () => {
-                try {
-                  const value = get.api.sharedDrive;
-                  const isTeamDrive = get.api.isTeamDrive;
-                  error.set("sharedDrive", "");
-
-                  if (!isTeamDrive) return;
-                  if (!value)
-                    throw new Error(
-                      "Shared Drive ID is required if using Team Drive",
-                    );
-                } catch (err) {
-                  const e = err as Error;
-                  error.set("sharedDrive", e.message);
-                }
-              }}
-            />
-          </ConfigInput>
-        )}
-
-        <ConfigInput<ConfigurationKeys<"api">>
-          key='proxyThumbnail'
-          title='Proxy Thumbnail'
-          description={`Proxy the thumbnail image via API route.
-
-If your files thumbnail are not accessible, you can set this to true.
-This will fetch the thumbnail image via API route, but it will increase the load on your server.`}
-          error={error.get.proxyThumbnail}
-          required
-        >
-          <Select
-            value={get.api.proxyThumbnail.toString()}
-            onValueChange={(value) => {
-              set("api", "proxyThumbnail", value === "true");
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={"Select an option"} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={"true"}>Enable</SelectItem>
-              <SelectItem value={"false"}>Disable</SelectItem>
-            </SelectContent>
-          </Select>
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"api">>
-          key='allowDownloadProtectedFile'
-          title='Allow Download Protected File'
-          description={`Allow users to download password protected files.
-
-If set to true, users will be able to download the file without entering password as long as they have the link
-If set to false, the download link will have a temporary token attached to it, the token will expire after certain duration (default is 6 hours)`}
-          error={error.get.allowDownloadProtectedFile}
-          required
-        >
-          <Select
-            value={get.api.allowDownloadProtectedFile.toString()}
-            onValueChange={(value) => {
-              set("api", "allowDownloadProtectedFile", value === "true");
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={"Select an option"} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={"true"}>Enable</SelectItem>
-              <SelectItem value={"false"}>Disable</SelectItem>
-            </SelectContent>
-          </Select>
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"api">>
-          key='temporaryTokenDuration'
-          title='Temporary Token Duration (in hours)'
-          description={`Duration of the temporary token used for protected files download link.`}
-          error={error.get.temporaryTokenDuration}
-          required
-        >
-          <Input
-            id='temporaryTokenDuration'
-            name='temporaryTokenDuration'
-            type='number'
-            value={get.api.temporaryTokenDuration}
-            min={1}
-            max={24 * 7}
-            onChange={(e) => {
-              if (error.get.temporaryTokenDuration) {
-                error.set("temporaryTokenDuration", "");
-              }
-              set("api", "temporaryTokenDuration", parseInt(e.target.value));
-            }}
-            onBlur={async () => {
-              try {
-                const value = get.api.temporaryTokenDuration;
-                error.set("temporaryTokenDuration", "");
-
-                if (value <= 0)
-                  throw new Error(
-                    "Temporary Token Duration must be more than 0",
-                  );
-              } catch (err) {
-                const e = err as Error;
-                error.set("temporaryTokenDuration", e.message);
-              }
-            }}
-          />
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"api">>
-          key='maxFileSize'
-          title='Max Direct Download Size (in MB)'
-          description={`Max file size that can be downloaded directly from the server, instead of download link from Google Drive.
-Please refer to your deploy platform for the maximum response size limit.
-If you are using Vercel, the maximum response size is around 4 - 4.5MB.
-
-Set to 0 to disable the limit.`}
-          error={error.get.maxFileSize}
-          required
-        >
-          <Input
-            id='maxFileSize'
-            name='maxFileSize'
-            type='number'
-            value={get.api.maxFileSize / 1024 / 1024}
-            min={0}
-            onChange={(e) => {
-              if (error.get.maxFileSize) {
-                error.set("maxFileSize", "");
-              }
-              set("api", "maxFileSize", parseInt(e.target.value) * 1024 * 1024);
-            }}
-            onBlur={async () => {
-              try {
-                const value = get.api.maxFileSize;
-                error.set("maxFileSize", "");
-
-                if (value < 0)
-                  throw new Error(
-                    "Max file size must be more than or equal to 0",
-                  );
-              } catch (err) {
-                const e = err as Error;
-                error.set("maxFileSize", e.message);
-              }
-            }}
-          />
-        </ConfigInput>
-      </div>
-    </form>
-  );
-}
diff --git a/src/app/[...rest]/deploy/@form.env-config.tsx b/src/app/[...rest]/deploy/@form.env-config.tsx
deleted file mode 100644
index d3a8361..0000000
--- a/src/app/[...rest]/deploy/@form.env-config.tsx
+++ /dev/null
@@ -1,359 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import toast from "react-hot-toast";
-import { z } from "zod";
-import {
-  ConfigState,
-  ConfigurationCategory,
-  ConfigurationKeys,
-  ConfigurationValue,
-  Schema_App_Configuration,
-  Schema_ServiceAccount,
-} from "~/schema";
-
-import { GenerateAESKey, VerifyAESKey } from "~/app/actions";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Separator } from "~/components/ui/separator";
-
-import ConfigInput from "./@form.input";
-
-type Props = {
-  state: {
-    get: z.input<typeof Schema_App_Configuration>;
-    set: <
-      T extends ConfigurationCategory = ConfigurationCategory,
-      K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
-    >(
-      category: T,
-      key: K,
-      value: ConfigurationValue<T, K>,
-    ) => void;
-  };
-  error: {
-    get: Partial<Record<ConfigurationKeys<"environment">, string>>;
-    set: <T extends ConfigurationKeys<"environment">>(
-      key: T,
-      value: string,
-    ) => void;
-  };
-  onReset: (category: ConfigurationCategory) => void;
-};
-export default function EnvironmentConfig({
-  state: { get, set },
-  error,
-  onReset,
-}: Props) {
-  const [encryptionState, setEncryptionState] = useState<ConfigState>("idle");
-  const [gdServiceState, setGdServiceState] = useState<ConfigState>("idle");
-  const [revealPassword, setRevealPassword] = useState<boolean>(false);
-
-  return (
-    <form
-      className='flex w-full flex-col gap-3 py-3'
-      onReset={(e) => {
-        e.preventDefault();
-        onReset("environment");
-      }}
-    >
-      <div
-        slot='header'
-        className='flex flex-col gap-3 tablet:flex-row tablet:items-center tablet:justify-between'
-      >
-        <h4>Environment</h4>
-        <div className='flex w-full items-center gap-3 tablet:w-fit'>
-          <Button
-            variant={"outline"}
-            size={"sm"}
-            onClick={(e) => {
-              e.preventDefault();
-
-              try {
-                const fileInput = document.createElement("input");
-                fileInput.type = "file";
-                fileInput.accept =
-                  ".env, .env.local, .env.development, .env.production";
-                fileInput.onchange = async (fileEvent) => {
-                  const file = (fileEvent.target as HTMLInputElement)
-                    .files?.[0];
-                  if (!file) return toast.error("No file selected");
-
-                  const reader = new FileReader();
-                  reader.onload = async (read) => {
-                    const result = read.target?.result as string;
-                    if (!result) return toast.error("Failed to read file");
-                    const lines = result.split("\n");
-                    const env: Record<string, string> = {};
-                    for (const line of lines) {
-                      const [key, value] = line.split("=");
-                      if (!key || !value) continue;
-                      const formattedValue = value
-                        ?.replace(/"/g, "")
-                        .replace(/'/g, "")
-                        .replace(/\\/g, "")
-                        .replace(/\r/g, "")
-                        .trim();
-                      env[key] = formattedValue;
-                    }
-                    set(
-                      "environment",
-                      "GD_SERVICE_B64",
-                      env.GD_SERVICE_B64 || "",
-                    );
-                    set(
-                      "environment",
-                      "ENCRYPTION_KEY",
-                      env.ENCRYPTION_KEY || "",
-                    );
-                    set(
-                      "environment",
-                      "SITE_PASSWORD",
-                      env.SITE_PASSWORD || "",
-                    );
-                    set(
-                      "environment",
-                      "NEXT_PUBLIC_DOMAIN",
-                      env.NEXT_PUBLIC_DOMAIN || "",
-                    );
-                    fileInput.value = "";
-                    toast.success("Environment loaded from file");
-                  };
-                  reader.readAsText(file);
-                };
-                fileInput.click();
-              } catch (error) {
-                const e = error as Error;
-                console.error(e);
-                toast.error(e.message);
-              }
-            }}
-          >
-            Load from file
-          </Button>
-          <Button
-            type='reset'
-            variant={"destructive"}
-            size={"sm"}
-          >
-            Reset
-          </Button>
-        </div>
-      </div>
-
-      <Separator />
-
-      <div
-        slot='inputs'
-        className='flex flex-col gap-3'
-      >
-        <ConfigInput<ConfigurationKeys<"environment">>
-          key='ENCRYPTION_KEY'
-          title='Encryption Key'
-          description='The encryption key for the site, must be a alphanumeric string without spaces'
-          error={error.get.ENCRYPTION_KEY}
-          required
-          action={{
-            label: "Generate",
-            async onClick(e) {
-              e.preventDefault();
-              setEncryptionState("loading");
-              error.set("ENCRYPTION_KEY", "");
-
-              try {
-                const keyStr = await GenerateAESKey();
-                const valid = await VerifyAESKey("This is a test", keyStr);
-                if (!valid)
-                  throw new Error("Invalid key generated, please try again");
-
-                set("environment", "ENCRYPTION_KEY", keyStr);
-              } catch (err) {
-                const e = err as Error;
-                console.error(e);
-                error.set("ENCRYPTION_KEY", e.message);
-                toast.error(e.message);
-              } finally {
-                setEncryptionState("idle");
-              }
-            },
-            state: encryptionState,
-          }}
-        >
-          <Input
-            id='ENCRYPTION_KEY'
-            name='ENCRYPTION_KEY'
-            value={get.environment.ENCRYPTION_KEY}
-            onChange={(e) => {
-              if (error.get.ENCRYPTION_KEY) {
-                error.set("ENCRYPTION_KEY", "");
-              }
-              set("environment", "ENCRYPTION_KEY", e.target.value);
-            }}
-            onBlur={async () => {
-              try {
-                const value = get.environment.ENCRYPTION_KEY;
-                error.set("ENCRYPTION_KEY", "");
-
-                if (!value) throw new Error("Encryption key is required");
-
-                if (value.includes(" "))
-                  throw new Error("Encryption key must not contain spaces");
-
-                const valid = await VerifyAESKey("This is a test", value);
-                if (!valid)
-                  throw new Error(
-                    "The encryption key is invalid, please generate a new one",
-                  );
-              } catch (err) {
-                const e = err as Error;
-                error.set("ENCRYPTION_KEY", e.message);
-              }
-            }}
-          />
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"environment">>
-          key='GD_SERVICE_B64'
-          title='Google Drive Service Account'
-          description={`The base64 encoded Google Drive Service Account JSON file       
-To avoid error when inputting, please use the "Load JSON" button to load the file directly`}
-          error={error.get.GD_SERVICE_B64}
-          required
-          action={{
-            label: "Load JSON",
-            async onClick(e) {
-              e.preventDefault();
-              setGdServiceState("loading");
-
-              try {
-                const fileInput = document.createElement("input");
-                fileInput.type = "file";
-                fileInput.accept = ".json";
-                fileInput.onchange = async (fileEvent) => {
-                  const file = (fileEvent.target as HTMLInputElement)
-                    .files?.[0];
-                  if (!file) return toast.error("No file selected");
-
-                  const reader = new FileReader();
-                  reader.onload = async (readerEvent) => {
-                    const result = readerEvent.target?.result as string;
-                    if (!result) return toast.error("Failed to read file");
-
-                    const objectFile = JSON.parse(result);
-                    const parse = Schema_ServiceAccount.safeParse(objectFile);
-                    if (!parse.success)
-                      return toast.error(
-                        "Invalid Service Account JSON, please select a valid Google Drive Service Account JSON file",
-                      );
-
-                    set("environment", "GD_SERVICE_B64", btoa(result));
-                    error.set("GD_SERVICE_B64", "");
-
-                    toast.success(
-                      "Google Drive Service Account JSON file loaded",
-                    );
-                    fileInput.value = "";
-                  };
-                  reader.readAsText(file);
-                };
-                fileInput.click();
-              } catch (err) {
-                const e = err as Error;
-                console.error(e);
-                error.set("GD_SERVICE_B64", e.message);
-                toast.error(e.message);
-              } finally {
-                setGdServiceState("idle");
-              }
-            },
-            state: gdServiceState,
-          }}
-        >
-          <Input
-            id='GD_SERVICE_B64'
-            name='GD_SERVICE_B64'
-            value={get.environment.GD_SERVICE_B64}
-            readOnly
-            onChange={(e) => {
-              if (error.get.GD_SERVICE_B64) {
-                error.set("GD_SERVICE_B64", "");
-              }
-              set("environment", "GD_SERVICE_B64", e.target.value);
-            }}
-          />
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"environment">>
-          key='NEXT_PUBLIC_DOMAIN'
-          title='Domain'
-          description={`The domain for the site, without the protocol
-(e.g. drive-demo.mbaharip.com or mbaharip.com)`}
-          error={error.get.NEXT_PUBLIC_DOMAIN}
-        >
-          <Input
-            id='NEXT_PUBLIC_DOMAIN'
-            name='NEXT_PUBLIC_DOMAIN'
-            value={get.environment.NEXT_PUBLIC_DOMAIN}
-            onChange={(e) => {
-              if (error.get.NEXT_PUBLIC_DOMAIN) {
-                error.set("NEXT_PUBLIC_DOMAIN", "");
-              }
-              set("environment", "NEXT_PUBLIC_DOMAIN", e.target.value);
-            }}
-            onBlur={async () => {
-              try {
-                error.set("NEXT_PUBLIC_DOMAIN", "");
-              } catch (err) {
-                const e = err as Error;
-                error.set("NEXT_PUBLIC_DOMAIN", e.message);
-              }
-            }}
-          />
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"environment">>
-          key='SITE_PASSWORD'
-          title='Site Password'
-          description='The password to access the site'
-          error={error.get.SITE_PASSWORD}
-          required={get.site.privateIndex}
-          action={{
-            label: revealPassword ? "Hide" : "Reveal",
-            onClick(e) {
-              e.preventDefault();
-              setRevealPassword((prev) => !prev);
-            },
-            state: "idle",
-          }}
-        >
-          <Input
-            id='SITE_PASSWORD'
-            name='SITE_PASSWORD'
-            type={revealPassword ? "text" : "password"}
-            value={get.environment.SITE_PASSWORD}
-            onChange={(e) => {
-              if (error.get.SITE_PASSWORD) {
-                error.set("SITE_PASSWORD", "");
-              }
-              set("environment", "SITE_PASSWORD", e.target.value);
-            }}
-            onBlur={async () => {
-              try {
-                error.set("SITE_PASSWORD", "");
-                if (get.site.privateIndex && !get.environment.SITE_PASSWORD) {
-                  throw new Error(
-                    "Site Password is required when Private Index is enabled",
-                  );
-                }
-              } catch (err) {
-                const e = err as Error;
-                console.error(e);
-                error.set("SITE_PASSWORD", e.message);
-              }
-            }}
-          />
-        </ConfigInput>
-      </div>
-    </form>
-  );
-}
diff --git a/src/app/[...rest]/deploy/@form.input.tsx b/src/app/[...rest]/deploy/@form.input.tsx
deleted file mode 100644
index 880bc01..0000000
--- a/src/app/[...rest]/deploy/@form.input.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import { PropsWithChildren } from "react";
-import { ConfigState } from "~/schema";
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip";
-
-type Props<T> = {
-  key: T extends string ? T : string;
-  title: string;
-  description?: string;
-  required?: boolean;
-  action?: {
-    label: string;
-    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-    state: ConfigState;
-  };
-  error?: string;
-};
-export default function ConfigInput<T>(props: PropsWithChildren<Props<T>>) {
-  return (
-    <div
-      id={props.key}
-      slot={`input-${props.key}`}
-      className='flex w-full flex-col gap-1.5'
-    >
-      <div
-        slot='label'
-        className='flex items-center gap-1.5'
-      >
-        <Label
-          htmlFor={props.key}
-          aria-required={props.required}
-        >
-          {props.title}
-        </Label>
-        {!props.required && (
-          <span className='text-sm text-muted-foreground'>(optional)</span>
-        )}
-        {props.description && (
-          <Tooltip>
-            <TooltipTrigger
-              onClick={(e) => e.preventDefault()}
-              className='cursor-default'
-            >
-              <Icon
-                name='Info'
-                size={"1rem"}
-                className='text-muted-foreground'
-              />
-            </TooltipTrigger>
-            <TooltipContent
-              side='right'
-              className='max-w-screen-sm'
-            >
-              <p className='max-w-screen-sm !whitespace-pre-wrap'>
-                {props.description}
-              </p>
-            </TooltipContent>
-          </Tooltip>
-        )}
-      </div>
-
-      <div
-        slot='input'
-        className='grid w-full grid-cols-6 gap-1.5'
-      >
-        <div
-          className={cn(
-            "w-full",
-            props.action ? "col-span-5" : "col-span-full",
-          )}
-        >
-          {props.children}
-        </div>
-        {props.action && (
-          <Button
-            variant={"secondary"}
-            onClick={props.action.onClick}
-            disabled={props.action.state === "loading"}
-          >
-            <div className='relative flex w-full items-center justify-center'>
-              <span className='relative transition-all duration-300 ease-in-out'>
-                {props.action.label}
-              </span>
-              <Icon
-                name='LoaderCircle'
-                className={cn(
-                  "animate-spin transition-all",
-                  props.action.state === "loading"
-                    ? "ml-1.5 size-4 opacity-100"
-                    : "ml-0 size-0 opacity-0",
-                )}
-              />
-            </div>
-          </Button>
-        )}
-      </div>
-
-      <div slot='message'>
-        <span
-          className={cn(
-            "block text-sm text-destructive",
-            props.error ? "opacity-100" : "select-none opacity-0",
-          )}
-        >
-          {props.error}
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/app/[...rest]/deploy/@form.site-config.tsx b/src/app/[...rest]/deploy/@form.site-config.tsx
deleted file mode 100644
index 36f2e46..0000000
--- a/src/app/[...rest]/deploy/@form.site-config.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-import toast from "react-hot-toast";
-import { z } from "zod";
-import {
-  ConfigurationCategory,
-  ConfigurationKeys,
-  ConfigurationValue,
-  Schema_App_Configuration,
-} from "~/schema";
-
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import { Separator } from "~/components/ui/separator";
-
-import { parseConfigFile } from "~/utils/parseConfigFile";
-
-import config from "~/config/gIndex.config";
-
-import ConfigInput from "./@form.input";
-
-type Props = {
-  state: {
-    get: z.input<typeof Schema_App_Configuration>;
-    set: <
-      T extends ConfigurationCategory = ConfigurationCategory,
-      K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
-    >(
-      category: T,
-      key: K,
-      value: ConfigurationValue<T, K>,
-    ) => void;
-  };
-  error: {
-    get: Partial<Record<ConfigurationKeys<"site">, string>>;
-    set: <T extends ConfigurationKeys<"site">>(key: T, value: string) => void;
-  };
-  onReset: (category: ConfigurationCategory) => void;
-};
-export default function SiteConfig({
-  state: { get, set },
-  error,
-  onReset,
-}: Props) {
-  return (
-    <form
-      className='flex w-full flex-col gap-3 py-3'
-      onReset={(e) => {
-        e.preventDefault();
-        onReset("site");
-      }}
-    >
-      <div
-        slot='header'
-        className='flex flex-col gap-3 tablet:flex-row tablet:items-center tablet:justify-between'
-      >
-        <h4>Site</h4>
-        <div className='flex w-full items-center gap-3 tablet:w-fit'>
-          <Button
-            variant={"outline"}
-            size={"sm"}
-            onClick={(e) => {
-              e.preventDefault();
-
-              try {
-                const fileInput = document.createElement("input");
-                fileInput.type = "file";
-                fileInput.accept = ".config.ts";
-                fileInput.onchange = async (fileEvent) => {
-                  const file = (fileEvent.target as HTMLInputElement)
-                    .files?.[0];
-                  if (!file) return toast.error("No file selected");
-                  const fileName = file.name;
-                  if (fileName.toLowerCase() !== "gindex.config.ts")
-                    return toast.error("Please select a config file");
-
-                  const reader = new FileReader();
-                  reader.onload = async (read) => {
-                    const result = read.target?.result as string;
-                    if (!result) return toast.error("Failed to read file");
-
-                    const config = parseConfigFile(result);
-                    if ("success" in config) return toast.error(config.message);
-
-                    set(
-                      "site",
-                      "siteName",
-                      config.site.siteName || get.site.siteName,
-                    );
-                    set(
-                      "site",
-                      "siteNameTemplate",
-                      config.site.siteNameTemplate ||
-                        (get.site.siteNameTemplate as string),
-                    );
-                    set(
-                      "site",
-                      "siteDescription",
-                      config.site.siteDescription || get.site.siteDescription,
-                    );
-                    set(
-                      "site",
-                      "siteAuthor",
-                      config.site.siteAuthor || (get.site.siteAuthor as string),
-                    );
-                    set(
-                      "site",
-                      "twitterHandle",
-                      config.site.twitterHandle ||
-                        (get.site.twitterHandle as string),
-                    );
-
-                    set(
-                      "site",
-                      "showFileExtension",
-                      config.site.showFileExtension ||
-                        (get.site.showFileExtension as boolean),
-                    );
-
-                    set(
-                      "site",
-                      "privateIndex",
-                      config.site.privateIndex ||
-                        (get.site.privateIndex as boolean),
-                    );
-
-                    fileInput.value = "";
-                    toast.success("Config loaded from file");
-                  };
-                  reader.readAsText(file);
-                };
-                fileInput.click();
-              } catch (error) {
-                const e = error as Error;
-                console.error(e);
-                toast.error(e.message);
-              }
-            }}
-          >
-            Load from file
-          </Button>
-          <Button
-            type='reset'
-            variant={"destructive"}
-            size={"sm"}
-          >
-            Reset
-          </Button>
-        </div>
-      </div>
-
-      <Separator />
-
-      <div
-        slot='inputs'
-        className='flex flex-col gap-3'
-      >
-        <div className='flex flex-col'>
-          <div className='flex items-center gap-1.5 px-1.5 pt-3'>
-            <div className='flex select-none items-center gap-1.5 rounded-t-lg border border-b-0 border-border px-3 py-1.5'>
-              <img
-                src={config.siteConfig.favIcon}
-                className='size-4'
-                alt='favicon'
-              />
-              <span className='text-sm'>{get.site.siteName}</span>
-            </div>
-
-            <div className='flex select-none items-center gap-1.5 rounded-t-lg border border-b-0 border-border px-3 py-1.5'>
-              <img
-                src={config.siteConfig.favIcon}
-                className='size-4'
-                alt='favicon'
-              />
-              <span className='text-sm'>
-                {get.site
-                  .siteNameTemplate!.replace("%s", "Page Title")
-                  .replace("%t", get.site.siteName)}
-              </span>
-            </div>
-          </div>
-          <Separator className='mt-0' />
-        </div>
-
-        <div className='grid grid-cols-3 gap-6'>
-          <div className='col-span-2 flex flex-col gap-3'>
-            <ConfigInput<ConfigurationKeys<"site">>
-              key='siteName'
-              title='Index Site Name'
-              error={error.get.siteName}
-              required
-            >
-              <Input
-                id='siteName'
-                name='siteName'
-                value={get.site.siteName}
-                onChange={(e) => {
-                  if (error.get.siteName) {
-                    error.set("siteName", "");
-                  }
-                  set("site", "siteName", e.target.value);
-                }}
-                onBlur={async () => {
-                  try {
-                    const value = get.site.siteName;
-                    error.set("siteName", "");
-
-                    if (!value) throw new Error("Site name is required");
-                  } catch (err) {
-                    const e = err as Error;
-                    error.set("siteName", e.message);
-                  }
-                }}
-              />
-            </ConfigInput>
-
-            <ConfigInput<ConfigurationKeys<"site">>
-              key='siteNameTemplate'
-              title='Site Name Template'
-              description={`The template for the site name.
-
-Usable variables:
-%s - Page Title
-%t - Site Name`}
-              error={error.get.siteNameTemplate}
-            >
-              <Input
-                id='siteNameTemplate'
-                name='siteNameTemplate'
-                value={get.site.siteNameTemplate}
-                onChange={(e) => {
-                  if (error.get.siteNameTemplate) {
-                    error.set("siteNameTemplate", "");
-                  }
-                  set("site", "siteNameTemplate", e.target.value);
-                }}
-                onBlur={async () => {
-                  try {
-                    const value = get.site.siteNameTemplate;
-                    error.set("siteNameTemplate", "");
-                  } catch (err) {
-                    const e = err as Error;
-                    error.set("siteNameTemplate", e.message);
-                  }
-                }}
-              />
-            </ConfigInput>
-
-            <ConfigInput<ConfigurationKeys<"site">>
-              key='siteDescription'
-              title='Site Description'
-              error={error.get.siteDescription}
-              required
-            >
-              <Input
-                id='siteDescription'
-                name='siteDescription'
-                value={get.site.siteDescription}
-                onChange={(e) => {
-                  if (error.get.siteDescription) {
-                    error.set("siteDescription", "");
-                  }
-                  set("site", "siteDescription", e.target.value);
-                }}
-                onBlur={async () => {
-                  try {
-                    const value = get.site.siteDescription;
-                    error.set("siteDescription", "");
-
-                    if (!value) throw new Error("Site description is required");
-                  } catch (err) {
-                    const e = err as Error;
-                    error.set("siteDescription", e.message);
-                  }
-                }}
-              />
-            </ConfigInput>
-
-            <div className='grid grid-cols-2 gap-3'>
-              <ConfigInput<ConfigurationKeys<"site">>
-                key='siteAuthor'
-                title='Site Author'
-                error={error.get.siteAuthor}
-                description={`Will be used for metadata, and also affect the footer variable`}
-              >
-                <Input
-                  id='siteAuthor'
-                  name='siteAuthor'
-                  value={get.site.siteAuthor}
-                  onChange={(e) => {
-                    if (error.get.siteAuthor) {
-                      error.set("siteAuthor", "");
-                    }
-                    set("site", "siteAuthor", e.target.value);
-                  }}
-                  onBlur={async () => {
-                    try {
-                      const value = get.site.siteAuthor;
-                      error.set("siteAuthor", "");
-                    } catch (err) {
-                      const e = err as Error;
-                      error.set("siteAuthor", e.message);
-                    }
-                  }}
-                />
-              </ConfigInput>
-
-              <ConfigInput<ConfigurationKeys<"site">>
-                key='twitterHandle'
-                title='Twitter Handle'
-                error={error.get.twitterHandle}
-                description={`Will be used for metadata, and also affect the footer variable`}
-              >
-                <Input
-                  id='twitterHandle'
-                  name='twitterHandle'
-                  value={get.site.twitterHandle}
-                  onChange={(e) => {
-                    if (error.get.twitterHandle) {
-                      error.set("twitterHandle", "");
-                    }
-                    set("site", "twitterHandle", e.target.value);
-                  }}
-                  onBlur={async () => {
-                    try {
-                      const value = get.site.twitterHandle;
-                      error.set("twitterHandle", "");
-                    } catch (err) {
-                      const e = err as Error;
-                      error.set("twitterHandle", e.message);
-                    }
-                  }}
-                />
-              </ConfigInput>
-            </div>
-          </div>
-
-          <div className='h-fit select-none overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'>
-            <img
-              src={"/og.png"}
-              alt='Opengraph Preview'
-              className='w-full'
-            />
-            <div className='flex flex-col px-3 py-1.5'>
-              <span className='line-clamp-1 w-full text-lg font-medium'>
-                {(get.site.siteNameTemplate || "%s")
-                  .replace("%s", "Page Title")
-                  .replace("%t", get.site.siteName)}
-              </span>
-              <span className='text-xs text-muted-foreground'>
-                {get.environment.NEXT_PUBLIC_DOMAIN || "http://localhost:3000"}
-              </span>
-              <span className='line-clamp-2 text-sm text-muted-foreground'>
-                {get.site.siteDescription}
-              </span>
-            </div>
-          </div>
-        </div>
-
-        <Separator />
-
-        <ConfigInput<ConfigurationKeys<"site">>
-          key='privateIndex'
-          title='Private Index'
-          description={`Lock the whole site behind a password
-Will use the site password set in the "Environment" category`}
-          error={error.get.privateIndex}
-          required
-        >
-          <Select
-            value={(get.site.privateIndex || false).toString()}
-            onValueChange={(value) => {
-              set("site", "privateIndex", value === "true");
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={"Select an option"} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={"true"}>Enable</SelectItem>
-              <SelectItem value={"false"}>Disable</SelectItem>
-            </SelectContent>
-          </Select>
-        </ConfigInput>
-
-        <ConfigInput<ConfigurationKeys<"site">>
-          key='showFileExtension'
-          title='Show File Extension'
-          description={`Show file extension in file explorer
-          
-e.g. "file.mp4" instead of "file"`}
-          error={error.get.showFileExtension}
-          required
-        >
-          <Select
-            value={(get.site.showFileExtension || false).toString()}
-            onValueChange={(value) => {
-              set("api", "isTeamDrive", value === "true");
-            }}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={"Select an option"} />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={"true"}>Enable</SelectItem>
-              <SelectItem value={"false"}>Disable</SelectItem>
-            </SelectContent>
-          </Select>
-        </ConfigInput>
-      </div>
-    </form>
-  );
-}
diff --git a/src/app/[...rest]/deploy/docs.tsx b/src/app/[...rest]/deploy/docs.tsx
deleted file mode 100644
index c77424d..0000000
--- a/src/app/[...rest]/deploy/docs.tsx
+++ /dev/null
@@ -1,793 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import toast from "react-hot-toast";
-import { z } from "zod";
-import {
-  ConfigState,
-  ConfigurationCategory,
-  ConfigurationKeys,
-  ConfigurationValue,
-  Schema_App_Configuration,
-} from "~/schema";
-import { cn } from "~/utils";
-
-import Markdown from "~/app/@markdown";
-import Icon from "~/components/Icon";
-import { Button } from "~/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { Separator } from "~/components/ui/separator";
-
-import { encryptData } from "~/utils/encryptionHelper/hash";
-
-import config from "~/config/gIndex.config";
-
-import ApiConfig from "./@form.api-config";
-import EnvironmentConfig from "./@form.env-config";
-import SiteConfig from "./@form.site-config";
-
-export const getting_started = `Welcome to the deployment guide! This guide will help you to deploy the application to Vercel or similar services.
-
-If you are new to this project, you can follow along from the beginning.
-But if you've already deployed the app before and want to upgrade from v1, you can skip to the [Migrating from v1](#migrating) section.  
-You can also use this guide to [configure the app](#config) and [customize the theme](#theme).  
-
-**We recommend you to use this deployment guide on a desktop browser for optimal experience.**
-
-_**Note:** This guide assumes you have a basic understanding of how to deploy a Next.js app on Vercel or other platforms._`;
-
-export const new_user_guide = `Prerequisites:
-- A basic understanding of Vercel (or similar services)
-- Google Cloud Platform account
-
-### Fork or Clone the repository
-It's pretty obvious, but you need to fork the repository to your account.
-You can [click here](https://github.com/mbahArip/next-gdrive-index/fork) to fork the repository.  
-You can choose any repository name, description, and visibility.
-
-But if you want to run it locally, you can clone the repository instead.
-
-### Create a Google Cloud Platform project and enable Google Drive API
-We need an access to Google Drive API to get the files from Google Drive.
-So you need to create a project in Google Cloud Platform and enable Google Drive API to get your own credentials.
-
-1. Go to [Google Cloud Platform](https://console.cloud.google.com/)
-2. Click the \`New Project\` button
-3. Enter a project name, and click the \`Create\` button
-4. After the project is created, click the \`Enable APIs and Services\` button
-5. Search for Google Drive API, and click the \`Enable\` button
-
-### Create a Service Account and get the credentials
-After enabling the Google Drive API, we need to create a service account to get the credentials.
-The credentials will be used to authenticate the application to access the Google Drive API and get the files.
-
-1. On [APIs & Services](https://console.cloud.google.com/apis/dashboard) page, click the \`Credentials\` menu on the sidebar
-2. Click the \`Create Credentials\` button, and choose \`Service account\`
-3. Enter your service account name and description, and then click the \`Done\` button
-4. You will see the service account you just created on \`Service Account\` table, click the name of the service account to open the details
-5. Go to \`Keys\` tab, then click the \`Add Key\` button and choose the \`Create new key\`
-6. Pick \`JSON\` as the key type and click the \`Create\` button
-7. The JSON file will be downloaded to your computer, and **keep it safe**. We will use it later on the configuration
-
-_**Note:** The JSON file contains sensitive information, don't share it with anyone_
-
-### Create shared folder in Google Drive
-Since the service account can't access your Root folder, you need to create a new folder, and share it with the service account.
-This folder will be used as the root folder for the application.
-
-> If you're using or the folder you want to share inside Shared Drive, you can skip this step and go to the [Shared Drive Guide](#shared-drive)
-
-1. Go to [Google Drive](https://drive.google.com/)
-2. Click the \`New\` button, and choose \`Folder\` to create a new folder, you can name it anything you want
-3. Right-click the folder you just created, and choose \`Share\`
-4. Enter the email address of the service account you just created (you can find it on the JSON file, or on the service account details page)
-5. To allow download files larger than deployment limit, you need to enable \`Link sharing\` and set it to \`Anyone with the link\`
-6. Copy the folder ID from the URL, it's the part after \`/folders/\` in the URL (e.g: https://drive.google.com/drive/u/0/folders/ \`<folder_id>\` )
-
-### Configuring the app and Customizing the theme
-Now we need to configure the app to use the credentials and folder ID we just created.
-You can follow the [App Configuration](#config) and [Customize Theme](#theme) sections to configure the app and customize the theme.
-
-_**Note:** You can skip the theme customization, but you **NEED** to configure the app_
-
-### Deploy the app
-On this guide we will use Vercel to deploy the app, but you can use other platforms like Netlify, Heroku, etc.
-But don't forget to adjust the \`fileSizeLimit\` on the [configuration](#config) if you use other platforms.
-
-> Before deploying, make sure you have pushed the changes to your repository
-
-
-1. Go to [Vercel](https://vercel.com/)
-2. Click on the \`Add new\` button, and choose \`Project\`
-3. Choose the repository you just forked
-4. On the \`Environment Variables\` section, copy the whole content from \`.env.local\` you just downloaded from [configuration](#config) section, and paste it on the key fields. It will automatically add all the environment variables needed
-5. Click the \`Deploy\` button
-6. Wait for the deployment to finish, and open project
-7. Go to \`Settings\` tab, and click the \`Functions\` menu, and select your \`Function Region\` to the nearest region to your location for optimal speed
-8. Go to \`Deployment\` tab, click the 3 dots on the right side of the latest \`Production\` deployment, and click the \`Redeploy\` button to apply the changes
-
-For other platforms, you can check their own documentation for Next.js deployment guide.
-
-### Done! 🎉
-Congratulations! You have successfully deployed the app.`;
-
-export const shared_drive_guide = `I'm separating this guide in case someone who already using v1 can see this guide easily.
-
-As of version 2.0.2 we added support for Shared Drive, and the demo actually using a Shared Drive.
-You can follow this guide to use Shared Drive as the root folder for the application.
-
-1. Go to [Google Drive](https://drive.google.com/)
-2. Open the \`Shared Drives\` menu from the sidebar
-3. Right click on the Shared Drive you want to use, and choose \`Manage members\`
-4. Add your service account email address to the members list, and give it at least \`Viewer\` permission
-5. Open the \`Shared Drive\`, and copy the ID from the URL, it's the part after \`/drive/u/0/folders/\` in the URL (e.g: https://drive.google.com/drive/u/0/folders/ \`<drive_id>\` )
-6. Paste the ID to \`Shared Drive\` field on the [configuration](#config) section, and set the \`is Team Drive\` to \`true\`
-7. For the root folder, you can set it to the folder ID inside the Shared Drive, or use the Shared Drive ID as the root folder ID
-8. Update the configuration file, and redeploy the app to apply the changes
-9. Done! 🎉
-
-If you don't want to use the configuration section below, you can encrypt your \`Shared Drive\` ID using the \`/api/internal/encrypt?q=<drive_id>\` endpoint, and update the config file directly.
-`;
-
-export const migration_guide = `If you've already deployed the app before and want to upgrade from v1, you can follow this guide to migrate the app to the latest version.
-
-### Update your environment and configuration
-If you still have the \`.env.local file\`, you can go to the [configuration](#config) section, and load the file to update the environment variables.
-If you don't have it, go to your deployment platform and copy the environment variables from the platform to the [configuration](#config) section.
-
-You can also load the old \`gindex.config.ts\` file to the [configuration](#config) section to set the default configuration.
-
-### Update the repository
-First, you need to update the repository to the latest version.
-If you open your forked repository, you will see a notification that the repository is behind the original repository.
-You can sync the repository by clicking the \`Sync fork\` button.
-After the repository is updated, you can replace the \`gindex.config.ts\` file with the new one.
-
-### Update deployment
-Now go to your Vercel project page (or other platforms).
-Go to the \`Settings\` tab, and click the \`Environment Variables\` menu.
-You can delete all the old environment variables, and copy the new environment variables from the updated \`.env.local\` file.
-Now you can redeploy the app to apply the changes.
-`;
-const initialConfiguration: z.input<typeof Schema_App_Configuration> = {
-  environment: {
-    GD_SERVICE_B64: "",
-    ENCRYPTION_KEY: "",
-    SITE_PASSWORD: "",
-    NEXT_PUBLIC_DOMAIN: "",
-  },
-  api: {
-    ...config.apiConfig,
-    rootFolder: "",
-    isTeamDrive: false,
-    sharedDrive: "",
-    proxyThumbnail: true,
-
-    allowDownloadProtectedFile: false,
-    temporaryTokenDuration: 6,
-    maxFileSize: 4 * 1024 * 1024,
-  },
-  site: {
-    ...config.siteConfig,
-    siteName: "next-gdrive-index",
-    siteNameTemplate: "%s",
-    siteDescription: "A simple Google Drive Index using Next.js",
-    siteAuthor: "mbahArip",
-    twitterHandle: "@mbahArip",
-
-    showFileExtension: false,
-    footer: [
-      "{{ siteName }} *v{{ version }}* @ {{ repository }}",
-      "{{ year }} - Made with ❤️ by **{{ author }}**",
-    ],
-
-    privateIndex: false,
-    breadcrumbMax: 3,
-
-    toaster: {
-      position: "bottom-right",
-      duration: 3000,
-    },
-
-    navbarItems: [],
-    supports: [],
-  },
-};
-
-export function Configuration() {
-  const fileConfigRef = useRef<HTMLInputElement>(null);
-  const fileEnvRef = useRef<HTMLInputElement>(null);
-
-  const [loading, setLoading] = useState<boolean>(true);
-  const [configuration, setConfiguration] =
-    useState<z.input<typeof Schema_App_Configuration>>(initialConfiguration);
-  const [error, setError] = useState<{
-    environment: Partial<Record<ConfigurationKeys<"environment">, string>>;
-    api: Partial<Record<ConfigurationKeys<"api">, string>>;
-    site: Partial<Record<ConfigurationKeys<"site">, string>>;
-  }>({
-    environment: {},
-    api: {},
-    site: {},
-  });
-  const [downloadState, setDownloadState] = useState<ConfigState>("idle");
-
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
-  // It's been a year I'm learning TS, and this thing still scares me
-  function onConfigurationChange<
-    T extends ConfigurationCategory = ConfigurationCategory,
-    K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
-  >(category: T, key: K, value: ConfigurationValue<T, K>) {
-    setConfiguration((prev) => ({
-      ...prev,
-      [category]: {
-        ...prev[category],
-        [key]: value,
-      },
-    }));
-  }
-  function onReset(category: ConfigurationCategory) {
-    setConfiguration((prev) => ({
-      ...prev,
-      [category]: initialConfiguration[category],
-    }));
-    setError((prev) => ({
-      ...prev,
-      [category]: {},
-    }));
-  }
-  async function onDownload(
-    e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-  ) {
-    e.preventDefault();
-    setDownloadState("loading");
-    toast.loading("Generating configuration file...", {
-      id: "download-config",
-    });
-
-    try {
-      // Check required section first
-      const requiredEmpty = [
-        !configuration.environment.ENCRYPTION_KEY.length,
-        !configuration.environment.GD_SERVICE_B64.length,
-        !configuration.api.rootFolder.length,
-        configuration.api.isTeamDrive && !configuration.api.sharedDrive?.length,
-        !configuration.site.siteName.length,
-        !configuration.site.siteDescription.length,
-        configuration.site.privateIndex &&
-          !configuration.environment.SITE_PASSWORD?.length,
-      ];
-      if (requiredEmpty.filter((v) => v).length) {
-        throw new Error("Looks like you missed some required fields.");
-      }
-
-      const errors = [];
-      for (const err of Object.values(error.environment)) {
-        if (err.length) errors.push(err);
-      }
-      for (const err of Object.values(error.api)) {
-        if (err.length) errors.push(err);
-      }
-      for (const err of Object.values(error.site)) {
-        if (err.length) errors.push(err);
-      }
-
-      if (errors.length) {
-        throw new Error(
-          "Please fix all the errors before downloading the configuration file.",
-        );
-      }
-
-      function downloadBlob(blob: Blob, filename: string) {
-        const url = URL.createObjectURL(blob);
-        const anchor = document.createElement("a");
-        anchor.href = url;
-        anchor.download = filename;
-
-        const afterClick = () => {
-          setTimeout(() => {
-            URL.revokeObjectURL(url);
-            removeEventListener("click", afterClick);
-          }, 100);
-        };
-        anchor.addEventListener("click", afterClick, false);
-
-        anchor.click();
-      }
-
-      let envContent = Object.entries(configuration.environment)
-        .map(([key, value]) => `${key}=${value}`)
-        .join("\n");
-      envContent +=
-        "\n\n# Can't name it .env for download, so rename it to .env.local\n# Or you can copy the content to your deployment platform";
-
-      const configContent: string = `import { z } from "zod";
-import { Schema_Config } from "~/schema";
-import isDev from "~/utils/isDev";
-
-const config: z.input<typeof Schema_Config> = {
-  /**
-   * If possible, please don't change this value
-   * Even if you're creating a PR, just let me change it myself
-   */
-  version: "${config.version}",
-
-  /**
-   * Base path of the app, used for generating links
-   *
-   * If you're using another port for development, you can set it here
-   *
-   * @default process.env.NEXT_PUBLIC_DOMAIN
-   * @fallback process.env.NEXT_PUBLIC_VERCEL_URL
-   */
-  basePath: isDev
-      ? "http://localhost:3000"
-      : \`https://\${process.env.NEXT_PUBLIC_DOMAIN || process.env.NEXT_PUBLIC_VERCEL_URL}\`,
-
-  /**
-   * Allow access to the deploy guide
-   * Will use the \`/deploy\` route, might be overlap with file / folder name
-   *
-   * Set this to false on final deployment
-   *
-   * I'm using this to show the deploy guide on my own demo deployment
-   *
-   * @default false
-   */
-  showDeployGuide: false,
-
-  /**
-   * How long the cache will be stored in the browser
-   * Used for all pages and api routes
-   * Default is 5 minutes (300/60 = 5min)
-   *
-   * @default "max-age=0, s-maxage=60, stale-while-revalidate"
-   */
-  cacheControl: "max-age=0, s-maxage=60, stale-while-revalidate",
-
-  apiConfig: {
-    /**
-     * Starting point of the drive.
-     * Will be used for '/' route.
-     *
-     * Since service account can't access 'root' folder
-     * You need to create a new folder and share it with the service account
-     * Then, copy the folder id and paste it here
-     */
-    rootFolder:
-      "${await encryptData(
-        configuration.api.rootFolder,
-        configuration.environment.ENCRYPTION_KEY,
-      )}",
-
-    /**
-     * If your rootfolder inside a shared drive, you NEED to set this to true
-     * If not, you can set this to false
-     *
-     * You also need to set the shared drive ID to make it work
-     * Make sure you have add your service account to the shared drive since the service account can't access the shared drive by default
-     *
-     * Where to get the shared drive id?
-     * Go to your Shared Drive > Click on the shared drive > copy the ID from the url
-     * ex: https://drive.google.com/drive/u/0/folders/:shared_drive_id
-     *
-     * Then you need to encrypt it using \`/api/internal/encrypt?q=:shared_drive_id\` route
-     */
-    isTeamDrive: ${configuration.api.isTeamDrive ? "true" : "false"},
-    sharedDrive:
-      "${
-        configuration.api.isTeamDrive && configuration.api.sharedDrive
-          ? await encryptData(
-              configuration.api.sharedDrive,
-              configuration.environment.ENCRYPTION_KEY,
-            )
-          : ""
-      }",
-
-    defaultQuery: [
-      "trashed = false",
-      "(not mimeType contains 'google-apps' or mimeType contains 'folder')",
-    ],
-    defaultField:
-      "id, name, mimeType, thumbnailLink, fileExtension, modifiedTime, size, imageMediaMetadata, videoMediaMetadata, webContentLink, trashed",
-    defaultOrder: "folder, name asc, modifiedTime desc",
-
-    itemsPerPage: 50,
-    searchResult: 5,
-
-    /**
-     * By default, the app will use the thumbnail URL from Google Drive
-     *
-     * Sometimes, the thumbnail can't be accessed because of CORS policy
-     * If you're having this issue, you can set this to true
-     *
-     * This will make the api fetch the thumbnail and serve it from the server
-     * instead of using the Google Drive thumbnail
-     *
-     * This will increase the server load, so use it wisely
-     *
-     * Default: true
-     */
-    proxyThumbnail: ${configuration.api.proxyThumbnail ? "true" : "false"}, 
-    
-    /**
-     * Only show preview for files that are smaller than this size
-     * If the file is larger than this size, it will show "can't preview" message instead
-     *
-     * Why?
-     * Since the stream endpoint are counted as a bandwidth usage
-     * I want to limit the preview to only small files
-     * It also to prevent abuse from the user
-     *
-     * You can also set this to 0 to disable the limit
-     * 
-     * Default: 100MB
-     */
-    streamMaxSize: ${100 * 1024 * 1024},
-
-    /**
-     * Special file name that will be used for certain purposes
-     * These files will be ignored when searching for files
-     * and will be hidden from the files list by default
-     */
-    specialFile: {
-      password: ".password",
-      readme: ".readme.md",
-      /**
-       * Banner will be used for opengraph image for folder
-       * By default, all folder will use default og image
-       */
-      banner: ".banner",
-    },
-
-    /**
-     * Reason why banner has multiple extensions:
-     * - If I use contains query, it will also match the file or folder that contains the word.
-     *   (e.g: File / folder with the name of "Test Password" will be matched)
-     * - If I use = query, it will only match the exact name, hence the multiple extensions
-     *
-     * You can add more extensions if you want
-     */
-    hiddenFiles: [
-      ".password",
-      ".readme.md",
-      ".banner",
-      ".banner.jpg",
-      ".banner.png",
-      ".banner.webp",
-    ],
-
-    /**
-     * Allow user to download protected file without password.
-     * If this set to false, download link will have temporary token attached to it
-     * If this set to true, user can download the file without password as long as they have the link
-     *
-     * Default: false
-     */
-    allowDownloadProtectedFile: ${
-      configuration.api.allowDownloadProtectedFile ? "true" : "false"
-    },
-
-    /**
-     * Duration in hours.
-     * In version 2, this will be used for download link expiration.
-     * If you need it under 1 hour, you can use math expression. (e.g: (5 / 60) * 1 = 5 minutes)
-     *
-     * This only affect when the user download the file
-     * For example if you set it for example 30 minutes (0.5)
-     * After 30 minutes, and the user still downloading the file, the download will NOT be interrupted
-     * But if the user refresh the page / trying to download again, the download link will be expired
-     *
-     * Default: 6 hours
-     */
-    temporaryTokenDuration: ${configuration.api.temporaryTokenDuration},
-
-    /**
-     * Maximum file size that can be downloaded via api routes
-     * If it's larger than this, it will be redirected to the file url
-     *
-     * If you're using Vercel, they have a limit of ~4 - ~4.5MB response size
-     * ref: https://vercel.com/docs/platform/limits#serverless-function-payload-size-limit
-     * If you're using another platform, you can match the limit with your platform
-     * Or you can set this to 0 to disable the limit
-     *
-     * Default: 4MB
-     */
-    maxFileSize: ${configuration.api.maxFileSize},
-  },
-
-  siteConfig: {
-    /**
-     * Site Name will be used for default metadata title
-     * Site Name Template will be used if the page has a title
-     * %s will be replaced with the page title
-     *
-     * You can set it to undefined if you don't want to use it
-     */
-    siteName: "${configuration.site.siteName}",
-    siteNameTemplate: "${configuration.site.siteNameTemplate}",
-    siteDescription: "${configuration.site.siteDescription}",
-    siteIcon: "/logo.svg",
-    favIcon: "/favicon.png",
-
-    siteAuthor: "${configuration.site.siteAuthor}",
-    twitterHandle: "${configuration.site.twitterHandle}",
-
-    /**
-     * Next.js Metadata robots object
-     *
-     * ref: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#robots
-     */
-    robots: "noindex, nofollow",
-
-    /**
-     * Show file extension on the file name
-     * Example:
-     *    true       |   false
-     *    file.txt   |   file
-     *    100KB      |   txt / 100KB
-     *
-     * Default: false
-     */
-    showFileExtension: ${
-      configuration.site.showFileExtension ? "true" : "false"
-    },
-
-    /**
-     * Footer content
-     * You can also set it to empty array if you don't want to use it
-     *
-     * Basic markdown is supported (bold, italic, and link)
-     * External link will be opened in new tab
-     *
-     * Template:
-     * - {{ year }} will be replaced with the current year
-     * - {{ repository }} will be replaced with the original repository link
-     * - {{ author }} will be replaced with author from siteAuthor config above (If it's not set, it will be set to mbaharip)
-     * - {{ version }} will be replaced with the current version
-     * - {{ siteName }} will be replaced with the siteName config above
-     * - {{ handle }} will be replaced with the twitter handle from twitterHandle config above
-     * - {{ creator }} will be replaced with mbaharip if you want to credit me
-     */
-    footer: [
-      "{{ siteName }} *v{{ version }}* @ {{ repository }}",
-      "{{ year }} - Made with ❤️ by **{{ author }}**",
-      isDev ? "Development Mode" : "",
-    ],
-
-    /**
-     * DEPRECATED
-     * Since we're using shadcn/ui now, please refer to their theming documentation
-     * https://ui.shadcn.com/docs/theming
-     *
-     * Or you can use their themes, and replace the color in /src/app/globals.css
-     * https://ui.shadcn.com/themes
-     *
-     * Tailwind color name.
-     * Ref: https://tailwindcss.com/docs/customizing-colors
-     */
-    // defaultAccentColor: "teal",
-
-    /**
-     * Site wide password protection
-     * If this is set, all files and folders will be protected by this password
-     *
-     * The site password are set from Environment Variable (NEXT_GDRIVE_INDEX_PASSWORD)
-     * It's because I don't want to store sensitive data in the code
-     */
-    privateIndex: ${configuration.site.privateIndex ? "true" : "false"},
-
-    /**
-     * Maximum breadcrumb length
-     * If the breadcrumb is longer than this, it will be shortened
-     */
-    breadcrumbMax: 3,
-
-    /**
-     * Toast notification configuration
-     *
-     * position: Self-explanatory
-     * duration: duration before the toast disappear in milliseconds
-     */
-    toaster: {
-      position: "bottom-right",
-      duration: 3000,
-    },
-
-    /**
-     * This section should have autocomplete for both the object and the icon name
-     * 
-     * Example item:
-     * {
-     *  icon: string, // icon name from lucide icons (https://lucide.dev/icons/)
-     *  name: string,
-     *  href: string,
-     *  external?: boolean
-     * }
-     */
-    navbarItems: [],
-
-    /**
-     * Add support / donation links on the navbar
-     * 
-     * Example item:
-     * {
-     *  name: string,
-     *  currency: string,
-     *  href: string,
-     * }
-     */
-    supports: [],
-  },
-};
-
-export default config;`;
-
-      // downloadBlob(new Blob([envContent], { type: "text/plain" }), "env");
-      // downloadBlob(
-      //   new Blob([configContent], { type: "text/typescript" }),
-      //   "gindex.config.ts",
-      // );
-
-      toast.success("Configuration file downloaded!", {
-        id: "download-config",
-      });
-    } catch (error) {
-      const e = error as Error;
-      console.error(e);
-      toast.error(e.message, {
-        id: "download-config",
-      });
-    } finally {
-      setDownloadState("idle");
-    }
-  }
-  function onErrorSet<
-    T extends ConfigurationCategory = ConfigurationCategory,
-    K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
-  >(category: T, key: K, value: string) {
-    setError((prev) => ({
-      ...prev,
-      [category]: {
-        ...prev[category],
-        [key]: value,
-      },
-    }));
-  }
-
-  if (loading)
-    return (
-      <Card>
-        <CardContent className='grid h-[25dvh] w-full place-items-center'>
-          <Icon
-            name='LoaderCircle'
-            className='animate-spin text-primary'
-            size='2rem'
-          />
-        </CardContent>
-      </Card>
-    );
-
-  return (
-    <Card>
-      <CardHeader className='pb-0'>
-        <div className='flex w-full items-end justify-between gap-3'>
-          <CardTitle
-            className='text-3xl'
-            id='config'
-          >
-            App Configuration
-          </CardTitle>
-          <small className='text-muted-foreground'>v{config.version}</small>
-        </div>
-        <Separator />
-      </CardHeader>
-      <CardContent className='space-y-3 py-3'>
-        <Markdown
-          content={`This configuration only covering things you need to get started and basic personalization.
-You can check the configuration file itself to see all the available configuration. _(Each configuration has a description to help you understand it)_
-If you're migrating from previous version, you can load your old environment and config file to update the configuration.
-
-> If you found any bugs or issues, please report it to the [issue tracker](https://github.com/mbahArip/next-gdrive-index/issues)
-> I'll try to fix it as soon as possible`}
-          view='markdown'
-        />
-
-        <EnvironmentConfig
-          state={{ get: configuration, set: onConfigurationChange }}
-          error={{
-            get: error?.environment,
-            set: (key, value) => onErrorSet("environment", key, value),
-          }}
-          onReset={onReset}
-        />
-        <ApiConfig
-          state={{ get: configuration, set: onConfigurationChange }}
-          error={{
-            get: error?.api,
-            set: (key, value) => onErrorSet("api", key, value),
-          }}
-          onReset={onReset}
-        />
-        <SiteConfig
-          state={{ get: configuration, set: onConfigurationChange }}
-          error={{
-            get: error?.site,
-            set: (key, value) => onErrorSet("site", key, value),
-          }}
-          onReset={onReset}
-        />
-
-        <div className='flex w-full items-center justify-end gap-3'>
-          <Button
-            variant={"destructive"}
-            size={"sm"}
-            onClick={(e) => {
-              e.preventDefault();
-              setConfiguration(initialConfiguration);
-              setError({
-                environment: {},
-                api: {},
-                site: {},
-              });
-            }}
-          >
-            Reset All
-          </Button>
-          <Button
-            size={"sm"}
-            disabled={downloadState === "loading"}
-            onClick={onDownload}
-          >
-            <div className='relative flex w-full items-center justify-center'>
-              <span className='relative transition-all duration-300 ease-in-out'>
-                Download Config
-              </span>
-              <Icon
-                name='LoaderCircle'
-                className={cn(
-                  "animate-spin transition-all",
-                  downloadState === "loading"
-                    ? "ml-1.5 size-4 opacity-100"
-                    : "ml-0 size-0 opacity-0",
-                )}
-              />
-            </div>
-          </Button>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-export function CustomizeTheme() {
-  const [colors, setColors] = useState({
-    primary: { h: 200, s: 50, l: 50 },
-    secondary: { h: 200, s: 50, l: 50 },
-  });
-
-  return (
-    <Card>
-      <CardHeader className='pb-0'>
-        <CardTitle
-          className='text-3xl'
-          id='theme'
-        >
-          Customize Theme
-        </CardTitle>
-        <Separator />
-      </CardHeader>
-      <CardContent>
-        <Markdown
-          content={`#### Under Construction
-
-While I'm working on the theme customization, you can check [shadcn UI theme](https://ui.shadcn.com/themes) for now`}
-          view='markdown'
-        />
-      </CardContent>
-    </Card>
-  );
-}
diff --git a/src/app/[...rest]/deploy/index.tsx b/src/app/[...rest]/deploy/index.tsx
index f911edc..71bbdbf 100644
--- a/src/app/[...rest]/deploy/index.tsx
+++ b/src/app/[...rest]/deploy/index.tsx
@@ -1,64 +1,30 @@
 "use client";
 
 import { icons } from "lucide-react";
-import { useMemo, useState } from "react";
-import { z } from "zod";
-import { cn } from "~/utils";
+import { useMemo } from "react";
+import { getting_started, migration, new_user, shared_drive } from "~/data/docs";
 
-import Markdown from "~/app/@markdown";
-import Icon from "~/components/Icon";
+import { Icon, Markdown } from "~/components/Global";
+import { ConfigurationForm } from "~/components/Guide/Configuration";
+import { ThemeForm } from "~/components/Guide/Theme";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
-import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
 import { Separator } from "~/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
-import useMediaQuery from "~/hooks/useMediaQuery";
+import { cn } from "~/utils/cn";
 
-import {
-  Configuration,
-  CustomizeTheme,
-  getting_started,
-  migration_guide,
-  new_user_guide,
-  shared_drive_guide,
-} from "./docs";
-
-// type Section =
-//   | "start"
-//   | "new-user"
-//   | "shared-drive"
-//   | "migrating"
-//   | "config"
-//   | "theme";
-const SchemaSection = z.enum([
-  "start",
-  "new-user",
-  "shared-drive",
-  "migrating",
-  "config",
-  "theme",
-]);
-type Section = z.infer<typeof SchemaSection>;
+const Sections = ["start", "new-user", "shared-drive", "migrating", "config", "theme"] as const;
+type Section = (typeof Sections)[number];
 type SectionItem = {
   id: Section;
   title: string;
   icon: keyof typeof icons;
 };
+
 export default function DeployGuidePage() {
   const sectionMenu = useMemo<SectionItem[]>(
     () => [
-      // {
-      //   id: "start",
-      //   title: "Getting Started",
-      //   icon: "NotebookText",
-      // },
       {
         id: "new-user",
         title: "New User Guide",
@@ -74,95 +40,27 @@ export default function DeployGuidePage() {
         title: "Shared Drive Guide",
         icon: "Database",
       },
-      // {
-      //   id: "config",
-      //   title: "App Configuration",
-      //   icon: "Settings",
-      // },
-      // {
-      //   id: "theme",
-      //   title: "Theme Customization",
-      //   icon: "PaintRoller",
-      // },
     ],
     [],
   );
-  const [sectionOpen, setSectionOpen] = useState<boolean>(false);
-
-  const isDesktop = useMediaQuery("(min-width: 768px)");
 
   return (
-    <div
-      className={cn(
-        "relative mx-auto w-full max-w-screen-desktop",
-        "gap-3 p-3",
-        "flex-grow-0",
-        "flex flex-col",
-      )}
-    >
-      <div className='fixed bottom-6 right-6 z-10'>
-        <Button
-          size='icon'
-          variant='outline'
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: "smooth" });
-          }}
-        >
+    <div className={cn("relative mx-auto w-full max-w-screen-desktop", "gap-3 p-3", "flex-grow-0", "flex flex-col")}>
+      <Alert className='bg-blue-50 text-blue-600 dark:bg-blue-950/25 dark:text-blue-500'>
+        <div className='flex items-start gap-3'>
           <Icon
-            name='ChevronUp'
-            size='1.25rem'
+            name='Info'
+            className='size-5'
           />
-        </Button>
-      </div>
-      <div
-        id='fab'
-        className={cn("bottom-6 right-6 z-10 hidden")}
-      >
-        <DropdownMenu
-          open={sectionOpen}
-          onOpenChange={setSectionOpen}
-        >
-          <DropdownMenuTrigger asChild>
-            <Button
-              size={"icon"}
-              variant={"outline"}
-            >
-              <Icon
-                name='SquareMenu'
-                size={"1.25rem"}
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align='end'
-            side='left'
-          >
-            {sectionMenu.map((item) => (
-              <DropdownMenuItem
-                key={item.id}
-                asChild
-              >
-                <div
-                  // href={`#${item.id}`}
-                  className='flex w-full items-center justify-between gap-6'
-                  onClick={() => {
-                    const target = document.getElementById(item.id);
-                    if (target) {
-                      target.scrollIntoView({ behavior: "smooth" });
-                    }
-                  }}
-                >
-                  {item.title}
-                  <Icon
-                    name={item.icon}
-                    size={"1rem"}
-                  />
-                </div>
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+          <div className='flex flex-col'>
+            <AlertTitle>About this guide</AlertTitle>
+            <AlertDescription>
+              <p className='w-full whitespace-pre-wrap text-pretty'>{`If you can see this guide on your deployment.
+Please set the \`showDeployGuide\` to false on the config files. Since it will take up the \`deploy\` route.`}</p>
+            </AlertDescription>
+          </div>
+        </div>
+      </Alert>
 
       <Card>
         <CardHeader className='pb-0'>
@@ -172,7 +70,6 @@ export default function DeployGuidePage() {
         <CardContent>
           <Markdown
             content={getting_started}
-            view='markdown'
             className='px-0'
           />
         </CardContent>
@@ -191,21 +88,7 @@ export default function DeployGuidePage() {
             </TabsTrigger>
           ))}
         </TabsList>
-        {/* <TabsContent value='start'>
-          <Card>
-            <CardHeader className='pb-0'>
-              <CardTitle className='text-3xl'>Deployment Guide</CardTitle>
-              <Separator />
-            </CardHeader>
-            <CardContent>
-              <Markdown
-                content={getting_started}
-                view='markdown'
-                className='px-0'
-              />
-            </CardContent>
-          </Card>
-        </TabsContent> */}
+
         <TabsContent value='new-user'>
           <Card>
             <CardHeader className='pb-0'>
@@ -214,8 +97,7 @@ export default function DeployGuidePage() {
             </CardHeader>
             <CardContent>
               <Markdown
-                content={new_user_guide}
-                view='markdown'
+                content={new_user}
                 className='px-0'
               />
             </CardContent>
@@ -229,7 +111,7 @@ export default function DeployGuidePage() {
             </CardHeader>
             <CardContent>
               <Markdown
-                content={shared_drive_guide}
+                content={shared_drive}
                 view='markdown'
                 className='px-0'
               />
@@ -244,8 +126,7 @@ export default function DeployGuidePage() {
             </CardHeader>
             <CardContent>
               <Markdown
-                content={migration_guide}
-                view='markdown'
+                content={migration}
                 className='px-0'
               />
             </CardContent>
@@ -263,9 +144,7 @@ export default function DeployGuidePage() {
           />
           <div className='flex flex-col'>
             <AlertTitle>Heads up!</AlertTitle>
-            <AlertDescription>
-              The value of the form will be reset when you switch tabs.
-            </AlertDescription>
+            <AlertDescription>The value of the form will be reset when you switch tabs.</AlertDescription>
           </div>
         </div>
       </Alert>
@@ -287,11 +166,12 @@ export default function DeployGuidePage() {
             Theme Customization
           </TabsTrigger>
         </TabsList>
+
         <TabsContent value='config'>
-          <Configuration />
+          <ConfigurationForm />
         </TabsContent>
         <TabsContent value='theme'>
-          <CustomizeTheme />
+          <ThemeForm />
         </TabsContent>
       </Tabs>
     </div>
diff --git a/src/app/[...rest]/page.tsx b/src/app/[...rest]/page.tsx
index 5cfb7a3..4081c4d 100644
--- a/src/app/[...rest]/page.tsx
+++ b/src/app/[...rest]/page.tsx
@@ -1,35 +1,26 @@
 import { Metadata, ResolvedMetadata } from "next";
 import { notFound } from "next/navigation";
 import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
 
+import { Actions, Explorer, FilePath, Readme } from "~/components/Explorer";
+import { Password } from "~/components/Layout";
+import { PreviewLayout } from "~/components/Preview";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Separator } from "~/components/ui/separator";
 
-import { decryptData } from "~/utils/encryptionHelper/hash";
+import { cn } from "~/utils/cn";
+import { decryptData } from "~/utils/encryptionHelper";
 import gdrive from "~/utils/gdriveInstance";
 import { getFileType } from "~/utils/previewHelper";
 
-import config from "~/config/gIndex.config";
+import { Schema_File } from "~/types/schema";
+
+import { CheckPassword, CheckPaths, GetBanner, GetFile, GetFiles, GetReadme } from "actions";
+import config from "config";
 
-import FileBrowser from "../@explorer";
-import Header from "../@header";
-import HeaderButton from "../@header.button";
-import Password from "../@password";
-import FilePreviewLayout from "../@preview.layout";
-import Readme from "../@readme";
-import {
-  CheckPassword,
-  CheckPaths,
-  GetBanner,
-  GetFile,
-  GetFiles,
-  GetReadme,
-} from "../actions";
 import DeployGuidePage from "./deploy";
 
-export const revalidate = 300;
+export const revalidate = 60;
 export const dynamic = "force-dynamic";
 
 type Props = {
@@ -38,12 +29,8 @@ type Props = {
   };
 };
 
-export async function generateMetadata(
-  { params: { rest } }: Props,
-  parent: ResolvedMetadata,
-): Promise<Metadata> {
-  if (rest[0] === "deploy" && config.showDeployGuide)
-    return { title: "Deploy Guide" };
+export async function generateMetadata({ params: { rest } }: Props, parent: ResolvedMetadata): Promise<Metadata> {
+  if (rest.length === 1 && rest[0] === "deploy" && config.showDeployGuide) return { title: "Deploy Guide" };
 
   const paths = await CheckPaths(rest);
   if (!paths.success) return { title: "Not Found" };
@@ -56,17 +43,12 @@ export async function generateMetadata(
 
   return {
     title: data.name,
-    description: data.mimeType?.includes("folder")
-      ? `Browse ${data.name} files`
-      : `View ${data.name}`,
+    description: data.mimeType?.includes("folder") ? `Browse ${data.name} files` : `View ${data.name}`,
     openGraph: {
       images: banner
         ? [
             {
               url: `/api/og/${banner}`,
-              // url: `/api/og/${
-              //   data.mimeType.startsWith("image") ? data.encryptedId : banner
-              // }`,
               width: 1200,
               height: 630,
             },
@@ -77,8 +59,7 @@ export async function generateMetadata(
 }
 
 export default async function RestPage({ params: { rest } }: Props) {
-  if (rest[0] === "deploy" && config.showDeployGuide)
-    return <DeployGuidePage />;
+  if (rest.length === 1 && rest[0] === "deploy" && config.showDeployGuide) return <DeployGuidePage />;
 
   const paths = await CheckPaths(rest);
   if (!paths.success) notFound();
@@ -86,11 +67,7 @@ export default async function RestPage({ params: { rest } }: Props) {
 
   if (!unlocked.success) {
     if (!unlocked.path)
-      throw new Error(
-        `No path returned from password checking${
-          unlocked.message && `, ${unlocked.message}`
-        }`,
-      );
+      throw new Error(`No path returned from password checking${unlocked.message && `, ${unlocked.message}`}`);
     return (
       <Password
         path={unlocked.path}
@@ -101,10 +78,10 @@ export default async function RestPage({ params: { rest } }: Props) {
   }
 
   const encryptedId = paths.data.pop()?.id;
-  if (!encryptedId)
-    throw new Error("Failed to get encrypted ID, try to refresh the page.");
+  if (!encryptedId) throw new Error("Failed to get encrypted ID, try to refresh the page.");
 
   const promise = [];
+
   const { data: file } = await gdrive.files.get({
     fileId: await decryptData(encryptedId),
     fields: "mimeType, fileExtension",
@@ -123,35 +100,27 @@ export default async function RestPage({ params: { rest } }: Props) {
     if (file.success) {
       return values as [z.infer<typeof Schema_File>, string];
     } else {
-      return values as [
-        { files: z.infer<typeof Schema_File>[]; nextPageToken?: string },
-        string,
-      ];
+      return values as [{ files: z.infer<typeof Schema_File>[]; nextPageToken?: string }, string];
     }
   });
-  let fileType;
-  if (file.fileExtension && file.mimeType) {
-    fileType = getFileType(file.fileExtension, file.mimeType);
-  }
-  const isFile = !("files" in data);
 
   return (
     <div className={cn("h-fit w-full", "flex flex-col gap-3")}>
-      <Header
-        name='Root'
-        breadcrumb={rest.map((item, index, array) => ({
+      <FilePath
+        data={rest.map((item, index, array) => ({
           label: decodeURIComponent(item),
           href: index === array.length - 1 ? undefined : `${item}`,
         }))}
       />
-      <div
+
+      <section
         slot='content'
         className='w-full'
       >
-        {isFile ? (
-          <FilePreviewLayout
+        {!("files" in data) ? (
+          <PreviewLayout
             data={data}
-            fileType={fileType || "unknown"}
+            fileType={file.fileExtension && file.mimeType ? getFileType(file.fileExtension, file.mimeType) : "unknown"}
           />
         ) : (
           <>
@@ -159,40 +128,28 @@ export default async function RestPage({ params: { rest } }: Props) {
               <CardHeader className='pb-0'>
                 <div className='flex w-full items-center justify-between gap-3'>
                   <CardTitle className='flex-grow'>Browse files</CardTitle>
-                  <HeaderButton />
+                  <Actions />
                 </div>
                 <Separator />
               </CardHeader>
               <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
-                <FileBrowser
+                <Explorer
+                  encryptedId={encryptedId}
                   files={data.files}
                   nextPageToken={data.nextPageToken}
                 />
               </CardContent>
             </Card>
-            {readme && (
-              <Readme
-                content={readme}
-                title={"README.md"}
-              />
-              // <div
-              //   slot='readme'
-              //   className='w-full'
-              // >
-              //   <Card>
-              //     <CardHeader className='pb-0'>
-              //       <CardTitle>README.md</CardTitle>
-              //       <Separator />
-              //     </CardHeader>
-              //     <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
-              //       <Markdown content={readme} />
-              //     </CardContent>
-              //   </Card>
-              // </div>
-            )}
           </>
         )}
-      </div>
+      </section>
+
+      {readme && (
+        <Readme
+          content={readme}
+          title={"README.md"}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/app/actions.ts b/src/app/actions.ts
index 90ffc18..6ea365f 100644
--- a/src/app/actions.ts
+++ b/src/app/actions.ts
@@ -4,14 +4,14 @@ import crypto from "crypto";
 import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 import { z } from "zod";
-import { Schema_File } from "~/schema";
 
-import { decryptData, encryptData } from "~/utils/encryptionHelper/hash";
-import gdrive from "~/utils/gdriveInstance";
+import { decryptData, encryptData } from "~/utils/encryptionHelper";
+import gdrive, { gdriveNoCache } from "~/utils/gdriveInstance";
 
 import { Constant } from "~/types/constant";
+import { Schema_File } from "~/types/schema";
 
-import config from "~/config/gIndex.config";
+import config from "config";
 
 export async function CheckSitePassword(): Promise<{
   success: boolean;
@@ -36,9 +36,7 @@ export async function CheckSitePassword(): Promise<{
     const password = store.get(Constant.cookies_SitePassword)?.value || "";
     const decryptedPassword = await decryptData(password);
     if (decryptedPassword !== process.env.SITE_PASSWORD)
-      throw new Error(
-        "Saved password is incorrect, please re-enter the password",
-      );
+      throw new Error("Saved password is incorrect, please re-enter the password");
 
     return {
       success: true,
@@ -156,32 +154,58 @@ export async function CheckPaths(paths: string[]): Promise<
 
     const data = await Promise.all(promises);
     const notFoundIndex = data.findIndex((item) => !item);
-    if (notFoundIndex !== -1)
-      throw new Error(`Path not found: ${paths[notFoundIndex]}`);
+    if (notFoundIndex !== -1) throw new Error(`Path not found: ${paths[notFoundIndex]}`);
 
     // Check if each path is valid
     let valid = true;
     let invalidPath: string | undefined;
     const decryptedRootId = await decryptData(config.apiConfig.rootFolder);
-    for (const [index, path] of data.entries()) {
+    const dataWithIndex = data.map((item, index) => {
+      return {
+        ...item,
+        index: index,
+      };
+    });
+    const filteredPaths: { path: string; data: { id: string; parents: string; mimeType: string }[] }[] = [];
+
+    for (const item of dataWithIndex) {
       if (!valid) break;
 
-      if (index === 0) {
-        if (
-          path?.data[0].parents === decryptedRootId ||
-          path?.data[0].parents === decryptedSharedDrive
-        )
-          break;
-      } else {
-        if (path?.data[0].parents === data[index - 1]?.data[0].id) break;
+      // Loop through data
+      // If the current index is 0, check if the parents is the root folder or shared drive
+      // If the current index is not 0, check if the parents is the previous data id from the filteredPaths
+
+      // Use filteredPaths because it will only contain the valid path
+      // So if filteredPaths length is not equal to paths length, then it means there is an invalid path
+      for (const path of item.data || []) {
+        if (item.index === 0) {
+          if (path.parents === decryptedRootId || path.parents === decryptedSharedDrive) {
+            filteredPaths.push({
+              path: item.path!,
+              data: [{ id: path.id!, parents: path.parents!, mimeType: path.mimeType! }],
+            });
+            break;
+          }
+        } else {
+          if (path.parents === filteredPaths[item.index - 1]?.data?.[0].id) {
+            filteredPaths.push({
+              path: item.path!,
+              data: [{ id: path.id!, parents: path.parents!, mimeType: path.mimeType! }],
+            });
+            break;
+          }
+        }
       }
-      valid = false;
-      invalidPath = data[index]?.path;
     }
+    if (filteredPaths.length !== paths.length) {
+      valid = false;
+      invalidPath = dataWithIndex[filteredPaths.length]?.path;
+    }
+
     if (!valid) throw new Error(`Invalid path: ${invalidPath}`);
 
     const ids: { path: string; id: string }[] = [];
-    for (const item of data) {
+    for (const item of filteredPaths) {
       if (item) {
         const encryptedId = await encryptData(item.data[0].id as string);
         ids.push({
@@ -203,9 +227,7 @@ export async function CheckPaths(paths: string[]): Promise<
     };
   }
 }
-export async function CheckPassword(
-  paths: { path: string; id: string }[],
-): Promise<
+export async function CheckPassword(paths: { path: string; id: string }[]): Promise<
   | {
       success: false;
       message?: string;
@@ -230,7 +252,7 @@ export async function CheckPassword(
       `trashed = false`,
       `(${ids.map((id) => `'${id}' in parents`).join(" or ")})`, // Filter by paths id
     ];
-    const { data: password } = await gdrive.files
+    const { data: password } = await gdriveNoCache.files
       .list({
         q: query.join(" and "),
         fields: "files(id, name, mimeType, parents)",
@@ -250,21 +272,15 @@ export async function CheckPassword(
     // To save processing time, skip if password file not found
     if (!password.files?.length) return { success: true };
 
-    const protectedFolder = password.files
-      .filter((file) => ids.includes(file.parents?.[0] as string))
-      ?.shift(); // Shift to get only the nearest folder
+    const protectedFolder = password.files.filter((file) => ids.includes(file.parents?.[0] as string))?.shift(); // Shift to get only the nearest folder
 
     // To save processing time, skip if all of the paths are not protected
     if (!protectedFolder) return { success: true };
 
     const store = cookies();
-    const folderIndex = ids.findIndex(
-      (item) => item === protectedFolder.parents?.[0],
-    );
+    const folderIndex = ids.findIndex((item) => item === protectedFolder.parents?.[0]);
 
-    const cookiesValue = JSON.parse(
-      store.get(Constant.cookies_FolderPassword)?.value || "{}",
-    );
+    const cookiesValue = JSON.parse(store.get(Constant.cookies_FolderPassword)?.value || "{}");
     const currentFolder = paths[folderIndex];
     if (!cookiesValue[currentFolder.id])
       throw {
@@ -321,9 +337,7 @@ export async function SetPassword(
 }> {
   try {
     const store = cookies();
-    const cookiesValue = JSON.parse(
-      store.get(Constant.cookies_FolderPassword)?.value || "{}",
-    );
+    const cookiesValue = JSON.parse(store.get(Constant.cookies_FolderPassword)?.value || "{}");
     const updatedValue = {
       ...cookiesValue,
       [path]: await encryptData(password),
@@ -352,13 +366,7 @@ export async function SetPassword(
   }
 }
 
-export async function GetFiles({
-  id,
-  pageToken,
-}: {
-  id?: string;
-  pageToken?: string;
-}): Promise<{
+export async function GetFiles({ id, pageToken }: { id?: string; pageToken?: string }): Promise<{
   files: z.infer<typeof Schema_File>[];
   nextPageToken?: string;
 }> {
@@ -372,14 +380,10 @@ export async function GetFiles({
       decryptedSharedDrive = await decryptData(config.apiConfig.sharedDrive);
     }
 
-    const filterName = config.apiConfig.hiddenFiles
-      .map((item) => `not name = '${item}'`)
-      .join(" and ");
-    const query: string = [
-      ...config.apiConfig.defaultQuery,
-      `'${decryptedId}' in parents`,
-      `${filterName}`,
-    ].join(" and ");
+    const filterName = config.apiConfig.hiddenFiles.map((item) => `not name = '${item}'`).join(" and ");
+    const query: string = [...config.apiConfig.defaultQuery, `'${decryptedId}' in parents`, `${filterName}`].join(
+      " and ",
+    );
 
     const data = await gdrive.files.list({
       q: query,
@@ -396,21 +400,16 @@ export async function GetFiles({
     });
 
     const encryptedData: z.infer<typeof Schema_File>[] = [];
-    if (!data.data.files?.length)
-      return { files: [], nextPageToken: undefined };
+    if (!data.data.files?.length) return { files: [], nextPageToken: undefined };
     for (const file of data.data.files) {
       encryptedData.push({
         mimeType: file.mimeType as string,
         encryptedId: await encryptData(file.id as string),
         name: file.name as string,
         trashed: (file.trashed as boolean) ?? false,
-        modifiedTime: new Date(
-          file.modifiedTime as string,
-        ).toLocaleDateString(),
+        modifiedTime: new Date(file.modifiedTime as string).toLocaleDateString(),
         fileExtension: file.fileExtension || undefined,
-        encryptedWebContentLink: file.webContentLink
-          ? await encryptData(file.webContentLink)
-          : undefined,
+        encryptedWebContentLink: file.webContentLink ? await encryptData(file.webContentLink) : undefined,
         size: file.size ? Number(file.size) : undefined,
         thumbnailLink: file.thumbnailLink || undefined,
         imageMediaMetadata: file.imageMediaMetadata
@@ -441,9 +440,7 @@ export async function GetFiles({
     throw new Error(e.message);
   }
 }
-export async function GetFile(
-  encryptedId: string,
-): Promise<z.infer<typeof Schema_File>> {
+export async function GetFile(encryptedId: string): Promise<z.infer<typeof Schema_File>> {
   try {
     const decryptedId = await decryptData(encryptedId);
     const { data: file } = await gdrive.files.get({
@@ -459,9 +456,7 @@ export async function GetFile(
       trashed: (file.trashed as boolean) ?? false,
       modifiedTime: new Date(file.modifiedTime as string).toLocaleDateString(),
       fileExtension: file.fileExtension || undefined,
-      encryptedWebContentLink: file.webContentLink
-        ? await encryptData(file.webContentLink)
-        : undefined,
+      encryptedWebContentLink: file.webContentLink ? await encryptData(file.webContentLink) : undefined,
       size: file.size ? Number(file.size) : undefined,
       thumbnailLink: file.thumbnailLink || undefined,
       imageMediaMetadata: file.imageMediaMetadata
@@ -504,9 +499,7 @@ export async function SearchFile(
     const query: string[] = [
       ...config.apiConfig.defaultQuery,
       `name contains '${keyword}'`,
-      config.apiConfig.hiddenFiles
-        .map((item) => `not name = '${item}'`)
-        .join(" and "),
+      config.apiConfig.hiddenFiles.map((item) => `not name = '${item}'`).join(" and "),
     ];
     const data = await gdrive.files.list({
       q: query.join(" and "),
@@ -522,21 +515,16 @@ export async function SearchFile(
       }),
     });
     const encryptedData: z.infer<typeof Schema_File>[] = [];
-    if (!data.data.files?.length)
-      return { files: [], nextPageToken: undefined };
+    if (!data.data.files?.length) return { files: [], nextPageToken: undefined };
     for (const file of data.data.files) {
       encryptedData.push({
         mimeType: file.mimeType as string,
         encryptedId: await encryptData(file.id as string),
         name: file.name as string,
         trashed: (file.trashed as boolean) ?? false,
-        modifiedTime: new Date(
-          file.modifiedTime as string,
-        ).toLocaleDateString(),
+        modifiedTime: new Date(file.modifiedTime as string).toLocaleDateString(),
         fileExtension: file.fileExtension || undefined,
-        encryptedWebContentLink: file.webContentLink
-          ? await encryptData(file.webContentLink)
-          : undefined,
+        encryptedWebContentLink: file.webContentLink ? await encryptData(file.webContentLink) : undefined,
         size: file.size ? Number(file.size) : undefined,
         thumbnailLink: file.thumbnailLink || undefined,
         imageMediaMetadata: file.imageMediaMetadata
@@ -611,8 +599,7 @@ export async function GetContent(encryptedId: string): Promise<string> {
       },
     );
 
-    if (typeof file !== "string")
-      throw new Error("It seems the file is not a text file");
+    if (typeof file !== "string") throw new Error("It seems the file is not a text file");
 
     return file as string;
   } catch (error) {
@@ -621,9 +608,7 @@ export async function GetContent(encryptedId: string): Promise<string> {
     throw new Error(e.message);
   }
 }
-export async function GetReadme(
-  encryptedId: string | undefined,
-): Promise<string | null> {
+export async function GetReadme(encryptedId: string | undefined): Promise<string | null> {
   try {
     let decryptedId;
     if (encryptedId) decryptedId = await decryptData(encryptedId);
@@ -635,7 +620,8 @@ export async function GetReadme(
     }
 
     const query: string[] = [
-      ...config.apiConfig.defaultQuery,
+      "trashed = false",
+      "(not mimeType contains 'folder')",
       `name = '${config.apiConfig.specialFile.readme}'`,
       `'${decryptedId}' in parents`,
     ];
@@ -652,11 +638,57 @@ export async function GetReadme(
         corpora: "drive",
       }),
     });
+
     if (!data.files?.length) return null;
 
+    let file;
+
+    if (data.files.length === 1) {
+      file = data.files[0];
+    } else {
+      // Check by mimetype, use google-apps.shortcut last
+      file = data.files.find((item) => item.mimeType === "text/markdown");
+      if (!file) {
+        file = data.files.find((item) => item.mimeType === "application/vnd.google-apps.shortcut");
+      }
+    }
+
+    if (!file) return null;
+    if (
+      file.mimeType !== "text/markdown" &&
+      file.mimeType !== "application/vnd.google-apps.shortcut" &&
+      file.mimeType !== "text/plain"
+    )
+      return null;
+
+    if (file.mimeType === "application/vnd.google-apps.shortcut") {
+      const { data: shortcutData } = (await gdrive.files.get({
+        fileId: file.id as string,
+        fields: "shortcutDetails",
+        supportsAllDrives: config.apiConfig.isTeamDrive,
+      })) as {
+        data: { shortcutDetails: { targetId: string; targetMimeType: string } };
+      };
+      if (!shortcutData.shortcutDetails.targetId) return null;
+      if (shortcutData.shortcutDetails.targetMimeType !== "text/markdown") return null;
+
+      const { data: content } = await gdrive.files.get(
+        {
+          fileId: shortcutData.shortcutDetails.targetId,
+          alt: "media",
+          supportsAllDrives: config.apiConfig.isTeamDrive,
+        },
+        {
+          responseType: "text",
+        },
+      );
+
+      return content as string;
+    }
+
     const { data: content } = await gdrive.files.get(
       {
-        fileId: data.files[0].id as string,
+        fileId: file.id as string,
         alt: "media",
         supportsAllDrives: config.apiConfig.isTeamDrive,
       },
@@ -672,9 +704,7 @@ export async function GetReadme(
     throw new Error(e.message);
   }
 }
-export async function GetBanner(
-  encryptedId: string | undefined,
-): Promise<string | null> {
+export async function GetBanner(encryptedId: string | undefined): Promise<string | null> {
   try {
     let decryptedId;
     if (encryptedId) decryptedId = await decryptData(encryptedId);
@@ -722,14 +752,10 @@ export async function GetWebContent(encrypted: string): Promise<string> {
     throw new Error(e.message);
   }
 }
-export async function CreateDownloadToken(
-  duration: number = config.apiConfig.temporaryTokenDuration,
-): Promise<string> {
+export async function CreateDownloadToken(duration: number = config.apiConfig.temporaryTokenDuration): Promise<string> {
   try {
     const data = {
-      expiredAt:
-        Date.now() +
-        duration * 60 * 60 * 1000 * config.apiConfig.temporaryTokenDuration,
+      expiredAt: Date.now() + duration * 60 * 60 * 1000 * config.apiConfig.temporaryTokenDuration,
     };
     const token = await encryptData(JSON.stringify(data));
     return token;
@@ -748,8 +774,7 @@ export async function CheckDownloadToken(token: string): Promise<{
     if (decryptToken.expiredAt < Date.now()) {
       return {
         success: false,
-        message:
-          "Download token expired, please click the download button again to get a new token",
+        message: "Download token expired, please click the download button again to get a new token",
       };
     }
 
@@ -776,10 +801,7 @@ export async function GenerateAESKey(): Promise<string> {
     throw new Error(e.message);
   }
 }
-export async function VerifyAESKey(
-  data: string,
-  key: string,
-): Promise<boolean> {
+export async function VerifyAESKey(data: string, key: string): Promise<boolean> {
   try {
     let paddedKey;
     if (key.length < 16) {
diff --git a/src/app/api/download/[encryptedId]/route.ts b/src/app/api/download/[encryptedId]/route.ts
index 15cb631..39956d5 100644
--- a/src/app/api/download/[encryptedId]/route.ts
+++ b/src/app/api/download/[encryptedId]/route.ts
@@ -1,17 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import {
-  CheckDownloadToken,
-  CheckPassword,
-  CheckPaths,
-  CheckSitePassword,
-  RedirectSearchFile,
-} from "~/app/actions";
-
-import { decryptData } from "~/utils/encryptionHelper/hash";
+import { decryptData } from "~/utils/encryptionHelper";
 import { gdriveNoCache as gdrive } from "~/utils/gdriveInstance";
 
-import config from "~/config/gIndex.config";
+import { CheckDownloadToken, CheckPassword, CheckPaths, CheckSitePassword, RedirectSearchFile } from "actions";
+import config from "config";
 
 export const dynamic = "force-dynamic";
 
@@ -33,10 +26,7 @@ export async function GET(
     const tokenValidity = await CheckDownloadToken(token);
     if (!tokenValidity.success) throw new Error(tokenValidity.message);
 
-    if (
-      config.siteConfig.privateIndex &&
-      !config.apiConfig.allowDownloadProtectedFile
-    ) {
+    if (config.siteConfig.privateIndex && !config.apiConfig.allowDownloadProtectedFile) {
       const unlocked = await CheckSitePassword();
       if (!unlocked.success) {
         return new NextResponse(
@@ -65,12 +55,9 @@ If you've already entered the password, please make sure your browser is not blo
       if (!checkPath.success) throw new Error("File not found");
       const unlocked = await CheckPassword(checkPath.data);
       if (!unlocked.success) {
-        if (!unlocked.path)
-          throw new Error("No path returned from password checking");
+        if (!unlocked.path) throw new Error("No path returned from password checking");
 
-        const lockedIndex = checkPath.data.findIndex(
-          (path) => path.id === unlocked.path,
-        );
+        const lockedIndex = checkPath.data.findIndex((path) => path.id === unlocked.path);
         // Get all path until the locked index, then join them
         const path = checkPath.data
           .slice(0, lockedIndex + 1)
@@ -91,13 +78,9 @@ If you've already entered the password, please make sure your browser is not blo
     }
 
     const fileSize = Number(fileMeta.data.size || 0);
-    if (!fileMeta.data.webContentLink)
-      throw new Error("No download link found");
+    if (!fileMeta.data.webContentLink) throw new Error("No download link found");
 
-    if (
-      config.apiConfig.maxFileSize &&
-      fileSize > config.apiConfig.maxFileSize
-    ) {
+    if (config.apiConfig.maxFileSize && fileSize > config.apiConfig.maxFileSize) {
       const contentUrl = new URL(fileMeta.data.webContentLink);
       contentUrl.searchParams.set("confirm", "1");
       return NextResponse.redirect(contentUrl, {
diff --git a/src/app/api/internal/encrypt/route.ts b/src/app/api/internal/encrypt/route.ts
index c62f22e..7fdbe39 100644
--- a/src/app/api/internal/encrypt/route.ts
+++ b/src/app/api/internal/encrypt/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { encryptData } from "~/utils/encryptionHelper/hash";
+import { encryptData } from "~/utils/encryptionHelper";
 
 export const dynamic = "force-dynamic";
 
@@ -8,11 +8,7 @@ export async function GET(request: NextRequest) {
   try {
     const sp = new URL(request.nextUrl).searchParams;
     const query = sp.get("q");
-    if (!query)
-      return new NextResponse(
-        "Add query parameter 'q' with the value to encrypt",
-        { status: 400 },
-      );
+    if (!query) return new NextResponse("Add query parameter 'q' with the value to encrypt", { status: 400 });
 
     const encrypted = await encryptData(query);
 
diff --git a/src/app/api/og/[encryptedId]/route.ts b/src/app/api/og/[encryptedId]/route.ts
index a569935..61f5ddf 100644
--- a/src/app/api/og/[encryptedId]/route.ts
+++ b/src/app/api/og/[encryptedId]/route.ts
@@ -1,9 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import { decryptData } from "~/utils/encryptionHelper/hash";
+import { decryptData } from "~/utils/encryptionHelper";
 import gdrive from "~/utils/gdriveInstance";
 
-import config from "~/config/gIndex.config";
+import config from "config";
 
 type Props = {
   params: {
@@ -11,10 +11,7 @@ type Props = {
   };
 };
 
-export async function GET(
-  request: NextRequest,
-  { params: { encryptedId } }: Props,
-) {
+export async function GET(request: NextRequest, { params: { encryptedId } }: Props) {
   try {
     const decryptedId = await decryptData(encryptedId);
     const { data } = await gdrive.files.get({
diff --git a/src/app/api/raw/[...rest]/route.ts b/src/app/api/raw/[...rest]/route.ts
index 832c865..2481ddb 100644
--- a/src/app/api/raw/[...rest]/route.ts
+++ b/src/app/api/raw/[...rest]/route.ts
@@ -1,16 +1,13 @@
 import { NextRequest, NextResponse } from "next/server";
-import { CheckPassword, CheckPaths, GetFile } from "~/app/actions";
 
-import { decryptData } from "~/utils/encryptionHelper/hash";
+import { decryptData } from "~/utils/encryptionHelper";
 
-import config from "~/config/gIndex.config";
+import { CheckPassword, CheckPaths, GetFile } from "actions";
+import config from "config";
 
 export const dynamic = "force-dynamic";
 
-export async function GET(
-  request: NextRequest,
-  { params: { rest } }: { params: { rest: string[] } },
-) {
+export async function GET(request: NextRequest, { params: { rest } }: { params: { rest: string[] } }) {
   try {
     const sp = new URL(request.nextUrl).searchParams;
     const token = sp.get("token");
@@ -22,31 +19,18 @@ export async function GET(
     if (!config.apiConfig.allowDownloadProtectedFile) {
       const unlocked = await CheckPassword(paths.data);
       if (!unlocked.success)
-        throw new Error(
-          unlocked.path
-            ? unlocked.message
-            : "No path returned from password checking",
-        );
+        throw new Error(unlocked.path ? unlocked.message : "No path returned from password checking");
     }
 
     const encryptedId = paths.data.pop()?.id;
-    if (!encryptedId)
-      throw new Error("Failed to get encrypted ID, try to refresh the page.");
+    if (!encryptedId) throw new Error("Failed to get encrypted ID, try to refresh the page.");
     if (token !== encryptedId) throw new Error("Invalid token");
 
     const data = await GetFile(encryptedId);
-    if (data.mimeType?.includes("folder"))
-      throw new Error("Can't download folder");
-    if (
-      !data.mimeType.includes("video") &&
-      !data.mimeType.includes("image") &&
-      !data.mimeType.includes("audio")
-    )
-      throw new Error(
-        "Raw link only available for video, image, and audio files",
-      );
-    if (!data.encryptedWebContentLink)
-      throw new Error("No download link found");
+    if (data.mimeType?.includes("folder")) throw new Error("Can't download folder");
+    if (!data.mimeType.includes("video") && !data.mimeType.includes("image") && !data.mimeType.includes("audio"))
+      throw new Error("Raw link only available for video, image, and audio files");
+    if (!data.encryptedWebContentLink) throw new Error("No download link found");
 
     const decryptedWebContent = await decryptData(data.encryptedWebContentLink);
     return new NextResponse(null, {
diff --git a/src/app/api/stream/[encryptedId]/helper.ts b/src/app/api/stream/[encryptedId]/helper.ts
deleted file mode 100644
index d12e947..0000000
--- a/src/app/api/stream/[encryptedId]/helper.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Readable } from "stream";
-
-async function* nodeStreamToIterator(stream: any) {
-  for await (const chunk of stream) {
-    yield chunk;
-  }
-}
-
-function iteratorToStream(iterator: AsyncGenerator<any>) {
-  return new ReadableStream({
-    async pull(controller) {
-      const { done, value } = await iterator.next();
-      if (done) {
-        controller.close();
-      } else {
-        controller.enqueue(value);
-      }
-    },
-  });
-}
-export function streamFile(body: Readable): ReadableStream {
-  const data: ReadableStream = iteratorToStream(nodeStreamToIterator(body));
-  return data;
-}
diff --git a/src/app/api/stream/[encryptedId]/route.ts b/src/app/api/stream/[encryptedId]/route.ts
index e6285fc..46c85e6 100644
--- a/src/app/api/stream/[encryptedId]/route.ts
+++ b/src/app/api/stream/[encryptedId]/route.ts
@@ -1,17 +1,11 @@
 import { NextRequest, NextResponse } from "next/server";
 
-import {
-  CheckDownloadToken,
-  CheckPassword,
-  CheckPaths,
-  RedirectSearchFile,
-} from "~/app/actions";
-
-import { decryptData } from "~/utils/encryptionHelper/hash";
+import { decryptData } from "~/utils/encryptionHelper";
 import { gdriveNoCache as gdrive } from "~/utils/gdriveInstance";
-import isDev from "~/utils/isDev";
+import { isDev } from "~/utils/isDev";
 
-import config from "~/config/gIndex.config";
+import { CheckDownloadToken, CheckPassword, CheckPaths, RedirectSearchFile } from "actions";
+import config from "config";
 
 export const dynamic = "force-dynamic";
 
@@ -57,18 +51,12 @@ export async function GET(
 
     const [filePaths, fileMeta] = await Promise.all([_filePaths, _fileMeta]);
 
-    const isFull =
-      Number(request.headers.get("Range")?.split("-")[1] || 0) ===
-      Number(fileMeta.data.size || "1") - 1;
+    const isFull = Number(request.headers.get("Range")?.split("-")[1] || 0) === Number(fileMeta.data.size || "1") - 1;
 
     const fileSize = Number(fileMeta.data.size || 0);
-    if (!fileMeta.data.webContentLink)
-      throw new Error("No download link found");
+    if (!fileMeta.data.webContentLink) throw new Error("No download link found");
 
-    if (
-      config.apiConfig.streamMaxSize &&
-      fileSize > config.apiConfig.streamMaxSize
-    ) {
+    if (config.apiConfig.streamMaxSize && fileSize > config.apiConfig.streamMaxSize) {
       throw new Error("File is too large to stream");
     }
 
@@ -77,12 +65,9 @@ export async function GET(
       if (!checkPath.success) throw new Error("File not found");
       const unlocked = await CheckPassword(checkPath.data);
       if (!unlocked.success) {
-        if (!unlocked.path)
-          throw new Error("No path returned from password checking");
+        if (!unlocked.path) throw new Error("No path returned from password checking");
 
-        const lockedIndex = checkPath.data.findIndex(
-          (path) => path.id === unlocked.path,
-        );
+        const lockedIndex = checkPath.data.findIndex((path) => path.id === unlocked.path);
         // Get all path until the locked index, then join them
         const path = checkPath.data
           .slice(0, lockedIndex + 1)
diff --git a/src/app/api/thumb/[encryptedId]/route.ts b/src/app/api/thumb/[encryptedId]/route.ts
index eb7f431..0255c3d 100644
--- a/src/app/api/thumb/[encryptedId]/route.ts
+++ b/src/app/api/thumb/[encryptedId]/route.ts
@@ -1,10 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
 
-import { decryptData } from "~/utils/encryptionHelper/hash";
-import isDev from "~/utils/isDev";
+import { decryptData } from "~/utils/encryptionHelper";
+import { isDev } from "~/utils/isDev";
 
-import config from "~/config/gIndex.config";
+import config from "config";
 
 type Props = {
   params: {
@@ -12,10 +12,7 @@ type Props = {
   };
 };
 
-export async function GET(
-  request: NextRequest,
-  { params: { encryptedId } }: Props,
-) {
+export async function GET(request: NextRequest, { params: { encryptedId } }: Props) {
   try {
     const searchParams = new URL(request.nextUrl).searchParams;
     const size = searchParams.get("size") || "512";
@@ -30,12 +27,9 @@ export async function GET(
       throw new Error("Invalid size");
     }
 
-    const defaultImage = NextResponse.redirect(
-      new URL("/og.png", config.basePath),
-      {
-        status: 302,
-      },
-    );
+    const defaultImage = NextResponse.redirect(new URL("/og.png", config.basePath), {
+      status: 302,
+    });
     const decryptedId = await decryptData(encryptedId);
 
     const url = `https://drive.google.com/thumbnail?id=${decryptedId}&sz=w${size}`;
diff --git a/src/app/error.tsx b/src/app/error.tsx
index f35a1dc..8ba565e 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -2,42 +2,28 @@
 
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { Icon } from "~/components/Global";
 import { Button } from "~/components/ui/button";
 
-export default function Error({
-  error,
-  reset,
-}: {
-  error: Error & { digest?: string };
-  reset: () => void;
-}) {
+import { cn } from "~/utils/cn";
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
   const router = useRouter();
   useEffect(() => {
     console.error(error);
   }, [error]);
 
   return (
-    <div
-      className={cn(
-        "mx-auto h-full w-full max-w-md",
-        "flex flex-grow flex-col items-center justify-center gap-3",
-      )}
-    >
+    <div className={cn("mx-auto h-full w-full max-w-md", "flex flex-grow flex-col items-center justify-center gap-3")}>
       <Icon
         name='CircleX'
-        size={32}
+        size={"2rem"}
         className='text-destructive'
       />
       <div className='flex flex-col'>
-        <span className='text-center text-destructive'>
-          Something went wrong
-        </span>
-        <span className='text-center text-sm text-destructive'>
-          More details can be found in the console
-        </span>
+        <span className='text-center text-destructive'>Something went wrong</span>
+        <span className='text-center text-sm text-destructive'>More details can be found in the console</span>
       </div>
       <code className='w-full whitespace-pre-wrap rounded-[var(--radius)] bg-muted px-3 py-1.5 text-sm text-muted-foreground'>
         {error.message}
diff --git a/src/app/globals.css b/src/app/globals.css
index cbb219c..75f52f7 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,3 +1,4 @@
+/* Version: ${pkg.version} */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -50,6 +51,10 @@
     --ring: 0 0% 14.9%;
     /* --ring: 0 0% 83.1%; */
   }
+
+  div.preview * {
+    @apply !transition-none;
+  }
 }
 
 html,
@@ -75,7 +80,7 @@ body {
     @apply h-1.5 w-1.5;
   }
   ::-webkit-scrollbar-track {
-    @apply bg-background;
+    @apply bg-primary/5;
   }
   ::-webkit-scrollbar-thumb {
     @apply rounded-full bg-primary/25 hover:bg-primary/50;
diff --git a/src/app/highlight.css b/src/app/highlight.css
index cf8359e..54e65c1 100644
--- a/src/app/highlight.css
+++ b/src/app/highlight.css
@@ -204,10 +204,7 @@ pre {
   color: var(--hue-3);
 }
 
-.language-javascript
-  .token.template-string
-  > .token.interpolation
-  > .token.interpolation-punctuation.punctuation {
+.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
   color: var(--hue-5-2);
 }
 
@@ -335,9 +332,7 @@ div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
 
 /* Hovering over a linkable line number (in the gutter area) */
 /* Requires Line Numbers plugin as well */
-pre[id].linkable-line-numbers.linkable-line-numbers
-  span.line-numbers-rows
-  > span:hover:before {
+pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before {
   background-color: var(--syntax-cursor-line);
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8050acd..deebe88 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,19 +1,18 @@
 import { Metadata } from "next";
 import { JetBrains_Mono, Outfit, Source_Sans_3 } from "next/font/google";
 import "plyr-react/plyr.css";
-import { cn } from "~/utils";
 
+import { Footer, Navbar, Password, ThemeProvider } from "~/components/Layout";
+import ToTop from "~/components/Layout/ToTop";
+
+import { cn } from "~/utils/cn";
 import { formatFooter } from "~/utils/footerFormatter";
 
-import config from "~/config/gIndex.config";
+import { CheckSitePassword } from "actions";
+import config from "config";
 
-import Footer from "./@footer";
-import Navbar from "./@navbar";
-import Password from "./@password";
-import { CheckSitePassword } from "./actions";
 import "./globals.css";
 import "./markdown.css";
-import ThemeProvider from "./theme-provider";
 
 const sourceSans3 = Source_Sans_3({
   weight: ["300", "400", "600", "700"],
@@ -41,7 +40,7 @@ export const metadata: Metadata = {
   metadataBase: new URL(config.basePath),
   title: {
     default: config.siteConfig.siteName,
-    template: config.siteConfig.siteNameTemplate || "%s",
+    template: config.siteConfig.siteNameTemplate?.replace("%t", config.siteConfig.siteName) || "%s",
   },
   description: config.siteConfig.siteDescription,
   authors: config.siteConfig.siteAuthor
@@ -74,10 +73,14 @@ export const metadata: Metadata = {
   robots: config.siteConfig.robots,
 };
 
-export default async function RootLayout({
-  children,
-}: Readonly<{ children: React.ReactNode }>) {
-  const unlocked = await CheckSitePassword();
+export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  let unlocked: Awaited<ReturnType<typeof CheckSitePassword>> = {
+    success: true,
+    message: "",
+  };
+  if (config.siteConfig.privateIndex) {
+    unlocked = await CheckSitePassword();
+  }
 
   return (
     <html lang='en'>
@@ -114,9 +117,8 @@ export default async function RootLayout({
               <>{children}</>
             )}
           </main>
-          {config.siteConfig.footer && (
-            <Footer content={formatFooter(config.siteConfig.footer)} />
-          )}
+          {config.siteConfig.footer && <Footer content={formatFooter(config.siteConfig.footer)} />}
+          <ToTop />
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index 8d188e2..6ad92af 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,23 +1,7 @@
 "use client";
 
-import { cn } from "~/utils";
-
-import Icon from "~/components/Icon";
+import { Loader } from "~/components/Global";
 
 export default function RootLoading() {
-  return (
-    <div
-      className={cn(
-        "h-auto min-h-[50dvh] w-full",
-        "flex flex-grow flex-col items-center justify-center gap-3",
-      )}
-    >
-      <Icon
-        name='LoaderCircle'
-        size={32}
-        className='animate-spin text-foreground'
-      />
-      <p>Loading data...</p>
-    </div>
-  );
+  return <Loader message='Loading data...' />;
 }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index e0d9141..5ccb054 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,5 +1,5 @@
-import NotFoundComponent from "./@not-found";
+import { NotFound } from "~/components/Layout";
 
-export default function NotFound() {
-  return <NotFoundComponent />;
+export default function NotFoundPage() {
+  return <NotFound />;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b290e1b..fef2ea6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,27 +1,23 @@
-import { cn } from "~/utils";
-
+import { Actions, Explorer, FilePath, Readme } from "~/components/Explorer";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Separator } from "~/components/ui/separator";
 
-import FileBrowser from "./@explorer";
-import Header from "./@header";
-import HeaderButton from "./@header.button";
-import Readme from "./@readme";
-import { GetFiles, GetReadme } from "./actions";
+import { cn } from "~/utils/cn";
 
-export const revalidate = 300;
-export const dynamic = "force-dynamic";
+import { GetFiles, GetReadme } from "actions";
+import config from "config";
+
+export const revalidate = 60;
+// export const dynamic = "force-dynamic";
 
 export default async function RootPage() {
-  const [data, readme] = await Promise.all([
-    GetFiles({}),
-    GetReadme(undefined),
-  ]);
+  const [data, readme] = await Promise.all([GetFiles({}), GetReadme(undefined)]);
 
   return (
     <div className={cn("h-fit w-full", "flex flex-col gap-3")}>
-      <Header name='Root' />
-      <div
+      <FilePath data={[]} />
+
+      <section
         slot='content'
         className='w-full'
       >
@@ -29,38 +25,26 @@ export default async function RootPage() {
           <CardHeader className='pb-0'>
             <div className='flex w-full items-center justify-between gap-3'>
               <CardTitle className='flex-grow'>Browse files</CardTitle>
-              <HeaderButton />
+              <Actions />
             </div>
             <Separator />
           </CardHeader>
           <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
-            <FileBrowser
+            <Explorer
+              encryptedId={config.apiConfig.rootFolder}
               files={data.files}
               nextPageToken={data.nextPageToken}
               root
             />
           </CardContent>
         </Card>
-      </div>
+      </section>
+
       {readme && (
         <Readme
           content={readme}
           title={"README.md"}
         />
-        // <div
-        //   slot='readme'
-        //   className='w-full'
-        // >
-        //   <Card>
-        //     <CardHeader className='pb-0'>
-        //       <CardTitle>README.md</CardTitle>
-        //       <Separator />
-        //     </CardHeader>
-        //     <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
-        //       <Markdown content={readme} />
-        //     </CardContent>
-        //   </Card>
-        // </div>
       )}
     </div>
   );
diff --git a/src/app/@header.button.tsx b/src/components/Explorer/Actions.tsx
similarity index 56%
rename from src/app/@header.button.tsx
rename to src/components/Explorer/Actions.tsx
index 680dfc3..da9daf1 100644
--- a/src/app/@header.button.tsx
+++ b/src/components/Explorer/Actions.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import { PropsWithChildren, useContext, useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { Icon, Loader, Status } from "~/components/Global";
+import { ResponsiveDropdown } from "~/components/Layout";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -22,52 +21,42 @@ import {
   DrawerClose,
   DrawerContent,
   DrawerDescription,
-  DrawerFooter,
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
 } from "~/components/ui/drawer";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
 import { Input } from "~/components/ui/input";
 import { Separator } from "~/components/ui/separator";
 import { Skeleton } from "~/components/ui/skeleton";
 
 import { LayoutContext } from "~/context/layoutContext";
+import useLoading from "~/hooks/useLoading";
 import useMediaQuery from "~/hooks/useMediaQuery";
 import useRouter from "~/hooks/usePRouter";
-import bytesToReadable from "~/utils/bytesFormat";
+import { bytesToReadable } from "~/utils/bytesFormat";
+import { cn } from "~/utils/cn";
 import { getPreviewIcon } from "~/utils/previewHelper";
 
-import { RedirectSearchFile, SearchFile } from "./actions";
+import { Schema_File } from "~/types/schema";
 
-export default function HeaderButton({ children }: PropsWithChildren) {
+import { RedirectSearchFile, SearchFile } from "actions";
+
+export default function Actions() {
+  const loading = useLoading();
   const { layout, setLayout } = useContext(LayoutContext);
 
   const [layoutOpen, setLayoutOpen] = useState<boolean>(false);
-
-  const [loading, setLoading] = useState<boolean>(true);
   const [snap, setSnap] = useState<number | string | null>(0.3);
   const [searchOpen, setSearchOpen] = useState<boolean>(false);
   const [searchInput, setSearchInput] = useState<string>("");
   const [debouncedSearchInput, setDebouncedSearchInput] = useState<string>("");
   const [searchLoading, setSearchLoading] = useState<boolean>(false);
   const [searchError, setSearchError] = useState<string>("");
-  const [searchResults, setSearchResults] = useState<
-    z.infer<typeof Schema_File>[]
-  >([]);
+  const [searchResults, setSearchResults] = useState<z.infer<typeof Schema_File>[]>([]);
   const [nextPageToken, setNextPageToken] = useState<string>();
 
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
   useEffect(() => {
     if (!searchInput) {
       setSearchLoading(true);
@@ -106,148 +95,110 @@ export default function HeaderButton({ children }: PropsWithChildren) {
     }
   };
 
-  if (loading) {
-    return (
-      <div className={cn("w-fit", "flex items-center justify-end gap-1.5")}>
-        <Skeleton className='my-0.5 h-8 w-16 mobile:w-24' />{" "}
-        <Skeleton className='my-0.5 h-8 w-8' />
-      </div>
-    );
-  }
+  if (loading)
+    <div className={cn("w-fit", "flex items-center justify-end gap-1.5")}>
+      <Skeleton className='my-0.5 h-8 w-16 mobile:w-24' /> <Skeleton className='my-0.5 h-8 w-8' />
+    </div>;
 
   return (
     <div
-      className={cn(
-        // "mx-auto max-w-screen-desktop flex-grow",
-        "w-fit",
-        "flex items-center justify-end gap-1.5",
-      )}
+      slot='actions'
+      className={cn("w-fit", "flex items-center justify-end gap-1.5")}
     >
-      {isDesktop ? (
-        <DropdownMenu
-          open={layoutOpen}
-          onOpenChange={setLayoutOpen}
-        >
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant={"outline"}
-              className='flex w-24 items-center justify-between gap-1.5'
-            >
-              <div className='flex items-center gap-1.5'>
-                <Icon
-                  name={layout === "grid" ? "LayoutGrid" : "LayoutList"}
-                  size={16}
-                />
-                <span>{layout === "grid" ? "Grid" : "List"}</span>
-              </div>
+      <ResponsiveDropdown
+        open={layoutOpen}
+        onOpenChange={setLayoutOpen}
+        trigger={
+          <Button
+            variant={"outline"}
+            className='flex w-24 items-center justify-between gap-1.5'
+          >
+            <div className='flex items-center gap-1.5'>
+              <Icon
+                name={layout === "grid" ? "LayoutGrid" : "LayoutList"}
+                size={"1rem"}
+              />
+              <span>{layout === "grid" ? "Grid" : "List"}</span>
+            </div>
+            {isDesktop && (
               <Icon
                 name='ChevronDown'
                 className={cn("transition", layoutOpen && "rotate-180")}
-                size={14}
+                size={"0.875rem"}
               />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align='end'>
-            <DropdownMenuItem
-              className={cn(
-                "gap-1.5",
-                layout === "grid" && "bg-primary text-primary-foreground",
-              )}
-              onClick={() => setLayout("grid")}
-            >
-              <Icon
-                name={layout === "grid" ? "Check" : "LayoutGrid"}
-                size={16}
-              />
-              <span>Grid</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              className={cn(
-                "gap-1.5",
-                layout === "list" && "bg-primary text-primary-foreground",
-              )}
-              onClick={() => setLayout("list")}
-            >
-              <Icon
-                name={layout === "list" ? "Check" : "LayoutList"}
-                size={16}
-              />
-              <span>List</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : (
-        <Drawer
-          open={layoutOpen}
-          onOpenChange={setLayoutOpen}
-          shouldScaleBackground
-        >
-          <DrawerTrigger asChild>
-            <Button
-              size={"icon"}
-              variant={"outline"}
-            >
-              <Icon
-                name={layout === "grid" ? "LayoutGrid" : "LayoutList"}
-                size={16}
-              />
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent>
-            <DrawerHeader className='text-start'>
-              <DrawerTitle>Layout</DrawerTitle>
-              <DrawerDescription>
-                Choose a layout for the files explorer
-              </DrawerDescription>
-            </DrawerHeader>
-            <div className='flex h-full flex-col gap-3 px-4'>
+            )}
+          </Button>
+        }
+        mobile={{
+          title: "File Layout",
+          description: "Choose a layout for the files explorer",
+          content: (
+            <>
               <DrawerClose asChild>
                 <Button
-                  variant={"ghost"}
-                  className={cn(
-                    "justify-start gap-3",
-                    layout === "grid" && "bg-primary text-primary-foreground",
-                  )}
+                  variant={layout === "grid" ? "default" : "outline"}
                   onClick={() => {
                     setLayout("grid");
                     setLayoutOpen(false);
                   }}
+                  className='justify-start gap-3'
                 >
                   <Icon
                     name={layout === "grid" ? "Check" : "LayoutGrid"}
-                    size={16}
+                    size={"1rem"}
                   />
                   <span>Grid</span>
                 </Button>
               </DrawerClose>
               <DrawerClose asChild>
                 <Button
-                  variant={"ghost"}
-                  className={cn(
-                    "justify-start gap-3",
-                    layout === "list" && "bg-primary text-primary-foreground",
-                  )}
+                  variant={layout === "list" ? "default" : "outline"}
                   onClick={() => {
                     setLayout("list");
                     setLayoutOpen(false);
                   }}
+                  className='justify-start gap-3'
                 >
                   <Icon
                     name={layout === "list" ? "Check" : "LayoutList"}
-                    size={16}
+                    size={"1rem"}
                   />
                   <span>List</span>
                 </Button>
               </DrawerClose>
-            </div>
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button variant={"secondary"}>Close</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-      )}
+            </>
+          ),
+          closeOnFooter: true,
+        }}
+        desktop={{
+          align: "end",
+          items: [
+            {
+              type: "item",
+              key: "grid",
+              icon: "LayoutGrid",
+              title: "Grid",
+              onClick: () => {
+                setLayout("grid");
+                setLayoutOpen(false);
+              },
+              className: cn(layout === "grid" && "bg-primary text-primary-foreground"),
+            },
+            {
+              type: "item",
+              key: "list",
+              icon: "LayoutList",
+              title: "List",
+              onClick: () => {
+                setLayout("list");
+                setLayoutOpen(false);
+              },
+              className: cn(layout === "list" && "bg-primary text-primary-foreground"),
+            },
+          ],
+        }}
+      />
+
       {isDesktop ? (
         <Dialog
           open={searchOpen}
@@ -267,16 +218,14 @@ export default function HeaderButton({ children }: PropsWithChildren) {
             >
               <Icon
                 name='Search'
-                size={16}
+                size={"1rem"}
               />
             </Button>
           </DialogTrigger>
           <DialogContent>
             <DialogHeader>
               <DialogTitle>Search</DialogTitle>
-              <DialogDescription>
-                Search for files in your drive
-              </DialogDescription>
+              <DialogDescription>Search for files in your drive</DialogDescription>
             </DialogHeader>
             <div className='flex h-full flex-col gap-6'>
               <div
@@ -310,52 +259,26 @@ export default function HeaderButton({ children }: PropsWithChildren) {
               <Separator />
               <div
                 slot='search-result'
-                className='flex h-full max-h-96 flex-grow flex-col gap-1.5 overflow-y-auto'
+                className='flex h-full max-h-[66dvh] flex-grow flex-col gap-1.5 overflow-y-auto'
               >
                 {!debouncedSearchInput ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='Search'
-                      size={24}
-                      className='text-muted-foreground'
-                    />
-                    <span className='text-center text-muted-foreground'>
-                      Start typing to search
-                    </span>
-                  </div>
+                  <Status
+                    icon='Search'
+                    message='Start typing to search'
+                  />
                 ) : searchLoading ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='LoaderCircle'
-                      size={24}
-                      className='animate-spin text-muted-foreground'
-                    />
-                    <span className='text-center text-muted-foreground'>
-                      Searching...
-                    </span>
-                  </div>
+                  <Loader message='Searching...' />
                 ) : searchError ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='CircleX'
-                      size={24}
-                      className='text-destructive'
-                    />
-                    <span className='text-center text-destructive'>
-                      {searchError}
-                    </span>
-                  </div>
+                  <Status
+                    icon='CircleX'
+                    message={searchError}
+                    destructive
+                  />
                 ) : !searchResults.length ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='Frown'
-                      size={24}
-                      className='text-muted-foreground'
-                    />
-                    <span className='text-center text-muted-foreground'>
-                      We couldn&apos;t find any results
-                    </span>
-                  </div>
+                  <Status
+                    icon='Frown'
+                    message="We couldn't find any results"
+                  />
                 ) : (
                   <div className='flex w-full flex-col gap-1.5'>
                     {searchResults.map((result) => (
@@ -394,17 +317,17 @@ export default function HeaderButton({ children }: PropsWithChildren) {
             >
               <Icon
                 name='Search'
-                size={16}
+                size={"1rem"}
               />
             </Button>
           </DrawerTrigger>
+
           <DrawerContent className='h-full max-h-[95%]'>
             <DrawerHeader className='text-start'>
               <DrawerTitle>Search</DrawerTitle>
-              <DrawerDescription>
-                Search for files in your drive
-              </DrawerDescription>
+              <DrawerDescription>Search for files in your drive</DrawerDescription>
             </DrawerHeader>
+
             <div className='flex h-full flex-col gap-6'>
               <div
                 slot='search-input'
@@ -434,55 +357,31 @@ export default function HeaderButton({ children }: PropsWithChildren) {
                   </Button>
                 </DrawerClose>
               </div>
+
               <Separator />
+
               <div
                 slot='search-result'
                 className='flex h-fit flex-grow flex-col gap-1.5 overflow-y-auto px-4'
               >
                 {!debouncedSearchInput ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='Search'
-                      size={32}
-                      className='text-muted-foreground'
-                    />
-                    <span className='text-center text-muted-foreground'>
-                      Start typing to search
-                    </span>
-                  </div>
+                  <Status
+                    icon='Search'
+                    message='Start typing to search'
+                  />
                 ) : searchLoading ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='LoaderCircle'
-                      size={32}
-                      className='animate-spin text-muted-foreground'
-                    />
-                    <span className='text-center text-muted-foreground'>
-                      Searching...
-                    </span>
-                  </div>
+                  <Loader message='Searching...' />
                 ) : searchError ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='CircleX'
-                      size={32}
-                      className='text-destructive'
-                    />
-                    <span className='text-center text-destructive'>
-                      {searchError}
-                    </span>
-                  </div>
+                  <Status
+                    icon='CircleX'
+                    message={searchError}
+                    destructive
+                  />
                 ) : !searchResults.length ? (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='Frown'
-                      size={32}
-                      className='text-muted-foreground'
-                    />
-                    <span className='text-center text-muted-foreground'>
-                      We couldn&apos;t find any results
-                    </span>
-                  </div>
+                  <Status
+                    icon='Frown'
+                    message="We couldn't find any results"
+                  />
                 ) : (
                   <div className='flex w-full flex-col gap-1.5'>
                     {searchResults.map((result) => (
@@ -503,15 +402,13 @@ export default function HeaderButton({ children }: PropsWithChildren) {
 }
 
 function SearchResultItem({ data }: { data: z.infer<typeof Schema_File> }) {
-  const [thumbnailURL, setThumbnailURL] = useState<string>(
-    `/api/thumb/${data.encryptedId}?size=2`,
-  );
+  const [thumbnailURL, setThumbnailURL] = useState<string>(`/api/thumb/${data.encryptedId}?size=2`);
   const router = useRouter();
+
   return (
     <div
       className={cn(
         "relative",
-        // "w-full",
         "px-1.5 py-1 pr-10", // since action button is size-8
         "rounded-[var(--radius)]",
         "flex flex-grow items-center justify-between gap-3",
@@ -540,9 +437,7 @@ function SearchResultItem({ data }: { data: z.infer<typeof Schema_File> }) {
       <div className={cn("flex-shrink flex-grow", "flex items-center gap-3")}>
         {/* If it's media, show thumbnail */}
         <div className='relative flex-shrink-0 rounded-[var(--radius)] bg-muted/25'>
-          {data.thumbnailLink &&
-          (data.mimeType.startsWith("video") ||
-            data.mimeType.startsWith("image")) ? (
+          {data.thumbnailLink && (data.mimeType.startsWith("video") || data.mimeType.startsWith("image")) ? (
             <>
               <img
                 src={thumbnailURL}
@@ -560,7 +455,7 @@ function SearchResultItem({ data }: { data: z.infer<typeof Schema_File> }) {
                   <Icon
                     name='Play'
                     className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
-                    size={24}
+                    size={"1.5rem"}
                   />
                 </>
               )}
@@ -568,9 +463,7 @@ function SearchResultItem({ data }: { data: z.infer<typeof Schema_File> }) {
           ) : (
             <Icon
               name={
-                data.mimeType.includes("folder")
-                  ? "Folder"
-                  : getPreviewIcon(data.fileExtension || "", data.mimeType)
+                data.mimeType.includes("folder") ? "Folder" : getPreviewIcon(data.fileExtension || "", data.mimeType)
               }
               className='size-16 flex-shrink-0 flex-grow-0 p-3 tablet:size-20'
             />
@@ -580,9 +473,7 @@ function SearchResultItem({ data }: { data: z.infer<typeof Schema_File> }) {
         {/* File data */}
         <div className='flex w-full flex-col'>
           <span className='line-clamp-1 whitespace-pre-wrap break-all'>
-            {data.fileExtension
-              ? data.name.replace(new RegExp(`.${data.fileExtension}$`), "")
-              : data.name}
+            {data.fileExtension ? data.name.replace(new RegExp(`.${data.fileExtension}$`), "") : data.name}
           </span>
           <div className='muted flex items-center gap-1'>
             <span className='line-clamp-1 whitespace-pre-wrap break-all text-sm'>
@@ -594,16 +485,12 @@ function SearchResultItem({ data }: { data: z.infer<typeof Schema_File> }) {
                   name='Slash'
                   size={"0.875rem"}
                 />
-                <span className='whitespace-nowrap text-sm'>
-                  {bytesToReadable(data.size || 0)}
-                </span>
+                <span className='whitespace-nowrap text-sm'>{bytesToReadable(data.size || 0)}</span>
               </>
             )}
           </div>
           <div className='muted flex items-center gap-1'>
-            <span className='whitespace-nowrap text-sm'>
-              {new Date(data.modifiedTime).toLocaleDateString()}
-            </span>
+            <span className='whitespace-nowrap text-sm'>{new Date(data.modifiedTime).toLocaleDateString()}</span>
           </div>
         </div>
       </div>
diff --git a/src/components/Explorer/FilePath.tsx b/src/components/Explorer/FilePath.tsx
new file mode 100644
index 0000000..4390830
--- /dev/null
+++ b/src/components/Explorer/FilePath.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import Link from "next/link";
+import { Fragment, useState } from "react";
+import { z } from "zod";
+
+import { Icon } from "~/components/Global";
+import { ResponsiveDropdown } from "~/components/Layout";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "~/components/ui/breadcrumb";
+import { Button } from "~/components/ui/button";
+import { Skeleton } from "~/components/ui/skeleton";
+
+import useLoading from "~/hooks/useLoading";
+import useRouter from "~/hooks/usePRouter";
+
+import { Schema_Breadcrumb } from "~/types/schema";
+
+import config from "config";
+
+type Props = {
+  data: z.infer<typeof Schema_Breadcrumb>[];
+};
+export default function FilePath({ data }: Props) {
+  const loading = useLoading();
+  const router = useRouter();
+
+  const [open, setOpen] = useState<boolean>(false);
+
+  if (loading) return <Skeleton className='my-2 h-5 w-1/2' />;
+
+  return (
+    <section
+      slot='file-path'
+      className='flex w-full flex-nowrap items-center'
+    >
+      <Breadcrumb>
+        <BreadcrumbList>
+          {/* Root */}
+          <BreadcrumbItem>
+            <BreadcrumbLink asChild>
+              <Link href={"/"}>
+                <div className='flex items-center gap-1'>
+                  <Icon
+                    name='FolderRoot'
+                    size={"1rem"}
+                  />
+                  ~
+                </div>
+              </Link>
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+
+          {!!data.length ? (
+            <>
+              <BreadcrumbSeparator />
+
+              {data.length >= config.siteConfig.breadcrumbMax && (
+                <>
+                  <ResponsiveDropdown
+                    open={open}
+                    onOpenChange={setOpen}
+                    trigger={
+                      <div>
+                        <BreadcrumbLink asChild>
+                          <BreadcrumbEllipsis className='w-4 cursor-pointer' />
+                        </BreadcrumbLink>
+                      </div>
+                    }
+                    mobile={{
+                      title: "Navigate",
+                      description: "Navigate to parent directories",
+                      content: data.slice(0, -config.siteConfig.breadcrumbMax + 1).map((item, idx, array) => (
+                        <BreadcrumbItem key={`mobile-${item.label}/${item.href}`}>
+                          <BreadcrumbLink asChild>
+                            <Button
+                              size={"sm"}
+                              variant={"outline"}
+                              className='w-full justify-start'
+                              asChild
+                            >
+                              <Link
+                                href={`/${array
+                                  .slice(0, array.indexOf(item) + 1)
+                                  .map((item) => item.href)
+                                  .join("/")}`}
+                              >
+                                {item.label}
+                              </Link>
+                            </Button>
+                          </BreadcrumbLink>
+                        </BreadcrumbItem>
+                      )),
+                      closeOnFooter: true,
+                    }}
+                    desktop={{
+                      align: "start",
+                      items: data.slice(0, -config.siteConfig.breadcrumbMax + 1).map((item, idx, array) => ({
+                        type: "item",
+                        key: `desktop-${item.label}/${item.href}`,
+                        title: item.label,
+                        onClick: () => {
+                          router.push(
+                            `/${array
+                              .slice(0, array.indexOf(item) + 1)
+                              .map((item) => item.href)
+                              .join("/")}`,
+                          );
+                        },
+                      })),
+                    }}
+                  />
+
+                  <BreadcrumbSeparator />
+                </>
+              )}
+
+              {data.slice(-config.siteConfig.breadcrumbMax + 1).map((item) => (
+                <Fragment key={`${item.label}/${item.href}`}>
+                  <BreadcrumbItem className='line-clamp-1 whitespace-pre-wrap break-all'>
+                    {item.href ? (
+                      <>
+                        <BreadcrumbLink asChild>
+                          <Link
+                            href={`/${data
+                              .map((item) => item.href)
+                              .join("/")
+                              .replace(/\/\//g, "/")}`}
+                          >
+                            {item.label}
+                          </Link>
+                        </BreadcrumbLink>
+                      </>
+                    ) : (
+                      <BreadcrumbPage className='line-clamp-1 whitespace-pre-wrap break-all'>
+                        {item.label}
+                      </BreadcrumbPage>
+                    )}
+                  </BreadcrumbItem>
+                  {item.href && <BreadcrumbSeparator />}
+                </Fragment>
+              ))}
+            </>
+          ) : null}
+        </BreadcrumbList>
+      </Breadcrumb>
+    </section>
+  );
+}
diff --git a/src/components/Explorer/Grid.tsx b/src/components/Explorer/Grid.tsx
new file mode 100644
index 0000000..8bcd66b
--- /dev/null
+++ b/src/components/Explorer/Grid.tsx
@@ -0,0 +1,270 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import nProgress from "nprogress";
+import { useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { Icon } from "~/components/Global";
+import { ResponsiveDropdown } from "~/components/Layout";
+import { Button } from "~/components/ui/button";
+import { DrawerClose } from "~/components/ui/drawer";
+
+import { bytesToReadable } from "~/utils/bytesFormat";
+import { cn } from "~/utils/cn";
+import { durationToReadable } from "~/utils/durationFormat";
+import { getPreviewIcon } from "~/utils/previewHelper";
+
+import { Schema_File } from "~/types/schema";
+
+import { CreateDownloadToken } from "actions";
+import config from "config";
+
+type Props = {
+  data: z.infer<typeof Schema_File>;
+  disabled?: boolean;
+};
+export default function FileGrid({ data, disabled }: Props) {
+  const pathname = usePathname();
+  const filePath = useMemo<string>(() => {
+    const path = [pathname, encodeURIComponent(data.name)].join("/").replace(/\/+/g, "/");
+
+    return new URL(path, config.basePath).pathname;
+  }, [data, pathname]);
+
+  const [thumbnailURL, setThumbnailURL] = useState<string>(`/api/thumb/${data.encryptedId}?size=2`);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+
+  const onCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast.loading("Copying link...", {
+      id: `copy-${data.encryptedId}`,
+    });
+
+    try {
+      await navigator.clipboard.writeText(new URL(filePath, config.basePath).toString());
+
+      toast.success("Link copied!", {
+        id: `copy-${data.encryptedId}`,
+      });
+    } catch (error) {
+      const e = error as Error;
+      console.error(e.message);
+      toast.error(e.message, {
+        id: `copy-${data.encryptedId}`,
+      });
+    }
+  };
+  const onDownload = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast.loading("Preparing download link...", {
+      id: `download-${data.encryptedId}`,
+    });
+
+    try {
+      const token = await CreateDownloadToken();
+      if (!token) throw new Error("Failed to create download token");
+
+      toast.success("Opening download link...", {
+        id: `download-${data.encryptedId}`,
+      });
+
+      const timeout = setTimeout(() => {
+        clearTimeout(timeout);
+        window.open(`/api/download/${data.encryptedId}?token=${token}`);
+      }, 500);
+    } catch (error) {
+      const e = error as Error;
+      console.error(e.message);
+      toast.error(e.message, {
+        id: `download-${data.encryptedId}`,
+      });
+    }
+  };
+
+  return (
+    <div className='relative h-full w-full'>
+      <ResponsiveDropdown
+        slot='actions'
+        open={isMenuOpen}
+        onOpenChange={setIsMenuOpen}
+        trigger={
+          <Button
+            size={"icon"}
+            variant={"secondary"}
+            className='absolute right-1 top-1 z-20 size-8'
+          >
+            <Icon
+              name='EllipsisVertical'
+              size={"1rem"}
+            />
+          </Button>
+        }
+        desktop={{
+          align: "end",
+          items: [
+            {
+              type: "item",
+              key: "copy",
+              title: "Copy link",
+              icon: "Link",
+              onClick: onCopy,
+              disabled: disabled,
+            },
+            {
+              type: "item",
+              key: "download",
+              title: "Download",
+              icon: "Download",
+              onClick: onDownload,
+              disabled: data.mimeType.includes("folder") || disabled,
+            },
+          ],
+        }}
+        mobile={{
+          title: "Actions",
+          description: "What would you like to do with this file?",
+          content: (
+            <>
+              <DrawerClose asChild>
+                <Button
+                  variant={"outline"}
+                  onClick={onCopy}
+                  disabled={disabled}
+                >
+                  <Icon
+                    name='Link'
+                    className='mr-3'
+                    size={"1rem"}
+                  />
+                  Copy link
+                </Button>
+              </DrawerClose>
+              <DrawerClose asChild>
+                <Button
+                  variant={"outline"}
+                  onClick={onDownload}
+                  disabled={disabled || data.mimeType.includes("folder")}
+                >
+                  <Icon
+                    name='Download'
+                    className='mr-3'
+                    size={"1rem"}
+                  />
+                  Download
+                </Button>
+              </DrawerClose>
+            </>
+          ),
+          closeOnFooter: true,
+        }}
+      />
+
+      <Link
+        slot='data'
+        href={filePath}
+        className={cn(
+          "h-full w-full rounded-[var(--radius)]",
+          "border border-border transition",
+          "flex flex-col content-stretch justify-stretch gap-3",
+          "hover:bg-muted/50",
+        )}
+        onClick={async (e) => {
+          if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            nProgress.done(true);
+          }
+        }}
+      >
+        <div className={cn("flex flex-shrink flex-grow flex-col items-center gap-3", "relative")}>
+          {/* If it's media, show thumbnail */}
+          <div className='relative grid h-32 w-full flex-shrink-0 place-items-center overflow-hidden bg-muted/25'>
+            {data.thumbnailLink && (data.mimeType.startsWith("video") || data.mimeType.startsWith("image")) ? (
+              <>
+                <img
+                  src={thumbnailURL}
+                  alt={data.name}
+                  onLoad={(e) => {
+                    if (thumbnailURL.includes("size=2")) {
+                      setThumbnailURL(`/api/thumb/${data.encryptedId}`);
+                    }
+                  }}
+                  className='rounded-top-[var(--radius)] absolute -z-0 h-32 w-full flex-shrink-0 flex-grow-0 object-cover opacity-50'
+                />
+                <img
+                  src={thumbnailURL}
+                  alt={data.name}
+                  onLoad={(e) => {
+                    if (thumbnailURL.includes("size=2")) {
+                      setThumbnailURL(`/api/thumb/${data.encryptedId}`);
+                    }
+                  }}
+                  className='relative z-0 h-32 w-full flex-shrink-0 flex-grow-0 object-contain backdrop-blur'
+                />
+
+                {data.mimeType.startsWith("video") && (
+                  <>
+                    <Icon
+                      name='Play'
+                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
+                      size={"2rem"}
+                    />
+                    <div className='absolute bottom-0 right-0 z-10 bg-background px-1 py-0.5 text-xs text-foreground'>
+                      {durationToReadable(data.videoMediaMetadata?.durationMillis || 0)}
+                    </div>
+                  </>
+                )}
+              </>
+            ) : (
+              <Icon
+                name={
+                  data.mimeType.includes("folder") ? "Folder" : getPreviewIcon(data.fileExtension || "", data.mimeType)
+                }
+                className='size-16 flex-shrink-0 flex-grow-0 p-3'
+              />
+            )}
+          </div>
+
+          {/* File data */}
+          <div className='flex h-full w-full flex-col justify-between gap-1.5 px-3 py-1.5'>
+            <span className='line-clamp-2 h-full whitespace-pre-wrap text-pretty break-all'>
+              {config.siteConfig.showFileExtension
+                ? data.name
+                : data.fileExtension
+                ? data.name.replace(new RegExp(`.${data.fileExtension}$`), "")
+                : data.name}
+            </span>
+            <div className='muted flex items-center gap-1'>
+              <span
+                className={cn(
+                  "line-clamp-1 whitespace-pre-wrap break-all text-sm",
+                  config.siteConfig.showFileExtension && !data.mimeType.includes("folder") ? "hidden" : "",
+                )}
+              >
+                {data.mimeType.includes("folder") ? "folder" : data.fileExtension || "unknown"}
+              </span>
+              {!data.mimeType.includes("folder") && (
+                <>
+                  {config.siteConfig.showFileExtension ? null : (
+                    <Icon
+                      name='Slash'
+                      size={"0.875rem"}
+                    />
+                  )}
+                  <span className='whitespace-nowrap text-sm'>{bytesToReadable(data.size || 0)}</span>
+                </>
+              )}
+            </div>
+            <div className='muted flex items-center gap-1'>
+              <span className='whitespace-nowrap text-sm'>{new Date(data.modifiedTime).toLocaleDateString()}</span>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/Explorer/Layout.tsx b/src/components/Explorer/Layout.tsx
new file mode 100644
index 0000000..35d547c
--- /dev/null
+++ b/src/components/Explorer/Layout.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useContext, useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { Grid, List } from "~/components/Explorer";
+import { ButtonLoading, Icon, Loader, Status } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+
+import { LayoutContext } from "~/context/layoutContext";
+import useLoading from "~/hooks/useLoading";
+import { cn } from "~/utils/cn";
+import { decryptData } from "~/utils/encryptionHelper";
+
+import { ButtonState, Schema_File } from "~/types/schema";
+
+import { GetFiles } from "actions";
+import config from "config";
+
+type Props = {
+  encryptedId: string;
+  files: z.infer<typeof Schema_File>[];
+  nextPageToken?: string;
+  root?: boolean;
+};
+export default function Explorer({ encryptedId, files, nextPageToken, root }: Props) {
+  const { layout } = useContext(LayoutContext);
+  const loading = useLoading();
+  const pathname = usePathname();
+  const prevPath = useMemo<string>(() => {
+    const path = pathname.split("/").slice(0, -1).join("/").replace(/\/+/g, "/");
+
+    return new URL(path, config.basePath).pathname;
+  }, [pathname]);
+
+  const [fileList, setFileList] = useState<z.infer<typeof Schema_File>[]>(files);
+  const [nextToken, setNextToken] = useState<string | undefined>(nextPageToken);
+  const [loadMoreState, setLoadMoreState] = useState<ButtonState>("idle");
+
+  const onLoadMore = async () => {
+    setLoadMoreState("loading");
+    try {
+      if (!nextToken) throw new Error("No more files to load");
+      const id = await decryptData(encryptedId);
+      const data = await GetFiles({ id, pageToken: nextToken });
+      const uniqueData = [...fileList, ...data.files].filter(
+        (item, index, array) => index === array.findIndex((i) => i.encryptedId === item.encryptedId),
+      );
+
+      setFileList(uniqueData);
+      setNextToken(data.nextPageToken);
+    } catch (error) {
+      const e = error as Error;
+      console.error(e.message);
+      toast.error(e.message);
+    } finally {
+      setLoadMoreState("idle");
+    }
+  };
+
+  if (loading) return <Loader message='Loading files...' />;
+
+  return (
+    <section
+      slot='explorer'
+      className={cn("mx-auto w-full max-w-screen-desktop", "flex flex-grow-0 flex-col gap-3 p-3")}
+    >
+      {!root && (
+        <Button
+          size={"sm"}
+          variant={"ghost"}
+          className='justify-start'
+          asChild
+        >
+          <Link href={prevPath}>
+            <Icon
+              name='CornerLeftUp'
+              size={"1rem"}
+              className='mr-3'
+            />
+            Back
+          </Link>
+        </Button>
+      )}
+
+      {!fileList.length ? (
+        <Status
+          icon='Frown'
+          message='There are no files here'
+        />
+      ) : (
+        <div
+          slot='file-container'
+          className={cn(
+            "w-full",
+            layout === "list"
+              ? "flex flex-col gap-1.5"
+              : "grid grid-cols-1 gap-3 mobile:grid-cols-2 tablet:grid-cols-3 desktop:grid-cols-4",
+          )}
+        >
+          {fileList.map((file) => (
+            <div
+              slot='item'
+              key={file.encryptedId}
+              className='group'
+            >
+              {layout === "list" ? <List data={file} /> : <Grid data={file} />}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {nextToken && (
+        <ButtonLoading
+          className='w-full'
+          size={"sm"}
+          variant={"secondary"}
+          state={loadMoreState}
+          onClick={onLoadMore}
+        >
+          Load more files
+        </ButtonLoading>
+      )}
+    </section>
+  );
+}
diff --git a/src/components/Explorer/List.tsx b/src/components/Explorer/List.tsx
new file mode 100644
index 0000000..97efe08
--- /dev/null
+++ b/src/components/Explorer/List.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import nProgress from "nprogress";
+import { useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { Icon } from "~/components/Global";
+import { ResponsiveDropdown } from "~/components/Layout";
+import { Button } from "~/components/ui/button";
+import { DrawerClose } from "~/components/ui/drawer";
+
+import { bytesToReadable } from "~/utils/bytesFormat";
+import { cn } from "~/utils/cn";
+import { durationToReadable } from "~/utils/durationFormat";
+import { getPreviewIcon } from "~/utils/previewHelper";
+
+import { Schema_File } from "~/types/schema";
+
+import { CreateDownloadToken } from "actions";
+import config from "config";
+
+type Props = {
+  data: z.infer<typeof Schema_File>;
+  disabled?: boolean;
+};
+export default function FileList({ data, disabled }: Props) {
+  const pathname = usePathname();
+  const filePath = useMemo<string>(() => {
+    const path = [pathname, encodeURIComponent(data.name)].join("/").replace(/\/+/g, "/");
+
+    return new URL(path, config.basePath).pathname;
+  }, [data, pathname]);
+
+  const [thumbnailURL, setThumbnailURL] = useState<string>(`/api/thumb/${data.encryptedId}?size=2`);
+  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false);
+
+  const onCopy = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast.loading("Copying link...", {
+      id: `copy-${data.encryptedId}`,
+    });
+
+    try {
+      await navigator.clipboard.writeText(new URL(filePath, config.basePath).toString());
+
+      toast.success("Link copied!", {
+        id: `copy-${data.encryptedId}`,
+      });
+    } catch (error) {
+      const e = error as Error;
+      console.error(e.message);
+      toast.error(e.message, {
+        id: `copy-${data.encryptedId}`,
+      });
+    }
+  };
+  const onDownload = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toast.loading("Preparing download link...", {
+      id: `download-${data.encryptedId}`,
+    });
+
+    try {
+      const token = await CreateDownloadToken();
+      if (!token) throw new Error("Failed to create download token");
+
+      toast.success("Opening download link...", {
+        id: `download-${data.encryptedId}`,
+      });
+
+      const timeout = setTimeout(() => {
+        clearTimeout(timeout);
+        window.open(`/api/download/${data.encryptedId}?token=${token}`);
+      }, 500);
+    } catch (error) {
+      const e = error as Error;
+      console.error(e.message);
+      toast.error(e.message, {
+        id: `download-${data.encryptedId}`,
+      });
+    }
+  };
+
+  return (
+    <div className='relative flex h-full w-full flex-row-reverse items-center'>
+      <ResponsiveDropdown
+        slot='actions'
+        open={isMenuOpen}
+        onOpenChange={setIsMenuOpen}
+        trigger={
+          <Button
+            size={"icon"}
+            variant={"secondary"}
+            className='absolute right-1 top-1 z-20 size-8'
+          >
+            <Icon
+              name='EllipsisVertical'
+              size={"1rem"}
+            />
+          </Button>
+        }
+        desktop={{
+          align: "end",
+          items: [
+            {
+              type: "item",
+              key: "copy",
+              title: "Copy link",
+              icon: "Link",
+              onClick: onCopy,
+              disabled: disabled,
+            },
+            {
+              type: "item",
+              key: "download",
+              title: "Download",
+              icon: "Download",
+              onClick: onDownload,
+              disabled: data.mimeType.includes("folder") || disabled,
+            },
+          ],
+        }}
+        mobile={{
+          title: "Actions",
+          description: "What would you like to do with this file?",
+          content: (
+            <>
+              <DrawerClose asChild>
+                <Button
+                  variant={"outline"}
+                  onClick={onCopy}
+                  disabled={disabled}
+                >
+                  <Icon
+                    name='Link'
+                    className='mr-3'
+                    size={"1rem"}
+                  />
+                  Copy link
+                </Button>
+              </DrawerClose>
+              <DrawerClose asChild>
+                <Button
+                  variant={"outline"}
+                  onClick={onDownload}
+                  disabled={disabled || data.mimeType.includes("folder")}
+                >
+                  <Icon
+                    name='Download'
+                    className='mr-3'
+                    size={"1rem"}
+                  />
+                  Download
+                </Button>
+              </DrawerClose>
+            </>
+          ),
+          closeOnFooter: true,
+        }}
+      />
+
+      <Link
+        slot='data'
+        href={filePath}
+        className={cn(
+          "relative rounded-[var(--radius)] transition",
+          "px-1.5 py-1 pr-10",
+          "flex flex-grow items-center justify-between gap-3",
+          "hover:bg-muted/50",
+        )}
+        onClick={async (e) => {
+          if (disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            nProgress.done(true);
+          }
+        }}
+      >
+        <div className={cn("flex-shrink flex-grow", "flex items-center gap-3")}>
+          {/* If it's media, show thumbnail */}
+          <div className='relative flex-shrink-0 rounded-[var(--radius)] bg-muted/25'>
+            {data.thumbnailLink && (data.mimeType.startsWith("video") || data.mimeType.startsWith("image")) ? (
+              <>
+                <img
+                  src={thumbnailURL}
+                  alt={data.name}
+                  onLoad={(e) => {
+                    if (thumbnailURL.includes("size=2")) {
+                      setThumbnailURL(`/api/thumb/${data.encryptedId}`);
+                    }
+                  }}
+                  className='size-16 flex-shrink-0 flex-grow-0 rounded-[var(--radius)] object-cover tablet:size-20'
+                />
+
+                {data.mimeType.startsWith("video") && (
+                  <>
+                    <Icon
+                      name='Play'
+                      className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-full bg-muted-foreground fill-muted p-1.5 text-muted opacity-75'
+                      size={"1.5rem"}
+                    />
+                    <div className='absolute bottom-0 right-0 z-10 bg-background px-1 py-0.5 text-[10px] text-foreground tablet:text-xs'>
+                      {durationToReadable(data.videoMediaMetadata?.durationMillis || 0)}
+                    </div>
+                  </>
+                )}
+              </>
+            ) : (
+              <Icon
+                name={
+                  data.mimeType.includes("folder") ? "Folder" : getPreviewIcon(data.fileExtension || "", data.mimeType)
+                }
+                className='size-16 flex-shrink-0 flex-grow-0 p-3 tablet:size-20'
+              />
+            )}
+          </div>
+
+          {/* File data */}
+          <div className='flex flex-grow flex-col'>
+            <span className='line-clamp-1 whitespace-pre-wrap break-all'>
+              {config.siteConfig.showFileExtension
+                ? data.name
+                : data.fileExtension
+                ? data.name.replace(new RegExp(`.${data.fileExtension}$`), "")
+                : data.name}
+            </span>
+            <div className='muted flex items-center gap-1'>
+              <span
+                className={cn(
+                  "line-clamp-1 whitespace-pre-wrap break-all text-sm",
+                  config.siteConfig.showFileExtension && !data.mimeType.includes("folder") ? "hidden" : "",
+                )}
+              >
+                {data.mimeType.includes("folder") ? "folder" : data.fileExtension || "unknown"}
+              </span>
+              {!data.mimeType.includes("folder") && (
+                <>
+                  {config.siteConfig.showFileExtension ? null : (
+                    <Icon
+                      name='Slash'
+                      size={"0.875rem"}
+                    />
+                  )}
+                  <span className='whitespace-nowrap text-sm'>{bytesToReadable(data.size || 0)}</span>
+                </>
+              )}
+            </div>
+            <div className='muted flex items-center gap-1'>
+              <span className='whitespace-nowrap text-sm'>{new Date(data.modifiedTime).toLocaleDateString()}</span>
+            </div>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/Explorer/Readme.tsx b/src/components/Explorer/Readme.tsx
new file mode 100644
index 0000000..0b0f8fc
--- /dev/null
+++ b/src/components/Explorer/Readme.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from "react";
+
+import { Markdown } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import { Separator } from "~/components/ui/separator";
+
+import { cn } from "~/utils/cn";
+
+type Props = {
+  content: string;
+  title: string;
+};
+export default function Readme({ content, title }: Props) {
+  const [view, setView] = useState<"markdown" | "raw">("markdown");
+
+  return (
+    <div
+      slot='readme'
+      className='w-full'
+    >
+      <Card>
+        <CardHeader className='pb-0'>
+          <div
+            className={cn(
+              "flex flex-col gap-3 overflow-hidden",
+              "mobile:flex-row mobile:items-center mobile:justify-between",
+            )}
+          >
+            <h3 className='line-clamp-1 flex-grow whitespace-pre-wrap break-all'>{title}</h3>
+            <div className='flex w-full items-center mobile:w-fit'>
+              <Button
+                size={"sm"}
+                variant={view === "markdown" ? "default" : "outline"}
+                onClick={() => setView("markdown")}
+                className='w-full rounded-r-none mobile:w-fit'
+              >
+                Markdown
+              </Button>
+              <Button
+                size={"sm"}
+                variant={view === "raw" ? "default" : "outline"}
+                onClick={() => setView("raw")}
+                className='w-full rounded-l-none mobile:w-fit'
+              >
+                Raw
+              </Button>
+            </div>
+          </div>
+          <Separator />
+        </CardHeader>
+        <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
+          <Markdown
+            content={content}
+            view={view}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/Explorer/index.tsx b/src/components/Explorer/index.tsx
new file mode 100644
index 0000000..e14502a
--- /dev/null
+++ b/src/components/Explorer/index.tsx
@@ -0,0 +1,6 @@
+export { default as Actions } from "./Actions";
+export { default as FilePath } from "./FilePath";
+export { default as Grid } from "./Grid";
+export { default as Explorer } from "./Layout";
+export { default as List } from "./List";
+export { default as Readme } from "./Readme";
diff --git a/src/components/Global/ButtonLoading.tsx b/src/components/Global/ButtonLoading.tsx
new file mode 100644
index 0000000..c14e298
--- /dev/null
+++ b/src/components/Global/ButtonLoading.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { icons } from "lucide-react";
+
+import { Icon } from "~/components/Global";
+import { Button, ButtonProps } from "~/components/ui/button";
+
+import { cn } from "~/utils/cn";
+
+import { ButtonState } from "~/types/schema";
+
+type Props = {
+  state?: ButtonState;
+  icon?: keyof typeof icons;
+} & ButtonProps;
+
+export default function ButtonLoading({ state = "idle", icon, ...props }: Props) {
+  return (
+    <Button
+      {...props}
+      disabled={state === "loading"}
+    >
+      <div className='relative flex w-full items-center justify-center'>
+        {icon && (
+          <Icon
+            name={icon}
+            size={"1rem"}
+            className={cn(
+              "mr-1.5 transition-all duration-300 ease-in-out",
+              state === "loading" ? "size-0 opacity-0" : "size-4 opacity-100",
+            )}
+          />
+        )}
+        <Icon
+          name='LoaderCircle'
+          size={"1rem"}
+          className={cn(
+            "animate-spin transition-all",
+            state === "loading" ? "mr-1.5 size-4 opacity-100" : "mr-0 size-0 opacity-0",
+          )}
+        />
+        <span className='relative transition-all duration-300 ease-in-out'>{props.children}</span>
+      </div>
+    </Button>
+  );
+}
diff --git a/src/components/Icon/index.tsx b/src/components/Global/Icon.tsx
similarity index 100%
rename from src/components/Icon/index.tsx
rename to src/components/Global/Icon.tsx
diff --git a/src/components/Global/Loader.tsx b/src/components/Global/Loader.tsx
new file mode 100644
index 0000000..720f5ed
--- /dev/null
+++ b/src/components/Global/Loader.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Icon } from "~/components/Global";
+
+import { cn } from "~/utils/cn";
+
+type Props = {
+  message?: string;
+  extra?: React.ReactNode;
+};
+
+export default function Loader({ message, extra }: Props) {
+  return (
+    <div
+      className={cn(
+        "h-auto min-h-[50dvh] w-full",
+        "flex flex-grow flex-col items-center justify-center gap-3",
+        "text-foreground",
+      )}
+    >
+      <Icon
+        name='LoaderCircle'
+        size={"2rem"}
+        className='animate-spin'
+      />
+      <p>{message || "Loading..."}</p>
+      {extra}
+    </div>
+  );
+}
diff --git a/src/app/@markdown.tsx b/src/components/Global/Markdown.tsx
similarity index 58%
rename from src/app/@markdown.tsx
rename to src/components/Global/Markdown.tsx
index 485edc2..0808a2d 100644
--- a/src/app/@markdown.tsx
+++ b/src/components/Global/Markdown.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import ReactMarkdown from "react-markdown";
 import rehypeKatex from "rehype-katex";
@@ -11,74 +11,66 @@ import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import remarkSlug from "remark-slug";
 import remarkToc from "remark-toc";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import "~/app/highlight.css";
+import { Icon } from "~/components/Global";
 
-import "./highlight.css";
+import { cn } from "~/utils/cn";
 
 type Props = {
   content: string;
-  view: "markdown" | "raw";
+  view?: "markdown" | "raw";
   className?: string;
 };
 export default function Markdown({ content, view, className }: Props) {
+  const [viewState, setViewState] = useState<"markdown" | "raw">(view || "markdown");
+
+  useEffect(() => {
+    if (view) setViewState(view);
+  }, [view]);
+
   return (
-    <div className={cn("flex flex-col p-3", className)}>
-      <div
-        className={cn(
-          "markdown w-full rounded-[var(--radius)]",
-          view !== "raw" && "hidden",
-        )}
-      >
-        <pre className='w-full whitespace-pre-wrap break-words bg-transparent !p-0 shadow shadow-background'>
-          {content}
-        </pre>
-      </div>
-      <div
-        className={cn(
-          "markdown w-full rounded-[var(--radius)]",
-          view !== "markdown" && "hidden",
-        )}
-      >
-        <ReactMarkdown
-          className='w-full'
-          disallowedElements={["script"]}
-          remarkPlugins={[
-            remarkGfm,
-            remarkMath,
-            remarkSlug,
-            remarkToc,
-            remarkBreaks,
-          ]}
-          rehypePlugins={[
-            rehypeKatex,
-            rehypeRaw,
-            [rehypePrism, { ignoreMissing: true }],
-          ]}
-          components={{
-            p: ({ node, children, ...props }) => (
-              <p
-                {...props}
-                className='paragraph text-balance'
-              >
-                {children}
-              </p>
-            ),
-            pre: PreComponent,
-            code: ({ node, inline, className, children, ...props }) => (
-              <code
-                className={`${className} font-mono !text-sm`}
-                {...props}
-              >
-                {children}
-              </code>
-            ),
-          }}
-        >
-          {content}
-        </ReactMarkdown>
-      </div>
+    <div
+      slot='markdown-container'
+      className={cn("flex flex-col p-3", className)}
+    >
+      {viewState === "raw" ? (
+        <div className={cn("markdown w-full rounded-[var(--radius)]")}>
+          <pre className='w-full whitespace-pre-wrap break-words bg-transparent !p-0 font-sans shadow shadow-background'>
+            {content}
+          </pre>
+        </div>
+      ) : (
+        <div className={cn("markdown w-full rounded-[var(--radius)]")}>
+          <ReactMarkdown
+            className='w-full'
+            disallowedElements={["script"]}
+            remarkPlugins={[remarkGfm, remarkMath, remarkSlug, remarkToc, remarkBreaks]}
+            rehypePlugins={[rehypeKatex, rehypeRaw, [rehypePrism, { ignoreMissing: true }]]}
+            components={{
+              p: ({ node, children, ...props }) => (
+                <p
+                  {...props}
+                  className='paragraph text-balance'
+                >
+                  {children}
+                </p>
+              ),
+              pre: PreComponent,
+              code: ({ node, inline, className, children, ...props }) => (
+                <code
+                  className={`${className} font-mono !text-sm`}
+                  {...props}
+                >
+                  {children}
+                </code>
+              ),
+            }}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+      )}
     </div>
   );
 }
@@ -146,14 +138,8 @@ function PreComponent(props: PreProps) {
         >
           <Icon
             name={isCopied ? "Check" : isError ? "X" : "Copy"}
-            className={
-              isCopied
-                ? "text-green-500"
-                : isError
-                ? "text-red-500"
-                : "text-foreground"
-            }
-            size={16}
+            className={isCopied ? "text-green-500" : isError ? "text-red-500" : "text-foreground"}
+            size={"1rem"}
           />
         </div>
       </div>
diff --git a/src/components/Global/Status.tsx b/src/components/Global/Status.tsx
new file mode 100644
index 0000000..efd03c8
--- /dev/null
+++ b/src/components/Global/Status.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { icons } from "lucide-react";
+
+import { Icon } from "~/components/Global";
+
+import { cn } from "~/utils/cn";
+
+type Props = {
+  icon: keyof typeof icons;
+  message?: string;
+  destructive?: boolean;
+};
+
+export default function Status({ icon, message, destructive }: Props) {
+  return (
+    <div
+      className={cn(
+        "h-auto min-h-[33dvh] w-full",
+        "flex flex-grow flex-col items-center justify-center gap-3",
+        destructive ? "text-destructive" : "text-foreground",
+      )}
+    >
+      <Icon
+        name={icon}
+        size={"1.5rem"}
+      />
+      <p>{message || "Something went wrong"}</p>
+    </div>
+  );
+}
diff --git a/src/components/Global/index.tsx b/src/components/Global/index.tsx
new file mode 100644
index 0000000..eecdc1d
--- /dev/null
+++ b/src/components/Global/index.tsx
@@ -0,0 +1,5 @@
+export { default as ButtonLoading } from "./ButtonLoading";
+export { default as Icon } from "./Icon";
+export { default as Loader } from "./Loader";
+export { default as Markdown } from "./Markdown";
+export { default as Status } from "./Status";
diff --git a/src/components/Guide/Configuration/ApiForm.tsx b/src/components/Guide/Configuration/ApiForm.tsx
new file mode 100644
index 0000000..eb05553
--- /dev/null
+++ b/src/components/Guide/Configuration/ApiForm.tsx
@@ -0,0 +1,342 @@
+import { FormEvent } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { type ConfigInputs, ConfigurationHeader, ConfigurationInput } from "~/components/Guide/Configuration";
+import { Separator } from "~/components/ui/separator";
+
+import { decryptData } from "~/utils/encryptionHelper";
+import { fileLoadHelper } from "~/utils/fileLoadHelper";
+import { parseConfigFile } from "~/utils/parseConfigFile";
+
+import { ConfigurationCategory, ConfigurationKeys, ConfigurationValue, Schema_App_Configuration } from "~/types/schema";
+
+type Props = {
+  state: {
+    get: z.input<typeof Schema_App_Configuration>;
+    set: <
+      T extends ConfigurationCategory = ConfigurationCategory,
+      K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+    >(
+      category: T,
+      key: K,
+      value: ConfigurationValue<T, K>,
+    ) => void;
+  };
+  error: {
+    get: Partial<Record<ConfigurationKeys<"api">, string>>;
+    set: <T extends ConfigurationKeys<"api">>(key: T, value: string) => void;
+  };
+  onReset: (category: ConfigurationCategory | "all") => void;
+};
+
+export default function ConfigApi({ state: { get, set }, error, onReset }: Props) {
+  const inputs: ConfigInputs<"api", ConfigurationKeys<"api">>[] = [
+    {
+      type: "text",
+      inputKey: "rootFolder",
+      title: "Root Folder ID",
+      description: `starting point of the drive, will be used as the root folder for the explorer
+This ID will be encrypted in the config file`,
+      required: true,
+      value: get.api.rootFolder,
+      onValueChange: (key, value) => set("api", key, value),
+      error: error.get.rootFolder,
+      onError: (err) => error.set("rootFolder", err),
+      placeholder: "Starting point of the drive",
+    },
+    {
+      type: "group",
+      inputKey: "sharedGroup",
+      columns: 3,
+      children: [
+        {
+          type: "select",
+          inputKey: "isTeamDrive",
+          title: "Use Team Drive",
+          description: "Enable this option if you are using a Team Drive instead of a personal drive",
+          required: true,
+          value: get.api.isTeamDrive,
+          onValueChange: (key, value) => {
+            set("api", key, value);
+            if (value === false) {
+              set("api", "sharedDrive", "");
+              error.set("sharedDrive", "");
+            }
+          },
+          error: error.get.isTeamDrive,
+          onError: (err) => error.set("isTeamDrive", err),
+        },
+        {
+          type: "text",
+          inputKey: "sharedDrive",
+          title: "Shared Drive ID",
+          description: `The ID of the Shared Drive
+This ID will be encrypted in the config file`,
+          required: true,
+          value: get.api.sharedDrive,
+          onValueChange: (key, value) => set("api", key, value),
+          error: error.get.sharedDrive,
+          onError: (err) => error.set("sharedDrive", err),
+          disabled: !get.api.isTeamDrive,
+          placeholder: get.api.isTeamDrive ? "Make sure to copy the Drive ID" : "You need to enable Team Drive first",
+          columnSpan: 2,
+        },
+      ],
+    },
+    {
+      type: "group",
+      inputKey: "pagination",
+      columns: 2,
+      children: [
+        {
+          type: "number",
+          inputKey: "itemsPerPage",
+          title: "Items per page",
+          description: `Set how many items to display per page in the file explorer
+It's recommended to keep this value to a reasonable number, since it will affect the load time of the page
+
+Default: 50`,
+          required: true,
+          value: get.api.itemsPerPage,
+          onValueChange: (key, value) => set("api", key, value),
+          error: error.get.itemsPerPage,
+          onError: (err) => error.set("itemsPerPage", err),
+          minMax: { min: 1 },
+          validation: async (value) => {
+            const num = Number(value);
+            if (isNaN(num)) return { success: false, message: "Value must be a number" };
+            if (num < 1) return { success: false, message: "Items per page must be greater than 0" };
+            return { success: true, message: "" };
+          },
+        },
+        {
+          type: "number",
+          inputKey: "searchResult",
+          title: "Search Results",
+          description: `Set how many search results to display
+It's recommended to set this to a small number, since it will affect search performance
+
+Default: 5`,
+          required: true,
+          value: get.api.searchResult,
+          onValueChange: (key, value) => set("api", key, value),
+          error: error.get.searchResult,
+          onError: (err) => error.set("searchResult", err),
+          minMax: { min: 1 },
+          validation: async (value) => {
+            const num = Number(value);
+            if (isNaN(num)) return { success: false, message: "Value must be a number" };
+            if (num < 1) return { success: false, message: "Search result must be greater than 0" };
+            return { success: true, message: "" };
+          },
+        },
+      ],
+    },
+    {
+      type: "select",
+      inputKey: "proxyThumbnail",
+      title: "Allow Proxy Thumbnail",
+      description: `Use API route instead of Google Drive thumbnail link
+      
+If your files thumbnail are not accessible, you can enable this option
+This will fetch the thumbnail image via API route`,
+      required: true,
+      value: get.api.proxyThumbnail,
+      onValueChange: (key, value) => set("api", key, value),
+      error: error.get.proxyThumbnail,
+      onError: (err) => error.set("proxyThumbnail", err),
+    },
+    {
+      type: "group",
+      inputKey: "protectedFile",
+      columns: 2,
+      children: [
+        {
+          type: "select",
+          inputKey: "allowDownloadProtectedFile",
+          title: "Allow Download Protected File",
+          description: `Allow users to download files inside the protected folder
+    
+    If set to true, users will be able to download the file without entering the password as long as they have the direct link
+    If set to false, users will need to enter the password before downloading the file, even if they have the direct link`,
+          required: true,
+          value: get.api.allowDownloadProtectedFile,
+          onValueChange: (key, value) => set("api", key, value),
+          error: error.get.allowDownloadProtectedFile,
+          onError: (err) => error.set("allowDownloadProtectedFile", err),
+        },
+        {
+          type: "number",
+          inputKey: "temporaryTokenDuration",
+          title: "Temporary Token Duration (in hours)",
+          description: `Set how long the download token will be valid
+If the token is expired, users will need to re-open the file page to get a new token`,
+          required: true,
+          value: get.api.temporaryTokenDuration,
+          onValueChange: (key, value) => set("api", key, value),
+          error: error.get.temporaryTokenDuration,
+          minMax: { min: 1, max: 24 * 30 },
+          validation: async (value) => {
+            const num = Number(value);
+            if (isNaN(num)) return { success: false, message: "Value must be a number" };
+            if (num < 1) return { success: false, message: "Token duration must be greater than 0" };
+            if (num > 24 * 30)
+              return { success: false, message: "Token duration can't be more than 720 hours (30 days)" };
+            return { success: true, message: "" };
+          },
+        },
+      ],
+    },
+    {
+      type: "group",
+      inputKey: "fileSize",
+      columns: 2,
+      children: [
+        {
+          type: "number",
+          inputKey: "maxFileSize",
+          title: "Max Direct Download Size (in MB)",
+          description: `Max file size that can be downloaded directly from the server
+Please check your deploy platform for the maximum response size limit
+If you're using Vercel, the maximum size is around 4 - 4.5MB, any file larger than this size will return an error
+
+Set to 0 to disable the limit`,
+          required: true,
+          value: get.api.maxFileSize / 1024 / 1024,
+          onValueChange: (key, value) => set("api", key, value * 1024 * 1024),
+          error: error.get.maxFileSize,
+          minMax: { min: 0 },
+          validation: async (value) => {
+            const num = Number(value);
+            if (isNaN(num)) return { success: false, message: "Value must be a number" };
+            if (num < 0) return { success: false, message: "Size must be greater than or equal to 0" };
+            return { success: true, message: "" };
+          },
+        },
+        {
+          type: "number",
+          inputKey: "streamMaxSize",
+          title: "Max Stream Size (in MB)",
+          description: `For previewing large files, the file will be streamed in chunks
+Make sure to set this value to a reasonable number, since it will count towards your server bandwidth usage
+
+This will also affect the maximum file size that can be previewed. Especially for media files like video, audio, and images
+(Manga preview will automatically limited to the first 5MB)
+
+Set to 0 to disable the limit
+Default: 100`,
+          required: true,
+          value: get.api.streamMaxSize / 1024 / 1024,
+          onValueChange: (key, value) => set("api", key, value * 1024 * 1024),
+          error: error.get.streamMaxSize,
+          minMax: { min: 0 },
+          validation: async (value) => {
+            const num = Number(value);
+            if (isNaN(num)) return { success: false, message: "Value must be a number" };
+            if (num < 0) return { success: false, message: "Size must be greater than or equal to 0" };
+            return { success: true, message: "" };
+          },
+        },
+      ],
+    },
+  ];
+
+  function onFileLoad() {
+    fileLoadHelper({
+      accept: ".config.ts",
+      fileName: "gindex.config.ts",
+      async onLoad(result) {
+        const config = parseConfigFile(result);
+        if ("success" in config) return toast.error(config.message);
+
+        if (get.environment.ENCRYPTION_KEY) {
+          try {
+            const root = config.api.rootFolder;
+            const shared = config.api.sharedDrive || null;
+            if (root) {
+              const decrypted = await decryptData(root, get.environment.ENCRYPTION_KEY);
+              if (decrypted) set("api", "rootFolder", decrypted);
+            }
+            if (shared) {
+              const decrypted = await decryptData(shared, get.environment.ENCRYPTION_KEY);
+              if (decrypted) set("api", "sharedDrive", decrypted);
+            }
+          } catch (error) {
+            const e = error as Error;
+            console.error(e.message);
+            toast.error("Skipping decryption of folder ID, please check your Encryption Key and try again.");
+          }
+        } else {
+          toast.error("Can't decrypt folder ID without Encryption Key");
+        }
+        config.api.isTeamDrive && set("api", "isTeamDrive", config.api.isTeamDrive);
+        config.api.itemsPerPage && set("api", "itemsPerPage", config.api.itemsPerPage);
+        config.api.searchResult && set("api", "searchResult", config.api.searchResult);
+        config.api.proxyThumbnail && set("api", "proxyThumbnail", config.api.proxyThumbnail);
+        config.api.allowDownloadProtectedFile &&
+          set("api", "allowDownloadProtectedFile", config.api.allowDownloadProtectedFile);
+        config.api.temporaryTokenDuration && set("api", "temporaryTokenDuration", config.api.temporaryTokenDuration);
+        config.api.maxFileSize && set("api", "maxFileSize", config.api.maxFileSize);
+        config.api.streamMaxSize && set("api", "streamMaxSize", config.api.streamMaxSize);
+
+        // Other config
+        config.api.defaultQuery && set("api", "defaultQuery", config.api.defaultQuery);
+        config.api.defaultField && set("api", "defaultField", config.api.defaultField);
+        config.api.defaultOrder && set("api", "defaultOrder", config.api.defaultOrder);
+        config.api.specialFile && set("api", "specialFile", config.api.specialFile);
+        config.api.hiddenFiles && set("api", "hiddenFiles", config.api.hiddenFiles);
+
+        // Site config
+        config.site.siteName && set("site", "siteName", config.site.siteName);
+        config.site.siteNameTemplate && set("site", "siteNameTemplate", config.site.siteNameTemplate);
+        config.site.siteDescription && set("site", "siteDescription", config.site.siteDescription);
+        config.site.siteIcon && set("site", "siteIcon", config.site.siteIcon);
+        config.site.favIcon && set("site", "favIcon", config.site.favIcon);
+        config.site.siteAuthor && set("site", "siteAuthor", config.site.siteAuthor);
+        config.site.twitterHandle && set("site", "twitterHandle", config.site.twitterHandle);
+        config.site.robots && set("site", "robots", config.site.robots);
+
+        config.site.showFileExtension && set("site", "showFileExtension", config.site.showFileExtension);
+        config.site.footer && set("site", "footer", config.site.footer);
+        config.site.privateIndex && set("site", "privateIndex", config.site.privateIndex);
+        config.site.breadcrumbMax && set("site", "breadcrumbMax", config.site.breadcrumbMax);
+        config.site.toaster && set("site", "toaster", config.site.toaster);
+        config.site.navbarItems && set("site", "navbarItems", config.site.navbarItems);
+        config.site.supports && set("site", "supports", config.site.supports);
+
+        toast.success("API configuration has been loaded.");
+      },
+    });
+  }
+  function onFormReset(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    onReset("api");
+    toast.success("API section has been reset to default values.");
+  }
+
+  return (
+    <form
+      className='flex w-full flex-col gap-3 py-3'
+      onReset={onFormReset}
+    >
+      <ConfigurationHeader
+        title='API Configuration'
+        onLoad={onFileLoad}
+      />
+      <Separator />
+
+      <div
+        slot='inputs'
+        className='flex flex-col gap-3'
+      >
+        {inputs.map((props, index) => (
+          <ConfigurationInput<"api", ConfigurationKeys<"api">>
+            key={String(props.inputKey)}
+            {...props}
+          />
+        ))}
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/Guide/Configuration/EnvironmentForm.tsx b/src/components/Guide/Configuration/EnvironmentForm.tsx
new file mode 100644
index 0000000..d90d56c
--- /dev/null
+++ b/src/components/Guide/Configuration/EnvironmentForm.tsx
@@ -0,0 +1,232 @@
+import { FormEvent, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { type ConfigInputs, ConfigurationHeader, ConfigurationInput } from "~/components/Guide/Configuration";
+import { Separator } from "~/components/ui/separator";
+
+import { fileLoadHelper } from "~/utils/fileLoadHelper";
+
+import {
+  ButtonState,
+  ConfigurationCategory,
+  ConfigurationKeys,
+  ConfigurationValue,
+  Schema_App_Configuration,
+  Schema_ServiceAccount,
+} from "~/types/schema";
+
+import { GenerateAESKey, VerifyAESKey } from "actions";
+
+type Props = {
+  state: {
+    get: z.input<typeof Schema_App_Configuration>;
+    set: <
+      T extends ConfigurationCategory = ConfigurationCategory,
+      K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+    >(
+      category: T,
+      key: K,
+      value: ConfigurationValue<T, K>,
+    ) => void;
+  };
+  error: {
+    get: Partial<Record<ConfigurationKeys<"environment">, string>>;
+    set: <T extends ConfigurationKeys<"environment">>(key: T, value: string) => void;
+  };
+  onReset: (category: ConfigurationCategory | "all") => void;
+};
+
+export default function ConfigEnvironment({ state: { get, set }, error, onReset }: Props) {
+  const [encryptionState, setEncryptionState] = useState<ButtonState>("idle");
+  const [serviceAuthState, setServiceAuthState] = useState<ButtonState>("idle");
+  const [isRevealPassword, setIsRevealPassword] = useState<boolean>(false);
+
+  const inputs: ConfigInputs<"environment", ConfigurationKeys<"environment">>[] = [
+    {
+      inputKey: "ENCRYPTION_KEY",
+      title: "Encryption Key",
+      description:
+        "The key used to encrypt and decrypt sensitive data. Must be a alphanumeric string of 16 characters.",
+      type: "text",
+      required: true,
+      action: {
+        label: "Generate",
+        state: encryptionState,
+        icon: "RefreshCw",
+        async onClick(e) {
+          e.preventDefault();
+          setEncryptionState("loading");
+          error.set("ENCRYPTION_KEY", "");
+
+          try {
+            const key = await GenerateAESKey();
+            const isValid = await VerifyAESKey("This is a test", key);
+            if (!isValid) throw new Error("Invalid key generated, please try again.");
+
+            set("environment", "ENCRYPTION_KEY", key);
+          } catch (err) {
+            const e = err as Error;
+            console.error(e.message);
+            toast.error(e.message);
+            error.set("ENCRYPTION_KEY", e.message);
+          } finally {
+            setEncryptionState("idle");
+          }
+        },
+      },
+      value: get.environment.ENCRYPTION_KEY,
+      onValueChange: (key, value) => set("environment", key, value),
+      error: error.get.ENCRYPTION_KEY,
+      onError: (err) => error.set("ENCRYPTION_KEY", err),
+      validation: async (value) => {
+        if (!value) return { success: false, message: "Encryption key is required" };
+        if (value.length !== 16) return { success: false, message: "Encryption key must be 16 characters long" };
+
+        const valid = await VerifyAESKey("This is a test", value);
+        if (!valid) return { success: false, message: "Invalid encryption key" };
+        return { success: true, message: "" };
+      },
+      placeholder: "16 alphanumeric characters secret key",
+    },
+    {
+      inputKey: "GD_SERVICE_B64",
+      title: "Google Drive Service Account",
+      description: `The base64 encoded Google Drive Service Account JSON file.
+To avoid error when input, please use the "Load JSON" button to load the file.`,
+      type: "text",
+      required: true,
+      readOnly: true,
+      action: {
+        label: "Load JSON",
+        state: serviceAuthState,
+        icon: "Upload",
+        async onClick(e) {
+          e.preventDefault();
+          setServiceAuthState("loading");
+
+          try {
+            fileLoadHelper({
+              accept: ".json",
+              onLoad(result) {
+                const objectFile = JSON.parse(result);
+                const parse = Schema_ServiceAccount.safeParse(objectFile);
+                if (!parse.success)
+                  return toast.error("Invalid Service Account JSON file. Please make sure the file is correct.");
+
+                set("environment", "GD_SERVICE_B64", btoa(result));
+                error.set("GD_SERVICE_B64", "");
+
+                toast.success("Service Account JSON file has been loaded successfully.");
+              },
+            });
+          } catch (err) {
+            const e = err as Error;
+            console.error(e.message);
+            error.set("GD_SERVICE_B64", e.message);
+            toast.error(e.message);
+          } finally {
+            setServiceAuthState("idle");
+          }
+        },
+      },
+      value: get.environment.GD_SERVICE_B64,
+      onValueChange: (key, value) => set("environment", key, value),
+      error: error.get.GD_SERVICE_B64,
+      onError: (err) => error.set("GD_SERVICE_B64", err),
+      placeholder: "Base64 encoded JSON file",
+    },
+    {
+      inputKey: "NEXT_PUBLIC_DOMAIN",
+      title: "Site Domain",
+      description: `The domain for the site, without the protocol`,
+      type: "text",
+      value: get.environment.NEXT_PUBLIC_DOMAIN,
+      onValueChange: (key, value) => set("environment", key, value),
+      error: error.get.NEXT_PUBLIC_DOMAIN,
+      onError: (err) => error.set("NEXT_PUBLIC_DOMAIN", err),
+      placeholder: "e.g. drive-demo.mbaharip.com or mbaharip.com",
+    },
+    {
+      inputKey: "SITE_PASSWORD",
+      title: "Site Password",
+      description: `The password to access the site
+Only required if the site is set to private`,
+      type: isRevealPassword ? "text" : "password",
+      action: {
+        label: isRevealPassword ? "Hide" : "Reveal",
+        icon: isRevealPassword ? "EyeOff" : "Eye",
+        onClick(e) {
+          e.preventDefault();
+          setIsRevealPassword((prev) => !prev);
+        },
+        state: "idle",
+      },
+      value: get.environment.SITE_PASSWORD,
+      onValueChange: (key, value) => set("environment", key, value),
+      error: error.get.SITE_PASSWORD,
+      onError: (err) => error.set("SITE_PASSWORD", err),
+      validation: async (value) => {
+        if (get.site.privateIndex && !value) return { success: false, message: "Site password is required" };
+        return { success: true, message: "" };
+      },
+      placeholder: "Not required if the site is public",
+    },
+  ];
+
+  function onFileLoad() {
+    fileLoadHelper({
+      accept: ".env, .env.local, .env.development, .env.production",
+      onLoad(result) {
+        const lines = result.split("\n");
+        const env: Record<string, string> = {};
+        for (const line of lines) {
+          const [key, value] = line.split("=");
+          if (!key || !value) continue;
+          const formattedValue = value
+            ?.replace(/"/g, "")
+            .replace(/'/g, "")
+            .replace(/\\/g, "")
+            .replace(/\r/g, "")
+            .trim();
+          env[key] = formattedValue;
+        }
+        set("environment", "ENCRYPTION_KEY", env.ENCRYPTION_KEY);
+        set("environment", "GD_SERVICE_B64", env.GD_SERVICE_B64);
+        set("environment", "NEXT_PUBLIC_DOMAIN", env.NEXT_PUBLIC_DOMAIN);
+        set("environment", "SITE_PASSWORD", env.SITE_PASSWORD);
+        toast.success("Environment section has been loaded successfully.");
+      },
+    });
+  }
+  function onFormReset(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    onReset("environment");
+    toast.success("Environment section has been reset to default values.");
+  }
+
+  return (
+    <form
+      className='flex w-full flex-col gap-3 py-3'
+      onReset={onFormReset}
+    >
+      <ConfigurationHeader
+        title='Environment Configuration'
+        onLoad={onFileLoad}
+      />
+      <Separator />
+
+      <div
+        slot='inputs'
+        className='flex flex-col gap-3'
+      >
+        {inputs.map((props, index) => (
+          <ConfigurationInput<"environment", ConfigurationKeys<"environment">>
+            key={props.inputKey}
+            {...props}
+          />
+        ))}
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/Guide/Configuration/Header.tsx b/src/components/Guide/Configuration/Header.tsx
new file mode 100644
index 0000000..821963c
--- /dev/null
+++ b/src/components/Guide/Configuration/Header.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from "react";
+import toast from "react-hot-toast";
+
+import { ButtonLoading } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+
+import { ButtonState } from "~/types/schema";
+
+type Props = {
+  title: string;
+  onLoad?: () => void;
+};
+export default function ConfigurationHeader({ title, onLoad }: Props) {
+  const [loadState, setLoadState] = useState<ButtonState>("idle");
+
+  return (
+    <div
+      slot='header'
+      className='flex flex-col gap-3 tablet:flex-row tablet:items-center tablet:justify-between'
+    >
+      <h4>{title}</h4>
+
+      <div
+        slot='actions'
+        className='flex w-full items-center gap-3 tablet:w-fit'
+      >
+        {onLoad && (
+          <ButtonLoading
+            variant={"outline"}
+            size={"sm"}
+            state={loadState}
+            onClick={(e) => {
+              e.preventDefault();
+              setLoadState("loading");
+
+              try {
+                onLoad();
+              } catch (error) {
+                const e = error as Error;
+                console.error(e.message);
+                toast.error(e.message);
+              } finally {
+                setLoadState("idle");
+              }
+            }}
+          >
+            Load File
+          </ButtonLoading>
+        )}
+        <Button
+          variant={"destructive"}
+          type='reset'
+          size={"sm"}
+        >
+          Reset Section
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Guide/Configuration/Input.tsx b/src/components/Guide/Configuration/Input.tsx
new file mode 100644
index 0000000..580c068
--- /dev/null
+++ b/src/components/Guide/Configuration/Input.tsx
@@ -0,0 +1,232 @@
+"use client";
+
+import { icons } from "lucide-react";
+
+import { ButtonLoading, Icon } from "~/components/Global";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { Separator } from "~/components/ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+
+import { cn } from "~/utils/cn";
+
+import { ButtonState, ConfigurationCategory, ConfigurationKeys, ConfigurationValue } from "~/types/schema";
+
+export type ConfigInputs<
+  T extends ConfigurationCategory = ConfigurationCategory,
+  K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+> = ConfigInputProps<T, K> | ConfigInputGroupProps<T, K> | ConfigInputSeparatorProps;
+
+type ConfigInputProps<
+  T extends ConfigurationCategory = ConfigurationCategory,
+  K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+> = {
+  inputKey: K;
+  title: string;
+  type: "text" | "password" | "number" | "select";
+  description?: string;
+  required?: boolean;
+  action?: {
+    label: string;
+    onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    state: ButtonState;
+    icon?: keyof typeof icons;
+  };
+  value: ConfigurationValue<T, K>;
+  onValueChange: (key: K, value: any) => void;
+  error?: string;
+  onError?: (error: string) => void;
+  validation?: (value: string) =>
+    | { success: boolean; message: string }
+    | Promise<{
+        success: boolean;
+        message: string;
+      }>;
+  readOnly?: boolean;
+  minMax?: { min?: number; max?: number };
+  disabled?: boolean;
+  placeholder?: string;
+};
+
+type ConfigInputGroupProps<
+  T extends ConfigurationCategory = ConfigurationCategory,
+  K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+> = {
+  inputKey: string;
+  type: "group";
+  columns: number;
+  children: (ConfigInputProps<T, K> & {
+    columnSpan?: number;
+  })[];
+};
+type ConfigInputSeparatorProps = {
+  inputKey: string;
+  type: "separator";
+};
+export default function ConfigurationInput<
+  T extends ConfigurationCategory = ConfigurationCategory,
+  K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+>(props: ConfigInputProps<T, K> | ConfigInputGroupProps<T, K> | ConfigInputSeparatorProps) {
+  const key = String(props.inputKey);
+  return (
+    <>
+      {props.type !== "separator" && props.type !== "group" && (
+        <>
+          <Inputs<T, K> {...props} />
+        </>
+      )}
+
+      {props.type === "separator" && <Separator />}
+
+      {props.type === "group" && (
+        <div
+          slot='group'
+          className='grid w-full gap-1.5'
+          style={{
+            gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+          }}
+        >
+          {props.children.map((child, index) => (
+            <Inputs<T, K>
+              key={`${child.inputKey as string}@${index}`}
+              columnSpan={child.columnSpan}
+              {...child}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
+
+function Inputs<
+  T extends ConfigurationCategory = ConfigurationCategory,
+  K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+>(
+  props: ConfigInputProps<T, K> & {
+    columnSpan?: number;
+  },
+) {
+  const key = String(props.inputKey);
+  return (
+    <div
+      id={key}
+      slot={`input-${key}`}
+      className='flex w-full flex-col gap-1.5'
+      style={{
+        gridColumn: `span ${props.columnSpan || 1} / span ${props.columnSpan || 1}`,
+      }}
+    >
+      <div
+        slot='label'
+        className='flex items-center gap-1.5'
+      >
+        <Label
+          htmlFor={key}
+          aria-required={props.required}
+        >
+          {props.title} <span className='text-sm text-muted-foreground'>{!props.required ? "(optional)" : ""}</span>
+        </Label>
+        {props.description && (
+          <Tooltip>
+            <TooltipTrigger
+              onClick={(e) => e.preventDefault()}
+              className='cursor-default'
+            >
+              <Icon
+                name='Info'
+                size={"1rem"}
+                className='text-muted-foreground'
+              />
+            </TooltipTrigger>
+            <TooltipContent
+              side='right'
+              className='max-w-screen-sm'
+            >
+              <p className='max-w-screen-sm !whitespace-pre-wrap'>{props.description}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      <div
+        slot='input'
+        className='grid w-full grid-cols-6 gap-1.5'
+      >
+        <div className={cn("w-full", props.action ? "col-span-5" : "col-span-full")}>
+          {props.type === "text" || props.type === "password" || props.type === "number" ? (
+            <Input
+              id={key}
+              name={key}
+              type={props.type}
+              value={props.value as string}
+              readOnly={props.readOnly || false}
+              min={props.minMax?.min}
+              max={props.minMax?.max}
+              disabled={props.disabled}
+              placeholder={props.placeholder}
+              onChange={(e) => {
+                if (props.error) {
+                  props.onError?.("");
+                }
+                props.onValueChange(props.inputKey, e.target.value as ConfigurationValue<T, K>);
+              }}
+              onBlur={async () => {
+                try {
+                  props.onError?.("");
+
+                  if (props.required && !(props.value as string).trim()) {
+                    throw new Error(`${props.title} is required.`);
+                  }
+
+                  if (props.validation) {
+                    const result = await props.validation(props.value as string);
+                    if (!result.success) throw new Error(result.message);
+                  }
+                } catch (error) {
+                  const e = error as Error;
+                  props.onError?.(e.message);
+                }
+              }}
+            />
+          ) : (
+            props.type === "select" && (
+              <Select
+                disabled={props.disabled}
+                value={String(props.value)}
+                onValueChange={(value) => {
+                  props.onValueChange(props.inputKey, (value as string) === "true");
+                }}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder='Select an option' />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value='true'>Enabled</SelectItem>
+                  <SelectItem value='false'>Disabled</SelectItem>
+                </SelectContent>
+              </Select>
+            )
+          )}
+        </div>
+        {props.action && (
+          <ButtonLoading
+            variant={"secondary"}
+            onClick={props.action.onClick}
+            state={props.action.state}
+            icon={props.action.icon}
+          >
+            {props.action.label}
+          </ButtonLoading>
+        )}
+      </div>
+
+      <div slot='message'>
+        <span className={cn("block text-sm text-destructive", props.error ? "opacity-100" : "select-none opacity-0")}>
+          {props.error}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Guide/Configuration/Layout.tsx b/src/components/Guide/Configuration/Layout.tsx
new file mode 100644
index 0000000..789ad4a
--- /dev/null
+++ b/src/components/Guide/Configuration/Layout.tsx
@@ -0,0 +1,300 @@
+"use client";
+
+import { AsyncZippable, strToU8, zip } from "fflate";
+import { useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+import { generateConfig } from "~/data/template";
+
+import { ButtonLoading, Loader, Markdown } from "~/components/Global";
+import { ConfigAPI, ConfigEnvironment, ConfigSite } from "~/components/Guide/Configuration";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+
+import useLoading from "~/hooks/useLoading";
+import { downloadBlob } from "~/utils/downloadBlob";
+
+import {
+  ButtonState,
+  ConfigurationCategory,
+  ConfigurationKeys,
+  ConfigurationValue,
+  Schema_App_Configuration,
+} from "~/types/schema";
+
+import config from "config";
+
+export default function ConfigurationForm() {
+  const loading = useLoading();
+  const initialConfiguration = useMemo<z.input<typeof Schema_App_Configuration>>(() => {
+    return {
+      environment: {
+        GD_SERVICE_B64: "",
+        ENCRYPTION_KEY: "",
+        SITE_PASSWORD: "",
+        NEXT_PUBLIC_DOMAIN: "",
+      },
+      api: {
+        ...config.apiConfig,
+        rootFolder: "",
+        isTeamDrive: false,
+        sharedDrive: "",
+        itemsPerPage: 50,
+        searchResult: 5,
+
+        proxyThumbnail: true,
+        streamMaxSize: 100 * 1024 * 1024,
+
+        allowDownloadProtectedFile: false,
+        temporaryTokenDuration: 6,
+        maxFileSize: 4 * 1024 * 1024,
+      },
+      site: {
+        ...config.siteConfig,
+        siteName: "next-gdrive-index",
+        siteNameTemplate: "%s - %t",
+        siteDescription: "A Google Drive Index built using Next.js",
+        siteAuthor: "mbahArip",
+        twitterHandle: "@mbahArip",
+
+        showFileExtension: false,
+        footer: ["{{ siteName }} *v{{ version }}* @ {{ repository }}", "{{ year }} - Made with ❤️ by **{{ author }}**"],
+
+        privateIndex: false,
+        breadcrumbMax: 3,
+
+        toaster: {
+          position: "bottom-right",
+          duration: 3000,
+        },
+
+        navbarItems: [],
+        supports: [],
+      },
+    };
+  }, []);
+  const [configuration, setConfiguration] = useState<z.input<typeof Schema_App_Configuration>>(initialConfiguration);
+  const [error, setError] = useState<Schema_App_Configuration_Error>({
+    environment: {},
+    api: {},
+    site: {},
+  });
+
+  const [downloadState, setDownloadState] = useState<ButtonState>("idle");
+
+  function onConfigurationChange<
+    T extends ConfigurationCategory = ConfigurationCategory,
+    K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+  >(category: T, key: K, value: ConfigurationValue<T, K>) {
+    setConfiguration((prev) => ({
+      ...prev,
+      [category]: {
+        ...prev[category],
+        [key]: value,
+      },
+    }));
+  }
+  function onErrorChange<
+    T extends ConfigurationCategory = ConfigurationCategory,
+    K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+  >(category: T, key: K, value: string) {
+    setError((prev) => ({
+      ...prev,
+      [category]: {
+        ...prev[category],
+        [key]: value,
+      },
+    }));
+  }
+
+  function onReset(category: ConfigurationCategory | "all") {
+    if (category === "all") {
+      setConfiguration(initialConfiguration);
+      setError({
+        environment: {},
+        api: {},
+        site: {},
+      });
+    } else {
+      setConfiguration((prev) => ({
+        ...prev,
+        [category]: initialConfiguration[category],
+      }));
+      setError((prev) => ({
+        ...prev,
+        [category]: {},
+      }));
+    }
+  }
+  async function onDownload(e: React.MouseEvent) {
+    e.preventDefault();
+    setDownloadState("loading");
+    toast.loading("Generating configuration file...", {
+      id: "generate-config",
+    });
+
+    try {
+      // Check required fields
+      const requiredEmpty = [
+        !configuration.environment.ENCRYPTION_KEY.length, // Encryption Key are required
+        !configuration.environment.GD_SERVICE_B64.length, // Service Account are required
+        !configuration.api.rootFolder.length, // Root Folder are required
+        configuration.api.isTeamDrive && !configuration.api.sharedDrive?.length, // If isTeamDrive, sharedDrive are required
+        !configuration.site.siteName.length, // Site Name are required
+        !configuration.site.siteDescription.length, // Site Description are required
+        configuration.site.privateIndex && !configuration.environment.SITE_PASSWORD?.length, // If privateIndex, SITE_PASSWORD are required
+      ];
+      if (requiredEmpty.filter((v) => v).length) {
+        throw new Error("Looks like you missed some required fields.");
+      }
+
+      const errors = [];
+      for (const err of Object.values(error.environment)) {
+        if (err) errors.push(err);
+      }
+      for (const err of Object.values(error.api)) {
+        if (err) errors.push(err);
+      }
+      for (const err of Object.values(error.site)) {
+        if (err) errors.push(err);
+      }
+      if (errors.length) {
+        throw new Error("Errors found in the configuration form. Please fix them first");
+      }
+
+      // Create string content
+      const envContent = Object.entries(configuration.environment)
+        .map(([key, value]) => `${key}=${value}`)
+        .join("\n");
+      const configContent = await generateConfig(configuration);
+
+      // Create zip structure
+      const structure: AsyncZippable = {
+        ".env": [
+          strToU8(envContent),
+          {
+            level: 6,
+          },
+        ],
+        "gIndex.config.ts": [
+          strToU8(configContent),
+          {
+            level: 6,
+          },
+        ],
+      };
+
+      zip(structure, {}, (err, data) => {
+        if (err) throw err;
+
+        const zipBlob = new Blob([data], { type: "application/zip" });
+        downloadBlob(zipBlob, `${Date.now()}__gIndex-config.zip`);
+        toast.success("Configuration file generated successfully", {
+          id: "generate-config",
+        });
+      });
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      toast.error(e.message, {
+        id: "generate-config",
+      });
+    } finally {
+      setDownloadState("idle");
+    }
+  }
+
+  if (loading)
+    return (
+      <Card>
+        <CardContent>
+          <Loader message='Loading configuration...' />
+        </CardContent>
+      </Card>
+    );
+
+  return (
+    <Card>
+      <CardHeader className='pb-0'>
+        <div className='flex items-end justify-between gap-3'>
+          <CardTitle id='config'>App Configuration</CardTitle>
+          <small className='text-muted-foreground'>v{config.version}</small>
+        </div>
+      </CardHeader>
+
+      <CardContent className='space-y-3 py-3'>
+        <Markdown
+          content={`This configuration only covering the most basic things you need to get started.
+You can check the configuration file itself to see all the available configuration. _(Each configuration has a description to help you understand it)_
+If you're migrating from previous version, you can load your old environment and config file to update the configuration.
+
+> If you found any bugs or issues with this configuration, please report it to the [issue tracker](https://github.com/mbahArip/next-gdrive-index/issues)
+> I'll try to fix it as soon as possible`}
+        />
+
+        <ConfigEnvironment
+          state={{
+            get: configuration,
+            set: onConfigurationChange,
+          }}
+          error={{
+            get: error.environment,
+            set: (key, value) => onErrorChange("environment", key, value),
+          }}
+          onReset={onReset}
+        />
+
+        <ConfigAPI
+          state={{
+            get: configuration,
+            set: onConfigurationChange,
+          }}
+          error={{
+            get: error.api,
+            set: (key, value) => onErrorChange("api", key, value),
+          }}
+          onReset={onReset}
+        />
+
+        <ConfigSite
+          state={{
+            get: configuration,
+            set: onConfigurationChange,
+          }}
+          error={{
+            get: error.site,
+            set: (key, value) => onErrorChange("site", key, value),
+          }}
+          onReset={onReset}
+        />
+
+        <div className='flex w-full flex-col gap-3 tablet:flex-row tablet:items-center tablet:justify-end'>
+          <Button
+            variant={"destructive"}
+            size={"sm"}
+            onClick={(e) => {
+              e.preventDefault();
+              onReset("all");
+            }}
+          >
+            Reset All
+          </Button>
+          <ButtonLoading
+            state={downloadState}
+            size={"sm"}
+            icon={"Save"}
+            onClick={onDownload}
+          >
+            Download Config
+          </ButtonLoading>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+type Schema_App_Configuration_Error = {
+  environment: Partial<Record<ConfigurationKeys<"environment">, string>>;
+  api: Partial<Record<ConfigurationKeys<"api">, string>>;
+  site: Partial<Record<ConfigurationKeys<"site">, string>>;
+};
diff --git a/src/components/Guide/Configuration/SiteForm.tsx b/src/components/Guide/Configuration/SiteForm.tsx
new file mode 100644
index 0000000..99d7e2d
--- /dev/null
+++ b/src/components/Guide/Configuration/SiteForm.tsx
@@ -0,0 +1,226 @@
+import { FormEvent } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { Icon } from "~/components/Global";
+import { type ConfigInputs, ConfigurationHeader, ConfigurationInput } from "~/components/Guide/Configuration";
+import { Separator } from "~/components/ui/separator";
+
+import { ConfigurationCategory, ConfigurationKeys, ConfigurationValue, Schema_App_Configuration } from "~/types/schema";
+
+type Props = {
+  state: {
+    get: z.input<typeof Schema_App_Configuration>;
+    set: <
+      T extends ConfigurationCategory = ConfigurationCategory,
+      K extends ConfigurationKeys<T> = ConfigurationKeys<T>,
+    >(
+      category: T,
+      key: K,
+      value: ConfigurationValue<T, K>,
+    ) => void;
+  };
+  error: {
+    get: Partial<Record<ConfigurationKeys<"site">, string>>;
+    set: <T extends ConfigurationKeys<"site">>(key: T, value: string) => void;
+  };
+  onReset: (category: ConfigurationCategory | "all") => void;
+};
+
+export default function ConfigSite({ state: { get, set }, error, onReset }: Props) {
+  const metadataInputs: ConfigInputs<"site", ConfigurationKeys<"site">>[] = [
+    {
+      type: "text",
+      inputKey: "siteName",
+      title: "Site Name",
+      required: true,
+      value: get.site.siteName,
+      onValueChange: (key, value) => set("site", key, value),
+      error: error.get.siteName,
+      onError: (err) => error.set("siteName", err),
+    },
+    {
+      type: "text",
+      inputKey: "siteNameTemplate",
+      title: "Site Name Template",
+      description: `The template used to generate the site name
+      
+Available variables:
+%s - Page title
+%t - Site name`,
+      required: true,
+      value: get.site.siteNameTemplate,
+      onValueChange: (key, value) => set("site", key, value),
+      error: error.get.siteNameTemplate,
+      onError: (err) => error.set("siteNameTemplate", err),
+    },
+    {
+      type: "text",
+      inputKey: "siteDescription",
+      title: "Site Description",
+      required: true,
+      value: get.site.siteDescription,
+      onValueChange: (key, value) => set("site", key, value),
+      error: error.get.siteDescription,
+      onError: (err) => error.set("siteDescription", err),
+    },
+    {
+      type: "group",
+      inputKey: "author",
+      columns: 2,
+      children: [
+        {
+          type: "text",
+          inputKey: "siteAuthor",
+          title: "Site Author",
+          description: `Will be used for metadata, also affect the footer variable`,
+          value: get.site.siteAuthor,
+          onValueChange: (key, value) => set("site", key, value),
+          error: error.get.siteAuthor,
+          onError: (err) => error.set("siteAuthor", err),
+          placeholder: "Your username here",
+        },
+        {
+          type: "text",
+          inputKey: "twitterHandle",
+          title: "Twitter Handle",
+          description: `Will be used for metadata, also affect the footer variable`,
+          value: get.site.twitterHandle,
+          onValueChange: (key, value) => set("site", key, value),
+          error: error.get.twitterHandle,
+          onError: (err) => error.set("twitterHandle", err),
+          placeholder: "e.g. @__mbaharip__",
+        },
+      ],
+    },
+  ];
+  const inputs: ConfigInputs<"site", ConfigurationKeys<"site">>[] = [
+    {
+      type: "select",
+      inputKey: "privateIndex",
+      title: "Private Index",
+      description: `Lock the whole site behind a password
+Will use the Site Password in the Environment section`,
+      required: true,
+      value: get.site.privateIndex,
+      onValueChange: (key, value) => set("site", key, value),
+      error: error.get.privateIndex,
+      onError: (err) => error.set("privateIndex", err),
+    },
+    {
+      type: "select",
+      inputKey: "showFileExtension",
+      title: "Show File Extension",
+      description: `Show file extension in file explorer
+
+e.g. "file.mp4" instead of "file"`,
+      required: true,
+      value: get.site.showFileExtension,
+      onValueChange: (key, value) => set("site", key, value),
+      error: error.get.showFileExtension,
+      onError: (err) => error.set("showFileExtension", err),
+    },
+    {
+      type: "text",
+      inputKey: "favIcon",
+      title: "Favicon",
+      description: `The favicon of the site`,
+      required: true,
+      value: get.site.favIcon,
+      onValueChange: (key, value) => set("site", key, value),
+      error: error.get.favIcon,
+      onError: (err) => error.set("favIcon", err),
+    },
+  ];
+
+  function onFormReset(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    onReset("site");
+    toast.success("Site section has been reset to default values.");
+  }
+
+  return (
+    <form
+      className='flex w-full flex-col gap-3 py-3'
+      onReset={onFormReset}
+    >
+      <ConfigurationHeader title='Site Configuration' />
+      <Separator />
+
+      <div
+        slot='inputs'
+        className='flex flex-col gap-3'
+      >
+        <div className='grid grid-cols-3 gap-3'>
+          <div className='col-span-2 flex flex-col gap-3'>
+            {metadataInputs.map((props, index) => (
+              <ConfigurationInput<"site", ConfigurationKeys<"site">>
+                key={String(props.inputKey)}
+                {...props}
+              />
+            ))}
+          </div>
+          <div className='flex flex-col gap-3'>
+            <div className='flex flex-col'>
+              <div className='flex flex-col items-start gap-1.5 pt-3'>
+                <div className='flex select-none items-center gap-1.5 rounded-t-lg border border-border px-3 py-1.5'>
+                  <img
+                    src={get.site.favIcon}
+                    className='size-4'
+                    alt='favicon'
+                  />
+                  <span className='text-sm'>{get.site.siteName}</span>
+                  <Icon
+                    name='X'
+                    size={"0.75rem"}
+                    className='text-muted-foreground'
+                  />
+                </div>
+
+                <div className='flex select-none items-center gap-1.5 rounded-t-lg border border-border px-3 py-1.5'>
+                  <img
+                    src={get.site.favIcon}
+                    className='size-4'
+                    alt='favicon'
+                  />
+                  <span className='text-sm'>
+                    {get.site.siteNameTemplate!.replace("%s", "Page Title").replace("%t", get.site.siteName)}
+                  </span>
+                  <Icon
+                    name='X'
+                    size={"0.75rem"}
+                    className='text-muted-foreground'
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className='h-fit select-none overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2'>
+              <img
+                src={"/og.png"}
+                alt='Opengraph Preview'
+                className='w-full'
+              />
+              <div className='flex flex-col px-3 py-1.5'>
+                <span className='line-clamp-1 w-full text-lg font-medium'>
+                  {(get.site.siteNameTemplate || "%s").replace("%s", "Page Title").replace("%t", get.site.siteName)}
+                </span>
+                <span className='text-xs text-muted-foreground'>
+                  {get.environment.NEXT_PUBLIC_DOMAIN || "http://localhost:3000"}
+                </span>
+                <span className='line-clamp-2 text-sm text-muted-foreground'>{get.site.siteDescription}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {inputs.map((props, index) => (
+          <ConfigurationInput<"site", ConfigurationKeys<"site">>
+            key={String(props.inputKey)}
+            {...props}
+          />
+        ))}
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/Guide/Configuration/index.tsx b/src/components/Guide/Configuration/index.tsx
new file mode 100644
index 0000000..21c10d4
--- /dev/null
+++ b/src/components/Guide/Configuration/index.tsx
@@ -0,0 +1,9 @@
+export { default as ConfigurationForm } from "./Layout";
+
+export { default as ConfigAPI } from "./ApiForm";
+export { default as ConfigEnvironment } from "./EnvironmentForm";
+export { default as ConfigSite } from "./SiteForm";
+
+export { default as ConfigurationHeader } from "./Header";
+export { default as ConfigurationInput } from "./Input";
+export type { ConfigInputs } from "./Input";
diff --git a/src/components/Guide/Theme/FormInputs.tsx b/src/components/Guide/Theme/FormInputs.tsx
new file mode 100644
index 0000000..0512f0f
--- /dev/null
+++ b/src/components/Guide/Theme/FormInputs.tsx
@@ -0,0 +1,201 @@
+import { Fragment } from "react";
+import { z } from "zod";
+
+import { ThemeInput, type ThemeInputProps } from "~/components/Guide/Theme";
+import { Input } from "~/components/ui/input";
+import { Separator } from "~/components/ui/separator";
+import { Slider } from "~/components/ui/slider";
+
+import { parseThemeValue } from "~/utils/parseConfigFile";
+
+import { Schema_Theme, ThemeKeys } from "~/types/schema";
+
+type Props = {
+  currentTheme: "light" | "dark";
+  state: {
+    get: {
+      light: z.input<typeof Schema_Theme>;
+      dark: z.input<typeof Schema_Theme>;
+    };
+    set: (theme: "light" | "dark", key: ThemeKeys, value: string) => void;
+  };
+};
+export default function ThemeFormInputs({ currentTheme, state: { get, set } }: Props) {
+  const inputs: ThemeInputProps[][] = [
+    [
+      {
+        inputKey: "background",
+        title: "Background",
+        value: parseThemeValue(get[currentTheme].background),
+        onChange: (val) => set(currentTheme, "background", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "foreground",
+        title: "Text",
+        value: parseThemeValue(get[currentTheme].foreground),
+        onChange: (val) => set(currentTheme, "foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+    ],
+    [
+      {
+        inputKey: "card",
+        title: "Card",
+        value: parseThemeValue(get[currentTheme].card),
+        onChange: (val) => set(currentTheme, "card", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "card-foreground",
+        title: "Card Text",
+        value: parseThemeValue(get[currentTheme]["card-foreground"]),
+        onChange: (val) => set(currentTheme, "card-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "popover",
+        title: "Popover",
+        value: parseThemeValue(get[currentTheme].popover),
+        onChange: (val) => set(currentTheme, "popover", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "popover-foreground",
+        title: "Popover Text",
+        value: parseThemeValue(get[currentTheme]["popover-foreground"]),
+        onChange: (val) => set(currentTheme, "popover-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "accent",
+        title: "Accent",
+        value: parseThemeValue(get[currentTheme].accent),
+        onChange: (val) => set(currentTheme, "accent", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "accent-foreground",
+        title: "Accent Text",
+        value: parseThemeValue(get[currentTheme]["accent-foreground"]),
+        onChange: (val) => set(currentTheme, "accent-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+    ],
+    [
+      {
+        inputKey: "primary",
+        title: "Primary",
+        value: parseThemeValue(get[currentTheme].primary),
+        onChange: (val) => set(currentTheme, "primary", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "primary-foreground",
+        title: "Primary Text",
+        value: parseThemeValue(get[currentTheme]["primary-foreground"]),
+        onChange: (val) => set(currentTheme, "primary-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "secondary",
+        title: "Secondary",
+        value: parseThemeValue(get[currentTheme].secondary),
+        onChange: (val) => set(currentTheme, "secondary", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "secondary-foreground",
+        title: "Secondary Text",
+        value: parseThemeValue(get[currentTheme]["secondary-foreground"]),
+        onChange: (val) => set(currentTheme, "secondary-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "muted",
+        title: "Muted",
+        value: parseThemeValue(get[currentTheme].muted),
+        onChange: (val) => set(currentTheme, "muted", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "muted-foreground",
+        title: "Muted Text",
+        value: parseThemeValue(get[currentTheme]["muted-foreground"]),
+        onChange: (val) => set(currentTheme, "muted-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "destructive",
+        title: "Destructive",
+        value: parseThemeValue(get[currentTheme].destructive),
+        onChange: (val) => set(currentTheme, "destructive", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "destructive-foreground",
+        title: "Destructive Text",
+        value: parseThemeValue(get[currentTheme]["destructive-foreground"]),
+        onChange: (val) => set(currentTheme, "destructive-foreground", `${val.h} ${val.s} ${val.l}`),
+      },
+    ],
+    [
+      {
+        inputKey: "border",
+        title: "Element Border",
+        value: parseThemeValue(get[currentTheme].border),
+        onChange: (val) => set(currentTheme, "border", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "input",
+        title: "Input Border",
+        value: parseThemeValue(get[currentTheme].input),
+        onChange: (val) => set(currentTheme, "input", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "ring",
+        title: "Focus Ring",
+        value: parseThemeValue(get[currentTheme].ring),
+        onChange: (val) => set(currentTheme, "ring", `${val.h} ${val.s} ${val.l}`),
+      },
+      {
+        inputKey: "radius",
+        title: "Roundness",
+        value: { h: 0, s: 0, l: 0 },
+        onChange: (val) => {},
+        children: (
+          <div className='flex w-full items-center gap-3'>
+            <Slider
+              className='w-full'
+              defaultValue={[parseFloat(get[currentTheme].radius) * 16 || 0]}
+              min={0}
+              max={24}
+              value={[parseFloat(get[currentTheme].radius) * 16 || 0]}
+              onValueChange={(val) => {
+                const value = val[0] / 16;
+                set(currentTheme, "radius", `${value}rem`);
+              }}
+            />
+            <Input
+              value={parseFloat(get[currentTheme].radius) * 16 || 0}
+              onChange={(e) => {
+                const value = parseFloat(e.currentTarget.value) / 16;
+                set(currentTheme, "radius", `${value}rem`);
+              }}
+              type='number'
+              className='w-16 min-w-0 '
+              min={0}
+              max={24}
+            />
+          </div>
+        ),
+      },
+    ],
+  ];
+
+  return (
+    <div className='flex h-auto flex-grow flex-col justify-between gap-3'>
+      <div
+        slot='theme-form'
+        className='flex flex-col gap-1.5'
+      >
+        {inputs.map((item, i) => (
+          <Fragment key={`input-group-${i}`}>
+            {item.map((input) => (
+              <ThemeInput
+                key={input.inputKey}
+                {...input}
+              />
+            ))}
+            {i !== inputs.length - 1 && <Separator className='my-1.5' />}
+          </Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Guide/Theme/Input.tsx b/src/components/Guide/Theme/Input.tsx
new file mode 100644
index 0000000..cd7994b
--- /dev/null
+++ b/src/components/Guide/Theme/Input.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import { PopoverTrigger } from "@radix-ui/react-popover";
+import { HslColor, HslColorPicker } from "react-colorful";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { ButtonLoading, Icon } from "~/components/Global";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Popover, PopoverContent } from "~/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+
+import { Schema_Theme } from "~/types/schema";
+
+export type ThemeInputProps = {
+  inputKey: keyof z.infer<typeof Schema_Theme>;
+  title: string;
+  description?: string;
+  value: HslColor;
+  onChange: (color: HslColor) => void;
+  children?: React.ReactNode;
+};
+export default function ThemeInput(props: ThemeInputProps) {
+  return (
+    <div
+      id={props.inputKey}
+      slot={`input-${props.inputKey}`}
+      className='grid w-full grid-cols-3 gap-6'
+    >
+      <div
+        slot='label'
+        className='flex items-center gap-3'
+      >
+        <span className='text-base'>{props.title}</span>
+        {props.description && (
+          <Tooltip>
+            <TooltipTrigger
+              onClick={(e) => e.preventDefault()}
+              className='cursor-default'
+            >
+              <Icon
+                name='Info'
+                size='1rem'
+                className='text-muted-foreground'
+              />
+            </TooltipTrigger>
+            <TooltipContent
+              side='right'
+              className='max-w-screen-sm'
+            >
+              <p className='max-w-screen-sm !whitespace-pre-wrap'>{props.description}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+
+      <div
+        slot='input'
+        className='col-span-2 flex flex-grow items-center justify-end gap-3'
+      >
+        {props.children ? (
+          props.children
+        ) : (
+          <>
+            <span className='select-none text-sm text-muted-foreground'>
+              hsl({props.value.h}, {props.value.s}%, {props.value.l}%)
+            </span>
+            <Popover>
+              <PopoverTrigger>
+                <div className='size-8 rounded-[var(--radius)] border border-border p-0.5'>
+                  <div
+                    className='size-full rounded-[calc(var(--radius)-0.125rem)]'
+                    style={{
+                      background: `hsl(${props.value.h}, ${props.value.s}%, ${props.value.l}%)`,
+                    }}
+                  />
+                </div>
+              </PopoverTrigger>
+              <PopoverContent className='flex flex-col gap-3'>
+                <div className='flex gap-6'>
+                  <HslColorPicker
+                    color={props.value}
+                    onChange={props.onChange}
+                  />
+                  <div className='flex flex-grow flex-col items-center justify-between'>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label htmlFor={`${props.inputKey}-h`}>Hue</Label>
+                      <Input
+                        id={`${props.inputKey}-h`}
+                        name={`${props.inputKey}-h`}
+                        type='number'
+                        value={props.value.h}
+                        min={0}
+                        max={360}
+                        onChange={(e) => {
+                          const value = props.value;
+                          props.onChange({
+                            h: Number(e.target.value),
+                            s: value.s,
+                            l: value.l,
+                          });
+                        }}
+                      />
+                    </div>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label htmlFor={`${props.inputKey}-s`}>Saturation</Label>
+                      <Input
+                        id={`${props.inputKey}-s`}
+                        name={`${props.inputKey}-s`}
+                        type='number'
+                        value={props.value.s}
+                        min={0}
+                        max={100}
+                        onChange={(e) => {
+                          const value = props.value;
+                          props.onChange({
+                            h: value.h,
+                            s: Number(e.target.value),
+                            l: value.l,
+                          });
+                        }}
+                      />
+                    </div>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label htmlFor={`${props.inputKey}-l`}>Lightness</Label>
+                      <Input
+                        id={`${props.inputKey}-l`}
+                        name={`${props.inputKey}-l`}
+                        type='number'
+                        value={props.value.l}
+                        min={0}
+                        max={100}
+                        onChange={(e) => {
+                          const value = props.value;
+                          props.onChange({
+                            h: value.h,
+                            s: value.s,
+                            l: Number(e.target.value),
+                          });
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className='flex w-full items-center gap-3'>
+                  <ButtonLoading
+                    className='w-full'
+                    size={"sm"}
+                    variant={"outline"}
+                    state='idle'
+                    onClick={async (e) => {
+                      e.preventDefault();
+                      try {
+                        const text = `hsl(${props.value.h}, ${props.value.s}%, ${props.value.l}%)`;
+                        await navigator.clipboard.writeText(text);
+                        toast.success(`${props.title} color copied!`);
+                      } catch (error) {
+                        const e = error as Error;
+                        console.error(e);
+                        toast.error(e.message);
+                      }
+                    }}
+                  >
+                    Copy
+                  </ButtonLoading>
+                  <ButtonLoading
+                    className='w-full'
+                    size={"sm"}
+                    variant={"outline"}
+                    state='idle'
+                    onClick={async (e) => {
+                      e.preventDefault();
+                      try {
+                        const text = await navigator.clipboard.readText();
+                        const color = text.match(
+                          /\bhsl\(\s*(\d+)\s*,\s*(\d+(?:\.\d+)?)\s*%\s*,\s*(\d+(?:\.\d+)?)\s*%\s*\)/,
+                        );
+                        if (!color) {
+                          throw new Error("Color does not match the format!");
+                        }
+                        const h = Number(color[1]);
+                        const s = Number(color[2]);
+                        const l = Number(color[3]);
+                        if (isNaN(h) || isNaN(s) || isNaN(l)) {
+                          throw new Error("HSL values are not numbers!");
+                        }
+                        props.onChange({ h, s, l });
+                        toast.success(`Color pasted!`);
+                      } catch (error) {
+                        const e = error as Error;
+                        console.error(e);
+                        toast.error(e.message);
+                      }
+                    }}
+                  >
+                    Paste
+                  </ButtonLoading>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Guide/Theme/Layout.tsx b/src/components/Guide/Theme/Layout.tsx
new file mode 100644
index 0000000..4ff9a19
--- /dev/null
+++ b/src/components/Guide/Theme/Layout.tsx
@@ -0,0 +1,427 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+import { generateTheme } from "~/data/template";
+
+import { ButtonLoading, Icon, Loader, Markdown } from "~/components/Global";
+import { FormInputs, ThemePreview } from "~/components/Guide/Theme";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Textarea } from "~/components/ui/textarea";
+
+import useLoading from "~/hooks/useLoading";
+import { downloadBlob } from "~/utils/downloadBlob";
+import { fileLoadHelper } from "~/utils/fileLoadHelper";
+import { parseThemeValue } from "~/utils/parseConfigFile";
+
+import { ButtonState, Schema_Theme, ThemeKeys } from "~/types/schema";
+
+export default function ThemeForm() {
+  const loading = useLoading();
+
+  const initialTheme = useMemo<Record<"light" | "dark", z.input<typeof Schema_Theme>>>(
+    () => ({
+      light: {
+        "background": "0 0% 100%",
+        "foreground": "0 0% 3.9%",
+        "card": "0 0% 100%",
+        "card-foreground": "0 0% 3.9%",
+        "popover": "0 0% 100%",
+        "popover-foreground": "0 0% 3.9%",
+        "primary": "0 0% 9%",
+        "primary-foreground": "0 0% 98%",
+        "secondary": "0 0% 96.1%",
+        "secondary-foreground": "0 0% 9%",
+        "muted": "0 0% 96.1%",
+        "muted-foreground": "0 0% 45.1%",
+        "accent": "0 0% 96.1%",
+        "accent-foreground": "0 0% 9%",
+        "destructive": "0 84.2% 60.2%",
+        "destructive-foreground": "0 0% 98%",
+        "border": "0 0% 89.8%",
+        "input": "0 0% 89.8%",
+        "ring": "0 0% 89.8%",
+        "radius": "0.5rem",
+      },
+      dark: {
+        "background": "0 0% 3.9%",
+        "foreground": "0 0% 98%",
+        "card": "0 0% 3.9%",
+        "card-foreground": "0 0% 98%",
+        "popover": "0 0% 3.9%",
+        "popover-foreground": "0 0% 98%",
+        "primary": "0 0% 98%",
+        "primary-foreground": "0 0% 9%",
+        "secondary": "0 0% 14.9%",
+        "secondary-foreground": "0 0% 98%",
+        "muted": "0 0% 14.9%",
+        "muted-foreground": "0 0% 63.9%",
+        "accent": "0 0% 14.9%",
+        "accent-foreground": "0 0% 98%",
+        "destructive": "0 62.8% 30.6%",
+        "destructive-foreground": "0 0% 98%",
+        "border": "0 0% 14.9%",
+        "input": "0 0% 14.9%",
+        "ring": "0 0% 14.9%",
+        "radius": "0.5rem",
+      },
+    }),
+    [],
+  );
+  const [currentTheme, setCurrentTheme] = useState<"light" | "dark">("light");
+  const [theme, setTheme] = useState<Record<"light" | "dark", z.input<typeof Schema_Theme>>>(initialTheme);
+
+  const [codeValue, setCodeValue] = useState<string>("");
+  const [pasteDialog, setPasteDialog] = useState<boolean>(false);
+  const [pasteState, setPasteState] = useState<ButtonState>("idle");
+
+  const [downloadState, setDownloadState] = useState<ButtonState>("idle");
+  const [resetState, setResetState] = useState<ButtonState>("idle");
+
+  function assignTheme(theme: "light" | "dark", values: string[]) {
+    for (const value of values) {
+      const [k, v] = value.split(":").map((v) => v.replace("--", "").trim());
+      if (k === "radius") {
+        onThemeChange(theme, k as ThemeKeys, v.replace(";", ""));
+      } else {
+        const color = parseThemeValue(v);
+        if (!color) continue;
+        onThemeChange(theme, k as ThemeKeys, `${color.h} ${color.s}% ${color.l}%`);
+      }
+    }
+  }
+  function onLoadCSS() {
+    fileLoadHelper({
+      accept: ".css",
+      async onLoad(result) {
+        const themeRegex = /\/\* Shadcn\/ui theme \*\/.*?\:root \{(.*?)\}.*?.dark \{(.*?) \}/gm;
+        const themeMatch = themeRegex.exec(result.replace(/\r?\n?/g, ""));
+        if (!themeMatch) return toast.error("Can't find theme, are you sure it's the right file?");
+
+        const light = themeMatch[1]
+          .replace(/\s{2,4}/g, "\n")
+          .split("\n")
+          .map((v) => v.trim())
+          .filter((v) => v.length && (v.startsWith("/*") && v.endsWith("*/") ? false : true));
+        const dark = themeMatch[2]
+          .replace(/\s{2,4}/g, "\n")
+          .split("\n")
+          .map((v) => v.trim())
+          .filter((v) => v.length && (v.startsWith("/*") && v.endsWith("*/") ? false : true));
+
+        if (!light || !dark)
+          return toast.error("File loaded doesn't seem like shadcn theme, are you sure it's the right file?");
+
+        assignTheme("light", light);
+        assignTheme("dark", dark);
+
+        toast.success("Theme loaded successfully");
+      },
+    });
+  }
+  function onLoadCode(value: string) {
+    const themeRegex = /\@layer base.*?\:root \{(.*?)\}.*?.dark \{(.*?) \}/gm;
+    const themeMatch = themeRegex.exec(value.replace(/\r\n/g, ""));
+    if (!themeMatch) throw new Error("Unknown format, make sure it's satisfies the shadcn/ui theme format");
+
+    const light = themeMatch[1]
+      .replace(/\s{2,4}/g, "\n")
+      .split("\n")
+      .map((v) => v.trim())
+      .filter((v) => v.length && (v.startsWith("/*") && v.endsWith("*/") ? false : true));
+    const dark = themeMatch[2]
+      .replace(/\s{2,4}/g, "\n")
+      .split("\n")
+      .map((v) => v.trim())
+      .filter((v) => v.length && (v.startsWith("/*") && v.endsWith("*/") ? false : true));
+
+    if (!light || !dark) throw new Error("It doesn't seem like shadcn theme, are you sure it's the right format?");
+
+    assignTheme("light", light);
+    assignTheme("dark", dark);
+
+    toast.success("Theme loaded successfully");
+  }
+  function onThemeChange(theme: "light" | "dark", key: ThemeKeys, value: string) {
+    setTheme((prev) => ({
+      ...prev,
+      [theme]: {
+        ...prev[theme],
+        [key]: value,
+      },
+    }));
+  }
+
+  async function onDownload(copy?: boolean) {
+    setDownloadState("loading");
+    try {
+      const generated = generateTheme(theme);
+      if (copy) {
+        await navigator.clipboard.writeText(generated);
+        return toast.success("Theme copied to clipboard");
+      }
+
+      const blob = new Blob([generated], { type: "text/css" });
+      downloadBlob(blob, "globals.css");
+      toast.success("Theme downloaded successfully");
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      toast.error(e.message);
+    } finally {
+      setDownloadState("idle");
+    }
+  }
+  async function onReset() {
+    setResetState("loading");
+    try {
+      setTheme(initialTheme);
+      toast.success("Theme reset to default");
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      toast.error(e.message);
+    } finally {
+      setResetState("idle");
+    }
+  }
+
+  if (loading)
+    return (
+      <Card>
+        <CardContent>
+          <Loader message='Loading theme...' />
+        </CardContent>
+      </Card>
+    );
+
+  return (
+    <>
+      <Card>
+        <CardHeader className='pb-0'>
+          <div className='flex items-center justify-between gap-3'>
+            <CardTitle id='theme'>Theme Customization</CardTitle>
+            <div
+              slot='actions'
+              className='flex w-full items-center gap-3 tablet:w-fit'
+            >
+              <Dialog
+                open={pasteDialog}
+                onOpenChange={setPasteDialog}
+              >
+                <DialogTrigger>
+                  <></>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Paste CSS Code</DialogTitle>
+                    <DialogDescription>
+                      Paste the CSS code from your theme file
+                      <br />
+                      <Link
+                        href={"https://ui.shadcn.com/themes"}
+                        target='_blank'
+                        className='text-blue-600 opacity-80 transition-all duration-300 hover:opacity-100 dark:text-blue-400'
+                      >
+                        Get themes from shadcn/ui
+                      </Link>
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <form
+                    className='space-y-3'
+                    onSubmit={(e) => {
+                      e.preventDefault();
+                      setPasteState("loading");
+
+                      try {
+                        if (!codeValue) throw new Error("No CSS code provided");
+
+                        const flatten = codeValue.replace(/\r\n/g, "");
+                        onLoadCode(flatten);
+                        setPasteDialog(false);
+                      } catch (error) {
+                        const e = error as Error;
+                        console.error(e);
+                        toast.error(e.message);
+                      } finally {
+                        setPasteState("idle");
+                      }
+                    }}
+                  >
+                    <Textarea
+                      id='css-paste'
+                      name='css-paste'
+                      className='w-full'
+                      rows={10}
+                      placeholder='Paste your CSS code here'
+                      value={codeValue}
+                      onChange={(e) => setCodeValue(e.target.value)}
+                    />
+
+                    <DialogFooter>
+                      <DialogClose asChild>
+                        <Button
+                          size={"sm"}
+                          variant={"destructive"}
+                          type='reset'
+                        >
+                          Cancel
+                        </Button>
+                      </DialogClose>
+                      <ButtonLoading
+                        state={pasteState}
+                        size={"sm"}
+                        type='submit'
+                        icon='Save'
+                      >
+                        Load Theme
+                      </ButtonLoading>
+                    </DialogFooter>
+                  </form>
+                </DialogContent>
+              </Dialog>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant={"outline"}
+                    size={"sm"}
+                  >
+                    <Icon
+                      name='Import'
+                      size={"1rem"}
+                      className='mr-2'
+                    />
+                    Import Theme
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <DropdownMenuItem onClick={onLoadCSS}>
+                    <Icon
+                      name='Upload'
+                      size={"1rem"}
+                      className='mr-2'
+                    />
+                    Load from file
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={async () => {
+                      // setPasteDialog(true);
+                      const themeRegex = /\@layer base \{\s+\:root \{\s+.*\}  \.dark \{\s+.*\}/gm;
+                      const clipboard = await navigator.clipboard.readText();
+                      if (clipboard) {
+                        const flattenClipboard = clipboard.replace(/\r\n/g, "").trim();
+                        const match = themeRegex.exec(flattenClipboard);
+                        if (match) {
+                          setCodeValue(clipboard.trim());
+                          toast.success("Theme found in clipboard! Click 'Load Theme' to apply it");
+                        }
+                      }
+
+                      setPasteDialog(true);
+                    }}
+                  >
+                    <Icon
+                      name='Code'
+                      size={"1rem"}
+                      className='mr-2'
+                    />
+                    Paste CSS code
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
+        </CardHeader>
+
+        <CardContent className='space-y-3 py-3'>
+          <Markdown
+            content={`You can personalize the theme of your index by changing the color of the elements.
+You can either use default colors from [shadcn/ui](https://ui.shadcn.com/themes) or create your own theme by changing the color code of each element.`}
+          />
+
+          <div className='flex w-full items-center justify-between gap-3'>
+            <div className='flex items-center'>
+              <Button
+                size={"sm"}
+                variant={currentTheme === "light" ? "default" : "outline"}
+                className='rounded-r-none'
+                onClick={() => setCurrentTheme("light")}
+              >
+                <Icon
+                  name='Sun'
+                  size='1rem'
+                  className='mr-2'
+                />
+                Light theme
+              </Button>
+              <Button
+                size={"sm"}
+                variant={currentTheme === "dark" ? "default" : "outline"}
+                className='rounded-l-none'
+                onClick={() => setCurrentTheme("dark")}
+              >
+                <Icon
+                  name='Moon'
+                  size='1rem'
+                  className='mr-2'
+                />
+                Dark theme
+              </Button>
+            </div>
+
+            <div className='flex items-center gap-3'>
+              <ButtonLoading
+                size={"sm"}
+                state={downloadState}
+                icon={"Save"}
+                onClick={() => onDownload()}
+              >
+                Download theme
+              </ButtonLoading>
+              <ButtonLoading
+                size={"sm"}
+                state={resetState}
+                variant={"destructive"}
+                icon='History'
+                onClick={onReset}
+              >
+                Reset theme
+              </ButtonLoading>
+            </div>
+          </div>
+          <div className='grid grid-cols-1 gap-3 rounded-[var(--radius)] border border-border p-4 tablet:grid-cols-2'>
+            <FormInputs
+              currentTheme={currentTheme}
+              state={{
+                get: theme,
+                set: onThemeChange,
+              }}
+            />
+            <ThemePreview theme={theme[currentTheme]} />
+          </div>
+        </CardContent>
+      </Card>
+    </>
+  );
+}
diff --git a/src/components/Guide/Theme/Preview.tsx b/src/components/Guide/Theme/Preview.tsx
new file mode 100644
index 0000000..5d9d9bd
--- /dev/null
+++ b/src/components/Guide/Theme/Preview.tsx
@@ -0,0 +1,304 @@
+"use client";
+
+import { PopoverTrigger } from "@radix-ui/react-popover";
+import NextTopLoader from "nextjs-toploader";
+import nProgress from "nprogress";
+import { useMemo, useState } from "react";
+import toast from "react-hot-toast";
+import { z } from "zod";
+
+import { Grid as FileGrid, List as FileList } from "~/components/Explorer";
+import { ButtonLoading } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+import { Dialog, DialogContent, DialogTrigger } from "~/components/ui/dialog";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "~/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Input } from "~/components/ui/input";
+import { Popover, PopoverContent } from "~/components/ui/popover";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "~/components/ui/sheet";
+import { Textarea } from "~/components/ui/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+
+import { cn } from "~/utils/cn";
+
+import { ButtonState, Schema_File, Schema_Theme } from "~/types/schema";
+
+type Props = {
+  theme: z.input<typeof Schema_Theme>;
+};
+export default function ThemePreview({ theme }: Props) {
+  const fileMockData = useMemo<z.infer<typeof Schema_File>>(
+    () => ({
+      encryptedId: "1",
+      name: "File Name",
+      modifiedTime: "2021-09-01T00:00:00.000Z",
+      mimeType: "text/plain",
+      trashed: false,
+      size: 1024 * 1024 * 100,
+    }),
+    [],
+  );
+  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [toastState, setToastState] = useState<ButtonState>("idle");
+  const [loadingState, setLoadingState] = useState<ButtonState>("idle");
+
+  return (
+    <div
+      slot='container'
+      className='overflow-hidden rounded-[var(--radius)] border border-border'
+    >
+      <div
+        slot='preview'
+        ref={setPortalContainer}
+        className='preview flex flex-col gap-3 bg-background p-3 text-foreground'
+        style={
+          {
+            "--background": theme.background,
+            "--foreground": theme.foreground,
+            "--card": theme.card,
+            "--card-foreground": theme["card-foreground"],
+            "--popover": theme.popover,
+            "--popover-foreground": theme["popover-foreground"],
+            "--primary": theme.primary,
+            "--primary-foreground": theme["primary-foreground"],
+            "--secondary": theme.secondary,
+            "--secondary-foreground": theme["secondary-foreground"],
+            "--muted": theme.muted,
+            "--muted-foreground": theme["muted-foreground"],
+            "--accent": theme.accent,
+            "--accent-foreground": theme["accent-foreground"],
+            "--destructive": theme.destructive,
+            "--destructive-foreground": theme["destructive-foreground"],
+            "--border": theme.border,
+            "--input": theme.input,
+            "--ring": theme.ring,
+            "--radius": theme.radius,
+          } as React.CSSProperties
+        }
+      >
+        <Wrapper
+          title='Button'
+          extra={`Primary, Secondary, Accent, Destructive, Input Border`}
+          className='grid grid-cols-3 gap-1.5'
+        >
+          {["default", "secondary", "destructive", "outline", "ghost", "link"].map((btn) => (
+            <Button
+              key={btn}
+              size={"sm"}
+              variant={btn as any}
+              onClick={(e) => e.preventDefault()}
+              className='capitalize'
+            >
+              {btn}
+            </Button>
+          ))}
+        </Wrapper>
+
+        <Wrapper
+          title='Input'
+          extra={`Muted, Input Border`}
+          className='space-y-1.5'
+        >
+          <Input placeholder='Input' />
+          <Textarea placeholder='Textarea' />
+        </Wrapper>
+
+        <Wrapper
+          title='Popover'
+          extra={`Popover, Element Border`}
+          className='grid grid-cols-3 gap-1.5'
+        >
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                size={"sm"}
+                variant={"outline"}
+                className='w-full'
+              >
+                Hover me
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Hello</p>
+            </TooltipContent>
+          </Tooltip>
+
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                size={"sm"}
+                variant={"outline"}
+                className='w-full'
+              >
+                Click me
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent portal={portalContainer}>
+              <p>Hello</p>
+            </PopoverContent>
+          </Popover>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                size={"sm"}
+                variant={"outline"}
+                className='w-full'
+              >
+                Dropdown
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent portal={portalContainer}>
+              <DropdownMenuItem>Item 1</DropdownMenuItem>
+              <DropdownMenuItem>Item 2</DropdownMenuItem>
+              <DropdownMenuItem disabled>Item 3</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </Wrapper>
+
+        <Wrapper
+          title='Overlay'
+          extra={`Background, Primary, Muted, Element Border`}
+          className='grid grid-cols-3 gap-1.5'
+        >
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button
+                size='sm'
+                variant='outline'
+                className='w-full'
+              >
+                Open Dialog
+              </Button>
+            </DialogTrigger>
+            <DialogContent portal={portalContainer}>Dialog Content</DialogContent>
+          </Dialog>
+
+          <Drawer>
+            <DrawerTrigger asChild>
+              <Button
+                size='sm'
+                variant='outline'
+                className='w-full'
+              >
+                Open Drawer
+              </Button>
+            </DrawerTrigger>
+            <DrawerContent portal={portalContainer}>
+              <DrawerHeader>
+                <DrawerTitle>Drawer Title</DrawerTitle>
+                <DrawerDescription>Description</DrawerDescription>
+              </DrawerHeader>
+              <div className='p-6'>Drawer only used for mobile devices</div>
+            </DrawerContent>
+          </Drawer>
+
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button
+                size='sm'
+                variant='outline'
+                className='w-full'
+              >
+                Open Sheet
+              </Button>
+            </SheetTrigger>
+            <SheetContent portal={portalContainer}>
+              <SheetHeader>
+                <SheetTitle>Sheet Title</SheetTitle>
+                <SheetDescription>Description</SheetDescription>
+              </SheetHeader>
+              <div>Sheet only used for mobile devices</div>
+            </SheetContent>
+          </Sheet>
+
+          <ButtonLoading
+            size='sm'
+            variant='outline'
+            className='w-full'
+            state={toastState}
+            onClick={async (e) => {
+              e.preventDefault();
+              setToastState("loading");
+              const style = {
+                background: `hsl(${theme.background})`,
+                color: `hsl(${theme.foreground})`,
+                borderRadius: `var(${theme.radius})`,
+                border: `1px solid hsl(${theme.border})`,
+              };
+              toast.loading("Toast!", { duration: 1500, style });
+              toast.success("Toast!", { duration: 1500, style });
+              toast.error("Toast!", { duration: 1500, style });
+
+              await new Promise((resolve) => setTimeout(resolve, 1500));
+              setToastState("idle");
+            }}
+          >
+            Toast!
+          </ButtonLoading>
+          <NextTopLoader color={`hsl(${theme.primary})`} />
+          <ButtonLoading
+            size={"sm"}
+            variant={"outline"}
+            className={"w-full"}
+            state={loadingState}
+            onClick={async (e) => {
+              e.preventDefault();
+              setLoadingState("loading");
+
+              nProgress.start();
+              await new Promise((resolve) => setTimeout(resolve, 1500));
+              nProgress.done();
+              setLoadingState("idle");
+            }}
+          >
+            Loading bar
+          </ButtonLoading>
+        </Wrapper>
+
+        <Wrapper
+          title='File'
+          className='grid grid-cols-1 gap-1.5'
+        >
+          <FileList
+            data={fileMockData}
+            disabled
+          />
+          <FileGrid
+            data={fileMockData}
+            disabled
+          />
+        </Wrapper>
+      </div>
+    </div>
+  );
+}
+
+type WrapperProps = {
+  title: string;
+  extra?: string;
+  className?: string;
+};
+function Wrapper({ title, extra, className, children }: React.PropsWithChildren<WrapperProps>) {
+  return (
+    <div className='flex w-full flex-col gap-3'>
+      <div className='flex flex-col'>
+        <h3>{title}</h3>
+        {extra && <p className='text-xs opacity-50'>{extra}</p>}
+      </div>
+      <div className={cn("w-full", className)}>{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/Guide/Theme/index.tsx b/src/components/Guide/Theme/index.tsx
new file mode 100644
index 0000000..c13224e
--- /dev/null
+++ b/src/components/Guide/Theme/index.tsx
@@ -0,0 +1,5 @@
+export { default as FormInputs } from "./FormInputs";
+export { default as ThemeInput } from "./Input";
+export type { ThemeInputProps } from "./Input";
+export { default as ThemeForm } from "./Layout";
+export { default as ThemePreview } from "./Preview";
diff --git a/src/components/Guide/index.tsx b/src/components/Guide/index.tsx
new file mode 100644
index 0000000..430a580
--- /dev/null
+++ b/src/components/Guide/index.tsx
@@ -0,0 +1,2 @@
+export * from "./Configuration";
+export * from "./Theme";
diff --git a/src/app/@footer.tsx b/src/components/Layout/Footer.tsx
similarity index 78%
rename from src/app/@footer.tsx
rename to src/components/Layout/Footer.tsx
index 57710bf..ef4bf45 100644
--- a/src/app/@footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -3,12 +3,14 @@
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 
+import { isDev } from "~/utils/isDev";
+
 type Props = {
   content: string;
 };
 export default function Footer({ content }: Props) {
   return (
-    <footer className='w-full pb-3'>
+    <footer className='flex w-full items-center justify-center pb-3'>
       <ReactMarkdown
         className='flex w-full select-none flex-col items-center justify-center text-center'
         components={{
@@ -39,6 +41,11 @@ export default function Footer({ content }: Props) {
       >
         {content}
       </ReactMarkdown>
+      {isDev && (
+        <div className='fixed bottom-0 z-[999] rounded-t-[var(--radius)] border border-b-0 border-border bg-primary px-3 py-1 text-xs text-primary-foreground'>
+          Dev Mode
+        </div>
+      )}
     </footer>
   );
 }
diff --git a/src/app/@navbar.tsx b/src/components/Layout/Navbar.tsx
similarity index 85%
rename from src/app/@navbar.tsx
rename to src/components/Layout/Navbar.tsx
index 92632ca..665e325 100644
--- a/src/app/@navbar.tsx
+++ b/src/components/Layout/Navbar.tsx
@@ -1,14 +1,12 @@
 "use client";
 
-import { TooltipTrigger } from "@radix-ui/react-tooltip";
 import { useTheme } from "next-themes";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { Icon } from "~/components/Global";
 import { Button } from "~/components/ui/button";
 import {
   Dialog,
@@ -36,19 +34,14 @@ import {
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 import { Separator } from "~/components/ui/separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetTrigger,
-} from "~/components/ui/sheet";
-import { Tooltip, TooltipContent } from "~/components/ui/tooltip";
+import { Sheet, SheetContent, SheetFooter, SheetTrigger } from "~/components/ui/sheet";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
 
 import useMediaQuery from "~/hooks/useMediaQuery";
+import { cn } from "~/utils/cn";
 
-import config from "~/config/gIndex.config";
-
-import { ClearPassword } from "./actions";
+import { ClearPassword } from "actions";
+import config from "config";
 
 export default function Navbar() {
   const pathname = usePathname();
@@ -86,19 +79,13 @@ export default function Navbar() {
         slot='nav'
         className={cn(
           "bg-background",
-          // "sticky left-0 top-0",
           "h-12 w-full",
           "px-6 py-3",
           "flex flex-grow flex-row items-center justify-between",
           "border-b border-border",
         )}
       >
-        <div
-          className={cn(
-            "flex flex-row items-center justify-between",
-            "mx-auto w-full max-w-screen-desktop",
-          )}
-        >
+        <div className={cn("flex flex-row items-center justify-between", "mx-auto w-full max-w-screen-desktop")}>
           <Link
             href={"/"}
             onClick={() => setOpen(false)}
@@ -110,9 +97,7 @@ export default function Navbar() {
               className={cn("h-10 w-10")}
               loading='eager'
             />
-            <span className={cn("large", "hidden", "tablet:block")}>
-              {config.siteConfig.siteName}
-            </span>
+            <span className={cn("large", "hidden", "tablet:block")}>{config.siteConfig.siteName}</span>
           </Link>
 
           {isDesktop ? (
@@ -128,16 +113,14 @@ export default function Navbar() {
                         "flex flex-col items-center justify-center",
                         "opacity-80",
                         "hover:opacity-100",
-                        pathname === item.href
-                          ? "cursor-default opacity-100"
-                          : "cursor-pointer",
+                        pathname === item.href ? "cursor-default opacity-100" : "cursor-pointer",
                         "p-1.5",
                       )}
                     >
                       <Icon
                         name={item.icon}
                         className='text-foreground'
-                        size={20}
+                        size={"1.25rem"}
                       />
                     </Link>
                   </TooltipTrigger>
@@ -152,31 +135,6 @@ export default function Navbar() {
                 className='mx-3 my-auto h-6'
               />
 
-              {config.showDeployGuide && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Link
-                      href={"/deploy"}
-                      className={cn(
-                        "flex flex-col items-center justify-center",
-                        "opacity-80",
-                        "hover:opacity-100",
-                        "cursor-pointer",
-                        "p-1.5",
-                      )}
-                    >
-                      <Icon
-                        name={"Book"}
-                        size={20}
-                      />
-                    </Link>
-                  </TooltipTrigger>
-                  <TooltipContent side='bottom'>
-                    <p>Deploy Guide</p>
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
               <DropdownMenu
                 modal={false}
                 open={themeOpen}
@@ -195,14 +153,8 @@ export default function Navbar() {
                         )}
                       >
                         <Icon
-                          name={
-                            theme === "system"
-                              ? "LaptopMinimal"
-                              : theme === "light"
-                              ? "Sun"
-                              : "Moon"
-                          }
-                          size={20}
+                          name={theme === "system" ? "LaptopMinimal" : theme === "light" ? "Sun" : "Moon"}
+                          size={"1.25rem"}
                         />
                       </div>
                     </DropdownMenuTrigger>
@@ -211,7 +163,7 @@ export default function Navbar() {
                     <p>Site theme</p>
                   </TooltipContent>
                 </Tooltip>
-                <DropdownMenuContent align='end'>
+                <DropdownMenuContent align='start'>
                   {themes.map((item) => (
                     <DropdownMenuItem
                       key={item}
@@ -220,14 +172,7 @@ export default function Navbar() {
                       onClick={() => setTheme(item)}
                     >
                       <div className='flex w-full items-center justify-between'>
-                        <span
-                          className={cn(
-                            "capitalize",
-                            // item === theme && "text-muted-foreground",
-                          )}
-                        >
-                          {item}
-                        </span>
+                        <span className={cn("capitalize")}>{item}</span>
                         <Icon
                           name={
                             item === theme
@@ -238,11 +183,7 @@ export default function Navbar() {
                               ? "Sun"
                               : "Moon"
                           }
-                          className={
-                            cn()
-                            // item === theme && "text-muted-foreground",
-                          }
-                          size={16}
+                          size={"1rem"}
                         />
                       </div>
                     </DropdownMenuItem>
@@ -266,7 +207,7 @@ export default function Navbar() {
                         >
                           <Icon
                             name='Heart'
-                            size={20}
+                            size={"1.25rem"}
                           />
                         </div>
                       </DropdownMenuTrigger>
@@ -275,7 +216,7 @@ export default function Navbar() {
                       <p>Support</p>
                     </TooltipContent>
                   </Tooltip>
-                  <DropdownMenuContent align='end'>
+                  <DropdownMenuContent align='center'>
                     {config.siteConfig.supports.map((item) => (
                       <DropdownMenuItem key={item.name}>
                         <Link
@@ -293,6 +234,32 @@ export default function Navbar() {
                 </DropdownMenu>
               )}
 
+              {config.showDeployGuide && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Link
+                      href={"/deploy"}
+                      className={cn(
+                        "flex items-center justify-center gap-1.5",
+                        "opacity-80",
+                        "hover:opacity-100",
+                        "cursor-pointer",
+                        "p-1.5",
+                      )}
+                    >
+                      <Icon
+                        name={"Book"}
+                        size={"1.25rem"}
+                      />
+                      <span className='text-sm'>Guide</span>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Deploy Guide</p>
+                  </TooltipContent>
+                </Tooltip>
+              )}
+
               <Separator
                 orientation='vertical'
                 className='mx-3 my-auto h-6'
@@ -314,7 +281,7 @@ export default function Navbar() {
                         <Icon
                           name='LogOut'
                           className='text-red-500'
-                          size={20}
+                          size={"1.25rem"}
                         />
                       </div>
                     </DialogTrigger>
@@ -327,8 +294,7 @@ export default function Navbar() {
                 <DialogContent>
                   <DialogTitle>Clear all saved password?</DialogTitle>
                   <DialogDescription>
-                    You will need to re-enter the password to access the
-                    protected content.
+                    You will need to re-enter the password to access the protected content.
                     <br />
                     <b>Are you sure you want to continue?</b>
                   </DialogDescription>
@@ -353,6 +319,7 @@ export default function Navbar() {
               <Drawer
                 open={themeOpen}
                 onOpenChange={setThemeOpen}
+                shouldScaleBackground
               >
                 <DrawerTrigger asChild>
                   <Button
@@ -360,14 +327,8 @@ export default function Navbar() {
                     size={"icon"}
                   >
                     <Icon
-                      name={
-                        theme === "system"
-                          ? "LaptopMinimal"
-                          : theme === "light"
-                          ? "Sun"
-                          : "Moon"
-                      }
-                      size={18}
+                      name={theme === "system" ? "LaptopMinimal" : theme === "light" ? "Sun" : "Moon"}
+                      size={"1.125rem"}
                       className='text-foreground'
                     />
                   </Button>
@@ -375,16 +336,14 @@ export default function Navbar() {
                 <DrawerContent>
                   <DrawerHeader className='text-start'>
                     <DrawerTitle>Theme</DrawerTitle>
-                    <DrawerDescription>
-                      Choose your preferred theme
-                    </DrawerDescription>
+                    <DrawerDescription>Choose your preferred theme</DrawerDescription>
                   </DrawerHeader>
 
-                  <div className='flex flex-col px-4'>
+                  <div className='grid gap-1.5 px-4'>
                     {themes.map((item) => (
                       <Button
                         key={item}
-                        variant={"ghost"}
+                        variant={theme === item ? "default" : "outline"}
                         size={"sm"}
                         className='w-full'
                         disabled={item === theme}
@@ -411,11 +370,7 @@ export default function Navbar() {
                                 ? "Sun"
                                 : "Moon"
                             }
-                            className={
-                              cn()
-                              // item === theme && "text-muted-foreground",
-                            }
-                            size={16}
+                            size={"1rem"}
                           />
                         </div>
                       </Button>
@@ -445,13 +400,13 @@ export default function Navbar() {
                   >
                     <Icon
                       name='Menu'
-                      size={18}
+                      size={"1.125rem"}
                       className='text-foreground'
                     />
                   </Button>
                 </SheetTrigger>
                 <SheetContent className='flex flex-col items-center gap-3 pt-12'>
-                  <div className='flex w-full flex-grow flex-col gap-6 overflow-y-scroll'>
+                  <div className='flex w-full flex-grow flex-col gap-6 overflow-y-auto'>
                     <div className='flex flex-col'>
                       {config.siteConfig.navbarItems.map((item) => (
                         <Button
@@ -463,9 +418,7 @@ export default function Navbar() {
                           <Link
                             href={item.href}
                             target={item.external ? "_blank" : undefined}
-                            rel={
-                              item.external ? "noopener noreferrer" : undefined
-                            }
+                            rel={item.external ? "noopener noreferrer" : undefined}
                             className='flex w-full items-center justify-between gap-3'
                             onClick={() => setOpen(false)}
                           >
@@ -473,14 +426,14 @@ export default function Navbar() {
                               <Icon
                                 name={item.icon}
                                 className='text-foreground'
-                                size={18}
+                                size={"1.125rem"}
                               />
                               {item.name}
                             </div>
                             {item.external && (
                               <Icon
                                 name='ExternalLink'
-                                size={12}
+                                size={"0.75rem"}
                                 className='text-muted-foreground'
                               />
                             )}
@@ -503,7 +456,7 @@ export default function Navbar() {
                               <Icon
                                 name={"Book"}
                                 className='text-foreground'
-                                size={18}
+                                size={"1.125rem"}
                               />
                               Deploy Guide
                             </div>
@@ -512,7 +465,7 @@ export default function Navbar() {
                       )}
                     </div>
 
-                    <div className='flex flex-col'>
+                    <div className='hidden flex-col'>
                       <p className='large'>Theme</p>
                       <Separator className='my-1.5' />
                       {themes.map((item) => (
@@ -549,7 +502,7 @@ export default function Navbar() {
                                 cn()
                                 // item === theme && "text-muted-foreground",
                               }
-                              size={18}
+                              size={"1.125rem"}
                             />
                           </div>
                         </Button>
@@ -598,8 +551,7 @@ export default function Navbar() {
                         <DrawerHeader className='text-left'>
                           <DrawerTitle>Clear all saved password?</DrawerTitle>
                           <DrawerDescription>
-                            You will need to re-enter the password to access the
-                            protected content.
+                            You will need to re-enter the password to access the protected content.
                             <br />
                             <b>Are you sure you want to continue?</b>
                           </DrawerDescription>
diff --git a/src/components/Layout/NotFound.tsx b/src/components/Layout/NotFound.tsx
new file mode 100644
index 0000000..25ea8bc
--- /dev/null
+++ b/src/components/Layout/NotFound.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { Status } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+
+import useRouter from "~/hooks/usePRouter";
+import { cn } from "~/utils/cn";
+
+export default function NotFound() {
+  const router = useRouter();
+
+  return (
+    <div className={cn("mx-auto h-full w-full max-w-md", "flex flex-grow flex-col items-center justify-center gap-12")}>
+      <Status
+        icon='Frown'
+        message='The file you are looking for does not exist'
+      />
+
+      <div className={cn("w-full", "flex flex-col items-center gap-3")}>
+        <Button
+          className='w-full'
+          onClick={() => router.push("/")}
+        >
+          Back to Home
+        </Button>
+        <Button
+          variant={"outline"}
+          className='w-full'
+          onClick={() => router.back()}
+        >
+          Back to Previous Page
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/@password.tsx b/src/components/Layout/Password.tsx
similarity index 69%
rename from src/app/@password.tsx
rename to src/components/Layout/Password.tsx
index 06e285f..1f7f554 100644
--- a/src/app/@password.tsx
+++ b/src/components/Layout/Password.tsx
@@ -1,20 +1,17 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import toast from "react-hot-toast";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { Icon, Loader } from "~/components/Global";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 
-import {
-  CheckPassword,
-  CheckSitePassword,
-  SetPassword,
-  SetSitePassword,
-} from "./actions";
+import useLoading from "~/hooks/useLoading";
+import { cn } from "~/utils/cn";
+
+import { CheckPassword, CheckSitePassword, SetPassword, SetSitePassword } from "actions";
 
 type Props = {
   path: string;
@@ -23,10 +20,10 @@ type Props = {
 };
 export default function Password({ path, checkPaths, errorMessage }: Props) {
   const router = useRouter();
+  const loading = useLoading();
 
   const [input, setInput] = useState<string>("");
   const [submitLoading, setSubmitLoading] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(true);
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -44,8 +41,7 @@ export default function Password({ path, checkPaths, errorMessage }: Props) {
         const check = await CheckSitePassword();
         if (!check.success) throw new Error(check.message);
       } else {
-        if (!checkPaths)
-          throw new Error("No path found, try to refresh the page.");
+        if (!checkPaths) throw new Error("No path found, try to refresh the page.");
         const set = await SetPassword(path, input);
         if (!set.success) throw new Error(set.message);
 
@@ -56,7 +52,6 @@ export default function Password({ path, checkPaths, errorMessage }: Props) {
       toast.success("Password accepted! Refreshing...", {
         id: "password",
       });
-      console.log("Password accepted! Refreshing...");
       router.refresh();
     } catch (error) {
       const e = error as Error;
@@ -70,34 +65,10 @@ export default function Password({ path, checkPaths, errorMessage }: Props) {
     }
   };
 
-  useEffect(() => {
-    setLoading(false);
-  }, []);
-
-  if (loading)
-    return (
-      <div
-        className={cn(
-          "mx-auto h-full w-full max-w-md",
-          "flex flex-grow flex-col items-center justify-center gap-3",
-        )}
-      >
-        <Icon
-          name='LoaderCircle'
-          size={32}
-          className='animate-spin text-foreground'
-        />
-        <p>Checking password...</p>
-      </div>
-    );
+  if (loading) return <Loader message='Checking password...' />;
 
   return (
-    <div
-      className={cn(
-        "mx-auto h-full w-full max-w-md",
-        "flex flex-grow flex-col items-center justify-center gap-3",
-      )}
-    >
+    <div className={cn("mx-auto h-full w-full max-w-md", "flex flex-grow flex-col items-center justify-center gap-3")}>
       <img
         src='/images/undraw_vault.svg'
         alt='Password illustration'
@@ -110,9 +81,6 @@ export default function Password({ path, checkPaths, errorMessage }: Props) {
             ? "This site are password protected"
             : "The folder or file you are trying to access is password protected"}
         </h3>
-        {/* <span className='muted text-pretty text-center'>
-          Please enter the password to access the content
-        </span> */}
       </div>
 
       <form
@@ -136,7 +104,7 @@ export default function Password({ path, checkPaths, errorMessage }: Props) {
             <>
               <Icon
                 name='LoaderCircle'
-                size={16}
+                size={"1rem"}
                 className='animate-spin'
               />
               Loading...
@@ -146,12 +114,7 @@ export default function Password({ path, checkPaths, errorMessage }: Props) {
           )}
         </Button>
       </form>
-      <span
-        className={cn(
-          "muted text-pretty text-center text-red-500",
-          errorMessage ? "visible" : "invisible",
-        )}
-      >
+      <span className={cn("text-pretty text-center text-destructive", errorMessage ? "visible" : "invisible")}>
         {errorMessage || "Nothing wrong here, just a password wall"}
       </span>
     </div>
diff --git a/src/components/Layout/ResponsiveDropdown.tsx b/src/components/Layout/ResponsiveDropdown.tsx
new file mode 100644
index 0000000..33509b1
--- /dev/null
+++ b/src/components/Layout/ResponsiveDropdown.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import { icons } from "lucide-react";
+import { HTMLProps } from "react";
+
+import { Icon } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "~/components/ui/drawer";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "~/components/ui/dropdown-menu";
+import { Separator } from "~/components/ui/separator";
+
+import useMediaQuery from "~/hooks/useMediaQuery";
+
+type DropdownItem =
+  | {
+      type: "label";
+      key: string;
+      title: React.ReactNode;
+      className?: string;
+    }
+  | {
+      type: "separator";
+      key: string;
+      className?: string;
+    }
+  | {
+      type: "item";
+      key: string;
+      title: React.ReactNode;
+      onClick: (e: React.MouseEvent) => void;
+      disabled?: boolean;
+      icon?: keyof typeof icons;
+      className?: string;
+    }
+  | {
+      type: "checkbox";
+      key: string;
+      title: React.ReactNode;
+      checked: boolean;
+      onCheckedChange: (checked: boolean) => void;
+      disabled?: boolean;
+      className?: string;
+    }
+  | {
+      type: "radio";
+      key: string;
+      value: string;
+      onValueChange: (value: string) => void;
+      items: {
+        key: string;
+        value: string;
+        title: string;
+        className?: string;
+      }[];
+    };
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger: React.ReactNode;
+  mobile: {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    content: React.ReactNode;
+    closeOnFooter?: boolean;
+    footer?: React.ReactNode;
+  };
+  desktop: {
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+    placement?: "top" | "right" | "bottom" | "left";
+    placementOffset?: number;
+    items: DropdownItem[];
+  };
+} & HTMLProps<HTMLDivElement>;
+export default function ResponsiveDropdown({ open, onOpenChange, trigger, mobile, desktop, ...rest }: Props) {
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  return (
+    <div
+      slot='responsive-menu'
+      {...rest}
+    >
+      {isDesktop ? (
+        <DropdownMenu
+          open={open}
+          onOpenChange={onOpenChange}
+        >
+          <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+          <DropdownMenuContent
+            align={desktop.align}
+            alignOffset={desktop.alignOffset}
+            side={desktop.placement}
+            sideOffset={desktop.placementOffset}
+          >
+            {desktop.items.map((item, index) => {
+              switch (item.type) {
+                case "label":
+                  return (
+                    <DropdownMenuLabel
+                      key={item.key}
+                      className={item.className}
+                    >
+                      {item.title}
+                    </DropdownMenuLabel>
+                  );
+                case "separator":
+                  return (
+                    <DropdownMenuSeparator
+                      key={item.key}
+                      className={item.className}
+                    />
+                  );
+                case "checkbox":
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={item.key}
+                      checked={item.checked}
+                      onCheckedChange={item.onCheckedChange}
+                      disabled={item.disabled}
+                      className={item.className}
+                    >
+                      {item.title}
+                    </DropdownMenuCheckboxItem>
+                  );
+                case "radio":
+                  return (
+                    <DropdownMenuRadioGroup
+                      value={item.value}
+                      onValueChange={item.onValueChange}
+                    >
+                      {item.items.map((radio) => (
+                        <DropdownMenuRadioItem
+                          key={radio.key}
+                          value={radio.value}
+                          className={radio.className}
+                        >
+                          {radio.title}
+                        </DropdownMenuRadioItem>
+                      ))}
+                    </DropdownMenuRadioGroup>
+                  );
+                default:
+                  return (
+                    <DropdownMenuItem
+                      key={item.key}
+                      disabled={item.disabled}
+                      onClick={item.onClick}
+                      className={item.className}
+                    >
+                      {item.icon && (
+                        <Icon
+                          name={item.icon}
+                          size={"1rem"}
+                          className='mr-2'
+                        />
+                      )}
+                      {item.title}
+                    </DropdownMenuItem>
+                  );
+              }
+            })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ) : (
+        <Drawer
+          open={open}
+          onOpenChange={onOpenChange}
+          shouldScaleBackground
+        >
+          <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+          <DrawerContent>
+            {(mobile.title || mobile.description) && (
+              <DrawerHeader className='text-start'>
+                {mobile.title && <DrawerTitle>{mobile.title}</DrawerTitle>}
+                {mobile.description && <DrawerDescription>{mobile.description}</DrawerDescription>}
+              </DrawerHeader>
+            )}
+
+            <div className='grid gap-1.5 px-4'>{mobile.content}</div>
+
+            {(mobile.footer || mobile.closeOnFooter) && (
+              <DrawerFooter>
+                <Separator />
+                {mobile.footer}
+
+                {mobile.closeOnFooter && (
+                  <DrawerClose asChild>
+                    <Button
+                      size={"sm"}
+                      variant='secondary'
+                    >
+                      Close
+                    </Button>
+                  </DrawerClose>
+                )}
+              </DrawerFooter>
+            )}
+          </DrawerContent>
+        </Drawer>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/theme-provider.tsx b/src/components/Layout/ThemeProvider.tsx
similarity index 83%
rename from src/app/theme-provider.tsx
rename to src/components/Layout/ThemeProvider.tsx
index e77b9d0..8717913 100644
--- a/src/app/theme-provider.tsx
+++ b/src/components/Layout/ThemeProvider.tsx
@@ -4,18 +4,15 @@ import { ThemeProvider as NextThemeProvider } from "next-themes";
 import { type ThemeProviderProps } from "next-themes/dist/types";
 import NextTopLoader from "nextjs-toploader";
 import { Toaster } from "react-hot-toast";
-import { cn } from "~/utils";
 
 import { TooltipProvider } from "~/components/ui/tooltip";
 
 import LayoutProvider from "~/context/layoutContext";
+import { cn } from "~/utils/cn";
 
-import config from "~/config/gIndex.config";
+import config from "config";
 
-export default function ThemeProvider({
-  children,
-  ...props
-}: ThemeProviderProps) {
+export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
     <LayoutProvider>
       <NextTopLoader color='hsl(var(--primary))' />
@@ -39,8 +36,8 @@ export default function ThemeProvider({
           position={config.siteConfig.toaster?.position}
           toastOptions={{
             style: {
-              background: "hsl(var(--accent))",
-              color: "hsl(var(--accent-foreground))",
+              background: "hsl(var(--background))",
+              color: "hsl(var(--foreground))",
               borderRadius: "var(--radius)",
               border: "1px solid hsl(var(--border))",
             },
diff --git a/src/components/Layout/ToTop.tsx b/src/components/Layout/ToTop.tsx
new file mode 100644
index 0000000..cd401ce
--- /dev/null
+++ b/src/components/Layout/ToTop.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { Icon } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+
+import { cn } from "~/utils/cn";
+
+export default function ToTop() {
+  const [show, setShow] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handler = () => {
+      setShow(window.scrollY > 100);
+    };
+
+    window.addEventListener("scroll", handler);
+
+    return () => {
+      window.removeEventListener("scroll", handler);
+    };
+  }, []);
+
+  return (
+    <div
+      slot='to-top-fab'
+      className={cn(
+        "fixed bottom-6 right-6 z-10 transition",
+        show ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
+      )}
+    >
+      <Button
+        size={"icon"}
+        variant={"outline"}
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: "smooth" });
+        }}
+      >
+        <Icon
+          name='ChevronUp'
+          size='1rem'
+        />
+      </Button>
+    </div>
+  );
+}
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
new file mode 100644
index 0000000..6551fb5
--- /dev/null
+++ b/src/components/Layout/index.tsx
@@ -0,0 +1,6 @@
+export { default as Footer } from "./Footer";
+export { default as Navbar } from "./Navbar";
+export { default as NotFound } from "./NotFound";
+export { default as Password } from "./Password";
+export { default as ResponsiveDropdown } from "./ResponsiveDropdown";
+export { default as ThemeProvider } from "./ThemeProvider";
diff --git a/src/components/Preview/Audio.tsx b/src/components/Preview/Audio.tsx
new file mode 100644
index 0000000..40d9669
--- /dev/null
+++ b/src/components/Preview/Audio.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import "react-h5-audio-player/lib/styles.css";
+import { z } from "zod";
+
+import { Loader, Status } from "~/components/Global";
+
+import useLoading from "~/hooks/useLoading";
+
+import { Schema_File } from "~/types/schema";
+
+import { CreateDownloadToken } from "actions";
+
+const Plyr = dynamic(() => import("plyr-react"), {
+  ssr: false,
+  loading: () => <Loader message='Loading player...' />,
+});
+
+type Props = {
+  file: z.infer<typeof Schema_File>;
+};
+export default function PreviewAudio({ file }: Props) {
+  const [audioSrc, setAudioSrc] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  const loading = useLoading(async () => {
+    try {
+      if (!file.encryptedWebContentLink) {
+        setError("No audio to preview");
+        return;
+      }
+      const token = await CreateDownloadToken();
+      setAudioSrc(`/api/stream/${file.encryptedId}?token=${token}`);
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      setError(e.message);
+    }
+  }, [file]);
+
+  return (
+    <div className='flex h-full min-h-[33dvh] w-full items-center justify-center py-3'>
+      {loading ? (
+        <Loader message='Loading audio...' />
+      ) : error ? (
+        <Status
+          icon='TriangleAlert'
+          message={error}
+          destructive
+        />
+      ) : (
+        <div className='w-full'>
+          <Plyr
+            source={{
+              type: "audio",
+              sources: [
+                {
+                  src: audioSrc,
+                  type: file.mimeType,
+                  size: file.size,
+                },
+              ],
+              title: file.name,
+            }}
+            options={{
+              controls: [
+                "play-large",
+                "play",
+                "progress",
+                "current-time",
+                "duration",
+                "mute",
+                "volume",
+                "settings",
+                "fullscreen",
+              ],
+              volume: 0.5,
+              muted: false,
+              loop: {
+                active: false,
+              },
+              speed: {
+                selected: 1,
+                options: [0.5, 1, 1.5, 2],
+              },
+              keyboard: {
+                focused: true,
+                global: false,
+              },
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/@preview.doc.tsx b/src/components/Preview/Document.tsx
similarity index 51%
rename from src/app/@preview.doc.tsx
rename to src/components/Preview/Document.tsx
index 85c6ceb..9d994b0 100644
--- a/src/app/@preview.doc.tsx
+++ b/src/components/Preview/Document.tsx
@@ -1,21 +1,21 @@
 "use client";
 
 import DocViewer, { DocRenderer } from "@cyntler/react-doc-viewer";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { Icon, Loader, Status } from "~/components/Global";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 
-import config from "~/config/gIndex.config";
+import useLoading from "~/hooks/useLoading";
+import { cn } from "~/utils/cn";
 
-import { CreateDownloadToken } from "./actions";
+import { Schema_File } from "~/types/schema";
 
-const GoogleDocsViewerRenderer: DocRenderer = ({
-  mainState: { currentDocument, documentLoading },
-}) => {
+import { CreateDownloadToken } from "actions";
+import config from "config";
+
+const GoogleDocsViewerRenderer: DocRenderer = ({ mainState: { currentDocument, documentLoading } }) => {
   if (!currentDocument || !currentDocument.uri) return null;
 
   const viewerUrl = new URL(`/gview`, "https://docs.google.com");
@@ -23,21 +23,7 @@ const GoogleDocsViewerRenderer: DocRenderer = ({
   viewerUrl.searchParams.set("embedded", "true");
 
   if (documentLoading) {
-    return (
-      <div
-        className={cn(
-          "h-auto min-h-[50dvh] w-full",
-          "flex flex-grow flex-col items-center justify-center gap-3",
-        )}
-      >
-        <Icon
-          name='LoaderCircle'
-          size={32}
-          className='animate-spin text-foreground'
-        />
-        <p>Loading document...</p>
-      </div>
-    );
+    return <Loader message='Loading document...' />;
   }
 
   return (
@@ -70,60 +56,53 @@ type Props = {
 
 export default function PreviewDoc({ file }: Props) {
   const [docSrc, setDocSrc] = useState<string>("");
-  const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string>("");
 
-  useEffect(() => {
-    (async () => {
-      try {
-        if (!file.encryptedWebContentLink) {
-          setError("Nothing to preview");
-          return;
-        }
-        const token = await CreateDownloadToken();
-        const streamURL = new URL(
-          `/api/stream/${file.encryptedId}`,
-          config.basePath,
-        );
-        streamURL.searchParams.set("token", token);
-        setDocSrc(streamURL.toString());
-      } catch (error) {
-        const e = error as Error;
-        console.error(e);
-        setError(e.message);
-      } finally {
-        setLoading(false);
+  const loading = useLoading(async () => {
+    try {
+      if (!file.encryptedWebContentLink) {
+        setError("Nothing to preview");
+        return;
       }
-    })();
+      const token = await CreateDownloadToken();
+      const streamURL = new URL(`/api/stream/${file.encryptedId}`, config.basePath);
+      streamURL.searchParams.set("token", token);
+      setDocSrc(streamURL.toString());
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      setError(e.message);
+    }
   }, [file]);
 
   return (
     <div className='flex h-full min-h-[33dvh] w-full items-center justify-center py-3'>
       {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[50dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Loading document...</p>
-        </div>
+        <Loader message='Loading document...' />
       ) : error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-3'>
-          <Icon
-            name='CircleX'
-            size={24}
-            className='text-destructive'
-          />
-          <span className='text-center text-destructive'>{error}</span>
-        </div>
+        <Status
+          icon='TriangleAlert'
+          message={error}
+          destructive
+        />
       ) : (
         <div className='h-fit w-full space-y-3 overflow-hidden rounded-[var(--radius)]'>
+          <Alert className='bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-500'>
+            <div className='flex items-start gap-3'>
+              <Icon
+                name='TriangleAlert'
+                className='size-5'
+              />
+              <div className='flex flex-col'>
+                <AlertTitle>Preview Only</AlertTitle>
+                <AlertDescription>
+                  It might failed to load the document, you can try to refresh the page or download the document to view
+                  it.
+                </AlertDescription>
+              </div>
+            </div>
+          </Alert>
+
           <DocViewer
             key={file.encryptedId}
             documents={[
@@ -139,35 +118,16 @@ export default function PreviewDoc({ file }: Props) {
                 disableHeader: true,
               },
               loadingRenderer: {
-                overrideComponent: () => (
-                  <div
-                    className={cn(
-                      "h-auto min-h-[50dvh] w-full",
-                      "flex flex-grow flex-col items-center justify-center gap-3",
-                    )}
-                  >
-                    <Icon
-                      name='LoaderCircle'
-                      size={32}
-                      className='animate-spin text-foreground'
-                    />
-                    <p>Loading document...</p>
-                  </div>
-                ),
+                overrideComponent: () => <Loader message='Loading document...' />,
                 showLoadingTimeout: 10000,
               },
               noRenderer: {
                 overrideComponent: () => (
-                  <div className='flex h-full flex-col items-center justify-center gap-3'>
-                    <Icon
-                      name='CircleX'
-                      size={24}
-                      className='text-destructive'
-                    />
-                    <span className='text-center text-destructive'>
-                      Error loading document
-                    </span>
-                  </div>
+                  <Status
+                    icon='CircleX'
+                    message='Failed to load document'
+                    destructive
+                  />
                 ),
               },
             }}
@@ -179,22 +139,6 @@ export default function PreviewDoc({ file }: Props) {
               disableThemeScrollbar: true,
             }}
           />
-
-          <Alert className='bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-500'>
-            <div className='flex items-start gap-3'>
-              <Icon
-                name='TriangleAlert'
-                className='size-5'
-              />
-              <div className='flex flex-col'>
-                <AlertTitle>Preview Only</AlertTitle>
-                <AlertDescription>
-                  It might failed to load the document, you can try to refresh
-                  the page or download the document to view it.
-                </AlertDescription>
-              </div>
-            </div>
-          </Alert>
         </div>
       )}
     </div>
diff --git a/src/components/Preview/Image.tsx b/src/components/Preview/Image.tsx
new file mode 100644
index 0000000..2dd8e50
--- /dev/null
+++ b/src/components/Preview/Image.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { z } from "zod";
+
+import { Icon, Loader, Status } from "~/components/Global";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+
+import useLoading from "~/hooks/useLoading";
+import { cn } from "~/utils/cn";
+
+import { Schema_File } from "~/types/schema";
+
+import { CreateDownloadToken } from "actions";
+import config from "config";
+
+type Props = {
+  file: z.infer<typeof Schema_File>;
+};
+export default function PreviewImage({ file }: Props) {
+  const [imgSrc, setImgSrc] = useState<string>(`/api/thumb/${file.encryptedId}?size=4`);
+  const [imgLoaded, setImgLoaded] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const loading = useLoading(async () => {
+    try {
+      if (!file.encryptedWebContentLink) {
+        setError("No image to preview");
+        return;
+      }
+      const token = await CreateDownloadToken();
+
+      const streamURL = new URL(`/api/thumb/${file.encryptedId}?size=1000`, config.basePath);
+      streamURL.searchParams.set("token", token);
+      fetch(streamURL, {
+        headers: {
+          Range: `bytes=0-${(file.size || 1) - 1}`,
+        },
+      })
+        .then((res) => {
+          if (!res.ok) {
+            throw new Error("Could not load image");
+          }
+          return res.blob();
+        })
+        .then((blob) => {
+          const urlobject = URL.createObjectURL(blob);
+          setImgSrc(urlobject);
+          const timeout = setTimeout(() => {
+            setImgLoaded(true);
+            clearTimeout(timeout);
+          }, 150); // Add a delay to show the image
+        });
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      setError(e.message);
+    }
+  }, [file]);
+
+  return (
+    <div className='flex min-h-[33dvh] w-full items-center justify-center py-3'>
+      {loading ? (
+        <Loader message='Loading image...' />
+      ) : error ? (
+        <Status
+          icon='TriangleAlert'
+          message={error}
+          destructive
+        />
+      ) : (
+        <div className='h-fit w-full space-y-3 overflow-hidden'>
+          <Alert className='bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-500'>
+            <div className='flex items-start gap-3'>
+              <Icon
+                name='TriangleAlert'
+                className='size-5'
+              />
+              <div className='flex flex-col'>
+                <AlertTitle>Preview Only</AlertTitle>
+                <AlertDescription>
+                  This image is a preview and may not be the full resolution. Please download the file for the full
+                  resolution.
+                </AlertDescription>
+              </div>
+            </div>
+          </Alert>
+
+          <img
+            src={imgSrc}
+            alt={file.name}
+            className={cn(
+              "h-full max-h-[70dvh] w-full rounded-[var(--radius)] bg-muted object-contain object-center transition",
+              imgLoaded ? "blur-none" : "animate-pulse blur",
+            )}
+            onError={(e) => {
+              console.error(e);
+              setError("Could not preview this image, try downloading the file");
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/@preview.action.tsx b/src/components/Preview/Information.tsx
similarity index 75%
rename from src/app/@preview.action.tsx
rename to src/components/Preview/Information.tsx
index cd46359..dc5a0f3 100644
--- a/src/app/@preview.action.tsx
+++ b/src/components/Preview/Information.tsx
@@ -5,43 +5,33 @@ import { usePathname } from "next/navigation";
 import { useMemo, useState } from "react";
 import toast from "react-hot-toast";
 import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { ButtonLoading } from "~/components/Global";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Dialog, DialogContent, DialogTrigger } from "~/components/ui/dialog";
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTrigger,
-} from "~/components/ui/drawer";
+import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTrigger } from "~/components/ui/drawer";
 import { Separator } from "~/components/ui/separator";
 
 import useMediaQuery from "~/hooks/useMediaQuery";
-import bytesToReadable from "~/utils/bytesFormat";
+import { bytesToReadable } from "~/utils/bytesFormat";
+import { cn } from "~/utils/cn";
 import { durationToReadable } from "~/utils/durationFormat";
 import { getFileType } from "~/utils/previewHelper";
 
-import config from "~/config/gIndex.config";
+import { ButtonState, Schema_File } from "~/types/schema";
 
-import { CreateDownloadToken } from "./actions";
+import { CreateDownloadToken } from "actions";
+import config from "config";
 
 type Props = {
   file: z.infer<typeof Schema_File>;
 };
-export default function PreviewAction({ file }: Props) {
+export default function PreviewInformation({ file }: Props) {
   const pathname = usePathname();
+
   const showRaw = useMemo<boolean>(() => {
-    return (
-      file.mimeType.startsWith("image") ||
-      file.mimeType.startsWith("video") ||
-      file.mimeType.startsWith("audio")
-    );
+    return file.mimeType.startsWith("image") || file.mimeType.startsWith("video") || file.mimeType.startsWith("audio");
   }, [file]);
   const showViewDoc = useMemo<boolean>(() => {
     const fileExtensionFallback = file.name.split(".").pop();
@@ -63,7 +53,7 @@ export default function PreviewAction({ file }: Props) {
       },
       {
         label: "Size",
-        value: bytesToReadable(file.size || 0),
+        value: `${bytesToReadable(file.size || 0)} (${file.size || 0} bytes)`,
       },
       {
         label: "Last Modified",
@@ -90,29 +80,33 @@ export default function PreviewAction({ file }: Props) {
     return value;
   }, [file]);
 
-  const [downloading, setDownloading] = useState<boolean>(false);
-  const [diffOpen, setDiffOpen] = useState<boolean>(false);
+  const [viewerState, setViewerState] = useState<ButtonState>("idle");
+  const [copyRawState, setCopyRawState] = useState<ButtonState>("idle");
+  const [copyDownloadState, setCopyDownloadState] = useState<ButtonState>("idle");
+  const [downloadState, setDownloadState] = useState<ButtonState>("idle");
+  const [isRawExplanationOpen, setIsRawExplanationOpen] = useState<boolean>(false);
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
   const onCopyRaw = async () => {
+    setCopyRawState("loading");
     try {
-      const rawURL = new URL(
-        `/api/raw/${pathname}`.replace(/\/+/g, "/"),
-        config.basePath,
-      );
+      const rawURL = new URL(`/api/raw/${pathname}`.replace(/\/+/g, "/"), config.basePath);
       rawURL.searchParams.append("token", file.encryptedId);
       toast.promise(navigator.clipboard.writeText(rawURL.toString()), {
         loading: "Copying link...",
-        success: "Link copied!",
+        success: "Raw link copied!",
         error: "Failed to copy link",
       });
     } catch (error) {
       const e = error as Error;
       console.error(e.message);
+    } finally {
+      setCopyRawState("idle");
     }
   };
   const onCopy = async (e: React.MouseEvent) => {
     e.stopPropagation();
+    setCopyDownloadState("loading");
     toast.loading("Creating download token...", {
       id: `download-${file.encryptedId}`,
     });
@@ -120,12 +114,9 @@ export default function PreviewAction({ file }: Props) {
       const token = await CreateDownloadToken();
       if (!token) throw new Error("Failed to create download token");
       await navigator.clipboard.writeText(
-        new URL(
-          `/api/download/${file.encryptedId}?token=${token}`,
-          config.basePath,
-        ).toString(),
+        new URL(`/api/download/${file.encryptedId}?token=${token}`, config.basePath).toString(),
       );
-      toast.success("Link copied...", {
+      toast.success("Download link copied!", {
         id: `download-${file.encryptedId}`,
       });
     } catch (error) {
@@ -134,11 +125,13 @@ export default function PreviewAction({ file }: Props) {
       toast.error(e.message, {
         id: `download-${file.encryptedId}`,
       });
+    } finally {
+      setCopyDownloadState("idle");
     }
   };
   const onDownload = async (e: React.MouseEvent) => {
     e.stopPropagation();
-    setDownloading(true);
+    setDownloadState("loading");
     toast.loading("Creating download token...", {
       id: `download-${file.encryptedId}`,
     });
@@ -152,15 +145,15 @@ export default function PreviewAction({ file }: Props) {
       const timeout = setTimeout(() => {
         clearTimeout(timeout);
         window.open(`/api/download/${file.encryptedId}?token=${token}`);
-        setDownloading(false);
-      }, 1000);
+      }, 250);
     } catch (error) {
       const e = error as Error;
       console.error(e.message);
       toast.error(e.message, {
         id: `download-${file.encryptedId}`,
       });
-      setDownloading(false);
+    } finally {
+      setDownloadState("idle");
     }
   };
   const onOpenViewer = async (e: React.MouseEvent) => {
@@ -168,13 +161,11 @@ export default function PreviewAction({ file }: Props) {
     toast.loading("Creating view token...", {
       id: `view-${file.encryptedId}`,
     });
+    setViewerState("loading");
     try {
       const token = await CreateDownloadToken();
       if (!token) throw new Error("Failed to create view token");
-      const streamURL = new URL(
-        `/api/stream/${file.encryptedId}`,
-        config.basePath,
-      );
+      const streamURL = new URL(`/api/stream/${file.encryptedId}`, config.basePath);
       streamURL.searchParams.set("token", token);
       toast.success("Opening viewer link...", {
         id: `view-${file.encryptedId}`,
@@ -186,13 +177,15 @@ export default function PreviewAction({ file }: Props) {
         viewerUrl.searchParams.set("url", streamURL.toString());
         viewerUrl.searchParams.set("embedded", "true");
         window.open(viewerUrl.toString(), "_blank");
-      }, 150);
+      }, 250);
     } catch (error) {
       const e = error as Error;
       console.error(e.message);
       toast.error(e.message, {
         id: `view-${file.encryptedId}`,
       });
+    } finally {
+      setViewerState("idle");
     }
   };
 
@@ -200,11 +193,14 @@ export default function PreviewAction({ file }: Props) {
     <div className='grid grid-cols-1 gap-3'>
       <Card slot='file-actions'>
         <div className='flex flex-col-reverse gap-3 p-6 tablet:flex-row tablet:items-center tablet:justify-between'>
-          <div className={cn("flex gap-3", !showRaw && "invisible")}>
+          <div
+            slot='raw-explanation'
+            className={cn("flex gap-3", !showRaw && "invisible")}
+          >
             {isDesktop ? (
               <Dialog
-                open={diffOpen}
-                onOpenChange={setDiffOpen}
+                open={isRawExplanationOpen}
+                onOpenChange={setIsRawExplanationOpen}
               >
                 <DialogTrigger asChild>
                   <span className='cursor-pointer text-center text-sm text-blue-600 opacity-80 transition-all duration-300 hover:opacity-100 dark:text-blue-400 tablet:text-start'>
@@ -215,26 +211,20 @@ export default function PreviewAction({ file }: Props) {
                   <div className='flex h-fit flex-col gap-3'>
                     <h4>Why?</h4>
                     <p>
-                      Some services need the file extension to be present in the
-                      URL to properly embed the file.
+                      Some services need the file extension to be present in the URL to properly embed the file.
                       <br />
                       - The download link only have encrypted file id.
                       <br />
-                      - The raw link will have the whole path includes the file
-                      name and extension.
+                      - The raw link will have the whole path includes the file name and extension.
                       <br />
                       <br />
-                      So if you want to embed the file, it&apos;s recommended to
-                      use the raw link instead of the download link.
-                    </p>
-                    <p className='muted'>
-                      Note: This is only applicable for video, audio, and image
-                      files.
+                      So if you want to embed the file, it&apos;s recommended to use the raw link instead of the
+                      download link.
                     </p>
+                    <p className='muted'>Note: This is only applicable for video, audio, and image files.</p>
                     <h4>Ref</h4>
                     <p>
-                      This information is based on the onedrive-vercel-index
-                      project documentation.
+                      This information is based on the onedrive-vercel-index project documentation.
                       <br />
                       <Link
                         href='https://ovi.swo.moe/docs/features/customise-direct-link'
@@ -250,8 +240,8 @@ export default function PreviewAction({ file }: Props) {
               </Dialog>
             ) : (
               <Drawer
-                open={diffOpen}
-                onOpenChange={setDiffOpen}
+                open={isRawExplanationOpen}
+                onOpenChange={setIsRawExplanationOpen}
                 shouldScaleBackground
               >
                 <DrawerTrigger asChild>
@@ -264,22 +254,19 @@ export default function PreviewAction({ file }: Props) {
                   <div className='flex h-fit flex-col gap-3 px-4'>
                     <h4>Why?</h4>
                     <p>
-                      Some services need the file extension to be present in the
-                      URL to properly embed the file.
+                      Some services need the file extension to be present in the URL to properly embed the file.
                       <br />
                       - The download link only have encrypted file id.
                       <br />
-                      - The raw link will have the whole path includes the file
-                      name and extension.
+                      - The raw link will have the whole path includes the file name and extension.
                       <br />
                       <br />
-                      So if you want to embed the file, it&apos;s recommended to
-                      use the raw link instead of the download link.
+                      So if you want to embed the file, it&apos;s recommended to use the raw link instead of the
+                      download link.
                     </p>
                     <h4>Ref</h4>
                     <p>
-                      This information is based on the onedrive-vercel-index
-                      project documentation.
+                      This information is based on the onedrive-vercel-index project documentation.
                       <br />
                       <Link
                         href='https://ovi.swo.moe/docs/features/customise-direct-link'
@@ -305,78 +292,66 @@ export default function PreviewAction({ file }: Props) {
               </Drawer>
             )}
           </div>
+
           <div className='flex flex-col-reverse gap-3 tablet:flex-row tablet:items-center'>
             {showRaw ? (
-              <Button
+              <ButtonLoading
                 size={"sm"}
                 variant={"outline"}
-                className='gap-3'
+                icon='Copy'
                 onClick={onCopyRaw}
+                state={copyRawState}
               >
-                <Icon
-                  name='Copy'
-                  size={16}
-                />
                 Raw Link
-              </Button>
+              </ButtonLoading>
             ) : null}
             {showViewDoc ? (
-              <Button
+              <ButtonLoading
                 size={"sm"}
                 variant={"outline"}
-                className='gap-3'
+                icon='ExternalLink'
                 onClick={onOpenViewer}
+                state={viewerState}
               >
-                <Icon
-                  name='ExternalLink'
-                  size={16}
-                />
                 Open in Viewer
-              </Button>
+              </ButtonLoading>
             ) : null}
-            <Button
+
+            <ButtonLoading
               size={"sm"}
               variant={"outline"}
-              className='gap-3'
               onClick={onCopy}
+              state={copyDownloadState}
+              icon={"Copy"}
             >
-              <Icon
-                name='Copy'
-                size={16}
-              />
               Download Link
-            </Button>
-            <Button
+            </ButtonLoading>
+
+            <ButtonLoading
               size={"sm"}
-              className='gap-3'
               onClick={onDownload}
-              disabled={downloading}
+              state={downloadState}
+              icon='Download'
             >
-              <Icon
-                name={downloading ? "LoaderCircle" : "Download"}
-                size={16}
-                className={cn(downloading && "animate-spin")}
-              />
               Download
-            </Button>
+            </ButtonLoading>
           </div>
         </div>
       </Card>
+
       <Card slot='file-info'>
         <CardHeader>
           <CardTitle>File Information</CardTitle>
         </CardHeader>
         <CardContent>
-          <div className='flex flex-col'>
+          <div className='flex flex-col gap-1.5'>
             {fileInfo.map((info) => (
               <div
                 key={info.label}
                 className='group flex flex-col'
               >
-                <span className='font-semibold'>{info.label}:</span>
-                <span className='col-span-3 whitespace-pre-wrap break-all'>
-                  {info.value}
-                </span>
+                <span className='text-sm font-semibold'>{info.label}:</span>
+                <span className='col-span-3 whitespace-pre-wrap break-all'>{info.value}</span>
                 <Separator className='my-1.5 group-last-of-type:hidden' />
               </div>
             ))}
diff --git a/src/components/Preview/Layout.tsx b/src/components/Preview/Layout.tsx
new file mode 100644
index 0000000..3c8a0c6
--- /dev/null
+++ b/src/components/Preview/Layout.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import { z } from "zod";
+
+import { Status } from "~/components/Global";
+import {
+  PreviewAudio,
+  PreviewDocument,
+  PreviewImage,
+  PreviewInformation,
+  PreviewManga,
+  PreviewRich,
+  PreviewUnknown,
+  PreviewVideo,
+} from "~/components/Preview";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+import { Separator } from "~/components/ui/separator";
+
+import { cn } from "~/utils/cn";
+import { getFileType } from "~/utils/previewHelper";
+
+import { Schema_File } from "~/types/schema";
+
+import config from "config";
+
+type Props = {
+  data: z.infer<typeof Schema_File>;
+  fileType: "unknown" | ReturnType<typeof getFileType>;
+};
+export default function PreviewLayout({ data, fileType }: Props) {
+  const [view, setView] = useState<"markdown" | "raw">("markdown");
+  return (
+    <div
+      slot='preview-container'
+      className='flex flex-col gap-3'
+    >
+      <Card>
+        <CardHeader className='pb-0'>
+          <div
+            className={cn(
+              "flex flex-col gap-3 overflow-hidden",
+              "mobile:flex-row mobile:items-center mobile:justify-between",
+            )}
+          >
+            <h3 className='line-clamp-1 flex-grow whitespace-pre-wrap break-all'>{data.name}</h3>
+            {["text", "markdown", "code"].includes(fileType) && (
+              <div className='flex w-full items-center mobile:w-fit'>
+                <Button
+                  size={"sm"}
+                  variant={view === "markdown" ? "default" : "outline"}
+                  onClick={() => setView("markdown")}
+                  className='w-full rounded-r-none mobile:w-fit'
+                >
+                  Markdown
+                </Button>
+                <Button
+                  size={"sm"}
+                  variant={view === "raw" ? "default" : "outline"}
+                  onClick={() => setView("raw")}
+                  className='w-full rounded-l-none mobile:w-fit'
+                >
+                  Raw
+                </Button>
+              </div>
+            )}
+          </div>
+          <Separator />
+        </CardHeader>
+
+        <CardContent className='p-1.5 pt-0 tablet:p-3 tablet:pt-0'>
+          {config.apiConfig.streamMaxSize && Number(data.size || 0) > config.apiConfig.streamMaxSize ? (
+            <Status
+              icon='Frown'
+              message='File is too large to preview'
+            />
+          ) : (
+            <div className='px-3'>
+              {fileType === "image" ? (
+                <PreviewImage file={data} />
+              ) : fileType === "audio" ? (
+                <PreviewAudio file={data} />
+              ) : fileType === "video" ? (
+                <PreviewVideo file={data} />
+              ) : fileType === "code" ? (
+                <PreviewRich
+                  file={data}
+                  code
+                  view={view}
+                />
+              ) : fileType === "text" ? (
+                <PreviewRich
+                  file={data}
+                  view={view}
+                />
+              ) : fileType === "markdown" ? (
+                <PreviewRich
+                  file={data}
+                  view={view}
+                />
+              ) : fileType === "document" ? (
+                <PreviewDocument file={data} />
+              ) : fileType === "pdf" ? (
+                <PreviewDocument file={data} />
+              ) : fileType === "manga" ? (
+                <PreviewManga file={data} />
+              ) : (
+                <PreviewUnknown />
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <PreviewInformation file={data} />
+    </div>
+  );
+}
diff --git a/src/app/@preview.manga.tsx b/src/components/Preview/Manga.tsx
similarity index 64%
rename from src/app/@preview.manga.tsx
rename to src/components/Preview/Manga.tsx
index bf07b07..3a19367 100644
--- a/src/app/@preview.manga.tsx
+++ b/src/components/Preview/Manga.tsx
@@ -3,10 +3,8 @@
 import { AsyncUnzipInflate, Unzip } from "fflate";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
-import { Schema_File } from "~/schema";
-import { cn } from "~/utils";
 
-import Icon from "~/components/Icon";
+import { Icon, Loader, Status } from "~/components/Global";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import {
@@ -20,10 +18,12 @@ import {
 import { Progress } from "~/components/ui/progress";
 
 import useMediaQuery from "~/hooks/useMediaQuery";
+import { cn } from "~/utils/cn";
 
-import config from "~/config/gIndex.config";
+import { Schema_File } from "~/types/schema";
 
-import { CreateDownloadToken } from "./actions";
+import { CreateDownloadToken } from "actions";
+import config from "config";
 
 type Props = {
   file: z.infer<typeof Schema_File>;
@@ -38,7 +38,7 @@ export default function PreviewManga({ file }: Props) {
   const [api, setApi] = useState<CarouselApi>();
 
   const [loadedPercent, setLoadedPercent] = useState<number>(0);
-  const [loadFirstX, setLoadFirstX] = useState<number>(5); // 5MB
+  const [loadFirstX] = useState<number>(5); // 5MB
 
   const abortController = useRef<AbortController>(new AbortController());
 
@@ -55,18 +55,13 @@ export default function PreviewManga({ file }: Props) {
           return;
         }
         const token = await CreateDownloadToken();
-        const streamURL = new URL(
-          `/api/stream/${file.encryptedId}`,
-          config.basePath,
-        );
+        const streamURL = new URL(`/api/stream/${file.encryptedId}`, config.basePath);
         streamURL.searchParams.set("token", token);
 
         const bufferStream = await fetch(streamURL, {
           signal: abortController.current.signal,
           headers: {
-            Range: `bytes=0-${
-              Math.min(Number(file.size || 1), loadFirstX * 1024 * 1024) - 1
-            }`,
+            Range: `bytes=0-${Math.min(Number(file.size || 1), loadFirstX * 1024 * 1024) - 1}`,
           },
         });
 
@@ -105,12 +100,7 @@ export default function PreviewManga({ file }: Props) {
             file.ondata = (err, data, final) => {
               if (err) throw err;
               // Check if the file is an image
-              if (
-                !file.name
-                  .toLowerCase()
-                  .includes(".jpg" || ".jpeg" || ".png" || ".gif" || ".webp")
-              )
-                return;
+              if (!file.name.toLowerCase().includes(".jpg" || ".jpeg" || ".png" || ".gif" || ".webp")) return;
               if (!final) return; // Skip if not fully loaded
 
               const blob = new Blob([data]);
@@ -119,10 +109,7 @@ export default function PreviewManga({ file }: Props) {
                 setImages((prev) => {
                   const exist = prev.find((p) => p.name === file.name);
                   if (exist) return prev;
-                  return [
-                    ...prev,
-                    { name: file.name, blob: reader.result as string },
-                  ];
+                  return [...prev, { name: file.name, blob: reader.result as string }];
                 });
               };
               reader.readAsDataURL(blob);
@@ -140,10 +127,6 @@ export default function PreviewManga({ file }: Props) {
         setLoading(false);
       }
     })();
-
-    // return () => {
-    //   abortController.current.abort("Cancelled by user");
-    // };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -159,60 +142,62 @@ export default function PreviewManga({ file }: Props) {
   return (
     <div className='flex h-full min-h-[33dvh] w-full items-center justify-center py-3'>
       {loading ? (
-        <div
-          className={cn(
-            "h-auto min-h-[50dvh] w-full",
-            "flex flex-grow flex-col items-center justify-center gap-3",
-          )}
-        >
-          <Icon
-            name='LoaderCircle'
-            size={32}
-            className='animate-spin text-foreground'
-          />
-          <p>Please wait while we downloading the content for preview</p>
-          <div className='flex w-full max-w-sm flex-col gap-1'>
-            <Progress
-              className='h-2 w-full'
-              value={loadedPercent}
-            />
-            <span className='text-center text-xs text-muted-foreground'>
-              {Math.round(loadedPercent)}% loaded
-            </span>
-          </div>
-          <Button
-            size={"sm"}
-            variant={"secondary"}
-            onClick={async () => {
-              abortController.current.abort("Cancelled by user");
-
-              const timeout = setTimeout(() => {
-                setLoading(false);
-                setError("Preview cancelled by user");
-                clearTimeout(timeout);
-              }, 100);
-            }}
-          >
-            Cancel Preview
-          </Button>
-        </div>
+        <Loader
+          message='Please wait while we downloading the content for preview'
+          extra={
+            <div className='flex w-full max-w-sm flex-col items-center gap-1'>
+              <Progress
+                className='h-2 w-full'
+                value={loadedPercent}
+              />
+              <span className='text-center text-xs text-muted-foreground'>{Math.round(loadedPercent)}% loaded</span>
+              <Button
+                size={"sm"}
+                variant={"secondary"}
+                onClick={async () => {
+                  abortController.current.abort("Cancelled by user");
+                  const timeout = setTimeout(() => {
+                    setLoading(false);
+                    setError("Preview cancelled by user");
+                    clearTimeout(timeout);
+                  }, 100);
+                }}
+              >
+                Cancel Preview
+              </Button>
+            </div>
+          }
+        />
       ) : error ? (
-        <div className='flex h-full flex-col items-center justify-center gap-3'>
-          <Icon
-            name='CircleX'
-            size={24}
-            className='text-destructive'
-          />
-          <span className='text-center text-destructive'>{error}</span>
-        </div>
+        <Status
+          icon='TriangleAlert'
+          message={error}
+          destructive
+        />
       ) : (
         <div className='flex w-full flex-col items-center justify-center gap-3'>
-          <div className='h-full w-full tablet:px-8'>
+          <Alert className='bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-500'>
+            <div className='flex items-start gap-3'>
+              <Icon
+                name='TriangleAlert'
+                className='size-5'
+              />
+              <div className='flex flex-col'>
+                <AlertTitle>Preview Only</AlertTitle>
+                <AlertDescription>
+                  We only load the first {loadFirstX}MB of the file for preview. Please download the file for full
+                  content.
+                </AlertDescription>
+              </div>
+            </div>
+          </Alert>
+
+          <div
+            slot='manga-content'
+            className='h-full w-full tablet:px-8'
+          >
             <Carousel
-              className={cn(
-                "w-full",
-                viewSize === "fit" ? "h-full max-h-[70dvh]" : "h-full",
-              )}
+              className={cn("w-full", viewSize === "fit" ? "h-full max-h-[70dvh]" : "h-full")}
               opts={{
                 loop: false,
               }}
@@ -229,16 +214,9 @@ export default function PreviewManga({ file }: Props) {
                       <img
                         src={image.blob}
                         alt={`${image.name} - Page ${index + 1}`}
-                        className={cn(
-                          "w-full object-contain",
-                          viewSize === "fit"
-                            ? "h-full max-h-[70dvh]"
-                            : "h-full",
-                        )}
+                        className={cn("w-full object-contain", viewSize === "fit" ? "h-full max-h-[70dvh]" : "h-full")}
                       />
-                      <span className='muted text-center text-xs'>
-                        {image.name}
-                      </span>
+                      <span className='muted text-center text-xs'>{image.name}</span>
                     </CarouselItem>
                   ))}
               </CarouselContent>
@@ -250,8 +228,11 @@ export default function PreviewManga({ file }: Props) {
               ) : null}
             </Carousel>
           </div>
-          <div className='flex w-full items-center justify-end gap-3'>
-            <span className='text-primary-foreground'>
+          <div
+            slot='manga-info'
+            className='flex w-full items-center justify-end gap-3'
+          >
+            <span className='text-muted-foreground'>
               {currentImage}/{images.length}
             </span>
             <Button
@@ -270,32 +251,7 @@ export default function PreviewManga({ file }: Props) {
                 size={16}
               />
             </Button>
-            {/* <div
-              className='relative z-10 cursor-pointer p-0.5 text-foreground/80 transition hover:text-foreground'
-              onClick={() => setViewSize(viewSize === "fit" ? "full" : "fit")}
-            >
-              <Icon
-                name={viewSize === "fit" ? "Maximize" : "Minimize"}
-                size={14}
-              />
-            </div> */}
           </div>
-
-          <Alert className='bg-yellow-50 text-yellow-600 dark:bg-yellow-950 dark:text-yellow-500'>
-            <div className='flex items-start gap-3'>
-              <Icon
-                name='TriangleAlert'
-                className='size-5'
-              />
-              <div className='flex flex-col'>
-                <AlertTitle>Preview Only</AlertTitle>
-                <AlertDescription>
-                  We only load the first {loadFirstX}MB of the file for preview.
-                  Please download the file for full content.
-                </AlertDescription>
-              </div>
-            </div>
-          </Alert>
         </div>
       )}
     </div>
diff --git a/src/components/Preview/Rich.tsx b/src/components/Preview/Rich.tsx
new file mode 100644
index 0000000..1851769
--- /dev/null
+++ b/src/components/Preview/Rich.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { z } from "zod";
+
+import { Icon, Loader, Markdown, Status } from "~/components/Global";
+import { Button } from "~/components/ui/button";
+
+import useLoading from "~/hooks/useLoading";
+import { cn } from "~/utils/cn";
+
+import { Schema_File } from "~/types/schema";
+
+import { GetContent } from "actions";
+
+type Props = {
+  file: z.infer<typeof Schema_File>;
+  view: "markdown" | "raw";
+  code?: boolean;
+};
+export default function PreviewRich({ file, code, view }: Props) {
+  const [content, setContent] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [expand, setExpand] = useState<boolean>(false);
+
+  const loading = useLoading(async () => {
+    try {
+      const text = await GetContent(file.encryptedId);
+      if (!text) {
+        setError("Looks like there is no content to preview");
+        return;
+      }
+      setContent(text.trim());
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      setError(e.message);
+    }
+  }, [file]);
+
+  return (
+    <div className='flex h-fit min-h-[33dvh] w-full items-center justify-center py-3'>
+      {loading ? (
+        <Loader message='Loading content...' />
+      ) : error ? (
+        <Status
+          icon='TriangleAlert'
+          message={error}
+          destructive
+        />
+      ) : (
+        <div className={cn("relative w-full overflow-hidden", expand ? "h-full" : "max-h-[50dvh]")}>
+          <div
+            className={cn(
+              "w-full overflow-hidden",
+              expand
+                ? "[mask-image:linear-gradient(180deg,white_65%,white] h-full"
+                : "h-[50dvh] max-h-[50dvh] [mask-image:linear-gradient(180deg,white_65%,rgba(255,255,255,0))]",
+            )}
+          >
+            <Markdown
+              content={code && view === "markdown" ? `\`\`\`${file.fileExtension}\n${content}` : content}
+              view={view}
+            />
+          </div>
+          <div
+            className={cn(
+              "bottom-0 z-10 flex w-full items-center justify-center py-3 transition",
+              expand ? "relative" : "absolute",
+            )}
+          >
+            <Button
+              size={"sm"}
+              variant={"secondary"}
+              className='gap-1.5'
+              onClick={() => {
+                setExpand((prev) => !prev);
+              }}
+            >
+              <Icon
+                name={expand ? "ChevronUp" : "ChevronDown"}
+                size={16}
+              />
+              {expand ? "Collapse" : "Expand"}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Preview/Unknown.tsx b/src/components/Preview/Unknown.tsx
new file mode 100644
index 0000000..4c89b13
--- /dev/null
+++ b/src/components/Preview/Unknown.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Loader, Status } from "~/components/Global";
+
+import useLoading from "~/hooks/useLoading";
+
+export default function PreviewUnknown() {
+  const loading = useLoading();
+
+  if (loading) return <Loader message='Loading content...' />;
+
+  return (
+    <Status
+      icon='Frown'
+      message='This file type is not supported for preview, try downloading the file instead.'
+    />
+  );
+}
diff --git a/src/components/Preview/Video.tsx b/src/components/Preview/Video.tsx
new file mode 100644
index 0000000..8cfceaa
--- /dev/null
+++ b/src/components/Preview/Video.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { z } from "zod";
+
+import { Loader, Status } from "~/components/Global";
+
+import useLoading from "~/hooks/useLoading";
+
+import { Schema_File } from "~/types/schema";
+
+import { CreateDownloadToken } from "actions";
+
+const Plyr = dynamic(() => import("plyr-react"), {
+  ssr: false,
+  loading: () => <Loader message='Loading player...' />,
+});
+
+type Props = {
+  file: z.infer<typeof Schema_File>;
+};
+export default function PreviewVideo({ file }: Props) {
+  const [videoSrc, setVideoSrc] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const loading = useLoading(async () => {
+    try {
+      if (!file.encryptedWebContentLink) {
+        setError("No video to preview");
+        return;
+      }
+      const token = await CreateDownloadToken();
+      setVideoSrc(`/api/stream/${file.encryptedId}?token=${token}`);
+    } catch (error) {
+      const e = error as Error;
+      console.error(e);
+      setError(e.message);
+    }
+  }, [file]);
+
+  return (
+    <div className='flex h-full min-h-[33dvh] w-full items-center justify-center py-3'>
+      {loading ? (
+        <Loader message='Loading video...' />
+      ) : error ? (
+        <Status
+          icon='TriangleAlert'
+          message={error}
+          destructive
+        />
+      ) : (
+        <div className='h-full w-full'>
+          <Plyr
+            source={{
+              type: "video",
+              sources: [
+                {
+                  src: videoSrc,
+                  type: file.mimeType,
+                  size: file.size,
+                },
+              ],
+              poster: `/api/thumb/${file.encryptedId}?size=1000`,
+            }}
+            options={{
+              toggleInvert: true,
+              settings: ["quality", "speed"],
+              ratio: "16:9",
+              controls: [
+                "play-large",
+                "play",
+                "progress",
+                "current-time",
+                "duration",
+                "mute",
+                "volume",
+                "settings",
+                "pip",
+                "download",
+                "fullscreen",
+              ],
+              volume: 0.5,
+              muted: false,
+              loop: { active: false },
+              speed: { selected: 1, options: [0.5, 1, 1.5, 2] },
+              keyboard: {
+                focused: true,
+                global: true,
+              },
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/Preview/index.tsx b/src/components/Preview/index.tsx
new file mode 100644
index 0000000..08df912
--- /dev/null
+++ b/src/components/Preview/index.tsx
@@ -0,0 +1,10 @@
+export { default as PreviewInformation } from "./Information";
+export { default as PreviewLayout } from "./Layout";
+
+export { default as PreviewAudio } from "./Audio";
+export { default as PreviewDocument } from "./Document";
+export { default as PreviewImage } from "./Image";
+export { default as PreviewManga } from "./Manga";
+export { default as PreviewRich } from "./Rich";
+export { default as PreviewUnknown } from "./Unknown";
+export { default as PreviewVideo } from "./Video";
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index bc3af5a..f468dab 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
 const alertVariants = cva(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
@@ -9,15 +9,14 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -25,35 +24,33 @@ const Alert = React.forwardRef<
 >(({ className, variant, ...props }, ref) => (
   <div
     ref={ref}
-    role="alert"
+    role='alert'
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
 
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("text-sm [&_p]:leading-relaxed", className)}
+      {...props}
+    />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertDescription, AlertTitle };
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
index 0564996..96a7403 100644
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,51 +1,55 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
+    separator?: React.ReactNode;
   }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
+>(({ ...props }, ref) => (
+  <nav
     ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
+    aria-label='breadcrumb'
     {...props}
   />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+));
+Breadcrumb.displayName = "Breadcrumb";
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
+    asChild?: boolean;
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : "a";
 
   return (
     <Comp
@@ -53,63 +57,55 @@ const BreadcrumbLink = React.forwardRef<
       className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
 
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role='link'
+      aria-disabled='true'
+      aria-current='page'
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
 
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
   <li
-    role="presentation"
-    aria-hidden="true"
+    role='presentation'
+    aria-hidden='true'
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRight />}
   </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
   <span
-    role="presentation"
-    aria-hidden="true"
+    role='presentation'
+    aria-hidden='true'
     className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
+    <MoreHorizontal className='h-4 w-4' />
+    <span className='sr-only'>More</span>
   </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
+};
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 0807807..52080d0 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -10,12 +10,9 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -30,27 +27,27 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 5516e98..d30cbee 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,79 +1,69 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
+    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
index 1a4b7cb..e950b92 100644
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@@ -1,124 +1,109 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
-import { Button } from "~/components/ui/button"
+import { Button } from "~/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
+import { cn } from "~/utils/cn";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
       },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
+      api?.scrollPrev();
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
+      api?.scrollNext();
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
+          event.preventDefault();
+          scrollPrev();
         } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
+          event.preventDefault();
+          scrollNext();
         }
       },
-      [scrollPrev, scrollNext]
-    )
+      [scrollPrev, scrollNext],
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
-    }, [api, setApi])
+      setApi(api);
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
 
       return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -126,8 +111,7 @@ const Carousel = React.forwardRef<
           carouselRef,
           api: api,
           opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
           scrollPrev,
           scrollNext,
           canScrollPrev,
@@ -138,125 +122,109 @@ const Carousel = React.forwardRef<
           ref={ref}
           onKeyDownCapture={handleKeyDown}
           className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
+          role='region'
+          aria-roledescription='carousel'
           {...props}
         >
           {children}
         </div>
       </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
+    );
+  },
+);
+Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
+    return (
+      <div
+        ref={carouselRef}
+        className='overflow-hidden'
+      >
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
       <div
         ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
+        role='group'
+        aria-roledescription='slide'
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
         {...props}
       />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
 
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute  h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className='h-4 w-4' />
+        <span className='sr-only'>Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className='h-4 w-4' />
+        <span className='sr-only'>Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
 
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi };
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index fe03109..c2fd8f9 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -22,64 +22,52 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { portal?: HTMLElement | null }
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+  <DialogPortal container={props.portal}>
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
+        className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+      <DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
+        <X className='h-4 w-4' />
+        <span className='sr-only'>Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
     {...props}
   />
-)
-DialogHeader.displayName = "DialogHeader"
+);
+DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,14 +75,11 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,18 +90,18 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
-}
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index db275ad..2913732 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -1,26 +1,23 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
   <DrawerPrimitive.Root
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-)
-Drawer.displayName = "Drawer"
+);
+Drawer.displayName = "Drawer";
 
-const DrawerTrigger = DrawerPrimitive.Trigger
+const DrawerTrigger = DrawerPrimitive.Trigger;
 
-const DrawerPortal = DrawerPrimitive.Portal
+const DrawerPortal = DrawerPrimitive.Portal;
 
-const DrawerClose = DrawerPrimitive.Close
+const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -31,51 +28,45 @@ const DrawerOverlay = React.forwardRef<
     className={cn("fixed inset-0 z-50 bg-black/80", className)}
     {...props}
   />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & { portal?: HTMLElement | null }
 >(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
+  <DrawerPortal container={props.portal}>
     <DrawerOverlay />
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
         "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
+        className,
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted' />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
+));
+DrawerContent.displayName = "DrawerContent";
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
     {...props}
   />
-)
-DrawerHeader.displayName = "DrawerHeader"
+);
+DrawerHeader.displayName = "DrawerHeader";
 
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
     {...props}
   />
-)
-DrawerFooter.displayName = "DrawerFooter"
+);
+DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -83,14 +74,11 @@ const DrawerTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DrawerPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -101,18 +89,18 @@ const DrawerDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
   Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
   DrawerClose,
   DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
   DrawerDescription,
-}
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 026d7ae..9bbbbca 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -29,16 +29,15 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className='ml-auto h-4 w-4' />
   </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -48,36 +47,35 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & { portal?: HTMLElement | null }
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
+  <DropdownMenuPrimitive.Portal container={props.portal}>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -85,12 +83,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -100,21 +98,20 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className='h-4 w-4' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -124,37 +121,33 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <Circle className='h-2 w-2 fill-current' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,36 +158,33 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
+  DropdownMenuTrigger,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 2f3425f..234f101 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -1,25 +1,22 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 1b3e1a8..29e71de 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,26 +1,23 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/src/components/ui/menubar.tsx b/src/components/ui/menubar.tsx
index 324efcc..9b4eb91 100644
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@@ -1,20 +1,20 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const MenubarMenu = MenubarPrimitive.Menu
+const MenubarMenu = MenubarPrimitive.Menu;
 
-const MenubarGroup = MenubarPrimitive.Group
+const MenubarGroup = MenubarPrimitive.Group;
 
-const MenubarPortal = MenubarPrimitive.Portal
+const MenubarPortal = MenubarPrimitive.Portal;
 
-const MenubarSub = MenubarPrimitive.Sub
+const MenubarSub = MenubarPrimitive.Sub;
 
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,
@@ -22,14 +22,11 @@ const Menubar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Root
     ref={ref}
-    className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
-    )}
+    className={cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
     {...props}
   />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
 
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -39,17 +36,17 @@ const MenubarTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <MenubarPrimitive.SubTrigger
@@ -57,15 +54,15 @@ const MenubarSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className='ml-auto h-4 w-4' />
   </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -75,42 +72,37 @@ const MenubarSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Item
@@ -118,12 +110,12 @@ const MenubarItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -133,20 +125,20 @@ const MenubarCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className='h-4 w-4' />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
   </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -156,37 +148,33 @@ const MenubarRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <Circle className='h-2 w-2 fill-current' />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
   </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Label
     ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
     {...props}
   />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -197,40 +185,34 @@ const MenubarSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
       {...props}
     />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
+  );
+};
+MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
   Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
   MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
   MenubarRadioGroup,
   MenubarRadioItem,
-  MenubarPortal,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-}
+  MenubarTrigger,
+};
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 0687c19..40c5493 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,31 +1,31 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Popover = PopoverPrimitive.Root
+const Popover = PopoverPrimitive.Root;
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+const PopoverTrigger = PopoverPrimitive.Trigger;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & { portal?: HTMLElement | null }
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
+  <PopoverPrimitive.Portal container={props.portal}>
     <PopoverPrimitive.Content
       ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index cdacbbd..efb979e 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ProgressPrimitive from "@radix-ui/react-progress"
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -11,18 +11,15 @@ const Progress = React.forwardRef<
 >(({ className, value, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
-    )}
+    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className='h-full w-full flex-1 bg-primary transition-all'
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
 
-export { Progress }
+export { Progress };
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index bbaa4fd..54fd855 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -20,17 +20,17 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className='h-4 w-4 opacity-50' />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -38,16 +38,13 @@ const SelectScrollUpButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className='h-4 w-4' />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -55,17 +52,13 @@ const SelectScrollDownButton = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className='h-4 w-4' />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -78,7 +71,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -88,7 +81,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -96,8 +89,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -108,8 +101,8 @@ const SelectLabel = React.forwardRef<
     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -119,20 +112,20 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className='h-4 w-4' />
       </SelectPrimitive.ItemIndicator>
     </span>
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -143,18 +136,18 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
-}
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
index 76100ad..8e44508 100644
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@@ -1,31 +1,22 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index c52cd5a..db2a330 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -1,19 +1,19 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Sheet = SheetPrimitive.Root
+const Sheet = SheetPrimitive.Root;
 
-const SheetTrigger = SheetPrimitive.Trigger
+const SheetTrigger = SheetPrimitive.Trigger;
 
-const SheetClose = SheetPrimitive.Close
+const SheetClose = SheetPrimitive.Close;
 
-const SheetPortal = SheetPrimitive.Portal
+const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -22,13 +22,13 @@ const SheetOverlay = React.forwardRef<
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
   "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
@@ -46,8 +46,8 @@ const sheetVariants = cva(
     defaultVariants: {
       side: "right",
     },
-  }
-)
+  },
+);
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -55,9 +55,9 @@ interface SheetContentProps
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
+  SheetContentProps & { portal?: HTMLElement | null }
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
+  <SheetPortal container={props.portal}>
     <SheetOverlay />
     <SheetPrimitive.Content
       ref={ref}
@@ -65,42 +65,30 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
+      <SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
+        <X className='h-4 w-4' />
+        <span className='sr-only'>Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
 
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
+    className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
     {...props}
   />
-)
-SheetHeader.displayName = "SheetHeader"
+);
+SheetHeader.displayName = "SheetHeader";
 
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
-)
-SheetFooter.displayName = "SheetFooter"
+);
+SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -111,8 +99,8 @@ const SheetTitle = React.forwardRef<
     className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -123,18 +111,18 @@ const SheetDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
   Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
   SheetDescription,
-}
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
index 0396410..d54779e 100644
--- a/src/components/ui/skeleton.tsx
+++ b/src/components/ui/skeleton.tsx
@@ -1,15 +1,12 @@
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
       className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
-  )
+  );
 }
 
-export { Skeleton }
+export { Skeleton };
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
new file mode 100644
index 0000000..690a0d4
--- /dev/null
+++ b/src/components/ui/slider.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "~/utils/cn";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className='relative h-2 w-full grow overflow-hidden rounded-full bg-secondary'>
+      <SliderPrimitive.Range className='absolute h-full bg-primary' />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className='block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50' />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index f817a92..4e26516 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,117 +1,98 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className='relative w-full overflow-auto'>
+      <table
+        ref={ref}
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <thead
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("[&_tr]:border-b", className)}
       {...props}
     />
-  </div>
-))
-Table.displayName = "Table"
+  ),
+);
+TableHeader.displayName = "TableHeader";
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody
+      ref={ref}
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  ),
+);
+TableBody.displayName = "TableBody";
 
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot
+      ref={ref}
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+      {...props}
+    />
+  ),
+);
+TableFooter.displayName = "TableFooter";
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
 
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = "TableHead";
 
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+      {...props}
+    />
+  ),
+);
+TableCell.displayName = "TableCell";
 
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption
+      ref={ref}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  ),
+);
+TableCaption.displayName = "TableCaption";
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 7a3d9dc..5c5d0c4 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -15,12 +15,12 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -30,12 +30,12 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -45,11 +45,11 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 5fbebb8..e795997 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -1,24 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
index 4fd7688..7ef3d43 100644
--- a/src/components/ui/toast.tsx
+++ b/src/components/ui/toast.tsx
@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { type VariantProps, cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const ToastProvider = ToastPrimitives.Provider
+const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -17,12 +17,12 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
   "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
@@ -30,20 +30,18 @@ const toastVariants = cva(
     variants: {
       variant: {
         default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
       },
     },
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
@@ -51,9 +49,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -63,12 +61,12 @@ const ToastAction = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      className
+      className,
     )}
     {...props}
   />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -78,15 +76,15 @@ const ToastClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
-      className
+      className,
     )}
-    toast-close=""
+    toast-close=''
     {...props}
   >
-    <X className="h-4 w-4" />
+    <X className='h-4 w-4' />
   </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -97,8 +95,8 @@ const ToastTitle = React.forwardRef<
     className={cn("text-sm font-semibold", className)}
     {...props}
   />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -109,21 +107,21 @@ const ToastDescription = React.forwardRef<
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
   Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
   ToastAction,
-}
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  type ToastActionElement,
+  type ToastProps,
+};
diff --git a/src/components/ui/toaster.tsx b/src/components/ui/toaster.tsx
index 8b67a2d..1c0e5ed 100644
--- a/src/components/ui/toaster.tsx
+++ b/src/components/ui/toaster.tsx
@@ -1,35 +1,29 @@
-"use client"
+"use client";
 
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "~/components/ui/toast"
-import { useToast } from "~/components/ui/use-toast"
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "~/components/ui/toast";
+import { useToast } from "~/components/ui/use-toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
+          <Toast
+            key={id}
+            {...props}
+          >
+            <div className='grid gap-1'>
               {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
+              {description && <ToastDescription>{description}</ToastDescription>}
             </div>
             {action}
             <ToastClose />
           </Toast>
-        )
+        );
       })}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index e0dd4e8..3d2f8a4 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -1,15 +1,15 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
 
-import { cn } from "~/utils"
+import { cn } from "~/utils/cn";
 
-const TooltipProvider = TooltipPrimitive.Provider
+const TooltipProvider = TooltipPrimitive.Provider;
 
-const Tooltip = TooltipPrimitive.Root
+const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -20,11 +20,11 @@ const TooltipContent = React.forwardRef<
     sideOffset={sideOffset}
     className={cn(
       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
index d6698ef..84c8ad7 100644
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -1,78 +1,75 @@
-"use client"
+"use client";
 
 // Inspired by react-hot-toast library
-import * as React from "react"
+import * as React from "react";
 
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "~/components/ui/toast"
+import type { ToastActionElement, ToastProps } from "~/components/ui/toast";
 
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
 
 const actionTypes = {
   ADD_TOAST: "ADD_TOAST",
   UPDATE_TOAST: "UPDATE_TOAST",
   DISMISS_TOAST: "DISMISS_TOAST",
   REMOVE_TOAST: "REMOVE_TOAST",
-} as const
+} as const;
 
-let count = 0
+let count = 0;
 
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
 }
 
-type ActionType = typeof actionTypes
+type ActionType = typeof actionTypes;
 
 type Action =
   | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
     }
   | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
     }
   | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
     }
   | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
 
 interface State {
-  toasts: ToasterToast[]
+  toasts: ToasterToast[];
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return
+    return;
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
+    toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
       toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
+    });
+  }, TOAST_REMOVE_DELAY);
 
-  toastTimeouts.set(toastId, timeout)
-}
+  toastTimeouts.set(toastId, timeout);
+};
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -80,27 +77,25 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
+      };
 
     case "UPDATE_TOAST":
       return {
         ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
 
     case "DISMISS_TOAST": {
-      const { toastId } = action
+      const { toastId } = action;
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId)
+        addToRemoveQueue(toastId);
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
+          addToRemoveQueue(toast.id);
+        });
       }
 
       return {
@@ -111,46 +106,46 @@ export const reducer = (state: State, action: Action): State => {
                 ...t,
                 open: false,
               }
-            : t
+            : t,
         ),
-      }
+      };
     }
     case "REMOVE_TOAST":
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        }
+        };
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
+      };
   }
-}
+};
 
-const listeners: Array<(state: State) => void> = []
+const listeners: Array<(state: State) => void> = [];
 
-let memoryState: State = { toasts: [] }
+let memoryState: State = { toasts: [] };
 
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
+  memoryState = reducer(memoryState, action);
   listeners.forEach((listener) => {
-    listener(memoryState)
-  })
+    listener(memoryState);
+  });
 }
 
-type Toast = Omit<ToasterToast, "id">
+type Toast = Omit<ToasterToast, "id">;
 
 function toast({ ...props }: Toast) {
-  const id = genId()
+  const id = genId();
 
   const update = (props: ToasterToast) =>
     dispatch({
       type: "UPDATE_TOAST",
       toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
 
   dispatch({
     type: "ADD_TOAST",
@@ -159,36 +154,36 @@ function toast({ ...props }: Toast) {
       id,
       open: true,
       onOpenChange: (open) => {
-        if (!open) dismiss()
+        if (!open) dismiss();
       },
     },
-  })
+  });
 
   return {
     id: id,
     dismiss,
     update,
-  }
+  };
 }
 
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
+  const [state, setState] = React.useState<State>(memoryState);
 
   React.useEffect(() => {
-    listeners.push(setState)
+    listeners.push(setState);
     return () => {
-      const index = listeners.indexOf(setState)
+      const index = listeners.indexOf(setState);
       if (index > -1) {
-        listeners.splice(index, 1)
+        listeners.splice(index, 1);
       }
-    }
-  }, [state])
+    };
+  }, [state]);
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
+  };
 }
 
-export { useToast, toast }
+export { useToast, toast };
diff --git a/src/config/gIndex.config.ts b/src/config/gIndex.config.ts
index 284895e..638d7fc 100644
--- a/src/config/gIndex.config.ts
+++ b/src/config/gIndex.config.ts
@@ -1,14 +1,15 @@
 import { z } from "zod";
-import { Schema_Config } from "~/schema";
 
-import isDev from "~/utils/isDev";
+import { isDev } from "~/utils/isDev";
+
+import { Schema_Config } from "~/types/schema";
 
 const config: z.input<typeof Schema_Config> = {
   /**
    * If possible, please don't change this value
    * Even if you're creating a PR, just let me change it myself
    */
-  version: "2.0.2",
+  version: "2.0.3",
   /**
    * Base path of the app, used for generating links
    *
@@ -19,9 +20,7 @@ const config: z.input<typeof Schema_Config> = {
    */
   basePath: isDev
     ? "http://localhost:3000"
-    : `https://${
-        process.env.NEXT_PUBLIC_DOMAIN || process.env.NEXT_PUBLIC_VERCEL_URL
-      }`,
+    : `https://${process.env.NEXT_PUBLIC_DOMAIN || process.env.NEXT_PUBLIC_VERCEL_URL}`,
 
   /**
    * Allow access to the deploy guide
@@ -35,19 +34,9 @@ const config: z.input<typeof Schema_Config> = {
    */
   showDeployGuide: true,
 
-  /**
-   * DEPRECATED
-   * Since in 2.0 we're using server side data fetching, this is not needed anymore.
-   *
-   * Hashed key for fetching protected files / folders from the server
-   * This key will bypass the file / folder password
-   */
-  // masterKey: "masterkey",
-
   /**
    * How long the cache will be stored in the browser
    * Used for all pages and api routes
-   * Default is 5 minutes (300/60 = 5min)
    *
    * @default "max-age=0, s-maxage=60, stale-while-revalidate"
    */
@@ -62,10 +51,7 @@ const config: z.input<typeof Schema_Config> = {
      * You need to create a new folder and share it with the service account
      * Then, copy the folder id and paste it here
      */
-    // rootFolder:
-    //   "c760fc0eae9990d4accbc2134af21e45a378d412af2c78020070a9f9ac548b98fe61c4f6be953a8d7be6a035e6f7766c",
-    rootFolder:
-      "b76c7c22083307a3aa99c28ab7cc69851d682f5a250d995679d4be5276cab16ab6c37f4d5b7ad1a9b93fb9bf768e752c",
+    rootFolder: "b76c7c22083307a3aa99c28ab7cc69851d682f5a250d995679d4be5276cab16ab6c37f4d5b7ad1a9b93fb9bf768e752c",
 
     /**
      * If your rootfolder inside a shared drive, you NEED to set this to true
@@ -81,13 +67,9 @@ const config: z.input<typeof Schema_Config> = {
      * Then you need to encrypt it using `/api/internal/encrypt?q=:shared_drive_id` route
      */
     isTeamDrive: true,
-    sharedDrive:
-      "77bfa156c9c9d159112fcb0494ed8545bdaf7a3d567cd760ba2e2e2cd33fcbfc",
+    sharedDrive: "77bfa156c9c9d159112fcb0494ed8545bdaf7a3d567cd760ba2e2e2cd33fcbfc",
 
-    defaultQuery: [
-      "trashed = false",
-      "(not mimeType contains 'google-apps' or mimeType contains 'folder')",
-    ],
+    defaultQuery: ["trashed = false", "(not mimeType contains 'google-apps' or mimeType contains 'folder')"],
     defaultField:
       "id, name, mimeType, thumbnailLink, fileExtension, modifiedTime, size, imageMediaMetadata, videoMediaMetadata, webContentLink, trashed",
     defaultOrder: "folder, name asc, modifiedTime desc",
@@ -146,14 +128,7 @@ const config: z.input<typeof Schema_Config> = {
      *
      * You can add more extensions if you want
      */
-    hiddenFiles: [
-      ".password",
-      ".readme.md",
-      ".banner",
-      ".banner.jpg",
-      ".banner.png",
-      ".banner.webp",
-    ],
+    hiddenFiles: [".password", ".readme.md", ".banner", ".banner.jpg", ".banner.png", ".banner.webp"],
 
     /**
      * Allow user to download protected file without password.
@@ -196,11 +171,12 @@ const config: z.input<typeof Schema_Config> = {
      * Site Name will be used for default metadata title
      * Site Name Template will be used if the page has a title
      * %s will be replaced with the page title
+     * %t will be replaced with the site name
      *
      * You can set it to undefined if you don't want to use it
      */
     siteName: "next-gdrive-index",
-    siteNameTemplate: "%s - next-gdrive-index",
+    siteNameTemplate: "%s - %t",
     siteDescription: "A simple file browser for Google Drive",
     siteIcon: "/logo.svg",
     siteAuthor: "mbaharip",
@@ -240,24 +216,7 @@ const config: z.input<typeof Schema_Config> = {
      * - {{ handle }} will be replaced with the twitter handle from twitterHandle config above
      * - {{ creator }} will be replaced with mbaharip if you want to credit me
      */
-    footer: [
-      "{{ siteName }} *v{{ version }}* @ {{ repository }}",
-      "{{ year }} - Made with ❤️ by **{{ author }}**",
-      isDev ? "Development Mode" : "",
-    ],
-
-    /**
-     * DEPRECATED
-     * Since we're using shadcn/ui now, please refer to their theming documentation
-     * https://ui.shadcn.com/docs/theming
-     *
-     * Or you can use their themes, and replace the color in /src/app/globals.css
-     * https://ui.shadcn.com/themes
-     *
-     * Tailwind color name.
-     * Ref: https://tailwindcss.com/docs/customizing-colors
-     */
-    // defaultAccentColor: "teal",
+    footer: ["{{ siteName }} *v{{ version }}* @ {{ repository }}", "{{ year }} - Made with ❤️ by **{{ author }}**"],
 
     /**
      * Site wide password protection
diff --git a/src/context/layoutContext.tsx b/src/context/layoutContext.tsx
index c3552ae..9203684 100644
--- a/src/context/layoutContext.tsx
+++ b/src/context/layoutContext.tsx
@@ -37,10 +37,6 @@ const LayoutProvider = ({ children }: TLayoutProvider) => {
     localStorage.setItem("layout", layout);
   };
 
-  return (
-    <LayoutContext.Provider value={{ layout, setLayout: onChangeLayout }}>
-      {children}
-    </LayoutContext.Provider>
-  );
+  return <LayoutContext.Provider value={{ layout, setLayout: onChangeLayout }}>{children}</LayoutContext.Provider>;
 };
 export default LayoutProvider;
diff --git a/src/context/themeContext.tsx b/src/context/themeContext.tsx
index 7413e0e..4395fd6 100644
--- a/src/context/themeContext.tsx
+++ b/src/context/themeContext.tsx
@@ -35,9 +35,5 @@ const ThemeProvider = ({ children }: TThemeProvider) => {
     setTheme(getThemeFromLocalStorage());
   }, []);
 
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
+  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
 };
diff --git a/src/data/docs/getting-started.ts b/src/data/docs/getting-started.ts
new file mode 100644
index 0000000..a45a661
--- /dev/null
+++ b/src/data/docs/getting-started.ts
@@ -0,0 +1,9 @@
+export const getting_started = `Welcome to the deployment guide! This guide will help you to deploy the application to Vercel or similar services.
+
+If you are new to this project, you can follow along from the beginning.
+But if you've already deployed the app before and want to upgrade from v1, you can skip to the [Migrating from v1](#migrating) section.  
+You can also use this guide to [configure the app](#config) and [customize the theme](#theme).
+
+_**Note:** This guide assumes you have a basic understanding of how to deploy a Next.js app on Vercel or other platforms._
+
+#### We recommend you to use this deployment guide on a desktop browser.`;
diff --git a/src/data/docs/index.ts b/src/data/docs/index.ts
new file mode 100644
index 0000000..5f2f1fd
--- /dev/null
+++ b/src/data/docs/index.ts
@@ -0,0 +1,4 @@
+export { getting_started } from "./getting-started";
+export { migration } from "./migration";
+export { new_user } from "./new-user";
+export { shared_drive } from "./shared-drive";
diff --git a/src/data/docs/migration.ts b/src/data/docs/migration.ts
new file mode 100644
index 0000000..5163c40
--- /dev/null
+++ b/src/data/docs/migration.ts
@@ -0,0 +1,22 @@
+export const migration = `If you've already deployed the app before and want to upgrade from v1, you can follow this guide to migrate the app to the latest version.
+
+### Update your environment and configuration
+
+If you still have the \`.env.local file\`, you can go to the [configuration](#config) section, and load the file to update the environment variables.
+If you don't have it, go to your deployment platform and copy the environment variables from the platform to the [configuration](#config) section.
+
+You can also load the old \`gindex.config.ts\` file to the [configuration](#config) section to set the default configuration.
+
+### Update the repository
+
+First, you need to update the repository to the latest version.
+If you open your forked repository, you will see a notification that the repository is behind the original repository.
+You can sync the repository by clicking the \`Sync fork\` button.
+After the repository is updated, you can replace the \`gindex.config.ts\` file with the new one.
+
+### Update deployment
+
+Now go to your Vercel project page (or other platforms).
+Go to the \`Settings\` tab, and click the \`Environment Variables\` menu.
+You can delete all the old environment variables, and copy the new environment variables from the updated \`.env.local\` file.
+Now you can redeploy the app to apply the changes.`;
diff --git a/src/data/docs/new-user.ts b/src/data/docs/new-user.ts
new file mode 100644
index 0000000..a01d61e
--- /dev/null
+++ b/src/data/docs/new-user.ts
@@ -0,0 +1,81 @@
+export const new_user = `Prerequisites:
+
+- A basic understanding of Vercel (or similar services)
+- Google Cloud Platform account
+
+### Fork or Clone the repository
+
+It's pretty obvious, but you need to fork the repository to your account.
+You can [click here](https://github.com/mbahArip/next-gdrive-index/fork) to fork the repository.  
+You can choose any repository name, description, and visibility.
+
+But if you want to run it locally, you can clone the repository instead.
+
+### Create a Google Cloud Platform project and enable Google Drive API
+
+We need an access to Google Drive API to get the files from Google Drive.
+So you need to create a project in Google Cloud Platform and enable Google Drive API to get your own credentials.
+
+1. Go to [Google Cloud Platform](https://console.cloud.google.com/)
+2. Click the \`New Project\` button
+3. Enter a project name, and click the \`Create\` button
+4. After the project is created, click the \`Enable APIs and Services\` button
+5. Search for Google Drive API, and click the \`Enable\` button
+
+### Create a Service Account and get the credentials
+
+After enabling the Google Drive API, we need to create a service account to get the credentials.
+The credentials will be used to authenticate the application to access the Google Drive API and get the files.
+
+1. On [APIs & Services](https://console.cloud.google.com/apis/dashboard) page, click the \`Credentials\` menu on the sidebar
+2. Click the \`Create Credentials\` button, and choose \`Service account\`
+3. Enter your service account name and description, and then click the \`Done\` button
+4. You will see the service account you just created on \`Service Account\` table, click the name of the service account to open the details
+5. Go to \`Keys\` tab, then click the \`Add Key\` button and choose the \`Create new key\`
+6. Pick \`JSON\` as the key type and click the \`Create\` button
+7. The JSON file will be downloaded to your computer, and **keep it safe**. We will use it later on the configuration
+
+_**Note:** The JSON file contains sensitive information, don't share it with anyone_
+
+### Create shared folder in Google Drive
+
+Since the service account can't access your Root folder, you need to create a new folder, and share it with the service account.
+This folder will be used as the root folder for the application.
+
+> If you're using or the folder you want to share inside Shared Drive, you can skip this step and go to the [Shared Drive Guide](#shared-drive)
+
+1. Go to [Google Drive](https://drive.google.com/)
+2. Click the \`New\` button, and choose \`Folder\` to create a new folder, you can name it anything you want
+3. Right-click the folder you just created, and choose \`Share\`
+4. Enter the email address of the service account you just created (you can find it on the JSON file, or on the service account details page)
+5. To allow download files larger than deployment limit, you need to enable \`Link sharing\` and set it to \`Anyone with the link\`
+6. Copy the folder ID from the URL, it's the part after \`/folders/\` in the URL (e.g: https://drive.google.com/drive/u/0/folders/ \`<folder_id>\` )
+
+### Configuring the app and Customizing the theme
+
+Now we need to configure the app to use the credentials and folder ID we just created.
+You can follow the [App Configuration](#config) and [Customize Theme](#theme) sections to configure the app and customize the theme.
+
+_**Note:** You can skip the theme customization, but you **NEED** to configure the app_
+
+### Deploy the app
+
+On this guide we will use Vercel to deploy the app, but you can use other platforms like Netlify, Heroku, etc.
+But don't forget to adjust the \`fileSizeLimit\` on the [configuration](#config) if you use other platforms.
+
+> Before deploying, make sure you have pushed the changes to your repository
+
+1. Go to [Vercel](https://vercel.com/)
+2. Click on the \`Add new\` button, and choose \`Project\`
+3. Choose the repository you just forked
+4. On the \`Environment Variables\` section, copy the whole content from \`.env.local\` you just downloaded from [configuration](#config) section, and paste it on the key fields. It will automatically add all the environment variables needed
+5. Click the \`Deploy\` button
+6. Wait for the deployment to finish, and open project
+7. Go to \`Settings\` tab, and click the \`Functions\` menu, and select your \`Function Region\` to the nearest region to your location for optimal speed
+8. Go to \`Deployment\` tab, click the 3 dots on the right side of the latest \`Production\` deployment, and click the \`Redeploy\` button to apply the changes
+
+For other platforms, you can check their own documentation for Next.js deployment guide.
+
+### Done! 🎉
+
+Congratulations! You have successfully deployed the app.`;
diff --git a/src/data/docs/shared-drive.ts b/src/data/docs/shared-drive.ts
new file mode 100644
index 0000000..7458d82
--- /dev/null
+++ b/src/data/docs/shared-drive.ts
@@ -0,0 +1,16 @@
+export const shared_drive = `I'm separating this guide in case someone who already using v1 can see this guide easily.
+
+As of version 2.0.2 we added support for Shared Drive, and the demo actually using a Shared Drive.
+You can follow this guide to use Shared Drive as the root folder for the application.
+
+1. Go to [Google Drive](https://drive.google.com/)
+2. Open the \`Shared Drives\` menu from the sidebar
+3. Right click on the Shared Drive you want to use, and choose \`Manage members\`
+4. Add your service account email address to the members list, and give it at least \`Viewer\` permission
+5. Open the \`Shared Drive\`, and copy the ID from the URL, it's the part after \`/drive/u/0/folders/\` in the URL (e.g: https://drive.google.com/drive/u/0/folders/ \`<drive_id>\` )
+6. Paste the ID to \`Shared Drive\` field on the [configuration](#config) section, and set the \`is Team Drive\` to \`true\`
+7. For the root folder, you can set it to the folder ID inside the Shared Drive, or use the Shared Drive ID as the root folder ID
+8. Update the configuration file, and redeploy the app to apply the changes
+9. Done! 🎉
+
+If you don't want to use the configuration section below, you can encrypt your \`Shared Drive\` ID using the \`/api/internal/encrypt?q=<drive_id>\` endpoint, and update the config file directly.`;
diff --git a/src/data/template/configuration.ts b/src/data/template/configuration.ts
new file mode 100644
index 0000000..5253e19
--- /dev/null
+++ b/src/data/template/configuration.ts
@@ -0,0 +1,339 @@
+import { z } from "zod";
+import pkg from "~/../package.json";
+
+import { encryptData } from "~/utils/encryptionHelper";
+
+import { Schema_App_Configuration } from "~/types/schema";
+
+const config_template = `import { z } from "zod";
+import { isDev } from "~/utils/isDev";
+import { Schema_Config } from "~/types/schema";
+
+const config: z.input<typeof Schema_Config> = {
+  /**
+   * If possible, please don't change this value
+   * Even if you're creating a PR, just let me change it myself
+   */
+  version: {{version}},
+
+  /**
+   * Base path of the app, used for generating links
+   *
+   * If you're using another port for development, you can set it here
+   *
+   * @default process.env.NEXT_PUBLIC_DOMAIN
+   * @fallback process.env.NEXT_PUBLIC_VERCEL_URL
+   */
+  basePath: isDev
+    ? "http://localhost:3000"
+    : \`https://\${process.env.NEXT_PUBLIC_DOMAIN || process.env.NEXT_PUBLIC_VERCEL_URL}\`,
+
+  /**
+   * Allow access to the deploy guide
+   * Will use the \`/deploy\` route, might be overlap with file / folder name
+   *
+   * Set this to false on final deployment
+   *
+   * I'm using this to show the deploy guide on my own demo deployment
+   *
+   * @default false
+   */
+  showDeployGuide: false,
+
+  /**
+   * How long the cache will be stored in the browser
+   * Used for all pages and api routes
+   *
+   * @default "max-age=0, s-maxage=60, stale-while-revalidate"
+   */
+  cacheControl: "max-age=0, s-maxage=60, stale-while-revalidate",
+
+  apiConfig: {
+    /**
+     * Starting point of the drive.
+     * Will be used for '/' route.
+     *
+     * Since service account can't access 'root' folder
+     * You need to create a new folder and share it with the service account
+     * Then, copy the folder id and paste it here
+     */
+    rootFolder: {{apiConfig.rootFolder}},
+
+    /**
+     * If your rootfolder inside a shared drive, you NEED to set this to true
+     * If not, you can set this to false
+     *
+     * You also need to set the shared drive ID to make it work
+     * Make sure you have add your service account to the shared drive since the service account can't access the shared drive by default
+     *
+     * Where to get the shared drive id?
+     * Go to your Shared Drive > Click on the shared drive > copy the ID from the url
+     * ex: https://drive.google.com/drive/u/0/folders/:shared_drive_id
+     *
+     * Then you need to encrypt it using \`/api/internal/encrypt?q=:shared_drive_id\` route
+     */
+    isTeamDrive: {{apiConfig.isTeamDrive}},
+    sharedDrive: {{apiConfig.sharedDrive}},
+
+    defaultQuery: [
+      "trashed = false",
+      "(not mimeType contains 'google-apps' or mimeType contains 'folder')",
+    ],
+    defaultField:
+      "id, name, mimeType, thumbnailLink, fileExtension, modifiedTime, size, imageMediaMetadata, videoMediaMetadata, webContentLink, trashed",
+    defaultOrder: "folder, name asc, modifiedTime desc",
+
+    /**
+     * Set how many items to display per page in the file list
+     * It's recommended to set this to a reasonable number
+     * Since it will affect the load time
+     * 
+     * @default: 50 items per page | 5 search result
+    */
+    itemsPerPage: {{apiConfig.itemsPerPage}},
+    searchResult: {{apiConfig.searchResult}},
+
+    /**
+     * By default, the app will use the thumbnail URL from Google Drive
+     *
+     * Sometimes, the thumbnail can't be accessed because of CORS policy
+     * If you're having this issue, you can set this to true
+     *
+     * This will make the api fetch the thumbnail and serve it from the server
+     * instead of using the Google Drive thumbnail
+     *
+     * This will increase the server load, so use it wisely
+     *
+     * @default: true
+     */
+    proxyThumbnail: {{apiConfig.proxyThumbnail}},
+
+    /**
+     * Special file name that will be used for certain purposes
+     * These files will be ignored when searching for files
+     * and will be hidden from the files list by default
+     * 
+     * Banner will be used for opengraph image for folder
+     * By default, all folder will use default og image
+     */
+    specialFile: {
+      password: ".password",
+      readme: ".readme.md",
+      banner: ".banner",
+    },
+
+    /**
+     * Reason why banner has multiple extensions:
+     * - If I use contains query, it will also match the file or folder that contains the word.
+     *   (e.g: File / folder with the name of "Test Password" will be matched)
+     * - If I use = query, it will only match the exact name, hence the multiple extensions
+     *
+     * You can add more extensions if you want
+     */
+    hiddenFiles: [
+      ".password",
+      ".readme.md",
+      ".banner",
+      ".banner.jpg",
+      ".banner.png",
+      ".banner.webp",
+    ],
+
+    /**
+     * Allow user to download protected file without password.
+     * If this set to false, download link will have temporary token attached to it
+     * If this set to true, user can download the file without password as long as they have the link
+     *
+     * @default: false
+     */
+    allowDownloadProtectedFile: {{apiConfig.allowDownloadProtectedFile}},
+
+    /**
+     * Duration in hours.
+     * In version 2, this will be used for download link expiration.
+     * If you need it under 1 hour, you can use math expression. (e.g: (5 / 60) * 1 = 5 minutes)
+     *
+     * This only affect when the user download the file
+     * For example if you set it for example 30 minutes (0.5)
+     * After 30 minutes, and the user still downloading the file, the download will NOT be interrupted
+     * But if the user refresh the page / trying to download again, the download link will be expired
+     *
+     * @default: 6 hours
+     */
+    temporaryTokenDuration: {{apiConfig.temporaryTokenDuration}},
+
+    /**
+     * Maximum file size that can be downloaded via api routes
+     * If it's larger than this, it will be redirected to the file url
+     *
+     * If you're using Vercel, they have a limit of ~4 - ~4.5MB response size
+     * ref: https://vercel.com/docs/platform/limits#serverless-function-payload-size-limit
+     * If you're using another platform, you can match the limit with your platform
+     * Or you can set this to 0 to disable the limit
+     *
+     * @default: 4MB
+     */
+    maxFileSize: {{apiConfig.maxFileSize}},
+
+    /**
+     * Only show preview for files that are smaller than this size
+     * If the file is larger than this size, it will show "can't preview" message instead
+     *
+     * Why?
+     * Since the stream endpoint are counted as a bandwidth usage
+     * I want to limit the preview to only small files
+     * It also to prevent abuse from the user
+     *
+     * You can also set this to 0 to disable the limit
+     *
+     * @default: 100MB
+     */
+    streamMaxSize: {{apiConfig.streamMaxSize}},
+  },
+
+  siteConfig: {
+    /**
+     * Site Name will be used for default metadata title
+     * Site Name Template will be used if the page has a title
+     * %s will be replaced with the page title
+     * %t will be replaced with the site name
+     *
+     * You can set it to undefined if you don't want to use it
+     */
+    siteName: {{siteConfig.siteName}},
+    siteNameTemplate: {{siteConfig.siteNameTemplate}},
+    siteDescription: {{siteConfig.siteDescription}},
+
+    /**
+     * Site Icon will be used on navbar
+     * Favicon will be used as website icon
+    */
+    siteIcon: "/logo.svg",
+    favIcon: "/favicon.png",
+
+    /**
+     * Both are used on metadata
+     * Affects the value of footer
+    */
+    siteAuthor: {{siteConfig.siteAuthor}},
+    twitterHandle: {{siteConfig.twitterHandle}},
+
+    /**
+     * Next.js Metadata robots object
+     *
+     * ref: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#robots
+     */
+    robots: "noindex, nofollow",
+
+    /**
+     * Show file extension on the file name
+     * Example:
+     *    true       |   false
+     *    file.txt   |   file
+     *    100KB      |   txt / 100KB
+     *
+     * @default: false
+     */
+    showFileExtension: {{siteConfig.showFileExtension}},
+
+    /**
+     * Footer content
+     * You can also set it to empty array if you don't want to use it
+     *
+     * Basic markdown is supported (bold, italic, and link)
+     * External link will be opened in new tab
+     *
+     * Template:
+     * - {{ year }} will be replaced with the current year
+     * - {{ repository }} will be replaced with the original repository link
+     * - {{ author }} will be replaced with author from siteAuthor config above (If it's not set, it will be set to mbaharip)
+     * - {{ version }} will be replaced with the current version
+     * - {{ siteName }} will be replaced with the siteName config above
+     * - {{ handle }} will be replaced with the twitter handle from twitterHandle config above
+     * - {{ creator }} will be replaced with mbaharip if you want to credit me
+     */
+    footer: [
+      "{{ siteName }} *v{{ version }}* @ {{ repository }}",
+      "{{ year }} - Made with ❤️ by **{{ author }}**",
+    ],
+
+    /**
+     * Site wide password protection
+     * If this is set, all files and folders will be protected by this password
+     *
+     * The site password are set from Environment Variable (NEXT_GDRIVE_INDEX_PASSWORD)
+     * It's because I don't want to store sensitive data in the code
+     */
+    privateIndex: {{siteConfig.privateIndex}},
+
+    /**
+     * Maximum breadcrumb length
+     * If the breadcrumb is longer than this, it will be shortened
+     */
+    breadcrumbMax: 3,
+
+    /**
+     * Toast notification configuration
+     *
+     * position: Self-explanatory
+     * duration: duration before the toast disappear in milliseconds
+     */
+    toaster: {
+      position: "bottom-right",
+      duration: 3000,
+    },
+
+    /**
+     * Example item:
+     * {
+     *  icon: string, // icon name from lucide icons (https://lucide.dev/icons/)
+     *  name: string,
+     *  href: string,
+     *  external?: boolean
+     * }
+     */
+    navbarItems: [],
+
+    /**
+     * Add support / donation links on the navbar
+     * Example item:
+     * {
+     *  name: string,
+     *  currency: string,
+     *  href: string,
+     * }
+     */
+    supports: [],
+  },
+};
+
+export default config;`;
+
+export async function generateConfig(data: z.input<typeof Schema_App_Configuration>) {
+  const generated = config_template
+    .replace("{{version}}", `"${pkg.version}"`)
+
+    .replace("{{apiConfig.rootFolder}}", `"${await encryptData(data.api.rootFolder, data.environment.ENCRYPTION_KEY)}"`)
+    .replace("{{apiConfig.isTeamDrive}}", `${data.api.isTeamDrive}`)
+    .replace(
+      "{{apiConfig.sharedDrive}}",
+      `"${data.api.sharedDrive ? await encryptData(data.api.sharedDrive, data.environment.ENCRYPTION_KEY) : ""}"`,
+    )
+    .replace("{{apiConfig.itemsPerPage}}", `${data.api.itemsPerPage}`)
+    .replace("{{apiConfig.searchResult}}", `${data.api.searchResult}`)
+    .replace("{{apiConfig.proxyThumbnail}}", `${data.api.proxyThumbnail}`)
+    .replace("{{apiConfig.allowDownloadProtectedFile}}", `${data.api.allowDownloadProtectedFile}`)
+    .replace("{{apiConfig.temporaryTokenDuration}}", `${data.api.temporaryTokenDuration}`)
+    .replace("{{apiConfig.maxFileSize}}", `${data.api.maxFileSize}`)
+    .replace("{{apiConfig.streamMaxSize}}", `${data.api.streamMaxSize}`)
+
+    .replace("{{siteConfig.siteName}}", `"${data.site.siteName}"`)
+    .replace("{{siteConfig.siteNameTemplate}}", `"${data.site.siteNameTemplate}"`)
+    .replace("{{siteConfig.siteDescription}}", `"${data.site.siteDescription}"`)
+    .replace("{{siteConfig.siteAuthor}}", `"${data.site.siteAuthor}"`)
+    .replace("{{siteConfig.twitterHandle}}", `"${data.site.twitterHandle}"`)
+    .replace("{{siteConfig.showFileExtension}}", `${data.site.showFileExtension}`)
+    .replace("{{siteConfig.privateIndex}}", `${data.site.privateIndex}`);
+
+  return generated;
+}
diff --git a/src/data/template/index.ts b/src/data/template/index.ts
new file mode 100644
index 0000000..3ea24a0
--- /dev/null
+++ b/src/data/template/index.ts
@@ -0,0 +1,2 @@
+export { generateConfig } from "./configuration";
+export { generateTheme } from "./theme";
diff --git a/src/data/template/theme.ts b/src/data/template/theme.ts
new file mode 100644
index 0000000..53f8a9a
--- /dev/null
+++ b/src/data/template/theme.ts
@@ -0,0 +1,96 @@
+import { z } from "zod";
+import pkg from "~/../package.json";
+
+import { Schema_Theme } from "~/types/schema";
+
+const template = `/* Version: ${pkg.version} */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Shadcn/ui theme */
+@layer base {
+  :root {
+{{lightTheme}}
+  }
+
+  .dark {
+{{darkTheme}}
+  }
+
+  div.preview * {
+    @apply !transition-none;
+  }
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+@layer base {
+  :root {
+    @apply text-[100%];
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  ::-webkit-scrollbar {
+    @apply h-1.5 w-1.5;
+  }
+  ::-webkit-scrollbar-track {
+    @apply bg-primary/5;
+  }
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-primary/25 hover:bg-primary/50;
+  }
+
+  /* Typography */
+  h1 {
+    @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+  }
+  h2 {
+    @apply scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0;
+  }
+  h3 {
+    @apply scroll-m-20 text-2xl font-semibold tracking-tight;
+  }
+  h4 {
+    @apply scroll-m-20 text-xl font-semibold tracking-tight;
+  }
+  .paragraph {
+    @apply leading-7 [&:not(:first-child)]:mt-6;
+  }
+  blockquote {
+    @apply mt-6 border-l-2 pl-6 italic;
+  }
+  ul {
+    @apply my-6 ml-6 list-disc [&>li]:mt-2;
+  }
+  .lead {
+    @apply text-xl text-muted-foreground;
+  }
+  .large {
+    @apply text-lg font-semibold;
+  }
+  .muted {
+    @apply text-sm text-muted-foreground;
+  }
+  small {
+    @apply text-sm font-medium leading-none;
+  }
+}
+`;
+
+export function generateTheme(theme: Record<"light" | "dark", z.input<typeof Schema_Theme>>) {
+  const lightTheme = Object.entries(theme.light)
+    .map(([key, value]) => `    --${key}: ${value};`)
+    .join("\n");
+  const darkTheme = Object.entries(theme.dark)
+    .map(([key, value]) => `    --${key}: ${value};`)
+    .join("\n");
+
+  return template.replace("{{lightTheme}}", lightTheme).replace("{{darkTheme}}", darkTheme);
+}
diff --git a/src/hooks/useLoading.ts b/src/hooks/useLoading.ts
new file mode 100644
index 0000000..6637b8b
--- /dev/null
+++ b/src/hooks/useLoading.ts
@@ -0,0 +1,23 @@
+"use client";
+
+import { DependencyList, useEffect, useState } from "react";
+
+type Props = {
+  awaitFor?: () => Promise<void>;
+  deps?: DependencyList;
+};
+export default function useLoading(awaitFor?: () => Promise<void>, deps: DependencyList = []) {
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (awaitFor) {
+      awaitFor().finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return loading;
+}
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
index 2fd82bf..dc26a4b 100644
--- a/src/hooks/useLocalStorage.ts
+++ b/src/hooks/useLocalStorage.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 type SetValue<T> = (value: T | ((val: T) => T)) => void;
@@ -21,8 +23,7 @@ export default function useLocalStorage<T>(key: string, initialValue: T) {
   // Create dispatch function to set or remove localStorage
   const setValue: SetValue<T> = (value) => {
     try {
-      const valueToStore =
-        value instanceof Function ? value(storedValue) : value;
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
       setStoredValue(valueToStore);
       window.localStorage.setItem(key, JSON.stringify(valueToStore));
     } catch (error) {
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
index 8188657..0403df2 100644
--- a/src/hooks/useMediaQuery.ts
+++ b/src/hooks/useMediaQuery.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 export default function useMediaQuery(query: string) {
diff --git a/src/styles/globals.css b/src/styles/globals.css
deleted file mode 100644
index d285b99..0000000
--- a/src/styles/globals.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html,
-body {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-@layer base {
-  * {
-    @apply outline-none;
-    @apply focus-visible:outline-accent-500 focus-visible:outline-2 focus-visible:-outline-offset-1;
-  }
-
-  html,
-  body {
-    @apply bg-primary-950;
-  }
-
-  ::-webkit-scrollbar {
-    @apply h-1 w-1;
-  }
-
-  ::-webkit-scrollbar-track {
-    @apply bg-primary-950;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    @apply bg-primary-600 hover:bg-primary-500;
-  }
-
-  input::-ms-reveal,
-  input::-ms-clear {
-    @apply hidden;
-  }
-}
diff --git a/src/styles/highlight.css b/src/styles/highlight.css
deleted file mode 100644
index d7542db..0000000
--- a/src/styles/highlight.css
+++ /dev/null
@@ -1,472 +0,0 @@
-:root {
-  /**
-    * One Light theme for prism.js
-    * Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
-    */
-  /* From colors.less */
-  --mono-1: hsl(230, 8%, 24%);
-  --mono-2: hsl(230, 6%, 44%);
-  --mono-3: hsl(230, 4%, 64%);
-  --hue-1: hsl(198, 99%, 37%);
-  --hue-2: hsl(221, 87%, 60%);
-  --hue-3: hsl(301, 63%, 40%);
-  --hue-4: hsl(119, 34%, 47%);
-  --hue-5: hsl(5, 74%, 59%);
-  --hue-5-2: hsl(344, 84%, 43%);
-  --hue-6: hsl(35, 99%, 36%);
-  --hue-6-2: hsl(35, 99%, 40%);
-  --syntax-fg: hsl(230, 8%, 24%);
-  --syntax-bg: hsl(230, 1%, 98%);
-  --syntax-gutter: hsl(230, 1%, 62%);
-  --syntax-guide: hsla(230, 8%, 24%, 0.2);
-  --syntax-accent: hsl(230, 100%, 66%);
-  /* From syntax-variables.less */
-  --syntax-selection-color: hsl(230, 1%, 90%);
-  --syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
-  --syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
-}
-
-body {
-  /**
-    * One Dark theme for prism.js
-    * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
-    */
-  /* From colors.less */
-  --mono-1: hsl(220, 14%, 71%);
-  --mono-2: hsl(220, 9%, 55%);
-  --mono-3: hsl(220, 10%, 40%);
-  --hue-1: hsl(187, 47%, 55%);
-  --hue-2: hsl(207, 82%, 66%);
-  --hue-3: hsl(286, 60%, 67%);
-  --hue-4: hsl(95, 38%, 62%);
-  --hue-5: hsl(355, 65%, 65%);
-  --hue-5-2: hsl(5, 48%, 51%);
-  --hue-6: hsl(29, 54%, 61%);
-  --hue-6-2: hsl(39, 67%, 69%);
-  --syntax-fg: hsl(220, 14%, 71%);
-  --syntax-bg: hsl(220, 13%, 18%);
-  --syntax-gutter: hsl(220, 14%, 45%);
-  --syntax-guide: hsla(220, 14%, 71%, 0.15);
-  --syntax-accent: hsl(220, 100%, 66%);
-  /* From syntax-variables.less */
-  --syntax-selection-color: hsl(220, 13%, 28%);
-  --syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
-  --syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
-}
-
-code[class*="language-"],
-pre[class*="language-"],
-pre {
-  background: var(--syntax-bg);
-  color: var(--syntax-fg);
-  text-shadow: 0 1px rgba(0, 0, 0, 0);
-  font-size: inherit;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  line-height: 1.5;
-  -moz-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Selection */
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] *::-moz-selection,
-pre[class*="language-"] *::-moz-selection {
-  background: var(--syntax-selection-color);
-  color: inherit;
-  text-shadow: none;
-}
-
-code[class*="language-"]::selection,
-code[class*="language-"] *::selection,
-pre[class*="language-"] *::selection {
-  background: var(--syntax-selection-color);
-  color: inherit;
-  text-shadow: none;
-}
-
-/* Code blocks */
-pre[class*="language-"],
-pre {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  border-radius: 0.3em;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: 0.2em 0.3em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-/* Print */
-@media print {
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-.token.comment,
-.token.prolog,
-.token.cdata {
-  color: var(--mono-3);
-}
-
-.token.doctype,
-.token.punctuation,
-.token.entity {
-  color: var(--syntax-fg);
-}
-
-.token.attr-name,
-.token.class-name,
-.token.boolean,
-.token.constant,
-.token.number,
-.token.atrule {
-  color: var(--hue-6);
-}
-
-.token.keyword {
-  color: var(--hue-3);
-}
-
-.token.property,
-.token.tag,
-.token.symbol,
-.token.deleted,
-.token.important {
-  color: var(--hue-5);
-}
-
-.token.selector,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted,
-.token.regex,
-.token.attr-value,
-.token.attr-value > .token.punctuation {
-  color: var(--hue-4);
-}
-
-.token.variable,
-.token.operator,
-.token.function {
-  color: var(--hue-2);
-}
-
-.token.url {
-  color: var(--hue-1);
-}
-
-/* HTML overrides */
-.token.attr-value > .token.punctuation.attr-equals,
-.token.special-attr > .token.attr-value > .token.value.css {
-  color: var(--syntax-fg);
-}
-
-/* CSS overrides */
-.language-css .token.selector {
-  color: var(--hue-5);
-}
-
-.language-css .token.property {
-  color: var(--syntax-fg);
-}
-
-.language-css .token.function,
-.language-css .token.url > .token.function {
-  color: var(--hue-1);
-}
-
-.language-css .token.url > .token.string.url {
-  color: var(--hue-4);
-}
-
-.language-css .token.important,
-.language-css .token.atrule .token.rule {
-  color: var(--hue-3);
-}
-
-/* JS overrides */
-.language-javascript .token.operator {
-  color: var(--hue-3);
-}
-
-.language-javascript
-  .token.template-string
-  > .token.interpolation
-  > .token.interpolation-punctuation.punctuation {
-  color: var(--hue-5-2);
-}
-
-/* JSON overrides */
-.language-json .token.operator {
-  color: var(--syntax-fg);
-}
-
-.language-json .token.null.keyword {
-  color: var(--hue-6);
-}
-
-/* MD overrides */
-.language-markdown .token.url,
-.language-markdown .token.url > .token.operator,
-.language-markdown .token.url-reference.url > .token.string {
-  color: var(--syntax-fg);
-}
-
-.language-markdown .token.url > .token.content {
-  color: var(--hue-2);
-}
-
-.language-markdown .token.url > .token.url,
-.language-markdown .token.url-reference.url {
-  color: var(--hue-1);
-}
-
-.language-markdown .token.blockquote.punctuation,
-.language-markdown .token.hr.punctuation {
-  color: var(--mono-3);
-  font-style: italic;
-}
-
-.language-markdown .token.code-snippet {
-  color: var(--hue-4);
-}
-
-.language-markdown .token.bold .token.content {
-  color: var(--hue-6);
-}
-
-.language-markdown .token.italic .token.content {
-  color: var(--hue-3);
-}
-
-.language-markdown .token.strike .token.content,
-.language-markdown .token.strike .token.punctuation,
-.language-markdown .token.list.punctuation,
-.language-markdown .token.title.important > .token.punctuation {
-  color: var(--hue-5);
-}
-
-/* General */
-.token.bold {
-  font-weight: bold;
-}
-
-.token.comment,
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.namespace {
-  opacity: 0.8;
-}
-
-/* Plugin overrides */
-/* Selectors should have higher specificity than those in the plugins' default stylesheets */
-
-/* Show Invisible plugin overrides */
-.token.token.tab:not(:empty):before,
-.token.token.cr:before,
-.token.token.lf:before,
-.token.token.space:before {
-  color: var(--syntax-guide);
-  text-shadow: none;
-}
-
-/* Toolbar plugin overrides */
-/* Space out all buttons and move them away from the right edge of the code block */
-div.code-toolbar > .toolbar.toolbar > .toolbar-item {
-  margin-right: 0.4em;
-}
-
-/* Styling the buttons */
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
-  background: var(--syntax-gutter-background-color-selected);
-  color: var(--mono-2);
-  padding: 0.1em 0.4em;
-  border-radius: 0.3em;
-}
-
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
-div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
-  background: var(--syntax-selection-color);
-  color: var(--syntax-fg);
-}
-
-/* Line Highlight plugin overrides */
-/* The highlighted line itself */
-.line-highlight.line-highlight {
-  background: var(--syntax-cursor-line);
-}
-
-/* Default line numbers in Line Highlight plugin */
-.line-highlight.line-highlight:before,
-.line-highlight.line-highlight[data-end]:after {
-  background: var(--syntax-gutter-background-color-selected);
-  color: var(--syntax-fg);
-  padding: 0.1em 0.6em;
-  border-radius: 0.3em;
-  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
-}
-
-/* Hovering over a linkable line number (in the gutter area) */
-/* Requires Line Numbers plugin as well */
-pre[id].linkable-line-numbers.linkable-line-numbers
-  span.line-numbers-rows
-  > span:hover:before {
-  background-color: var(--syntax-cursor-line);
-}
-
-/* Line Numbers and Command Line plugins overrides */
-/* Line separating gutter from coding area */
-.line-numbers.line-numbers .line-numbers-rows,
-.command-line .command-line-prompt {
-  border-right-color: var(--syntax-guide);
-}
-
-/* Stuff in the gutter */
-.line-numbers .line-numbers-rows > span:before,
-.command-line .command-line-prompt > span:before {
-  color: var(--syntax-gutter);
-}
-
-/* Match Braces plugin overrides */
-/* Note: Outline colour is inherited from the braces */
-.rainbow-braces .token.token.punctuation.brace-level-1,
-.rainbow-braces .token.token.punctuation.brace-level-5,
-.rainbow-braces .token.token.punctuation.brace-level-9 {
-  color: var(--hue-5);
-}
-
-.rainbow-braces .token.token.punctuation.brace-level-2,
-.rainbow-braces .token.token.punctuation.brace-level-6,
-.rainbow-braces .token.token.punctuation.brace-level-10 {
-  color: var(--hue-4);
-}
-
-.rainbow-braces .token.token.punctuation.brace-level-3,
-.rainbow-braces .token.token.punctuation.brace-level-7,
-.rainbow-braces .token.token.punctuation.brace-level-11 {
-  color: var(--hue-2);
-}
-
-.rainbow-braces .token.token.punctuation.brace-level-4,
-.rainbow-braces .token.token.punctuation.brace-level-8,
-.rainbow-braces .token.token.punctuation.brace-level-12 {
-  color: var(--hue-3);
-}
-
-/* Diff Highlight plugin overrides */
-/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
-pre.diff-highlight > code .token.token.deleted:not(.prefix),
-pre > code.diff-highlight .token.token.deleted:not(.prefix) {
-  background-color: hsla(353, 100%, 66%, 0.15);
-}
-
-pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
-pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
-pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
-pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
-  background-color: hsla(353, 95%, 66%, 0.25);
-}
-
-pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
-pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
-pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
-pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
-  background-color: hsla(353, 95%, 66%, 0.25);
-}
-
-pre.diff-highlight > code .token.token.inserted:not(.prefix),
-pre > code.diff-highlight .token.token.inserted:not(.prefix) {
-  background-color: hsla(137, 100%, 55%, 0.15);
-}
-
-pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
-pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
-pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
-pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
-  background-color: hsla(135, 73%, 55%, 0.25);
-}
-
-pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
-pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
-pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
-pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
-  background-color: hsla(135, 73%, 55%, 0.25);
-}
-
-/* Previewers plugin overrides */
-/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
-/* Border around popup */
-.prism-previewer.prism-previewer:before,
-.prism-previewer-gradient.prism-previewer-gradient div {
-  border-color: hsl(224, 13%, 17%);
-}
-
-/* Angle and time should remain as circles and are hence not included */
-.prism-previewer-color.prism-previewer-color:before,
-.prism-previewer-gradient.prism-previewer-gradient div,
-.prism-previewer-easing.prism-previewer-easing:before {
-  border-radius: 0.3em;
-}
-
-/* Triangles pointing to the code */
-.prism-previewer.prism-previewer:after {
-  border-top-color: hsl(224, 13%, 17%);
-}
-
-.prism-previewer-flipped.prism-previewer-flipped.after {
-  border-bottom-color: hsl(224, 13%, 17%);
-}
-
-/* Background colour within the popup */
-.prism-previewer-angle.prism-previewer-angle:before,
-.prism-previewer-time.prism-previewer-time:before,
-.prism-previewer-easing.prism-previewer-easing {
-  background: hsl(219, 13%, 22%);
-}
-
-/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
-/* For time, this is the alternate colour */
-.prism-previewer-angle.prism-previewer-angle circle,
-.prism-previewer-time.prism-previewer-time circle {
-  stroke: var(--syntax-fg);
-  stroke-opacity: 1;
-}
-
-/* Stroke colours of the handle, direction point, and vector itself */
-.prism-previewer-easing.prism-previewer-easing circle,
-.prism-previewer-easing.prism-previewer-easing path,
-.prism-previewer-easing.prism-previewer-easing line {
-  stroke: var(--syntax-fg);
-}
-
-/* Fill colour of the handle */
-.prism-previewer-easing.prism-previewer-easing circle {
-  fill: transparent;
-}
diff --git a/src/styles/markdown.css b/src/styles/markdown.css
deleted file mode 100644
index c247657..0000000
--- a/src/styles/markdown.css
+++ /dev/null
@@ -1,107 +0,0 @@
-@tailwind components;
-
-@layer components {
-  .markdown {
-    @apply bg-inherit text-base leading-relaxed tracking-wide;
-  }
-
-  .markdown p {
-    @apply leading-loose;
-  }
-
-  .markdown h1 {
-    @apply text-4xl font-medium;
-  }
-  .markdown h2 {
-    @apply text-3xl font-medium;
-  }
-  .markdown h3 {
-    @apply text-2xl font-medium;
-  }
-  .markdown h4 {
-    @apply text-xl font-medium;
-  }
-  .markdown h5 {
-    @apply text-lg font-medium;
-  }
-  .markdown h6 {
-    @apply text-base;
-  }
-
-  .markdown h1,
-  .markdown h2,
-  .markdown h3 {
-    @apply border-b-primary-700 my-4 border-b-2 first-letter:capitalize;
-  }
-
-  .markdown code:not(pre code) {
-    @apply bg-primary-800 rounded-md px-2 py-0.5 leading-normal;
-  }
-
-  .markdown a {
-    @apply text-accent-500 transition-smooth opacity-80 hover:opacity-100;
-  }
-
-  .markdown p {
-    @apply whitespace-normal;
-  }
-
-  .markdown img {
-    @apply rounded-lg;
-  }
-
-  .markdown ul {
-    @apply list-disc leading-loose;
-  }
-
-  .markdown ol {
-    @apply list-decimal leading-loose;
-  }
-
-  .markdown li {
-    @apply ml-8;
-  }
-
-  .markdown table {
-    @apply mb-4 block w-full border-collapse border-spacing-0 overflow-auto;
-  }
-
-  .markdown table th,
-  .markdown table td {
-    @apply border-primary-700 border px-2 py-1;
-  }
-
-  .markdown table th {
-    @apply bg-primary-950 text-primary-50;
-  }
-
-  .markdown table tr {
-    @apply bg-primary-900;
-  }
-
-  .markdown table tr:nth-child(2n) {
-    @apply bg-primary-800;
-  }
-
-  .markdown ul.contains-task-list {
-    @apply list-none;
-  }
-
-  .markdown ul.contains-task-list li {
-    @apply ml-1 flex items-center;
-  }
-
-  .markdown input[type="checkbox"] {
-    @apply mr-2 aspect-square h-4 w-4 rounded-full p-2;
-    @apply border-primary-500 appearance-none border;
-    @apply disabled:bg-primary-600 disabled:checked:bg-accent-400;
-  }
-
-  .markdown blockquote {
-    @apply border-l-info-500 bg-primary-800 my-2 rounded-r-md border-l-4 py-4 pl-2;
-  }
-
-  .markdown hr {
-    @apply border-b-primary-500 my-4 border-b border-t-0;
-  }
-}
diff --git a/src/schema.ts b/src/types/schema.ts
similarity index 94%
rename from src/schema.ts
rename to src/types/schema.ts
index c626c4f..91abdee 100644
--- a/src/schema.ts
+++ b/src/types/schema.ts
@@ -133,12 +133,7 @@ export const Schema_Config_Site = z.object({
 
   toaster: z
     .object({
-      position: z.enum([
-        "top-left",
-        "top-right",
-        "bottom-left",
-        "bottom-right",
-      ]),
+      position: z.enum(["top-left", "top-right", "bottom-left", "bottom-right"]),
       duration: z.number().positive(),
     })
     .optional()
@@ -201,18 +196,16 @@ export const Schema_App_Configuration = z.object({
   site: Schema_Config_Site,
 });
 
-export type ConfigurationCategory = keyof z.infer<
+export type ConfigurationCategory = keyof z.infer<typeof Schema_App_Configuration>;
+export type ConfigurationKeys<T extends keyof z.infer<typeof Schema_App_Configuration>> = keyof z.infer<
   typeof Schema_App_Configuration
->;
-export type ConfigurationKeys<
-  T extends keyof z.infer<typeof Schema_App_Configuration>,
-> = keyof z.infer<typeof Schema_App_Configuration>[T];
+>[T];
 export type ConfigurationValue<
   T extends keyof z.infer<typeof Schema_App_Configuration>,
   K extends keyof z.infer<typeof Schema_App_Configuration>[T],
 > = z.infer<typeof Schema_App_Configuration>[T][K];
 
-export type ConfigState = "idle" | "loading";
+export type ButtonState = "idle" | "loading";
 
 export const Schema_Theme = z.object({
   "background": z.string(),
@@ -236,3 +229,4 @@ export const Schema_Theme = z.object({
   "ring": z.string(),
   "radius": z.string(),
 });
+export type ThemeKeys = keyof z.infer<typeof Schema_Theme>;
diff --git a/src/utils/bytesFormat.ts b/src/utils/bytesFormat.ts
index 6689bf2..b0fb08b 100644
--- a/src/utils/bytesFormat.ts
+++ b/src/utils/bytesFormat.ts
@@ -1,4 +1,4 @@
-export default function bytesToReadable(bytes: number) {
+export function bytesToReadable(bytes: number) {
   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
   if (bytes === 0) return "0 Byte";
   const i = Math.floor(Math.log(bytes) / Math.log(1024));
diff --git a/src/utils.ts b/src/utils/cn.ts
similarity index 100%
rename from src/utils.ts
rename to src/utils/cn.ts
diff --git a/src/utils/downloadBlob.ts b/src/utils/downloadBlob.ts
new file mode 100644
index 0000000..551f6e1
--- /dev/null
+++ b/src/utils/downloadBlob.ts
@@ -0,0 +1,17 @@
+export function downloadBlob(data: Blob, filename: string) {
+  const url = URL.createObjectURL(data);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+
+  const afterClick = () => {
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+      removeEventListener("click", afterClick);
+      anchor.remove();
+    }, 100);
+  };
+  anchor.addEventListener("click", afterClick);
+
+  anchor.click();
+}
diff --git a/src/utils/encryptionHelper/hash.ts b/src/utils/encryptionHelper.ts
similarity index 59%
rename from src/utils/encryptionHelper/hash.ts
rename to src/utils/encryptionHelper.ts
index 64c0a56..520d373 100644
--- a/src/utils/encryptionHelper/hash.ts
+++ b/src/utils/encryptionHelper.ts
@@ -15,17 +15,11 @@ const generateKey = () => {
 };
 const key = generateKey();
 
-export async function encryptData(
-  data: string,
-  encryptKey: string = key,
-): Promise<string> {
+export async function encryptData(data: string, encryptKey: string = key): Promise<string> {
   try {
     const ivKey = Buffer.from(key);
     const cipher = crypto.createCipheriv("aes-128-cbc", encryptKey, ivKey);
-    return Buffer.concat([
-      cipher.update(data, "utf-8"),
-      cipher.final(),
-    ]).toString("hex");
+    return Buffer.concat([cipher.update(data, "utf-8"), cipher.final()]).toString("hex");
   } catch (error) {
     const e = error as Error;
     console.error(e.message);
@@ -33,23 +27,15 @@ export async function encryptData(
   }
 }
 
-export async function decryptData(
-  hash: string,
-  encryptKey: string = key,
-): Promise<string> {
+export async function decryptData(hash: string, encryptKey: string = key): Promise<string> {
   try {
     const ivKey = Buffer.from(key);
     const decipher = crypto.createDecipheriv("aes-128-cbc", encryptKey, ivKey);
 
-    return Buffer.concat([
-      decipher.update(hash, "hex"),
-      decipher.final(),
-    ]).toString("utf-8");
+    return Buffer.concat([decipher.update(hash, "hex"), decipher.final()]).toString("utf-8");
   } catch (error) {
     const e = error as Error;
     console.error(e.message);
-    throw new Error(
-      "Failed to decrypt data, either invalid hash or encryption key.",
-    );
+    throw new Error("Failed to decrypt data, either invalid hash or encryption key.");
   }
 }
diff --git a/src/utils/fileLoadHelper.ts b/src/utils/fileLoadHelper.ts
new file mode 100644
index 0000000..c969d04
--- /dev/null
+++ b/src/utils/fileLoadHelper.ts
@@ -0,0 +1,40 @@
+import toast from "react-hot-toast";
+
+type Props = {
+  accept: string;
+  fileName?: string;
+  onLoad: (result: string) => void;
+};
+export function fileLoadHelper({ accept, fileName, onLoad }: Props) {
+  const fileInput = document.createElement("input");
+  fileInput.type = "file";
+  fileInput.accept = accept;
+  fileInput.onchange = async (fileEvent) => {
+    const file = (fileEvent.target as HTMLInputElement).files?.[0];
+    if (!file) return toast.error("No file selected.");
+
+    if (fileName) {
+      const filename = file.name;
+      if (filename.toLocaleLowerCase() !== fileName.toLocaleLowerCase()) {
+        return toast.error(`Invalid file selected. Expected ${fileName}.`);
+      }
+    }
+
+    const reader = new FileReader();
+    reader.onload = async (readerEvent) => {
+      const result = readerEvent.target?.result as string;
+      if (!result) return toast.error("Failed to read file.");
+
+      onLoad(result);
+
+      fileInput.value = "";
+    };
+    reader.onloadend = () => {
+      fileInput.remove();
+    };
+
+    reader.readAsText(file);
+  };
+  fileInput.click();
+  fileInput.remove();
+}
diff --git a/src/utils/footerFormatter.ts b/src/utils/footerFormatter.ts
index 5039b3d..b5bb638 100644
--- a/src/utils/footerFormatter.ts
+++ b/src/utils/footerFormatter.ts
@@ -1,19 +1,13 @@
-import config from "~/config/gIndex.config";
+import config from "config";
 
 export function formatFooter(text: string[]): string {
   return text
     .join("\n")
     .replaceAll("{{ year }}", new Date().getFullYear().toString())
-    .replaceAll(
-      "{{ repository }}",
-      "[Repository](https://github.com/mbaharip/next-gdrive-index)",
-    )
+    .replaceAll("{{ repository }}", "[Repository](https://github.com/mbaharip/next-gdrive-index)")
     .replaceAll("{{ author }}", config.siteConfig.siteAuthor || "mbaharip")
     .replaceAll("{{ version }}", config.version || "0.0.0")
     .replaceAll("{{ siteName }}", config.siteConfig.siteName)
-    .replaceAll(
-      "{{ handle }}",
-      config.siteConfig.twitterHandle || "@__mbaharip__",
-    )
+    .replaceAll("{{ handle }}", config.siteConfig.twitterHandle || "@__mbaharip__")
     .replaceAll("{{ creator }}", "mbaharip");
 }
diff --git a/src/utils/gdriveInstance.ts b/src/utils/gdriveInstance.ts
index f399f0e..35b252c 100644
--- a/src/utils/gdriveInstance.ts
+++ b/src/utils/gdriveInstance.ts
@@ -18,16 +18,6 @@ const serviceB64: {
   client_x509_cert_url: string;
   universe_domain: string;
 } = JSON.parse(base64Decode(process.env.GD_SERVICE_B64 as string));
-// const serviceAccount = {
-//   email: process.env.GD_SERVICE_EMAIL,
-//   key: (process.env.GD_SERVICE_PVKEY as string).replace(
-//     /\\n/g,
-//     "\n",
-//   ),
-//   projectId: process.env.GD_SERVICE_PROJECT_ID,
-//   clientId: process.env.GD_SERVICE_CLIENT_ID,
-//   scopes: ["https://www.googleapis.com/auth/drive"],
-// };
 const serviceAccount = {
   email: serviceB64.client_email,
   key: serviceB64.private_key,
diff --git a/src/utils/isDev.ts b/src/utils/isDev.ts
index 6a1d0fa..035944b 100644
--- a/src/utils/isDev.ts
+++ b/src/utils/isDev.ts
@@ -2,9 +2,7 @@
  * It is a helper to check if it's not in production environment.
  * If you're developing, and not using vercel, you can add your own condition.
  */
-const isDev =
+export const isDev =
   process.env.NODE_ENV === "development" ||
   process.env.VERCEL_ENV === "development" ||
   process.env.VERCEL_ENV === "preview";
-
-export default isDev;
diff --git a/src/utils/parseConfigFile.ts b/src/utils/parseConfigFile.ts
index cd80d6f..22a9e83 100644
--- a/src/utils/parseConfigFile.ts
+++ b/src/utils/parseConfigFile.ts
@@ -1,11 +1,8 @@
 // Used for configuration on deploy guide page
+import { HslColor } from "react-colorful";
 import { z } from "zod";
-import {
-  Schema_Config,
-  Schema_Config_API,
-  Schema_Config_Site,
-  Schema_Old_Config,
-} from "~/schema";
+
+import { Schema_Config, Schema_Config_API, Schema_Config_Site, Schema_Old_Config } from "~/types/schema";
 
 export function parseConfigFile(config: string):
   | {
@@ -32,7 +29,21 @@ export function parseConfigFile(config: string):
       .replace(/\t/g, "") // Remove line breaks and tabs
 
       .replace(/basePath:(.*?),/g, 'basePath: "placeholder-domain",') // Replace basePath variable with placeholder
-      .replace(/maxFileSize:(.*?),/g, "maxFileSize: 4194304,") // Set maxFileSize to 4MB
+      .replace(/maxFileSize:(.*?),/g, (str) => {
+        if (!str) return "maxFileSize: 4194304,"; // Set maxFileSize to 4MB
+        const value = str.split(":")[1].split(",")[0].trim();
+        return `maxFileSize: ${eval(value)},`;
+      }) // Set maxFileSize to 4MB
+      .replace(/streamMaxSize:(.*?),/g, (str) => {
+        if (!str) return "streamMaxSize: 104857600,";
+        const value = str.split(":")[1].split(",")[0].trim();
+        return `streamMaxSize: ${eval(value)},`;
+      }) // Set streamMaxSize to 100MB
+      .replace(/temporaryTokenDuration:(.*?),/g, (str) => {
+        if (!str) return "temporaryTokenDuration: 6,";
+        const value = str.split(":")[1].split(",")[0].trim();
+        return `temporaryTokenDuration: ${eval(value)},`;
+      })
 
       .replace(/([a-zA-Z]*?):\s/g, '"$1": ') // Add double quotes to keys
       .trim()
@@ -45,14 +56,9 @@ export function parseConfigFile(config: string):
 
     const parseJSON = JSON.parse(configuration);
     const version: string | undefined = parseJSON.version;
-    if (!version)
-      throw new Error(
-        "Version not found, please check your configuration file.",
-      );
+    if (!version) throw new Error("Version not found, please check your configuration file.");
 
-    const data = parseJSON as
-      | z.infer<typeof Schema_Old_Config>
-      | z.infer<typeof Schema_Config>;
+    const data = parseJSON as z.infer<typeof Schema_Old_Config> | z.infer<typeof Schema_Config>;
 
     return {
       api: data.apiConfig as z.infer<typeof Schema_Config_API>,
@@ -63,3 +69,12 @@ export function parseConfigFile(config: string):
     return { success: false, message: e.message };
   }
 }
+
+export function parseThemeValue(color: string): HslColor {
+  const [h, s, l] = color.split(" ");
+  return {
+    h: parseFloat(h),
+    s: parseFloat(s),
+    l: parseFloat(l),
+  };
+}
diff --git a/src/utils/previewHelper.ts b/src/utils/previewHelper.ts
index 6295a2e..965f057 100644
--- a/src/utils/previewHelper.ts
+++ b/src/utils/previewHelper.ts
@@ -70,18 +70,6 @@ const extensionsMap: Record<FileTypes, string[]> = {
   manga: ["cbz"],
 };
 
-// const previewMap: Record<FileTypes | "unknown", (props: PreviewProps) => JSX.Element> = {
-//   image: ImagePreview,
-//   audio: AudioPreview,
-//   video: VideoPreview,
-//   markdown: RichPreview,
-//   pdf: DocumentPreview,
-//   document: DocumentPreview,
-//   code: CodePreview,
-//   text: CodePreview,
-//   manga: MangaPreview,
-//   unknown: UnknownPreview,
-// };
 const iconMap: Record<FileTypes | "unknown", keyof typeof icons> = {
   image: "Image",
   audio: "Music",
@@ -96,24 +84,7 @@ const iconMap: Record<FileTypes | "unknown", keyof typeof icons> = {
   unknown: "File",
 };
 
-// export function getPreviewComponent(fileExtension: string, mimeType: string) {
-//   if (fileExtension === "ts") {
-//     if (mimeType.includes("video")) {
-//       return previewMap["video"];
-//     } else {
-//       return previewMap["code"];
-//     }
-//   }
-//   const type = Object.keys(extensionsMap).find((key) =>
-//     extensionsMap[key as keyof typeof extensionsMap].includes(fileExtension),
-//   );
-//   return previewMap[type as keyof typeof previewMap] ?? previewMap["unknown"];
-// }
-
-export function getFileType(
-  fileExtension: string,
-  mimeType: string,
-): FileTypes | "unknown" {
+export function getFileType(fileExtension: string, mimeType: string): FileTypes | "unknown" {
   if (fileExtension === "ts") {
     if (mimeType.includes("video")) {
       return "video";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 83d0966..445dca2 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,12 +3,7 @@ import tw from "tailwindcss/defaultTheme";
 
 const config: Config = {
   darkMode: ["class"],
-  content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
-  ],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
   prefix: "",
   theme: {
     container: {
diff --git a/tsconfig.json b/tsconfig.json
index 32d8714..bfb6a63 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,18 +16,9 @@
     "incremental": true,
     "baseUrl": "./src",
     "paths": {
-      // "@/*": ["./src/*"],
-      // "components/*": [
-      //   "app/(__components)/*"
-      // ],
       "~/*": ["*"],
-      "components/*": ["components/*"],
-      "config": ["config/gIndex.config.ts"],
-      "hooks/*": ["hooks/*"],
-      "styles/*": ["styles/*"],
-      "utils/*": ["utils/*"],
-      "types/*": ["types/*"],
-      "context/*": ["context/*"]
+      "actions": ["app/actions.ts"],
+      "config": ["config/gIndex.config.ts"]
     },
     "plugins": [
       {
@@ -35,18 +26,6 @@
       }
     ]
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.js",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules",
-    ".next",
-    "**/*/_legacy/**/*",
-    "**/*/_app/**/*",
-    "**/*/_page/**/*"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", ".next", "**/*/_legacy/**/*", "**/*/_app/**/*", "**/*/_page/**/*"]
 }
diff --git a/yarn.lock b/yarn.lock
index e71512b..806e955 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,13 +5,6 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
-"@aashutoshrathi/word-wrap@npm:^1.2.3":
-  version: 1.2.6
-  resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
-  checksum: 10c0/53c2b231a61a46792b39a0d43bc4f4f776bb4542aa57ee04930676802e5501282c2fc8aac14e4cd1f1120ff8b52616b6ff5ab539ad30aa2277d726444b71619f
-  languageName: node
-  linkType: hard
-
 "@alloc/quick-lru@npm:^5.2.0":
   version: 5.2.0
   resolution: "@alloc/quick-lru@npm:5.2.0"
@@ -41,14 +34,14 @@ __metadata:
   linkType: hard
 
 "@babel/generator@npm:^7.23.0":
-  version: 7.24.4
-  resolution: "@babel/generator@npm:7.24.4"
+  version: 7.24.5
+  resolution: "@babel/generator@npm:7.24.5"
   dependencies:
-    "@babel/types": "npm:^7.24.0"
+    "@babel/types": "npm:^7.24.5"
     "@jridgewell/gen-mapping": "npm:^0.3.5"
     "@jridgewell/trace-mapping": "npm:^0.3.25"
     jsesc: "npm:^2.5.1"
-  checksum: 10c0/67a1b2f7cc985aaaa11b01e8ddd4fffa4f285837bc7a209738eb8203aa34bdafeb8507ed75fd883ddbabd641a036ca0a8d984e760f28ad4a9d60bff29d0a60bb
+  checksum: 10c0/0d64f880150e7dfb92ceff2b4ac865f36aa1e295120920246492ffd0146562dabf79ba8699af1c8833f8a7954818d4d146b7b02f808df4d6024fb99f98b2f78d
   languageName: node
   linkType: hard
 
@@ -79,55 +72,55 @@ __metadata:
   linkType: hard
 
 "@babel/helper-split-export-declaration@npm:^7.22.6":
-  version: 7.22.6
-  resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
+  version: 7.24.5
+  resolution: "@babel/helper-split-export-declaration@npm:7.24.5"
   dependencies:
-    "@babel/types": "npm:^7.22.5"
-  checksum: 10c0/d83e4b623eaa9622c267d3c83583b72f3aac567dc393dda18e559d79187961cb29ae9c57b2664137fc3d19508370b12ec6a81d28af73a50e0846819cb21c6e44
+    "@babel/types": "npm:^7.24.5"
+  checksum: 10c0/d7a812d67d031a348f3fb0e6263ce2dbe6038f81536ba7fb16db385383bcd6542b71833194303bf6d3d0e4f7b6b584c9c8fae8772122e2ce68fc9bdf07f4135d
   languageName: node
   linkType: hard
 
-"@babel/helper-string-parser@npm:^7.23.4":
+"@babel/helper-string-parser@npm:^7.24.1":
   version: 7.24.1
   resolution: "@babel/helper-string-parser@npm:7.24.1"
   checksum: 10c0/2f9bfcf8d2f9f083785df0501dbab92770111ece2f90d120352fda6dd2a7d47db11b807d111e6f32aa1ba6d763fe2dc6603d153068d672a5d0ad33ca802632b2
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.22.20":
-  version: 7.22.20
-  resolution: "@babel/helper-validator-identifier@npm:7.22.20"
-  checksum: 10c0/dcad63db345fb110e032de46c3688384b0008a42a4845180ce7cd62b1a9c0507a1bed727c4d1060ed1a03ae57b4d918570259f81724aaac1a5b776056f37504e
+"@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.24.5":
+  version: 7.24.5
+  resolution: "@babel/helper-validator-identifier@npm:7.24.5"
+  checksum: 10c0/05f957229d89ce95a137d04e27f7d0680d84ae48b6ad830e399db0779341f7d30290f863a93351b4b3bde2166737f73a286ea42856bb07c8ddaa95600d38645c
   languageName: node
   linkType: hard
 
 "@babel/highlight@npm:^7.24.2":
-  version: 7.24.2
-  resolution: "@babel/highlight@npm:7.24.2"
+  version: 7.24.5
+  resolution: "@babel/highlight@npm:7.24.5"
   dependencies:
-    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    "@babel/helper-validator-identifier": "npm:^7.24.5"
     chalk: "npm:^2.4.2"
     js-tokens: "npm:^4.0.0"
     picocolors: "npm:^1.0.0"
-  checksum: 10c0/98ce00321daedeed33a4ed9362dc089a70375ff1b3b91228b9f05e6591d387a81a8cba68886e207861b8871efa0bc997ceabdd9c90f6cce3ee1b2f7f941b42db
+  checksum: 10c0/e98047d3ad24608bfa596d000c861a2cc875af897427f2833b91a4e0d4cead07301a7ec15fa26093dcd61e036e2eed2db338ae54f93016fe0dc785fadc4159db
   languageName: node
   linkType: hard
 
 "@babel/parser@npm:^7.20.5, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0":
-  version: 7.24.4
-  resolution: "@babel/parser@npm:7.24.4"
+  version: 7.24.5
+  resolution: "@babel/parser@npm:7.24.5"
   bin:
     parser: ./bin/babel-parser.js
-  checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8
+  checksum: 10c0/8333a6ad5328bad34fa0e12bcee147c3345ea9a438c0909e7c68c6cfbea43c464834ffd7eabd1cbc1c62df0a558e22ffade9f5b29440833ba7b33d96a71f88c0
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.0":
-  version: 7.24.4
-  resolution: "@babel/runtime@npm:7.24.4"
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.1":
+  version: 7.24.5
+  resolution: "@babel/runtime@npm:7.24.5"
   dependencies:
     regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c
+  checksum: 10c0/05730e43e8ba6550eae9fd4fb5e7d9d3cb91140379425abcb2a1ff9cebad518a280d82c4c4b0f57ada26a863106ac54a748d90c775790c0e2cd0ddd85ccdf346
   languageName: node
   linkType: hard
 
@@ -170,40 +163,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.17.0, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.8.3":
-  version: 7.24.0
-  resolution: "@babel/types@npm:7.24.0"
+"@babel/types@npm:^7.17.0, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.5, @babel/types@npm:^7.8.3":
+  version: 7.24.5
+  resolution: "@babel/types@npm:7.24.5"
   dependencies:
-    "@babel/helper-string-parser": "npm:^7.23.4"
-    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    "@babel/helper-string-parser": "npm:^7.24.1"
+    "@babel/helper-validator-identifier": "npm:^7.24.5"
     to-fast-properties: "npm:^2.0.0"
-  checksum: 10c0/777a0bb5dbe038ca4c905fdafb1cdb6bdd10fe9d63ce13eca0bd91909363cbad554a53dc1f902004b78c1dcbc742056f877f2c99eeedff647333b1fadf51235d
+  checksum: 10c0/e1284eb046c5e0451b80220d1200e2327e0a8544a2fe45bb62c952e5fdef7099c603d2336b17b6eac3cc046b7a69bfbce67fe56e1c0ea48cd37c65cb88638f2a
   languageName: node
   linkType: hard
 
 "@cyntler/react-doc-viewer@npm:^1.13.0":
-  version: 1.14.1
-  resolution: "@cyntler/react-doc-viewer@npm:1.14.1"
+  version: 1.15.0
+  resolution: "@cyntler/react-doc-viewer@npm:1.15.0"
   dependencies:
-    "@types/mustache": "npm:^4.2.3"
-    "@types/papaparse": "npm:^5.3.9"
+    "@types/mustache": "npm:^4.2.5"
+    "@types/papaparse": "npm:^5.3.14"
+    ajv: "npm:^7"
     mustache: "npm:^4.2.0"
     papaparse: "npm:^5.4.1"
-    react-pdf: "npm:7.5.0"
-    styled-components: "npm:^6.0.8"
+    react-pdf: "npm:latest"
+    styled-components: "npm:^6.1.11"
   peerDependencies:
     react: ">=16.13.1"
     react-dom: ">=16.13.1"
-  checksum: 10c0/a9c3348eef033e9394079b9236365e0d9be4a04b818d5369bc83d22124d5b9905057d3880d43a9c365cf41c55835c2c88806b27e3ad5dbbfe647fb45d3f0ac67
+  checksum: 10c0/b934d0553ab2114e67d8af35d01de5ac36eeb61130e3314c2c63cff838ffbcf9527f585752a62f8ca6e358348cedbd9aee5e68c0cfa6a7321a5501f28d4a681f
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:1.2.1":
-  version: 1.2.1
-  resolution: "@emotion/is-prop-valid@npm:1.2.1"
+"@emotion/is-prop-valid@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@emotion/is-prop-valid@npm:1.2.2"
   dependencies:
     "@emotion/memoize": "npm:^0.8.1"
-  checksum: 10c0/7c2aabdf0ca9986ca25abc9dae711348308cf18d418d64ffa4c8ffd2114806c47f2e06ba8ee769f38ec67d65bd59ec73f34d94023e81baa1c43510ac86ccd5e6
+  checksum: 10c0/bb1530dcb4e0e5a4fabb219279f2d0bc35796baf66f6241f98b0d03db1985c890a8cafbea268e0edefd5eeda143dbd5c09a54b5fba74cee8c69b98b13194af50
   languageName: node
   linkType: hard
 
@@ -214,10 +208,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/unitless@npm:0.8.0"
-  checksum: 10c0/1f2cfb7c0ccb83c20b1c6d8d92a74a93da4b2a440f9a0d49ded08647faf299065a2ffde17e1335920fa10397b85f8635bbfe14f3cd29222a59ea81d978478072
+"@emotion/unitless@npm:0.8.1":
+  version: 0.8.1
+  resolution: "@emotion/unitless@npm:0.8.1"
+  checksum: 10c0/a1ed508628288f40bfe6dd17d431ed899c067a899fa293a13afe3aed1d70fac0412b8a215fafab0b42829360db687fecd763e5f01a64ddc4a4b58ec3112ff548
   languageName: node
   linkType: hard
 
@@ -271,40 +265,40 @@ __metadata:
   linkType: hard
 
 "@floating-ui/core@npm:^1.0.0":
-  version: 1.6.0
-  resolution: "@floating-ui/core@npm:1.6.0"
+  version: 1.6.1
+  resolution: "@floating-ui/core@npm:1.6.1"
   dependencies:
-    "@floating-ui/utils": "npm:^0.2.1"
-  checksum: 10c0/667a68036f7dd5ed19442c7792a6002ca02d1799221c4396691bbe0b6008b48f6ccad581225e81fa266bb91232f6c66838a5f825f554217e1ec886178b93381b
+    "@floating-ui/utils": "npm:^0.2.0"
+  checksum: 10c0/7d78b3788d438807d3c1a52477ee1693a29b8a4416dd6e13761427925d9fba1d45c849527752d8fd9776842182d919fddf7ecbc34f3bf2de3bafa1717619a56f
   languageName: node
   linkType: hard
 
-"@floating-ui/dom@npm:^1.6.1":
-  version: 1.6.3
-  resolution: "@floating-ui/dom@npm:1.6.3"
+"@floating-ui/dom@npm:^1.0.0":
+  version: 1.6.5
+  resolution: "@floating-ui/dom@npm:1.6.5"
   dependencies:
     "@floating-ui/core": "npm:^1.0.0"
     "@floating-ui/utils": "npm:^0.2.0"
-  checksum: 10c0/d6cac10877918ce5a8d1a24b21738d2eb130a0191043d7c0dd43bccac507844d3b4dc5d4107d3891d82f6007945ca8fb4207a1252506e91c37e211f0f73cf77e
+  checksum: 10c0/ebdc14806f786e60df8e7cc2c30bf9cd4d75fe734f06d755588bbdef2f60d0a0f21dffb14abdc58dea96e5577e2e366feca6d66ba962018efd1bc91a3ece4526
   languageName: node
   linkType: hard
 
 "@floating-ui/react-dom@npm:^2.0.0":
-  version: 2.0.8
-  resolution: "@floating-ui/react-dom@npm:2.0.8"
+  version: 2.0.9
+  resolution: "@floating-ui/react-dom@npm:2.0.9"
   dependencies:
-    "@floating-ui/dom": "npm:^1.6.1"
+    "@floating-ui/dom": "npm:^1.0.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 10c0/4d87451e2dcc54b4753a0d81181036e47821cfd0d4c23f7e9c31590c7c91fb15fb0a5a458969a5ddabd61601eca5875ebd4e40bff37cee31f373b8f1ccc64518
+  checksum: 10c0/d8cd1fb2b8a5012ca692d6f677a0af923ef81131f69accea8ce8b5413202ab4c3c79e6eda1446f4dad06a2dfd596ece748c562ba28c289678a856755db4f528f
   languageName: node
   linkType: hard
 
-"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
-  version: 0.2.1
-  resolution: "@floating-ui/utils@npm:0.2.1"
-  checksum: 10c0/ee77756712cf5b000c6bacf11992ffb364f3ea2d0d51cc45197a7e646a17aeb86ea4b192c0b42f3fbb29487aee918a565e84f710b8c3645827767f406a6b4cc9
+"@floating-ui/utils@npm:^0.2.0":
+  version: 0.2.2
+  resolution: "@floating-ui/utils@npm:0.2.2"
+  checksum: 10c0/b2becdcafdf395af1641348da0031ff1eaad2bc60c22e14bd3abad4acfe2c8401e03097173d89a2f646a99b75819a78ef21ebb2572cab0042a56dd654b0065cd
   languageName: node
   linkType: hard
 
@@ -435,81 +429,81 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/env@npm:14.1.4"
-  checksum: 10c0/35f5e817bb47993565bc4b2b9961f9697e0f08b05bc008984de7e89c3626f4ef6db314629a52302786b2f386539005666b7ad56b441e45cc79b0a49835f8062b
+"@next/env@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/env@npm:14.2.3"
+  checksum: 10c0/25ab3ac2739c8e5ce35e1f50373238c5c428ab6b01d448ba78a6068dcdef88978b64f9a92790c324b2926ccc41390a67107154a0b0fee32fe980a485f4ef20d8
   languageName: node
   linkType: hard
 
-"@next/eslint-plugin-next@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/eslint-plugin-next@npm:14.1.4"
+"@next/eslint-plugin-next@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/eslint-plugin-next@npm:14.2.3"
   dependencies:
     glob: "npm:10.3.10"
-  checksum: 10c0/fb49237153bf528ef3939e1ceae0f658e44abcf0ca155d8042c7961f523e4d9aeba3de18532b633734f3b5524b644e9c3c5187089e0d400896c1c35812bbbdd3
+  checksum: 10c0/de9af2c7465cce4eb4cb50654aa2548d4d2af788c8992d02e2b863b1bf4f99e3b6604d1f0775f8e50aca6a53cf30d51f4ac56810d1625d401548267ca5f1d883
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-darwin-arm64@npm:14.1.4"
+"@next/swc-darwin-arm64@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-darwin-arm64@npm:14.2.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-darwin-x64@npm:14.1.4"
+"@next/swc-darwin-x64@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-darwin-x64@npm:14.2.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.1.4"
+"@next/swc-linux-arm64-gnu@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-arm64-gnu@npm:14.2.3"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-linux-arm64-musl@npm:14.1.4"
+"@next/swc-linux-arm64-musl@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-arm64-musl@npm:14.2.3"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-linux-x64-gnu@npm:14.1.4"
+"@next/swc-linux-x64-gnu@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-x64-gnu@npm:14.2.3"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-linux-x64-musl@npm:14.1.4"
+"@next/swc-linux-x64-musl@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-linux-x64-musl@npm:14.2.3"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.1.4"
+"@next/swc-win32-arm64-msvc@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-win32-arm64-msvc@npm:14.2.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.1.4"
+"@next/swc-win32-ia32-msvc@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-win32-ia32-msvc@npm:14.2.3"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:14.1.4":
-  version: 14.1.4
-  resolution: "@next/swc-win32-x64-msvc@npm:14.1.4"
+"@next/swc-win32-x64-msvc@npm:14.2.3":
+  version: 14.2.3
+  resolution: "@next/swc-win32-x64-msvc@npm:14.2.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -555,11 +549,11 @@ __metadata:
   linkType: hard
 
 "@npmcli/fs@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "@npmcli/fs@npm:3.1.0"
+  version: 3.1.1
+  resolution: "@npmcli/fs@npm:3.1.1"
   dependencies:
     semver: "npm:^7.3.5"
-  checksum: 10c0/162b4a0b8705cd6f5c2470b851d1dc6cd228c86d2170e1769d738c1fbb69a87160901411c3c035331e9e99db72f1f1099a8b734bf1637cc32b9a5be1660e4e1e
+  checksum: 10c0/c37a5b4842bfdece3d14dfdb054f73fe15ed2d3da61b34ff76629fb5b1731647c49166fd2a8bf8b56fcfa51200382385ea8909a3cbecdad612310c114d3f6c99
   languageName: node
   linkType: hard
 
@@ -1772,24 +1766,32 @@ __metadata:
   linkType: hard
 
 "@rushstack/eslint-patch@npm:^1.3.3":
-  version: 1.10.1
-  resolution: "@rushstack/eslint-patch@npm:1.10.1"
-  checksum: 10c0/db96bfdf83ededcd70de41876bfe7ecb2450b93e4c5e46bc0f2bc9dd0e0ea60e8bc5fc0d1d3b6addf902e640ea78855ed77b6c883d0d0d104269492141232995
+  version: 1.10.2
+  resolution: "@rushstack/eslint-patch@npm:1.10.2"
+  checksum: 10c0/3712b8994bfed0968d4c4f21ff10bf5f2abb47f47d65d4e616de4311d2f372f2528b03b1d4e0dcaa7392f8626ccdf114e753db4f790e92436fc5a4e52195d181
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.2":
-  version: 0.5.2
-  resolution: "@swc/helpers@npm:0.5.2"
+"@swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
+  languageName: node
+  linkType: hard
+
+"@swc/helpers@npm:0.5.5":
+  version: 0.5.5
+  resolution: "@swc/helpers@npm:0.5.5"
   dependencies:
+    "@swc/counter": "npm:^0.1.3"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/b6fa49bcf6c00571d0eb7837b163f8609960d4d77538160585e27ed167361e9776bd6e5eb9646ffac2fb4d43c58df9ca50dab9d96ab097e6591bc82a75fd1164
+  checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d
   languageName: node
   linkType: hard
 
 "@tailwindcss/typography@npm:^0.5.9":
-  version: 0.5.12
-  resolution: "@tailwindcss/typography@npm:0.5.12"
+  version: 0.5.13
+  resolution: "@tailwindcss/typography@npm:0.5.13"
   dependencies:
     lodash.castarray: "npm:^4.4.0"
     lodash.isplainobject: "npm:^4.0.6"
@@ -1797,7 +1799,7 @@ __metadata:
     postcss-selector-parser: "npm:6.0.10"
   peerDependencies:
     tailwindcss: "*"
-  checksum: 10c0/3410b06594b89b5650cd4c985e6b4f48d1ba2cfbe146bb5ea2a2cfc1c9b065cd3ca2215436a814f458936683836f9cf792a8d6341345feccf6fb9910c565c092
+  checksum: 10c0/6c01287e7492c001595cd5a39765f313e48e1d2997ea78823919edabd692300d144c42b6e16dee6e077a683e635b9164ff985d5a0f8eeff7824b2d119151899e
   languageName: node
   linkType: hard
 
@@ -1917,7 +1919,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mustache@npm:^4.2.3":
+"@types/mustache@npm:^4.2.5":
   version: 4.2.5
   resolution: "@types/mustache@npm:4.2.5"
   checksum: 10c0/624975c39068d47407eadb89628aaff5ef60f3b7a71eef92a254310896a4e90518a01dcf71d95779ab2c986034a6ca5403d22fea237c67ff87f2e2b3fb794ea6
@@ -1925,22 +1927,22 @@ __metadata:
   linkType: hard
 
 "@types/node@npm:*, @types/node@npm:^20":
-  version: 20.12.5
-  resolution: "@types/node@npm:20.12.5"
+  version: 20.12.11
+  resolution: "@types/node@npm:20.12.11"
   dependencies:
     undici-types: "npm:~5.26.4"
-  checksum: 10c0/2da65516fba98f0417620e42bddbe53e144d4782d69cd37f99df2537c6850b9cfbdb8a017f02c61e9a074bcac84f9f3f221b250474ac8c6b95d507a47e8d53f9
+  checksum: 10c0/efaa7b08c50ba6e6982ac7d531ba08d5935539ba76e954807df1ff9382a319ead7e003ccaca5ad7cf33ecf53f212507f7c1f2794bd2ff52df6365fef21f6e1fb
   languageName: node
   linkType: hard
 
-"@types/nprogress@npm:^0.2.2, @types/nprogress@npm:^0.2.3":
+"@types/nprogress@npm:^0.2.3":
   version: 0.2.3
   resolution: "@types/nprogress@npm:0.2.3"
   checksum: 10c0/cac0fe73aca79bc1472a1556f56303df72026f2fcd8dbe311fe84b1f46e454b9040c1e69223d94e3bf156a5986382170c52ebda19aa70f555f1b6855d8f744a6
   languageName: node
   linkType: hard
 
-"@types/papaparse@npm:^5.3.9":
+"@types/papaparse@npm:^5.3.14":
   version: 5.3.14
   resolution: "@types/papaparse@npm:5.3.14"
   dependencies:
@@ -1957,9 +1959,9 @@ __metadata:
   linkType: hard
 
 "@types/prismjs@npm:^1.0.0":
-  version: 1.26.3
-  resolution: "@types/prismjs@npm:1.26.3"
-  checksum: 10c0/3e8a64bcf0ab5f9a47ec2590938c5a8a20ac849b4949a95ed96e73e64cb890fc56e9c9b724286914717458267b28405f965709e1b9f80db5d68817a7ce5a18a9
+  version: 1.26.4
+  resolution: "@types/prismjs@npm:1.26.4"
+  checksum: 10c0/996be7d119779c4cbe66e58342115a12d35a02226dae3aaa4a744c9652d5a3939c93c26182e18156965ac4f93575ebb309c3469c36f52e60ee5c0f8f27e874df
   languageName: node
   linkType: hard
 
@@ -1971,21 +1973,21 @@ __metadata:
   linkType: hard
 
 "@types/react-dom@npm:^18":
-  version: 18.2.24
-  resolution: "@types/react-dom@npm:18.2.24"
+  version: 18.3.0
+  resolution: "@types/react-dom@npm:18.3.0"
   dependencies:
     "@types/react": "npm:*"
-  checksum: 10c0/9ec38e5ab4727c56ef17bd8e938ead88748ba19db314b8d9807714a5cae430f5b799514667b221b4f2dc8d9b4ca17dd1c3da8c41c083c2de9eddcc31bec6b8ff
+  checksum: 10c0/6c90d2ed72c5a0e440d2c75d99287e4b5df3e7b011838cdc03ae5cd518ab52164d86990e73246b9d812eaf02ec351d74e3b4f5bd325bf341e13bf980392fd53b
   languageName: node
   linkType: hard
 
 "@types/react@npm:*, @types/react@npm:^18":
-  version: 18.2.74
-  resolution: "@types/react@npm:18.2.74"
+  version: 18.3.2
+  resolution: "@types/react@npm:18.3.2"
   dependencies:
     "@types/prop-types": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: 10c0/347e38b4c5dc20d50ff71bf04b7caaef490e5ff695e74a0088a13fbb2a0c5d125a5ecfd142adfa30f0176da0e2734942c91ba61d95ce269c43b3265bd7379361
+  checksum: 10c0/9fb2f1fcf7e889ee4ea7c3c5978df595c66e770e5fd3a245dbdd2589b9b911524c11dab25a6275d8af4e336e4cb5fa850d447884b84c335a187a338c89df99ba
   languageName: node
   linkType: hard
 
@@ -1996,10 +1998,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/stylis@npm:4.2.0":
-  version: 4.2.0
-  resolution: "@types/stylis@npm:4.2.0"
-  checksum: 10c0/c76c13e76ca485f598a13984cfb5e07bb88a851da5bee213587424a5f101f182c74f4f92d633cebf9abcec40ccebb645d600d184b7e4b42793e3eeca8729b110
+"@types/stylis@npm:4.2.5":
+  version: 4.2.5
+  resolution: "@types/stylis@npm:4.2.5"
+  checksum: 10c0/23f5b35a3a04f6bb31a29d404fa1bc8e0035fcaff2356b4047743a057e0c37b2eba7efe14d57dd2b95b398cea3bac294d9c6cd93ed307d8c0b7f5d282224b469
   languageName: node
   linkType: hard
 
@@ -2030,53 +2032,53 @@ __metadata:
   linkType: hard
 
 "@types/webxr@npm:*":
-  version: 0.5.15
-  resolution: "@types/webxr@npm:0.5.15"
-  checksum: 10c0/4d96d6c09e2cc748c8ca5a1c12831c0ee3c7794383055dd720d9257d9fa4f2c1ca12174eef66cb11246be6d6ca626b1b22f96e87ef98f185d291c645a765c9b7
+  version: 0.5.16
+  resolution: "@types/webxr@npm:0.5.16"
+  checksum: 10c0/7df4f693c58dc15a6749f37dcf0d29dc72c8e63dc8a7b8990120b2ab3492ad998e6c23a9d175b34a31ced36612b94658b1d6a25abf26d22c9ef35bdce512bcc9
   languageName: node
   linkType: hard
 
-"@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0":
-  version: 6.21.0
-  resolution: "@typescript-eslint/parser@npm:6.21.0"
+"@typescript-eslint/parser@npm:^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0":
+  version: 7.2.0
+  resolution: "@typescript-eslint/parser@npm:7.2.0"
   dependencies:
-    "@typescript-eslint/scope-manager": "npm:6.21.0"
-    "@typescript-eslint/types": "npm:6.21.0"
-    "@typescript-eslint/typescript-estree": "npm:6.21.0"
-    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+    "@typescript-eslint/scope-manager": "npm:7.2.0"
+    "@typescript-eslint/types": "npm:7.2.0"
+    "@typescript-eslint/typescript-estree": "npm:7.2.0"
+    "@typescript-eslint/visitor-keys": "npm:7.2.0"
     debug: "npm:^4.3.4"
   peerDependencies:
-    eslint: ^7.0.0 || ^8.0.0
+    eslint: ^8.56.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/a8f99820679decd0d115c0af61903fb1de3b1b5bec412dc72b67670bf636de77ab07f2a68ee65d6da7976039bbf636907f9d5ca546db3f0b98a31ffbc225bc7d
+  checksum: 10c0/11ce36c68212fdbf98fc6fd32ba0977d46b645fd669a3f4fdb8be2036225f86ad005b31a66f97097e90517c44c92cf9cc5fb1d6e9647ee2fa125c4af21cdb477
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:6.21.0":
-  version: 6.21.0
-  resolution: "@typescript-eslint/scope-manager@npm:6.21.0"
+"@typescript-eslint/scope-manager@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@typescript-eslint/scope-manager@npm:7.2.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.21.0"
-    "@typescript-eslint/visitor-keys": "npm:6.21.0"
-  checksum: 10c0/eaf868938d811cbbea33e97e44ba7050d2b6892202cea6a9622c486b85ab1cf801979edf78036179a8ba4ac26f1dfdf7fcc83a68c1ff66be0b3a8e9a9989b526
+    "@typescript-eslint/types": "npm:7.2.0"
+    "@typescript-eslint/visitor-keys": "npm:7.2.0"
+  checksum: 10c0/4d088c127e6ba1a7de8567f70684779083be24b48746c3b4a86a0ec7062bca58693ee08482349ad6572a17ada8aa6f26b74d1c7139c8fcf7101fa09a572e0ea6
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:6.21.0":
-  version: 6.21.0
-  resolution: "@typescript-eslint/types@npm:6.21.0"
-  checksum: 10c0/020631d3223bbcff8a0da3efbdf058220a8f48a3de221563996ad1dcc30d6c08dadc3f7608cc08830d21c0d565efd2db19b557b9528921c78aabb605eef2d74d
+"@typescript-eslint/types@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@typescript-eslint/types@npm:7.2.0"
+  checksum: 10c0/135aae061720185855bea61ea6cfd33f4801d2de57f65e50079bbdb505100f844632aa4e4bdeec9e9e79d29aaddad949178d0e918e41867da6ab4b1390820e33
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:6.21.0":
-  version: 6.21.0
-  resolution: "@typescript-eslint/typescript-estree@npm:6.21.0"
+"@typescript-eslint/typescript-estree@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@typescript-eslint/typescript-estree@npm:7.2.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.21.0"
-    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+    "@typescript-eslint/types": "npm:7.2.0"
+    "@typescript-eslint/visitor-keys": "npm:7.2.0"
     debug: "npm:^4.3.4"
     globby: "npm:^11.1.0"
     is-glob: "npm:^4.0.3"
@@ -2086,17 +2088,17 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/af1438c60f080045ebb330155a8c9bb90db345d5069cdd5d01b67de502abb7449d6c75500519df829f913a6b3f490ade3e8215279b6bdc63d0fb0ae61034df5f
+  checksum: 10c0/2730bb17730e6f3ca4061f00688a70386a808f5d174fdeb757c3cfa92c455373f69080df33237c1a8970e818af0cea0ae5a083970ed8ba493f3b04458c6f9271
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:6.21.0":
-  version: 6.21.0
-  resolution: "@typescript-eslint/visitor-keys@npm:6.21.0"
+"@typescript-eslint/visitor-keys@npm:7.2.0":
+  version: 7.2.0
+  resolution: "@typescript-eslint/visitor-keys@npm:7.2.0"
   dependencies:
-    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/types": "npm:7.2.0"
     eslint-visitor-keys: "npm:^3.4.1"
-  checksum: 10c0/7395f69739cfa1cb83c1fb2fad30afa2a814756367302fb4facd5893eff66abc807e8d8f63eba94ed3b0fe0c1c996ac9a1680bcbf0f83717acedc3f2bb724fbf
+  checksum: 10c0/2d7467495b2b76f3edb1b3047e97076c2242e7eca6d50bbbdd88219f9ff754dbcb9334a0568fe0ceb4c562823980938bd278aa2ba53da6343e7d99a167924f24
   languageName: node
   linkType: hard
 
@@ -2172,6 +2174,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ajv@npm:^7":
+  version: 7.2.4
+  resolution: "ajv@npm:7.2.4"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.1"
+    json-schema-traverse: "npm:^1.0.0"
+    require-from-string: "npm:^2.0.2"
+    uri-js: "npm:^4.2.2"
+  checksum: 10c0/420b72d7f6af89c7e63e00856b894e16a8a2ea107b2b2a76ff36d8dd05f6d708ab120a8c7cc627983ad1f75c6990363eda7c68f45943635f084de62353ca1c56
+  languageName: node
+  linkType: hard
+
 "ansi-regex@npm:^5.0.1":
   version: 5.0.1
   resolution: "ansi-regex@npm:5.0.1"
@@ -2570,8 +2584,8 @@ __metadata:
   linkType: hard
 
 "cacache@npm:^18.0.0":
-  version: 18.0.2
-  resolution: "cacache@npm:18.0.2"
+  version: 18.0.3
+  resolution: "cacache@npm:18.0.3"
   dependencies:
     "@npmcli/fs": "npm:^3.1.0"
     fs-minipass: "npm:^3.0.0"
@@ -2585,7 +2599,7 @@ __metadata:
     ssri: "npm:^10.0.0"
     tar: "npm:^6.1.11"
     unique-filename: "npm:^3.0.0"
-  checksum: 10c0/7992665305cc251a984f4fdbab1449d50e88c635bc43bf2785530c61d239c61b349e5734461baa461caaee65f040ab14e2d58e694f479c0810cffd181ba5eabc
+  checksum: 10c0/dfda92840bb371fb66b88c087c61a74544363b37a265023223a99965b16a16bbb87661fe4948718d79df6e0cc04e85e62784fbcf1832b2a5e54ff4c46fbb45b7
   languageName: node
   linkType: hard
 
@@ -2624,9 +2638,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599":
-  version: 1.0.30001606
-  resolution: "caniuse-lite@npm:1.0.30001606"
-  checksum: 10c0/fc9816f7d073e4f655c00acf9d6625f923e722430545b0aabefb9dc01347f3093608eb18841cf981acbd464fcac918a708908549738a8cd9517a14ac005bf8fc
+  version: 1.0.30001617
+  resolution: "caniuse-lite@npm:1.0.30001617"
+  checksum: 10c0/711702501063968b2807d1a8f40981e66f45eb8962968b4b84c70392dc804cee62845e8e391e9749f78ff41ca48be2a4a7a38620c44af526b5e03bc3c7a1bc0a
   languageName: node
   linkType: hard
 
@@ -2755,9 +2769,9 @@ __metadata:
   linkType: hard
 
 "clsx@npm:^2.0.0, clsx@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "clsx@npm:2.1.0"
-  checksum: 10c0/c09c00ad14f638366ca814097e6cab533dfa1972a358da5b557be487168acbb25b4c1395e89ffa842a8a61ba87a462d2b4885bc9d4f8410b598f3cb339599cdb
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
   languageName: node
   linkType: hard
 
@@ -2904,14 +2918,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:3.1.2":
-  version: 3.1.2
-  resolution: "csstype@npm:3.1.2"
-  checksum: 10c0/32c038af259897c807ac738d9eab16b3d86747c72b09d5c740978e06f067f9b7b1737e1b75e407c7ab1fe1543dc95f20e202b4786aeb1b8d3bdf5d5ce655e6c6
-  languageName: node
-  linkType: hard
-
-"csstype@npm:^3.0.2":
+"csstype@npm:3.1.3, csstype@npm:^3.0.2":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
   checksum: 10c0/80c089d6f7e0c5b2bd83cf0539ab41474198579584fa10d86d0cafe0642202343cbc119e076a0b1aece191989477081415d66c9fefbf3c957fc2fc4b7009f248
@@ -3036,7 +3043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
+"define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
   dependencies:
@@ -3156,37 +3163,37 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.668":
-  version: 1.4.729
-  resolution: "electron-to-chromium@npm:1.4.729"
-  checksum: 10c0/9f093b873a5e02da5fd5db5a1038c3a3f84bd43ff6d0e894280848717e5892953cc814a4ddf1de2acbfa9af4fe356c714f036f39b82d52bc6c8c3aed6e97fbde
+  version: 1.4.763
+  resolution: "electron-to-chromium@npm:1.4.763"
+  checksum: 10c0/8787092e2c237699d145860564635391eb856febad3d2ab171a12c671788d1aee323a42822daf0fc8ee49d615b85776470c97ecf212edeb64794f1ffc171f842
   languageName: node
   linkType: hard
 
 "embla-carousel-react@npm:^8.0.2":
-  version: 8.0.2
-  resolution: "embla-carousel-react@npm:8.0.2"
+  version: 8.0.4
+  resolution: "embla-carousel-react@npm:8.0.4"
   dependencies:
-    embla-carousel: "npm:8.0.2"
-    embla-carousel-reactive-utils: "npm:8.0.2"
+    embla-carousel: "npm:8.0.4"
+    embla-carousel-reactive-utils: "npm:8.0.4"
   peerDependencies:
     react: ^16.8.0 || ^17.0.1 || ^18.0.0
-  checksum: 10c0/7e45266d4251a960515a3283e65454b61e54d6f400f2dee7f56a3ac50532f7ce4735d926494cb1570d81de4bf299c3d1417ab4e64467cda139a7f60b49583757
+  checksum: 10c0/6ef8090e611e33e00e96b32f1350524f6aaabe13741a59311ae8e257e37ae8e8c12fd3857f943fd6b7e210bd5c207c194dea55f50d9930d3ae1e247025d8c5a2
   languageName: node
   linkType: hard
 
-"embla-carousel-reactive-utils@npm:8.0.2":
-  version: 8.0.2
-  resolution: "embla-carousel-reactive-utils@npm:8.0.2"
+"embla-carousel-reactive-utils@npm:8.0.4":
+  version: 8.0.4
+  resolution: "embla-carousel-reactive-utils@npm:8.0.4"
   peerDependencies:
-    embla-carousel: 8.0.2
-  checksum: 10c0/e7e81916971008642700af0b96a59117324214c020759a53feb1d96edb34649329018777dc00b87c631c9d04efd544945f5914dc3cbd5289766a6cdcea253f4e
+    embla-carousel: 8.0.4
+  checksum: 10c0/4178011f8d05e1752d36b90b76254e223534ad2060bf383013f0d58d365bd05475c2f739049d8f651b98345c1b9315b6a4fbca232bed3b103ccee2f78fbb1868
   languageName: node
   linkType: hard
 
-"embla-carousel@npm:8.0.2":
-  version: 8.0.2
-  resolution: "embla-carousel@npm:8.0.2"
-  checksum: 10c0/e63ce4e387c0e227ce211a1131f81c74dbe6c4bb32a5d072e0c1e30774305ca9a30fc86ebb042707bf8d6ec8cb57575628dfa1b18b36dd3206d4774cd34b73bc
+"embla-carousel@npm:8.0.4":
+  version: 8.0.4
+  resolution: "embla-carousel@npm:8.0.4"
+  checksum: 10c0/f20e07d022e6514e2a6429e9e532f96cfdc49a94947c4f3c54f26fd0c99adfd2e41d29d88f9eead74be68a62e6c61f7af2d436b232414906ddb28be96d71f874
   languageName: node
   linkType: hard
 
@@ -3214,12 +3221,12 @@ __metadata:
   linkType: hard
 
 "enhanced-resolve@npm:^5.12.0":
-  version: 5.16.0
-  resolution: "enhanced-resolve@npm:5.16.0"
+  version: 5.16.1
+  resolution: "enhanced-resolve@npm:5.16.1"
   dependencies:
     graceful-fs: "npm:^4.2.4"
     tapable: "npm:^2.2.0"
-  checksum: 10c0/dd69669cbb638ccacefd03e04d5e195ee6a99b7f5f8012f86d2df7781834de357923e06064ea621137c4ce0b37cc12b872b4e6d1ac6ab15fe98e7f1dfbbb08c4
+  checksum: 10c0/57d52625b978f18b32351a03006699de1e3695ce27af936ab4f1f98d3a4c825b219b445910bb4eef398303bbb5f37d7e382f842513d0f3a32614b78f6fd07ab7
   languageName: node
   linkType: hard
 
@@ -3244,7 +3251,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.1, es-abstract@npm:^1.23.2":
+"es-abstract@npm:^1.22.1, es-abstract@npm:^1.22.3, es-abstract@npm:^1.23.0, es-abstract@npm:^1.23.1, es-abstract@npm:^1.23.2, es-abstract@npm:^1.23.3":
   version: 1.23.3
   resolution: "es-abstract@npm:1.23.3"
   dependencies:
@@ -3315,12 +3322,12 @@ __metadata:
   linkType: hard
 
 "es-iterator-helpers@npm:^1.0.15, es-iterator-helpers@npm:^1.0.17":
-  version: 1.0.18
-  resolution: "es-iterator-helpers@npm:1.0.18"
+  version: 1.0.19
+  resolution: "es-iterator-helpers@npm:1.0.19"
   dependencies:
     call-bind: "npm:^1.0.7"
     define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.23.0"
+    es-abstract: "npm:^1.23.3"
     es-errors: "npm:^1.3.0"
     es-set-tostringtag: "npm:^2.0.3"
     function-bind: "npm:^1.1.2"
@@ -3332,7 +3339,7 @@ __metadata:
     internal-slot: "npm:^1.0.7"
     iterator.prototype: "npm:^1.1.2"
     safe-array-concat: "npm:^1.1.2"
-  checksum: 10c0/93be402e01fa3d8bf62fcadd2fb3055126ffcfe8846911b10b85918ef46775252696c84e6191ec8125bedb61e92242ad1a54a86118436ba19814720cb9ff4aed
+  checksum: 10c0/ae8f0241e383b3d197383b9842c48def7fce0255fb6ed049311b686ce295595d9e389b466f6a1b7d4e7bb92d82f5e716d6fae55e20c1040249bf976743b038c5
   languageName: node
   linkType: hard
 
@@ -3376,7 +3383,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1":
+"escalade@npm:^3.1.2":
   version: 3.1.2
   resolution: "escalade@npm:3.1.2"
   checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287
@@ -3405,12 +3412,12 @@ __metadata:
   linkType: hard
 
 "eslint-config-next@npm:^14.1.4":
-  version: 14.1.4
-  resolution: "eslint-config-next@npm:14.1.4"
+  version: 14.2.3
+  resolution: "eslint-config-next@npm:14.2.3"
   dependencies:
-    "@next/eslint-plugin-next": "npm:14.1.4"
+    "@next/eslint-plugin-next": "npm:14.2.3"
     "@rushstack/eslint-patch": "npm:^1.3.3"
-    "@typescript-eslint/parser": "npm:^5.4.2 || ^6.0.0"
+    "@typescript-eslint/parser": "npm:^5.4.2 || ^6.0.0 || 7.0.0 - 7.2.0"
     eslint-import-resolver-node: "npm:^0.3.6"
     eslint-import-resolver-typescript: "npm:^3.5.2"
     eslint-plugin-import: "npm:^2.28.1"
@@ -3423,7 +3430,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/05f1108a2192708b4d4dab2bcb454c551bb8af5802c99f7abf98318ade95d52ed9459a03f3fa6498b2d144a0f8e846c27cdc1b23370962da83d22fdfb3d50bde
+  checksum: 10c0/52a3d48bb783d3e8d76a571a3636f658e4789e1a4a51ebbd14d184b7f6f5dd91281b71d99e49a7bb7e3ab32a2dddd321285110005ca0969a471be5ab2e579887
   languageName: node
   linkType: hard
 
@@ -3980,11 +3987,11 @@ __metadata:
   linkType: hard
 
 "get-tsconfig@npm:^4.5.0":
-  version: 4.7.3
-  resolution: "get-tsconfig@npm:4.7.3"
+  version: 4.7.5
+  resolution: "get-tsconfig@npm:4.7.5"
   dependencies:
     resolve-pkg-maps: "npm:^1.0.0"
-  checksum: 10c0/b15ca9d5d0887ebfccadc9fe88b6ff3827a5691ec90e7608a5e9c74bef959c14aba62f6bb88ac7f50322395731789a2cf654244f00e10f4f76349911b6846d6f
+  checksum: 10c0/a917dff2ba9ee187c41945736bf9bbab65de31ce5bc1effd76267be483a7340915cff232199406379f26517d2d0a4edcdbcda8cca599c2480a0f2cf1e1de3efa
   languageName: node
   linkType: hard
 
@@ -4036,17 +4043,17 @@ __metadata:
   linkType: hard
 
 "glob@npm:^10.2.2, glob@npm:^10.3.10":
-  version: 10.3.12
-  resolution: "glob@npm:10.3.12"
+  version: 10.3.15
+  resolution: "glob@npm:10.3.15"
   dependencies:
     foreground-child: "npm:^3.1.0"
     jackspeak: "npm:^2.3.6"
     minimatch: "npm:^9.0.1"
     minipass: "npm:^7.0.4"
-    path-scurry: "npm:^1.10.2"
+    path-scurry: "npm:^1.11.0"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10c0/f60cefdc1cf3f958b2bb5823e1b233727f04916d489dc4641d76914f016e6704421e06a83cbb68b0cb1cb9382298b7a88075b844ad2127fc9727ea22b18b0711
+  checksum: 10c0/cda748ddc181b31b3df9548c0991800406d5cc3b3f8110e37a8751ec1e39f37cdae7d7782d5422d7df92775121cdf00599992dff22f7ff1260344843af227c2b
   languageName: node
   linkType: hard
 
@@ -4081,11 +4088,12 @@ __metadata:
   linkType: hard
 
 "globalthis@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "globalthis@npm:1.0.3"
+  version: 1.0.4
+  resolution: "globalthis@npm:1.0.4"
   dependencies:
-    define-properties: "npm:^1.1.3"
-  checksum: 10c0/0db6e9af102a5254630351557ac15e6909bc7459d3e3f6b001e59fe784c96d31108818f032d9095739355a88467459e6488ff16584ee6250cd8c27dec05af4b0
+    define-properties: "npm:^1.2.1"
+    gopd: "npm:^1.0.1"
+  checksum: 10c0/9d156f313af79d80b1566b93e19285f481c591ad6d0d319b4be5e03750d004dde40a39a0f26f7e635f9007a3600802f53ecd85a759b86f109e80a5f705e01846
   languageName: node
   linkType: hard
 
@@ -4982,6 +4990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-schema-traverse@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "json-schema-traverse@npm:1.0.0"
+  checksum: 10c0/71e30015d7f3d6dc1c316d6298047c8ef98a06d31ad064919976583eb61e1018a60a0067338f0f79cabc00d84af3fcc489bd48ce8a46ea165d9541ba17fb30c6
+  languageName: node
+  linkType: hard
+
 "json-stable-stringify-without-jsonify@npm:^1.0.1":
   version: 1.0.1
   resolution: "json-stable-stringify-without-jsonify@npm:1.0.1"
@@ -5265,9 +5280,9 @@ __metadata:
   linkType: hard
 
 "lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
-  version: 10.2.0
-  resolution: "lru-cache@npm:10.2.0"
-  checksum: 10c0/c9847612aa2daaef102d30542a8d6d9b2c2bb36581c1bf0dc3ebf5e5f3352c772a749e604afae2e46873b930a9e9523743faac4e5b937c576ab29196774712ee
+  version: 10.2.2
+  resolution: "lru-cache@npm:10.2.2"
+  checksum: 10c0/402d31094335851220d0b00985084288136136992979d0e015f0f1697e15d1c86052d7d53ae86b614e5b058425606efffc6969a31a091085d7a2b80a8a1e26d6
   languageName: node
   linkType: hard
 
@@ -5313,8 +5328,8 @@ __metadata:
   linkType: hard
 
 "make-fetch-happen@npm:^13.0.0":
-  version: 13.0.0
-  resolution: "make-fetch-happen@npm:13.0.0"
+  version: 13.0.1
+  resolution: "make-fetch-happen@npm:13.0.1"
   dependencies:
     "@npmcli/agent": "npm:^2.0.0"
     cacache: "npm:^18.0.0"
@@ -5325,9 +5340,10 @@ __metadata:
     minipass-flush: "npm:^1.0.5"
     minipass-pipeline: "npm:^1.2.4"
     negotiator: "npm:^0.6.3"
+    proc-log: "npm:^4.2.0"
     promise-retry: "npm:^2.0.1"
     ssri: "npm:^10.0.0"
-  checksum: 10c0/43b9f6dcbc6fe8b8604cb6396957c3698857a15ba4dbc38284f7f0e61f248300585ef1eb8cc62df54e9c724af977e45b5cdfd88320ef7f53e45070ed3488da55
+  checksum: 10c0/df5f4dbb6d98153b751bccf4dc4cc500de85a96a9331db9805596c46aa9f99d9555983954e6c1266d9f981ae37a9e4647f42b9a4bb5466f867f4012e582c9e7e
   languageName: node
   linkType: hard
 
@@ -5557,15 +5573,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"merge-refs@npm:^1.2.1":
-  version: 1.2.2
-  resolution: "merge-refs@npm:1.2.2"
+"merge-refs@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "merge-refs@npm:1.3.0"
   peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/edecc14ba90557df94df9a0ebd77540cbd99a894d47e4a73d31afdbcf5b0bab9f371dad6035d676dddad6f6737f87067402fdacba57359239c165705563bf2ce
+  checksum: 10c0/403d20d283a595565a6bef813415df509dad12a5ad157f0ae04861b3aee4a3691971ccae7079e20497d9f367a478ad60e5b63a2ca9ffb2cc3d511284b49b4bd6
   languageName: node
   linkType: hard
 
@@ -5997,8 +6013,8 @@ __metadata:
   linkType: hard
 
 "minipass-fetch@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "minipass-fetch@npm:3.0.4"
+  version: 3.0.5
+  resolution: "minipass-fetch@npm:3.0.5"
   dependencies:
     encoding: "npm:^0.1.13"
     minipass: "npm:^7.0.3"
@@ -6007,7 +6023,7 @@ __metadata:
   dependenciesMeta:
     encoding:
       optional: true
-  checksum: 10c0/1b63c1f3313e88eeac4689f1b71c9f086598db9a189400e3ee960c32ed89e06737fa23976c9305c2d57464fb3fcdc12749d3378805c9d6176f5569b0d0ee8a75
+  checksum: 10c0/9d702d57f556274286fdd97e406fc38a2f5c8d15e158b498d7393b1105974b21249289ec571fa2b51e038a4872bfc82710111cf75fae98c662f3d6f95e72152b
   languageName: node
   linkType: hard
 
@@ -6055,9 +6071,9 @@ __metadata:
   linkType: hard
 
 "minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.0.4":
-  version: 7.0.4
-  resolution: "minipass@npm:7.0.4"
-  checksum: 10c0/6c7370a6dfd257bf18222da581ba89a5eaedca10e158781232a8b5542a90547540b4b9b7e7f490e4cda43acfbd12e086f0453728ecf8c19e0ef6921bc5958ac5
+  version: 7.1.1
+  resolution: "minipass@npm:7.1.1"
+  checksum: 10c0/fdccc2f99c31083f45f881fd1e6971d798e333e078ab3c8988fb818c470fbd5e935388ad9adb286397eba50baebf46ef8ff487c8d3f455a69c6f3efc327bdff9
   languageName: node
   linkType: hard
 
@@ -6262,20 +6278,20 @@ __metadata:
   linkType: hard
 
 "next@npm:^14.1.4":
-  version: 14.1.4
-  resolution: "next@npm:14.1.4"
+  version: 14.2.3
+  resolution: "next@npm:14.2.3"
   dependencies:
-    "@next/env": "npm:14.1.4"
-    "@next/swc-darwin-arm64": "npm:14.1.4"
-    "@next/swc-darwin-x64": "npm:14.1.4"
-    "@next/swc-linux-arm64-gnu": "npm:14.1.4"
-    "@next/swc-linux-arm64-musl": "npm:14.1.4"
-    "@next/swc-linux-x64-gnu": "npm:14.1.4"
-    "@next/swc-linux-x64-musl": "npm:14.1.4"
-    "@next/swc-win32-arm64-msvc": "npm:14.1.4"
-    "@next/swc-win32-ia32-msvc": "npm:14.1.4"
-    "@next/swc-win32-x64-msvc": "npm:14.1.4"
-    "@swc/helpers": "npm:0.5.2"
+    "@next/env": "npm:14.2.3"
+    "@next/swc-darwin-arm64": "npm:14.2.3"
+    "@next/swc-darwin-x64": "npm:14.2.3"
+    "@next/swc-linux-arm64-gnu": "npm:14.2.3"
+    "@next/swc-linux-arm64-musl": "npm:14.2.3"
+    "@next/swc-linux-x64-gnu": "npm:14.2.3"
+    "@next/swc-linux-x64-musl": "npm:14.2.3"
+    "@next/swc-win32-arm64-msvc": "npm:14.2.3"
+    "@next/swc-win32-ia32-msvc": "npm:14.2.3"
+    "@next/swc-win32-x64-msvc": "npm:14.2.3"
+    "@swc/helpers": "npm:0.5.5"
     busboy: "npm:1.6.0"
     caniuse-lite: "npm:^1.0.30001579"
     graceful-fs: "npm:^4.2.11"
@@ -6283,6 +6299,7 @@ __metadata:
     styled-jsx: "npm:5.1.1"
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
+    "@playwright/test": ^1.41.2
     react: ^18.2.0
     react-dom: ^18.2.0
     sass: ^1.3.0
@@ -6308,26 +6325,27 @@ __metadata:
   peerDependenciesMeta:
     "@opentelemetry/api":
       optional: true
+    "@playwright/test":
+      optional: true
     sass:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 10c0/7576d7af913f6e24997126b1b13c9bfd0de926ecce72b16944f9f9ba221a3563d3a16b13d7aad7774a428462534afe71879ea0ca5ad80cc9075f08773d13a3b1
+  checksum: 10c0/2c409154720846d07a7a995cc3bfba24b9ee73c87360ce3266528c8a217f5f1ab6f916cffbe1be83509b4e8d7b1d713921bb5c69338b4ecaa57df3212f79a8c5
   languageName: node
   linkType: hard
 
 "nextjs-toploader@npm:^1.6.11":
-  version: 1.6.11
-  resolution: "nextjs-toploader@npm:1.6.11"
+  version: 1.6.12
+  resolution: "nextjs-toploader@npm:1.6.12"
   dependencies:
-    "@types/nprogress": "npm:^0.2.2"
     nprogress: "npm:^0.2.0"
     prop-types: "npm:^15.8.1"
   peerDependencies:
     next: ">= 6.0.0"
     react: ">= 16.0.0"
     react-dom: ">= 16.0.0"
-  checksum: 10c0/02884ceccac931ff158c894e06500207f5407937d7930d133109a6eb395b7fd00f75fa9201d71f7d87bd40e7ff0ee7fa2a4ed1f1e677bd14e4bac1cdf35285a1
+  checksum: 10c0/0ea939842800df92da1844a2bc63a6a2d190d12156b84f758d9117fab47e23809766e6791c3a3f27093656588b09616e8e9d97f17d0555c3ba2b7f48fe1eb7dc
   languageName: node
   linkType: hard
 
@@ -6391,13 +6409,13 @@ __metadata:
   linkType: hard
 
 "nopt@npm:^7.0.0":
-  version: 7.2.0
-  resolution: "nopt@npm:7.2.0"
+  version: 7.2.1
+  resolution: "nopt@npm:7.2.1"
   dependencies:
     abbrev: "npm:^2.0.0"
   bin:
     nopt: bin/nopt.js
-  checksum: 10c0/9bd7198df6f16eb29ff16892c77bcf7f0cc41f9fb5c26280ac0def2cf8cf319f3b821b3af83eba0e74c85807cc430a16efe0db58fe6ae1f41e69519f585b6aff
+  checksum: 10c0/a069c7c736767121242037a22a788863accfa932ab285a1eb569eb8cd534b09d17206f68c37f096ae785647435e0c5a5a0a67b42ec743e481a455e5ae6a6df81
   languageName: node
   linkType: hard
 
@@ -6540,16 +6558,16 @@ __metadata:
   linkType: hard
 
 "optionator@npm:^0.9.1":
-  version: 0.9.3
-  resolution: "optionator@npm:0.9.3"
+  version: 0.9.4
+  resolution: "optionator@npm:0.9.4"
   dependencies:
-    "@aashutoshrathi/word-wrap": "npm:^1.2.3"
     deep-is: "npm:^0.1.3"
     fast-levenshtein: "npm:^2.0.6"
     levn: "npm:^0.4.1"
     prelude-ls: "npm:^1.2.1"
     type-check: "npm:^0.4.0"
-  checksum: 10c0/66fba794d425b5be51353035cf3167ce6cfa049059cbb93229b819167687e0f48d2bc4603fcb21b091c99acb516aae1083624675b15c4765b2e4693a085e959c
+    word-wrap: "npm:^1.2.5"
+  checksum: 10c0/4afb687a059ee65b61df74dfe87d8d6815cd6883cb8b3d5883a910df72d0f5d029821f37025e4bccf4048873dbdb09acc6d303d27b8f76b1a80dd5a7d5334675
   languageName: node
   linkType: hard
 
@@ -6663,13 +6681,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-scurry@npm:^1.10.1, path-scurry@npm:^1.10.2":
-  version: 1.10.2
-  resolution: "path-scurry@npm:1.10.2"
+"path-scurry@npm:^1.10.1, path-scurry@npm:^1.11.0":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
   dependencies:
     lru-cache: "npm:^10.2.0"
     minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
-  checksum: 10c0/d723777fbf9627f201e64656680f66ebd940957eebacf780e6cce1c2919c29c116678b2d7dbf8821b3a2caa758d125f4444005ccec886a25c8f324504e48e601
+  checksum: 10c0/32a13711a2a505616ae1cc1b5076801e453e7aae6ac40ab55b388bb91b9d0547a52f5aaceff710ea400205f18691120d4431e520afbe4266b836fadede15872d
   languageName: node
   linkType: hard
 
@@ -6859,7 +6877,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.23, postcss@npm:^8.4.38":
+"postcss@npm:8.4.38, postcss@npm:^8.4.23, postcss@npm:^8.4.38":
   version: 8.4.38
   resolution: "postcss@npm:8.4.38"
   dependencies:
@@ -6947,6 +6965,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proc-log@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "proc-log@npm:4.2.0"
+  checksum: 10c0/17db4757c2a5c44c1e545170e6c70a26f7de58feb985091fb1763f5081cab3d01b181fb2dd240c9f4a4255a1d9227d163d5771b7e69c9e49a561692db865efb9
+  languageName: node
+  linkType: hard
+
 "promise-retry@npm:^2.0.1":
   version: 2.0.1
   resolution: "promise-retry@npm:2.0.1"
@@ -6957,7 +6982,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -6990,11 +7015,11 @@ __metadata:
   linkType: hard
 
 "qs@npm:^6.7.0":
-  version: 6.12.0
-  resolution: "qs@npm:6.12.0"
+  version: 6.12.1
+  resolution: "qs@npm:6.12.1"
   dependencies:
     side-channel: "npm:^1.0.6"
-  checksum: 10c0/e165a77ac5f3ca60c15c5f3d51b321ddec7aa438804436b29d160117bc6fb7bf7dab94abd0c7d7c0785890d3a75ae41e1d6346e158aaf1540c6fe53a31f11675
+  checksum: 10c0/439e6d7c6583e7c69f2cab2c39c55b97db7ce576e4c7c469082b938b7fc8746e8d547baacb69b4cd2b6666484776c3f4840ad7163a4c5326300b0afa0acdd84b
   languageName: node
   linkType: hard
 
@@ -7035,24 +7060,24 @@ __metadata:
   linkType: hard
 
 "react-day-picker@npm:^8.10.0":
-  version: 8.10.0
-  resolution: "react-day-picker@npm:8.10.0"
+  version: 8.10.1
+  resolution: "react-day-picker@npm:8.10.1"
   peerDependencies:
     date-fns: ^2.28.0 || ^3.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/e9868aced1e40b4cb7d6cf8d50e250226b38ec7ebea944b65aa9db20a0f36d0581b8a501297d09dcbf2d812de852168952b3fb27990915381629d6e314c2a4d8
+  checksum: 10c0/a0ff28c4b61b3882e6a825b19e5679e2fdf3256cf1be8eb0a0c028949815c1ae5a6561474c2c19d231c010c8e0e0b654d3a322610881e0655abca05a2e03d9df
   languageName: node
   linkType: hard
 
 "react-dom@npm:^18":
-  version: 18.2.0
-  resolution: "react-dom@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
     loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.0"
+    scheduler: "npm:^0.23.2"
   peerDependencies:
-    react: ^18.2.0
-  checksum: 10c0/66dfc5f93e13d0674e78ef41f92ed21dfb80f9c4ac4ac25a4b51046d41d4d2186abc915b897f69d3d0ebbffe6184e7c5876f2af26bfa956f179225d921be713a
+    react: ^18.3.1
+  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
   languageName: node
   linkType: hard
 
@@ -7077,11 +7102,11 @@ __metadata:
   linkType: hard
 
 "react-hook-form@npm:^7.51.2":
-  version: 7.51.2
-  resolution: "react-hook-form@npm:7.51.2"
+  version: 7.51.4
+  resolution: "react-hook-form@npm:7.51.4"
   peerDependencies:
     react: ^16.8.0 || ^17 || ^18
-  checksum: 10c0/9d5e303b64f77330f244304854522e4f588fd3a5554734d2daebf64230195eb42c44504e074d5acfabd6f33a2272ffca4ebef7a54fad7019ae519471b720327e
+  checksum: 10c0/73b585adb80bd99ae1fc21208e389fd9830f82c8c8bab4b6c4d5853f858a3259b8dc8fd4aa4608a0bd95bc69883c9332f2fa5e8c80dc17dbb2866de9744dbdb6
   languageName: node
   linkType: hard
 
@@ -7105,9 +7130,9 @@ __metadata:
   linkType: hard
 
 "react-is@npm:^18.0.0, react-is@npm:^18.2.0":
-  version: 18.2.0
-  resolution: "react-is@npm:18.2.0"
-  checksum: 10c0/6eb5e4b28028c23e2bfcf73371e72cd4162e4ac7ab445ddae2afe24e347a37d6dc22fae6e1748632cd43c6d4f9b8f86dcf26bf9275e1874f436d129952528ae0
+  version: 18.3.1
+  resolution: "react-is@npm:18.3.1"
+  checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
   languageName: node
   linkType: hard
 
@@ -7137,32 +7162,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-pdf@npm:7.5.0":
-  version: 7.5.0
-  resolution: "react-pdf@npm:7.5.0"
+"react-pdf@npm:latest":
+  version: 8.0.2
+  resolution: "react-pdf@npm:8.0.2"
   dependencies:
     clsx: "npm:^2.0.0"
+    dequal: "npm:^2.0.3"
     make-cancellable-promise: "npm:^1.3.1"
     make-event-props: "npm:^1.6.0"
-    merge-refs: "npm:^1.2.1"
+    merge-refs: "npm:^1.3.0"
     pdfjs-dist: "npm:3.11.174"
-    prop-types: "npm:^15.6.2"
     tiny-invariant: "npm:^1.0.0"
-    tiny-warning: "npm:^1.0.0"
+    warning: "npm:^4.0.0"
   peerDependencies:
-    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10c0/4f0cab3d0749d00dcebb6a836d6a8f6716da706bd9ad1461a2d0616d3cf6637ce542f246cb52a2d9614e18b19780397ffcd2767a3bc7e15b8319132eb80fdc64
+  checksum: 10c0/83064e77030207bf4a7c80e24968c8957c9dedccadbf6f8e28b1a28166d9b7aa6cc473dc31bddcc57660d636756db763a39c0fdf1bc0d4cea49ffc3bb0f5d1d1
   languageName: node
   linkType: hard
 
 "react-player@npm:^2.13.0":
-  version: 2.15.1
-  resolution: "react-player@npm:2.15.1"
+  version: 2.16.0
+  resolution: "react-player@npm:2.16.0"
   dependencies:
     deepmerge: "npm:^4.0.0"
     load-script: "npm:^1.0.0"
@@ -7171,7 +7196,7 @@ __metadata:
     react-fast-compare: "npm:^3.0.1"
   peerDependencies:
     react: ">=16.6.0"
-  checksum: 10c0/0d17002c08b333cfc9844d762e6cb064c992f4b58088895af6a445a6850f48a318fb39c54a5e0e3bc5c5d7027c76a8d8ed796a0fa723c011450634ba2ff881ca
+  checksum: 10c0/ee0f4cd3bd468b28af38dbbb65cae1659218153956f43c0bdd15cd8b38aaaf151deec43b93b7dd887c0ac28242a4ba7e9d01823351e78ba60ae04d5fb51defb4
   languageName: node
   linkType: hard
 
@@ -7225,12 +7250,12 @@ __metadata:
   linkType: hard
 
 "react-resizable-panels@npm:^2.0.16":
-  version: 2.0.16
-  resolution: "react-resizable-panels@npm:2.0.16"
+  version: 2.0.19
+  resolution: "react-resizable-panels@npm:2.0.19"
   peerDependencies:
     react: ^16.14.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/91e125a10de5908cdca9c82247106927a98a2686097cca5aa31415d3ba7013425f3b3c10f1465eadcc6a4977a2d549cabadb71c58586cddfae4995c8bb575ace
+  checksum: 10c0/eb9cb511aec917895dba842cb933c9885ea510f752b4f3b8c358bf33be8b7b6bf2fc4a81db7a16977e6b09f614a14c6652f15232ff03bce68a8845dcf179abf7
   languageName: node
   linkType: hard
 
@@ -7264,11 +7289,11 @@ __metadata:
   linkType: hard
 
 "react@npm:^18":
-  version: 18.2.0
-  resolution: "react@npm:18.2.0"
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
   dependencies:
     loose-envify: "npm:^1.1.0"
-  checksum: 10c0/b562d9b569b0cb315e44b48099f7712283d93df36b19a39a67c254c6686479d3980b7f013dc931f4a5a3ae7645eae6386b4aa5eea933baa54ecd0f9acb0902b8
+  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
   languageName: node
   linkType: hard
 
@@ -7481,6 +7506,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"require-from-string@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "require-from-string@npm:2.0.2"
+  checksum: 10c0/aaa267e0c5b022fc5fd4eef49d8285086b15f2a1c54b28240fdf03599cbd9c26049fee3eab894f2e1f6ca65e513b030a7c264201e3f005601e80c49fb2937ce2
+  languageName: node
+  linkType: hard
+
 "resolve-from@npm:^4.0.0":
   version: 4.0.0
   resolution: "resolve-from@npm:4.0.0"
@@ -7627,12 +7659,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "scheduler@npm:0.23.0"
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
   dependencies:
     loose-envify: "npm:^1.1.0"
-  checksum: 10c0/b777f7ca0115e6d93e126ac490dbd82642d14983b3079f58f35519d992fa46260be7d6e6cede433a92db70306310c6f5f06e144f0e40c484199e09c1f7be53dd
+  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
   languageName: node
   linkType: hard
 
@@ -7646,13 +7678,11 @@ __metadata:
   linkType: hard
 
 "semver@npm:^7.3.5, semver@npm:^7.5.4":
-  version: 7.6.0
-  resolution: "semver@npm:7.6.0"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
+  version: 7.6.2
+  resolution: "semver@npm:7.6.2"
   bin:
     semver: bin/semver.js
-  checksum: 10c0/fbfe717094ace0aa8d6332d7ef5ce727259815bd8d8815700853f4faf23aacbd7192522f0dc5af6df52ef4fa85a355ebd2f5d39f554bd028200d6cf481ab9b53
+  checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
   languageName: node
   linkType: hard
 
@@ -7782,12 +7812,12 @@ __metadata:
   linkType: hard
 
 "socks@npm:^2.7.1":
-  version: 2.8.1
-  resolution: "socks@npm:2.8.1"
+  version: 2.8.3
+  resolution: "socks@npm:2.8.3"
   dependencies:
     ip-address: "npm:^9.0.5"
     smart-buffer: "npm:^4.2.0"
-  checksum: 10c0/ac77b515c260473cc7c4452f09b20939e22510ce3ae48385c516d1d5784374d5cc75be3cb18ff66cc985a7f4f2ef8fef84e984c5ec70aad58355ed59241f40a8
+  checksum: 10c0/d54a52bf9325165770b674a67241143a3d8b4e4c8884560c4e0e078aace2a728dffc7f70150660f51b85797c4e1a3b82f9b7aa25e0a0ceae1a243365da5c51a7
   languageName: node
   linkType: hard
 
@@ -7830,11 +7860,11 @@ __metadata:
   linkType: hard
 
 "ssri@npm:^10.0.0":
-  version: 10.0.5
-  resolution: "ssri@npm:10.0.5"
+  version: 10.0.6
+  resolution: "ssri@npm:10.0.6"
   dependencies:
     minipass: "npm:^7.0.3"
-  checksum: 10c0/b091f2ae92474183c7ac5ed3f9811457e1df23df7a7e70c9476eaa9a0c4a0c8fc190fb45acefbf023ca9ee864dd6754237a697dc52a0fb182afe65d8e77443d8
+  checksum: 10c0/e5a1e23a4057a86a97971465418f22ea89bd439ac36ade88812dd920e4e61873e8abd6a9b72a03a67ef50faa00a2daf1ab745c5a15b46d03e0544a0296354227
   languageName: node
   linkType: hard
 
@@ -7971,23 +8001,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^6.0.8":
-  version: 6.1.8
-  resolution: "styled-components@npm:6.1.8"
+"styled-components@npm:^6.1.11":
+  version: 6.1.11
+  resolution: "styled-components@npm:6.1.11"
   dependencies:
-    "@emotion/is-prop-valid": "npm:1.2.1"
-    "@emotion/unitless": "npm:0.8.0"
-    "@types/stylis": "npm:4.2.0"
+    "@emotion/is-prop-valid": "npm:1.2.2"
+    "@emotion/unitless": "npm:0.8.1"
+    "@types/stylis": "npm:4.2.5"
     css-to-react-native: "npm:3.2.0"
-    csstype: "npm:3.1.2"
-    postcss: "npm:8.4.31"
+    csstype: "npm:3.1.3"
+    postcss: "npm:8.4.38"
     shallowequal: "npm:1.1.0"
-    stylis: "npm:4.3.1"
-    tslib: "npm:2.5.0"
+    stylis: "npm:4.3.2"
+    tslib: "npm:2.6.2"
   peerDependencies:
     react: ">= 16.8.0"
     react-dom: ">= 16.8.0"
-  checksum: 10c0/fafe4b9198d5d7980c2358821d1a89f86200d55c8eec03670cf12cf43b8a05a77eafaf0872cd85821f68238308e0f5c9d9aa43a62e6987c65b70baa2c3277ab8
+  checksum: 10c0/1d149a51d24f779bba700c8c23ec0538b2d2b57745ccd49d1cfdc2dfce8bcea21e8ff81fed1143d1b35d127cc591717a398da72ea6671abbf705432b13e59e56
   languageName: node
   linkType: hard
 
@@ -8007,10 +8037,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.3.1":
-  version: 4.3.1
-  resolution: "stylis@npm:4.3.1"
-  checksum: 10c0/33e8ebd2bfa5f0bd0215f718dc2d3be896e1d00c5bcaeb9a4ae03cf239db6867af9eee230f57229bf1c29499357073ba3e6b547484ba1db2f5de1e8be7d4eee9
+"stylis@npm:4.3.2":
+  version: 4.3.2
+  resolution: "stylis@npm:4.3.2"
+  checksum: 10c0/0410e1404cbeee3388a9e17587875211ce2f014c8379af0d1e24ca55878867c9f1ccc7b0ce9a156ca53f5d6e301391a82b0645522a604674a378b3189a4a1994
   languageName: node
   linkType: hard
 
@@ -8058,11 +8088,11 @@ __metadata:
   linkType: hard
 
 "tailwind-merge@npm:^2.2.2":
-  version: 2.2.2
-  resolution: "tailwind-merge@npm:2.2.2"
+  version: 2.3.0
+  resolution: "tailwind-merge@npm:2.3.0"
   dependencies:
-    "@babel/runtime": "npm:^7.24.0"
-  checksum: 10c0/68a5e199848a467aed4f8d1a8d7b6a5b583ff72f1d2801e018bf245eaa41e6564b63ead9e2b708a214cefbd843970c5e0a21754d5f2a20e2c1238e25955685ce
+    "@babel/runtime": "npm:^7.24.1"
+  checksum: 10c0/5ea308e23c3ab1cf4c3f35f0a471753f4d3ed232d63dd7c09151a74428737321902203d90e9f0cb76ea5c3978e71b0adbc503dc455e56cda967a7674ae4b94b5
   languageName: node
   linkType: hard
 
@@ -8161,13 +8191,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-warning@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "tiny-warning@npm:1.0.3"
-  checksum: 10c0/ef8531f581b30342f29670cb41ca248001c6fd7975ce22122bd59b8d62b4fc84ad4207ee7faa95cde982fa3357cd8f4be650142abc22805538c3b1392d7084fa
-  languageName: node
-  linkType: hard
-
 "to-fast-properties@npm:^2.0.0":
   version: 2.0.0
   resolution: "to-fast-properties@npm:2.0.0"
@@ -8233,14 +8256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.5.0":
-  version: 2.5.0
-  resolution: "tslib@npm:2.5.0"
-  checksum: 10c0/e32fc99cc730dd514e53c44e668d76016e738f0bcc726aad5dbd2d335cf19b87a95a9b1e4f0a9993e370f1d702b5e471cdd4acabcac428a3099d496b9af2021e
-  languageName: node
-  linkType: hard
-
-"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
+"tslib@npm:2.6.2, tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
@@ -8316,22 +8332,22 @@ __metadata:
   linkType: hard
 
 "typescript@npm:^5":
-  version: 5.4.4
-  resolution: "typescript@npm:5.4.4"
+  version: 5.4.5
+  resolution: "typescript@npm:5.4.5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/4d8de0291204ed61ca97ad0cba2ce064e09c4988ca1c451c787e4653ba76296ba35177a52694e8a00cf4ef899d0ee83338663b926d8b7d55167ff0ba81549999
+  checksum: 10c0/2954022ada340fd3d6a9e2b8e534f65d57c92d5f3989a263754a78aba549f7e6529acc1921913560a4b816c46dce7df4a4d29f9f11a3dc0d4213bb76d043251e
   languageName: node
   linkType: hard
 
 "typescript@patch:typescript@npm%3A^5#optional!builtin<compat/typescript>":
-  version: 5.4.4
-  resolution: "typescript@patch:typescript@npm%3A5.4.4#optional!builtin<compat/typescript>::version=5.4.4&hash=5adc0c"
+  version: 5.4.5
+  resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin<compat/typescript>::version=5.4.5&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/1fa41b9964a9ff0ed913b339c90b46031b2d2da3cb1a192af516610733f7f1d5f7f9754a8e22b9ac7076d3d8aedd2c4f84db3f113bad060eac3a95962443a1bf
+  checksum: 10c0/db2ad2a16ca829f50427eeb1da155e7a45e598eec7b086d8b4e8ba44e5a235f758e606d681c66992230d3fc3b8995865e5fd0b22a2c95486d0b3200f83072ec9
   languageName: node
   linkType: hard
 
@@ -8517,16 +8533,16 @@ __metadata:
   linkType: hard
 
 "update-browserslist-db@npm:^1.0.13":
-  version: 1.0.13
-  resolution: "update-browserslist-db@npm:1.0.13"
+  version: 1.0.15
+  resolution: "update-browserslist-db@npm:1.0.15"
   dependencies:
-    escalade: "npm:^3.1.1"
+    escalade: "npm:^3.1.2"
     picocolors: "npm:^1.0.0"
   peerDependencies:
     browserslist: ">= 4.21.0"
   bin:
     update-browserslist-db: cli.js
-  checksum: 10c0/e52b8b521c78ce1e0c775f356cd16a9c22c70d25f3e01180839c407a5dc787fb05a13f67560cbaf316770d26fa99f78f1acd711b1b54a4f35d4820d4ea7136e6
+  checksum: 10c0/c5f67dc68aba9a37701a14199e57e22f20c579411d386f47b4d81f6e3f06fd3ec256310594f4f9d6b01bc1cfb93cb1ebb1a1da70c4fa28720bc1d030f55bb8a1
   languageName: node
   linkType: hard
 
@@ -8624,14 +8640,14 @@ __metadata:
   linkType: hard
 
 "vaul@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "vaul@npm:0.9.0"
+  version: 0.9.1
+  resolution: "vaul@npm:0.9.1"
   dependencies:
     "@radix-ui/react-dialog": "npm:^1.0.4"
   peerDependencies:
     react: ^16.8 || ^17.0 || ^18.0
     react-dom: ^16.8 || ^17.0 || ^18.0
-  checksum: 10c0/3b4290f7bbc984c7ab3784e6b5a16f6cd2f380798d8c0d1a01818f215f473ecefc6a3f5ccf6724107282a9ceb1a7f8fce8f841ae3eb70cc63b23776bd42fd9e7
+  checksum: 10c0/33fc4ab9554acdcb218fb5048f270607aaa3eb58909cf2e4300c1bca8ba8b989845500b9f116e62fde8d3f56a26e42bdd722a1e7fcd5a074a480b86d11612005
   languageName: node
   linkType: hard
 
@@ -8688,7 +8704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"warning@npm:^4.0.2":
+"warning@npm:^4.0.0, warning@npm:^4.0.2":
   version: 4.0.3
   resolution: "warning@npm:4.0.3"
   dependencies:
@@ -8810,6 +8826,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"word-wrap@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "word-wrap@npm:1.2.5"
+  checksum: 10c0/e0e4a1ca27599c92a6ca4c32260e8a92e8a44f4ef6ef93f803f8ed823f486e0889fc0b93be4db59c8d51b3064951d25e43d434e95dc8c960cc3a63d65d00ba20
+  languageName: node
+  linkType: hard
+
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version: 7.0.0
   resolution: "wrap-ansi@npm:7.0.0"
@@ -8847,11 +8870,11 @@ __metadata:
   linkType: hard
 
 "yaml@npm:^2.3.4":
-  version: 2.4.1
-  resolution: "yaml@npm:2.4.1"
+  version: 2.4.2
+  resolution: "yaml@npm:2.4.2"
   bin:
     yaml: bin.mjs
-  checksum: 10c0/816057dbaea16a7dfb0b868ace930f143dece96bbb4c4fbb6f38aa389166f897240d9fa535dbfd6b1b0d9442416f4abcc698e63f82394d0c67b329aa6c2be576
+  checksum: 10c0/280ddb2e43ffa7d91a95738e80c8f33e860749cdc25aa6d9e4d350a28e174fd7e494e4aa023108aaee41388e451e3dc1292261d8f022aabcf90df9c63d647549
   languageName: node
   linkType: hard
 
@@ -8863,9 +8886,9 @@ __metadata:
   linkType: hard
 
 "zod@npm:^3.22.4":
-  version: 3.22.4
-  resolution: "zod@npm:3.22.4"
-  checksum: 10c0/7578ab283dac0eee66a0ad0fc4a7f28c43e6745aadb3a529f59a4b851aa10872b3890398b3160f257f4b6817b4ce643debdda4fb21a2c040adda7862cab0a587
+  version: 3.23.8
+  resolution: "zod@npm:3.23.8"
+  checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69
   languageName: node
   linkType: hard