64 changed files with 3019 additions and 4710 deletions
--- a/.github/workflows/docker.yml
+++ b/.github/workflows/docker.yml
@ -19,9 +19,7 @@ jobs:
      packages: write
    steps:
      - name: Checkout repo
-        uses: actions/checkout@v4
-        with:
-          submodules: true
+        uses: actions/checkout@v3
      - name: Setup docker buildx
        uses: docker/setup-buildx-action@v3
      - name: Login To registry ${{ env.REGISTRY }}
--- a/.gitignore
+++ b/.gitignore
@ -10,7 +10,7 @@ node_modules/
 package-lock.json

 #external assets
-database_assets/*
+database_assets/
 !database_assets/com.nebula.gruvbox/
 !database_assets/com.nebula.lightTheme/
 !database_assets/com.nebula.oled/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -15,22 +15,3 @@

 - Adds the ability for a custom wisp server back
 - Increases upload fileSize capacity in hopes that bigger files can now be uploaded
-
-# 9.0.3
-
- Bugfix: themes with caps don't uninstall - fixed
- Rewrite: InstalledThemes and InstalledPlugins are now in Astro instead of Svelte
-
-# 9.0.4
-
- General Bugfixes
- Removes Svelte except for 2 componenents
- Scramjet :rocket:
-
-# 9.1.0
-
- Rewrites everything in the [utils/](./src/utils) folder
- Bugfixes
- Better logging
- Mobile nav jank is gone
- Component cleanup
--- a/661
+++ b/661
@ -1,661 +0,0 @@
-                    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) <year>  <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/>.
--- a/README.md
+++ b/README.md
@ -361,11 +361,3 @@ There are a couple of configuration options for Nebula. The defaults are fine mo
 | `wisp` | Whether the server should use the inbuilt wisp server. (Disabled if your using an external wisp server) | `boolean` | `true` |
 | `logging` | Whether or not to enable logging. *Note: Logs are massive* | `boolean` | `true` |
 |----------------------------| ----------------------------------------------------------------------------|------------|--------------|
-
-## Deploying
-### Koyeb
- First setup the config.toml file with the docker-compose instructions!
- Fork this repo
- Create new koyeb service, and select webservice
- Select import from github and import your forked repo
- Change package to dockerfile and press deploy!
--- a/astro.config.ts
+++ b/astro.config.ts
@ -7,7 +7,6 @@ import { epoxyPath } from "@mercuryworkshop/epoxy-transport";
 import { libcurlPath } from "@mercuryworkshop/libcurl-transport";
 import playformCompress from "@playform/compress";
 import { uvPath } from "@titaniumnetwork-dev/ultraviolet";
-import { scramjetPath } from "@mercuryworkshop/scramjet";
 import icon from "astro-icon";
 import { defineConfig, envField } from "astro/config";
 import { viteStaticCopy } from "vite-plugin-static-copy";
@ -16,7 +15,7 @@ import { parsedDoc } from "./server/config.js";
 const workerwarePath = fileURLToPath(new URL("./workerware/src", import.meta.url));

 export default defineConfig({
-    site: parsedDoc.seo.enabled ? parsedDoc.seo.domain || process.env.SITE : 'http://localhost:4321',
+    experimental: {
        env: {
            schema: {
                VERSION: envField.string({
@ -30,21 +29,12 @@ export default defineConfig({
                    access: "public",
                    optional: true,
                    default: parsedDoc.marketplace.enabled
-                }),
-                SEO: envField.string({
-                    context: "client",
-                    access: "public",
-                    optional: true,
-                    default: JSON.stringify({
-                        enabled: parsedDoc.seo.enabled,
-                        domain: new URL(parsedDoc.seo.domain).host
-                    })
                })
            }
+        }
    },
    integrations: [
        tailwind(),
-        //sitemap(),
        icon(),
        svelte(),
        playformCompress({
@ -74,11 +64,6 @@ export default defineConfig({
                        dest: "libcurl",
                        overwrite: false
                    },
-                    {
-                        src: `${scramjetPath}/**/*`.replace(/\\/g, "/"),
-                        dest: "scram",
-                        overwrite: false 
-                    },
                    {
                        src: `${baremuxPath}/**/*`.replace(/\\/g, "/"),
                        dest: "baremux",
--- a/config.example.toml
+++ b/config.example.toml
@ -1,14 +1,10 @@
 [marketplace]
-enabled = false # Turn on or off the marketplace entirely
+enabled = true # Turn on or off the marketplace entirely
 psk = "CHANGEME" # Change this to something more secure.
 level = 1

-[seo]
-enabled = false
-domain = "https://nebulaproxy.io"
-
 [db]
-name = "database" # Your database name
+name = "database" # Your databsae name
 username = "username" # The username of your DB (SQLITE just ignores this)
 password = "password" # The password to your DB (SQLITE ignores this)
 postgres = false # Enable to use postgres over sqlite (recommended for large prod instances)
--- a/database_assets/com.nebula.gruvbox/gruvbox.jpeg
+++ b/database_assets/com.nebula.gruvbox/gruvbox.jpeg
--- a/package.json
+++ b/package.json
@ -1,65 +1,66 @@
 {
  "name": "nebula",
  "type": "module",
-  "version": "9.1.0",
+  "version": "9.0.2",
  "private": true,
  "scripts": {
-    "dev": "astro dev --host 0.0.0.0 & tsx --watch server/server.ts",
+    "dev": "concurrently \"astro dev --host 0.0.0.0\" \"tsx --watch server/server.ts\"",
    "start": "node server/server.js",
    "build:server": "tsc -p server",
    "build:client": "astro check && astro build",
-    "build": "npm run build:server & npm run build:client",
+    "build": "concurrently \"npm:build:server\" \"npm:build:client\"",
    "bstart": "npm run build && npm run start",
    "preview": "astro preview",
    "astro": "astro",
    "format:code": "biome format . --write",
    "format:imports": "biome check . --write",
-    "format": "npm run format:code && npm run format:imports",
+    "format": "concurrently -m 1 \"npm:format:code\" \"npm:format:imports\"",
    "version": "changeset version"
  },
  "dependencies": {
-    "@astrojs/check": "^0.9.4",
-    "@astrojs/node": "^9.0.0",
-    "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/svelte": "^7.0.2",
-    "@astrojs/tailwind": "^5.1.4",
+    "@astrojs/check": "^0.8.3",
+    "@astrojs/node": "^8.3.4",
+    "@astrojs/svelte": "^5.7.3",
+    "@astrojs/tailwind": "^5.1.2",
    "@fastify/compress": "^8.0.1",
-    "@fastify/helmet": "^13.0.0",
+    "@fastify/helmet": "^12.0.1",
    "@fastify/middie": "^9.0.2",
    "@fastify/multipart": "^9.0.1",
-    "@fastify/static": "^8.0.3",
-    "@iconify-json/ph": "^1.2.2",
-    "@mercuryworkshop/bare-mux": "^2.1.7",
-    "@mercuryworkshop/epoxy-transport": "^2.1.27",
-    "@mercuryworkshop/libcurl-transport": "^1.3.15",
+    "@fastify/static": "^8.0.2",
+    "@iconify-json/ph": "^1.2.1",
+    "@mercuryworkshop/bare-mux": "^2.1.6",
+    "@mercuryworkshop/epoxy-transport": "2.1.13",
+    "@mercuryworkshop/libcurl-transport": "^1.3.12",
    "@playform/compress": "^0.1.6",
+    "@svelte-drama/suspense": "0.5.1",
    "@titaniumnetwork-dev/ultraviolet": "^3.2.10",
-    "@mercuryworkshop/scramjet": "https://github.com/MercuryWorkshop/scramjet/releases/download/latest/mercuryworkshop-scramjet-1.0.2-dev.tgz",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.9.0",
    "@types/sequelize": "^4.28.20",
-    "astro": "^5.1.1",
-    "astro-icon": "^1.1.5",
-    "astro-seo": "^0.8.4",
-    "chalk": "^5.4.1",
-    "fastify": "^5.2.0",
+    "astro": "^4.16.10",
+    "astro-icon": "^1.1.2",
+    "chalk": "^5.3.0",
+    "concurrently": "^8.2.2",
+    "fastify": "^5.1.0",
+    "form-data": "^4.0.1",
    "gradient-string": "^3.0.0",
+    "nanostores": "^0.10.3",
+    "ora": "^8.1.1",
    "pg": "^8.13.1",
    "pg-hstore": "^2.3.4",
    "sequelize": "^6.37.5",
-    "smol-toml": "^1.3.1",
+    "smol-toml": "^1.3.0",
    "sqlite3": "^5.1.7",
-    "svelte": "^5.16.0",
+    "svelte": "^4.2.19",
    "svelte-french-toast": "^1.2.0",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.2",
-    "vite-plugin-static-copy": "^2.2.0",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3",
+    "vite-plugin-static-copy": "^1.0.6",
    "wisp-server-node": "^1.1.7"
  },
  "devDependencies": {
    "@biomejs/biome": "^1.9.4",
-    "@changesets/cli": "^2.27.11",
-    "bufferutil": "^4.0.9",
-    "ora": "^8.1.1",
+    "@changesets/cli": "^2.27.9",
+    "bufferutil": "^4.0.8",
    "sharp": "^0.33.5",
    "tsx": "^4.19.2"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
@ -1,16 +1,9 @@
-<svg
-  version="1.2"
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 400 400"
-  width="400"
-  height="400"
-  fill="#7967dd"
-  style="width: 100%; height: 100%;"
-  ><title>nebula</title><g id="svgg"
-    ><path
-      id="path0"
-      fill="#7967dd"
-      d="m213.6 84c1 0.3 3.4 0.7 5.1 1 1.8 0.2 4.1 0.7 5.2 1 13.2 4.1 20.3 6.8 24.5 9.1 0.6 0.3 2.3 1.2 3.8 2 2.8 1.4 13.1 8 14.4 9.2 0.5 0.3 2.3 1.9 4.2 3.5 6.7 5.5 15.5 14.9 19.2 20.4 1 1.4 2 2.7 2.2 2.8 0.3 0.1 0.5 0.5 0.5 0.8 0 0.3 1.2 2.2 2.5 4.3 2.3 3.4 7.8 14.3 9.8 19.3 0.8 2.1 0.9 2.2 10 4.9 5.6 1.6 11.1 3.4 11.7 3.8 0.3 0.2 2.4 1.1 4.7 1.9 11.1 4.1 23 12.5 27.3 19.4 5.5 8.7 3.6 20.5-4.5 28.5-3.1 3-7.5 6.4-8.4 6.4-0.3 0-0.7 0.2-0.8 0.5-1.1 2.3-23.3 11.2-35.9 14.3-3.2 0.9-3.5 1.2-5.7 6.8-7.5 19-25.5 40.6-42.3 51.1-1.6 1-3.1 2-3.3 2.2-0.1 0.2-0.9 0.7-1.7 1.2-0.8 0.4-2.2 1.2-2.9 1.6-0.8 0.4-1.6 1-1.8 1.1-0.5 0.5-4.1 2.2-8.1 3.9-1.8 0.8-3.8 1.6-4.5 2-0.7 0.3-3.1 1.1-5.2 1.8-8.3 2.6-9.8 3-21 4.9-6.4 1.1-25.3 1.3-30.5 0.3-1.9-0.3-5.8-1.1-8.6-1.6-6.8-1.3-12.7-3-20-5.7-3.3-1.2-18-8.8-19.7-10.1-0.9-0.7-4.1-3.1-7.1-5.2-5.7-4.1-17.9-15.9-20.7-20-0.9-1.2-2-2.7-2.5-3.2-3.2-3.3-13.7-21.7-13.7-24.1 0-0.6-0.2-1.2-0.6-1.4-0.3-0.2-0.8-1.2-1-2.3-0.4-1.9-1.7-2.7-6.5-3.8-23.2-5.6-43.1-17.2-48.6-28.5-7.1-14.4 4.5-31.3 27.3-39.7 1.8-0.7 4.1-1.6 5.2-2 3.7-1.5 8-2.9 19.5-6.2 1.6-0.5 2.8-1.2 2.8-1.7 0-2.4 9.8-21.6 13.1-25.7 0.2-0.4 1.4-1.8 2.5-3.2 13.8-18.1 30.2-30.6 50.6-38.8 4.3-1.7 6-2.3 14.3-4.5 5.5-1.6 11.2-2.4 18.4-2.9 7.9-0.5 24-0.2 26.8 0.6zm-29.7 17.3c-0.2 0.1-7.3 1.7-12.9 2.7-1.7 0.4-4.3 1.2-5.8 1.9-1.5 0.6-3.9 1.5-5.5 2-1.5 0.4-3.3 1.3-4 2-0.7 0.7-1.7 1.2-2.3 1.2-1.2 0-9.5 4.5-9.8 5.3-0.2 0.3-0.5 0.6-0.9 0.6-1.9 0-19.6 16-23.8 21.6-9.3 12.2-16.1 27.4-19.2 42.7-2 10.1-1.1 37.5 1.4 41.4 0 0.1 3.7 0.9 8.1 1.8 9.5 1.9 12.8 2.4 34.6 4.9 38.5 4.5 107.9 2.2 138.3-4.5 1.4-0.3 4.1-0.9 6.1-1.3 4.2-0.8 3.4 0.2 4.9-7.1 1.6-8.3 1.7-27 0.1-34.6-1.5-7.1-3.2-13.4-3.7-14.2-0.3-0.4-0.7-1.5-0.9-2.6-2.8-12.1-19.2-34.1-33-44.3-2.9-2.1-5.5-4-5.8-4.3-2.8-2.2-4.9-3.1-7.2-3.1-2.1 0-2.6-0.2-2.7-1.3-0.2-1.5-5.7-4.5-6.3-3.5-0.7 1.1-2.4 0.6-2.7-0.7-0.4-1.3-1.2-1.6-5.8-2.1-1.6-0.2-4-0.9-5.5-1.6-3.9-1.8-5.3-2.2-10.2-2.6-4.6-0.4-25.2-0.7-25.5-0.3zm74.3 42.2c7.4 9.8 4.8 23.5-4.6 24.9-6.9 1-20.9-5.8-21-10.2 0-0.2-0.3-0.8-0.8-1.3-6.4-6.8-5-20.8 2.4-24.1 6.7-2.9 17.2 1.8 24 10.7zm-176.4 36.4c-0.1-0.1-4.6 1.1-5.9 1.6-0.7 0.3-3 1.2-5.1 2-9.9 3.8-15.1 6.8-19.6 11.5-3.4 3.5-3.3 4.5 0.5 8.7 1 1 11.3 7.6 12 7.6 0.2 0 1.7 0.6 3.4 1.3 1.6 0.8 3.6 1.6 4.3 1.9 1.8 0.8 9.3 3.3 9.9 3.3 0.3 0 0.3-2 0-4.4-0.6-5.6-0.6-24.5 0.1-29.6 0.3-2.1 0.5-3.9 0.4-3.9zm229.3-0.3c-0.2 0 0 1 0.2 2.1 0.6 2.8 0.6 31.3 0 34-0.5 2.2-0.4 2.2 1.3 1.8 3.1-0.7 12.9-4.5 18.3-7 8.5-4 14.3-10.1 12.6-13.3-1.1-2.1-6.7-7.2-7.9-7.2-0.4 0-0.9-0.2-1-0.5-0.4-1.1-11.8-6.1-19.2-8.5-2.3-0.7-4.2-1.4-4.3-1.4zm-199.4 63.4l-3.1-0.4 1.8 3.2c0.9 1.8 1.9 3.4 2.2 3.5 0.3 0.1 0.5 0.6 0.5 1.1 0 0.4 0.6 1.5 1.3 2.3 0.7 0.9 1.5 1.9 1.8 2.2 0.3 0.4 0.8 1.2 1.1 1.7 6.2 10.7 35.6 33.5 43.3 33.5 0.2 0 1.3 0.4 2.5 0.9 2.5 1.2 10.6 3.4 15.3 4.2 9.5 1.8 11.6 2.1 17.4 2.1 6.6 0 16.4-1.3 22.9-3 2.2-0.5 5.2-1.3 6.8-1.7 1.6-0.3 3.2-0.9 3.5-1.2 0.4-0.3 1.1-0.6 1.6-0.6 2.3 0 22-10.6 24-12.9 0.2-0.2 2.2-1.9 4.5-3.7 5.7-4.5 11.8-11 17.1-18.4 1.6-2.3 3.2-4.5 3.6-4.9 0.4-0.4 0.7-1 0.7-1.2 0-0.2 0.8-1.9 1.9-3.6 1.1-1.7 1.9-3.2 1.9-3.4 0-0.2-3.8 0.4-11 1.6-31.7 5.4-85.1 6.7-126.9 3.1-9.6-0.8-23.1-2.3-27.8-3.2-2.2-0.4-5.3-0.9-6.9-1.2z"
-      class="s0"></path></g
-  ></svg
->
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>
--- a/public/logo.png
+++ b/public/logo.png
--- a/public/sw.js
+++ b/public/sw.js
@ -1,16 +1,10 @@
 importScripts("/uv/uv.bundle.js");
 importScripts("/uv/uv.config.js");
-importScripts('/scram/scramjet.wasm.js');
-importScripts('/scram/scramjet.shared.js');
-importScripts('/scram/scramjet.worker.js');
 importScripts("/workerware/workerware.js");
 importScripts(__uv$config.sw || "/uv/uv.sw.js");
 const uv = new UVServiceWorker();
 const ww = new WorkerWare({ debug: false });
-const sj = new ScramjetServiceWorker();
-(async function () {
-        await sj.loadConfig();
-})();
+
 //me when Firefox (thanks vk6)
 if (navigator.userAgent.includes("Firefox")) {
    Object.defineProperty(globalThis, "crossOriginIsolated", {
@ -63,11 +57,7 @@ self.addEventListener("fetch", function (event) {
            }
            if (event.request.url.startsWith(location.origin + __uv$config.prefix)) {
                return await uv.fetch(event);
-            } 
-            else if (sj.route(event)) {
-                return await sj.fetch(event);
-            }
-            else {
+            } else {
                return await fetch(event.request);
            }
        })()
--- a/server/config.ts
+++ b/server/config.ts
@ -15,10 +15,6 @@ interface TomlData {
            logging: boolean;
        };
    };
-    seo: {
-        enabled: boolean;
-        domain: string;
-    };
    db: {
        name: string;
        username: string;
@ -35,7 +31,6 @@ interface Verify {
    name: string;
    typeOF: any;
    type: any;
-    verifyExtras?: () => boolean | Error;
 }

 let doc = readFileSync(fileURLToPath(new URL("../config.toml", import.meta.url))).toString();
@ -46,12 +41,6 @@ function verify(t: Verify[]) {
        if (typeof t[i].typeOF !== t[i].type) {
            throw new Error(`Invalid structure: "${t[i].name}" should be a(n) ${t[i].type}`);
        }
-        if (t[i].verifyExtras) {
-            const extra = t[i].verifyExtras();
-            if (extra !== true) {
-                throw extra;
-            }
-        }
    }
 }

@ -64,17 +53,6 @@ verify([
    { name: "server.server.port", typeOF: parsedDoc.server.server.port, type: "number" },
    { name: "server.server.wisp", typeOF: parsedDoc.server.server.wisp, type: "boolean" },
    { name: "server.server.logging", typeOF: parsedDoc.server.server.logging, type: "boolean" },
-    { name: "seo", typeOF: parsedDoc.seo, type: "object" },
-    { name: "seo.enabled", typeOF: parsedDoc.seo.enabled, type: "boolean" },
-    { name: "seo.domain", typeOF: parsedDoc.seo.domain, type: "string", verifyExtras: () => {
-        try {
-            new URL(parsedDoc.seo.domain);
-        }
-        catch (e) {
-            return Error(e);
-        }
-        return true;
-    }},
    { name: "db", typeOF: parsedDoc.db, type: "object" },
    { name: "db.name", typeOF: parsedDoc.db.name, type: "string" },
    { name: "db.username", typeOF: parsedDoc.db.username, type: "string" },
--- a/server/dbSetup.ts
+++ b/server/dbSetup.ts
@ -33,7 +33,7 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
        {
            package_name: "com.nebula.gruvbox",
            title: "Gruvbox",
-            image: "gruvbox.jpg",
+            image: "gruvbox.jpeg",
            author: "Nebula Services",
            version: "1.0.0",
            description: "The gruvbox theme",
@ -73,18 +73,7 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
            tags: ["Theme", "Simple", "Dark", "Retro"],
            payload: "retro.css",
            type: "theme"
-        },
-        /* {
-            package_name: 'gyatt',
-            title: 'gyatt',
-            image: 'gyatt',
-            author: "nebuka",
-            version: "2",
-            description: "e",
-            tags: [ "e" ],
-            payload: "gyatt.js",
-            type: "plugin-page"
-        } */
+        }
        //To add plugins: plugin types consist of plugin-sw (workerware) & plugin-page (uv.config.inject)
    ];
    const dbItems = await db.findAll();
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -2,6 +2,7 @@
 import { MARKETPLACE_ENABLED } from "astro:env/client";
 import { Icon } from "astro-icon/components";
 import { getLangFromUrl, useTranslations } from "../i18n/utils";
+import { isMobileNavOpen } from "../store.js";
 import HeaderButton from "./HeaderButton.astro";
 import Logo from "./Logo.astro";
 const lang = getLangFromUrl(Astro.url);
@ -55,7 +56,7 @@ const t = useTranslations(lang);
      </HeaderButton>
    </div>
    {/* Mobile hamburger menu */}
-    <div class="flex lg:hidden cursor-pointer" id="mobileNavTrigger">
+    <div class="flex lg:hidden" id="mobileNavTrigger" transition:persist>
      <Icon
        name="ph:text-align-justify-bold"
        class="h-9 w-9 text-text-color"
@ -69,3 +70,50 @@ const t = useTranslations(lang);
    </div>
  </div>
 </div>
+<script>
+  import { isMobileNavOpen } from "../store.js";
+  let isMobileNavOpenLocal = true;
+  const right_caret = document.getElementById("right_caret");
+  const hamburger_menu = document.getElementById("hamburger_menu");
+  const mobileNavTrigger = document.getElementById("mobileNavTrigger");
+  // Create a copy of the nano store so we can make this a toggle
+
+  // Set the store to true when the button is clicked
+  function openDialog() {
+    if (isMobileNavOpenLocal == false) {
+      isMobileNavOpen.set(true);
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "none";
+        right_caret.style.display = "block";
+      }
+    } else {
+      isMobileNavOpen.set(false);
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "block";
+        right_caret.style.display = "none";
+      }
+    }
+  }
+
+  isMobileNavOpen.subscribe((open) => {
+    if (open) {
+      isMobileNavOpenLocal = true;
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "none";
+        right_caret.style.display = "block";
+      }
+    } else {
+      isMobileNavOpenLocal = false;
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "block";
+        right_caret.style.display = "none";
+      }
+    }
+  });
+
+  // Add an event listener to the button
+
+  if (mobileNavTrigger) {
+    mobileNavTrigger.addEventListener("click", openDialog);
+  }
+</script>
--- a/src/components/Loading.astro
+++ b/src/components/Loading.astro
@ -1,7 +1,7 @@
 <div class="w-full h-full bg-primary text-navbar-text-color flex justify-center items-center">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 400 400" width="400" height="400" fill="#5e17eb" class="animate-pulse-brighter w-48 h-48">
        <g id="svgg">
-        <path id="path0" fill="currentColor" fill-rule="evenodd" class="s0" d="m213.6 84c1 0.3 3.4 0.7 5.1 1 1.8 0.2 4.1 0.7 5.2 1 13.2 4.1 20.3 6.8 24.5 9.1 0.6 0.3 2.3 1.2 3.8 2 2.8 1.4 13.1 8 14.4 9.2 0.5 0.3 2.3 1.9 4.2 3.5 6.7 5.5 15.5 14.9 19.2 20.4 1 1.4 2 2.7 2.2 2.8 0.3 0.1 0.5 0.5 0.5 0.8 0 0.3 1.2 2.2 2.5 4.3 2.3 3.4 7.8 14.3 9.8 19.3 0.8 2.1 0.9 2.2 10 4.9 5.6 1.6 11.1 3.4 11.7 3.8 0.3 0.2 2.4 1.1 4.7 1.9 11.1 4.1 23 12.5 27.3 19.4 5.5 8.7 3.6 20.5-4.5 28.5-3.1 3-7.5 6.4-8.4 6.4-0.3 0-0.7 0.2-0.8 0.5-1.1 2.3-23.3 11.2-35.9 14.3-3.2 0.9-3.5 1.2-5.7 6.8-7.5 19-25.5 40.6-42.3 51.1-1.6 1-3.1 2-3.3 2.2-0.1 0.2-0.9 0.7-1.7 1.2-0.8 0.4-2.2 1.2-2.9 1.6-0.8 0.4-1.6 1-1.8 1.1-0.5 0.5-4.1 2.2-8.1 3.9-1.8 0.8-3.8 1.6-4.5 2-0.7 0.3-3.1 1.1-5.2 1.8-8.3 2.6-9.8 3-21 4.9-6.4 1.1-25.3 1.3-30.5 0.3-1.9-0.3-5.8-1.1-8.6-1.6-6.8-1.3-12.7-3-20-5.7-3.3-1.2-18-8.8-19.7-10.1-0.9-0.7-4.1-3.1-7.1-5.2-5.7-4.1-17.9-15.9-20.7-20-0.9-1.2-2-2.7-2.5-3.2-3.2-3.3-13.7-21.7-13.7-24.1 0-0.6-0.2-1.2-0.6-1.4-0.3-0.2-0.8-1.2-1-2.3-0.4-1.9-1.7-2.7-6.5-3.8-23.2-5.6-43.1-17.2-48.6-28.5-7.1-14.4 4.5-31.3 27.3-39.7 1.8-0.7 4.1-1.6 5.2-2 3.7-1.5 8-2.9 19.5-6.2 1.6-0.5 2.8-1.2 2.8-1.7 0-2.4 9.8-21.6 13.1-25.7 0.2-0.4 1.4-1.8 2.5-3.2 13.8-18.1 30.2-30.6 50.6-38.8 4.3-1.7 6-2.3 14.3-4.5 5.5-1.6 11.2-2.4 18.4-2.9 7.9-0.5 24-0.2 26.8 0.6zm-29.7 17.3c-0.2 0.1-7.3 1.7-12.9 2.7-1.7 0.4-4.3 1.2-5.8 1.9-1.5 0.6-3.9 1.5-5.5 2-1.5 0.4-3.3 1.3-4 2-0.7 0.7-1.7 1.2-2.3 1.2-1.2 0-9.5 4.5-9.8 5.3-0.2 0.3-0.5 0.6-0.9 0.6-1.9 0-19.6 16-23.8 21.6-9.3 12.2-16.1 27.4-19.2 42.7-2 10.1-1.1 37.5 1.4 41.4 0 0.1 3.7 0.9 8.1 1.8 9.5 1.9 12.8 2.4 34.6 4.9 38.5 4.5 107.9 2.2 138.3-4.5 1.4-0.3 4.1-0.9 6.1-1.3 4.2-0.8 3.4 0.2 4.9-7.1 1.6-8.3 1.7-27 0.1-34.6-1.5-7.1-3.2-13.4-3.7-14.2-0.3-0.4-0.7-1.5-0.9-2.6-2.8-12.1-19.2-34.1-33-44.3-2.9-2.1-5.5-4-5.8-4.3-2.8-2.2-4.9-3.1-7.2-3.1-2.1 0-2.6-0.2-2.7-1.3-0.2-1.5-5.7-4.5-6.3-3.5-0.7 1.1-2.4 0.6-2.7-0.7-0.4-1.3-1.2-1.6-5.8-2.1-1.6-0.2-4-0.9-5.5-1.6-3.9-1.8-5.3-2.2-10.2-2.6-4.6-0.4-25.2-0.7-25.5-0.3zm74.3 42.2c7.4 9.8 4.8 23.5-4.6 24.9-6.9 1-20.9-5.8-21-10.2 0-0.2-0.3-0.8-0.8-1.3-6.4-6.8-5-20.8 2.4-24.1 6.7-2.9 17.2 1.8 24 10.7zm-176.4 36.4c-0.1-0.1-4.6 1.1-5.9 1.6-0.7 0.3-3 1.2-5.1 2-9.9 3.8-15.1 6.8-19.6 11.5-3.4 3.5-3.3 4.5 0.5 8.7 1 1 11.3 7.6 12 7.6 0.2 0 1.7 0.6 3.4 1.3 1.6 0.8 3.6 1.6 4.3 1.9 1.8 0.8 9.3 3.3 9.9 3.3 0.3 0 0.3-2 0-4.4-0.6-5.6-0.6-24.5 0.1-29.6 0.3-2.1 0.5-3.9 0.4-3.9zm229.3-0.3c-0.2 0 0 1 0.2 2.1 0.6 2.8 0.6 31.3 0 34-0.5 2.2-0.4 2.2 1.3 1.8 3.1-0.7 12.9-4.5 18.3-7 8.5-4 14.3-10.1 12.6-13.3-1.1-2.1-6.7-7.2-7.9-7.2-0.4 0-0.9-0.2-1-0.5-0.4-1.1-11.8-6.1-19.2-8.5-2.3-0.7-4.2-1.4-4.3-1.4zm-199.4 63.4l-3.1-0.4 1.8 3.2c0.9 1.8 1.9 3.4 2.2 3.5 0.3 0.1 0.5 0.6 0.5 1.1 0 0.4 0.6 1.5 1.3 2.3 0.7 0.9 1.5 1.9 1.8 2.2 0.3 0.4 0.8 1.2 1.1 1.7 6.2 10.7 35.6 33.5 43.3 33.5 0.2 0 1.3 0.4 2.5 0.9 2.5 1.2 10.6 3.4 15.3 4.2 9.5 1.8 11.6 2.1 17.4 2.1 6.6 0 16.4-1.3 22.9-3 2.2-0.5 5.2-1.3 6.8-1.7 1.6-0.3 3.2-0.9 3.5-1.2 0.4-0.3 1.1-0.6 1.6-0.6 2.3 0 22-10.6 24-12.9 0.2-0.2 2.2-1.9 4.5-3.7 5.7-4.5 11.8-11 17.1-18.4 1.6-2.3 3.2-4.5 3.6-4.9 0.4-0.4 0.7-1 0.7-1.2 0-0.2 0.8-1.9 1.9-3.6 1.1-1.7 1.9-3.2 1.9-3.4 0-0.2-3.8 0.4-11 1.6-31.7 5.4-85.1 6.7-126.9 3.1-9.6-0.8-23.1-2.3-27.8-3.2-2.2-0.4-5.3-0.9-6.9-1.2z"/>
+        <path id="path0" fill-rule="evenodd" class="s0" d="m213.6 84c1 0.3 3.4 0.7 5.1 1 1.8 0.2 4.1 0.7 5.2 1 13.2 4.1 20.3 6.8 24.5 9.1 0.6 0.3 2.3 1.2 3.8 2 2.8 1.4 13.1 8 14.4 9.2 0.5 0.3 2.3 1.9 4.2 3.5 6.7 5.5 15.5 14.9 19.2 20.4 1 1.4 2 2.7 2.2 2.8 0.3 0.1 0.5 0.5 0.5 0.8 0 0.3 1.2 2.2 2.5 4.3 2.3 3.4 7.8 14.3 9.8 19.3 0.8 2.1 0.9 2.2 10 4.9 5.6 1.6 11.1 3.4 11.7 3.8 0.3 0.2 2.4 1.1 4.7 1.9 11.1 4.1 23 12.5 27.3 19.4 5.5 8.7 3.6 20.5-4.5 28.5-3.1 3-7.5 6.4-8.4 6.4-0.3 0-0.7 0.2-0.8 0.5-1.1 2.3-23.3 11.2-35.9 14.3-3.2 0.9-3.5 1.2-5.7 6.8-7.5 19-25.5 40.6-42.3 51.1-1.6 1-3.1 2-3.3 2.2-0.1 0.2-0.9 0.7-1.7 1.2-0.8 0.4-2.2 1.2-2.9 1.6-0.8 0.4-1.6 1-1.8 1.1-0.5 0.5-4.1 2.2-8.1 3.9-1.8 0.8-3.8 1.6-4.5 2-0.7 0.3-3.1 1.1-5.2 1.8-8.3 2.6-9.8 3-21 4.9-6.4 1.1-25.3 1.3-30.5 0.3-1.9-0.3-5.8-1.1-8.6-1.6-6.8-1.3-12.7-3-20-5.7-3.3-1.2-18-8.8-19.7-10.1-0.9-0.7-4.1-3.1-7.1-5.2-5.7-4.1-17.9-15.9-20.7-20-0.9-1.2-2-2.7-2.5-3.2-3.2-3.3-13.7-21.7-13.7-24.1 0-0.6-0.2-1.2-0.6-1.4-0.3-0.2-0.8-1.2-1-2.3-0.4-1.9-1.7-2.7-6.5-3.8-23.2-5.6-43.1-17.2-48.6-28.5-7.1-14.4 4.5-31.3 27.3-39.7 1.8-0.7 4.1-1.6 5.2-2 3.7-1.5 8-2.9 19.5-6.2 1.6-0.5 2.8-1.2 2.8-1.7 0-2.4 9.8-21.6 13.1-25.7 0.2-0.4 1.4-1.8 2.5-3.2 13.8-18.1 30.2-30.6 50.6-38.8 4.3-1.7 6-2.3 14.3-4.5 5.5-1.6 11.2-2.4 18.4-2.9 7.9-0.5 24-0.2 26.8 0.6zm-29.7 17.3c-0.2 0.1-7.3 1.7-12.9 2.7-1.7 0.4-4.3 1.2-5.8 1.9-1.5 0.6-3.9 1.5-5.5 2-1.5 0.4-3.3 1.3-4 2-0.7 0.7-1.7 1.2-2.3 1.2-1.2 0-9.5 4.5-9.8 5.3-0.2 0.3-0.5 0.6-0.9 0.6-1.9 0-19.6 16-23.8 21.6-9.3 12.2-16.1 27.4-19.2 42.7-2 10.1-1.1 37.5 1.4 41.4 0 0.1 3.7 0.9 8.1 1.8 9.5 1.9 12.8 2.4 34.6 4.9 38.5 4.5 107.9 2.2 138.3-4.5 1.4-0.3 4.1-0.9 6.1-1.3 4.2-0.8 3.4 0.2 4.9-7.1 1.6-8.3 1.7-27 0.1-34.6-1.5-7.1-3.2-13.4-3.7-14.2-0.3-0.4-0.7-1.5-0.9-2.6-2.8-12.1-19.2-34.1-33-44.3-2.9-2.1-5.5-4-5.8-4.3-2.8-2.2-4.9-3.1-7.2-3.1-2.1 0-2.6-0.2-2.7-1.3-0.2-1.5-5.7-4.5-6.3-3.5-0.7 1.1-2.4 0.6-2.7-0.7-0.4-1.3-1.2-1.6-5.8-2.1-1.6-0.2-4-0.9-5.5-1.6-3.9-1.8-5.3-2.2-10.2-2.6-4.6-0.4-25.2-0.7-25.5-0.3zm74.3 42.2c7.4 9.8 4.8 23.5-4.6 24.9-6.9 1-20.9-5.8-21-10.2 0-0.2-0.3-0.8-0.8-1.3-6.4-6.8-5-20.8 2.4-24.1 6.7-2.9 17.2 1.8 24 10.7zm-176.4 36.4c-0.1-0.1-4.6 1.1-5.9 1.6-0.7 0.3-3 1.2-5.1 2-9.9 3.8-15.1 6.8-19.6 11.5-3.4 3.5-3.3 4.5 0.5 8.7 1 1 11.3 7.6 12 7.6 0.2 0 1.7 0.6 3.4 1.3 1.6 0.8 3.6 1.6 4.3 1.9 1.8 0.8 9.3 3.3 9.9 3.3 0.3 0 0.3-2 0-4.4-0.6-5.6-0.6-24.5 0.1-29.6 0.3-2.1 0.5-3.9 0.4-3.9zm229.3-0.3c-0.2 0 0 1 0.2 2.1 0.6 2.8 0.6 31.3 0 34-0.5 2.2-0.4 2.2 1.3 1.8 3.1-0.7 12.9-4.5 18.3-7 8.5-4 14.3-10.1 12.6-13.3-1.1-2.1-6.7-7.2-7.9-7.2-0.4 0-0.9-0.2-1-0.5-0.4-1.1-11.8-6.1-19.2-8.5-2.3-0.7-4.2-1.4-4.3-1.4zm-199.4 63.4l-3.1-0.4 1.8 3.2c0.9 1.8 1.9 3.4 2.2 3.5 0.3 0.1 0.5 0.6 0.5 1.1 0 0.4 0.6 1.5 1.3 2.3 0.7 0.9 1.5 1.9 1.8 2.2 0.3 0.4 0.8 1.2 1.1 1.7 6.2 10.7 35.6 33.5 43.3 33.5 0.2 0 1.3 0.4 2.5 0.9 2.5 1.2 10.6 3.4 15.3 4.2 9.5 1.8 11.6 2.1 17.4 2.1 6.6 0 16.4-1.3 22.9-3 2.2-0.5 5.2-1.3 6.8-1.7 1.6-0.3 3.2-0.9 3.5-1.2 0.4-0.3 1.1-0.6 1.6-0.6 2.3 0 22-10.6 24-12.9 0.2-0.2 2.2-1.9 4.5-3.7 5.7-4.5 11.8-11 17.1-18.4 1.6-2.3 3.2-4.5 3.6-4.9 0.4-0.4 0.7-1 0.7-1.2 0-0.2 0.8-1.9 1.9-3.6 1.1-1.7 1.9-3.2 1.9-3.4 0-0.2-3.8 0.4-11 1.6-31.7 5.4-85.1 6.7-126.9 3.1-9.6-0.8-23.1-2.3-27.8-3.2-2.2-0.4-5.3-0.9-6.9-1.2z"/>
        </g>
    </svg>
 </div>
--- a/src/components/MobileNavigation.astro
+++ b/src/components/MobileNavigation.astro
@ -7,7 +7,10 @@ const t = useTranslations(lang);
 import { MARKETPLACE_ENABLED } from "astro:env/client";
 ---

-<div class="h-full mt-16 flex w-full flex-col justify-evenly bg-navbar-color m-auto" id="mobilenav">
+<div
+  class="h-full mt-16 flex w-full flex-col justify-evenly bg-navbar-color m-auto"
+  id="mobileNavMenu"
+>
  <HeaderButton text={t("header.home")} route={`/${lang}/`}>
    <Icon
      name="ph:house-bold"
@ -44,59 +47,12 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
    />
  </HeaderButton>
 </div>
-<style is:global>
-    #mobilenav {
-        -webkit-transition-duration: 600ms;
-        transition-duration: 600ms;
-        transform: translateX(100%);
-    }
-    #mobilenavwrapper {
-        -webkit-transition-duration: 600ms;
-        transition-duration: 600ms;
-        transform: translateX(100%);
-    }
-</style>
 <script>
-    import { EventHandler } from "@utils/events";
-    import { Elements } from "@utils/index";
-    
-    const init = async () => {
-        const els = Elements.select([
-            { type: 'id', val: 'mobileNavTrigger' },
-            { type: 'id', val: 'right_caret' },
-            { type: 'id', val: 'hamburger_menu' },
-            { type: 'id', val: 'mobilenavwrapper' },
-            { type: 'id', val: 'mobilenav' }
-        ]);
-        const trigger = Elements.exists<HTMLDivElement>(await els.next());
-        const rightCaret = Elements.exists<SVGElement>(await els.next());
-        const hamburgerMenu = Elements.exists<SVGElement>(await els.next());
-        const wrapper = Elements.exists<HTMLDivElement>(await els.next());
-        const mnm = Elements.exists<HTMLDivElement>(await els.next());
-        let isOpen = false;
-        Elements.attachEvent(trigger, "click", async () => {
-            console.log(isOpen); 
-            if (isOpen) {
-                rightCaret.style.display = "none";
-                hamburgerMenu.style.display = "block"; 
-                mnm.style.transform = "translateX(100%)";
-                wrapper.style.transform = "translateX(100%)";
-                isOpen = false;
+  import { fade } from "astro:transitions";
+  import { isMobileNavOpen } from "../store.js";
+  function closeMobileNav() {
+    isMobileNavOpen.set(false);
  }
-            else { 
-                hamburgerMenu.style.display = "none";
-                rightCaret.style.display = "block";
-                mnm.style.display = "flex";
-                mnm.style.transform = "translateX(0%)";
-                wrapper.style.transform = "translateX(0%)";
-                isOpen = true;
-            }
-        });
-    }
-    new EventHandler({
-        events: {
-            "astro:page-load": init 
-        },
-        logging: false 
-    }).bind();
+  const mobileNavMenu = document.getElementById("mobileNavMenu");
+  mobileNavMenu!.addEventListener("click", closeMobileNav);
 </script>
--- a/src/components/catalog/CatalogCard.astro
+++ b/src/components/catalog/CatalogCard.astro
@ -1,58 +0,0 @@
---
-interface Props {
-    page: number | string | undefined;
-    lang: string;
-}
-interface Asset {
-    title: string;
-    description: string;
-    author: string;
-    image: string;
-    tags: [];
-    version: string;
-    background_image: string | null;
-    background_video: string | null;
-    payload: string;
-    type: "theme" | "plugin-sw" | "plugin-page";
-}
-const { page, lang } = Astro.props;
-const getAssets = async () => {
-    const res = await fetch(new URL(`/api/catalog-assets?page=${page}`, Astro.url));
-    const data = await res.json();
-    return data.assets;
-};
-const assets = await getAssets();
---
-<div class="text-3xl font-roboto font-bold text-text-color p-10">
-    {Object.keys(assets).length > 0 && (
-        <div class="flex flex-row gap-6 flex-wrap justify-center">
-            {Object.entries(assets).map((asset) => {
-                const pName = asset[0];
-                const a = asset[1] as unknown as Asset;
-                return (
-                    <a href={`/${lang}/catalog/package/${pName}`}>
-                            <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105 text-text-color">
-                                <img src={`/packages/${pName}/${a.image}`} alt={a.title} class="w-full h-40 object-cover" />
-                                <div class="p-6 text-sm">
-                                    <p class="font-semibold text-2xl mb-2"> {a.title} </p>
-                                    <p class="mb-4"> {a.description} </p>
-                                    <div class="flex flex-wrap gap-2 mb-4 w-full">
-                                        {a.tags.map((tag) => (
-                                            <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> { tag } </p>
-                                        ))}
-                                    </div>
-                                    <p> 
-                                        <strong>Version: </strong> { a.version } 
-                                    </p>
-                                    <p> 
-                                        <strong>Type: </strong> { a.type === "plugin-page" || a.type === "plugin-sw" ? "plugin" : a.type } 
-                                    </p>
-                                </div>
-                            </div>
-                        </a>
-                    )
-                }
-            )}
-        </div>
-    )}
-</div>
--- a/src/components/catalog/CatalogCard.svelte
+++ b/src/components/catalog/CatalogCard.svelte
@ -0,0 +1,47 @@
+<script lang="ts">
+import { Suspense } from "@svelte-drama/suspense";
+import { Settings } from "@utils/settings/index";
+export let page;
+export let lang;
+async function getAssets() {
+    const response = await fetch("/api/catalog-assets?page=" + page);
+    const data = await response.json();
+    return data.assets;
+}
+const assets = getAssets();
+</script>
+
+<div class="text-3xl font-roboto font-bold text-text-color p-10">
+    <Suspense let:suspend>
+        <div slot="loading">
+            <p class="text-4xl"> Loading... </p>
+        </div>
+        {#await suspend(assets) then data}
+            {#if Object.keys(data).length > 0}
+                <div class="flex flex-row gap-6 flex-wrap justify-center">
+                    {#each Object.entries(data) as [key, asset]}
+                        <a href={`/${lang}/catalog/package/${key}`}>
+                            <div class="bg-navbar-color w-64 rounded-3xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
+                                <img src={`/packages/${key}/${asset.image}`} alt={asset.title} class="w-full h-40 object-cover" />
+                                <div class="p-6 text-sm">
+                                    <p class="font-semibold text-2xl mb-2"> {asset.title} </p>
+                                    <p class="mb-4"> {asset.description} </p>
+                                    <div class="flex flex-wrap gap-2 mb-4 w-full">
+                                        {#each asset.tags as tag}
+                                            <p class="bg-navbar-text-color text-navbar-color font-bold px-3 py-1 rounded-md text-center"> {tag} </p>
+                                        {/each}
+                                    </div>
+                                    <div>
+                                        <strong>Version:</strong>
+                                        {asset.version}
+                                    </div>
+                                    <div><strong>Type:</strong> {asset.type === "plugin-page" || asset.type === "plugin-sw" ? "plugin" : asset.type}</div>
+                                </div>
+                            </div>
+                        </a>
+                    {/each}
+                </div>
+            {/if}
+        {/await}
+    </Suspense>
+</div>
--- a/src/components/catalog/InstalledPlugins.astro
+++ b/src/components/catalog/InstalledPlugins.astro
@ -1,107 +0,0 @@
-<div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center"> 
-</div>
-<div class="w-0 h-0 visibility-none hidden"> <asset-loader1 /> </div>
-<script>
-    import { Elements } from "@utils/index";
-    import { Marketplace } from "@utils/marketplace";
-    import { SettingsVals } from "@utils/values";
-
-    type Item = {
-        description: string,
-        image: string,
-        package_name: string,
-        payload: string,
-        tags: [],
-        background_video: string,
-        background_image: string,
-        title: string,
-        type: string,
-        version: string
-    }
-
-    const getItem = async (item: any) => {
-        try {
-            const res = await fetch(new URL(`/api/packages/${item.name}`, window.location.origin));
-            const data = await res.json();
-            return { ...data, package_name: item.name }
-        }
-        catch (err: any) {
-            console.log(`Err in themes: ${err}`);
-            return null;
-        }
-    }
-
-    const constructElements = async (item: Item, parent: HTMLDivElement, marketplace: Marketplace) => {
-        const main = document.createElement("div");
-        main.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer", "border-text-color");
-        main.dataset.name = item.package_name
-
-        const click = document.createElement("div");
-        click.classList.add("w-full"); 
-
-        const img = document.createElement("img");
-        img.classList.add("aspect-[16/9]", "rounded-t-3xl");
-        img.src = `/packages/${item.package_name}/${item.image}`;
-        img.alt = `${item.type}-${item.package_name}`;
-        img.loading = "lazy";
-
-        const info = document.createElement("div");
-        info.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
-
-        const infoTitle = document.createElement("p");
-        infoTitle.classList.add("text-2xl");
-        infoTitle.innerHTML = item.title;
-
-        const infoInner = document.createElement("div");
-        infoInner.classList.add("flex", "flex-row");
-
-        const infoInnerDelete = document.createElement("div");
-        infoInnerDelete.classList.add("h-8", "w-8", "cursor-pointer");
-        // This is cursed yes. SVG's SUUUCK
-        infoInnerDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`; 
-
-        const infoInnerOpen = document.createElement("a");
-        infoInnerOpen.classList.add("h-8", "w-8", "cursor-pointer");
-        infoInnerOpen.href = `../catalog/package/${item.package_name}`;
-        infoInnerOpen.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`;
-
-        click.appendChild(img);
-        infoInner.appendChild(infoInnerDelete);
-        infoInner.appendChild(infoInnerOpen);
-        info.appendChild(infoTitle);
-        info.appendChild(infoInner);
-        main.appendChild(click);
-        main.appendChild(info);
-        parent.appendChild(main);
-        
-
-        Elements.attachEvent(infoInnerDelete, "click", async () => {
-            await marketplace.uninstallPlugin({ name: item.package_name, type: item.type as "page" | "serviceWorker" })
-            parent.removeChild(main);
-        });
-    }
-
-    const init = async () => {
-        await Marketplace.ready();
-        const mp = Marketplace.getInstances().next().value!;
-        const els = Elements.select([
-            { type: 'id', val: 'parent' }
-        ]);
-        const itemsJSON = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.plugins)) || [];
-        const filteredItems = itemsJSON.filter((dat: any) => dat.remove !== true);
-        const itemPromises = filteredItems.map(getItem);
-        const itemsArray = await Promise.all(itemPromises);
-        return {
-            items: itemsArray.filter((data) => data !== null),
-            elements: els,
-            marketplace: mp
-        }
-    }
-
-    Elements.createCustomElement("asset-loader1", async () => {
-        const { items, elements, marketplace } = await init();
-        const parentElem = Elements.exists<HTMLDivElement>(await elements.next());
-        const promises = items.map(item => constructElements(item, parentElem, marketplace));
-        await Promise.all(promises);
-    });
-</script>
--- a/src/components/catalog/InstalledPlugins.svelte
+++ b/src/components/catalog/InstalledPlugins.svelte
@ -0,0 +1,57 @@
+<script lang="ts">
+import { Suspense } from "@svelte-drama/suspense";
+import { Settings, settings } from "@utils/settings/index";
+import Parent from "./Parent.svelte";
+async function getItem(item) {
+    try {
+        const response = await fetch(`/api/packages/${item.name}`);
+        const data = await response.json();
+        return {
+            ...data,
+            package_name: item.name
+        };
+    } catch (error) {
+        console.error("error: failed to fetch", error);
+        return null;
+    }
+}
+async function getAssets() {
+    const items = JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins)) || [];
+    const promises = items.map(getItem);
+    const dataArray = await Promise.all(promises);
+    let accumulatedData = dataArray.filter((data) => data !== null);
+    accumulatedData = accumulatedData.filter(({ remove }) => remove !== true);
+    console.log(JSON.stringify(accumulatedData));
+    return accumulatedData;
+}
+let assets = getAssets();
+let compRef = [];
+</script>
+<Suspense let:suspend>
+  {#await suspend(assets) then data}
+    {#each Object.entries(data) as [key, asset]}
+        <Parent bind:this={compRef[key]}>
+            <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+                <div class="w-full">
+                    <img src={`/packages/${asset.package_name}/${asset.image}`} alt="plugin" class="aspect-[16/9] rounded-t-3xl"/>
+                </div>
+                <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
+                    <div class="text-2xl"> {asset.title} </div>
+                    <div class="flex flex-row">
+                        <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall(asset.type === "page" ? "plugin-page" : "plugin-sw", asset.package_name); compRef[key].$destroy()}}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
+                            </svg>
+                        </div>
+                        <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </Parent>
+    {/each}
+  {/await}
+</Suspense>
--- a/src/components/catalog/InstalledThemes.astro
+++ b/src/components/catalog/InstalledThemes.astro
@ -1,138 +0,0 @@
-<div id="parent" class="flex flex-row flex-wrap gap-4 items-center font-roboto justify-center">
-    <div id="main-theme" class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
-        <div class="w-full">
-            <img src="/classic_theme.png" alt="Classic nebula" class="aspect-[16/9] rounded-t-3xl" loading="eager" />
-        </div>
-        <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
-            Classic Nebula
-        </div>
-    </div>
-</div>
-<div class="w-0 h-0 visibility-none hidden"> 
-    <asset-loader /> 
-</div>
-
-<script>
-    import { Elements } from "@utils/index";
-    import { Marketplace } from "@utils/marketplace";
-    import { SettingsVals } from "@utils/values";
-
-    type Item = {
-        description: string,
-        image: string,
-        package_name: string,
-        payload: string,
-        tags: [],
-        background_video: string,
-        background_image: string,
-        title: string,
-        type: string,
-        version: string
-    }
-
-    const getItem = async (item: any) => {
-        try {
-            const res = await fetch(new URL(`/api/packages/${item}`, window.location.origin));
-            const data = await res.json();
-            return { ...data, package_name: item }
-        }
-        catch (err: any) {
-            console.log(`Err in themes: ${err}`);
-            return null;
-        }
-    }
-
-    const constructElements = async (item: Item, mainTheme: HTMLDivElement, parent: HTMLDivElement, marketplace: Marketplace) => {
-        const main = document.createElement("div");
-        main.classList.add("rounded-3xl", "bg-navbar-color", "w-64", "flex", "flex-col", "cursor-pointer", "border-text-color");
-        main.dataset.name = item.package_name
-
-        const click = document.createElement("div");
-        click.classList.add("w-full"); 
-
-        const img = document.createElement("img");
-        img.classList.add("aspect-[16/9]", "rounded-t-3xl");
-        img.src = `/packages/${item.package_name}/${item.image}`;
-        img.alt = `${item.type}-${item.package_name}`;
-        img.loading = "lazy";
-
-        const info = document.createElement("div");
-        info.classList.add("h-2/6", "text-center", "content-center", "p-3", "font-semibold", "items-center", "flex", "flex-col");
-
-        const infoTitle = document.createElement("p");
-        infoTitle.classList.add("text-2xl");
-        infoTitle.innerHTML = item.title;
-
-        const infoInner = document.createElement("div");
-        infoInner.classList.add("flex", "flex-row");
-
-        const infoInnerDelete = document.createElement("div");
-        infoInnerDelete.classList.add("h-8", "w-8", "cursor-pointer");
-        // This is cursed yes. SVG's SUUUCK
-        infoInnerDelete.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" /></svg>`; 
-
-        const infoInnerOpen = document.createElement("a");
-        infoInnerOpen.classList.add("h-8", "w-8", "cursor-pointer");
-        infoInnerOpen.href = `../catalog/package/${item.package_name}`;
-        infoInnerOpen.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256"><path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" /></svg>`;
-
-        click.appendChild(img);
-        infoInner.appendChild(infoInnerDelete);
-        infoInner.appendChild(infoInnerOpen);
-        info.appendChild(infoTitle);
-        info.appendChild(infoInner);
-        main.appendChild(click);
-        main.appendChild(info);
-        parent.appendChild(main);
-        
-        
-        Elements.attachEvent(mainTheme, "click", () => {
-            marketplace.theme({ type: 'remove' });
-        });
-        
-        Elements.attachEvent(click, "click", async () => {
-            await marketplace.theme(
-                { 
-                    type: 'normal', 
-                    payload: item.payload, 
-                    sources: {
-                        video: item.background_video,
-                        bg: item.background_image
-                    },
-                    name: item.package_name
-                }
-            );
-        });
-
-        Elements.attachEvent(infoInnerDelete, "click", async () => {
-            await marketplace.uninstallTheme({ name: item.package_name });
-            parent.removeChild(main);
-            await marketplace.theme({ type: 'remove' });
-        });
-    }
-
-    const init = async () => {
-        await Marketplace.ready();
-        const mp = Marketplace.getInstances().next().value!;
-        const els = Elements.select([
-            { type: 'id', val: 'main-theme' },
-            { type: 'id', val: 'parent' }
-        ]);
-        const itemsJSON = JSON.parse(await mp.getValueFromStore(SettingsVals.marketPlace.themes)) || [];
-        const itemPromises = itemsJSON.map(getItem);
-        const itemsArray = await Promise.all(itemPromises);
-        return {
-            items: itemsArray.filter((data) => data !== null),
-            elements: els,
-            marketplace: mp
-        }
-    }
-
-    Elements.createCustomElement("asset-loader", async () => {
-        const { items, elements, marketplace } = await init();
-        const mainTheme = Elements.exists<HTMLDivElement>(await elements.next()); 
-        const parentElem = Elements.exists<HTMLDivElement>(await elements.next());
-        const promises = items.map(item => constructElements(item, mainTheme, parentElem, marketplace));
-        await Promise.all(promises);
-    });
-</script>
--- a/src/components/catalog/InstalledThemes.svelte
+++ b/src/components/catalog/InstalledThemes.svelte
@ -0,0 +1,64 @@
+<script lang="ts">
+import { Suspense } from "@svelte-drama/suspense";
+import { Settings, settings } from "@utils/settings/index";
+import Parent from "./Parent.svelte";
+async function getItem(item) {
+    try {
+        const response = await fetch(`/api/packages/${item}`);
+        const data = await response.json();
+        return {
+            ...data,
+            package_name: item
+        };
+    } catch (error) {
+        console.error("error: failed to fetch", error);
+        return null;
+    }
+}
+async function getAssets() {
+    const items = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes)) || [];
+    const promises = items.map(getItem);
+    const dataArray = await Promise.all(promises);
+    const accumulatedData = dataArray.filter((data) => data !== null);
+    console.log(JSON.stringify(accumulatedData));
+    return accumulatedData;
+}
+let assets = getAssets();
+let compRef = [];
+</script>
+<Suspense let:suspend>
+    <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+        <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(true)}}>
+            <img src='/classic_theme.png' alt="Classic Nebula" class="aspect-[16/9] rounded-t-3xl"/>
+        </div>
+        <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col text-2xl">
+            Classic Nebula
+        </div>
+    </div>
+  {#await suspend(assets) then data}
+    {#each Object.entries(data) as [key, asset]}
+        <Parent bind:this={compRef[key]}>
+            <div class="rounded-3xl bg-navbar-color w-64 flex flex-col cursor-pointer">
+                <div class="w-full" on:click={() => {settings.marketPlaceSettings.changeTheme(false, asset.payload, asset.background_video, asset.background_image, asset.package_name)}}>
+                    <img src={`/packages/${asset.package_name}/${asset.image}`} alt="theme" class="aspect-[16/9] rounded-t-3xl"/>
+                </div>
+                <div class="h-2/6 text-center content-center p-3 font-semibold items-center flex flex-col">
+                    <div class="text-2xl"> {asset.title} </div>
+                    <div class="flex flex-row">
+                        <div class="h-8 w-8 cursor-pointer" on:click={() => {settings.marketPlaceSettings.uninstall("theme", asset.package_name); settings.marketPlaceSettings.changeTheme(true); compRef[key].$destroy()}}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                <path fill="currentColor" d="M216 48h-40v-8a24 24 0 0 0-24-24h-48a24 24 0 0 0-24 24v8H40a8 8 0 0 0 0 16h8v144a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16V64h8a8 8 0 0 0 0-16M112 168a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm48 0a8 8 0 0 1-16 0v-64a8 8 0 0 1 16 0Zm0-120H96v-8a8 8 0 0 1 8-8h48a8 8 0 0 1 8 8Z" />
+                            </svg>
+                        </div>
+                        <a class="h-8 w-8 cursor-pointer" href={`../catalog/package/${asset.package_name}`}>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 256 256" {...$$props}>
+                                <path fill="currentColor" d="M192 136v72a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V80a16 16 0 0 1 16-16h72a8 8 0 0 1 0 16H48v128h128v-72a8 8 0 0 1 16 0m32-96a8 8 0 0 0-8-8h-64a8 8 0 0 0-5.66 13.66L172.69 72l-42.35 42.34a8 8 0 0 0 11.32 11.32L184 83.31l26.34 26.35A8 8 0 0 0 224 104Z" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </Parent>
+    {/each}
+  {/await}
+</Suspense>
--- a/src/components/catalog/Parent.svelte
+++ b/src/components/catalog/Parent.svelte
@ -0,0 +1,2 @@
+<!-- Legit just so we can use $destroy() -->
+<slot />
--- a/src/components/settings/Loader.astro
+++ b/src/components/settings/Loader.astro
@ -1,70 +1,25 @@
 <script>
-    import { EventHandler } from "@utils/events";
-    import { SW, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport } from "@utils/serviceWorker";
-    import { Settings } from "@utils/settings";
-    import { log } from "@utils/index";
-    import { Marketplace } from "@utils/marketplace";
-    import { SettingsVals } from "@utils/values";
-    const titleText = ` 
-     _   _      _           _         ____                  _               
-    | \\ | | ___| |__  _   _| | __ _  / ___|  ___ _ ____   _(_) ___ ___  ___ 
-    |  \\| |/ _ \\ '_ \\| | | | |/ _' | \\___ \\ / _ \\ '__\\ \\ / / |/ __/ _ \\/ __|
-    | |\\  |  __/ |_) | |_| | | (_| |  ___) |  __/ |   \\ V /| | (_|  __/\\__ \\
-    |_| \\_|\\___|_.__/ \\__,_|_|\\__,_| |____/ \\___|_|    \\_/ |_|\\___\\___||___/
-    `;
-    const info = "Hello developer or curious individual & welcome to the console! \nThere isn't a whole lot here for you unless you have run into an error.";
-    const sysInfo = `In which case please include the info below when opening the issue: \n\nOS: ${navigator.platform} \nBrowser: ${navigator.userAgent} \nService workers: ${"serviceWorker" in navigator ? "Yes" : "No"}`
-    const init = async (): Promise<Marketplace> => {
-        log({ type: 'normal', bg: false, prefix: false }, titleText);
-        log({ type: 'normal', bg: true, prefix: false }, info);
-        log({ type: 'normal', bg: true, prefix: false }, sysInfo);
-        log({ type: 'info', bg: true, prefix: true }, "General init...");
-        for (const script of createProxyScripts()) {
-            document.body.appendChild(script);
-        }
-        await checkProxyScripts();
-        const conn = await createBareMuxConn("/baremux/worker.js");
-        const sw = new SW(conn);
-        const mp = new Marketplace();
-        const { serviceWorker, bareMuxConn, sj } = await sw.getSWInfo();
-        log({ type: 'info', bg: true, prefix: true }, `General init completed! \n\nServiceWorker: ${serviceWorker.active?.state} \nBareMuxConn: ${bareMuxConn ? 'Active': 'Not active'} \nScramjetController: ${sj ? 'Active' : 'Not active'}`);
-        return mp;
-    }
-    
-    const handleTheme = async (marketplace: Marketplace) => {
-        const name = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.name);
-        const payload = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.theme.payload);
-        const video = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.video);
-        const image = await marketplace.getValueFromStore(SettingsVals.marketPlace.appearance.image);
-        if (name !== null) {
-            marketplace.theme({
-                type: 'normal',
-                name: name,
-                payload: payload,
-                sources: {
-                    video: video,
-                    bg: image 
-                }
+    import { settings, Settings } from "@utils/settings/index";
+    import { loadProxyScripts, setTransport, initSw, setSWStuff } from "@utils/registerSW";
+    // This loads the settings in a nice way
+    settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
+    settings.proxySettings.changeProxy(localStorage.getItem(Settings.ProxySettings.proxy) as string || "automatic");
+    settings.proxySettings.openIn(localStorage.getItem(Settings.ProxySettings.openIn) as string || "embed");
+    settings.proxySettings.setSearchEngine(localStorage.getItem(Settings.ProxySettings.searchEngine) as string || "ddg");
+    settings.proxySettings.setWispURL(localStorage.getItem(Settings.ProxySettings.wispServerURL) as string || "default");
+    settings.proxySettings.setTransport(localStorage.getItem(Settings.ProxySettings.transport) as string || "libcurl");
+    settings.marketPlaceSettings.changeTheme(false, undefined, localStorage.getItem(Settings.AppearanceSettings.video) as string, localStorage.getItem(Settings.AppearanceSettings.image) as string, localStorage.getItem(Settings.AppearanceSettings.themeName) as string);
+    document.addEventListener("astro:after-swap", function() {
+        settings.tabSettings.cloakTab(localStorage.getItem(Settings.TabSettings.tabCloak) as string || "default");
+        //settings.marketPlaceSettings.changeTheme(false);
    });
-        }
-    }
-
-    const initSettings = async (marketplace: Marketplace) => {
-        log({ type: 'info', bg: true, prefix: true }, "Initializing settings...");
-        for await (const _ of Settings.initDefaults());
-        await handleTheme(marketplace);
-        log({ type: 'info', bg: true, prefix: true }, "Initialized Settings!");
-    }
-
-    const eventHandler = new EventHandler({
-        events: {
-            "DOMContentLoaded": async () => {
-                const mp = await init();
-                await initSettings(mp);
-            }
-        },
-        logging: true 
+    document.addEventListener("DOMContentLoaded", async () => {
+        const conn = await loadProxyScripts();
+        await setTransport(
+            conn,
+            localStorage.getItem(Settings.ProxySettings.transport) as string
+        );
+        const sw = await initSw();
+        await setSWStuff({sw, conn});
    });
-    //bind the events
-    eventHandler.bind();
 </script>
--- a/src/components/toasts/Toast.svelte
+++ b/src/components/toasts/Toast.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-import { type ToastPosition, type Props, type TType } from "@utils/index";
+import { type Position, type Props, type ToastType } from "@utils/toast.ts";
 import toast from "svelte-french-toast";
 export let toastProp: Props;
 function handleToast(toastProp: Props) {
--- a/src/env.d.ts
+++ b/src/env.d.ts
@ -1,45 +1,3 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
 /// <reference types="@titaniumnetwork-dev/ultraviolet/client" />
-interface SJOptions {
-    prefix: string;
-    globals?: {
-        wrapfn: string;
-        wrapthisfn: string;
-        trysetfn: string;
-        importfn: string;
-        rewritefn: string;
-        metafn: string;
-        setrealmfn: string;
-        pushsourcemapfn: string;
-    };
-    files: {
-        wasm: string;
-        shared: string;
-        worker: string;
-        client: string;
-        sync: string;
-    };
-    flags?: {
-        serviceworkers?: boolean;
-        syncxhr?: boolean;
-        naiiveRewriter?: boolean;
-        strictRewrites?: boolean;
-        rewriterLogs?: boolean;
-        captureErrors?: boolean;
-        cleanErrors?: boolean;
-        scramitize?: boolean;
-        sourcemaps?: boolean;
-    };
-    siteFlags?: {};
-    codec?: {
-        encode: string;
-        decode: string;
-    };
-}
-
-declare class ScramjetController {
-    constructor(opts: SJOptions);
-    init(): Promise<void>;
-    encodeUrl(term: string): string;
-}
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@ -1,20 +1,14 @@
 ---
-import { ClientRouter } from "astro:transitions";
+import { ViewTransitions } from "astro:transitions";
 import Header from "@components/Header.astro";
 import MobileNavigation from "@components/MobileNavigation.astro";
 import SettingsLoader from "@components/settings/Loader.astro";
-import { SEO } from "astro-seo";
-import { SEO as SEOC } from "astro:env/client";
 interface Props {
    title: string;
    noHeader?: string;
-  description?: string;
-  image?: string;
 }

-const { title, noHeader, description, image } = Astro.props;
-const SEOConfig = JSON.parse(SEOC);
-const Host = Astro.url.host;
+const { title, noHeader } = Astro.props;
 ---

 <!doctype html>
@ -22,69 +16,42 @@ const Host = Astro.url.host;
  <head>
    <SettingsLoader transition:persist />
    <meta charset="UTF-8" />
-    <SEO
-        title={title},
-        titleTemplate={SEOConfig.enabled && Host === SEOConfig.domain  ? 'Nebula | %s': '%s'},
-        titleDefault={SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula': ''},
-        description={SEOConfig.enabled && Host === SEOConfig.domain ? description ? description : 'A stunning and sleek web proxy with support for hundreds of popular sites.' : ''},
-        charset="UTF-8",
-        openGraph={{
-            basic: {
-                title: SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula' :'',
-                type: 'website',
-                url: SEOConfig.enabled && Host === SEOConfig.domain ? 'https://nebulaproxy.io' : '',
-                image: SEOConfig.enabled && Host === SEOConfig.domain ? image ? image : '/logo.png': ''
-            },
-            optional: {
-                description: SEOConfig.enabled && Host === SEOConfig.domain ? description ? description : 'A stunning and sleek web proxy with support for hundreds of popular sites.' : ''
-            }
-        }},
-        twitter={{
-            card: "summary_large_image",
-            title: SEOConfig.enabled && Host === SEOConfig.domain ? 'Nebula' : '',
-            description: SEOConfig.enabled && Host === SEOConfig.domain ? description ? description : 'A stunning and sleek web proxy with support for hundreds of popular sites.' : '',
-            image: SEOConfig.enabled && Host === SEOConfig.domain ? image ? image : '/logo.png': '',
-            imageAlt: image ? 'Catalog image' : `${SEOConfig.enabled && Host === SEOConfig.domain && "Nebula services's"} logo`
-        }},
-        extend={{
-            link: [
-                { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', id: 'favicon' },
-                SEOConfig.enabled && Host === SEOConfig.domain && { rel: 'sitemap', href: '/sitemap-index.xml' },
-                { 
-                    rel: 'preload', 
-                    href: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap",
-                    as: 'style',
-                    crossorigin: 'anonymous'
-                },
-                {
-                    rel: 'preload',
-                    href: "https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2",
-                    as: 'font',
-                    type: 'font/woff2',
-                    crossorigin: 'anonymous'
-                }
-            ],
-            meta: [
-                { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
-                { name: 'generator', content: `${Astro.generator}` }
-            ]
-        }}
-        />
-    {/* I left this out of the SEO component as we need it to persist properly : D */}
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
    <link
      rel="stylesheet"
      href="/nebula.css"
      id="stylesheet"
      transition:persist
    />
-    <ClientRouter fallback="animate" />
+    <link
+      rel="preload"
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      as="style"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+    <ViewTransitions />
  </head>
  <body class="h-full bg-primary">
    {!noHeader && <Header />}
    <div class="h-full z-10 w-full fixed">
      <slot />
    </div>
-    <div id="mobilenavwrapper" class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20">
+    <div
+      id="mobileNavMenu"
+      class="w-full fixed inset-0 h-[calc(100%-4rem)] z-20"
+      transition:persist
+    >
      <MobileNavigation />
    </div>
    <video
@ -103,6 +70,31 @@ const Host = Astro.url.host;
      id="nebulaImage"
      transition:persist
    />
+    <script>
+      import { isMobileNavOpen } from "../store.js";
+      const mobileNavMenu = document.getElementById("mobileNavMenu");
+      // Listen to changes in the store, and show/hide the mobile navigation accordingly
+      isMobileNavOpen.subscribe((open) => {
+        if (open) {
+          if (mobileNavMenu) {
+            mobileNavMenu.style.display = "block";
+            mobileNavMenu.style.transform = "translateX(0%)";
+          }
+        } else {
+          if (mobileNavMenu) {
+            mobileNavMenu.style.transform = "translateX(100%)";
+          }
+        }
+      });
+    </script>
+    <style>
+      #mobileNavMenu {
+        -webkit-transition-duration: 600ms;
+        transition-duration: 600ms;
+        transform: translateX(100%);
+      }
+    </style>
+
    <style is:global>
    .roboto {
        font-family: var(--font-family), Roboto, sans-serif;
--- a/src/pages/[lang]/catalog/[...page].astro
+++ b/src/pages/[lang]/catalog/[...page].astro
@ -1,8 +1,8 @@
 ---
-import CatalogCard from "@components/catalog/CatalogCard.astro";
+import CatalogCard from "@components/catalog/CatalogCard.svelte";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
-import Pagination from "./pagination.astro";
+import Pagnation from "./pagnation.astro";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);

@ -22,7 +22,7 @@ const lastPage = assetsJson.pages;
          <h1 class="text-3xl md:text-5xl font-bold"> Nebula Catalog </h1>
          <p class="text-l md:text-xl max-md:text-center max-md:p-2"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>
      </div>
-      <CatalogCard page={page} lang={lang} />
+      <CatalogCard client:only="svelte" page={page} lang={lang} />
    <div class="flex flex-row pb-8 gap-4 font-roboto">
      {/* The first page. If the user is on this page, or the one after it, don't show it. */}
      {parseInt(page!) > 2 && (
@ -39,8 +39,8 @@ const lastPage = assetsJson.pages;
      <a href={`/${lang}/catalog/${nextPage}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">{nextPage}</a>
        )
      }
-      {/* Pagination input */}
-      <Pagination />
+      {/* Pagnation input */}
+      <Pagnation />
      {/* The last page. If the user is on this page, don't show it. */}
      {page != lastPage && (
      <a href={`/${lang}/catalog/${assetsJson.pages}`} class="w-8 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md">
--- a/src/pages/[lang]/catalog/package/[...packageName].astro
+++ b/src/pages/[lang]/catalog/package/[...packageName].astro
@ -1,185 +1,89 @@
 ---
 const { packageName } = Astro.params;
 import Layout from "@layouts/Layout.astro";
-const response = await fetch(
-  new URL("/api/packages/" + packageName, Astro.url)
-);
+const response = await fetch(new URL("/api/packages/" + packageName, Astro.url));
 const assetsJson = await response.json();
 ---

-<Layout
-  title={`Package: ${assetsJson.title}`}
-  description=`${assetsJson.title} is a package on Nebula. Start using this package on Nebula today!`
-  image={`/packages/${packageName}/${assetsJson.image}`}
->
-  <div
-    class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4"
-  >
-    {
-      assetsJson.error && (
-        <h1 class="text-text-color text-3xl font-bold">
-          {" "}
-          Unexpected error. Is the name right?{" "}
-        </h1>
-      )
-    }
-    {
-      !assetsJson.error && (
+<Layout title={`Package: ${packageName}`}>
+    <div class="flex flex-wrap min-[1032px]:mt-16 mt-8 w-full fixed inset-0 h-full md:h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center content-center justify-center lg:pb-64 font-roboto max-md:p-4">
+        {assetsJson.error && <h1 class="text-text-color text-3xl font-bold"> Unexpected error. Is the name right? </h1>}
+        {!assetsJson.error &&
            <div class="flex flex-col max-md:min-[1032px]:justify-center md:min-[1032px]:flex-row items-center text-text-color bg-navbar-color rounded-2xl">
-          {assetsJson.background_video && (
-            <video
-              src={`/packages/${packageName}/${assetsJson.background_video}`}
-              controls
-              class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"
-            >
+                {assetsJson.background_video && 
+                    <video src={`/packages/${packageName}/${assetsJson.background_video}`} controls class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl">
                        Your browser does not support the video tag.
                    </video>
-          )}
-          {assetsJson.backgroundImage && (
-            <div
-              style={{
-                backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`,
-              }}
-              class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover bg-center rounded-xl"
-            />
-          )}
-          {!assetsJson.background_video && !assetsJson.backgroundImage && (
-            <img
-              loading="lazy"
-              src={`/packages/${packageName}/${assetsJson.image}`}
-              alt={assetsJson.title}
-              class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"
-            />
-          )}
+                }
+                {assetsJson.backgroundImage && 
+                    <div style={{backgroundImage: `url(/packages/${packageName}/${assetsJson.backgroundImage})`}} class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover bg-center rounded-xl"/>
+                }
+                {!assetsJson.background_video && !assetsJson.backgroundImage && <img loading="lazy" src={`/packages/${packageName}/${assetsJson.image}`} alt={assetsJson.title} class="md:w-[44rem] md:h-[25rem] h-[12rem] w-full object-cover rounded-xl"/>}
                <div class="flex flex-col ml-7 md:p-16 p-10">
-            <p class="text-xl">
-              {assetsJson.type === "plugin-page" ||
-              assetsJson.type === "plugin-sw"
-                ? "plugin"
-                : assetsJson.type}
-            </p>
-            <h1 class="text-4xl font-roboto font-semibold">
-              {assetsJson.title}
-            </h1>
-            <p class="text-xl">
-              {" "}
-              By: <strong>{assetsJson.author}</strong>
-            </p>
+                    <p class="text-xl">{assetsJson.type === "plugin-page" || assetsJson.type === "plugin-sw" ? "plugin": assetsJson.type}</p>
+                    <h1 class="text-4xl font-roboto font-semibold">{assetsJson.title}</h1>
+                    <p class="text-xl"> By: <strong>{assetsJson.author}</strong></p>
                    <p class="text-xl">{assetsJson.description}</p>
-            <button
-              class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
-              id="install"
-            >
+                    <button class="bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="install">
                        Install
                    </button>
-            <button
-              class="hidden bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9"
-              id="uninstall"
-            >
+                    <button class="hidden bg-primary text-text-color border border-transparent rounded-lg px-6 py-3 hover:bg-navbar-color transition-colors duration-300 mt-9" id="uninstall">
                        Uninstall
                    </button>
-            <a
-              href="../1"
-              class="w-full bg-background text-text-color border-none rounded-lg text-l max-md:mt-7 px-4 py-4 h-full flex-grow md:text-right text-center font-bold underline underline-offset-4 decoration-2 hover:decoration-border-color transition-colors duration-300"
-            >
-              Go Back
-            </a>
+                    <a href="../1" class="w-full bg-background text-text-color border-none rounded-lg text-l max-md:mt-7 px-4 py-4 h-full flex-grow md:text-right text-center font-bold underline underline-offset-4 decoration-2 hover:decoration-border-color transition-colors duration-300">Go Back</a>
                </div>
            </div>
-      )
        }
    </div>
-  <package-vars data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type}></package-vars>
+    <variable-define data-assets={JSON.stringify(assetsJson)} data-name={packageName} data-type={assetsJson.type} />
 </Layout>
 <script>
-    import { Elements } from "@utils/index";
-    import { Marketplace } from "@utils/marketplace"; 
-
-    const init = async () => {
-        await Marketplace.ready();
-        const marketplace = Marketplace.getInstances().next().value!;
-        const elements = Elements.select([
-            { type: 'id', val: 'install' },
-            { type: 'id', val: 'uninstall' }
-        ]);
-        return { marketplace, elements };
-    }; 
-
-     const handleThemes = async (marketplace: Marketplace, name: string, assets: any) => {
-        const { exists } = await marketplace.getThemes(name);
-        if (!exists) {
-            await marketplace.installTheme({ name: name });
-            await marketplace.theme({
-                type: 'normal',
-                payload: assets.payload,
-                name: name,
-                sources: {
-                    video: assets.background_video,
-                    bg: assets.background_image
-                }
-            });
-        }
-        else {
-            await marketplace.theme({ type: 'remove', name: name });
-            await marketplace.uninstallTheme({ name: name });
+    import { pageLoad } from "@utils/events";
+    import { settings, Settings, type PackageType } from "@utils/settings/index";
+import type { SWPagePlugin } from "@utils/settings/types";
+    let packageName: string;
+    let assetsJson: any;
+    let packageType: string;
+    //some weird trickery to get the variables.
+    class VariableDefiner extends HTMLElement {
+        constructor() {
+            super();
+            assetsJson = this.dataset.assets;
+            packageName = this.dataset.name as string;
+            packageType = this.dataset.type as PackageType;
        }
    }
-
-     const handlePlugins = async (marketplace: Marketplace, name: string, assets: any) => {
-         const { plug } = await marketplace.getPlugins(name);
-         console.log(plug);
-         console.log(assets);
-         if (!plug || plug.remove === true) {
-             await marketplace.installPlugin({
-                 name: name,
-                 src: assets.payload,
-                 type: assets.type === "plugin-page" ? "page": "serviceWorker"
-             });
-             return;
+    customElements.define('variable-define', VariableDefiner); 
+    const fn = () => {
+        const cssItems = JSON.parse(localStorage.getItem(Settings.AppearanceSettings.themes) as string) || [];
+        const cssItemExists = cssItems.indexOf(packageName) !== -1;
+        const pluginItems = JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins) as string) || [];
+        //@ts-ignore
+        const pluginItemExists = pluginItems.find(({ name, remove }) => name === packageName && remove !== true);
+        const installButton = document.getElementById("install") as HTMLButtonElement;
+        const uninstallButton = document.getElementById("uninstall") as HTMLButtonElement;
+        const payload = assetsJson ? JSON.parse(assetsJson) : undefined;
+        if (cssItemExists || pluginItemExists) {
+            uninstallButton.classList.remove("hidden");
+            installButton.classList.add("hidden");
        }
-         await marketplace.uninstallPlugin({
-             name: name,
-             type: assets.type === "plugin-page" ? "page": "serviceWorker"
-         });
-     }
-
-    Elements.createCustomElement("package-vars", 
-        async(datasets) => { 
-            const { marketplace, elements } = await init();
-            const { dataAssets, dataName, dataType } = { dataAssets: datasets![0].val, dataName: datasets![1].val, dataType: datasets![2].val };
-            const { exists: themeExists } = await marketplace.getThemes(dataName!);
-            const { plug } = await marketplace.getPlugins(dataName!);
-            console.log(dataName);
-            const installButton = Elements.exists<HTMLButtonElement>(await elements.next());
-            const uninstallButton = Elements.exists<HTMLButtonElement>(await elements.next());
-
-            Elements.attachEvent(installButton, "click", async () => {
-                dataType?.startsWith("plugin") 
-                    ? await handlePlugins(marketplace, dataName!, JSON.parse(dataAssets!) || []) 
-                    : await handleThemes(marketplace, dataName!, JSON.parse(dataAssets!) || []);
+        installButton.addEventListener("click", () => {
+            console.log(payload);
+            settings.marketPlaceSettings.install(
+                payload.type === "theme" ? {theme: {payload: payload.payload, video: payload.background_video, bgImage: payload.background_image}} :
+                payload.type === "plugin-page" ? {plugin: {name: packageName, src: payload.payload, type: "page" }} : {plugin: { name: packageName, src: payload.payload, type: "serviceWorker" } },
+                packageName, payload.payload
+            ).then(() => {
                installButton.classList.add("hidden");
                uninstallButton.classList.remove("hidden");
+            })
        });
-
-            Elements.attachEvent(uninstallButton, "click", async () => {
-                dataType?.startsWith("plugin") 
-                    ? await handlePlugins(marketplace, dataName!, JSON.parse(dataAssets!) || [])
-                    : await handleThemes(marketplace, dataName!, JSON.parse(dataAssets!) || []);
-                uninstallButton.classList.add("hidden");
+        uninstallButton.addEventListener("click", () => {
+            settings.marketPlaceSettings.uninstall(packageType as PackageType, packageName).then(() => {
+                uninstallButton.classList.add("hidden")
                installButton.classList.remove("hidden");
            });
-            
-            if (themeExists || (plug && plug.remove === false || plug.remove === undefined)) {
-                installButton.classList.add("hidden");
-                uninstallButton.classList.remove("hidden");
+        });
    }
-        },
-        //Pull in the data elements.
-        [
-            { name: 'assets' },
-            { name: 'name' },
-            { name: 'type' }
-        ]
-    );
-
+    pageLoad(fn);
 </script>
--- a/src/pages/[lang]/catalog/pagination.astro
+++ b/src/pages/[lang]/catalog/pagination.astro
@ -1,27 +0,0 @@
-<input
-  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-  type="number"
-  id="pageinationInput"
-  placeholder="..."
-/>
-<script>
-    import { EventHandler } from "@utils/events";
-    import { Elements } from "@utils/index";
-    import { navigate } from "astro:transitions/client";
-    new EventHandler({
-        events: {
-            "astro:page-load": async () => {
-                const el = Elements.select([
-                    { type: 'id', val: 'pageinationInput' }
-                ]);
-                const input = Elements.exists<HTMLInputElement>(await el.next());
-                Elements.attachEvent(input, "keyup", (event?: Event) => {
-                    const e = event as KeyboardEvent | undefined;
-                    if (e?.key) return navigate(`${input.value}`);
-                });
-            }
-        },
-        logging: false
-    })
-    .bind();
-</script>
--- a/src/pages/[lang]/catalog/pagnation.astro
+++ b/src/pages/[lang]/catalog/pagnation.astro
@ -0,0 +1,17 @@
+<input
+  class="w-10 h-8 bg-navbar-color items-center text-center content-center text-text-color rounded-md [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+  type="number"
+  id="pagnation_input"
+  placeholder="..."
+/>
+<script>
+import { pageLoad } from "@utils/events";
+pageLoad(() => {
+    const pagenationInput = document.getElementById('pagnation_input') as HTMLInputElement;
+    pagenationInput?.addEventListener("keyup", function (event) {
+        if (event.key === "Enter") {
+            window.location.href = pagenationInput?.value;
+        }
+    });
+  });
+</script>
--- a/src/pages/[lang]/games.astro
+++ b/src/pages/[lang]/games.astro
@ -1,27 +1,23 @@
 ---
 import Layout from "@layouts/Layout.astro";
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 ---

 <Layout title="Chango Games">
-    <iframe id="chango" class="w-full h-full" src="/loading"></iframe>
+    <iframe id="chango" class="w-full h-full"></iframe>
 </Layout>
 <script>
-    import { EventHandler } from "@utils/events";
-    import { Elements } from "@utils/index";
-    
-    const init = async () => {
-        const el = Elements.select([
-            { type: 'id', val: 'chango' }
-        ]);
-        const chango = Elements.exists<HTMLIFrameElement>(await el.next());
-        chango.src = `${__uv$config.prefix}${__uv$config.encodeUrl!("https://radon.games/games/")}`
-    };
-
-    new EventHandler({
-        events: {
-            "astro:page-load": init
-        },
-        logging: false
-    })
-    .bind();
+    import { setTransport, getSWStuff } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
+    import { Settings } from "@utils/settings/index";
+    import { pageLoad } from "@utils/events";
+    pageLoad(async () => {
+        const { conn } = getSWStuff();
+        const iframe = document.getElementById("chango") as HTMLIFrameElement;
+        await setTransport(conn, localStorage.getItem(Settings.ProxySettings.transport) as string);
+        if (iframe) return iframe.src = __uv$config!.prefix + __uv$config.encodeUrl!("https://radon.games");
+    });
 </script>
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@ -2,19 +2,30 @@
 import Logo from "@components/Logo.astro";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 import { VERSION } from "astro:env/client";
 ---

-<Layout title="Home">
-  <div class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center">
-    <div class="w-full flex flex-col justify-center items-center content-center h-2/4">
+<Layout title="Nebula">
+  <div
+    class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
+  >
+    <div
+      class="w-full flex flex-col justify-center items-center content-center h-2/4"
+    >
      <div class="flex flex-row items-center mb-8">
        <div class="h-32 w-32 fill-navbar-text-color">
          <Logo />
        </div>
-        <h1 class="font-roboto whitespace-nowrap text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
+        <h1
+          class="font-roboto whitespace-nowrap text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
+        >
          nebula.
        </h1>
      </div>
@ -35,145 +46,113 @@ import { VERSION } from "astro:env/client";
      src="/loading"></iframe>
    <div
      id="version"
-      class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between items-center font-roboto"
+      class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between font-roboto"
    >
      <p>Version: {VERSION}</p>
-      <div class="hidden md:flex gap-2 flex-grow ml-16 justify-center items-center"> 
-          <p> Having problems? </p>
-        <button id="reset" class="underline underline-offset-4 hover:decoration-input-border-color active:decoration-input-text">
-            Click here to reset your instance
-        </button> 
-      </div>
      <p>&copy; Nebula Services 2024</p>
    </div>
  </div>
 </Layout>
 <script>
-    import { EventHandler } from "@utils/events";
-    import { SupportedSites, SearchEngines, SettingsVals } from "@utils/values";
-    import { search, Elements } from "@utils/index";
+  import { setTransport, getSWStuff } from "@utils/registerSW"; //../../utils/registerSW.ts
+  import { pageLoad } from "@utils/events";
+  import { SupportedSites } from "@utils/siteSupport";
+  import {
+    SearchEngines,
+    Settings,
+    cloak,
+    settings,
+  } from "@utils/settings/index";
+  import { search } from "@utils/search"; //../../utils/search.ts
  import { BareClient } from "@mercuryworkshop/bare-mux";
-    import { defaultStore } from "@utils/storage";
-    import { SW } from "@utils/serviceWorker";
-    import { Marketplace } from "@utils/marketplace";
-
  type Suggestion = {
    phrase: string;
  };
-
-    const init = async (): Promise<void> => {
-        const bc = new BareClient();
-        const se = Elements.select([
-            { type: 'id', val: 'reset' },
-            { type: 'id', val: 'nebula-input' },
-            { type: 'id', val: 'omnibox' },
-            { type: 'id', val: 'version' },
-            { type: 'id', val: 'neb-iframe' }
-        ]);
-    
-        const reset = Elements.exists<HTMLButtonElement>(await se.next());
-        Elements.attachEvent(reset, "click", async () => {
-            const t = await navigator.serviceWorker.getRegistrations();
-            t.map(async (reg) => {
-                await reg.unregister();
-            });
-            localStorage.clear();
-            window.location.href = "/";
-        });
-
-        const input = Elements.exists<HTMLInputElement>(await se.next());
-        const omnibox = Elements.exists<HTMLDivElement>(await se.next());
-        const copyright = Elements.exists<HTMLDivElement>(await se.next());
-        const iframe = Elements.exists<HTMLIFrameElement>(await se.next());
-        const prox = async (input: string, prox: "uv" | "sj") => {
-            await Marketplace.ready();
-            const mp = Marketplace.getInstances().next().value!;
-            const sw = SW.getInstances().next().value as SW; 
-            iframe.classList.remove("hidden");
-            const val = search(
-                input, 
-                defaultStore.getVal(SettingsVals.proxy.searchEngine) 
-                ? SearchEngines[defaultStore.getVal(SettingsVals.proxy.searchEngine)]
-                : SearchEngines.ddg
+  async function proxy(term: string) {
+    const searchEngine = localStorage.getItem(
+      Settings.ProxySettings.searchEngine
    );
-            const { serviceWorker } = await sw.getSWInfo();
-            mp.handlePlugins(serviceWorker);
-            switch(prox) {
-                case "uv": {
-                    iframe.src = `${__uv$config.prefix}${__uv$config.encodeUrl!(val)}`;
-                    break;
-                }
-                case "sj": {
-                    const { sj } = await sw.getSWInfo();
-                    iframe.src = sj.encodeUrl(val);
-                    break;
+    const openIn = localStorage.getItem(Settings.ProxySettings.openIn);
+    let proxyUrl: any =
+      __uv$config!.prefix +
+      __uv$config.encodeUrl!(
+        search(
+          term,
+          searchEngine ? SearchEngines[searchEngine] : SearchEngines.ddg
+        )
+      );
+    if (openIn === "a:b" || openIn === "blob") {
+      return cloak(
+        openIn as string,
+        "https://google.com",
+        `${window.location.origin}${proxyUrl}`
+      );
+    } else if (openIn === "direct") {
+      return (window.location.href = proxyUrl as string);
+    } else {
+      return proxyUrl;
    }
  }
+  async function uv(iframe: HTMLIFrameElement, term: string) {
+    const { sw, conn } = getSWStuff(); 
+    await setTransport(
+      conn,
+      localStorage.getItem(Settings.ProxySettings.transport) as string
+    );
+    await settings.marketPlaceSettings.handlePlugins(sw);
+    iframe.classList.remove("hidden");
+    const url = await proxy(term);
+    if (url) {
+      iframe.src = url;
    }
-        input.addEventListener("keypress", async (event: any) => {
+  }
+  //we need to rerun this on every page load
+  pageLoad(async () => {
+    const input = document.getElementById("nebula-input") as HTMLInputElement;
+    const iframe = document.getElementById("neb-iframe") as HTMLIFrameElement;
+    const omnibox = document.getElementById("omnibox") as HTMLDivElement;
+    const copyright = document.getElementById("version") as HTMLDivElement;
+    const client = new BareClient();
+    input?.addEventListener("keypress", async function (event: any) {
      if (event.key === "Enter") {
        copyright.classList.add("hidden");
-                if (defaultStore.getVal(SettingsVals.proxy.proxy.key) === SettingsVals.proxy.proxy.available.automatic) {
-                    switch(SupportedSites[input.value]) {
-                        case "uv": {
-                            prox(input.value, "uv");
-                            break;
-                        }
-                        case "sj": {
-                            prox(input.value, "sj");
-                            break;
-                        }
-                        default: {
-                            prox(input.value, "uv");
-                        }
-                    }
-                }
-
-                switch(defaultStore.getVal("proxy") as "uv" | "sj") {
-                    case "uv": {
-                        prox(input.value, "uv");
-                        break;
-                    }
-                    case "sj": {
-                        prox(input.value, "sj");
+        if (
+          localStorage.getItem(Settings.ProxySettings.proxy) === "automatic"
+        ) {
+          const key = SupportedSites[input?.value];
+          switch (key) {
+            case "uv":
+              uv(iframe, input?.value);
+              break;
+            default:
+              uv(iframe, input?.value);
              break;
          }
+        } else if (
+          localStorage.getItem(Settings.ProxySettings.proxy) === "uv"
+        ) {
+          uv(iframe, input?.value);
        }
      }
    });
-
-        input.addEventListener("input", async () => {
-            if (input.value.length < 3) {
+    input?.addEventListener("input", async function () {
      omnibox.innerHTML = "";
-                omnibox.classList.add("hidden");
-                input.classList.add("rounded-b-2xl");
-                return;
-            }
-
-            omnibox.classList.remove("hidden");
+      const value = input?.value;
      input.classList.remove("rounded-b-2xl");
-            const data = await bc.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(input.value)}&format=json`);
-            const res = await data.json();
-            const fData = res.slice(0, 6); // Trim to only the first 6 results.
-            if (fData.length <= 0) {
-                omnibox.classList.add("hidden");
+      omnibox.classList.remove("hidden");
+      if (value.length === 0) {
        input.classList.add("rounded-b-2xl");
-                return;
+        omnibox.classList.add("hidden");
      }
+      if (value.length >= 3) {
+        const data = await client.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`);
+        const dataRes = await data.json();
+        const filteredData = dataRes.slice(0, 8); //Trim to only about 8 results. Any more and our omnibox dies
+        if (filteredData) {
          omnibox.innerHTML = "";
-            fData.map((res: Suggestion) => {
-                const span = document.createElement("span") as HTMLSpanElement;
-                const p = document.createElement("p") as HTMLParagraphElement;
-                p.classList.add(
-                    "cursor-pointer",
-                    "text-ellipsis",
-                    "text-center",
-                    "w-full",
-                    "overflow-hidden",
-                    "whitespace-nowrap"
-                );
-                p.innerText = res.phrase;
-
+          filteredData.map((results: Suggestion) => {
+            let span = document.createElement("span");
+            let pTag = document.createElement("p");
            span.classList.add(
              "cursor-pointer",
              "font-roboto",
@ -195,23 +174,31 @@ import { VERSION } from "astro:env/client";
              "hover:bg-lighter",
              "active:bg-primary"
            );
-                span.addEventListener("click", () => {
-                    input.value = res.phrase;
-                    input.dispatchEvent(
-                        new KeyboardEvent("keypress", { key: "Enter", code: "Enter" })
-                    );
+            span.addEventListener("click", function () {
+              //When the box is clicked, we want to fill the omnibox and hit enter. This allows us to re-use the existing event listener on the input.
+              const event = new KeyboardEvent("keypress", {
+                key: "Enter",
+                code: "Enter",
+                which: 13,
+                keyCode: 13,
              });
-                span.appendChild(p);
+              input.value = results.phrase;
+              input.dispatchEvent(event);
+            });
+            pTag.classList.add(
+              "cursor-pointer",
+              "text-ellipsis",
+              "text-center",
+              "w-full",
+              "overflow-hidden",
+              "whitespace-nowrap"
+            );
+            pTag.innerText = results.phrase;
+            span.appendChild(pTag);
            omnibox.appendChild(span);
          });
-        }); 
        }
-
-    new EventHandler({
-        events: {
-            "astro:page-load": init
-        },
-        logging: false
-    })
-    .bind();
+      }
+    });
+  });
 </script>
--- a/src/pages/[lang]/settings/appearance.astro
+++ b/src/pages/[lang]/settings/appearance.astro
@ -1,5 +1,5 @@
 ---
-import InstalledThemes from "@components/catalog/InstalledThemes.astro";
+import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
@ -7,6 +7,11 @@ import { Icon } from "astro-icon/components";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 import { MARKETPLACE_ENABLED } from "astro:env/client";
 ---

@ -17,7 +22,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
      subtitle="Choose a theme so your eyes don't hate us.">
      <div class="flex flex-row flex-wrap gap-4 items-center font-roboto">
        <div class="justify-center flex flex-row gap-6 flex-wrap md:justify-normal">
-            <InstalledThemes />
+            <InstalledThemes client:only="svelte" />
          {MARKETPLACE_ENABLED && 
            <a href={`/${lang}/catalog/1`} class="rounded-3xl bg-navbar-color w-64 flex flex-col">
                <div class="w-full items-center justify-center flex aspect-[16/9]">
--- a/src/pages/[lang]/settings/credits.astro
+++ b/src/pages/[lang]/settings/credits.astro
@ -1,10 +1,17 @@
 ---
+import InstalledThemes from "@components/catalog/InstalledThemes.svelte";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
+import { Icon } from "astro-icon/components";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 import CreditsCard from "@components/settings/CreditsCard.astro";
 ---

--- a/src/pages/[lang]/settings/misc.astro
+++ b/src/pages/[lang]/settings/misc.astro
@ -10,6 +10,11 @@ import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 const origin = Astro.url.origin;
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 ---

 <Layout title="Settings">
@ -32,53 +37,72 @@ const t = useTranslations(lang);
            both={{enabled: false}}
        />
        <SettingsCard
-            title="Reset instance"
-            description="Reset your instance if your having troubles or problems."
+            title="Proxy Catalog"
+            description="Whether or not to proxy the Catalog"
            input={{input: false}}
-            button={{ name: 'Reset', id: 'resetinstance' }}
+            button={{name: 'Set', id: 'setmp' }}
+            select={{
+                select: true,
+                name: 'mp',
+                options: [
+                    {name: 'False', value: 'false', disabled: false},
+                    {name: 'True', value: 'true', disabled: false}
+                ]
+                }}
+                both={{enabled: false}}
+            />
+        <SettingsCard
+            title="Catalog URL"
+            description="Change which marketplace your using"
+            input={{
+                input: true,
+                required: true,
+                placeholder: `${origin}/api/catalog-assets`
+            }}
+            button={{name: 'Change', id: 'setcataloghostname' }}
            select={{select: false}}
            both={{enabled: false}}
        />
    </SettingsSection>
  </SettingsLayout>
+  <ToastWrapper client:load>
+    <Toast toastProp={{
+            toastType: 'success',
+            text: 'Catalog is now proxied',
+            class: 'mpMessage'
+        }}
+    client:load />
+    <Toast toastProp={{
+        toastType: 'success',
+        text: 'Catalog URL set!',
+        class: 'cataloghostnameSuccess'
+        }}
+    client:load />
+    <Toast toastProp={{
+        toastType: 'error',
+        text: "Catalog doesn't exist!",
+        class: 'cataloghosnameError'
+      }}
+    client:load/>
+  </ToastWrapper>
 <script>
-    import { EventHandler } from "@utils/events";
+    import { toast } from "@utils/toast.ts";
+    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
+    import { pageLoad } from "@utils/events";
    import { navigate } from "astro:transitions/client";
-    import { defaultStore } from "@utils/storage";
-    import { SettingsVals } from "@utils/values";
-    import { Elements } from "@utils/index";
-
-    const handler = async () => {
-        const els = Elements.select([
-            { type: 'id', val: 'lang' },
-            { type: 'id', val: 'setlang' },
-            { type: 'id', val: 'resetinstance' }
-        ]);
-        const lang = defaultStore.getVal(SettingsVals.i18n.lang);
-        const val = Elements.exists<HTMLSelectElement>(await els.next());
-        const button = Elements.exists<HTMLButtonElement>(await els.next());
-        val.value = lang || "en_US";
-        Elements.attachEvent(button, "click", () => {
-            defaultStore.setVal(SettingsVals.i18n.lang, val.value);
-            navigate(`${window.location.origin}/${val.value}/settings/misc`);
-        });
-
-        const resetButton = Elements.exists<HTMLButtonElement>(await els.next());
-        Elements.attachEvent(resetButton, "click", async () => {
-            const t = await navigator.serviceWorker.getRegistrations();
-            t.map(async (reg) => {
-                await reg.unregister();
-            });
-            localStorage.clear();
-            window.location.href = "/";
-        });
+    function setup() {
+        const lang = JSON.parse(localStorage.getItem('selectedLanguage') as string) || JSON.parse('{"value": "en_US"}');
+        const languageVal = document.getElementById('lang') as HTMLSelectElement;
+        languageVal!.value = lang.value;
    }
-
-    new EventHandler({
-        events: {
-            "astro:page-load": handler
-        },
-        logging: false
+    pageLoad(() => {
+        setup();
+        const languageChange = document.getElementById('setlang') as HTMLButtonElement;
+        const languageVal = document.getElementById('lang') as HTMLSelectElement;
+        languageChange?.addEventListener('click', () => {
+            const language = {value: languageVal.value}
+            localStorage.setItem("selectedLanguage", JSON.stringify(language));
+            navigate(`${window.location.origin}/${languageVal.value}/settings/misc`)
+        });
    })
-    .bind();
 </script>
--- a/src/pages/[lang]/settings/pr.astro
+++ b/src/pages/[lang]/settings/pr.astro
@ -1,5 +1,5 @@
 ---
-import InstalledPlugins from "@components/catalog/InstalledPlugins.astro";
+import InstalledPlugins from "@components/catalog/InstalledPlugins.svelte";
 import SettingsCard from "@components/settings/SettingsCard.astro";
 import Toast from "@components/toasts/Toast.svelte";
 import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
@ -11,6 +11,11 @@ import { getLangFromUrl, useTranslations } from "../../../i18n/utils";

 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 import { MARKETPLACE_ENABLED } from "astro:env/client";
 ---

@ -34,12 +39,12 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
            options: [
              { name: "Automatic", value: "automatic", disabled: false },
              { name: "Ultraviolet", value: "uv", disabled: false },
-              { name: "Scramjet (BETA)", value: "sj", disabled: false },
+              { name: "Scramjet (COMING SOON)", value: "sj", disabled: true },
            ],
            }}
            both={{enabled: false}}
        />
-        <!-- SettingsCard
+        <SettingsCard
          title="Open in"
          description="Choose how to open your sites"
          input={{ input: false }}
@ -55,7 +60,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
            ],
            }}
            both={{enabled: false}}
-        / -->
+        />
        <SettingsCard
          title="Search Engine"
          description="Choose your search engine"
@ -115,7 +120,7 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
          subtitle="Plugins allow you to modify the way the proxy works (UV only, plugins are auto applied)"
        >
          <div class="flex flex-row gap-6 justify-center md:justify-normal">
-            <InstalledPlugins />
+            <InstalledPlugins client:only="svelte" />
            <a
              href={`/${lang}/catalog/1`}
              class="rounded-3xl bg-navbar-color w-64 flex flex-col"
@ -141,14 +146,14 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
      }}
      client:load
    />
-    <!-- Toast
+    <Toast
      toastProp={{
        toastType: "success",
        text: "Saved selection!",
        class: "openInMessage",
      }}
      client:load
-    /-->
+    />
    <Toast
      toastProp={{
        toastType: "success",
@ -176,92 +181,90 @@ import { MARKETPLACE_ENABLED } from "astro:env/client";
  </ToastWrapper>
 </Layout>
 <script>
-  import { EventHandler } from "@utils/events";
-  import { Elements, toast } from "@utils/index";
-  import { defaultStore } from "@utils/storage";
-  import { SettingsVals } from "@utils/values";
-  import { Settings } from "@utils/settings";
-  import { setTransport, SW } from "@utils/serviceWorker";
-
-  const init = async (): Promise<AsyncGenerator> => {
-      return Elements.select([
-          { type: 'id', val: 'setproxy' },
-          { type: 'id', val: 'proxy' },
-          { type: 'id', val: 'setsearchengine' },
-          { type: 'id', val: 'searchengine' },
-          { type: 'id', val: 'setwispurl' },
-          { type: 'id', val: 'wispurl' },
-          { type: 'id', val: 'inputOnSelectValuecustom' },
-          { type: 'id', val: 'settransport' },
-          { type: 'id', val: 'transport' },
-      ]);
+  import { toast } from "@utils/toast.ts";
+  import { settings, Settings as SettingsEnum } from "@utils/settings/index";
+  import { pageLoad } from "@utils/events";
+  function setup(
+    proxySelectVal: HTMLSelectElement,
+    openInVal: HTMLSelectElement,
+    searchEngineVal: HTMLSelectElement,
+    wispServerVal: HTMLSelectElement,
+      transportVal: HTMLSelectElement,
+      customUrl: HTMLInputElement
+  ) {
+    proxySelectVal.value = localStorage.getItem(
+      SettingsEnum.ProxySettings.proxy
+    ) as string;
+    openInVal.value = localStorage.getItem(
+      SettingsEnum.ProxySettings.openIn
+    ) as string;
+    searchEngineVal.value = localStorage.getItem(
+      SettingsEnum.ProxySettings.searchEngine
+    ) as string;
+    wispServerVal.value = localStorage.getItem(SettingsEnum.ProxySettings.wispServerURL) as string;
+    if (wispServerVal.value === "custom") {
+        customUrl.classList.remove("hidden");
+        customUrl.value = localStorage.getItem("customWispUrl") as string;
    }
-
-  const handleProxy = async (vals: AsyncGenerator) => {
-      const button = Elements.exists<HTMLButtonElement>(await vals.next());
-      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
-      selectEl.value = defaultStore.getVal(SettingsVals.proxy.proxy.key);
-      Elements.attachEvent(button, "click", () => {
-          Settings.proxy.change(selectEl.value as "uv" | "sj" | "automatic");
+    transportVal.value = localStorage.getItem(
+      SettingsEnum.ProxySettings.transport
+    ) as string;
+  }
+  pageLoad(() => {
+    const proxyButton = document.getElementById("setproxy") as HTMLButtonElement;
+    const proxySelectVal = document.getElementById("proxy") as HTMLSelectElement;
+    const openInButton = document.getElementById("setopenin") as HTMLButtonElement;
+    const openInVal = document.getElementById("openin") as HTMLSelectElement;
+    const searchEngineButton = document.getElementById("setsearchengine") as HTMLButtonElement;
+    const searchEngineVal = document.getElementById("searchengine") as HTMLSelectElement;
+    const wispServerButton = document.getElementById("setwispurl") as HTMLButtonElement;
+    const wispServerVal = document.getElementById("wispurl") as HTMLSelectElement;
+    const transportButton = document.getElementById("settransport") as HTMLButtonElement;
+    const transportVal = document.getElementById("transport") as HTMLSelectElement;
+    const customWispUrl = document.getElementById("inputOnSelectValuecustom") as HTMLInputElement;
+    setup(
+      proxySelectVal,
+      openInVal,
+      searchEngineVal,
+      wispServerVal,
+        transportVal,
+        customWispUrl
+    );
+    proxyButton.addEventListener("click", () => {
+      settings.proxySettings.changeProxy(proxySelectVal.value);
      toast(".proxyMessage");
    });
-  }
-
-  const handleSearchEngine = async (vals: AsyncGenerator) => {
-      const button = Elements.exists<HTMLButtonElement>(await vals.next());
-      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
-      selectEl.value = defaultStore.getVal(SettingsVals.proxy.searchEngine);
-      Elements.attachEvent(button, "click", () => {
-          Settings.proxy.searchEngine(selectEl.value);
+    openInButton.addEventListener("click", () => {
+      settings.proxySettings.openIn(openInVal.value);
+      toast(".openInMessage");
+    });
+    searchEngineButton.addEventListener("click", () => {
+      settings.proxySettings.setSearchEngine(searchEngineVal.value);
      toast(".searchEngineMessage");
    });
+    wispServerButton.addEventListener("click", () => {
+        if (wispServerVal.value === "custom") {
+            settings.proxySettings.setWispURL(wispServerVal.value);
+            if (customWispUrl.classList.contains('hidden')) {
+                customWispUrl.classList.remove("hidden");
+                customWispUrl.value = localStorage.getItem("customWispUrl") as string;
            }
-
-  const handleWispServers = async (vals: AsyncGenerator) => {
-
-      const handleCustom = async (c: HTMLInputElement, removeClass: boolean) => { 
-          if (!removeClass) return c.classList.add("hidden");
-          const sw = SW.getInstances().next().value as SW;
-          const { bareMuxConn } = await sw.getSWInfo();
-          c.classList.remove("hidden");
-          if (c.value === "") return c.value = defaultStore.getVal("customWispUrl");
-          defaultStore.setVal("customWispUrl", c.value);
-          await setTransport(bareMuxConn);
+            else { 
+                localStorage.setItem("customWispUrl", customWispUrl.value);
                toast(".wispUrlMessage");
            }
-    
-      const button = Elements.exists<HTMLButtonElement>(await vals.next());
-      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
-      const custom = Elements.exists<HTMLInputElement>(await vals.next());
-      selectEl.value = defaultStore.getVal(SettingsVals.proxy.wispServer);
-      Elements.attachEvent(button, "click", () => {
-          Settings.proxy.wisp(selectEl.value);
-          selectEl.value === "custom" ? handleCustom(custom, true) : handleCustom(custom, false)
+        }
+        else {
+            if (!customWispUrl.classList.contains('hidden')) {
+                customWispUrl.classList.add("hidden");
+            }
+            settings.proxySettings.setWispURL(wispServerVal.value);
            toast(".wispUrlMessage");
+        }
    });
-  };
-
-  const handleTransports = async (vals: AsyncGenerator) => {
-      const button = Elements.exists<HTMLButtonElement>(await vals.next());
-      const selectEl = Elements.exists<HTMLSelectElement>(await vals.next());
-      selectEl.value = defaultStore.getVal(SettingsVals.proxy.transport.key);
-      Elements.attachEvent(button, "click", () => {
-          Settings.proxy.transport(selectEl.value as "libcurl" | "epoxy");
+    transportButton.addEventListener("click", () => {
+      settings.proxySettings.setTransport(transportVal.value);
      toast(".transportMessage");
    });
-  };
-
-  new EventHandler({
-      events: {
-          "astro:page-load": async () => {
-              const v = await init();
-              await handleProxy(v);
-              await handleSearchEngine(v);
-              await handleWispServers(v);
-              await  handleTransports(v);
-          }
-      },
-      logging: false
-  })
-  .bind();
+  });
 </script>
--- a/src/pages/[lang]/settings/tab.astro
+++ b/src/pages/[lang]/settings/tab.astro
@ -1,11 +1,18 @@
 ---
 import SettingsCard from "@components/settings/SettingsCard.astro";
+import Toast from "@components/toasts/Toast.svelte";
+import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
 import Layout from "@layouts/Layout.astro";
 import SettingsLayout from "@layouts/SettingsLayout.astro";
 import SettingsSection from "@layouts/SettingsSection.astro";
 import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
 ---

 <Layout title="Settings">
@ -41,55 +48,36 @@ const t = useTranslations(lang);
        </div>
    </SettingsSection>
  </SettingsLayout>
+  { /* The toast notifications :D */ }
+  <ToastWrapper client:load>
+    <Toast toastProp={{toastType: "success", text: "Successfully set cloak!", class: "cloakMessageSuccess"}} client:load />
+    <Toast toastProp={{toastType: "success", text: "Saved your option for next time! \n Opening in new tab...", class: "abCloakMessage"}} client:load />
+  </ToastWrapper>
 </Layout>

 <script>
-    import { Elements } from "@utils/index";
-    import { EventHandler } from "@utils/events";
-    import { defaultStore } from "@utils/storage";
-    import { Settings } from "@utils/settings";
-    import { SettingsVals } from "@utils/values";
-
-    const init = async (): Promise<AsyncGenerator> => {
-        const vals = Elements.select([
-            { type: 'id', val: 'cloak' },
-            { type: 'id', val: 'cloakselect' },
-            { type: 'id', val: 'aboutblankbutton' },
-            { type: 'id', val: 'aboutblank' }
-        ]);
-        return vals;
+    import { toast } from "@utils/toast.ts"; //A helper function so we don't have to run this logic everytime.
+    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
+    import { pageLoad } from "@utils/events";
+    function setup(cloakValue: HTMLSelectElement, abValue: HTMLSelectElement) {
+        const cloakLocal = localStorage.getItem(SettingsEnum.TabSettings.tabCloak);
+        const abCloakLocal = localStorage.getItem(SettingsEnum.TabSettings.abblob);
+        cloakLocal === "default" ? cloakValue.value = "reset" : cloakValue.value = cloakLocal as string;
+        abValue.value = abCloakLocal as string || 'a:b';
    }
-
-    const handleCloak = async (vals: AsyncGenerator) => { 
-        const button = Elements.exists<HTMLButtonElement>(await vals.next());
-        const val = Elements.exists<HTMLSelectElement>(await vals.next());
-        defaultStore.getVal(SettingsVals.tab.cloak) === "default" ? val.value = "reset" : val.value = defaultStore.getVal(SettingsVals.tab.cloak) || "reset";
-        // These have generics, but they can be inferred
-        Elements.attachEvent(button, "click", () => {
-            Settings.tab.cloak(val.value);
+    pageLoad(() => {
+        const cloakButton = document.getElementById("cloak") as HTMLButtonElement;
+        const cloakValue = document.getElementById("cloakselect") as HTMLSelectElement;
+        const abButton = document.getElementById("aboutblankbutton") as HTMLButtonElement;
+        const abValue = document.getElementById("aboutblank") as HTMLSelectElement;
+        setup(cloakValue, abValue);
+        cloakButton.addEventListener("click", () => {
+            settings.tabSettings.cloakTab(cloakValue.value);
+            toast('.cloakMessageSuccess');
        });
-    };
-
-    const handleAB = async (vals: AsyncGenerator) => {
-        const button = Elements.exists<HTMLButtonElement>(await vals.next()); 
-        const val = Elements.exists<HTMLSelectElement>(await vals.next());
-        val.value = defaultStore.getVal(SettingsVals.tab.ab) || 'a:b';
-        Elements.attachEvent(button, "click", () => {
-            if (val.value === "a:b") return Settings.tab.ab("https://www.google.com");
-            Settings.tab.blob("https://www.google.com");
+        abButton.addEventListener("click", () => {
+            toast('.abCloakMessage');
+            settings.tabSettings.abCloak(abValue.value);
        });
-    }
- 
-    new EventHandler({
-        events: {
-            "astro:page-load": async () => {
-                const v = await init();
-                await handleCloak(v);
-                await handleAB(v);
-            }
-        },
-        // Enable ONLY for debugging. Otherwise it will throw errors when we don't want them
-        logging: false 
    })
-    .bind();
 </script>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -3,52 +3,45 @@ import Loading from "@components/Loading.astro";
 import Layout from "@layouts/Layout.astro";
 ---

-<Layout title="" noHeader="true">
+<Layout title="Loading..." noHeader="true">
    <Loading />
 </Layout>
 <script>
-    import { EventHandler } from "@utils/events";
-    import { defaultStore } from "@utils/storage";
-    import { SettingsVals } from "@utils/values";
-    import { navigate } from "astro:transitions/client";
-    const eHandler = new EventHandler({
-        events: {
-            "DOMContentLoaded": () => {
-                let currentLang = defaultStore.getVal(SettingsVals.i18n.lang);
+  import { pageLoad } from "@utils/events";
+  pageLoad(() => {
+    let currentLang = localStorage.getItem("selectedLanguage");
+    const redirect = (loc: any) => (window.location.href = loc);
    if (currentLang) {
        try {
-                        switch (currentLang) {
+            let parsed = JSON.parse(currentLang).value;
+            switch (parsed) {
                case "en_US":
-                                navigate("/en_US/");
+                    redirect("/en_US/");
                    break;
                case "jp":
-                                navigate("/jp/");
+                    redirect("/jp/");
                    break;
            default:
-                                navigate("/en_US/");
+                redirect("/en_US/");
+                break;
            }
-                    } 
-                    catch {
+        } catch {
            localStorage.clear();
            window.location.reload();
        }
-                } 
-                else {
+        } else {
            if (navigator.language.includes("ja")) {
-                        defaultStore.setVal("selectedLanguage", SettingsVals.i18n.languages.jp);
-                        navigate("/jp/");
-                    } 
-                    else {
-                        defaultStore.setVal("selectedLanguage", SettingsVals.i18n.languages.en);
-                        navigate("/en_US/");
+                localStorage.setItem("selectedLanguage", JSON.stringify({ value: "jp" }));
+                redirect("/jp/");
+            } else {
+                localStorage.setItem(
+                    "selectedLanguage",
+                    JSON.stringify({ value: "en_US" })
+                );
+                redirect("/en_US/");
            }
        }
-            }
-        },
-        logging: false
  });
-    //Bind the events.
-    eHandler.bind();
 </script>
 <noscript>
    JavaScript is required to run this app.
--- a/src/pages/loading.astro
+++ b/src/pages/loading.astro
@ -7,7 +7,7 @@ import Layout from "@layouts/Layout.astro";
    <LoadingComponent />
 </Layout>
 <script>
-    import { EventHandler } from "@utils/events";
+    import { pageLoad } from "@utils/events";
    import { navigate } from "astro:transitions/client";
    function isComingFromIframe() {
        try {
@ -17,19 +17,11 @@ import Layout from "@layouts/Layout.astro";
            return true;
        }
    }
-
-    const eHandle = new EventHandler({
-        events: {
-            "DOMContentLoaded": (() => {
+    pageLoad(() => {
        const isIframe = isComingFromIframe();
        if (!isIframe) {
-                    console.log("Assuming request isn't coming from iframe. Redirecting...");
-                    //navigate("/");
+            console.log("Assuming request isn't coming from iFrame. Redirecting...");
+            navigate('/');
        }
-            }),
-        },
-        logging: false
    });
-    //Handle the events
-    eHandle.bind();
 </script>
--- a/src/pages/robots.txt.ts
+++ b/src/pages/robots.txt.ts
@ -1,29 +0,0 @@
-import type { APIRoute } from "astro";
-import { SEO } from "astro:env/client";
-interface config {
-    enabled: boolean;
-    domain: string;
-}
-const SEOConfig: config = JSON.parse(SEO);
-
-const genRobotsTXT = (sitemap: URL) => `
-User-Agent: *
-Allow: /
-User-Agent: *
-Disallow: /uv
-SiteMap: ${sitemap.href}
-`;
-
-const otherDomainTXT = `
-User-Agent: *
-Disallow: /*
-`
-
-export const GET: APIRoute = ({ site, request }) => {
-    const url = new URL('sitemap-index.xml', site);
-    const host = new URL(request.url).host;
-    if (SEOConfig.enabled && host === SEOConfig.domain) {
-        return new Response(genRobotsTXT(url));
-    }
-    return new Response(otherDomainTXT);
-};
--- a/src/store.js
+++ b/src/store.js
@ -0,0 +1,3 @@
+import { atom } from "nanostores";
+
+export const isMobileNavOpen = atom(false);
--- a/src/utils/events.ts
+++ b/src/utils/events.ts
@ -1,54 +1,13 @@
-type Event = "astro:page-load" | "astro:before-swap" | "astro:after-swap" | "DOMContentLoaded";
-interface Events {
-    events: {
-        "astro:page-load"?: () => unknown; 
-        "astro:before-swap"?: () => unknown;
-        "astro:after-swap"?: () => unknown;
-        "DOMContentLoaded"?: () => unknown;
-    };
-    logging: boolean;
-}
-
-/**
- * This class creates an event handler for us with optional logging
- *
- * @example
- * const eventHandler = new EventHandler({
- *     events: {
- *         "astro:page-load": () => { console.log("After page load") },
- *         "astro:before-swap": () => {},
- *         "astro:after-swap": () => {},
- *         "DOMContentLoaded": () => {}
- *     }, // Pass any number of these : D (they are all optional)
- *     logging: false // Set this to true to enable logging when things go wrong.
- * });
- *
- * eventHandler.bind(); // Attaches every event you passed.
- */
-class EventHandler {
-    #eventItems: Events;
-    constructor(items: Events) {
-        this.#eventItems = items;
-    }
-    #attachEvent(items: Events, eventType: Event, fn: () => unknown) {
-        if (items.logging) return document.addEventListener(eventType, async () => await fn());
-        document.addEventListener(eventType, async () => {
+function pageLoad(fn: () => void, logging?: boolean) {
+    document.addEventListener("astro:page-load", () => {
        try {
-                await fn();
+            fn();
+        } catch (err) {
+            if (logging) {
+                console.error(err);
+            }
        }
-            catch (_) {}
    });
 }
-    /**
-     * Binds the events you passed when creating the class to the document. If none are passed, an error is thrown.
-    */
-    bind(): void | Error {
-        const events = Object.entries(this.#eventItems.events);
-        if (!events || events.length === 0) throw new Error('No events added!');
-        events.map((event) => {
-            this.#attachEvent(this.#eventItems, event[0] as Event, event[1]);
-        });
-    }
-}

-export { EventHandler, type Events }
+export { pageLoad };
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -1,187 +0,0 @@
-type TType = "success" | "error" | "multiline";
-type ToastPosition = "top" 
-    | "top-start"
-    | "top-end"
-    | "center"
-    | "center-start"
-    | "center-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end";
-
-interface Props {
-    TType: TType;
-    text: string;
-    class: string;
-    id?: string;
-    duration?: number;
-    emoji?: any;
-    position?: ToastPosition;
-}
-
-/**
-    * This allows us to call our toast notifs.
-    *
-    * @example
-    * import { toast } from "@utils/index";
-    * toast(".toastMessage");
-*/
-function toast(query: string) {
-    const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
-    wrapper.classList.remove("hidden");
-    //this is a really hacky solution for toast notifications LOL
-    const element = document.querySelector(query) as HTMLElement;
-    //click the element
-    element.click();
-}
-
-type Items = {
-    type: "id" | "class" | "generic",
-    val: string 
-}
-
-type ElementDatasets = {
-    name: string,
-    val: string | undefined 
-}
-
-class Elements {
-    /** 
-        * An async generator function to get your objects quickly and easily.
-        *
-        * @example
-        * const items = selectElements(items: [{ type: "id", val: "iframe" }]);
-        * for await (const item of items) {
-            * console.log(item) // Perform some action on this item (OR pause and continue when needed!)
-        * }
-    */
-    static async *select(items: Items[]) {
-        for (const item in items) {
-            switch (items[item].type) {
-                case "id": 
-                    yield document.getElementById(items[item].val) as HTMLElement;
-                    break;
-                case "class":
-                    yield document.getElementsByClassName(items[item].val);
-                    break;
-                case "generic":
-                    yield document.getElementsByName(items[item].val);
-                    break;
-            }
-        }
-    };
-
-    static exists<RetType>(elem: any): RetType {
-        if (elem.value) return elem.value as RetType;
-        throw new Error(`Something is WRONG. The element doesn't exist!`);
-    }
-    
-    static attachEvent<Element extends HTMLElement, EType extends keyof HTMLElementEventMap>(item: Element, event: EType, fn: (event?: Event) => unknown) {
-        item.addEventListener(event, fn);
-    }
-
-    static createCustomElement(name: string, fn: (datasets?: ElementDatasets[]) => unknown, datasets?: Omit<ElementDatasets, "val">[]) {
-        class CustomEl extends HTMLElement {
-            dat: ElementDatasets[] = [];
-            constructor() {
-                super();
-                if (datasets) {
-                    datasets.forEach((data) => {
-                        this.dat.push({ name: data.name, val: this.dataset[data.name] });
-                    });
-                }
-                (async () => await fn(this.dat))();
-            }
-        }
-
-        if (customElements.get(name)) return log({ type: "error", bg: true, prefix: false, throw: false }, `An element with the name ${name} already exists! This WILL not work! And`);
-
-        log({ type: 'info', bg: false, prefix: true }, `Creating custom element with the name ${name}`);
-        customElements.define(name, CustomEl);
-    }
-}
-
-/**
-    * Allows use to turn a basic phrase into a full URL. Mainly used when ther user enters something in for use in UV/SJ
-    *
-    * @example
-    * import { search } from "@utils/index";
-    * search("YES", "https://www.google.com/search?q=%s");
-*/
-function search(input: string, template: string) {
-    try { return new URL(input).toString() } catch (_) {};
-
-    try {
-        const url = new URL(`http://${input}`);
-        if (url.hostname.includes(".")) return url.toString();
-    } catch (_) {};
-
-    return template.replace("%s", encodeURIComponent(input));
-}
-
-type LogOpts = { type: "normal" | "warn" | "info", bg: boolean, prefix: boolean } | { type: "error", bg: boolean, prefix: boolean, throw: boolean }
-/**
-    * Custom built log function with styles applied.
-    *
-    * @example
-    * import { log } from "@utils/index";
-    * log("info", opts: { bg: true, prefix: false }, message: "This is an example"); // BG can be true or false when BG is false, most of the time it reverts back to normal styling (except for the "normal" mode). When prefix is true, this adds a prefix of the type of message used.
-*/
-const log = (type: LogOpts, message: string): void => {
-    const styles = {
-        warn: {
-            bg: {
-                color: "#ffffff",
-                bg: "#cc3300"
-            },
-            normal: "#ffffff"
-        },
-        error: {
-            bg: {
-                color: "#ffffff",
-                bg: "#cc0000"
-            },
-            normal: "#ffffff"
-        },
-        info: {
-            bg: {
-                color: "#ffffff",
-                bg: "#088F8F"
-            },
-            normal: "#088F8F"
-        },
-        normal: {
-            bg: {
-                color: "#ffffff",
-                bg: "#7967dd"
-            },
-            normal: "#7967dd"
-        }
-    }
-    switch(type.type) {
-        case "info": 
-            console.info(`%c${type.prefix ? `Info: ${message}` : message}`, `${type.bg ? `color: ${styles.info.bg.color}; background-color: ${styles.info.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.info.normal}; font-weight: bold;`}`);
-            break;
-        case "error":
-            if (type.throw) throw new Error(message);
-            console.error(`%c${type.prefix ? `Error: ${message}` : message }`, `${type.bg ? `color: ${styles.error.bg.color}; background-color: ${styles.error.bg.bg}; padding: 2px 10px;` : `color: ${styles.error.normal};`}`);
-            break;
-        case "warn": 
-            console.warn(`%c${type.prefix ? `Warning: ${message}` : message}`, `${type.bg ? `color: ${styles.warn.bg.color}; background-color: ${styles.warn.bg.bg}; padding: 2px 10px;` : `color: ${styles.warn.normal};`}`);
-            break;
-        case "normal": 
-            console.log(`%c${message}`, `${type.bg ? `color: ${styles.normal.bg.color}; background-color: ${styles.normal.bg.bg}; padding: 2px 10px; font-weight: bold;` : `color: ${styles.normal.normal}; font-weight: bold;`}`);
-            break;
-    }
-};
-
-
-export { 
-    type TType, 
-    type ToastPosition, 
-    type Props, 
-    toast,
-    search,
-    log,
-    Elements
-};
--- a/src/utils/marketplace.ts
+++ b/src/utils/marketplace.ts
@ -1,306 +0,0 @@
-import { Elements, log } from "./index";
-import { StoreManager } from "./storage";
-import { SettingsVals } from "./values";
-
-type PluginType = "page" | "serviceWorker";
-type MarketplacePluginType = "plugin-page" | "plugin-sw";
-type PackageType = "theme" | MarketplacePluginType;
-
-interface Plug {
-    name: string;
-    src: string;
-    type: PluginType;
-    remove?: boolean;
-}
-interface SWPagePlugin extends Omit<Plug, "name" | "src"> {
-    host: string;
-    html: string;
-    injectTo: "head" | "body";
-}
-
-type SWPluginFunction<T extends unknown> = (args: T) => void | unknown;
-
-type Events =
-    | "abortpayment"
-    | "activate"
-    | "backgroundfetchabort"
-    | "backgroundfetchclick"
-    | "backgroundfetchfail"
-    | "backgroundfetchsuccess"
-    | "canmakepayment"
-    | "contentdelete"
-    | "cookiechange"
-    | "fetch"
-    | "install"
-    | "message"
-    | "messageerror"
-    | "notificationclick"
-    | "notificationclose"
-    | "paymentrequest"
-    | "periodicsync"
-    | "push"
-    | "pushsubscriptionchange"
-    | "sync";
-
-interface SWPlugin extends Omit<Plug, "src"> {
-    function: string | SWPluginFunction<any>;
-    events: Events[];
-}
-
-interface Theme {
-    name: string;
-    payload: string;
-    video?: string;
-    bgImage?: string;
-};
-
-/**
-    * A class where for all of the Marketplace handlers.
-    * It creates it's own StoreManager where all of it's values will live.
-    * And it has 2 static items. instances and getInstances.
-    *
-    * @example
-    * //Create a new Marketplace instance
-    * const mp = new Marketplace();
-    * //Use one of the very many methods available.
-    * 
-    * //Get all instances of a Marketplace is as easy as:
-    * // const mp = Marketplace.getInstances.next().value;
-    * // Consume and use the class.
-*/
-class Marketplace {
-    //create our own subsidized StoreManager with it's own prefix so the marketplace stuff NEVER touches the other data
-    #storage: StoreManager<"nebula||marketplace">;
-    static #instances = new Set();
-    constructor() {
-        this.#storage = new StoreManager("nebula||marketplace");
-        log({ type: 'info', bg: true, prefix: true }, 'Marketplace instance created and ready!');
-        Marketplace.#instances.add(this);
-    }
-    
-    /**
-        * A static method to aquire an instance of a marketplace object.
-        *
-        * @example
-        * //Get the first insatnce available. 
-        * const mp = Marketplace.getInstances.next().value
-        *
-        * @example
-        * // Iterate over every instance
-        * for (const instance of Marketplace.getInstances()) {
-            * // Do some work
-        * }
-    */
-    static *getInstances() {
-        //Marketplace.instances.forEach((val) => yield val);
-        for (const item of Marketplace.#instances.keys()) {
-            yield item! as Marketplace;
-        }
-    }
-
-    /**
-        * Detect if our Marketplace is ready or not. If it's not, don't resolve until it IS
-    */
-    static ready(): Promise<boolean> { 
-        return new Promise((resolve) => {
-            const t = setInterval(() => {
-                if (Marketplace.#instances.size !== 0) {
-                    clearInterval(t);
-                    resolve(true);
-                }
-            }, 100);
-        });
-    }
-
-    async getValueFromStore(val: string): Promise<string> {
-        return this.#storage.getVal(val);
-    }
-
-
-    async getThemes(name?: string): Promise<{themes: any, theme: string, exists: Boolean}> {
-        const themes = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.themes)) || [];
-        const theme = themes.find((t: any) => t === name);
-        const exists = themes.indexOf(name) !== -1;
-        return { themes, theme, exists };
-    } 
-
-    async getPlugins(pname?: string): Promise<{plugins: any, plug: any}> {
-        const plugins = JSON.parse(this.#storage.getVal(SettingsVals.marketPlace.plugins)) || [];
-        const plug = plugins.find(({ name } : { name: string }) => name === pname );
-        return { plugins, plug }
-    }
-    
-    /**
-        * Install a theme into both localstorage AND set the theme.
-        *
-        * @example
-        * const mp = new Marketplace() // OR get an instances from getInstances()
-        * mp.installTheme({
-            * name: "testTheme",
-            * payload: "/packages/testTheme/index.css",
-            * // video: if you have a bg video, pass it here.
-            * //bgImage: pass the BG image here if you have one
-        * });
-    */
-    async installTheme(theme: Omit<Theme, "payload">) {
-        const { themes, exists } = await this.getThemes(theme.name);
-        if (exists) return log({ type: 'error', bg: false, prefix: false, throw: true }, `${theme.name} is already installed!`)
-        themes.push(theme.name);
-        this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(themes));
-    }
-
-    async installPlugin(plugin: Plug) {
-        let { plugins, plug } = await this.getPlugins(plugin.name);
-        if (plug && plug.remove) { plug.remove = false; console.log(plug); return this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins)) };
-        plugins.push({ name: plugin.name, src: plugin.src, type: plugin.type } as unknown as Plug);
-        this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins));
-    }
-
-    async uninstallTheme(theme: Omit<Theme, "payload" | "video" | "bgImage">) {
-        const { themes: items, exists } = await this.getThemes(theme.name);
-        if (!exists) return log({ type: 'error', bg: false, prefix: false, throw: true }, `Theme: ${theme.name} is not installed!`);
-        const idx = items.indexOf(theme.name);
-        items.splice(idx, 1);
-        this.#storage.setVal(SettingsVals.marketPlace.themes, JSON.stringify(items));
-    }
-
-    async uninstallPlugin(plug: Omit<Plug, "src">) {
-        let { plugins: items, plug: plugin } = await this.getPlugins(plug.name);
-
-        if (!plugin) return log({ type: 'error', bg: false, prefix: false, throw: true }, `Plugin: ${plug.name} is not installed!`);
-        plugin.remove = true;
-        this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(items));
-    }
-
-    async handlePlugins(worker: ServiceWorkerRegistration) {
-        let { plugins } = await this.getPlugins();
-
-        const pagePlugins: SWPagePlugin[] = [];
-        const swPlugins: SWPlugin[] = [];
-        if (plugins.length === 0) return log({ type: 'info', bg: false, prefix: true }, 'No plugins to add! Exiting.');
-        plugins.map(async (plugin: Plug) => {
-            if (plugin.type === "page") {
-                const script = await fetch(`/packages/${plugin.name}/${plugin.src}`);
-                const scriptRes = await script.text();
-                console.log(scriptRes);
-                const evaledScript = eval(scriptRes);
-                console.log(evaledScript);
-                const inject = (await evaledScript()) as unknown as SWPagePlugin;
-                if (!plugin.remove) {
-                    pagePlugins.push({
-                        host: inject.host,
-                        html: inject.html,
-                        injectTo: inject.injectTo,
-                        type: 'page'
-                    });
-                }
-                else {
-                    plugins = plugins.filter(({ name }: { name: string }) => name !== plugin.name);
-                    pagePlugins.push({
-                        remove: true,
-                        host: inject.host,
-                        html: inject.html,
-                        injectTo: inject.injectTo,
-                        type: 'page'
-                    });
-                }
-                worker.active?.postMessage(pagePlugins);
-            }
-            
-            if (plugin.type === "serviceWorker") {
-                const s = await fetch(`/packages/${plugin.name}/${plugin.src}`);
-                const sRes = await s.text();
-                const eScript = eval(sRes);
-                const inject = (await eScript()) as unknown as SWPlugin;
-                if (!plugin.remove) {
-                    swPlugins.push({
-                        function: inject.function.toString(),
-                        name: plugin.name,
-                        events: inject.events,
-                        type: 'serviceWorker'
-                    });
-                }
-                else {
-                    plugins = plugins.filter(({ name }: { name: string }) => name !== plugin.name);
-                    swPlugins.push({
-                        remove: true,
-                        function: inject.function.toString(),
-                        name: plugin.name,
-                        events: inject.events,
-                        type: 'serviceWorker'
-                    });
-                }
-                worker.active?.postMessage(swPlugins);
-            }
-            this.#storage.setVal(SettingsVals.marketPlace.plugins, JSON.stringify(plugins));
-        });
-    }
-    
-    async theme(opts: { type: 'normal', payload: string, sources?: { video?: string, bg?: string }, name: string } | { type: 'remove', payload?: string, sources?: { video?: string, bg?: string }, name?: string }) {
-        const elems = Elements.select([
-            { type: 'id', val: 'stylesheet' },
-            { type: 'id', val: 'nebulaVideo' },
-            { type: 'id', val: 'nebulaImage' }
-        ]);
-        const s = Elements.exists<HTMLLinkElement>(await elems.next());
-        const nv = Elements.exists<HTMLVideoElement>(await elems.next());
-        const ni = Elements.exists<HTMLImageElement>(await elems.next());
-        
-        const nvl = this.#storage.getVal(SettingsVals.marketPlace.appearance.video);
-        const nil = this.#storage.getVal(SettingsVals.marketPlace.appearance.image);
-        const tsp = this.#storage.getVal(SettingsVals.marketPlace.appearance.theme.payload);
-        const tsn = this.#storage.getVal(SettingsVals.marketPlace.appearance.theme.name);
-        
-        const reset = (style: boolean) => {
-            const st = this.#storage;
-            if (style) {
-                st.removeVal(SettingsVals.marketPlace.appearance.theme.name);
-                st.removeVal(SettingsVals.marketPlace.appearance.theme.payload);
-                s.href = "/nebula.css";
-            }
-            st.removeVal(SettingsVals.marketPlace.appearance.video);
-            nv.src = "";
-            st.removeVal(SettingsVals.marketPlace.appearance.image);
-            ni.style.display = "none";
-            ni.src = "";
-        }
-
-        if (opts.type === 'remove') return reset(true);
-        
-        if (opts.sources?.video || nvl) {
-            reset(false);
-            if (!nvl) this.#storage.setVal(SettingsVals.marketPlace.appearance.video, opts.sources?.video || nvl);
-            nv.src = `/packages/${opts.name}/${opts.sources?.video ? opts.sources.video : nvl}`
-        }
-        if (opts.sources?.bg || nil) {
-            reset(false);
-            if (!nil) this.#storage.setVal(SettingsVals.marketPlace.appearance.image, opts.sources?.bg || nil);
-            ni.style.display = "block";
-            ni.src = `/packages/${opts.name}/${opts.sources?.bg ? opts.sources.bg : nil}`
-        }
-
-        if (opts.payload) {
-           if (tsp !== opts.payload) {
-               this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.payload, opts.payload);
-               this.#storage.setVal(SettingsVals.marketPlace.appearance.theme.name, opts.name);
-           }
-           s.href = `/packages/${opts.name}/${opts.payload}`;
-        }
-        else {
-            if (tsp) return s.href = `/packages/${tsn}/${tsp}`;
-        }
-    }
-}
-
-export { 
-    Marketplace,
-    type PluginType,
-    type MarketplacePluginType,
-    type PackageType,
-    type Plug, 
-    type SWPagePlugin,
-    type SWPluginFunction,
-    type Events,
-    type SWPlugin,
-    type Theme
-}
--- a/src/utils/registerSW.ts
+++ b/src/utils/registerSW.ts
@ -0,0 +1,86 @@
+import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
+import { Settings, WispServerURLS } from "./settings/index";
+
+let baremuxConn: BareMuxConnection;
+let swReg: ServiceWorkerRegistration;
+
+function loadProxyScripts() {
+    //wrap everything in a promise to avoid race conditions
+    return new Promise<BareMuxConnection>((resolve) => {
+        const conn = new BareMuxConnection("/baremux/worker.js");
+        if (typeof __uv$config !== "undefined") {
+            return resolve(conn);
+        }
+        const uvBundle = document.createElement("script");
+        uvBundle.src = "/uv/uv.bundle.js";
+        uvBundle.defer = true;
+        document.body.appendChild(uvBundle);
+        const uvConfig = document.createElement("script");
+        uvConfig.src = "/uv/uv.config.js";
+        uvConfig.defer = true;
+        document.body.appendChild(uvConfig);
+        const checkScript = setInterval(() => {
+            if (typeof __uv$config !== "undefined") {
+                clearInterval(checkScript);
+                resolve(conn);
+            }
+        }, 100);
+    });
+}
+
+function setTransport(conn: BareMuxConnection, transport?: string) {
+    //wrap in a promise so we don't register sw until a transport is set.
+    const wispServer = localStorage.getItem(Settings.ProxySettings.wispServerURL);
+    return new Promise<void>((resolve) => {
+        console.log(`Wisp server set: ${wispServer ? WispServerURLS[wispServer] : WispServerURLS.default}`)
+        switch (transport) {
+            case "epoxy":
+                conn.setTransport("/epoxy/index.mjs", [
+                    { wisp: wispServer ? WispServerURLS[wispServer] : WispServerURLS.default }
+                ]);
+                break;
+            case "libcurl":
+                conn.setTransport("/libcurl/index.mjs", [
+                    { wisp: wispServer ? WispServerURLS[wispServer] : WispServerURLS.default }
+                ]);
+                break;
+        }
+        resolve();
+    });
+}
+
+function initSw() {
+    //this is wrapped in a promise to mostly solve the bare-mux v1 problems
+    return new Promise<ServiceWorkerRegistration>((resolve) => {
+        if ("serviceWorker" in navigator) {
+            navigator.serviceWorker.ready.then(async (reg) => {
+                console.debug("Service worker ready!");
+                resolve(reg);
+            });
+            navigator.serviceWorker.register("/sw.js", { scope: "/" });
+        }
+    });
+}
+
+interface SWStuff {
+    sw: ServiceWorkerRegistration;
+    conn: BareMuxConnection;
+}
+
+function setSWStuff(stuff: SWStuff): Promise<void> {
+    return new Promise<void>((resolve) => {
+        swReg = stuff.sw;
+        baremuxConn = stuff.conn;
+        resolve();
+    });
+}
+
+function getSWStuff(): SWStuff {
+    const stuff: SWStuff = {
+        sw: swReg,
+        conn: baremuxConn
+    };
+    return stuff;
+}
+
+export { initSw, setTransport, loadProxyScripts, setSWStuff, getSWStuff };
--- a/src/utils/search.ts
+++ b/src/utils/search.ts
@ -0,0 +1,27 @@
+function search(input: string, template: string) {
+    try {
+        // input is a valid URL:
+        // eg: https://example.com, https://example.com/test?q=param
+        return new URL(input).toString();
+    } catch (err) {
+        // input was not a valid URL
+    }
+
+    try {
+        // input is a valid URL when http:// is added to the start:
+        // eg: example.com, https://example.com/test?q=param
+        const url = new URL(`http://${input}`);
+        // only if the hostname has a TLD/subdomain
+        if (url.hostname.includes(".")) return url.toString();
+    } catch (err) {
+        // input was not valid URL
+    }
+
+    // input may have been a valid URL, however the hostname was invalid
+
+    // Attempts to convert the input to a fully qualified URL have failed
+    // Treat the input as a search query
+    return template.replace("%s", encodeURIComponent(input));
+}
+
+export { search };
--- a/src/utils/serviceWorker.ts
+++ b/src/utils/serviceWorker.ts
@ -1,188 +0,0 @@
-import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
-import { defaultStore } from "./storage";
-import { SettingsVals, WispServers } from "./values";
-import { log } from "./index";
-
-/**
-    * Creates a script element and returns it for usage or more modification.
-    *
-    * @example
-    * const script = createScript("/scram/scramjet.controller.js", true);
-    * document.body.appendChild(script);
-*/
-const createScript = (src: string, defer?: boolean): HTMLScriptElement => {
-    const script = document.createElement('script') as HTMLScriptElement;
-    script.src = src;
-    if (defer) script.defer = defer;
-    return script;
-};
-
-/**
-    * A generator function to create and load our proxy scripts. Allows us to pause and continue when needed.
-    *
-    * @example
-    * const proxyScripts = createProxyScripts();
-    * if (proxyScripts.next().value) document.body.appendChild(proxyScripts.next().value)
-    * // We can now check to see if that script is there or not and then continue after.
-*/
-function* createProxyScripts() {
-    const uv = createScript("/uv/uv.bundle.js", true);
-    yield uv;
-    const uvConfig = createScript("/uv/uv.config.js", true);
-    yield uvConfig;
-    const sj = createScript("/scram/scramjet.controller.js", true);
-    yield sj;
-};
-
-/**
-    * Function that resolves ONLY when uv and Scramjet are not undefined. This prevents us from using these values before they are added and executed.
-    *
-    * @example
-    * await checkProxyScripts();
-    * @example 
-    * checkProxyScripts().then(() => { // Do something });
-*/
-const checkProxyScripts = (): Promise<void> => {
-    return new Promise((resolve) => {
-        const checkScript = setInterval(() => {
-            if (typeof __uv$config !== "undefined" && typeof ScramjetController !== "undefined") {
-                clearInterval(checkScript);
-                resolve();
-            }
-        }, 100);
-    });
-};
-
-/** 
-    * Creates a bareMux connection an returns it the instantiated instance as a promise.
-    *
-    * @example
-    * const conn = createBareMuxConn("/baremux/worker.js");
-*/
-const createBareMuxConn = (worker: string): Promise<BareMuxConnection> => {
-    return new Promise<BareMuxConnection>((resolve) => {
-        const conn = new BareMuxConnection(worker);
-        resolve(conn);
-    });
-};
-
-/**
-    * Sets a transport via an already active BareMux connection. The options are libcurl or epoxy and returns a void promise.
-    *
-    *
-    * @example 
-    * const conn = createBareMuxConn("/baremux/worker.js");
-    * setTransport(conn, "libcurl");
-*/
-const setTransport = (conn: BareMuxConnection,  transport?: "libcurl" | "epoxy"): Promise<void> => {
-    const server = defaultStore.getVal(SettingsVals.proxy.wispServer); 
-    return new Promise((resolve) => {
-        log({ type: 'info', bg: false, prefix: false }, `Set transport: ${transport ? transport : "libcurl"}`);
-        log({ type: 'info', bg: false, prefix: false }, `Set wisp server at: ${server ? WispServers[server]: WispServers.default }`);
-        if (transport === "epoxy") return resolve(conn.setTransport("/epoxy/index.mjs", [ { wisp: server ? WispServers[server] : WispServers.default }]));
-        if (transport === "libcurl") return resolve(conn.setTransport("/libcurl/index.mjs", [ { wisp: server ? WispServers[server] : WispServers.default }]));
-    });
-};
-
-type SWInit = {
-    serviceWorker: ServiceWorkerRegistration;
-    sj: ScramjetController;
-    bareMuxConn: BareMuxConnection;
-}
-
-/**
-    * This class automatically sets up and registers our service worker.
-    *
-    * @example
-    * const sw = new SW();
-    * sw.getSWInfo() // Returns an object with the service worker, scramjet controller instance and the baremux connection all in one method
-    * sw.setSWInfo() // Allows one to override the info returned from getSWInfo() should be used sparingly or never.
-*/
-class SW {
-    #init!: SWInit;
-    #ready: boolean = false;
-    static #instances = new Set();
-    constructor(conn: BareMuxConnection) {
-        SW.#instances.add(this);
-        const sj = (): ScramjetController => {
-            const sj = new ScramjetController({
-                prefix: '/~/scramjet',
-                files: {
-                    wasm: "/scram/scramjet.wasm.js",
-                    worker: "/scram/scramjet.worker.js",
-                    client: "/scram/scramjet.client.js",
-                    shared: "/scram/scramjet.shared.js",
-                    sync: "/scram/scramjet.sync.js"
-                },
-                flags: {
-                    rewriterLogs: false
-                }
-            });
-            return sj;
-        }
-        if ("serviceWorker" in navigator) {
-            (async () => { await navigator.serviceWorker.getRegistrations() })();
-            const scram = sj();
-            (async () => await scram.init())();
-            navigator.serviceWorker.ready.then(async (reg) => {
-                log({ type: 'info', prefix: true, bg: false }, 'ServiceWorker ready and active!');
-                this.#init = { serviceWorker: reg, sj: scram, bareMuxConn: conn };
-                this.#ready = true;
-            });
-            navigator.serviceWorker.register("/sw.js", { scope: '/' });
-        }
-        else {
-            throw new Error('Your browser is not supported! This website uses Service Workers heavily.');
-        }
-    }
-
-    /**
-        * Static method to get an already existing SW class
-        *
-        *
-        * @example
-        * SW.getInstances.next().value // Get the first instance.
-        *
-        * @example 
-        * // Loop through every instance
-        * for (const sw of SW.getInstances()) {
-            * console.log(sw) // DO some real work
-        * }
-    */
-    static *getInstances() {
-        for (const value of SW.#instances.keys()) {
-            yield value as SW;
-        }
-    }
-    /**
-        * Allows you to overrid the items set. Should be used sparingly or never.
-    */
-    setSWInfo(items: SWInit): void {
-        this.#init = { serviceWorker: items.serviceWorker, sj: items.sj, bareMuxConn: items.bareMuxConn };
-        this.#ready = true;
-    }
-    
-    /**
-        * Returns a promise that resolves to the serviceWorker, scramjet controller and bareMux Connection ONLY when these values are ready.
-        *
-        * @example
-        * const sw = new SW(conn); // "conn" must be a baremux connection that you created.
-        * const swInfo = await sw.getSWInfo();
-        *
-        * @example
-        * const sw = new SW(conn); // "conn" must be a baremux connection that you created
-        * sw.getInfo().then((info) => { // Do something with said info }
-    */
-    getSWInfo(): Promise<SWInit> {
-        return new Promise((resolve) => {
-            const checkState = setInterval(() => {
-                if (this.#ready) {
-                    clearInterval(checkState);
-                    resolve(this.#init);
-                }
-            }, 100);
-        });
-    }
-}
-
-export { createScript, createProxyScripts, checkProxyScripts, createBareMuxConn, setTransport, SW }; 
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@ -1,109 +0,0 @@
-import { defaultStore } from "./storage";
-import { SettingsVals, WispServers } from "./values";
-import { Marketplace } from "./marketplace";
-import { setTransport, SW } from "./serviceWorker";
-
-const tab = {
-    ab: (redirect: string) => {
-        window.location.replace(redirect);
-        const win = window.open();
-        const iframe = win!.document.createElement("iframe") as HTMLIFrameElement;
-        win!.document.body.setAttribute('style', 'margin: 0; height: 100vh; width: 100%;');
-        iframe.setAttribute('style', 'border: none; width: 100%; height: 100%; margin: 0;');
-        iframe.src = window.location.href;
-        win!.document.body.appendChild(iframe);
-    },
-    blob: (redirect: string) => {
-        const content = `
-            <!DOCTYPE html>
-            <html>
-                <head>
-                    <style type="text/css">
-                        body, html {
-                            margin: 0;
-                            padding: 0;
-                            height: 100%;
-                            width: 100%;
-                            overflow: hidden;
-                        }
-                    </style>
-                </head>
-                <body>
-                    <iframe style="border: none; width: 100%; height: 100%;" src="${window.location.href}"></iframe>
-                </body>
-            </html>
-        `;
-        window.location.replace(redirect);
-        const blob = new Blob([content], { type: 'text/html' });
-        window.open(URL.createObjectURL(blob), "_blank");
-    },
-    cloak: (cloak: string) => {
-        const fElem = document.getElementById("favicon")! as HTMLLinkElement;
-        const c = (title: string, href: string) => {
-            document.title = title;
-            fElem.href = href;
-        }
-        switch(cloak) {
-            case "google": {
-                c("Google", "/cloaks/google.png");
-                break;
-            }
-            case "wikipedia": {
-                c("Wikipedia", "/cloaks/wikipedia.ico");
-                break;
-            }
-            case "canvas": {
-                c("Dashboard", "/cloaks/canvas.ico");
-                break;
-            }
-            case "classroom": {
-                c("Home", "/cloaks/classroom.ico");
-                break;
-            }
-            case "powerschool": {
-                c("PowerSchool", "/cloaks/ps.ico");
-                break;
-            }
-            case "reset": {
-                defaultStore.setVal(SettingsVals.tab.cloak, "default");
-                window.location.reload();
-            }
-            default: {
-                return;
-            }
-        }
-    }
-}
-
-const proxy = {
-    change: (proxy: "uv" | "sj" | "automatic") => {
-        defaultStore.setVal(SettingsVals.proxy.proxy.key, proxy);
-    },
-    searchEngine: (s: string) => {
-        defaultStore.setVal(SettingsVals.proxy.searchEngine, s);
-    },
-    wisp: (s: string) => {
-        defaultStore.setVal(SettingsVals.proxy.wispServer, s);
-    },
-    transport: async (t: "libcurl" | "epoxy") => {
-        const sw = SW.getInstances().next().value!;
-        const { bareMuxConn } = await sw.getSWInfo();
-        await setTransport(bareMuxConn, t as "libcurl" | "epoxy");
-        defaultStore.setVal(SettingsVals.proxy.transport.key, t);
-    }
-}
-
-async function* initDefaults() {
-    yield proxy.change(defaultStore.getVal(SettingsVals.proxy.proxy.key) ? defaultStore.getVal(SettingsVals.proxy.proxy.key) as "uv" | "sj" | "automatic" : "automatic");
-    yield proxy.wisp(defaultStore.getVal(SettingsVals.proxy.wispServer) ? defaultStore.getVal(SettingsVals.proxy.wispServer) : "default");
-    yield proxy.transport(defaultStore.getVal(SettingsVals.proxy.transport.key) ? defaultStore.getVal(SettingsVals.proxy.transport.key) as "libcurl" | "epoxy" : "libcurl");
-    yield proxy.searchEngine(defaultStore.getVal(SettingsVals.proxy.searchEngine) ? defaultStore.getVal(SettingsVals.proxy.searchEngine) : "ddg");
-}
-
-const Settings = {
-    tab,
-    proxy,
-    initDefaults
-}
-
-export { Settings };
--- a/src/utils/settings/index.ts
+++ b/src/utils/settings/index.ts
@ -0,0 +1,54 @@
+//Combine all of the other settings into one object. And export that (along with types and other things)
+import {
+    AppearanceSettings,
+    MarketPlaceExtras,
+    PluginSettings,
+    marketPlaceSettings
+} from "./marketplace/index";
+import { ProxySettings, proxySettings } from "./proxy";
+import { TabSettings, cloak, tabSettings } from "./tab";
+import {
+    type AbCloaks,
+    type OpenIn,
+    type Package,
+    type PackageType,
+    type Proxy,
+    type SearchEngine,
+    SearchEngines,
+    type TabCloaks,
+    type Transport,
+    WispServerURLS,
+    wispUrl
+} from "./types";
+
+const Settings = {
+    AppearanceSettings,
+    TabSettings,
+    ProxySettings,
+    MarketPlaceExtras,
+    PluginSettings
+};
+
+const settings = {
+    marketPlaceSettings,
+    tabSettings,
+    proxySettings
+};
+
+//export all of the stuffs
+export {
+    Settings,
+    settings,
+    SearchEngines,
+    WispServerURLS,
+    wispUrl,
+    cloak,
+    type TabCloaks,
+    type AbCloaks,
+    type OpenIn,
+    type Proxy,
+    type Transport,
+    type PackageType,
+    type Package,
+    type SearchEngine
+};
--- a/src/utils/settings/marketplace/index.ts
+++ b/src/utils/settings/marketplace/index.ts
@ -0,0 +1,224 @@
+//marketplace code & handlers
+import { Settings } from "../index";
+import {
+    type Package,
+    type PackageType,
+    type Plugin,
+    type PluginType,
+    type SWPagePlugin,
+    type SWPlugin
+} from "../types";
+const AppearanceSettings = {
+    themes: "nebula||themes",
+    themeName: "nebula||themeName",
+    stylePayload: "nebula||stylepayload",
+    video: "nebula||video",
+    image: "nebula||image"
+};
+
+const PluginSettings = {
+    plugins: "nebula||plugins"
+};
+
+const MarketPlaceExtras = {
+    proxy: "nebula||marketplaceProxy",
+    hostname: "nebula||marketplaceHostname"
+};
+
+const marketPlaceSettings = {
+    install: function (p: Package, packageName: string, payload?: any) {
+        return new Promise<void>((resolve) => {
+            if (p.theme) {
+                let themes = localStorage.getItem(AppearanceSettings.themes) as any;
+                themes ? (themes = JSON.parse(themes)) : (themes = []);
+                if (!themes.find((theme: any) => theme === packageName)) {
+                    themes.push(packageName);
+                    localStorage.setItem(AppearanceSettings.themes, JSON.stringify(themes));
+                    this.changeTheme(false, payload, p.theme.video, p.theme.bgImage, packageName);
+                }
+                resolve();
+            }
+            if (p.plugin) {
+                let plugins = localStorage.getItem(PluginSettings.plugins) as any;
+                plugins ? (plugins = JSON.parse(plugins)) : (plugins = []);
+                //@ts-ignore
+                const plugin = plugins.find(({ name }) => name === packageName) as Plugin;
+                if (!plugin) {
+                    plugins.push({
+                        name: packageName,
+                        src: p.plugin.src,
+                        type: p.plugin.type
+                    } as unknown as Plugin);
+                    localStorage.setItem(PluginSettings.plugins, JSON.stringify(plugins));
+                } else if (plugin && plugin.remove) {
+                    plugin.remove = false;
+                    localStorage.setItem(Settings.PluginSettings.plugins, JSON.stringify(plugins));
+                }
+                resolve();
+            }
+        });
+    },
+    uninstall: function (p: PackageType, packageName: string) {
+        console.log(p);
+        return new Promise<void>((resolve) => {
+            if (p === "theme") {
+                let items = localStorage.getItem(AppearanceSettings.themes) as any;
+                items ? (items = JSON.parse(items)) : (items = []);
+                if (items.find((theme: any) => theme === packageName.toLowerCase())) {
+                    const idx = items.indexOf(packageName.toLowerCase());
+                    items.splice(idx, 1);
+                    localStorage.setItem(AppearanceSettings.themes, JSON.stringify(items));
+                    this.changeTheme(true);
+                }
+                resolve();
+            }
+            if (p === "plugin-page" || p === "plugin-sw") {
+                let plugins = localStorage.getItem(PluginSettings.plugins) as any;
+                plugins ? (plugins = JSON.parse(plugins)) : (plugins = []);
+                //@ts-ignore
+                const plugin = plugins.find(({ name }) => name === packageName.toLowerCase());
+                if (plugin) {
+                    plugin.remove = true;
+                    localStorage.setItem(PluginSettings.plugins, JSON.stringify(plugins));
+                }
+                resolve();
+            }
+        });
+    },
+    handlePlugins: function (worker: never | ServiceWorkerRegistration) {
+        return new Promise<void>((resolve) => {
+            let plugins =
+                JSON.parse(localStorage.getItem(Settings.PluginSettings.plugins) as string) || [];
+            const swPagePlugins: SWPagePlugin[] = [];
+            const swPlugins: SWPlugin[] = [];
+            if (plugins.length === 0) {
+                console.log("Plugin length is not greater then 0. Resolving.");
+                return resolve();
+            }
+            plugins.forEach(async (plugin: Plugin) => {
+                if (plugin.type === "page") {
+                    const pluginScript = await fetch(
+                        `/packages/${plugin.name.toLowerCase()}/${plugin.src}`
+                    ).then((res) => res.text());
+                    const script = eval(pluginScript);
+                    const inject = (await script()) as unknown as SWPagePlugin;
+                    if (plugin.remove) {
+                        plugins = plugins.filter(
+                            //@ts-ignore freaking types BRO
+                            ({ name }) => name !== plugin.name.toLowerCase()
+                        );
+                        swPagePlugins.push({
+                            remove: true,
+                            host: inject.host,
+                            html: inject.html,
+                            injectTo: inject.injectTo,
+                            type: "page"
+                        });
+                    } else {
+                        swPagePlugins.push({
+                            host: inject.host,
+                            html: inject.html,
+                            injectTo: inject.injectTo,
+                            type: "page"
+                        });
+                    }
+                    //only resolve AFTER we have postMessaged to the SW.
+                    worker.active?.postMessage(swPagePlugins);
+                } else if (plugin.type === "serviceWorker") {
+                    const pluginScript = await fetch(
+                        `/packages/${plugin.name.toLowerCase()}/${plugin.src}`
+                    ).then((res) => res.text());
+                    const script = eval(pluginScript);
+                    const inject = (await script()) as unknown as SWPlugin;
+                    if (plugin.remove) {
+                        plugins = plugins.filter(
+                            //@ts-ignore
+                            ({ name }) => name !== plugin.name.toLowerCase()
+                        );
+                        swPlugins.push({
+                            remove: true,
+                            function: inject.function.toString(),
+                            name: plugin.name,
+                            events: inject.events,
+                            type: "serviceWorker"
+                        });
+                    } else {
+                        swPlugins.push({
+                            function: inject.function.toString(),
+                            name: plugin.name,
+                            events: inject.events,
+                            type: "serviceWorker"
+                        });
+                    }
+                    worker.active?.postMessage(swPlugins);
+                }
+                localStorage.setItem(Settings.PluginSettings.plugins, JSON.stringify(plugins));
+                resolve();
+            });
+        });
+    },
+    changeTheme: async function (
+        reset: Boolean,
+        payload?: any,
+        videoSource?: string,
+        bgSource?: string,
+        name?: string
+    ) {
+        async function resetCSS() {
+            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
+            localStorage.removeItem(AppearanceSettings.stylePayload);
+            localStorage.removeItem(AppearanceSettings.themeName);
+            stylesheet.href = "/nebula.css";
+        }
+        function resetVideo() {
+            localStorage.removeItem(AppearanceSettings.video);
+            const source = document.getElementById("nebulaVideo")! as HTMLVideoElement;
+            source.src = "";
+        }
+        function resetBGImage() {
+            localStorage.removeItem(AppearanceSettings.image);
+            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
+            image.style.display = "none";
+            image.src = "";
+        }
+        if (reset === true) {
+            await resetCSS();
+            resetBGImage();
+            resetVideo();
+        }
+        if (videoSource || localStorage.getItem(AppearanceSettings.video)) {
+            resetBGImage();
+            resetVideo();
+            const source = document.getElementById("nebulaVideo")! as HTMLVideoElement;
+            if (!localStorage.getItem(AppearanceSettings.video)) {
+                localStorage.setItem(AppearanceSettings.video, videoSource as string);
+            }
+            source.src = `/packages/${name}/${videoSource ? videoSource : localStorage.getItem(AppearanceSettings.video)}`;
+        }
+        if (bgSource || localStorage.getItem(AppearanceSettings.image)) {
+            resetVideo();
+            resetBGImage();
+            const image = document.getElementById("nebulaImage")! as HTMLImageElement;
+            if (!localStorage.getItem(AppearanceSettings.image)) {
+                localStorage.setItem(AppearanceSettings.image, bgSource as string);
+            }
+            image.style.display = "block";
+            image.src = `/packages/${name}/${bgSource ? bgSource : localStorage.getItem(AppearanceSettings.image)}`;
+        }
+        if (payload) {
+            const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
+            if (localStorage.getItem(AppearanceSettings.stylePayload) !== payload) {
+                localStorage.setItem(AppearanceSettings.stylePayload, payload);
+                localStorage.setItem(AppearanceSettings.themeName, name as string);
+            }
+            stylesheet.href = `/packages/${name}/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
+        } else {
+            if (localStorage.getItem(AppearanceSettings.stylePayload)) {
+                const stylesheet = document.getElementById("stylesheet")! as HTMLLinkElement;
+                stylesheet.href = `/packages/${localStorage.getItem(AppearanceSettings.themeName)}/${localStorage.getItem(AppearanceSettings.stylePayload)}`;
+            }
+        }
+    }
+};
+
+export { AppearanceSettings, PluginSettings, MarketPlaceExtras, marketPlaceSettings };
--- a/src/utils/settings/marketplace/types.ts
+++ b/src/utils/settings/marketplace/types.ts
@ -0,0 +1,65 @@
+//Where all of our types live. Expect to see these exported and used in other files tons.
+type PluginType = "page" | "serviceWorker";
+type MarketplacePluginType = "plugin-page" | "plugin-sw";
+type PackageType = "theme" | MarketplacePluginType;
+
+interface Plug {
+    name: string;
+    src: string;
+    type: PluginType;
+    remove?: boolean;
+}
+interface SWPagePlugin extends Omit<Plug, "name" | "src"> {
+    host: string;
+    html: string;
+    injectTo: "head" | "body";
+}
+
+type SWPluginFunction<T extends unknown> = (args: T) => void | unknown;
+
+type Events =
+    | "abortpayment"
+    | "activate"
+    | "backgroundfetchabort"
+    | "backgroundfetchclick"
+    | "backgroundfetchfail"
+    | "backgroundfetchsuccess"
+    | "canmakepayment"
+    | "contentdelete"
+    | "cookiechange"
+    | "fetch"
+    | "install"
+    | "message"
+    | "messageerror"
+    | "notificationclick"
+    | "notificationclose"
+    | "paymentrequest"
+    | "periodicsync"
+    | "push"
+    | "pushsubscriptionchange"
+    | "sync";
+
+interface SWPlugin extends Omit<Plug, "src"> {
+    function: string | SWPluginFunction<any>;
+    events: Events[];
+}
+
+interface Package {
+    theme?: {
+        payload: string;
+        video?: string;
+        bgImage?: string;
+    };
+    plugin?: Plug;
+}
+
+export {
+    type PluginType,
+    type MarketplacePluginType,
+    type PackageType,
+    type Plug as Plugin,
+    type SWPagePlugin,
+    type SWPlugin,
+    type Package,
+    type SWPluginFunction
+};
--- a/src/utils/settings/marketplace/userTypes.ts
+++ b/src/utils/settings/marketplace/userTypes.ts
@ -1,4 +1,4 @@
-import { type SWPluginFunction as PluginFunction, type SWPagePlugin, type SWPlugin } from "./marketplace";
+import { type SWPluginFunction as PluginFunction, type SWPagePlugin, type SWPlugin } from "./types";

 interface PagePlugin extends Omit<SWPagePlugin, "type"> {}
 interface ServiceWorkerPlugin extends Omit<SWPlugin, "type"> {}
--- a/src/utils/settings/proxy.ts
+++ b/src/utils/settings/proxy.ts
@ -0,0 +1,29 @@
+//Proxy specific settings.
+import { type OpenIn, type Proxy, type SearchEngine, type Transport } from "./types";
+const ProxySettings = {
+    proxy: "nebula||proxy",
+    openIn: "nebula||open",
+    searchEngine: "nebula||searchEngine",
+    wispServerURL: "nebula||wisp",
+    transport: "nebula||transport"
+};
+
+const proxySettings = {
+    changeProxy: function (proxy: Proxy | string) {
+        localStorage.setItem(ProxySettings.proxy, proxy);
+    },
+    openIn: function (type: OpenIn | string) {
+        localStorage.setItem(ProxySettings.openIn, type);
+    },
+    setSearchEngine: function (searchEngine: SearchEngine | string) {
+        localStorage.setItem(ProxySettings.searchEngine, searchEngine);
+    },
+    setWispURL: function (server: string) {
+        localStorage.setItem(ProxySettings.wispServerURL, server);
+    },
+    setTransport: function (transport: Transport | string) {
+        localStorage.setItem(ProxySettings.transport, transport);
+    }
+};
+
+export { ProxySettings, proxySettings };
--- a/src/utils/settings/tab.ts
+++ b/src/utils/settings/tab.ts
@ -0,0 +1,83 @@
+//Tab specific settings.
+import { type AbCloaks, type TabCloaks } from "./types";
+const TabSettings = {
+    tabCloak: "nebula||tabCloak",
+    abblob: "nebula||abBlob"
+};
+
+function cloak(cloak: AbCloaks | string, redirect: string, url: string) {
+    switch (cloak) {
+        case "a:b":
+            window.location.replace(redirect);
+            const win = window.open();
+            win!.document.body.style.margin = "0";
+            win!.document.body.style.height = "100vh";
+            const iframe = win!.document.createElement("iframe");
+            iframe.style.border = "none";
+            iframe.style.width = "100%";
+            iframe.style.height = "100%";
+            iframe.style.margin = "0";
+            iframe.src = url;
+            win!.document.body.appendChild(iframe);
+            break;
+        case "blob":
+            const htmlContent = `
+                <!DOCTYPE html>
+                <html>
+                <head>
+                <style type="text/css">
+                body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
+                </style>
+                </head>
+                <body>
+                <iframe style="border: none; width: 100%; height: 100vh;" src="${window.location.href}"></iframe>
+                </body>
+                </html>
+            `;
+            window.location.replace("https://google.com");
+            const blob = new Blob([htmlContent], { type: "text/html" });
+            const blobURL = URL.createObjectURL(blob);
+            window.open(blobURL, "_blank");
+            break;
+    }
+}
+
+const tabSettings = {
+    cloakTab: function (cloak: TabCloaks | string) {
+        const faviconElement = document.getElementById("favicon") as HTMLLinkElement;
+        localStorage.setItem(TabSettings.tabCloak, cloak);
+        switch (cloak) {
+            case "google":
+                document.title = "Google";
+                faviconElement.href = "/cloaks/google.png";
+                break;
+            case "wikipedia":
+                document.title = "Wikipedia";
+                faviconElement.href = "/cloaks/wikipedia.ico";
+                break;
+            case "canvas":
+                document.title = "Dashboard";
+                faviconElement.href = "/cloaks/canvas.ico";
+                break;
+            case "classroom":
+                document.title = "Home";
+                faviconElement.href = "/cloaks/classroom.png";
+                break;
+            case "powerschool":
+                document.title = "PowerSchool";
+                faviconElement.href = "/cloaks/ps.ico";
+                break;
+            case "reset":
+                //force a reset of favicon & title
+                localStorage.setItem("nebula||tabCloak", "default");
+                window.location.reload();
+            default:
+                return;
+        }
+    },
+    abCloak: function (type: AbCloaks | string) {
+        localStorage.setItem(TabSettings.abblob, type);
+        cloak(type as AbCloaks, "https://google.com", window.location.href);
+    }
+};
+export { tabSettings, TabSettings, cloak };
--- a/src/utils/settings/types.ts
+++ b/src/utils/settings/types.ts
@ -0,0 +1,43 @@
+import {
+    type Package,
+    type PackageType,
+    type Plugin,
+    type PluginType,
+    type SWPagePlugin,
+    type SWPlugin
+} from "./marketplace/types";
+const wispUrl = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/";
+type TabCloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
+type AbCloaks = "a:b" | "blob";
+type OpenIn = "a:b" | "blob" | "direct" | "embed";
+type Proxy = "automatic" | "uv" | "rh";
+type Transport = "epoxy" | "libcurl";
+const SearchEngines: Record<string, string> = {
+    ddg: "https://duckduckgo.com/?q=%s",
+    google: "https://google.com/search?q=%s",
+    bing: "https://bing.com/search?q=%s"
+};
+type SearchEngine = "ddg" | "google" | "bing";
+const WispServerURLS: Record<string, string> = {
+    default: wispUrl,
+    ruby: "wss://ruby.rubynetwork.co/wisp/",
+    custom: localStorage.getItem("customWispUrl") as string
+};
+
+export {
+    type TabCloaks,
+    type AbCloaks,
+    type OpenIn,
+    type Proxy,
+    type Transport,
+    type PackageType,
+    type Package,
+    type PluginType,
+    type Plugin,
+    type SWPagePlugin,
+    type SWPlugin,
+    SearchEngines,
+    type SearchEngine,
+    WispServerURLS,
+    wispUrl
+};
--- a/src/utils/siteSupport.ts
+++ b/src/utils/siteSupport.ts
@ -0,0 +1,13 @@
+import type { Proxy } from "./settings";
+type ProxyChoices = Exclude<Proxy, "automatic">;
+
+const SupportedSites: Record<string, ProxyChoices> = {
+    "discord.gg": "uv",
+    "discord.com": "uv",
+    "spotify.com": "uv",
+    "spotify.link": "uv",
+    "youtube.com": "uv",
+    "youtu.be": "uv"
+};
+
+export { SupportedSites };
--- a/src/utils/storage.ts
+++ b/src/utils/storage.ts
@ -1,40 +0,0 @@
-import { log } from "./index";
-/**
-    * This class will create a new StoreManager with an appended prefix to it. The generic is there to tell you what that prefix ***is***
-    *
-    * **Note: there is already a defaultStore available! In most situations, you'll want to use that.**
-    *
-    * <code> 
-    * const newStore = new StoreManager("incog");
-    * 
-    * // Appends the prefix to the key passed. (EX: "incog||test")
-    * // Will return a string.
-    * newStore.getVal("test") 
-    * 
-    * // As stated above the prefix will automatically be appended to the key param (EX: "incog||test")
-    * newStore.setVal("test", "newVal");
-    * </code>
-*/
-class StoreManager<Prefix extends string /* This is here so I know what prefix is appended. It's inferred from the constructor */> {
-    #prefix: Prefix;
-    constructor(pref: Prefix) {
-        this.#prefix = pref;
-    }  
-    getVal(key: string): string {
-        log({ type: 'info', bg: true, prefix: true }, `Getting key: ${key} \nFull key: ${this.#prefix}||${key}`);
-        return localStorage.getItem(`${this.#prefix}||${key}`) as string;
-    }
-    setVal(key: string, val: string): void {
-        log({ type: 'info', bg: false, prefix: true }, `Setting ${key} with value: ${val}`);
-        localStorage.setItem(`${this.#prefix}||${key}`, val);
-    }
-    removeVal(key: string): void {
-        log({ type: 'info', bg: true, prefix: true }, `Removing ${this.#prefix}||${key}`);
-        localStorage.removeItem(`${this.#prefix}||${key}`);
-    }
-}
-
-//this is done so I can see the prefix used.
-const defaultStore = new StoreManager("nebula");
-
-export { StoreManager, defaultStore };
--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@ -0,0 +1,28 @@
+type ToastType = "success" | "error" | "multiline";
+type Position =
+    | "top-left"
+    | "top-middle"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right"
+    | "bottom-center";
+interface Props {
+    toastType: ToastType;
+    text: string;
+    class: string;
+    id?: string;
+    duration?: number;
+    emoji?: any;
+    position?: Position;
+}
+
+function toast(query: string) {
+    const wrapper = document.getElementById("toastwrapper") as HTMLDivElement;
+    wrapper.classList.remove("hidden");
+    //this is a really hacky solution for toast notifications LOL
+    const element = document.querySelector(query) as HTMLElement;
+    //click the element
+    element.click();
+}
+
+export { type ToastType, type Position, type Props, toast };
--- a/src/utils/values.ts
+++ b/src/utils/values.ts
@ -1,121 +0,0 @@
-import { defaultStore } from "./storage"
-
-type cloaks = "default" | "google" | "wikipedia" | "canvas" | "classroom" | "powerschool";
-
-// Where all of our values like Search Engines, WispServers & SupportedSites live.
-const SearchEngines: Record<string, string> = {
-    ddg: "https://duckduckgo.com/?q=%s",
-    google: "https://google.com/search?q=%s",
-    bing: "https://bing.com/search?q=%s"
-}
-
-const WispServers: Record<string, string> = {
-    "default": (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/",
-    "ruby": "wss://ruby.rubynetwork.co/wisp/",
-    "wisp.run": "wss://wisp.run/",
-    "custom": defaultStore.getVal("customWispUrl")
-}
-
-const SupportedSites: Record<string, "uv" | "sj"> = {
-    "discord.gg": "sj",
-    "discord.com": "sj",
-    "spotify.com": "sj",
-    "spotify.link": "sj",
-    "youtube.com": "uv",
-    "youtu.be": "uv",
-    "google.com": "uv"
-};
-
-interface SettingsVals {
-    i18n: {
-        lang: "selectedLanguage",
-        languages: {
-            en: string,
-            jp: string
-        }
-    },
-    proxy: {
-        wispServer: string,
-        proxy: {
-            key: string,
-            available: {
-                uv: string;
-                sj: string;
-                automatic: string
-            }
-        },
-        searchEngine: string,
-        transport: {
-            key: string,
-            available: { 
-                epoxy: string; 
-                libcurl: string;
-            }
-        },
-    },
-    tab: {
-        cloak: string;
-        ab: string;
-    },
-    marketPlace: {
-        themes: string;
-        plugins: string;
-        appearance: {
-            video: string;
-            image: string;
-            theme: {
-                payload: string;
-                name: string;
-            }
-        }
-    }
-}
-/**
-    * This object allows us to access things such as the wisp server url and other things that aren't just one offs
-*/
-const SettingsVals: SettingsVals = {
-    i18n: {
-        lang: "selectedLanguage",
-        languages: {
-            en: "en_US",
-            jp: "jp"
-        }
-    },
-    proxy: {
-        wispServer: "wispServer",
-        proxy: { 
-            key: "proxy",
-            available: {
-                sj: "sj",
-                uv: "uv",
-                automatic: "automatic"
-            }
-        },
-        searchEngine: "searchEngine",
-        transport: {
-            key: "transport",
-            available: {
-                epoxy: "epoxy",
-                libcurl: "libcurl"
-            }
-        }
-    },
-    tab: {
-        cloak: "cloak",
-        ab: "aboutblank"
-    },
-    marketPlace: {
-        themes: "themes",
-        plugins: "plugins",
-        appearance: {
-            video: "video",
-            image: "image",
-            theme: {
-                name: "themeName",
-                payload: "themePayload"
-            }
-        }
-    }
-}
-
-export { SearchEngines, WispServers, SupportedSites, SettingsVals, type cloaks }
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs