Monorepo missing features (#1273)

* fix tauri config * fix package patch * regen pnpm lock * use new workflow * New GH actions * Update lockfile * update scripts * Fix build script * Fix missing deps * Fix assets eslint * Update libraries lint * Fix all lint configs * update lockfile * add fmt + clippy fails * Separate App Tauri portion * fix app features * Fix lints * install tauri cli * update lockfile * corepack, fix lints * add store path * fix unused import * Fix tests * Issue templates + port over tauri release * fix actions * fix before build command * Add X86 target * Update build matrix * finalize actions * make debug build smaller * Use debug build to make cache smaller * dummy commit * change proj name * update file name * Use release builds for less space use * Remove rust cache * Readd for app build * add merge queue trigger
2024-07-09 15:17:38 -07:00
parent dab284f339
commit d1bc65c266
265 changed files with 1810 additions and 1871 deletions
--- a/apps/app-frontend/.env
+++ b/apps/app-frontend/.env
@@ -0,0 +1,3 @@
+BASE_URL=https://staging-api.modrinth.com/v2/
+BROWSER_BASE_URL=https://staging-api.modrinth.com/v2/
+BASE_URL=
--- a/apps/app-frontend/.eslintrc.cjs
+++ b/apps/app-frontend/.eslintrc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['custom/vue'],
+}
--- a/apps/app-frontend/.prettierignore
+++ b/apps/app-frontend/.prettierignore
@@ -0,0 +1 @@
+**/dist
--- a/apps/app-frontend/COPYING.md
+++ b/apps/app-frontend/COPYING.md
@@ -0,0 +1,13 @@
+# Copying
+
+The source code of the theseus repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license.
+
+## Modrinth logo
+
+The use of Modrinth branding elements, including but not limited to the wrench-in-labyrinth logo, the landing image, and any variations thereof, is strictly prohibited without explicit written permission from Rinth, Inc. This includes trademarks, logos, or other branding elements.
+
+> All rights reserved. © 2020-2023 Rinth, Inc.
+
+This includes, but may not be limited to, the following files:
+
+- theseus_gui/src-tauri/icons/\*
--- a/apps/app-frontend/LICENSE
+++ b/apps/app-frontend/LICENSE
@@ -0,0 +1,674 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 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 General Public License is a free, copyleft license for
+software and other kinds of works.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+the GNU General Public License is 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.  We, the Free Software Foundation, use the
+GNU General Public License for most of our software; it applies also to
+any other work released this way by its authors.  You can apply it to
+your programs, too.
+
+  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.
+
+  To protect your rights, we need to prevent others from denying you
+these rights or asking you to surrender the rights.  Therefore, you have
+certain responsibilities if you distribute copies of the software, or if
+you modify it: responsibilities to respect the freedom of others.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must pass on to the recipients the same
+freedoms that you received.  You must make sure that they, too, receive
+or can get the source code.  And you must show them these terms so they
+know their rights.
+
+  Developers that use the GNU GPL protect your rights with two steps:
+(1) assert copyright on the software, and (2) offer you this License
+giving you legal permission to copy, distribute and/or modify it.
+
+  For the developers' and authors' protection, the GPL clearly explains
+that there is no warranty for this free software.  For both users' and
+authors' sake, the GPL requires that modified versions be marked as
+changed, so that their problems will not be attributed erroneously to
+authors of previous versions.
+
+  Some devices are designed to deny users access to install or run
+modified versions of the software inside them, although the manufacturer
+can do so.  This is fundamentally incompatible with the aim of
+protecting users' freedom to change the software.  The systematic
+pattern of such abuse occurs in the area of products for individuals to
+use, which is precisely where it is most unacceptable.  Therefore, we
+have designed this version of the GPL to prohibit the practice for those
+products.  If such problems arise substantially in other domains, we
+stand ready to extend this provision to those domains in future versions
+of the GPL, as needed to protect the freedom of users.
+
+  Finally, every program is threatened constantly by software patents.
+States should not allow patents to restrict development and use of
+software on general-purpose computers, but in those that do, we wish to
+avoid the special danger that patents applied to a free program could
+make it effectively proprietary.  To prevent this, the GPL assures that
+patents cannot be used to render the program non-free.
+
+  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 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. Use with the GNU Affero General Public License.
+
+  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 Affero 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 special requirements of the GNU Affero General Public License,
+section 13, concerning interaction through a network will apply to the
+combination as such.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU 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 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 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 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 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 General Public License for more details.
+
+    You should have received a copy of the GNU 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 the program does terminal interaction, make it output a short
+notice like this when it starts in an interactive mode:
+
+    <program>  Copyright (C) <year>  <name of author>
+    This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, your program's commands
+might be different; for a GUI interface, you would use an "about box".
+
+  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 GPL, see
+<https://www.gnu.org/licenses/>.
+
+  The GNU General Public License does not permit incorporating your program
+into proprietary programs.  If your program is a subroutine library, you
+may consider it more useful to permit linking proprietary applications with
+the library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.  But first, please read
+<https://www.gnu.org/licenses/why-not-lgpl.html>.
--- a/apps/app-frontend/index.html
+++ b/apps/app-frontend/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Modrinth App</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/apps/app-frontend/package.json
+++ b/apps/app-frontend/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@modrinth/app-frontend",
+  "private": true,
+  "version": "0.7.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . && prettier --check .",
+    "fix": "eslint . --fix && prettier --write ."
+  },
+  "dependencies": {
+    "@modrinth/assets": "workspace:*",
+    "@modrinth/ui": "workspace:*",
+    "@modrinth/utils": "workspace:*",
+    "@tauri-apps/api": "^1.5.3",
+    "@vintl/vintl": "^4.4.1",
+    "dayjs": "^1.11.10",
+    "floating-vue": "^5.2.2",
+    "mixpanel-browser": "^2.49.0",
+    "ofetch": "^1.3.4",
+    "omorphia": "^0.4.41",
+    "pinia": "^2.1.7",
+    "tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
+    "vite-svg-loader": "^5.1.0",
+    "vue": "^3.4.21",
+    "vue-multiselect": "3.0.0-beta.3",
+    "vue-router": "4.3.0",
+    "vue-virtual-scroller": "2.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^1.5.11",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "eslint": "^8.57.0",
+    "eslint-config-custom": "workspace:*",
+    "prettier": "^3.2.5",
+    "sass": "^1.74.1",
+    "tsconfig": "workspace:*",
+    "vite": "^5.2.8"
+  },
+  "packageManager": "pnpm@9.4.0"
+}
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -0,0 +1,664 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
+import {
+  HomeIcon,
+  SearchIcon,
+  LibraryIcon,
+  PlusIcon,
+  SettingsIcon,
+  FileIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { Button, Notifications, Card } from '@modrinth/ui'
+import { useLoading, useTheming } from '@/store/state'
+import AccountsCard from '@/components/ui/AccountsCard.vue'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import { get } from '@/helpers/settings'
+import Breadcrumbs from '@/components/ui/Breadcrumbs.vue'
+import RunningAppBar from '@/components/ui/RunningAppBar.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
+import ErrorModal from '@/components/ui/ErrorModal.vue'
+import ModrinthLoadingIndicator from '@/components/modrinth-loading-indicator'
+import { handleError, useNotifications } from '@/store/notifications.js'
+import { offline_listener, command_listener, warning_listener } from '@/helpers/events.js'
+import { MinimizeIcon, MaximizeIcon, ChatIcon } from '@/assets/icons'
+import { type } from '@tauri-apps/api/os'
+import { appWindow } from '@tauri-apps/api/window'
+import { isDev, getOS, isOffline, showLauncherLogsFolder } from '@/helpers/utils.js'
+import {
+  mixpanel_track,
+  mixpanel_init,
+  mixpanel_opt_out_tracking,
+  mixpanel_is_loaded,
+} from '@/helpers/mixpanel'
+import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
+import { getVersion } from '@tauri-apps/api/app'
+import { window as TauriWindow } from '@tauri-apps/api'
+import { TauriEvent } from '@tauri-apps/api/event'
+import { await_sync, check_safe_loading_bars_complete } from './helpers/state'
+import { confirm } from '@tauri-apps/api/dialog'
+import URLConfirmModal from '@/components/ui/URLConfirmModal.vue'
+import OnboardingScreen from '@/components/ui/tutorial/OnboardingScreen.vue'
+import { install_from_file } from './helpers/pack'
+import { useError } from '@/store/error.js'
+
+const themeStore = useTheming()
+const urlModal = ref(null)
+const isLoading = ref(true)
+
+const offline = ref(false)
+const showOnboarding = ref(false)
+const nativeDecorations = ref(false)
+
+const onboardingVideo = ref()
+
+const failureText = ref(null)
+const os = ref('')
+
+defineExpose({
+  initialize: async () => {
+    isLoading.value = false
+    const {
+      native_decorations,
+      theme,
+      opt_out_analytics,
+      collapsed_navigation,
+      advanced_rendering,
+      fully_onboarded,
+    } = await get()
+    // video should play if the user is not on linux, and has not onboarded
+    os.value = await getOS()
+    const dev = await isDev()
+    const version = await getVersion()
+    showOnboarding.value = !fully_onboarded
+
+    nativeDecorations.value = native_decorations
+    if (os.value !== 'MacOS') appWindow.setDecorations(native_decorations)
+
+    themeStore.setThemeState(theme)
+    themeStore.collapsedNavigation = collapsed_navigation
+    themeStore.advancedRendering = advanced_rendering
+
+    mixpanel_init('014c7d6a336d0efaefe3aca91063748d', { debug: dev, persistence: 'localStorage' })
+    if (opt_out_analytics) {
+      mixpanel_opt_out_tracking()
+    }
+    mixpanel_track('Launched', { version, dev, fully_onboarded })
+
+    if (!dev) document.addEventListener('contextmenu', (event) => event.preventDefault())
+
+    if ((await type()) === 'Darwin') {
+      document.getElementsByTagName('html')[0].classList.add('mac')
+    } else {
+      document.getElementsByTagName('html')[0].classList.add('windows')
+    }
+
+    offline.value = await isOffline()
+    await offline_listener((b) => {
+      offline.value = b
+    })
+
+    await warning_listener((e) =>
+      notificationsWrapper.value.addNotification({
+        title: 'Warning',
+        text: e.message,
+        type: 'warn',
+      }),
+    )
+
+    if (showOnboarding.value) {
+      onboardingVideo.value.play()
+    }
+  },
+  failure: async (e) => {
+    isLoading.value = false
+    failureText.value = e
+    os.value = await getOS()
+  },
+})
+
+const confirmClose = async () => {
+  const confirmed = await confirm(
+    'An action is currently in progress. Are you sure you want to exit?',
+    {
+      title: 'Modrinth',
+      type: 'warning',
+    },
+  )
+  return confirmed
+}
+
+const handleClose = async () => {
+  if (failureText.value != null) {
+    await TauriWindow.getCurrent().close()
+    return
+  }
+  // State should respond immeiately if it's safe to close
+  // If not, code is deadlocked or worse, so wait 2 seconds and then ask the user to confirm closing
+  // (Exception: if the user is changing config directory, which takes control of the state, and it's taking a significant amount of time for some reason)
+  const isSafe = await Promise.race([
+    check_safe_loading_bars_complete(),
+    new Promise((r) => setTimeout(r, 2000)),
+  ])
+  if (!isSafe) {
+    const response = await confirmClose()
+    if (!response) {
+      return
+    }
+  }
+  await await_sync()
+  await TauriWindow.getCurrent().close()
+}
+
+const openSupport = async () => {
+  window.__TAURI_INVOKE__('tauri', {
+    __tauriModule: 'Shell',
+    message: {
+      cmd: 'open',
+      path: 'https://discord.gg/modrinth',
+    },
+  })
+}
+
+TauriWindow.getCurrent().listen(TauriEvent.WINDOW_CLOSE_REQUESTED, async () => {
+  await handleClose()
+})
+
+const router = useRouter()
+router.afterEach((to, from, failure) => {
+  if (mixpanel_is_loaded()) {
+    mixpanel_track('PageView', { path: to.path, fromPath: from.path, failed: failure })
+  }
+})
+const route = useRoute()
+const isOnBrowse = computed(() => route.path.startsWith('/browse'))
+
+const loading = useLoading()
+
+const notifications = useNotifications()
+const notificationsWrapper = ref()
+
+watch(notificationsWrapper, () => {
+  notifications.setNotifs(notificationsWrapper.value)
+})
+
+const error = useError()
+const errorModal = ref()
+
+watch(errorModal, () => {
+  error.setErrorModal(errorModal.value)
+})
+
+document.querySelector('body').addEventListener('click', function (e) {
+  let target = e.target
+  while (target != null) {
+    if (target.matches('a')) {
+      if (
+        target.href &&
+        ['http://', 'https://', 'mailto:', 'tel:'].some((v) => target.href.startsWith(v)) &&
+        !target.classList.contains('router-link-active') &&
+        !target.href.startsWith('http://localhost') &&
+        !target.href.startsWith('https://tauri.localhost')
+      ) {
+        window.__TAURI_INVOKE__('tauri', {
+          __tauriModule: 'Shell',
+          message: {
+            cmd: 'open',
+            path: target.href,
+          },
+        })
+      }
+      e.preventDefault()
+      break
+    }
+    target = target.parentElement
+  }
+})
+
+document.querySelector('body').addEventListener('auxclick', function (e) {
+  // disables middle click -> new tab
+  if (e.button === 1) {
+    e.preventDefault()
+    // instead do a left click
+    const event = new MouseEvent('click', {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+    })
+    e.target.dispatchEvent(event)
+  }
+})
+
+const accounts = ref(null)
+
+command_listener(async (e) => {
+  if (e.event === 'RunMRPack') {
+    // RunMRPack should directly install a local mrpack given a path
+    if (e.path.endsWith('.mrpack')) {
+      await install_from_file(e.path).catch(handleError)
+      mixpanel_track('InstanceCreate', {
+        source: 'CreationModalFileDrop',
+      })
+    }
+  } else {
+    // Other commands are URL-based (deep linking)
+    urlModal.value.show(e)
+  }
+})
+</script>
+
+<template>
+  <div v-if="failureText" class="failure dark-mode">
+    <div class="appbar-failure dark-mode">
+      <Button v-if="os != 'MacOS'" icon-only @click="TauriWindow.getCurrent().close()">
+        <XIcon />
+      </Button>
+    </div>
+    <div class="error-view dark-mode">
+      <Card class="error-text">
+        <div class="label">
+          <h3>
+            <span class="label__title size-card-header">Failed to initialize</span>
+          </h3>
+        </div>
+        <div class="error-div">
+          Modrinth App failed to load correctly. This may be because of a corrupted file, or because
+          the app is missing crucial files.
+        </div>
+        <div class="error-div">You may be able to fix it one of the following ways:</div>
+        <ul class="error-div">
+          <li>Ennsuring you are connected to the internet, then try restarting the app.</li>
+          <li>Redownloading the app.</li>
+        </ul>
+        <div class="error-div">
+          If it still does not work, you can seek support using the link below. You should provide
+          the following error, as well as any recent launcher logs in the folder below.
+        </div>
+        <div class="error-div">The following error was provided:</div>
+
+        <Card class="error-message">
+          {{ failureText.message }}
+        </Card>
+
+        <div class="button-row push-right">
+          <Button @click="showLauncherLogsFolder"><FileIcon />Open launcher logs</Button>
+
+          <Button @click="openSupport"><ChatIcon />Get support</Button>
+        </div>
+      </Card>
+    </div>
+  </div>
+  <SplashScreen v-else-if="isLoading" app-loading />
+  <OnboardingScreen v-else-if="showOnboarding" :finish="() => (showOnboarding = false)" />
+  <div v-else class="container">
+    <div class="nav-container">
+      <div class="nav-section">
+        <suspense>
+          <AccountsCard ref="accounts" mode="small" />
+        </suspense>
+        <div class="pages-list">
+          <RouterLink v-tooltip="'Home'" to="/" class="btn icon-only collapsed-button">
+            <HomeIcon />
+          </RouterLink>
+          <RouterLink
+            v-tooltip="'Browse'"
+            to="/browse/modpack"
+            class="btn icon-only collapsed-button"
+            :class="{
+              'router-link-active': isOnBrowse,
+            }"
+          >
+            <SearchIcon />
+          </RouterLink>
+          <RouterLink v-tooltip="'Library'" to="/library" class="btn icon-only collapsed-button">
+            <LibraryIcon />
+          </RouterLink>
+          <Suspense>
+            <InstanceCreationModal ref="installationModal" />
+          </Suspense>
+        </div>
+      </div>
+      <div class="settings pages-list">
+        <Button
+          v-tooltip="'Create profile'"
+          class="sleek-primary collapsed-button"
+          icon-only
+          :disabled="offline"
+          @click="() => $refs.installationModal.show()"
+        >
+          <PlusIcon />
+        </Button>
+        <RouterLink v-tooltip="'Settings'" to="/settings" class="btn icon-only collapsed-button">
+          <SettingsIcon />
+        </RouterLink>
+      </div>
+    </div>
+    <div class="view">
+      <div class="appbar-row">
+        <div data-tauri-drag-region class="appbar">
+          <section class="navigation-controls">
+            <Breadcrumbs data-tauri-drag-region />
+          </section>
+          <section class="mod-stats">
+            <Suspense>
+              <RunningAppBar />
+            </Suspense>
+          </section>
+        </div>
+        <section v-if="!nativeDecorations" class="window-controls">
+          <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
+            <MinimizeIcon />
+          </Button>
+          <Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
+            <MaximizeIcon />
+          </Button>
+          <Button
+            class="titlebar-button close"
+            icon-only
+            @click="
+              () => {
+                saveWindowState(StateFlags.ALL)
+                handleClose()
+              }
+            "
+          >
+            <XIcon />
+          </Button>
+        </section>
+      </div>
+      <div class="router-view">
+        <ModrinthLoadingIndicator
+          offset-height="var(--appbar-height)"
+          offset-width="var(--sidebar-width)"
+        />
+        <RouterView v-slot="{ Component }">
+          <template v-if="Component">
+            <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
+              <component :is="Component"></component>
+            </Suspense>
+          </template>
+        </RouterView>
+      </div>
+    </div>
+  </div>
+  <URLConfirmModal ref="urlModal" />
+  <Notifications ref="notificationsWrapper" />
+  <ErrorModal ref="errorModal" />
+</template>
+
+<style lang="scss" scoped>
+.sleek-primary {
+  background-color: var(--color-brand-highlight);
+  transition: all ease-in-out 0.1s;
+}
+
+.navigation-controls {
+  flex-grow: 1;
+  width: min-content;
+}
+
+.appbar-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.window-controls {
+  z-index: 20;
+  display: none;
+  flex-direction: row;
+  align-items: center;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+    border-radius: 0;
+    height: 3.25rem;
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+
+.container {
+  --appbar-height: 3.25rem;
+  --sidebar-width: 4.5rem;
+
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  .view {
+    width: calc(100% - var(--sidebar-width));
+    background-color: var(--color-raised-bg);
+
+    .appbar {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+      background: var(--color-raised-bg);
+      text-align: center;
+      padding: var(--gap-md);
+      height: 3.25rem;
+      gap: var(--gap-sm);
+      //no select
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .router-view {
+      width: 100%;
+      height: calc(100% - 3.125rem);
+      overflow: auto;
+      overflow-x: hidden;
+      background-color: var(--color-bg);
+      border-top-left-radius: var(--radius-xl);
+    }
+  }
+}
+
+.failure {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: var(--color-bg);
+
+  .appbar-failure {
+    display: flex; /* Change to flex to align items horizontally */
+    justify-content: flex-end; /* Align items to the right */
+    height: 3.25rem;
+    //no select
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .error-view {
+    display: flex; /* Change to flex to align items horizontally */
+    justify-content: center;
+    width: 100%;
+    background-color: var(--color-bg);
+
+    color: var(--color-base);
+
+    .card {
+      background-color: var(--color-raised-bg);
+    }
+
+    .error-text {
+      display: flex;
+      max-width: 60%;
+      gap: 0.25rem;
+      flex-direction: column;
+
+      .error-div {
+        // spaced out
+        margin: 0.5rem;
+      }
+
+      .error-message {
+        margin: 0.5rem;
+        background-color: var(--color-button-bg);
+      }
+    }
+  }
+}
+
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+  padding: var(--gap-md);
+}
+
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 0.5rem;
+
+  a {
+    display: flex;
+    align-items: center;
+    word-spacing: 3px;
+    background: inherit;
+    transition: all ease-in-out 0.1s;
+    color: var(--color-base);
+    box-shadow: none;
+
+    &.router-link-active {
+      color: var(--color-contrast);
+      background: var(--color-button-bg);
+      box-shadow: var(--shadow-floating);
+    }
+
+    &:hover {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+      text-decoration: none;
+    }
+  }
+
+  &.primary {
+    color: var(--color-accent-contrast);
+    background-color: var(--color-brand);
+  }
+}
+
+.collapsed-button {
+  height: 3rem !important;
+  width: 3rem !important;
+  padding: 0.75rem;
+  border-radius: var(--radius-md);
+  box-shadow: none;
+
+  svg {
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    max-width: 1.5rem !important;
+    max-height: 1.5rem !important;
+  }
+}
+
+.instance-list {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 70%;
+  margin: 0.4rem;
+
+  p:nth-child(1) {
+    font-size: 0.6rem;
+  }
+
+  & > p {
+    color: var(--color-base);
+    margin: 0.8rem 0;
+    font-size: 0.7rem;
+    line-height: 0.8125rem;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+}
+
+.user-section {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 4.375rem;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    text-align: left;
+    margin-left: 0.5rem;
+  }
+
+  .username {
+    margin-bottom: 0.3rem;
+    font-weight: 400;
+    line-height: 1.25rem;
+    color: var(--color-contrast);
+  }
+
+  a {
+    font-weight: 400;
+    color: var(--color-secondary);
+  }
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.video {
+  margin-top: 2.25rem;
+  width: 100vw;
+  height: calc(100vh - 2.25rem);
+  object-fit: cover;
+  border-radius: var(--radius-md);
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--gap-md);
+
+  .transparent {
+    padding: var(--gap-sm) 0;
+  }
+}
+</style>
--- a/apps/app-frontend/src/assets/external/atlauncher.svg
+++ b/apps/app-frontend/src/assets/external/atlauncher.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 2084 2084" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><path d="M1041.67 81.38l272.437 159.032-825.246 478.685-272.438-157.971L1041.67 81.38zm87.28 371.074l274.024-159.032 463.937 271.945-276.14 153.73-461.821-266.643z" fill="#3b3b3b"/><path d="M216.42 561.126v961.081l825.247 479.746V1684.95l-551.222-321.774-1.587-644.079L216.42 561.126z" fill="#2e2e2e"/><path d="M1866.91 1517.97l-825.246 483.986v-317.003l550.164-320.714-1.058-645.139 276.14-153.73v952.6z" fill="#333"/><path d="M1590.77 719.097l-549.106 310.112v165.393l214.246-122.984v488.757l138.599-81.106V989.451l196.261-115.563V719.097z" fill="#89c236"/><path d="M488.858 719.097l1.587 644.079 152.353 90.118v-198.79l230.645 132.527v199.319l168.753 98.6v-655.741L488.858 719.097zm383.527 531.166l-227.471-131.466v-150.02l227.471 127.225v154.261z" fill="#7baf31"/></g></svg>
--- a/apps/app-frontend/src/assets/external/bmac.svg
+++ b/apps/app-frontend/src/assets/external/bmac.svg
--- a/apps/app-frontend/src/assets/external/discord.svg
+++ b/apps/app-frontend/src/assets/external/discord.svg
@@ -0,0 +1,10 @@
+<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="71" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/apps/app-frontend/src/assets/external/gdlauncher.png
+++ b/apps/app-frontend/src/assets/external/gdlauncher.png
--- a/apps/app-frontend/src/assets/external/github.svg
+++ b/apps/app-frontend/src/assets/external/github.svg
@@ -0,0 +1,4 @@
+<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+  <path
+    d="m16 .396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183.803.151 1.093-.344 1.093-.772 0-.38-.009-1.385-.015-2.719-4.453.964-5.391-2.151-5.391-2.151-.729-1.844-1.781-2.339-1.781-2.339-1.448-.989.115-.968.115-.968 1.604.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328.14-1.031.557-1.74 1.011-2.135-3.552-.401-7.287-1.776-7.287-7.907 0-1.751.62-3.177 1.645-4.297-.177-.401-.719-2.031.141-4.235 0 0 1.339-.427 4.4 1.641 1.281-.355 2.641-.532 4-.541 1.36.009 2.719.187 4 .541 3.043-2.068 4.381-1.641 4.381-1.641.859 2.204.317 3.833.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891.556.479 1.077 1.464 1.077 2.959 0 2.14-.02 3.864-.02 4.385 0 .416.28.916 1.104.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"/>
+</svg>
--- a/apps/app-frontend/src/assets/external/gitlab.svg
+++ b/apps/app-frontend/src/assets/external/gitlab.svg
@@ -0,0 +1,10 @@
+<svg
+  data-v-8c2610d6=""
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  fill="currentColor"
+  viewBox="0 0 380 380"
+  style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;"
+>
+  <path d="m282.83 170.73-.27-.69-26.14-68.22a6.815 6.815 0 0 0-2.69-3.24 7.013 7.013 0 0 0-8 .43 6.996 6.996 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.864 6.864 0 0 0-2.32-3.53 7.013 7.013 0 0 0-8-.43 6.867 6.867 0 0 0-2.69 3.24L97.44 170l-.26.69c-7.708 20.139-1.115 43.113 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.088 8.088 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08c17.175-12.988 23.755-35.921 16.08-56.04Z" transform="translate(-186.013 -186.006) scale(1.97904)" style="fill-rule: nonzero;"/>
+</svg>
--- a/apps/app-frontend/src/assets/external/google.svg
+++ b/apps/app-frontend/src/assets/external/google.svg
@@ -0,0 +1,22 @@
+<svg
+  data-v-8c2610d6=""
+  xmlns="http://www.w3.org/2000/svg"
+  xml:space="preserve"
+  viewBox="0 0 100 100"
+  style="fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 2;"><circle cx="50" cy="50" r="50" style="fill:#fff;"
+/>
+  <g transform="translate(14.39 14.302) scale(.09916)">
+    <path
+      d="M-4117.16-2597.44v139.42h193.74c-8.51 44.84-34.04 82.8-72.33 108.33l116.84 90.66c68.07-62.84 107.35-155.13 107.35-264.77 0-25.53-2.29-50.07-6.55-73.63l-339.05-.01Z"
+      style="fill:#4285f4;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+    <path
+      d="m-4318.92-2463.46-26.35 20.17-93.28 72.65c59.24 117.49 180.65 198.66 321.38 198.66 97.2 0 178.69-32.07 238.25-87.05l-116.83-90.66c-32.08 21.6-72.99 34.69-121.42 34.69-93.6 0-173.13-63.16-201.6-148.25l-.15-.21Z"
+      style="fill:#34a853;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+    <path
+      d="M-4438.55-2693.33c-24.54 48.44-38.61 103.09-38.61 161.34 0 58.26 14.07 112.91 38.61 161.35 0 .32 119.79-92.95 119.79-92.95-7.2-21.6-11.46-44.5-11.46-68.4 0-23.89 4.26-46.8 11.46-68.4l-119.79-92.94Z"
+      style="fill:#fbbc05;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+    <path
+      d="M-4117.16-2748.64c53.02 0 100.14 18.33 137.78 53.67l103.09-103.09c-62.51-58.25-143.67-93.93-240.87-93.93-140.73 0-262.15 80.84-321.39 198.66l119.79 92.95c28.47-85.09 108-148.26 201.6-148.26Z"
+      style="fill:#ea4335;fill-rule:nonzero;" transform="translate(4477.16 2891.98)"/>
+  </g>
+</svg>
--- a/apps/app-frontend/src/assets/external/index.js
+++ b/apps/app-frontend/src/assets/external/index.js
@@ -0,0 +1,18 @@
+export { default as BuyMeACoffeeIcon } from './bmac.svg'
+export { default as DiscordIcon } from './discord.svg'
+export { default as KoFiIcon } from './kofi.svg'
+export { default as PatreonIcon } from './patreon.svg'
+export { default as PaypalIcon } from './paypal.svg'
+export { default as OpenCollectiveIcon } from './opencollective.svg'
+export { default as TwitterIcon } from './twitter.svg'
+export { default as GithubIcon } from './github.svg'
+export { default as MastodonIcon } from './mastodon.svg'
+export { default as RedditIcon } from './reddit.svg'
+export { default as GoogleIcon } from './google.svg'
+export { default as MicrosoftIcon } from './microsoft.svg'
+export { default as SteamIcon } from './steam.svg'
+export { default as GitLabIcon } from './gitlab.svg'
+export { default as ATLauncherIcon } from './atlauncher.svg'
+export { default as GDLauncherIcon } from './gdlauncher.png'
+export { default as MultiMCIcon } from './multimc.webp'
+export { default as PrismIcon } from './prism.svg'
--- a/apps/app-frontend/src/assets/external/kofi.svg
+++ b/apps/app-frontend/src/assets/external/kofi.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ko-fi</title><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" fill="currentColor" /></svg>
--- a/apps/app-frontend/src/assets/external/mastodon.svg
+++ b/apps/app-frontend/src/assets/external/mastodon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"/></svg>
--- a/apps/app-frontend/src/assets/external/microsoft.svg
+++ b/apps/app-frontend/src/assets/external/microsoft.svg
@@ -0,0 +1,6 @@
+<svg data-v-8c2610d6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
+  <path fill="#f25022" d="M1 1h9v9H1z"/>
+  <path fill="#00a4ef" d="M1 11h9v9H1z"/>
+  <path fill="#7fba00" d="M11 1h9v9h-9z"/>
+  <path fill="#ffb900" d="M11 11h9v9h-9z"/>
+</svg>
--- a/apps/app-frontend/src/assets/external/multimc.webp
+++ b/apps/app-frontend/src/assets/external/multimc.webp
--- a/apps/app-frontend/src/assets/external/opencollective.svg
+++ b/apps/app-frontend/src/assets/external/opencollective.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Open Collective</title><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"/></svg>
--- a/apps/app-frontend/src/assets/external/patreon.svg
+++ b/apps/app-frontend/src/assets/external/patreon.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Patreon</title><path d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z" fill="currentColor"/></svg>
--- a/apps/app-frontend/src/assets/external/paypal.svg
+++ b/apps/app-frontend/src/assets/external/paypal.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z" fill="currentColor"/></svg>
--- a/apps/app-frontend/src/assets/external/prism.svg
+++ b/apps/app-frontend/src/assets/external/prism.svg
@@ -0,0 +1,80 @@
+<svg
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg"
+>
+  <title id="title261">Prism Launcher Logo</title>
+  <defs id="defs3603" />
+  <g id="layer1">
+    <g
+       id="g531"
+       transform="matrix(0.1353646,0,0,0.1353646,15.301582,0.52916663)" />
+    <g
+       id="g397">
+      <path
+         style="fill:#99cd61;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.3500002,6.350001 Z"
+         id="path7899" />
+      <path
+         id="path3228"
+         style="fill:#df6277;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 0.52916667 L 3.8292236 4.8947917 L 6.35 6.35 L 8.8702596 4.8947917 L 8.9798136 1.7952393 C 7.828708 1.1306481 6.6410414 0.52916667 6.35 0.52916667 z " />
+      <path
+         id="path2659"
+         style="fill:#fb9168;fill-opacity:1;stroke-width:0.264583"
+         d="M 8.9798136 1.7952393 L 6.35 6.35 L 8.8702596 7.8052083 L 11.391036 3.4395833 C 11.245515 3.1875341 10.130919 2.4598305 8.9798136 1.7952393 z " />
+      <path
+         id="path2708"
+         style="fill:#f3db6c;fill-opacity:1;stroke-width:0.264583"
+         d="M 11.391036 3.4395833 L 6.35 6.35 L 8.8702596 7.8052083 L 11.609111 6.35 C 11.609111 5.0208177 11.536557 3.6916326 11.391036 3.4395833 z " />
+      <path
+         id="path1737"
+         style="fill:#7ab392;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 6.35 L 6.35 9.2604167 L 11.391036 9.2604167 C 11.536557 9.0083674 11.60911 7.6791823 11.609111 6.35 L 6.35 6.35 z " />
+      <path
+         id="path2937"
+         style="fill:#4b7cbc;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 6.35 L 6.35 9.2604167 L 8.9798136 10.904761 C 10.130919 10.24017 11.245515 9.5124659 11.391036 9.2604167 L 6.35 6.35 z " />
+      <path
+         id="path3117"
+         style="fill:#6f488c;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 6.35 L 3.8292236 7.8052083 L 6.35 12.170833 C 6.6410414 12.170833 7.8287079 11.569352 8.9798136 10.904761 L 6.35 6.35 z " />
+      <path
+         id="path2010"
+         style="fill:#4d3f33;fill-opacity:1;stroke-width:0.264583"
+         d="M 3.8292236 4.8947917 L 1.308964 9.2604167 C 1.6000054 9.7645152 5.7679172 12.170833 6.35 12.170833 L 6.35 6.35 L 3.8292236 4.8947917 z " />
+      <path
+         id="path1744"
+         style="fill:#7a573b;fill-opacity:1;stroke-width:0.264583"
+         d="M 1.308964 3.4395833 C 1.0179226 3.9436818 1.0179227 8.7563182 1.308964 9.2604167 L 6.35 6.35 L 6.35 3.4395833 L 1.308964 3.4395833 z " />
+      <path
+         id="path1739"
+         style="fill:#99cd61;fill-opacity:1;stroke-width:0.264583"
+         d="M 6.35 0.52916667 C 5.7679172 0.52916665 1.6000054 2.9354849 1.308964 3.4395833 L 6.35 6.35 L 6.35 0.52916667 z " />
+      <g
+         id="g379">
+        <g
+           id="g1657"
+           transform="matrix(0.87999988,0,0,0.87999988,-10.906495,-1.242093)">
+          <g
+             id="g7651"
+             transform="translate(13.259961,2.2775894)">
+            <path
+               id="path6659"
+               style="fill:#ffffff;stroke-width:0.264583"
+               d="m 6.3498163,2.9393223 c -0.3410461,0 -2.782726,1.4098777 -2.9532491,1.7052323 L 6.3498163,9.7602513 9.3035983,4.6445546 C 9.1330753,4.3492 6.6908624,2.9393223 6.3498163,2.9393223 Z"
+               transform="matrix(0.96974817,0,0,0.96974817,0.19209885,0.19209792)" />
+          </g>
+          <path
+             id="path461"
+             style="fill:#dfdfdf;fill-opacity:1;stroke-width:0.264583"
+             d="m 16.745875,6.9737355 2.863908,4.9609385 c 0.330729,0 2.69906,-1.367226 2.864424,-1.653646 0.165365,-0.2864204 0.165365,-3.0208729 0,-3.3072925 l -2.864424,1.6536459 z" />
+        </g>
+        <path
+           id="path5065"
+           style="fill:#d6d2d2;fill-opacity:1;stroke-width:0.264583"
+           d="m 3.8298625,4.8947933 c -0.1455111,0.2520549 -0.1455304,2.6583729 0,2.9104166 0.1455304,0.2520438 2.2292181,1.4552195 2.5202596,1.4552084 V 6.3500016 Z" />
+      </g>
+    </g>
+  </g>
+</svg>
--- a/apps/app-frontend/src/assets/external/reddit.svg
+++ b/apps/app-frontend/src/assets/external/reddit.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 100 100" height="512" viewBox="0 0 100 100" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_x33_2.Reddit"><path id="Icon_69_" d="m90 50.6c-.2-4.8-4.2-8.6-9.1-8.5-2.2.1-4.2 1-5.7 2.4-6.8-4.7-14.9-7.2-23.2-7.4l3.9-18.7 12.9 2.6c.4 3.3 3.3 5.7 6.6 5.3s5.7-3.3 5.3-6.6-3.3-5.7-6.6-5.3c-1.9.2-3.6 1.3-4.5 2.9l-14.7-2.9c-1-.2-2 .4-2.2 1.4l-4.4 20.9c-8.4.1-16.5 2.7-23.5 7.4-3.5-3.3-9.1-3.2-12.4.4-3.3 3.5-3.2 9.1.4 12.4.7.6 1.5 1.2 2.4 1.6-.1.9-.1 1.8 0 2.6 0 13.5 15.7 24.5 35.1 24.5s35.1-10.9 35.1-24.5c.1-.9.1-1.8 0-2.6 2.8-1.4 4.7-4.5 4.6-7.9zm-60.3 6.1c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm35 16.6c-4.3 3.2-9.5 4.9-14.8 4.6-5.3.2-10.6-1.4-14.8-4.6-.6-.7-.5-1.7.2-2.3.6-.5 1.4-.5 2.1 0 3.6 2.6 8 4 12.5 3.8 4.5.2 8.9-1 12.6-3.7.7-.6 1.7-.6 2.4 0 .6.7.6 1.7 0 2.4v-.2zm-1-10.3c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6c.1 3.3-2.4 6.1-5.8 6.2-.1 0-.2 0-.3 0z"/></g></svg>
--- a/apps/app-frontend/src/assets/external/steam.svg
+++ b/apps/app-frontend/src/assets/external/steam.svg
@@ -0,0 +1,14 @@
+<svg
+  data-v-8c2610d6=""
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="currentColor"
+  class="bi bi-steam"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006 4.304 1.769A2.198 2.198 0 0 1 5.62 8.88l1.96-2.844-.001-.04a3.046 3.046 0 0 1 3.042-3.043 3.046 3.046 0 0 1 3.042 3.043 3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11 2.217 2.217 0 0 1-1.312-1.568L.33 10.333Z"/>
+  <path
+    d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165 1.705 1.705 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029 2.03 2.03 0 0 0 2.027-2.029 2.03 2.03 0 0 0-2.027-2.027 2.03 2.03 0 0 0-2.027 2.027Zm2.03-1.527a1.524 1.524 0 1 1-.002 3.048 1.524 1.524 0 0 1 .002-3.048Z"/>
+</svg>
--- a/apps/app-frontend/src/assets/external/twitter.svg
+++ b/apps/app-frontend/src/assets/external/twitter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
--- a/apps/app-frontend/src/assets/icons/add-project.svg
+++ b/apps/app-frontend/src/assets/icons/add-project.svg
--- a/apps/app-frontend/src/assets/icons/arrow-left-right.svg
+++ b/apps/app-frontend/src/assets/icons/arrow-left-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>
--- a/apps/app-frontend/src/assets/icons/bug.svg
+++ b/apps/app-frontend/src/assets/icons/bug.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug"><rect width="8" height="14" x="8" y="6" rx="4"/><path d="m19 7-3 2"/><path d="m5 7 3 2"/><path d="m19 19-3-2"/><path d="m5 19 3-2"/><path d="M20 13h-4"/><path d="M4 13h4"/><path d="m10 4 1 2"/><path d="m14 4-1 2"/></svg>
--- a/apps/app-frontend/src/assets/icons/index.js
+++ b/apps/app-frontend/src/assets/icons/index.js
@@ -0,0 +1,14 @@
+export { default as ServerIcon } from './server.svg'
+export { default as MinimizeIcon } from './minimize.svg'
+export { default as MaximizeIcon } from './maximize.svg'
+export { default as SwapIcon } from './arrow-left-right.svg'
+export { default as ToggleIcon } from './toggle.svg'
+export { default as PackageIcon } from './package.svg'
+export { default as VersionIcon } from './milestone.svg'
+export { default as MoreIcon } from './more.svg'
+export { default as TextInputIcon } from './text-cursor-input.svg'
+export { default as AddProjectImage } from './add-project.svg'
+export { default as NewInstanceImage } from './new-instance.svg'
+export { default as MenuIcon } from './menu.svg'
+export { default as BugIcon } from './bug.svg'
+export { default as ChatIcon } from './messages-square.svg'
--- a/apps/app-frontend/src/assets/icons/maximize.svg
+++ b/apps/app-frontend/src/assets/icons/maximize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scaling"><path d="M21 3 9 15"/><path d="M12 3H3v18h18v-9"/><path d="M16 3h5v5"/><path d="M14 15H9v-5"/></svg>
--- a/apps/app-frontend/src/assets/icons/menu.svg
+++ b/apps/app-frontend/src/assets/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
--- a/apps/app-frontend/src/assets/icons/messages-square.svg
+++ b/apps/app-frontend/src/assets/icons/messages-square.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"/><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"/></svg>
--- a/apps/app-frontend/src/assets/icons/milestone.svg
+++ b/apps/app-frontend/src/assets/icons/milestone.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-milestone"><path d="M18 6H5a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h13l4-3.5L18 6Z"/><path d="M12 13v8"/><path d="M12 3v3"/></svg>
--- a/apps/app-frontend/src/assets/icons/minimize.svg
+++ b/apps/app-frontend/src/assets/icons/minimize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><line x1="5" x2="19" y1="12" y2="12"/></svg>
--- a/apps/app-frontend/src/assets/icons/more.svg
+++ b/apps/app-frontend/src/assets/icons/more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-more-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
--- a/apps/app-frontend/src/assets/icons/new-instance.svg
+++ b/apps/app-frontend/src/assets/icons/new-instance.svg
@@ -0,0 +1,138 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="924.76626" height="641.9894"
+     viewBox="0 0 924.76626 641.9894" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path
+    d="M901.84039,677.83256c3.74046-30.07761,22.38093-59.7128,51.06588-69.50087a139.64665,139.64665,0,0,0,.00692,95.87682c4.40777,11.92286,10.55173,24.725,6.40563,36.74145-2.57964,7.477-8.89041,13.1975-15.94457,16.7744-7.0546,3.5769-14.88373,5.28172-22.61488,6.95243l-1.52153,1.25839C906.96476,738.22193,898.09992,707.91018,901.84039,677.83256Z"
+    transform="translate(-137.61687 -129.0053)" fill="#f0f0f0"/>
+  <path
+    d="M953.19092,608.90041a119.36031,119.36031,0,0,0-29.67278,67.17592,51.40093,51.40093,0,0,0,.58468,16.09418,29.48054,29.48054,0,0,0,7.33219,13.67368c3.30477,3.631,7.10567,6.96234,9.47027,11.33341a18.051,18.051,0,0,1,.88188,14.73616c-2.08769,5.98787-6.20242,10.86849-10.39214,15.50149-4.65189,5.14407-9.56524,10.41344-11.54265,17.23311-.23959.8263-1.50772.40622-1.26849-.41883,3.44035-11.865,14.95818-18.60464,20.451-29.29134,2.563-4.98661,3.63886-10.77584,1.236-16.03972-2.10117-4.603-6.01776-8.04173-9.39569-11.68923a31.458,31.458,0,0,1-7.66744-13.10281,47.51861,47.51861,0,0,1-1.20129-16.01232,115.8007,115.8007,0,0,1,8.45741-35.19088,121.4766,121.4766,0,0,1,21.84309-35.0047c.57116-.63958,1.45134.36648.88391,1.00188Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M923.87771,667.99227a17.90785,17.90785,0,0,1-13.6314-18.75913c.06806-.85679,1.40267-.79127,1.33452.06666a16.58227,16.58227,0,0,0,12.71571,17.424c.83627.19883.41265,1.46618-.41883,1.26849Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M929.51688,704.22384a34.51591,34.51591,0,0,0,15.41342-19.87863c.24251-.82542,1.51071-.4056,1.26849.41883A35.90175,35.90175,0,0,1,930.11768,705.417c-.74074.43939-1.33752-.75611-.6008-1.19312Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M936.9349,631.34025a10.13673,10.13673,0,0,0,9.60617-.48764c.73481-.44857,1.33082.74746.6008,1.19311a11.359,11.359,0,0,1-10.6258.563.69037.69037,0,0,1-.42483-.84366.6713.6713,0,0,1,.84366-.42482Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M1040.342,662.054c-.45086.29314-.90172.58628-1.35313.89071a133.49486,133.49486,0,0,0-17.06883,13.32611c-.41728.37207-.83456.75542-1.24028,1.13871a140.73351,140.73351,0,0,0-30.56436,41.83882,136.67119,136.67119,0,0,0-7.48626,19.36917c-2.76241,9.166-5.02827,19.324-10.4964,26.82144a23.44535,23.44535,0,0,1-1.82656,2.25485H920.89105c-.1123-.05636-.22516-.1015-.338-.15786l-1.973.09022c.07927-.3495.169-.71029.24827-1.05979.04514-.20293.1013-.40585.14644-.60878.03358-.13529.06771-.27064.09028-.39464.011-.04508.02257-.09015.03358-.124.02257-.124.0567-.23679.07927-.3495q.744-3.0271,1.53315-6.05427c0-.01129,0-.01129.011-.02257,4.04783-15.36682,9.41411-30.53071,16.91138-44.398.22571-.41714.45086-.84557.69914-1.26271a130.41346,130.41346,0,0,1,11.71411-17.76824,115.29059,115.29059,0,0,1,7.67783-8.78262,95.87273,95.87273,0,0,1,23.99138-17.97117c17.72338-9.35762,38.2422-12.94283,57.18328-7.22677C1039.38361,661.74961,1039.85759,661.89611,1040.342,662.054Z"
+    transform="translate(-137.61687 -129.0053)" fill="#f0f0f0"/>
+  <path
+    d="M1040.23094,662.68115a119.36024,119.36024,0,0,0-64.13659,35.77114,51.40084,51.40084,0,0,0-9.223,13.20232,29.48052,29.48052,0,0,0-2.37816,15.33216c.45258,4.88882,1.48168,9.83714.738,14.75085a18.051,18.051,0,0,1-8.168,12.297c-5.272,3.524-11.49586,4.94359-17.63051,6.12029-6.81135,1.30649-13.90692,2.55561-19.59168,6.8102-.68879.5155-1.4484-.58341-.76065-1.09813,9.89051-7.40226,23.14454-5.84891,33.96439-11.07458,5.04874-2.43839,9.39323-6.41306,10.64393-12.06264,1.09368-4.94031.03684-10.044-.4642-14.99a31.458,31.458,0,0,1,1.76676-15.07818,47.51855,47.51855,0,0,1,8.68137-13.5082,115.80059,115.80059,0,0,1,27.94011-23.006,121.4767,121.4767,0,0,1,38.51573-14.79824c.84111-.16679.93817,1.16642.10255,1.33212Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M981.2486,692.21411A17.90784,17.90784,0,0,1,981.659,669.029c.57019-.64313,1.59636.21271,1.02541.85669a16.58227,16.58227,0,0,0-.33766,21.56781c.548.66224-.55326,1.4191-1.09813.76065Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M963.93725,724.53816a34.51588,34.51588,0,0,0,24.27507-6.592c.69059-.513,1.45041.58571.76065,1.09813a35.90171,35.90171,0,0,1-25.27435,6.80826c-.856-.09514-.61271-1.409.23863-1.31436Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M1013.74109,670.81085a10.13669,10.13669,0,0,0,7.96358,5.39423c.85677.08425.61256,1.39806-.23863,1.31436a11.359,11.359,0,0,1-8.82308-5.94794.69036.69036,0,0,1,.16874-.92939.67131.67131,0,0,1,.92939.16874Z"
+    transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M742.23915,525.98269a10.0558,10.0558,0,0,0-1.61015-15.335l9.13555-34.54737-17.60072,5.92017-5.97689,31.89915a10.11027,10.11027,0,0,0,16.05221,12.06308Z"
+    transform="translate(-137.61687 -129.0053)" fill="#9e616a"/>
+  <polygon points="686.055 629.029 673.795 629.028 667.963 581.74 686.057 581.741 686.055 629.029"
+           fill="#9e616a"/>
+  <path
+    d="M826.79864,769.91783l-39.53076-.00146v-.5a15.38728,15.38728,0,0,1,15.38647-15.38623h.001l24.144.001Z"
+    transform="translate(-137.61687 -129.0053)" fill="#2f2e41"/>
+  <polygon points="628.055 629.029 615.795 629.028 609.963 581.74 628.057 581.741 628.055 629.029"
+           fill="#9e616a"/>
+  <path
+    d="M768.79864,769.91783l-39.53076-.00146v-.5a15.38728,15.38728,0,0,1,15.38647-15.38623h.001l24.144.001Z"
+    transform="translate(-137.61687 -129.0053)" fill="#2f2e41"/>
+  <path id="b1d8f474-012b-4d97-a964-9f33bafc8058-812" data-name="Path 1095"
+        d="M758.85336,473.11447l-4.706,1.3s-12.294,79.7-13.294,121.7,3,148,3,148h26l21-180,10,180h28s20-236,11-255S758.85336,473.11447,758.85336,473.11447Z"
+        transform="translate(-137.61687 -129.0053)" fill="#2f2e41"/>
+  <circle id="e76160c9-f3a1-43ce-a248-d388186e85bb" data-name="Ellipse 219" cx="658.74398"
+          cy="179.98357" r="23.49291" fill="#9e616a"/>
+  <path id="bb67ace3-6b73-4a38-bac1-9d795c287a43-813" data-name="Path 1099"
+        d="M855.85336,363.11447l-36.464-23.83-37.786,1.488-36.75,20.342,14,78-6,45s54-6,66,3a51.277,51.277,0,0,0,24,10l-2-77Z"
+        transform="translate(-137.61687 -129.0053)" fill="#3f3d56"/>
+  <path id="f7a1be30-9471-4724-82e7-c8ff3c288394-814" data-name="Path 1101"
+        d="M751.85336,360.11447l-3.778-.784-3.222,1.784s-9,12-9,23-11,117-11,117l20,9,16-83Z"
+        transform="translate(-137.61687 -129.0053)" fill="#3f3d56"/>
+  <path id="a2423779-f29b-465e-aa9d-0fc12224f03e-815" data-name="Path 1104"
+        d="M816.93427,291.7643s6.14449-11.74646-7.3736-12.81432c0,0-11.5243-10.454-23.27076-1.91114,0,0-6.40715,0-9.91084,7.25044,0,0-5.03919-1.91114-6.14657,3.20358,0,0-3.68733,10.67861,0,20.28934s4.91212,10.6786,4.91212,10.6786-6.059-20.14943,8.6892-21.21729,31.252-10.28455,32.48107,1.46189,3.07866,14.64066,3.07866,14.64066S831.06737,296.56968,816.93427,291.7643Z"
+        transform="translate(-137.61687 -129.0053)" fill="#2f2e41"/>
+  <path id="e9616824-6bd8-4015-8eb7-3dcfe132b2c0-816" data-name="Subtraction 1"
+        d="M513.35252,429.96937h-291v-218h291Z" transform="translate(-137.61687 -129.0053)"
+        fill="#fff"/>
+  <path id="f4711ed8-dad6-4be5-800d-5829f7fb3f37-817" data-name="Subtraction 1"
+        d="M513.35252,429.96937h-291v-218h291Zm-288-215v212h285v-212Z"
+        transform="translate(-137.61687 -129.0053)" fill="#e6e6e6"/>
+  <g id="b3812a0d-69b2-4ac3-87c4-e066c2de2dfd" data-name="Group 41">
+    <circle id="fb0bff05-a63a-421c-8737-de050f830f30" data-name="Ellipse 220" cx="230.14466"
+            cy="192.37305" r="55.409" fill="var(--color-green)"/>
+    <path id="f9b355f0-5797-4243-8ae5-6fe77774d21b-818" data-name="Path 1106"
+          d="M390.77053,316.72537h-18.839v-18.839a4.433,4.433,0,0,0-4.433-4.433h0a4.433,4.433,0,0,0-4.433,4.433v18.839h-18.839a4.433,4.433,0,0,0-4.433,4.433v0h0a4.433,4.433,0,0,0,4.433,4.433h18.839v18.839a4.433,4.433,0,0,0,4.433,4.433h0a4.433,4.433,0,0,0,4.433-4.433V325.59137h18.839a4.433,4.433,0,0,0,4.433-4.433v0h0a4.433,4.433,0,0,0-4.433-4.433h0Z"
+          transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  </g>
+  <path d="M246.35588,211.0595h-108.739V129.0053h108.739Z"
+        transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path d="M246.35588,211.0595h-108.739V129.0053h108.739Zm-106.739-2h104.739V131.0053h-104.739Z"
+        transform="translate(-137.61687 -129.0053)" fill="#e6e6e6"/>
+  <rect id="a0756b3d-8076-4d61-8f2c-cdb882ad5331" data-name="Rectangle 342" x="14.34201"
+        y="22.34808" width="80.054" height="5.337" fill="#e4e4e4"/>
+  <rect id="b5dd6458-8ffa-4f7b-ade4-3f6bf4de284a" data-name="Rectangle 343" x="14.34201"
+        y="38.35803" width="80.054" height="5.337" fill="#e4e4e4"/>
+  <rect id="bf0c907d-dbb4-4364-8cdd-63eed4118a99" data-name="Rectangle 344" x="14.34201"
+        y="54.36908" width="80.054" height="5.337" fill="#e4e4e4"/>
+  <path d="M969.35588,770.0595h-108.739V688.0053h108.739Z"
+        transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path d="M969.35588,770.0595h-108.739V688.0053h108.739Zm-106.739-2h104.739V690.0053h-104.739Z"
+        transform="translate(-137.61687 -129.0053)" fill="#e6e6e6"/>
+  <rect id="b0c2ce11-0b20-4ceb-9ae2-a734f04b6c4a" data-name="Rectangle 342" x="737.34201"
+        y="581.34808" width="80.054" height="5.337" fill="#e4e4e4"/>
+  <rect id="bf5a9fda-652f-454e-a316-4f0fe63005cd" data-name="Rectangle 343" x="737.34201"
+        y="597.35803" width="80.054" height="5.337" fill="#e4e4e4"/>
+  <rect id="ad5f030a-4549-4063-8a1c-b5f384f37057" data-name="Rectangle 344" x="737.34201"
+        y="613.36908" width="80.054" height="5.337" fill="#e4e4e4"/>
+  <path d="M903.31826,622.82706l-81.22118-72.3,54.55741-61.28931,81.22119,72.3Z"
+        transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M903.31826,622.82706l-81.22118-72.3,54.55741-61.28931,81.22119,72.3ZM824.92074,550.363l78.23344,69.64043L955.052,561.70184,876.81858,492.0614Z"
+    transform="translate(-137.61687 -129.0053)" fill="#e6e6e6"/>
+  <rect id="b060c16b-2eb9-48d7-8f6b-fd5295a89bd0" data-name="Rectangle 342" x="897.96282"
+        y="504.04622" width="5.337" height="80.054"
+        transform="translate(-242.1991 726.03121) rotate(-48.32574)" fill="#e4e4e4"/>
+  <rect id="aedfd2a5-e201-47b6-a3ec-b56955ab97bd" data-name="Rectangle 343" x="887.31788"
+        y="516.00464" width="5.337" height="80.054"
+        transform="translate(-254.69846 722.08744) rotate(-48.32574)" fill="#e4e4e4"/>
+  <rect id="b4720297-2a1d-43a8-8ac0-2a4c1ee9f1d2" data-name="Rectangle 344" x="876.67222"
+        y="527.96389" width="5.337" height="80.054"
+        transform="translate(-267.19868 718.1434) rotate(-48.32574)" fill="#e4e4e4"/>
+  <path d="M307.92339,259.0595H186.61687V167.52189H307.92339Z"
+        transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M307.92339,259.0595H186.61687V167.52189H307.92339ZM188.848,256.82835H305.69224V169.753H188.848Z"
+    transform="translate(-137.61687 -129.0053)" fill="#e6e6e6"/>
+  <rect id="e724a003-6a25-4c83-be10-32efc1fd30bf" data-name="Rectangle 342" x="64.99958"
+        y="63.44755" width="89.30624" height="5.95382" fill="var(--color-green)"/>
+  <rect id="f16e8690-23eb-4802-9b18-78b8e9972275" data-name="Rectangle 343" x="64.99958"
+        y="81.30785" width="89.30624" height="5.95382" fill="var(--color-green)"/>
+  <rect id="ea05cbc1-1ae7-4cbc-994d-a1c0c2d5941e" data-name="Rectangle 344" x="64.99958"
+        y="99.16937" width="89.30624" height="5.95382" fill="var(--color-green)"/>
+  <path d="M622.73338,498.69378H437.61687V359.0053H622.73338Z"
+        transform="translate(-137.61687 -129.0053)" fill="#fff"/>
+  <path
+    d="M622.73338,498.69378H437.61687V359.0053H622.73338ZM441.02166,495.289H619.3286V362.41009H441.02166Z"
+    transform="translate(-137.61687 -129.0053)" fill="#e6e6e6"/>
+  <rect id="ac8b6f6a-33b0-4e01-bc67-8452ca74a9e6" data-name="Rectangle 342" x="324.41573"
+        y="268.04521" width="136.28335" height="9.08567" fill="var(--color-green)"/>
+  <rect id="e4f43daa-ee47-4f01-aaaf-288902bf6f27" data-name="Rectangle 343" x="324.41573"
+        y="295.30043" width="136.28335" height="9.08567" fill="var(--color-green)"/>
+  <rect id="b40e1bee-dfb3-4798-af30-e469c9a00d65" data-name="Rectangle 344" x="324.41573"
+        y="322.55752" width="136.28335" height="9.08567" fill="var(--color-green)"/>
+  <path
+    d="M1061.19244,770.9947h-480.294a1.19069,1.19069,0,0,1,0-2.38137h480.294a1.19068,1.19068,0,1,1,0,2.38137Z"
+    transform="translate(-137.61687 -129.0053)" fill="#cacaca"/>
+  <path
+    d="M843.422,525.22926a10.05578,10.05578,0,0,1,5.50137-14.40454l.06041-35.73479,15.48506,10.24922-2.43139,32.363a10.11028,10.11028,0,0,1-18.61545,7.52706Z"
+    transform="translate(-137.61687 -129.0053)" fill="#9e616a"/>
+  <path id="b2a3d507-71c0-44dd-96fb-9359ee9fed80-819" data-name="Path 1100"
+        d="M844.85336,367.11447l6.918-6.668,5.082,3.668s5,6,9,24,0,117,0,117l-22-3,3-52-9-44Z"
+        transform="translate(-137.61687 -129.0053)" fill="#3f3d56"/>
+</svg>
--- a/apps/app-frontend/src/assets/icons/package.svg
+++ b/apps/app-frontend/src/assets/icons/package.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package"><path d="M16.5 9.4 7.55 4.24"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" x2="12" y1="22" y2="12"/></svg>
--- a/apps/app-frontend/src/assets/icons/server.svg
+++ b/apps/app-frontend/src/assets/icons/server.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
--- a/apps/app-frontend/src/assets/icons/text-cursor-input.svg
+++ b/apps/app-frontend/src/assets/icons/text-cursor-input.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>
--- a/apps/app-frontend/src/assets/icons/toggle.svg
+++ b/apps/app-frontend/src/assets/icons/toggle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-toggle-right"><rect width="20" height="12" x="2" y="6" rx="6" ry="6"/><circle cx="16" cy="12" r="2"/></svg>
--- a/apps/app-frontend/src/assets/profile_icon.png
+++ b/apps/app-frontend/src/assets/profile_icon.png
--- a/apps/app-frontend/src/assets/stylesheets/global.scss
+++ b/apps/app-frontend/src/assets/stylesheets/global.scss
@@ -0,0 +1,137 @@
+:root {
+  font-family: var(--font-standard);
+  color-scheme: dark;
+  --view-width: calc(100% - 5rem);
+  --expanded-view-width: calc(100% - 13rem);
+}
+
+body {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.card-divider {
+  background-color: var(--color-button-bg);
+  border: none;
+  color: var(--color-button-bg);
+  height: 1px;
+  margin: var(--gap-sm) 0;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.no-select {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+a {
+  color: var(--color-link);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+input {
+  border: none !important;
+}
+
+.badge {
+  display: flex;
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  align-items: center;
+  background-color: var(--color-bg);
+  padding-block: var(--gap-sm);
+  padding-inline: var(--gap-lg);
+  width: min-content;
+
+  svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: 0.5rem;
+  }
+
+  &.featured {
+    background-color: var(--color-brand-highlight);
+    color: var(--color-contrast);
+  }
+}
+
+.mac {
+  .nav-container {
+    padding-top: calc(var(--gap-md) + 1.75rem);
+  }
+
+  .account-card,
+  .card-section {
+    top: calc(var(--gap-md) + 1.75rem);
+  }
+}
+
+.windows {
+  .fake-appbar {
+    height: 2.5rem !important;
+  }
+
+  .window-controls {
+    display: flex !important;
+  }
+
+  .info-card {
+    right: 8rem;
+  }
+
+  .profile-card {
+    right: 8rem;
+  }
+}
+
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-button-bg) var(--color-bg);
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: var(--gap-md);
+  border: 3px solid var(--color-bg);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-bg);
+  border: 3px solid var(--color-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-lg);
+  border: 3px solid var(--color-bg);
+}
+
+.highlighted {
+  box-shadow: 0 0 1rem var(--color-brand) !important;
+}
+
+.gecko {
+  background-color: var(--color-raised-bg);
+  box-shadow: none !important;
+}
+
+img {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
--- a/apps/app-frontend/src/assets/stylesheets/macFix.css
+++ b/apps/app-frontend/src/assets/stylesheets/macFix.css
@@ -0,0 +1,3 @@
+img {
+  pointer-events: none !important;
+}
--- a/apps/app-frontend/src/components/GridDisplay.vue
+++ b/apps/app-frontend/src/components/GridDisplay.vue
@@ -0,0 +1,395 @@
+<script setup>
+import Instance from '@/components/ui/Instance.vue'
+import { computed, ref } from 'vue'
+import {
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  StopCircleIcon,
+  EyeIcon,
+  SearchIcon,
+  XIcon,
+} from '@modrinth/assets'
+import { ConfirmModal, Button, Card, DropdownSelect } from '@modrinth/ui'
+import { formatCategoryHeader } from '@modrinth/utils'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import dayjs from 'dayjs'
+import { useTheming } from '@/store/theme.js'
+import { duplicate, remove } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+
+const props = defineProps({
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+})
+const instanceOptions = ref(null)
+const instanceComponents = ref(null)
+
+const themeStore = useTheming()
+const currentDeleteInstance = ref(null)
+const confirmModal = ref(null)
+
+async function deleteProfile() {
+  if (currentDeleteInstance.value) {
+    instanceComponents.value = instanceComponents.value.filter(
+      (x) => x.instance.path !== currentDeleteInstance.value,
+    )
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
+}
+
+async function duplicateProfile(p) {
+  await duplicate(p).catch(handleError)
+}
+
+const handleRightClick = (event, profilePathId) => {
+  const item = instanceComponents.value.find((x) => x.instance.path === profilePathId)
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { name: 'open' },
+    { name: 'copy' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
+
+  instanceOptions.value.showMenu(
+    event,
+    item,
+    item.playing
+      ? [
+          {
+            name: 'stop',
+            color: 'danger',
+          },
+          ...baseOptions,
+        ]
+      : [
+          {
+            name: 'play',
+            color: 'primary',
+          },
+          ...baseOptions,
+        ],
+  )
+}
+
+const handleOptionsClick = async (args) => {
+  switch (args.option) {
+    case 'play':
+      args.item.play(null, 'InstanceGridContextMenu')
+      break
+    case 'stop':
+      args.item.stop(null, 'InstanceGridContextMenu')
+      break
+    case 'add_content':
+      await args.item.addContent()
+      break
+    case 'edit':
+      await args.item.seeInstance()
+      break
+    case 'duplicate':
+      if (args.item.instance.install_stage == 'installed')
+        await duplicateProfile(args.item.instance.path)
+      break
+    case 'open':
+      await args.item.openFolder()
+      break
+    case 'copy':
+      await navigator.clipboard.writeText(args.item.instance.path)
+      break
+    case 'delete':
+      currentDeleteInstance.value = args.item.instance.path
+      confirmModal.value.show()
+      break
+  }
+}
+
+const search = ref('')
+const group = ref('Category')
+const filters = ref('All profiles')
+const sortBy = ref('Name')
+
+const filteredResults = computed(() => {
+  let instances = props.instances.filter((instance) => {
+    return instance.metadata.name.toLowerCase().includes(search.value.toLowerCase())
+  })
+
+  if (sortBy.value === 'Name') {
+    instances.sort((a, b) => {
+      return a.metadata.name.localeCompare(b.metadata.name)
+    })
+  }
+
+  if (sortBy.value === 'Game version') {
+    instances.sort((a, b) => {
+      return a.metadata.game_version.localeCompare(b.metadata.game_version)
+    })
+  }
+
+  if (sortBy.value === 'Last played') {
+    instances.sort((a, b) => {
+      return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
+    })
+  }
+
+  if (sortBy.value === 'Date created') {
+    instances.sort((a, b) => {
+      return dayjs(b.metadata.date_created).diff(dayjs(a.metadata.date_created))
+    })
+  }
+
+  if (sortBy.value === 'Date modified') {
+    instances.sort((a, b) => {
+      return dayjs(b.metadata.date_modified).diff(dayjs(a.metadata.date_modified))
+    })
+  }
+
+  if (filters.value === 'Custom instances') {
+    instances = instances.filter((instance) => {
+      return !instance.metadata?.linked_data
+    })
+  } else if (filters.value === 'Downloaded modpacks') {
+    instances = instances.filter((instance) => {
+      return instance.metadata?.linked_data
+    })
+  }
+
+  const instanceMap = new Map()
+
+  if (group.value === 'Loader') {
+    instances.forEach((instance) => {
+      const loader = formatCategoryHeader(instance.metadata.loader)
+      if (!instanceMap.has(loader)) {
+        instanceMap.set(loader, [])
+      }
+
+      instanceMap.get(loader).push(instance)
+    })
+  } else if (group.value === 'Game version') {
+    instances.forEach((instance) => {
+      if (!instanceMap.has(instance.metadata.game_version)) {
+        instanceMap.set(instance.metadata.game_version, [])
+      }
+
+      instanceMap.get(instance.metadata.game_version).push(instance)
+    })
+  } else if (group.value === 'Category') {
+    instances.forEach((instance) => {
+      if (instance.metadata.groups.length === 0) {
+        instance.metadata.groups.push('None')
+      }
+
+      for (const category of instance.metadata.groups) {
+        if (!instanceMap.has(category)) {
+          instanceMap.set(category, [])
+        }
+
+        instanceMap.get(category).push(instance)
+      }
+    })
+  } else {
+    return instanceMap.set('None', instances)
+  }
+
+  // For 'name', we intuitively expect the sorting to apply to the name of the group first, not just the name of the instance
+  // ie: Category A should come before B, even if the first instance in B comes before the first instance in A
+  if (sortBy.value === 'Name') {
+    const sortedEntries = [...instanceMap.entries()].sort((a, b) => {
+      // None should always be first
+      if (a[0] === 'None' && b[0] !== 'None') {
+        return -1
+      }
+      if (a[0] !== 'None' && b[0] === 'None') {
+        return 1
+      }
+      return a[0].localeCompare(b[0])
+    })
+    instanceMap.clear()
+    sortedEntries.forEach((entry) => {
+      instanceMap.set(entry[0], entry[1])
+    })
+  }
+
+  return instanceMap
+})
+</script>
+<template>
+  <ConfirmModal
+    ref="confirmModal"
+    title="Are you sure you want to delete this instance?"
+    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+    :has-to-type="false"
+    proceed-label="Delete"
+    :noblur="!themeStore.advancedRendering"
+    @proceed="deleteProfile"
+  />
+  <Card class="header">
+    <div class="iconified-input">
+      <SearchIcon />
+      <input v-model="search" type="text" placeholder="Search" class="search-input" />
+      <Button @click="() => (search = '')">
+        <XIcon />
+      </Button>
+    </div>
+    <div class="labeled_button">
+      <span>Sort by</span>
+      <DropdownSelect
+        v-model="sortBy"
+        class="sort-dropdown"
+        name="Sort Dropdown"
+        :options="['Name', 'Last played', 'Date created', 'Date modified', 'Game version']"
+        placeholder="Select..."
+      />
+    </div>
+    <div class="labeled_button">
+      <span>Filter by</span>
+      <DropdownSelect
+        v-model="filters"
+        class="filter-dropdown"
+        name="Filter Dropdown"
+        :options="['All profiles', 'Custom instances', 'Downloaded modpacks']"
+        placeholder="Select..."
+      />
+    </div>
+    <div class="labeled_button">
+      <span>Group by</span>
+      <DropdownSelect
+        v-model="group"
+        class="group-dropdown"
+        name="Group Dropdown"
+        :options="['Category', 'Loader', 'Game version', 'None']"
+        placeholder="Select..."
+      />
+    </div>
+  </Card>
+  <div
+    v-for="instanceSection in Array.from(filteredResults, ([key, value]) => ({
+      key,
+      value,
+    }))"
+    :key="instanceSection.key"
+    class="row"
+  >
+    <div v-if="instanceSection.key !== 'None'" class="divider">
+      <p>{{ instanceSection.key }}</p>
+      <hr aria-hidden="true" />
+    </div>
+    <section class="instances">
+      <Instance
+        v-for="instance in instanceSection.value"
+        ref="instanceComponents"
+        :key="instance.path + instance.install_stage"
+        :instance="instance"
+        @contextmenu.prevent.stop="(event) => handleRightClick(event, instance.path)"
+      />
+    </section>
+  </div>
+  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EyeIcon /> View instance </template>
+    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+    <template #delete> <TrashIcon /> Delete </template>
+    <template #open> <FolderOpenIcon /> Open folder </template>
+    <template #copy> <ClipboardCopyIcon /> Copy path </template>
+  </ContextMenu>
+</template>
+<style lang="scss" scoped>
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  padding: 1rem;
+
+  .divider {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 1rem;
+    margin-bottom: 1rem;
+
+    p {
+      margin: 0;
+      font-size: 1rem;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
+
+    hr {
+      background-color: var(--color-gray);
+      height: 1px;
+      width: 100%;
+      border: none;
+    }
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: inherit;
+  margin: 1rem 1rem 0 !important;
+  padding: 1rem;
+  width: calc(100% - 2rem);
+
+  .iconified-input {
+    flex-grow: 1;
+
+    input {
+      min-width: 100%;
+    }
+  }
+
+  .sort-dropdown {
+    width: 10rem;
+  }
+
+  .filter-dropdown {
+    width: 15rem;
+  }
+
+  .group-dropdown {
+    width: 10rem;
+  }
+
+  .labeled_button {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+  }
+}
+
+.instances {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  width: 100%;
+  gap: 1rem;
+  margin-right: auto;
+  scroll-behavior: smooth;
+  overflow-y: auto;
+}
+</style>
--- a/apps/app-frontend/src/components/RowDisplay.vue
+++ b/apps/app-frontend/src/components/RowDisplay.vue
@@ -0,0 +1,357 @@
+<script setup>
+import {
+  ClipboardCopyIcon,
+  FolderOpenIcon,
+  PlayIcon,
+  PlusIcon,
+  TrashIcon,
+  DownloadIcon,
+  GlobeIcon,
+  StopCircleIcon,
+  ExternalIcon,
+  EyeIcon,
+  ChevronRightIcon,
+} from '@modrinth/assets'
+import { ConfirmModal } from '@modrinth/ui'
+import Instance from '@/components/ui/Instance.vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import ProjectCard from '@/components/ui/ProjectCard.vue'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process.js'
+import { handleError } from '@/store/notifications.js'
+import { duplicate, remove, run } from '@/helpers/profile.js'
+import { useRouter } from 'vue-router'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { install as pack_install } from '@/helpers/pack.js'
+import { useTheming } from '@/store/state.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { handleSevereError } from '@/store/error.js'
+
+const router = useRouter()
+
+const props = defineProps({
+  instances: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  canPaginate: Boolean,
+})
+
+const actualInstances = computed(() =>
+  props.instances.filter((x) => x && x.instances && x.instances[0]),
+)
+
+const modsRow = ref(null)
+const instanceOptions = ref(null)
+const instanceComponents = ref(null)
+const rows = ref(null)
+const confirmModal = ref(null)
+const deleteConfirmModal = ref(null)
+const modInstallModal = ref(null)
+
+const themeStore = useTheming()
+const currentDeleteInstance = ref(null)
+
+async function deleteProfile() {
+  if (currentDeleteInstance.value) {
+    await remove(currentDeleteInstance.value).catch(handleError)
+  }
+}
+
+async function duplicateProfile(p) {
+  await duplicate(p).catch(handleError)
+}
+
+const handleInstanceRightClick = async (event, passedInstance) => {
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'duplicate' },
+    { name: 'open_folder' },
+    { name: 'copy_path' },
+    { type: 'divider' },
+    {
+      name: 'delete',
+      color: 'danger',
+    },
+  ]
+
+  const running = await get_all_running_profile_paths().catch(handleError)
+
+  const options = running.includes(passedInstance.path)
+    ? [
+        {
+          name: 'stop',
+          color: 'danger',
+        },
+        ...baseOptions,
+      ]
+    : [
+        {
+          name: 'play',
+          color: 'primary',
+        },
+        ...baseOptions,
+      ]
+
+  instanceOptions.value.showMenu(event, passedInstance, options)
+}
+
+const handleProjectClick = (event, passedInstance) => {
+  instanceOptions.value.showMenu(event, passedInstance, [
+    {
+      name: 'install',
+      color: 'primary',
+    },
+    { type: 'divider' },
+    {
+      name: 'open_link',
+    },
+    {
+      name: 'copy_link',
+    },
+  ])
+}
+
+const handleOptionsClick = async (args) => {
+  switch (args.option) {
+    case 'play':
+      await run(args.item.path).catch(handleSevereError)
+      mixpanel_track('InstanceStart', {
+        loader: args.item.metadata.loader,
+        game_version: args.item.metadata.game_version,
+      })
+      break
+    case 'stop':
+      for (const u of await get_uuids_by_profile_path(args.item.path).catch(handleError)) {
+        await kill_by_uuid(u).catch(handleError)
+      }
+      mixpanel_track('InstanceStop', {
+        loader: args.item.metadata.loader,
+        game_version: args.item.metadata.game_version,
+      })
+      break
+    case 'add_content':
+      await router.push({
+        path: `/browse/${args.item.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        query: { i: args.item.path },
+      })
+      break
+    case 'edit':
+      await router.push({
+        path: `/instance/${encodeURIComponent(args.item.path)}/`,
+      })
+      break
+    case 'duplicate':
+      if (args.item.install_stage == 'installed') await duplicateProfile(args.item.path)
+      break
+    case 'delete':
+      currentDeleteInstance.value = args.item.path
+      deleteConfirmModal.value.show()
+      break
+    case 'open_folder':
+      await showProfileInFolder(args.item.path)
+      break
+    case 'copy_path':
+      await navigator.clipboard.writeText(args.item.path)
+      break
+    case 'install': {
+      const versions = await useFetch(
+        `https://api.modrinth.com/v2/project/${args.item.project_id}/version`,
+        'project versions',
+      )
+
+      if (args.item.project_type === 'modpack') {
+        await pack_install(
+          args.item.project_id,
+          versions[0].id,
+          args.item.title,
+          args.item.icon_url,
+        )
+      } else {
+        modInstallModal.value.show(args.item.project_id, versions)
+      }
+      break
+    }
+    case 'open_link':
+      window.__TAURI_INVOKE__('tauri', {
+        __tauriModule: 'Shell',
+        message: {
+          cmd: 'open',
+          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+        },
+      })
+      break
+    case 'copy_link':
+      await navigator.clipboard.writeText(
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+      )
+      break
+  }
+}
+
+const maxInstancesPerRow = ref(1)
+const maxProjectsPerRow = ref(1)
+
+const calculateCardsPerRow = () => {
+  // Calculate how many cards fit in one row
+  const containerWidth = rows.value[0].clientWidth
+  // Convert container width from pixels to rem
+  const containerWidthInRem =
+    containerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize)
+  maxInstancesPerRow.value = Math.floor((containerWidthInRem + 1) / 11)
+  maxProjectsPerRow.value = Math.floor((containerWidthInRem + 1) / 19)
+}
+
+onMounted(() => {
+  calculateCardsPerRow()
+  window.addEventListener('resize', calculateCardsPerRow)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', calculateCardsPerRow)
+})
+</script>
+
+<template>
+  <ConfirmModal
+    ref="deleteConfirmModal"
+    title="Are you sure you want to delete this instance?"
+    description="If you proceed, all data for your instance will be removed. You will not be able to recover it."
+    :has-to-type="false"
+    proceed-label="Delete"
+    :noblur="!themeStore.advancedRendering"
+    @proceed="deleteProfile"
+  />
+  <div class="content">
+    <div v-for="row in actualInstances" ref="rows" :key="row.label" class="row">
+      <div class="header">
+        <router-link :to="row.route">{{ row.label }}</router-link>
+        <ChevronRightIcon />
+      </div>
+      <section v-if="row.instances[0].metadata" ref="modsRow" class="instances">
+        <Instance
+          v-for="instance in row.instances.slice(0, maxInstancesPerRow)"
+          :key="(instance?.project_id || instance?.id) + instance.install_stage"
+          :instance="instance"
+          @contextmenu.prevent.stop="(event) => handleInstanceRightClick(event, instance)"
+        />
+      </section>
+      <section v-else ref="modsRow" class="projects">
+        <ProjectCard
+          v-for="project in row.instances.slice(0, maxProjectsPerRow)"
+          :key="project?.project_id"
+          ref="instanceComponents"
+          class="item"
+          :project="project"
+          :confirm-modal="confirmModal"
+          :mod-install-modal="modInstallModal"
+          @contextmenu.prevent.stop="(event) => handleProjectClick(event, project)"
+        />
+      </section>
+    </div>
+  </div>
+  <ContextMenu ref="instanceOptions" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add content </template>
+    <template #edit> <EyeIcon /> View instance </template>
+    <template #delete> <TrashIcon /> Delete </template>
+    <template #open_folder> <FolderOpenIcon /> Open folder </template>
+    <template #duplicate> <ClipboardCopyIcon /> Duplicate instance</template>
+    <template #copy_path> <ClipboardCopyIcon /> Copy path </template>
+    <template #install> <DownloadIcon /> Install </template>
+    <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
+    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+  </ContextMenu>
+  <InstallConfirmModal ref="confirmModal" />
+  <ModInstallModal ref="modInstallModal" />
+</template>
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 1rem;
+  gap: 1rem;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+  width: 100%;
+  min-width: 100%;
+
+  &:nth-child(even) {
+    background: var(--color-bg);
+  }
+
+  .header {
+    width: 100%;
+    margin-bottom: 1rem;
+    gap: var(--gap-xs);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    a {
+      margin: 0;
+      font-size: var(--font-size-lg);
+      font-weight: bolder;
+      white-space: nowrap;
+      color: var(--color-contrast);
+    }
+
+    svg {
+      height: 1.5rem;
+      width: 1.5rem;
+      color: var(--color-contrast);
+    }
+  }
+
+  .instances {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    grid-gap: 1rem;
+    width: 100%;
+  }
+
+  .projects {
+    display: grid;
+    width: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    grid-gap: 1rem;
+
+    .item {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/modrinth-loading-indicator.js
+++ b/apps/app-frontend/src/components/modrinth-loading-indicator.js
@@ -0,0 +1,134 @@
+import { computed, defineComponent, h, onBeforeUnmount, ref, watch } from 'vue'
+import { useLoading } from '@/store/state.js'
+
+export default defineComponent({
+  props: {
+    throttle: {
+      type: Number,
+      default: 50,
+    },
+    duration: {
+      type: Number,
+      default: 500,
+    },
+    height: {
+      type: Number,
+      default: 3,
+    },
+    color: {
+      type: [String, Boolean],
+      default:
+        'repeating-linear-gradient(to right, var(--color-brand) 0%, var(--color-brand) 100%)',
+    },
+    offsetWidth: {
+      type: String,
+      default: '208px',
+    },
+    offsetHeight: {
+      type: String,
+      default: '52px',
+    },
+  },
+  setup(props, { slots }) {
+    const indicator = useLoadingIndicator({
+      duration: props.duration,
+      throttle: props.throttle,
+    })
+
+    onBeforeUnmount(() => indicator.clear)
+
+    const loading = useLoading()
+
+    watch(loading, (newValue) => {
+      if (newValue.loading) {
+        indicator.start()
+      } else {
+        indicator.finish()
+      }
+    })
+
+    return () =>
+      h(
+        'div',
+        {
+          style: {
+            position: 'fixed',
+            top: props.offsetHeight,
+            right: 0,
+            left: props.offsetWidth,
+            pointerEvents: 'none',
+            width: `calc((100vw - ${props.offsetWidth}) * ${indicator.progress.value / 100})`,
+            height: `${props.height}px`,
+            opacity: indicator.isLoading.value ? 1 : 0,
+            background: props.color || undefined,
+            backgroundSize: `${(100 / indicator.progress.value) * 100}% auto`,
+            transition: 'width 0.1s, height 0.4s, opacity 0.4s',
+            zIndex: 6,
+          },
+        },
+        slots,
+      )
+  },
+})
+
+function useLoadingIndicator(opts) {
+  const progress = ref(0)
+  const isLoading = ref(false)
+  const step = computed(() => 10000 / opts.duration)
+
+  let _timer = null
+  let _throttle = null
+
+  function start() {
+    clear()
+    progress.value = 0
+    if (opts.throttle) {
+      _throttle = setTimeout(() => {
+        isLoading.value = true
+        _startTimer()
+      }, opts.throttle)
+    } else {
+      isLoading.value = true
+      _startTimer()
+    }
+  }
+  function finish() {
+    progress.value = 100
+    _hide()
+  }
+
+  function clear() {
+    clearInterval(_timer)
+    clearTimeout(_throttle)
+    _timer = null
+    _throttle = null
+  }
+
+  function _increase(num) {
+    progress.value = Math.min(100, progress.value + num)
+  }
+
+  function _hide() {
+    clear()
+    setTimeout(() => {
+      isLoading.value = false
+      setTimeout(() => {
+        progress.value = 0
+      }, 400)
+    }, 500)
+  }
+
+  function _startTimer() {
+    _timer = setInterval(() => {
+      _increase(step.value)
+    }, 100)
+  }
+
+  return {
+    progress,
+    isLoading,
+    start,
+    finish,
+    clear,
+  }
+}
--- a/apps/app-frontend/src/components/ui/AccountsCard.vue
+++ b/apps/app-frontend/src/components/ui/AccountsCard.vue
@@ -0,0 +1,391 @@
+<template>
+  <div
+    v-if="mode !== 'isolated'"
+    ref="button"
+    v-tooltip.right="'Minecraft accounts'"
+    class="button-base avatar-button"
+    :class="{ expanded: mode === 'expanded' }"
+    @click="showCard = !showCard"
+  >
+    <Avatar
+      :size="mode === 'expanded' ? 'xs' : 'sm'"
+      :src="
+        selectedAccount
+          ? `https://mc-heads.net/avatar/${selectedAccount.id}/128`
+          : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      "
+    />
+  </div>
+  <transition name="fade">
+    <Card
+      v-if="showCard || mode === 'isolated'"
+      ref="card"
+      class="account-card"
+      :class="{ expanded: mode === 'expanded', isolated: mode === 'isolated' }"
+    >
+      <div v-if="selectedAccount" class="selected account">
+        <Avatar size="xs" :src="`https://mc-heads.net/avatar/${selectedAccount.id}/128`" />
+        <div>
+          <h4>{{ selectedAccount.username }}</h4>
+          <p>Selected</p>
+        </div>
+        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.id)">
+          <TrashIcon />
+        </Button>
+      </div>
+      <div v-else class="logged-out account">
+        <h4>Not signed in</h4>
+        <Button v-tooltip="'Log in'" icon-only color="primary" @click="login()">
+          <LogInIcon />
+        </Button>
+      </div>
+      <div v-if="displayAccounts.length > 0" class="account-group">
+        <div v-for="account in displayAccounts" :key="account.id" class="account-row">
+          <Button class="option account" @click="setAccount(account)">
+            <Avatar :src="`https://mc-heads.net/avatar/${account.id}/128`" class="icon" />
+            <p>{{ account.username }}</p>
+          </Button>
+          <Button v-tooltip="'Log out'" icon-only @click="logout(account.id)">
+            <TrashIcon />
+          </Button>
+        </div>
+      </div>
+      <Button v-if="accounts.length > 0" @click="login()">
+        <PlusIcon />
+        Add account
+      </Button>
+    </Card>
+  </transition>
+</template>
+
+<script setup>
+import { PlusIcon, TrashIcon, LogInIcon } from '@modrinth/assets'
+import { Avatar, Button, Card } from '@modrinth/ui'
+import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
+import {
+  users,
+  remove_user,
+  set_default_user,
+  login as login_flow,
+  get_default_user,
+} from '@/helpers/auth'
+import { handleError } from '@/store/state.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { process_listener } from '@/helpers/events'
+import { handleSevereError } from '@/store/error.js'
+
+defineProps({
+  mode: {
+    type: String,
+    required: true,
+    default: 'normal',
+  },
+})
+
+const emit = defineEmits(['change'])
+
+const accounts = ref({})
+const defaultUser = ref()
+
+async function refreshValues() {
+  defaultUser.value = await get_default_user().catch(handleError)
+  accounts.value = await users().catch(handleError)
+}
+defineExpose({
+  refreshValues,
+})
+await refreshValues()
+
+const displayAccounts = computed(() =>
+  accounts.value.filter((account) => defaultUser.value !== account.id),
+)
+
+const selectedAccount = computed(() =>
+  accounts.value.find((account) => account.id === defaultUser.value),
+)
+
+async function setAccount(account) {
+  defaultUser.value = account.id
+  await set_default_user(account.id).catch(handleError)
+  emit('change')
+}
+
+async function login() {
+  const loggedIn = await login_flow().catch(handleSevereError)
+
+  if (loggedIn) {
+    await setAccount(loggedIn)
+    await refreshValues()
+  }
+
+  mixpanel_track('AccountLogIn')
+}
+
+const logout = async (id) => {
+  await remove_user(id).catch(handleError)
+  await refreshValues()
+  if (!selectedAccount.value && accounts.value.length > 0) {
+    await setAccount(accounts.value[0])
+    await refreshValues()
+  } else {
+    emit('change')
+  }
+  mixpanel_track('AccountLogOut')
+}
+
+let showCard = ref(false)
+let card = ref(null)
+let button = ref(null)
+const handleClickOutside = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    card.value &&
+    card.value.$el !== event.target &&
+    !elements.includes(card.value.$el) &&
+    !button.value.contains(event.target)
+  ) {
+    showCard.value = false
+  }
+}
+
+const unlisten = await process_listener(async (e) => {
+  if (e.event === 'launched') {
+    await refreshValues()
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  unlisten()
+})
+</script>
+
+<style scoped lang="scss">
+.selected {
+  background: var(--color-brand-highlight);
+  border-radius: var(--radius-lg);
+  color: var(--color-contrast);
+  gap: 1rem;
+}
+
+.logged-out {
+  background: var(--color-bg);
+  border-radius: var(--radius-lg);
+  gap: 1rem;
+}
+
+.account {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: 0.5rem 1rem;
+
+  h4,
+  p {
+    margin: 0;
+  }
+}
+
+.account-card {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0.5rem;
+  left: 5.5rem;
+  z-index: 11;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--color-button-bg);
+  width: max-content;
+  user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  max-height: 98vh;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar-track {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  &::-webkit-scrollbar {
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.expanded {
+    left: 13.5rem;
+  }
+
+  &.isolated {
+    position: relative;
+    left: 0;
+    top: 0;
+  }
+}
+
+.accounts-title {
+  font-size: 1.2rem;
+  font-weight: bolder;
+}
+
+.account-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.option {
+  width: calc(100% - 2.25rem);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+
+  img {
+    margin-right: 0.5rem;
+  }
+}
+
+.icon {
+  --size: 1.5rem !important;
+}
+
+.account-row {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  vertical-align: center;
+  justify-content: space-between;
+  padding-right: 1rem;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.avatar-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--color-base);
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  width: 100%;
+  text-align: left;
+
+  &.expanded {
+    border: 1px solid var(--color-button-bg);
+    padding: 1rem;
+  }
+}
+
+.avatar-text {
+  margin: auto 0 auto 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.text {
+  width: 6rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.accounts-text {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0;
+}
+
+.qr-code {
+  background-color: white !important;
+  border-radius: var(--radius-md);
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-lg);
+  align-items: center;
+  padding: var(--gap-xl);
+
+  .modal-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-sm);
+    width: 100%;
+
+    h2,
+    p {
+      margin: 0;
+    }
+
+    .code-text {
+      display: flex;
+      flex-direction: row;
+      gap: var(--gap-xs);
+      align-items: center;
+
+      .code {
+        background-color: var(--color-bg);
+        border-radius: var(--radius-md);
+        border: solid 1px var(--color-button-bg);
+        font-family: var(--mono-font);
+        letter-spacing: var(--gap-md);
+        color: var(--color-contrast);
+        font-size: 2rem;
+        font-weight: bold;
+        padding: var(--gap-sm) 0 var(--gap-sm) var(--gap-md);
+      }
+
+      .btn {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.modal {
+  position: absolute;
+}
+
+.code {
+  color: var(--color-brand);
+  padding: 0.05rem 0.1rem;
+  // row not column
+  display: flex;
+
+  .card {
+    background: var(--color-base);
+    color: var(--color-contrast);
+    padding: 0.5rem 1rem;
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/Breadcrumbs.vue
+++ b/apps/app-frontend/src/components/ui/Breadcrumbs.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="breadcrumbs">
+    <Button class="breadcrumbs__back transparent" icon-only @click="$router.back()">
+      <ChevronLeftIcon />
+    </Button>
+    <Button class="breadcrumbs__forward transparent" icon-only @click="$router.forward()">
+      <ChevronRightIcon />
+    </Button>
+    {{ breadcrumbData.resetToNames(breadcrumbs) }}
+    <div v-for="breadcrumb in breadcrumbs" :key="breadcrumb.name" class="breadcrumbs__item">
+      <router-link
+        v-if="breadcrumb.link"
+        :to="{
+          path: breadcrumb.link.replace('{id}', encodeURIComponent($route.params.id)),
+          query: breadcrumb.query,
+        }"
+        >{{
+          breadcrumb.name.charAt(0) === '?'
+            ? breadcrumbData.getName(breadcrumb.name.slice(1))
+            : breadcrumb.name
+        }}
+      </router-link>
+      <span v-else class="selected">{{
+        breadcrumb.name.charAt(0) === '?'
+          ? breadcrumbData.getName(breadcrumb.name.slice(1))
+          : breadcrumb.name
+      }}</span>
+      <ChevronRightIcon v-if="breadcrumb.link" class="chevron" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ChevronRightIcon, ChevronLeftIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const breadcrumbData = useBreadcrumbs()
+const breadcrumbs = computed(() => {
+  const additionalContext =
+    route.meta.useContext === true
+      ? breadcrumbData.context
+      : route.meta.useRootContext === true
+        ? breadcrumbData.rootContext
+        : null
+  return additionalContext ? [additionalContext, ...route.meta.breadcrumb] : route.meta.breadcrumb
+})
+</script>
+
+<style scoped lang="scss">
+.breadcrumbs {
+  display: flex;
+  flex-direction: row;
+
+  .breadcrumbs__item {
+    display: flex;
+    flex-direction: row;
+    vertical-align: center;
+    margin: auto 0;
+
+    .chevron,
+    a {
+      margin: auto 0;
+    }
+  }
+
+  .breadcrumbs__back,
+  .breadcrumbs__forward {
+    margin: auto 0;
+    color: var(--color-base);
+    height: unset;
+    width: unset;
+  }
+
+  .breadcrumbs__forward {
+    margin-right: 1rem;
+  }
+}
+
+.selected {
+  color: var(--color-contrast);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ContextMenu.vue
+++ b/apps/app-frontend/src/components/ui/ContextMenu.vue
@@ -0,0 +1,176 @@
+<template>
+  <transition name="fade">
+    <div
+      v-show="shown"
+      ref="contextMenu"
+      class="context-menu"
+      :style="{
+        left: left,
+        top: top,
+      }"
+    >
+      <div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
+        <hr v-if="option.type === 'divider'" class="divider" />
+        <div
+          v-else-if="!(isLinkedData(item) && option.name === `add_content`)"
+          class="item clickable"
+          :class="[option.color ?? 'base']"
+        >
+          <slot :name="option.name" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const emit = defineEmits(['menu-closed', 'option-clicked'])
+
+const item = ref(null)
+const contextMenu = ref(null)
+const options = ref([])
+const left = ref('0px')
+const top = ref('0px')
+const shown = ref(false)
+
+defineExpose({
+  showMenu: (event, passedItem, passedOptions) => {
+    item.value = passedItem
+    options.value = passedOptions
+
+    const menuWidth = contextMenu.value.clientWidth
+    const menuHeight = contextMenu.value.clientHeight
+
+    if (menuWidth + event.pageX >= window.innerWidth) {
+      left.value = event.pageX - menuWidth + 2 + 'px'
+    } else {
+      left.value = event.pageX - 2 + 'px'
+    }
+
+    if (menuHeight + event.pageY >= window.innerHeight) {
+      top.value = event.pageY - menuHeight + 2 + 'px'
+    } else {
+      top.value = event.pageY - 2 + 'px'
+    }
+
+    shown.value = true
+  },
+})
+
+const isLinkedData = (item) => {
+  if (item.instance != undefined && item.instance.metadata.linked_data) {
+    return true
+  } else if (item.metadata != undefined && item.metadata.linked_data) {
+    return true
+  }
+  return false
+}
+
+const hideContextMenu = () => {
+  shown.value = false
+  emit('menu-closed')
+}
+
+const optionClicked = (option) => {
+  emit('option-clicked', {
+    item: item.value,
+    option: option,
+  })
+  hideContextMenu()
+}
+
+const onEscKeyRelease = (event) => {
+  if (event.keyCode === 27) {
+    hideContextMenu()
+  }
+}
+
+const handleClickOutside = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    contextMenu.value &&
+    contextMenu.value.$el !== event.target &&
+    !elements.includes(contextMenu.value.$el)
+  ) {
+    hideContextMenu()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+  document.body.addEventListener('keyup', onEscKeyRelease)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keyup', onEscKeyRelease)
+})
+</script>
+
+<style lang="scss" scoped>
+.context-menu {
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+  border: 1px solid var(--color-button-bg);
+  margin: 0;
+  position: fixed;
+  z-index: 1000000;
+  overflow: hidden;
+  padding: var(--gap-sm);
+
+  .item {
+    align-items: center;
+    color: var(--color-base);
+    cursor: pointer;
+    display: flex;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm);
+    border-radius: var(--radius-sm);
+
+    &:hover,
+    &:active {
+      &.base {
+        background-color: var(--color-button-bg);
+        color: var(--color-contrast);
+      }
+
+      &.primary {
+        background-color: var(--color-brand);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+
+      &.danger {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+
+      &.contrast {
+        background-color: var(--color-orange);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .divider {
+    border: 1px solid var(--color-button-bg);
+    margin: var(--gap-sm);
+    pointer-events: none;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ErrorModal.vue
+++ b/apps/app-frontend/src/components/ui/ErrorModal.vue
@@ -0,0 +1,226 @@
+<script setup>
+import { XIcon, IssuesIcon, LogInIcon } from '@modrinth/assets'
+import { Modal } from '@modrinth/ui'
+import { ChatIcon } from '@/assets/icons'
+import { ref } from 'vue'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleError } from '@/store/notifications.js'
+import mixpanel from 'mixpanel-browser'
+import { handleSevereError } from '@/store/error.js'
+
+const errorModal = ref()
+const error = ref()
+
+const title = ref('An error occurred')
+const errorType = ref('unknown')
+const supportLink = ref('https://support.modrinth.com')
+const metadata = ref({})
+
+defineExpose({
+  async show(errorVal) {
+    if (errorVal.message && errorVal.message.includes('Minecraft authentication error:')) {
+      title.value = 'Unable to sign in to Minecraft'
+      errorType.value = 'minecraft_auth'
+      supportLink.value =
+        'https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues'
+
+      if (
+        errorVal.message.includes('existing connection was forcibly closed') ||
+        errorVal.message.includes('error sending request for url')
+      ) {
+        metadata.value.network = true
+      }
+      if (errorVal.message.includes('because the target machine actively refused it')) {
+        metadata.value.hostsFile = true
+      }
+    } else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
+      title.value = 'Sign in to Minecraft'
+      errorType.value = 'minecraft_sign_in'
+      supportLink.value = 'https://support.modrinth.com'
+    } else {
+      title.value = 'An error occurred'
+      errorType.value = 'unknown'
+      supportLink.value = 'https://support.modrinth.com'
+      metadata.value = {}
+    }
+
+    error.value = errorVal
+    errorModal.value.show()
+  },
+})
+
+const loadingMinecraft = ref(false)
+async function loginMinecraft() {
+  try {
+    loadingMinecraft.value = true
+    const loggedIn = await login_flow()
+
+    if (loggedIn) {
+      await set_default_user(loggedIn.id).catch(handleError)
+    }
+
+    await mixpanel.track('AccountLogIn')
+    loadingMinecraft.value = false
+    errorModal.value.hide()
+  } catch (err) {
+    loadingMinecraft.value = false
+    handleSevereError(err)
+  }
+}
+</script>
+
+<template>
+  <Modal ref="errorModal" :header="title">
+    <div class="modal-body">
+      <div class="markdown-body">
+        <template v-if="errorType === 'minecraft_auth'">
+          <template v-if="metadata.network">
+            <h3>Network issues</h3>
+            <p>
+              It looks like there were issues with the Modrinth App connecting to Microsoft's
+              servers. This is often the result of a poor connection, so we recommend trying again
+              to see if it works. If issues continue to persist, follow the steps in
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_e71a5f805f"
+              >
+                our support article
+              </a>
+              to troubleshoot.
+            </p>
+          </template>
+          <template v-else-if="metadata.hostsFile">
+            <h3>Network issues</h3>
+            <p>
+              The Modrinth App tried to connect to Microsoft / Xbox / Minecraft services, but the
+              remote server rejected the connection. This may indicate that these services are
+              blocked by the hosts file. Please visit
+              <a
+                href="https://support.modrinth.com/en/articles/9038231-minecraft-sign-in-issues#h_d694a29256"
+              >
+                our support article
+              </a>
+              for steps on how to fix the issue.
+            </p>
+          </template>
+          <template v-else>
+            <h3>Try another Microsoft account</h3>
+            <p>
+              Double check you've signed in with the right account. You may own Minecraft on a
+              different Microsoft account.
+            </p>
+            <div class="cta-button">
+              <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+                <LogInIcon /> Try another account
+              </button>
+            </div>
+            <h3>Using PC Game Pass, coming from Bedrock, or just bought the game?</h3>
+            <p>
+              Try signing in with the
+              <a href="https://www.minecraft.net/en-us/download">official Minecraft Launcher</a>
+              first. Once you're done, come back here and sign in!
+            </p>
+          </template>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Try signing in again
+            </button>
+          </div>
+          <hr />
+          <p>
+            If nothing is working and you need help, visit
+            <a :href="supportLink">our support page</a>
+            and start a chat using the widget in the bottom right and we will be more than happy to
+            assist! Make sure to provide the following debug information to the agent:
+          </p>
+          <details>
+            <summary>Debug information</summary>
+            {{ error.message ?? error }}
+          </details>
+        </template>
+        <div v-else-if="errorType === 'minecraft_sign_in'">
+          <div class="warning-banner">
+            <div class="warning-banner__title">
+              <IssuesIcon />
+              <span>Installed the app before April 23rd, 2024?</span>
+            </div>
+            <div class="warning-banner__description">
+              Modrinth has updated our sign-in workflow to allow for better stability, security, and
+              performance. You must sign in again so your credentials can be upgraded to this new
+              flow.
+            </div>
+          </div>
+          <p>
+            To play this instance, you must sign in through Microsoft below. If you don't have a
+            Minecraft account, you can purchase the game on the
+            <a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+              >Minecraft website</a
+            >.
+          </p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Sign in to Minecraft
+            </button>
+          </div>
+        </div>
+        <template v-else>
+          {{ error.message ?? error }}
+        </template>
+      </div>
+      <div class="input-group push-right">
+        <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
+        <button class="btn" @clicdck="errorModal.hide()"><XIcon /> Close</button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style>
+.light-mode {
+  --color-orange-bg: rgba(255, 163, 71, 0.2);
+}
+
+.dark-mode,
+.oled-mode {
+  --color-orange-bg: rgba(224, 131, 37, 0.2);
+}
+</style>
+
+<style scoped lang="scss">
+.cta-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.warning-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: var(--gap-lg);
+  background-color: var(--color-orange-bg);
+  border: 2px solid var(--color-orange);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.warning-banner__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+
+  svg {
+    color: var(--color-orange);
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ExportModal.vue
+++ b/apps/app-frontend/src/components/ui/ExportModal.vue
@@ -0,0 +1,305 @@
+<script setup>
+import { XIcon, PlusIcon } from '@modrinth/assets'
+import { Button, Checkbox, Modal } from '@modrinth/ui'
+import { PackageIcon, VersionIcon } from '@/assets/icons'
+import { ref } from 'vue'
+import { export_profile_mrpack, get_pack_export_candidates } from '@/helpers/profile.js'
+import { open } from '@tauri-apps/api/dialog'
+import { handleError } from '@/store/notifications.js'
+import { useTheming } from '@/store/theme'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+})
+
+defineExpose({
+  show: () => {
+    exportModal.value.show()
+    initFiles()
+  },
+})
+
+const exportModal = ref(null)
+const nameInput = ref(props.instance.metadata.name)
+const exportDescription = ref('')
+const versionInput = ref('1.0.0')
+const files = ref([])
+const folders = ref([])
+const showingFiles = ref(false)
+
+const themeStore = useTheming()
+
+const initFiles = async () => {
+  const newFolders = new Map()
+  const sep = '/'
+  files.value = []
+  await get_pack_export_candidates(props.instance.path).then((filePaths) =>
+    filePaths
+      .map((folder) => ({
+        path: folder,
+        name: folder.split(sep).pop(),
+        selected:
+          folder.startsWith('mods') ||
+          folder.startsWith('datapacks') ||
+          folder.startsWith('resourcepacks') ||
+          folder.startsWith('shaderpacks') ||
+          folder.startsWith('config'),
+        disabled:
+          folder === 'profile.json' ||
+          folder.startsWith('modrinth_logs') ||
+          folder.startsWith('.fabric') ||
+          folder.includes('.DS_Store'),
+      }))
+      .forEach((pathData) => {
+        const parent = pathData.path.split(sep).slice(0, -1).join(sep)
+        if (parent !== '') {
+          if (newFolders.has(parent)) {
+            newFolders.get(parent).push(pathData)
+          } else {
+            newFolders.set(parent, [pathData])
+          }
+        } else {
+          files.value.push(pathData)
+        }
+      }),
+  )
+  folders.value = [...newFolders.entries()].map(([name, value]) => [
+    {
+      name,
+      showingMore: false,
+    },
+    value,
+  ])
+}
+
+await initFiles()
+
+const exportPack = async () => {
+  const filesToExport = files.value.filter((file) => file.selected).map((file) => file.path)
+  folders.value.forEach((args) => {
+    args[1].forEach((child) => {
+      if (child.selected) {
+        filesToExport.push(child.path)
+      }
+    })
+  })
+  const outputPath = await open({
+    directory: true,
+    multiple: false,
+  })
+
+  if (outputPath) {
+    export_profile_mrpack(
+      props.instance.path,
+      outputPath + `/${nameInput.value} ${versionInput.value}.mrpack`,
+      filesToExport,
+      versionInput.value,
+      exportDescription.value,
+      nameInput.value,
+    ).catch((err) => handleError(err))
+    exportModal.value.hide()
+  }
+}
+</script>
+
+<template>
+  <Modal ref="exportModal" header="Export modpack" :noblur="!themeStore.advancedRendering">
+    <div class="modal-body">
+      <div class="labeled_input">
+        <p>Modpack Name</p>
+        <div class="iconified-input">
+          <PackageIcon />
+          <input v-model="nameInput" type="text" placeholder="Modpack name" class="input" />
+          <Button @click="nameInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="labeled_input">
+        <p>Version number</p>
+        <div class="iconified-input">
+          <VersionIcon />
+          <input v-model="versionInput" type="text" placeholder="1.0.0" class="input" />
+          <Button @click="versionInput = ''">
+            <XIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="adjacent-input">
+        <div class="labeled_input">
+          <p>Description</p>
+
+          <div class="textarea-wrapper">
+            <textarea v-model="exportDescription" placeholder="Enter modpack description..." />
+          </div>
+        </div>
+      </div>
+
+      <div class="table">
+        <div class="table-head">
+          <div class="table-cell row-wise">
+            Select files and folders to include in pack
+            <Button
+              class="sleek-primary collapsed-button"
+              icon-only
+              @click="() => (showingFiles = !showingFiles)"
+            >
+              <PlusIcon v-if="!showingFiles" />
+              <XIcon v-else />
+            </Button>
+          </div>
+        </div>
+        <div v-if="showingFiles" class="table-content">
+          <div v-for="[path, children] of folders" :key="path.name" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  :model-value="children.every((child) => child.selected)"
+                  :label="path.name"
+                  class="select-checkbox"
+                  :disabled="children.every((x) => x.disabled)"
+                  @update:model-value="
+                    (newValue) => children.forEach((child) => (child.selected = newValue))
+                  "
+                />
+                <Checkbox
+                  v-model="path.showingMore"
+                  class="select-checkbox dropdown"
+                  collapsing-toggle-style
+                />
+              </div>
+              <div v-if="path.showingMore" class="file-secondary">
+                <div v-for="child in children" :key="child.path" class="file-secondary-row">
+                  <Checkbox
+                    v-model="child.selected"
+                    :label="child.name"
+                    class="select-checkbox"
+                    :disabled="child.disabled"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-for="file in files" :key="file.path" class="table-row">
+            <div class="table-cell file-entry">
+              <div class="file-primary">
+                <Checkbox
+                  v-model="file.selected"
+                  :label="file.name"
+                  :disabled="file.disabled"
+                  class="select-checkbox"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="button-row push-right">
+        <Button @click="exportModal.hide">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" @click="exportPack">
+          <PackageIcon />
+          Export
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.labeled_input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+
+  p {
+    margin: 0;
+  }
+}
+
+.select-checkbox {
+  gap: var(--gap-sm);
+
+  button.checkbox {
+    border: none;
+  }
+
+  &.dropdown {
+    margin-left: auto;
+  }
+}
+
+.table-content {
+  max-height: 18rem;
+  overflow-y: auto;
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.file-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+
+.file-primary {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.file-secondary {
+  margin-left: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  height: 100%;
+  vertical-align: center;
+}
+
+.file-secondary-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.button-row {
+  display: flex;
+  gap: var(--gap-sm);
+  align-items: center;
+}
+
+.row-wise {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.textarea-wrapper {
+  // margin-top: 1rem;
+  height: 12rem;
+
+  textarea {
+    max-height: 12rem;
+  }
+
+  .preview {
+    overflow-y: auto;
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/IncompatibilityWarningModal.vue
+++ b/apps/app-frontend/src/components/ui/IncompatibilityWarningModal.vue
@@ -0,0 +1,176 @@
+<template>
+  <Modal
+    ref="incompatibleModal"
+    header="Incompatibility warning"
+    :noblur="!themeStore.advancedRendering"
+  >
+    <div class="modal-body">
+      <p>
+        This {{ versions?.length > 0 ? 'project' : 'version' }} is not compatible with the instance
+        you're trying to install it on. Are you sure you want to continue? Dependencies will not be
+        installed.
+      </p>
+      <table>
+        <tr class="header">
+          <th>{{ instance?.metadata.name }}</th>
+          <th>{{ projectTitle }}</th>
+        </tr>
+        <tr class="content">
+          <td class="data">
+            {{ instance?.metadata.loader }} {{ instance?.metadata.game_version }}
+          </td>
+          <td>
+            <DropdownSelect
+              v-if="versions?.length > 1"
+              v-model="selectedVersion"
+              :options="versions"
+              placeholder="Select version"
+              name="Version select"
+              :display-name="
+                (version) =>
+                  `${version?.name} (${version?.loaders
+                    .map((name) => formatCategory(name))
+                    .join(', ')} - ${version?.game_versions.join(', ')})`
+              "
+              render-up
+            />
+            <span v-else>
+              <span>
+                {{ selectedVersion?.name }} ({{
+                  selectedVersion?.loaders.map((name) => formatCategory(name)).join(', ')
+                }}
+                - {{ selectedVersion?.game_versions.join(', ') }})
+              </span>
+            </span>
+          </td>
+        </tr>
+      </table>
+      <div class="button-group">
+        <Button @click="() => incompatibleModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" :disabled="installing" @click="install()">
+          <DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, Modal, DropdownSelect } from '@modrinth/ui'
+import { formatCategory } from '@modrinth/utils'
+import { add_project_from_version as installMod } from '@/helpers/profile'
+import { ref } from 'vue'
+import { handleError, useTheming } from '@/store/state.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+
+const themeStore = useTheming()
+
+const instance = ref(null)
+const project = ref(null)
+const projectType = ref(null)
+const projectTitle = ref(null)
+const versions = ref(null)
+const selectedVersion = ref(null)
+const incompatibleModal = ref(null)
+const installing = ref(false)
+
+let markInstalled = () => {}
+
+defineExpose({
+  show: (
+    instanceVal,
+    projectTitleVal,
+    selectedVersions,
+    extMarkInstalled,
+    projectIdVal,
+    projectTypeVal,
+  ) => {
+    instance.value = instanceVal
+    projectTitle.value = projectTitleVal
+    versions.value = selectedVersions
+    selectedVersion.value = selectedVersions[0]
+
+    project.value = projectIdVal
+    projectType.value = projectTypeVal
+
+    incompatibleModal.value.show()
+    markInstalled = extMarkInstalled
+
+    mixpanel_track('ProjectInstallStart', { source: 'ProjectIncompatibilityWarningModal' })
+  },
+})
+
+const install = async () => {
+  installing.value = true
+  await installMod(instance.value.path, selectedVersion.value.id).catch(handleError)
+  installing.value = false
+  markInstalled()
+  incompatibleModal.value.hide()
+
+  mixpanel_track('ProjectInstall', {
+    loader: instance.value.metadata.loader,
+    game_version: instance.value.metadata.game_version,
+    id: project.value,
+    version_id: selectedVersion.value.id,
+    project_type: projectType.value,
+    title: projectTitle.value,
+    source: 'ProjectIncompatibilityWarningModal',
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.data {
+  text-transform: capitalize;
+}
+
+table {
+  width: 100%;
+  border-radius: var(--radius-lg);
+  border-collapse: collapse;
+  box-shadow: 0 0 0 1px var(--color-button-bg);
+}
+
+th {
+  text-align: left;
+  padding: 1rem;
+  background-color: var(--color-bg);
+  overflow: hidden;
+  border-bottom: 1px solid var(--color-button-bg);
+}
+
+th:first-child {
+  border-top-left-radius: var(--radius-lg);
+  border-right: 1px solid var(--color-button-bg);
+}
+
+th:last-child {
+  border-top-right-radius: var(--radius-lg);
+}
+
+td {
+  padding: 1rem;
+}
+
+td:first-child {
+  border-right: 1px solid var(--color-button-bg);
+}
+
+.button-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+
+  :deep(.animated-dropdown .options) {
+    max-height: 13.375rem;
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/InstallConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/InstallConfirmModal.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { XIcon, DownloadIcon } from '@modrinth/assets'
+import { Button, Modal } from '@modrinth/ui'
+import { install as pack_install } from '@/helpers/pack'
+import { ref } from 'vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/theme.js'
+import { handleError } from '@/store/state.js'
+
+const themeStore = useTheming()
+
+const version = ref('')
+const title = ref('')
+const projectId = ref('')
+const icon = ref('')
+const confirmModal = ref(null)
+const installing = ref(false)
+
+defineExpose({
+  show: (projectIdVal, versionId, projectTitle, projectIcon) => {
+    projectId.value = projectIdVal
+    version.value = versionId
+    title.value = projectTitle
+    icon.value = projectIcon
+    installing.value = false
+    confirmModal.value.show()
+
+    mixpanel_track('PackInstallStart')
+  },
+})
+
+async function install() {
+  installing.value = true
+  console.log(`Installing ${projectId.value} ${version.value} ${title.value} ${icon.value}`)
+  confirmModal.value.hide()
+  await pack_install(
+    projectId.value,
+    version.value,
+    title.value,
+    icon.value ? icon.value : null,
+  ).catch(handleError)
+  mixpanel_track('PackInstall', {
+    id: projectId.value,
+    version_id: version.value,
+    title: title.value,
+    source: 'ConfirmModal',
+  })
+}
+</script>
+
+<template>
+  <Modal ref="confirmModal" header="Are you sure?" :noblur="!themeStore.advancedRendering">
+    <div class="modal-body">
+      <p>You already have this modpack installed. Are you sure you want to install it again?</p>
+      <div class="input-group push-right">
+        <Button @click="() => $refs.confirmModal.hide()"><XIcon />Cancel</Button>
+        <Button color="primary" :disabled="installing" @click="install()"
+          ><DownloadIcon /> {{ installing ? 'Installing' : 'Install' }}</Button
+        >
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/Instance.vue
+++ b/apps/app-frontend/src/components/ui/Instance.vue
@@ -0,0 +1,356 @@
+<script setup>
+import { onUnmounted, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { DownloadIcon, StopCircleIcon, PlayIcon } from '@modrinth/assets'
+import { Card, Avatar, AnimatedLogo } from '@modrinth/ui'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import { install as pack_install } from '@/helpers/pack'
+import { list, run } from '@/helpers/profile'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process'
+import { process_listener } from '@/helpers/events'
+import { useFetch } from '@/helpers/fetch.js'
+import { handleError } from '@/store/state.js'
+import { showProfileInFolder } from '@/helpers/utils.js'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { handleSevereError } from '@/store/error.js'
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const confirmModal = ref(null)
+const modInstallModal = ref(null)
+const playing = ref(false)
+
+const uuid = ref(null)
+const modLoading = ref(
+  props.instance.install_stage ? props.instance.install_stage !== 'installed' : false,
+)
+
+watch(
+  () => props.instance,
+  () => {
+    modLoading.value = props.instance.install_stage
+      ? props.instance.install_stage !== 'installed'
+      : false
+  },
+)
+
+const router = useRouter()
+
+const seeInstance = async () => {
+  const instancePath = props.instance.metadata
+    ? `/instance/${encodeURIComponent(props.instance.path)}/`
+    : `/project/${encodeURIComponent(props.instance.project_id)}/`
+
+  await router.push(instancePath)
+}
+
+const checkProcess = async () => {
+  const runningPaths = await get_all_running_profile_paths().catch(handleError)
+
+  if (runningPaths.includes(props.instance.path)) {
+    playing.value = true
+    return
+  }
+
+  playing.value = false
+  uuid.value = null
+}
+
+const install = async (e) => {
+  e?.stopPropagation()
+  modLoading.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.instance.project_id}/version`,
+    'project versions',
+  )
+
+  if (props.instance.project_type === 'modpack') {
+    const packs = Object.values(await list(true).catch(handleError))
+
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.instance.project_id)
+    ) {
+      modLoading.value = true
+      await pack_install(
+        props.instance.project_id,
+        versions[0].id,
+        props.instance.title,
+        props.instance.icon_url,
+      ).catch(handleError)
+      modLoading.value = false
+
+      mixpanel_track('PackInstall', {
+        id: props.instance.project_id,
+        version_id: versions[0].id,
+        title: props.instance.title,
+        source: 'InstanceCard',
+      })
+    } else
+      confirmModal.value.show(
+        props.instance.project_id,
+        versions[0].id,
+        props.instance.title,
+        props.instance.icon_url,
+      )
+  } else {
+    modInstallModal.value.show(
+      props.instance.project_id,
+      versions,
+      props.instance.title,
+      props.instance.project_type,
+    )
+  }
+
+  modLoading.value = false
+}
+
+const play = async (e, context) => {
+  e?.stopPropagation()
+  modLoading.value = true
+  uuid.value = await run(props.instance.path).catch(handleSevereError)
+  modLoading.value = false
+  playing.value = true
+
+  mixpanel_track('InstancePlay', {
+    loader: props.instance.metadata.loader,
+    game_version: props.instance.metadata.game_version,
+    source: context,
+  })
+}
+
+const stop = async (e, context) => {
+  e?.stopPropagation()
+  playing.value = false
+
+  // If we lost the uuid for some reason, such as a user navigating
+  // from-then-back to this page, we will get all uuids by the instance path.
+  // For-each uuid, kill the process.
+  if (!uuid.value) {
+    const uuids = await get_uuids_by_profile_path(props.instance.path).catch(handleError)
+    uuid.value = uuids[0]
+    uuids.forEach(async (u) => await kill_by_uuid(u).catch(handleError))
+  } else await kill_by_uuid(uuid.value).catch(handleError) // If we still have the uuid, just kill it
+
+  mixpanel_track('InstanceStop', {
+    loader: props.instance.metadata.loader,
+    game_version: props.instance.metadata.game_version,
+    source: context,
+  })
+
+  uuid.value = null
+}
+
+const openFolder = async () => {
+  await showProfileInFolder(props.instance.path)
+}
+
+const addContent = async () => {
+  await router.push({
+    path: `/browse/${props.instance.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+    query: { i: props.instance.path },
+  })
+}
+
+defineExpose({
+  install,
+  playing,
+  play,
+  stop,
+  seeInstance,
+  openFolder,
+  addContent,
+  instance: props.instance,
+})
+
+const unlisten = await process_listener((e) => {
+  if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
+})
+
+onUnmounted(() => unlisten())
+</script>
+
+<template>
+  <div class="instance">
+    <Card class="instance-card-item button-base" @click="seeInstance" @mouseenter="checkProcess">
+      <Avatar
+        size="lg"
+        :src="
+          props.instance.metadata
+            ? !props.instance.metadata.icon ||
+              (props.instance.metadata.icon && props.instance.metadata.icon.startsWith('http'))
+              ? props.instance.metadata.icon
+              : convertFileSrc(props.instance.metadata?.icon)
+            : props.instance.icon_url
+        "
+        alt="Mod card"
+        class="mod-image"
+      />
+      <div class="project-info">
+        <p class="title">{{ props.instance.metadata?.name || props.instance.title }}</p>
+        <p class="description">
+          {{ props.instance.metadata?.loader }}
+          {{ props.instance.metadata?.game_version || props.instance.latest_version }}
+        </p>
+      </div>
+    </Card>
+    <div
+      v-if="props.instance.metadata && playing === false && modLoading === false"
+      class="install cta button-base"
+      @click="(e) => play(e, 'InstanceCard')"
+    >
+      <PlayIcon />
+    </div>
+    <div v-else-if="modLoading === true && playing === false" class="cta loading-cta">
+      <AnimatedLogo class="loading-indicator" />
+    </div>
+    <div
+      v-else-if="playing === true"
+      class="stop cta button-base"
+      @click="(e) => stop(e, 'InstanceCard')"
+      @mousehover="checkProcess"
+    >
+      <StopCircleIcon />
+    </div>
+    <div v-else class="install cta button-base" @click="install"><DownloadIcon /></div>
+    <InstallConfirmModal ref="confirmModal" />
+    <ModInstallModal ref="modInstallModal" />
+  </div>
+</template>
+
+<style lang="scss">
+.loading-indicator {
+  width: 2.5rem !important;
+  height: 2.5rem !important;
+
+  svg {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.instance {
+  position: relative;
+
+  &:hover {
+    .cta {
+      opacity: 1;
+      bottom: calc(var(--gap-md) + 4.25rem);
+    }
+  }
+}
+
+.cta {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+  right: calc(var(--gap-md) * 2);
+  bottom: 3.25rem;
+  opacity: 0;
+  transition:
+    0.2s ease-in-out bottom,
+    0.2s ease-in-out opacity,
+    0.1s ease-in-out filter !important;
+  cursor: pointer;
+  box-shadow: var(--shadow-floating);
+
+  svg {
+    color: var(--color-accent-contrast);
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+  }
+
+  &.install {
+    background: var(--color-brand);
+    display: flex;
+  }
+
+  &.stop {
+    background: var(--color-red);
+    display: flex;
+  }
+
+  &.loading-cta {
+    background: hsl(220, 11%, 10%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.instance-card-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: var(--gap-md);
+  transition: 0.1s ease-in-out all !important; /* overrides Omorphia defaults */
+  margin-bottom: 0;
+
+  .mod-image {
+    --size: 100%;
+
+    width: 100% !important;
+    height: auto !important;
+    max-width: unset !important;
+    max-height: unset !important;
+    aspect-ratio: 1 / 1 !important;
+  }
+
+  .project-info {
+    margin-top: 1rem;
+    width: 100%;
+
+    .title {
+      color: var(--color-contrast);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      width: 100%;
+      margin: 0;
+      font-weight: 600;
+      font-size: 1rem;
+      line-height: 110%;
+      display: inline-block;
+    }
+
+    .description {
+      color: var(--color-base);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-weight: 500;
+      font-size: 0.775rem;
+      line-height: 125%;
+      margin: 0.25rem 0 0;
+      text-transform: capitalize;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
+++ b/apps/app-frontend/src/components/ui/InstanceCreationModal.vue
@@ -0,0 +1,679 @@
+<template>
+  <Modal ref="modal" header="Create instance" :noblur="!themeStore.advancedRendering">
+    <div class="modal-header">
+      <Chips v-model="creationType" :items="['custom', 'from file', 'import from launcher']" />
+    </div>
+    <hr class="card-divider" />
+    <div v-if="creationType === 'custom'" class="modal-body">
+      <div class="image-upload">
+        <Avatar :src="display_icon" size="md" :rounded="true" />
+        <div class="image-input">
+          <Button @click="upload_icon()">
+            <UploadIcon />
+            Select icon
+          </Button>
+          <Button :disabled="!display_icon" @click="reset_icon">
+            <XIcon />
+            Remove icon
+          </Button>
+        </div>
+      </div>
+      <div class="input-row">
+        <p class="input-label">Name</p>
+        <input
+          v-model="profile_name"
+          autocomplete="off"
+          class="text-input"
+          type="text"
+          maxlength="100"
+        />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Loader</p>
+        <Chips v-model="loader" :items="loaders" />
+      </div>
+      <div class="input-row">
+        <p class="input-label">Game version</p>
+        <div class="versions">
+          <multiselect
+            v-model="game_version"
+            class="selector"
+            :options="game_versions"
+            :multiple="false"
+            :searchable="true"
+            placeholder="Select game version"
+            open-direction="top"
+            :show-labels="false"
+          />
+          <Checkbox
+            v-if="showAdvanced"
+            v-model="showSnapshots"
+            class="filter-checkbox"
+            label="Include snapshots"
+          />
+        </div>
+      </div>
+      <div v-if="showAdvanced && loader !== 'vanilla'" class="input-row">
+        <p class="input-label">Loader version</p>
+        <Chips v-model="loader_version" :items="['stable', 'latest', 'other']" />
+      </div>
+      <div v-if="showAdvanced && loader_version === 'other' && loader !== 'vanilla'">
+        <div v-if="game_version" class="input-row">
+          <p class="input-label">Select version</p>
+          <multiselect
+            v-model="specified_loader_version"
+            class="selector"
+            :options="selectable_versions"
+            :searchable="true"
+            placeholder="Select loader version"
+            open-direction="top"
+            :show-labels="false"
+          />
+        </div>
+        <div v-else class="input-row">
+          <p class="warning">Select a game version before you select a loader version</p>
+        </div>
+      </div>
+      <div class="input-group push-right">
+        <Button @click="toggle_advanced">
+          <CodeIcon />
+          {{ showAdvanced ? 'Hide advanced' : 'Show advanced' }}
+        </Button>
+        <Button @click="hide()">
+          <XIcon />
+          Cancel
+        </Button>
+        <Button color="primary" :disabled="!check_valid || creating" @click="create_instance()">
+          <PlusIcon v-if="!creating" />
+          {{ creating ? 'Creating...' : 'Create' }}
+        </Button>
+      </div>
+    </div>
+    <div v-else-if="creationType === 'from file'" class="modal-body">
+      <Button @click="openFile"> <FolderOpenIcon /> Import from file </Button>
+      <div class="info"><InfoIcon /> Or drag and drop your .mrpack file</div>
+    </div>
+    <div v-else class="modal-body">
+      <Chips
+        v-model="selectedProfileType"
+        :items="profileOptions"
+        :format-label="(profile) => profile?.name"
+      />
+      <div class="path-selection">
+        <h3>{{ selectedProfileType.name }} path</h3>
+        <div class="path-input">
+          <div class="iconified-input">
+            <FolderOpenIcon />
+            <input
+              v-model="selectedProfileType.path"
+              type="text"
+              placeholder="Path to launcher"
+              @change="setPath"
+            />
+            <Button @click="() => (selectedLauncherPath = '')">
+              <XIcon />
+            </Button>
+          </div>
+          <Button icon-only @click="selectLauncherPath">
+            <FolderSearchIcon />
+          </Button>
+          <Button icon-only @click="reload">
+            <UpdatedIcon />
+          </Button>
+        </div>
+      </div>
+      <div class="table">
+        <div class="table-head table-row">
+          <div class="toggle-all table-cell">
+            <Checkbox
+              class="select-checkbox"
+              :model-value="
+                profiles.get(selectedProfileType.name)?.every((child) => child.selected)
+              "
+              @update:model-value="
+                (newValue) =>
+                  profiles
+                    .get(selectedProfileType.name)
+                    ?.forEach((child) => (child.selected = newValue))
+              "
+            />
+          </div>
+          <div class="name-cell table-cell">Profile name</div>
+        </div>
+        <div
+          v-if="
+            profiles.get(selectedProfileType.name) &&
+            profiles.get(selectedProfileType.name).length > 0
+          "
+          class="table-content"
+        >
+          <div
+            v-for="(profile, index) in profiles.get(selectedProfileType.name)"
+            :key="index"
+            class="table-row"
+          >
+            <div class="checkbox-cell table-cell">
+              <Checkbox v-model="profile.selected" class="select-checkbox" />
+            </div>
+            <div class="name-cell table-cell">
+              {{ profile.name }}
+            </div>
+          </div>
+        </div>
+        <div v-else class="table-content empty">No profiles found</div>
+      </div>
+      <div class="button-row">
+        <Button
+          :disabled="
+            loading ||
+            !Array.from(profiles.values())
+              .flatMap((e) => e)
+              .some((e) => e.selected)
+          "
+          color="primary"
+          @click="next"
+        >
+          {{
+            loading
+              ? 'Importing...'
+              : Array.from(profiles.values())
+                    .flatMap((e) => e)
+                    .some((e) => e.selected)
+                ? `Import ${
+                    Array.from(profiles.values())
+                      .flatMap((e) => e)
+                      .filter((e) => e.selected).length
+                  } profiles`
+                : 'Select profiles to import'
+          }}
+        </Button>
+        <ProgressBar
+          v-if="loading"
+          :progress="(importedProfiles / (totalProfiles + 0.0001)) * 100"
+        />
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<script setup>
+import {
+  PlusIcon,
+  UploadIcon,
+  XIcon,
+  CodeIcon,
+  FolderOpenIcon,
+  InfoIcon,
+  FolderSearchIcon,
+  UpdatedIcon,
+} from '@modrinth/assets'
+import { Avatar, Button, Chips, Modal, Checkbox } from '@modrinth/ui'
+import { computed, onUnmounted, ref, shallowRef } from 'vue'
+import { get_loaders } from '@/helpers/tags'
+import { create } from '@/helpers/profile'
+import { open } from '@tauri-apps/api/dialog'
+import { tauri } from '@tauri-apps/api'
+import {
+  get_game_versions,
+  get_fabric_versions,
+  get_forge_versions,
+  get_quilt_versions,
+  get_neoforge_versions,
+} from '@/helpers/metadata'
+import { handleError } from '@/store/notifications.js'
+import Multiselect from 'vue-multiselect'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/state.js'
+import { listen } from '@tauri-apps/api/event'
+import { install_from_file } from '@/helpers/pack.js'
+import {
+  get_default_launcher_path,
+  get_importable_instances,
+  import_instance,
+} from '@/helpers/import.js'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+
+const themeStore = useTheming()
+
+const profile_name = ref('')
+const game_version = ref('')
+const loader = ref('vanilla')
+const loader_version = ref('stable')
+const specified_loader_version = ref('')
+const icon = ref(null)
+const display_icon = ref(null)
+const showAdvanced = ref(false)
+const creating = ref(false)
+const showSnapshots = ref(false)
+const creationType = ref('from file')
+const isShowing = ref(false)
+
+defineExpose({
+  show: async () => {
+    game_version.value = ''
+    specified_loader_version.value = ''
+    profile_name.value = ''
+    creating.value = false
+    showAdvanced.value = false
+    showSnapshots.value = false
+    loader.value = 'vanilla'
+    loader_version.value = 'stable'
+    icon.value = null
+    display_icon.value = null
+    isShowing.value = true
+    modal.value.show()
+
+    unlistener.value = await listen('tauri://file-drop', async (event) => {
+      // Only if modal is showing
+      if (!isShowing.value) return
+      if (creationType.value !== 'from file') return
+      hide()
+      if (event.payload && event.payload.length > 0 && event.payload[0].endsWith('.mrpack')) {
+        await install_from_file(event.payload[0]).catch(handleError)
+        mixpanel_track('InstanceCreate', {
+          source: 'CreationModalFileDrop',
+        })
+      }
+    })
+
+    mixpanel_track('InstanceCreateStart', { source: 'CreationModal' })
+  },
+})
+
+const unlistener = ref(null)
+const hide = () => {
+  isShowing.value = false
+  modal.value.hide()
+  if (unlistener.value) {
+    unlistener.value()
+    unlistener.value = null
+  }
+}
+onUnmounted(() => {
+  if (unlistener.value) {
+    unlistener.value()
+    unlistener.value = null
+  }
+})
+
+const [
+  fabric_versions,
+  forge_versions,
+  quilt_versions,
+  neoforge_versions,
+  all_game_versions,
+  loaders,
+] = await Promise.all([
+  get_fabric_versions().then(shallowRef).catch(handleError),
+  get_forge_versions().then(shallowRef).catch(handleError),
+  get_quilt_versions().then(shallowRef).catch(handleError),
+  get_neoforge_versions().then(shallowRef).catch(handleError),
+  get_game_versions().then(shallowRef).catch(handleError),
+  get_loaders()
+    .then((value) =>
+      value
+        .filter((item) => item.supported_project_types.includes('modpack'))
+        .map((item) => item.name.toLowerCase()),
+    )
+    .then(ref)
+    .catch(handleError),
+])
+loaders.value.unshift('vanilla')
+
+const game_versions = computed(() => {
+  return all_game_versions.value.versions
+    .filter((item) => {
+      let defaultVal = item.type === 'release' || showSnapshots.value
+      if (loader.value === 'fabric') {
+        defaultVal &= fabric_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'forge') {
+        defaultVal &= forge_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'quilt') {
+        defaultVal &= quilt_versions.value.gameVersions.some((x) => item.id === x.id)
+      } else if (loader.value === 'neoforge') {
+        defaultVal &= neoforge_versions.value.gameVersions.some((x) => item.id === x.id)
+      }
+
+      return defaultVal
+    })
+    .map((item) => item.id)
+})
+
+const modal = ref(null)
+
+const check_valid = computed(() => {
+  return (
+    profile_name.value.trim() &&
+    game_version.value &&
+    game_versions.value.includes(game_version.value)
+  )
+})
+
+const create_instance = async () => {
+  creating.value = true
+  const loader_version_value =
+    loader_version.value === 'other' ? specified_loader_version.value : loader_version.value
+  const loaderVersion = loader.value === 'vanilla' ? null : loader_version_value ?? 'stable'
+
+  hide()
+  creating.value = false
+
+  await create(
+    profile_name.value,
+    game_version.value,
+    loader.value,
+    loader.value === 'vanilla' ? null : loader_version_value ?? 'stable',
+    icon.value,
+  ).catch(handleError)
+
+  mixpanel_track('InstanceCreate', {
+    profile_name: profile_name.value,
+    game_version: game_version.value,
+    loader: loader.value,
+    loader_version: loaderVersion,
+    has_icon: !!icon.value,
+    source: 'CreationModal',
+  })
+}
+
+const upload_icon = async () => {
+  icon.value = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg', 'svg', 'webp', 'gif', 'jpg'],
+      },
+    ],
+  })
+
+  if (!icon.value) return
+  display_icon.value = tauri.convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+  icon.value = null
+  display_icon.value = null
+}
+
+const selectable_versions = computed(() => {
+  if (game_version.value) {
+    if (loader.value === 'fabric') {
+      return fabric_versions.value.gameVersions[0].loaders.map((item) => item.id)
+    } else if (loader.value === 'forge') {
+      return forge_versions.value.gameVersions
+        .find((item) => item.id === game_version.value)
+        .loaders.map((item) => item.id)
+    } else if (loader.value === 'quilt') {
+      return quilt_versions.value.gameVersions[0].loaders.map((item) => item.id)
+    } else if (loader.value === 'neoforge') {
+      return neoforge_versions.value.gameVersions
+        .find((item) => item.id === game_version.value)
+        .loaders.map((item) => item.id)
+    }
+  }
+  return []
+})
+
+const toggle_advanced = () => {
+  showAdvanced.value = !showAdvanced.value
+}
+
+const openFile = async () => {
+  const newProject = await open({ multiple: false })
+  if (!newProject) return
+  hide()
+  await install_from_file(newProject).catch(handleError)
+
+  mixpanel_track('InstanceCreate', {
+    source: 'CreationModalFileOpen',
+  })
+}
+
+const profiles = ref(
+  new Map([
+    ['MultiMC', []],
+    ['GDLauncher', []],
+    ['ATLauncher', []],
+    ['Curseforge', []],
+    ['PrismLauncher', []],
+  ]),
+)
+
+const loading = ref(false)
+const importedProfiles = ref(0)
+const totalProfiles = ref(0)
+
+const selectedProfileType = ref('MultiMC')
+const profileOptions = ref([
+  { name: 'MultiMC', path: '' },
+  { name: 'GDLauncher', path: '' },
+  { name: 'ATLauncher', path: '' },
+  { name: 'Curseforge', path: '' },
+  { name: 'PrismLauncher', path: '' },
+])
+
+// Attempt to get import profiles on default paths
+const promises = profileOptions.value.map(async (option) => {
+  const path = await get_default_launcher_path(option.name).catch(handleError)
+  if (!path || path === '') return
+
+  // Try catch to allow failure and simply ignore default path attempt
+  try {
+    const instances = await get_importable_instances(option.name, path)
+
+    if (!instances) return
+    profileOptions.value.find((profile) => profile.name === option.name).path = path
+    profiles.value.set(
+      option.name,
+      instances.map((name) => ({ name, selected: false })),
+    )
+  } catch (error) {
+    // Allow failure silently
+  }
+})
+await Promise.all(promises)
+
+const selectLauncherPath = async () => {
+  selectedProfileType.value.path = await open({ multiple: false, directory: true })
+
+  if (selectedProfileType.value.path) {
+    await reload()
+  }
+}
+
+const reload = async () => {
+  const instances = await get_importable_instances(
+    selectedProfileType.value.name,
+    selectedProfileType.value.path,
+  ).catch(handleError)
+  if (instances) {
+    profiles.value.set(
+      selectedProfileType.value.name,
+      instances.map((name) => ({ name, selected: false })),
+    )
+  } else {
+    profiles.value.set(selectedProfileType.value.name, [])
+  }
+}
+
+const setPath = () => {
+  profileOptions.value.find((profile) => profile.name === selectedProfileType.value.name).path =
+    selectedProfileType.value.path
+}
+
+const next = async () => {
+  importedProfiles.value = 0
+  totalProfiles.value = Array.from(profiles.value.values())
+    .map((profiles) => profiles.filter((profile) => profile.selected).length)
+    .reduce((a, b) => a + b, 0)
+  loading.value = true
+  for (const launcher of Array.from(profiles.value.entries()).map(([launcher, profiles]) => ({
+    launcher,
+    path: profileOptions.value.find((option) => option.name === launcher).path,
+    profiles,
+  }))) {
+    for (const profile of launcher.profiles.filter((profile) => profile.selected)) {
+      await import_instance(launcher.launcher, launcher.path, profile.name)
+        .catch(handleError)
+        .then(() => console.log(`Successfully Imported ${profile.name} from ${launcher.launcher}`))
+      profile.selected = false
+      importedProfiles.value++
+    }
+  }
+  loading.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-lg);
+  gap: var(--gap-md);
+}
+
+.input-label {
+  font-size: 1rem;
+  font-weight: bolder;
+  color: var(--color-contrast);
+  margin-bottom: 0.5rem;
+}
+
+.text-input {
+  width: 20rem;
+}
+
+.image-upload {
+  display: flex;
+  gap: 1rem;
+}
+
+.image-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.warning {
+  font-style: italic;
+}
+
+.versions {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+:deep(button.checkbox) {
+  border: none;
+}
+
+.selector {
+  max-width: 20rem;
+}
+
+.labeled-divider {
+  text-align: center;
+}
+
+.labeled-divider:after {
+  background-color: var(--color-raised-bg);
+  content: 'Or';
+  color: var(--color-base);
+  padding: var(--gap-sm);
+  position: relative;
+  top: -0.5rem;
+}
+
+.info {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--gap-lg);
+  padding-bottom: 0;
+}
+
+.path-selection {
+  padding: var(--gap-xl);
+  background-color: var(--color-bg);
+  border-radius: var(--radius-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+
+  h3 {
+    margin: 0;
+  }
+
+  .path-input {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-direction: row;
+    gap: var(--gap-sm);
+
+    .iconified-input {
+      flex-grow: 1;
+      :deep(input) {
+        width: 100%;
+        flex-basis: auto;
+      }
+    }
+  }
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+
+.table-row {
+  grid-template-columns: min-content auto;
+}
+
+.table-content {
+  max-height: calc(5 * (18px + 2rem));
+  height: calc(5 * (18px + 2rem));
+  overflow-y: auto;
+}
+
+.select-checkbox {
+  button.checkbox {
+    border: none;
+  }
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap-md);
+
+  .transparent {
+    padding: var(--gap-sm) 0;
+  }
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  font-weight: bolder;
+  color: var(--color-contrast);
+}
+
+.card-divider {
+  margin: var(--gap-md) var(--gap-lg) 0 var(--gap-lg);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
+++ b/apps/app-frontend/src/components/ui/JavaDetectionModal.vue
@@ -0,0 +1,102 @@
+<template>
+  <Modal ref="detectJavaModal" header="Select java version" :noblur="!themeStore.advancedRendering">
+    <div class="auto-detect-modal">
+      <div class="table">
+        <div class="table-row table-head">
+          <div class="table-cell table-text">Version</div>
+          <div class="table-cell table-text">Path</div>
+          <div class="table-cell table-text">Actions</div>
+        </div>
+        <div v-for="javaInstall in chosenInstallOptions" :key="javaInstall.path" class="table-row">
+          <div class="table-cell table-text">
+            <span>{{ javaInstall.version }}</span>
+          </div>
+          <div v-tooltip="javaInstall.path" class="table-cell table-text">
+            <span>{{ javaInstall.path }}</span>
+          </div>
+          <div class="table-cell table-text manage">
+            <Button v-if="currentSelected.path === javaInstall.path" disabled
+              ><CheckIcon /> Selected</Button
+            >
+            <Button v-else @click="setJavaInstall(javaInstall)"><PlusIcon /> Select</Button>
+          </div>
+        </div>
+        <div v-if="chosenInstallOptions.length === 0" class="table-row entire-row">
+          <div class="table-cell table-text">No java installations found!</div>
+        </div>
+      </div>
+      <div class="input-group push-right">
+        <Button @click="$refs.detectJavaModal.hide()">
+          <XIcon />
+          Cancel
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+<script setup>
+import { PlusIcon, CheckIcon, XIcon } from '@modrinth/assets'
+import { Modal, Button } from '@modrinth/ui'
+import { ref } from 'vue'
+import { find_filtered_jres } from '@/helpers/jre.js'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/theme.js'
+
+const themeStore = useTheming()
+
+const chosenInstallOptions = ref([])
+const detectJavaModal = ref(null)
+const currentSelected = ref({})
+
+defineExpose({
+  show: async (version, currentSelectedJava) => {
+    chosenInstallOptions.value = await find_filtered_jres(version).catch(handleError)
+
+    console.log(chosenInstallOptions.value)
+    console.log(version)
+
+    currentSelected.value = currentSelectedJava
+    if (!currentSelected.value) {
+      currentSelected.value = { path: '', version: '' }
+    }
+
+    detectJavaModal.value.show()
+  },
+})
+
+const emit = defineEmits(['submit'])
+
+function setJavaInstall(javaInstall) {
+  emit('submit', javaInstall)
+  detectJavaModal.value.hide()
+  mixpanel_track('JavaAutoDetect', {
+    path: javaInstall.path,
+    version: javaInstall.version,
+  })
+}
+</script>
+<style lang="scss" scoped>
+.auto-detect-modal {
+  padding: 1rem;
+
+  .table {
+    .table-row {
+      grid-template-columns: 1fr 4fr min-content;
+    }
+
+    span {
+      display: inherit;
+      align-items: center;
+      justify-content: center;
+    }
+
+    padding: 0.5rem;
+  }
+}
+
+.manage {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/JavaSelector.vue
+++ b/apps/app-frontend/src/components/ui/JavaSelector.vue
@@ -0,0 +1,217 @@
+<template>
+  <JavaDetectionModal ref="detectJavaModal" @submit="(val) => emit('update:modelValue', val)" />
+  <div class="toggle-setting" :class="{ compact }">
+    <input
+      autocomplete="off"
+      :disabled="props.disabled"
+      :value="props.modelValue ? props.modelValue.path : ''"
+      type="text"
+      class="installation-input"
+      :placeholder="placeholder ?? '/path/to/java'"
+      @input="
+        (val) => {
+          emit('update:modelValue', {
+            ...props.modelValue,
+            path: val.target.value,
+          })
+        }
+      "
+    />
+    <span class="installation-buttons">
+      <Button
+        v-if="props.version"
+        :disabled="props.disabled || installingJava"
+        @click="reinstallJava"
+      >
+        <DownloadIcon />
+        {{ installingJava ? 'Installing...' : 'Install recommended' }}
+      </Button>
+      <Button :disabled="props.disabled" @click="autoDetect">
+        <SearchIcon />
+        Auto detect
+      </Button>
+      <Button :disabled="props.disabled" @click="handleJavaFileInput()">
+        <FolderSearchIcon />
+        Browse
+      </Button>
+      <Button v-if="testingJava" disabled> Testing... </Button>
+      <Button v-else-if="testingJavaSuccess === true">
+        <CheckIcon class="test-success" />
+        Success
+      </Button>
+      <Button v-else-if="testingJavaSuccess === false">
+        <XIcon class="test-fail" />
+        Failed
+      </Button>
+      <Button v-else :disabled="props.disabled" @click="testJava">
+        <PlayIcon />
+        Test
+      </Button>
+    </span>
+  </div>
+</template>
+
+<script setup>
+import {
+  SearchIcon,
+  PlayIcon,
+  CheckIcon,
+  XIcon,
+  FolderSearchIcon,
+  DownloadIcon,
+} from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import { auto_install_java, find_filtered_jres, get_jre, test_jre } from '@/helpers/jre.js'
+import { ref } from 'vue'
+import { open } from '@tauri-apps/api/dialog'
+import JavaDetectionModal from '@/components/ui/JavaDetectionModal.vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { handleError } from '@/store/state.js'
+
+const props = defineProps({
+  version: {
+    type: Number,
+    required: false,
+    default: null,
+  },
+  modelValue: {
+    type: Object,
+    default: () => ({
+      path: '',
+      version: '',
+    }),
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: null,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const testingJava = ref(false)
+const testingJavaSuccess = ref(null)
+
+const installingJava = ref(false)
+
+async function testJava() {
+  testingJava.value = true
+  testingJavaSuccess.value = await test_jre(
+    props.modelValue ? props.modelValue.path : '',
+    1,
+    props.version,
+  )
+  testingJava.value = false
+
+  mixpanel_track('JavaTest', {
+    path: props.modelValue ? props.modelValue.path : '',
+    success: testingJavaSuccess.value,
+  })
+
+  setTimeout(() => {
+    testingJavaSuccess.value = null
+  }, 2000)
+}
+
+async function handleJavaFileInput() {
+  let filePath = await open()
+
+  if (filePath) {
+    let result = await get_jre(filePath)
+    if (!result) {
+      result = {
+        path: filePath,
+        version: props.version.toString(),
+        architecture: 'x86',
+      }
+    }
+
+    mixpanel_track('JavaManualSelect', {
+      path: filePath,
+      version: props.version,
+    })
+
+    emit('update:modelValue', result)
+  }
+}
+
+const detectJavaModal = ref(null)
+async function autoDetect() {
+  if (!props.compact) {
+    detectJavaModal.value.show(props.version, props.modelValue)
+  } else {
+    let versions = await find_filtered_jres(props.version).catch(handleError)
+    if (versions.length > 0) {
+      emit('update:modelValue', versions[0])
+    }
+  }
+}
+
+async function reinstallJava() {
+  installingJava.value = true
+  const path = await auto_install_java(props.version).catch(handleError)
+  let result = await get_jre(path)
+
+  console.log('java result ' + result)
+  if (!result) {
+    result = {
+      path: path,
+      version: props.version.toString(),
+      architecture: 'x86',
+    }
+  }
+
+  mixpanel_track('JavaReInstall', {
+    path: path,
+    version: props.version,
+  })
+
+  emit('update:modelValue', result)
+  installingJava.value = false
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-input {
+  width: 100% !important;
+  flex-grow: 1;
+}
+
+.toggle-setting {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+
+  &.compact {
+    flex-wrap: wrap;
+  }
+}
+
+.installation-buttons {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.test-success {
+  color: var(--color-green);
+}
+
+.test-fail {
+  color: var(--color-red);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ModInstallModal.vue
+++ b/apps/app-frontend/src/components/ui/ModInstallModal.vue
@@ -0,0 +1,417 @@
+<script setup>
+import {
+  DownloadIcon,
+  PlusIcon,
+  UploadIcon,
+  XIcon,
+  RightArrowIcon,
+  CheckIcon,
+} from '@modrinth/assets'
+import { Avatar, Modal, Button, Card } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import {
+  add_project_from_version as installMod,
+  check_installed,
+  get,
+  list,
+} from '@/helpers/profile'
+import { open } from '@tauri-apps/api/dialog'
+import { create } from '@/helpers/profile'
+import { installVersionDependencies } from '@/helpers/utils'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { useTheming } from '@/store/theme.js'
+import { useRouter } from 'vue-router'
+import { tauri } from '@tauri-apps/api'
+
+const themeStore = useTheming()
+const router = useRouter()
+
+const versions = ref([])
+const project = ref('')
+const projectTitle = ref('')
+const projectType = ref('')
+
+const installModal = ref(null)
+const searchFilter = ref('')
+const showCreation = ref(false)
+const icon = ref(null)
+const name = ref(null)
+const display_icon = ref(null)
+const loader = ref(null)
+const gameVersion = ref(null)
+const creatingInstance = ref(false)
+
+defineExpose({
+  show: async (projectId, selectedVersions, title, type) => {
+    project.value = projectId
+    versions.value = selectedVersions
+    projectTitle.value = title
+    projectType.value = type
+
+    installModal.value.show()
+    searchFilter.value = ''
+
+    profiles.value = await getData()
+
+    mixpanel_track('ProjectInstallStart', { source: 'ProjectInstallModal' })
+  },
+})
+
+const profiles = ref([])
+
+async function install(instance) {
+  instance.installing = true
+  const version = versions.value.find((v) => {
+    return (
+      v.game_versions.includes(instance.metadata.game_version) &&
+      (v.loaders.includes(instance.metadata.loader) ||
+        v.loaders.includes('minecraft') ||
+        v.loaders.includes('iris') ||
+        v.loaders.includes('optifine'))
+    )
+  })
+
+  if (!version) {
+    instance.installing = false
+    handleError('No compatible version found')
+    return
+  }
+
+  await installMod(instance.path, version.id).catch(handleError)
+  await installVersionDependencies(instance, version)
+
+  instance.installedMod = true
+  instance.installing = false
+
+  mixpanel_track('ProjectInstall', {
+    loader: instance.metadata.loader,
+    game_version: instance.metadata.game_version,
+    id: project.value,
+    version_id: version.id,
+    project_type: projectType.value,
+    title: projectTitle.value,
+    source: 'ProjectInstallModal',
+  })
+}
+
+async function getData() {
+  const projects = await list(true).then(Object.values).catch(handleError)
+
+  const filtered = projects
+    .filter((profile) => {
+      return profile.metadata.name.toLowerCase().includes(searchFilter.value.toLowerCase())
+    })
+    .filter((profile) => {
+      return (
+        versions.value.flatMap((v) => v.game_versions).includes(profile.metadata.game_version) &&
+        versions.value
+          .flatMap((v) => v.loaders)
+          .some(
+            (value) =>
+              value === profile.metadata.loader ||
+              ['minecraft', 'iris', 'optifine'].includes(value),
+          )
+      )
+    })
+
+  for (let profile of filtered) {
+    profile.installing = false
+    profile.installedMod = await check_installed(profile.path, project.value).catch(handleError)
+  }
+
+  return filtered
+}
+
+const alreadySentCreation = ref(false)
+const toggleCreation = () => {
+  showCreation.value = !showCreation.value
+  name.value = null
+  icon.value = null
+  display_icon.value = null
+  gameVersion.value = null
+  loader.value = null
+
+  if (!alreadySentCreation.value) {
+    alreadySentCreation.value = false
+    mixpanel_track('InstanceCreateStart', { source: 'ProjectInstallModal' })
+  }
+}
+
+const upload_icon = async () => {
+  icon.value = await open({
+    multiple: false,
+    filters: [
+      {
+        name: 'Image',
+        extensions: ['png', 'jpeg'],
+      },
+    ],
+  })
+
+  if (!icon.value) return
+  display_icon.value = tauri.convertFileSrc(icon.value)
+}
+
+const reset_icon = () => {
+  icon.value = null
+  display_icon.value = null
+}
+
+const createInstance = async () => {
+  creatingInstance.value = true
+
+  const loader =
+    versions.value[0].loaders[0] !== 'forge' &&
+    versions.value[0].loaders[0] !== 'fabric' &&
+    versions.value[0].loaders[0] !== 'quilt'
+      ? 'vanilla'
+      : versions.value[0].loaders[0]
+
+  const id = await create(
+    name.value,
+    versions.value[0].game_versions[0],
+    loader,
+    'latest',
+    icon.value,
+  ).catch(handleError)
+
+  await installMod(id, versions.value[0].id).catch(handleError)
+
+  await router.push(`/instance/${encodeURIComponent(id)}/`)
+
+  const instance = await get(id, true)
+  await installVersionDependencies(instance, versions.value[0])
+
+  mixpanel_track('InstanceCreate', {
+    profile_name: name.value,
+    game_version: versions.value[0].game_versions[0],
+    loader: loader,
+    loader_version: 'latest',
+    has_icon: !!icon.value,
+    source: 'ProjectInstallModal',
+  })
+
+  mixpanel_track('ProjectInstall', {
+    loader: loader,
+    game_version: versions.value[0].game_versions[0],
+    id: project.value,
+    version_id: versions.value[0].id,
+    project_type: projectType.value,
+    title: projectTitle.value,
+    source: 'ProjectInstallModal',
+  })
+
+  if (installModal.value) installModal.value.hide()
+  creatingInstance.value = false
+}
+
+const check_valid = computed(() => {
+  return name.value
+})
+</script>
+
+<template>
+  <Modal
+    ref="installModal"
+    header="Install project to instance"
+    :noblur="!themeStore.advancedRendering"
+  >
+    <div class="modal-body">
+      <input
+        v-model="searchFilter"
+        autocomplete="off"
+        type="text"
+        class="search"
+        placeholder="Search for an instance"
+      />
+      <div class="profiles" :class="{ 'hide-creation': !showCreation }">
+        <div v-for="profile in profiles" :key="profile.metadata.name" class="option">
+          <Button
+            color="raised"
+            class="profile-button"
+            @click="$router.push(`/instance/${encodeURIComponent(profile.path)}`)"
+          >
+            <Avatar
+              :src="
+                !profile.metadata.icon ||
+                (profile.metadata.icon && profile.metadata.icon.startsWith('http'))
+                  ? profile.metadata.icon
+                  : tauri.convertFileSrc(profile.metadata?.icon)
+              "
+              class="profile-image"
+            />
+            {{ profile.metadata.name }}
+          </Button>
+          <div
+            v-tooltip="
+              profile.metadata.linked_data?.locked && !profile.installedMod
+                ? 'Unpair or unlock an instance to add mods.'
+                : ''
+            "
+          >
+            <Button
+              :disabled="
+                profile.installedMod || profile.installing || profile.metadata.linked_data?.locked
+              "
+              @click="install(profile)"
+            >
+              <DownloadIcon v-if="!profile.installedMod && !profile.installing" />
+              <CheckIcon v-else-if="profile.installedMod" />
+              {{
+                profile.installing
+                  ? 'Installing...'
+                  : profile.installedMod
+                    ? 'Installed'
+                    : profile.metadata.linked_data && profile.metadata.linked_data.locked
+                      ? 'Paired'
+                      : 'Install'
+              }}
+            </Button>
+          </div>
+        </div>
+      </div>
+      <Card v-if="showCreation" class="creation-card">
+        <div class="creation-container">
+          <div class="creation-icon">
+            <Avatar size="md" class="icon" :src="display_icon" />
+            <div class="creation-icon__description">
+              <Button @click="upload_icon()">
+                <UploadIcon />
+                <span class="no-wrap"> Select icon </span>
+              </Button>
+              <Button :disabled="!display_icon" @click="reset_icon()">
+                <XIcon />
+                <span class="no-wrap"> Remove icon </span>
+              </Button>
+            </div>
+          </div>
+          <div class="creation-settings">
+            <input
+              v-model="name"
+              autocomplete="off"
+              type="text"
+              placeholder="Name"
+              class="creation-input"
+            />
+            <Button :disabled="creatingInstance === true || !check_valid" @click="createInstance()">
+              <RightArrowIcon />
+              {{ creatingInstance ? 'Creating...' : 'Create' }}
+            </Button>
+          </div>
+        </div>
+      </Card>
+      <div class="input-group push-right">
+        <Button :color="showCreation ? '' : 'primary'" @click="toggleCreation()">
+          <PlusIcon />
+          {{ showCreation ? 'Hide New Instance' : 'Create new instance' }}
+        </Button>
+        <Button @click="installModal.hide()">Cancel</Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.creation-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 0;
+  padding: 1rem;
+  background-color: var(--color-bg);
+}
+
+.creation-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+
+.creation-icon {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  flex-grow: 1;
+
+  .creation-icon__description {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
+
+.creation-input {
+  width: 100%;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.creation-dropdown {
+  width: min-content !important;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.creation-settings {
+  width: 100%;
+  margin-left: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.profiles {
+  max-height: 12rem;
+  overflow-y: auto;
+
+  &.hide-creation {
+    max-height: 21rem;
+  }
+}
+
+.option {
+  width: calc(100%);
+  background: var(--color-raised-bg);
+  color: var(--color-base);
+  box-shadow: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 0.5rem;
+  gap: 0.5rem;
+
+  img {
+    margin-right: 0.5rem;
+  }
+
+  .name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .profile-button {
+    align-content: start;
+    padding: 0.5rem;
+    text-align: left;
+  }
+}
+
+.profile-image {
+  --size: 2rem !important;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
+++ b/apps/app-frontend/src/components/ui/ModpackVersionModal.vue
@@ -0,0 +1,188 @@
+<script setup>
+import { CheckIcon } from '@modrinth/assets'
+import { Button, Modal, Badge } from '@modrinth/ui'
+import { computed, ref } from 'vue'
+import { useTheming } from '@/store/theme'
+import { update_managed_modrinth_version } from '@/helpers/profile'
+import { releaseColor } from '@/helpers/utils'
+import { SwapIcon } from '@/assets/icons/index.js'
+
+const props = defineProps({
+  versions: {
+    type: Array,
+    required: true,
+  },
+  instance: {
+    type: Object,
+    default: null,
+  },
+})
+
+defineExpose({
+  show: () => {
+    modpackVersionModal.value.show()
+  },
+})
+
+const filteredVersions = computed(() => {
+  return props.versions
+})
+
+const modpackVersionModal = ref(null)
+const installedVersion = computed(() => props.instance?.metadata?.linked_data?.version_id)
+const installing = computed(() => props.instance.install_stage !== 'installed')
+const inProgress = ref(false)
+
+const themeStore = useTheming()
+
+const switchVersion = async (versionId) => {
+  inProgress.value = true
+  await update_managed_modrinth_version(props.instance.path, versionId)
+  inProgress.value = false
+}
+</script>
+
+<template>
+  <Modal
+    ref="modpackVersionModal"
+    class="modpack-version-modal"
+    header="Change modpack version"
+    :noblur="!themeStore.advancedRendering"
+  >
+    <div class="modal-body">
+      <Card v-if="instance.metadata.linked_data" class="mod-card">
+        <div class="table">
+          <div class="table-row with-columns table-head">
+            <div class="table-cell table-text download-cell" />
+            <div class="name-cell table-cell table-text">Name</div>
+            <div class="table-cell table-text">Supports</div>
+          </div>
+          <div class="scrollable">
+            <div
+              v-for="version in filteredVersions"
+              :key="version.id"
+              class="table-row with-columns selectable"
+              @click="$router.push(`/project/${$route.params.id}/version/${version.id}`)"
+            >
+              <div class="table-cell table-text">
+                <Button
+                  :color="version.id === installedVersion ? '' : 'primary'"
+                  icon-only
+                  :disabled="inProgress || installing || version.id === installedVersion"
+                  @click.stop="() => switchVersion(version.id)"
+                >
+                  <SwapIcon v-if="version.id !== installedVersion" />
+                  <CheckIcon v-else />
+                </Button>
+              </div>
+              <div class="name-cell table-cell table-text">
+                <div class="version-link">
+                  {{ version.name.charAt(0).toUpperCase() + version.name.slice(1) }}
+                  <div class="version-badge">
+                    <div class="channel-indicator">
+                      <Badge
+                        :color="releaseColor(version.version_type)"
+                        :type="
+                          version.version_type.charAt(0).toUpperCase() +
+                          version.version_type.slice(1)
+                        "
+                      />
+                    </div>
+                    <div>
+                      {{ version.version_number }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="table-cell table-text stacked-text">
+                <span>
+                  {{
+                    version.loaders
+                      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+                      .join(', ')
+                  }}
+                </span>
+                <span>
+                  {{ version.game_versions.join(', ') }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.filter-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.with-columns {
+  grid-template-columns: min-content 1fr 1fr;
+}
+
+.scrollable {
+  overflow-y: auto;
+  max-height: 25rem;
+}
+
+.card-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--color-raised-bg);
+}
+
+.mod-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: hidden;
+  margin-top: 0.5rem;
+}
+
+.version-link {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  .version-badge {
+    display: flex;
+    flex-wrap: wrap;
+
+    .channel-indicator {
+      margin-right: 0.5rem;
+    }
+  }
+}
+
+.stacked-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: flex-start;
+}
+
+.download-cell {
+  width: 4rem;
+  padding: 1rem;
+}
+
+.modal-body {
+  padding: var(--gap-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+}
+
+.table {
+  border: 1px solid var(--color-bg);
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ProgressBar.vue
+++ b/apps/app-frontend/src/components/ui/ProgressBar.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="progress-bar">
+    <div class="progress-bar__fill" :style="{ width: `${progress}%` }"></div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  progress: {
+    type: Number,
+    required: true,
+    validator(value) {
+      return value >= 0 && value <= 100
+    },
+  },
+})
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 100%;
+  height: 0.5rem;
+  background-color: var(--color-button-bg);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.progress-bar__fill {
+  height: 100%;
+  background-color: var(--color-brand);
+  transition: width 0.3s;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/ProjectCard.vue
+++ b/apps/app-frontend/src/components/ui/ProjectCard.vue
@@ -0,0 +1,282 @@
+<script setup>
+import { Card, Avatar, Button } from '@modrinth/ui'
+import { DownloadIcon, HeartIcon, CalendarIcon } from '@modrinth/assets'
+import { formatNumber, formatCategory } from '@modrinth/utils'
+import { computed, ref } from 'vue'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { useRouter } from 'vue-router'
+import { useFetch } from '@/helpers/fetch.js'
+import { list } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+import { install as pack_install } from '@/helpers/pack.js'
+dayjs.extend(relativeTime)
+
+const router = useRouter()
+const installing = ref(false)
+
+const props = defineProps({
+  project: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  confirmModal: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  modInstallModal: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+const toColor = computed(() => {
+  let color = props.project.color
+
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return 'rgba(' + [r, g, b, 1].join(',') + ')'
+})
+
+const toTransparent = computed(() => {
+  let color = props.project.color
+
+  color >>>= 0
+  const b = color & 0xff
+  const g = (color >>> 8) & 0xff
+  const r = (color >>> 16) & 0xff
+  return (
+    'linear-gradient(rgba(' +
+    [r, g, b, 0.03].join(',') +
+    '), 65%, rgba(' +
+    [r, g, b, 0.3].join(',') +
+    '))'
+  )
+})
+
+const install = async (e) => {
+  e?.stopPropagation()
+  installing.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    'project versions',
+  )
+
+  if (props.project.project_type === 'modpack') {
+    const packs = Object.values(await list(true).catch(handleError))
+
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
+    ) {
+      installing.value = true
+      await pack_install(
+        props.project.project_id,
+        versions[0].id,
+        props.project.title,
+        props.project.icon_url,
+      ).catch(handleError)
+      installing.value = false
+    } else
+      props.confirmModal.show(
+        props.project.project_id,
+        versions[0].id,
+        props.project.title,
+        props.project.icon_url,
+      )
+  } else {
+    props.modInstallModal.show(props.project.project_id, versions)
+  }
+
+  installing.value = false
+}
+</script>
+
+<template>
+  <div class="wrapper">
+    <Card class="project-card button-base" @click="router.push(`/project/${project.slug}`)">
+      <div
+        class="banner"
+        :style="{
+          'background-color': project.featured_gallery ?? project.gallery[0] ? null : toColor,
+          'background-image': `url(${
+            project.featured_gallery ??
+            project.gallery[0] ??
+            'https://launcher-files.modrinth.com/assets/maze-bg.png'
+          })`,
+          'no-image': !project.featured_gallery && !project.gallery[0],
+        }"
+      >
+        <div class="badges">
+          <div class="badge">
+            <DownloadIcon />
+            {{ formatNumber(project.downloads) }}
+          </div>
+          <div class="badge">
+            <HeartIcon />
+            {{ formatNumber(project.follows) }}
+          </div>
+          <div class="badge">
+            <CalendarIcon />
+            {{ formatCategory(dayjs(project.date_modified).fromNow()) }}
+          </div>
+        </div>
+        <div
+          class="badges-wrapper"
+          :class="{
+            'no-image': !project.featured_gallery && !project.gallery[0],
+          }"
+          :style="{
+            background: !project.featured_gallery && !project.gallery[0] ? toTransparent : null,
+          }"
+        ></div>
+      </div>
+      <Avatar class="icon" size="sm" :src="project.icon_url" />
+      <div class="title">
+        <div class="title-text">
+          {{ project.title }}
+        </div>
+        <div class="author">by {{ project.author }}</div>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+    </Card>
+    <Button color="primary" class="install" :disabled="installing" @click="install">
+      <DownloadIcon />
+      {{ installing ? 'Installing' : 'Install' }}
+    </Button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.wrapper {
+  position: relative;
+  aspect-ratio: 1;
+
+  &:hover {
+    .install:enabled {
+      opacity: 1;
+    }
+  }
+}
+
+.project-card {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template:
+    '. . . .' 0
+    '. icon title .' 3rem
+    'banner banner banner banner' auto
+    '. description description .' 3.5rem
+    '. . . .' 0 / 0 3rem minmax(0, 1fr) 0;
+  max-width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+
+  .icon {
+    grid-area: icon;
+  }
+
+  .title {
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    grid-area: title;
+    white-space: nowrap;
+
+    .title-text {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: var(--font-size-md);
+      font-weight: bold;
+    }
+  }
+
+  .author {
+    font-size: var(--font-size-sm);
+    grid-area: author;
+  }
+
+  .banner {
+    grid-area: banner;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+
+    .badges-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      mix-blend-mode: hard-light;
+    }
+
+    .badges {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: var(--gap-sm);
+      gap: var(--gap-xs);
+      display: flex;
+      z-index: 10;
+      flex-direction: row;
+      justify-content: flex-end;
+      align-items: flex-end;
+    }
+  }
+
+  .description {
+    grid-area: description;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.badge {
+  background-color: var(--color-raised-bg);
+  font-size: var(--font-size-xs);
+  padding: var(--gap-xs) var(--gap-sm);
+  border-radius: var(--radius-sm);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    margin-right: var(--gap-xs);
+  }
+}
+
+.install {
+  position: absolute;
+  top: calc(5rem + var(--gap-sm));
+  right: var(--gap-sm);
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/RunningAppBar.vue
+++ b/apps/app-frontend/src/components/ui/RunningAppBar.vue
@@ -0,0 +1,475 @@
+<template>
+  <div class="action-groups">
+    <a href="https://support.modrinth.com" class="link">
+      <ChatIcon />
+      <span> Get support </span>
+    </a>
+    <Button
+      v-if="currentLoadingBars.length > 0"
+      ref="infoButton"
+      icon-only
+      class="icon-button show-card-icon"
+      @click="toggleCard()"
+    >
+      <DownloadIcon />
+    </Button>
+    <div v-if="offline" class="status">
+      <span class="circle stopped" />
+      <div class="running-text clickable" @click="refreshInternet()">
+        <span> Offline </span>
+      </div>
+    </div>
+    <div v-if="selectedProfile" class="status">
+      <span class="circle running" />
+      <div ref="profileButton" class="running-text">
+        <router-link :to="`/instance/${encodeURIComponent(selectedProfile.path)}`">
+          {{ selectedProfile.metadata.name }}
+        </router-link>
+        <div
+          v-if="currentProcesses.length > 1"
+          class="arrow button-base"
+          :class="{ rotate: showProfiles }"
+          @click="toggleProfiles()"
+        >
+          <DropdownIcon />
+        </div>
+      </div>
+      <Button v-tooltip="'Stop instance'" icon-only class="icon-button stop" @click="stop()">
+        <StopCircleIcon />
+      </Button>
+      <Button v-tooltip="'View logs'" icon-only class="icon-button" @click="goToTerminal()">
+        <TerminalSquareIcon />
+      </Button>
+      <Button
+        v-if="currentLoadingBars.length > 0"
+        ref="infoButton"
+        icon-only
+        class="icon-button show-card-icon"
+        @click="toggleCard()"
+      >
+        <DownloadIcon />
+      </Button>
+    </div>
+    <div v-else class="status">
+      <span class="circle stopped" />
+      <span class="running-text"> No instances running </span>
+    </div>
+  </div>
+  <transition name="download">
+    <Card v-if="showCard === true && currentLoadingBars.length > 0" ref="card" class="info-card">
+      <div v-for="loadingBar in currentLoadingBars" :key="loadingBar.id" class="info-text">
+        <h3 class="info-title">
+          {{ loadingBar.title }}
+        </h3>
+        <ProgressBar :progress="Math.floor((100 * loadingBar.current) / loadingBar.total)" />
+        <div class="row">
+          {{ Math.floor((100 * loadingBar.current) / loadingBar.total) }}% {{ loadingBar.message }}
+        </div>
+      </div>
+    </Card>
+  </transition>
+  <transition name="download">
+    <Card
+      v-if="showProfiles === true && currentProcesses.length > 0"
+      ref="profiles"
+      class="profile-card"
+    >
+      <Button
+        v-for="profile in currentProcesses"
+        :key="profile.id"
+        class="profile-button"
+        @click="selectProfile(profile)"
+      >
+        <div class="text"><span class="circle running" /> {{ profile.metadata.name }}</div>
+        <Button
+          v-tooltip="'Stop instance'"
+          icon-only
+          class="icon-button stop"
+          @click.stop="stop(profile.path)"
+        >
+          <StopCircleIcon />
+        </Button>
+        <Button
+          v-tooltip="'View logs'"
+          icon-only
+          class="icon-button"
+          @click.stop="goToTerminal(profile.path)"
+        >
+          <TerminalSquareIcon />
+        </Button>
+      </Button>
+    </Card>
+  </transition>
+</template>
+
+<script setup>
+import { DownloadIcon, StopCircleIcon, TerminalSquareIcon, DropdownIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import {
+  get_all_running_profiles as getRunningProfiles,
+  kill_by_uuid as killProfile,
+  get_uuids_by_profile_path as getProfileProcesses,
+} from '@/helpers/process'
+import { loading_listener, process_listener, offline_listener } from '@/helpers/events'
+import { useRouter } from 'vue-router'
+import { progress_bars_list } from '@/helpers/state.js'
+import { refreshOffline, isOffline } from '@/helpers/utils.js'
+import ProgressBar from '@/components/ui/ProgressBar.vue'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { ChatIcon } from '@/assets/icons'
+
+const router = useRouter()
+const card = ref(null)
+const profiles = ref(null)
+const infoButton = ref(null)
+const profileButton = ref(null)
+const showCard = ref(false)
+
+const showProfiles = ref(false)
+
+const currentProcesses = ref(await getRunningProfiles().catch(handleError))
+const selectedProfile = ref(currentProcesses.value[0])
+
+const offline = ref(await isOffline().catch(handleError))
+const refreshInternet = async () => {
+  offline.value = await refreshOffline().catch(handleError)
+}
+
+const unlistenProcess = await process_listener(async () => {
+  await refresh()
+})
+
+const unlistenRefresh = await offline_listener(async (b) => {
+  offline.value = b
+  await refresh()
+})
+
+const refresh = async () => {
+  currentProcesses.value = await getRunningProfiles().catch(handleError)
+  if (!currentProcesses.value.includes(selectedProfile.value)) {
+    selectedProfile.value = currentProcesses.value[0]
+  }
+}
+
+const stop = async (path) => {
+  try {
+    const processes = await getProfileProcesses(path ?? selectedProfile.value.path)
+    await killProfile(processes[0])
+
+    mixpanel_track('InstanceStop', {
+      loader: currentProcesses.value[0].metadata.loader,
+      game_version: currentProcesses.value[0].metadata.game_version,
+      source: 'AppBar',
+    })
+  } catch (e) {
+    console.error(e)
+  }
+  await refresh()
+}
+
+const goToTerminal = (path) => {
+  router.push(`/instance/${encodeURIComponent(path ?? selectedProfile.value.path)}/logs`)
+}
+
+const currentLoadingBars = ref([])
+
+const refreshInfo = async () => {
+  const currentLoadingBarCount = currentLoadingBars.value.length
+  currentLoadingBars.value = Object.values(await progress_bars_list().catch(handleError)).map(
+    (x) => {
+      if (x.bar_type.type === 'java_download') {
+        x.title = 'Downloading Java ' + x.bar_type.version
+      }
+      if (x.bar_type.profile_name) {
+        x.title = x.bar_type.profile_name
+      }
+      if (x.bar_type.pack_name) {
+        x.title = x.bar_type.pack_name
+      }
+
+      return x
+    },
+  )
+
+  currentLoadingBars.value.sort((a, b) => {
+    if (a.loading_bar_uuid < b.loading_bar_uuid) {
+      return -1
+    }
+    if (a.loading_bar_uuid > b.loading_bar_uuid) {
+      return 1
+    }
+    return 0
+  })
+
+  if (currentLoadingBars.value.length === 0) {
+    showCard.value = false
+  } else if (currentLoadingBarCount < currentLoadingBars.value.length) {
+    showCard.value = true
+  }
+}
+
+await refreshInfo()
+const unlistenLoading = await loading_listener(async () => {
+  await refreshInfo()
+})
+
+const selectProfile = (profile) => {
+  selectedProfile.value = profile
+  showProfiles.value = false
+}
+
+const handleClickOutsideCard = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    card.value &&
+    card.value.$el !== event.target &&
+    !elements.includes(card.value.$el) &&
+    infoButton.value &&
+    !infoButton.value.contains(event.target)
+  ) {
+    showCard.value = false
+  }
+}
+
+const handleClickOutsideProfile = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    profiles.value &&
+    profiles.value.$el !== event.target &&
+    !elements.includes(profiles.value.$el) &&
+    !profileButton.value.contains(event.target)
+  ) {
+    showProfiles.value = false
+  }
+}
+
+const toggleCard = async () => {
+  showCard.value = !showCard.value
+  showProfiles.value = false
+  await refreshInfo()
+}
+
+const toggleProfiles = async () => {
+  if (currentProcesses.value.length === 1) return
+  showProfiles.value = !showProfiles.value
+  showCard.value = false
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutsideCard)
+  window.addEventListener('click', handleClickOutsideProfile)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutsideCard)
+  window.removeEventListener('click', handleClickOutsideProfile)
+  unlistenProcess()
+  unlistenLoading()
+  unlistenRefresh()
+})
+</script>
+
+<style scoped lang="scss">
+.action-groups {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-md);
+}
+
+.arrow {
+  transition: transform 0.2s ease-in-out;
+  display: flex;
+  align-items: center;
+  &.rotate {
+    transform: rotate(180deg);
+  }
+}
+
+.status {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-sm) var(--gap-lg);
+}
+
+.running-text {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-xs);
+  white-space: nowrap;
+  overflow: hidden;
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none;
+
+  &.clickable:hover {
+    cursor: pointer;
+  }
+}
+
+.circle {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 0.25rem;
+
+  &.running {
+    background-color: var(--color-brand);
+  }
+
+  &.stopped {
+    background-color: var(--color-base);
+  }
+}
+
+.icon-button {
+  background-color: rgba(0, 0, 0, 0);
+  box-shadow: none;
+  width: 1.25rem !important;
+  height: 1.25rem !important;
+
+  &.stop {
+    --text-color: var(--color-red) !important;
+  }
+}
+
+.info-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  width: 20rem;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.loading-option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+
+  :hover {
+    background-color: var(--color-raised-bg-hover);
+  }
+}
+
+.loading-text {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+
+  .row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+  }
+}
+
+.loading-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: block;
+
+  :deep(svg) {
+    left: 1rem;
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+}
+
+.show-card-icon {
+  color: var(--color-brand);
+}
+
+.download-enter-active,
+.download-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.download-enter-from,
+.download-leave-to {
+  opacity: 0;
+}
+
+.progress-bar {
+  width: 100%;
+}
+
+.info-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.info-title {
+  margin: 0;
+}
+
+.profile-button {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  width: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: none;
+
+  .text {
+    margin-right: auto;
+  }
+}
+
+.profile-card {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.5rem;
+  z-index: 9;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  transition: all 0.2s ease-in-out;
+  border: 1px solid var(--color-button-bg);
+  padding: var(--gap-md);
+
+  &.hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.link {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+  margin: 0;
+  color: var(--color-text);
+  text-decoration: none;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -0,0 +1,288 @@
+<template>
+  <Card
+    class="card button-base"
+    @click="
+      () => {
+        emits('open')
+        $router.push({
+          path: `/project/${project.project_id ?? project.id}/`,
+          query: { i: props.instance ? props.instance.path : undefined },
+        })
+      }
+    "
+  >
+    <div class="icon">
+      <Avatar :src="project.icon_url" size="md" class="search-icon" />
+    </div>
+    <div class="content-wrapper">
+      <div class="title joined-text">
+        <h2>{{ project.title }}</h2>
+        <span v-if="project.author">by {{ project.author }}</span>
+      </div>
+      <div class="description">
+        {{ project.description }}
+      </div>
+      <div class="tags">
+        <Categories :categories="categories" :type="project.project_type">
+          <EnvironmentIndicator
+            :type-only="project.moderation"
+            :client-side="project.client_side"
+            :server-side="project.server_side"
+            :type="project.project_type"
+            :search="true"
+          />
+        </Categories>
+      </div>
+    </div>
+    <div class="stats button-group">
+      <div v-if="featured" class="badge">
+        <StarIcon />
+        Featured
+      </div>
+      <div class="badge">
+        <DownloadIcon />
+        {{ formatNumber(project.downloads) }}
+      </div>
+      <div class="badge">
+        <HeartIcon />
+        {{ formatNumber(project.follows ?? project.followers) }}
+      </div>
+      <div class="badge">
+        <CalendarIcon />
+        {{ formatCategory(dayjs(project.date_modified ?? project.updated).fromNow()) }}
+      </div>
+    </div>
+    <div v-if="project.author" class="install">
+      <Button color="primary" :disabled="installed || installing" @click.stop="install()">
+        <DownloadIcon v-if="!installed" />
+        <CheckIcon v-else />
+        {{ installing ? 'Installing' : installed ? 'Installed' : 'Install' }}
+      </Button>
+    </div>
+  </Card>
+</template>
+
+<script setup>
+import { DownloadIcon, HeartIcon, CalendarIcon, CheckIcon, StarIcon } from '@modrinth/assets'
+import { Avatar, Card, Categories, EnvironmentIndicator, Button } from '@modrinth/ui'
+import { formatNumber, formatCategory } from '@modrinth/utils'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { ref } from 'vue'
+import { add_project_from_version as installMod, list } from '@/helpers/profile.js'
+import { install as packInstall } from '@/helpers/pack.js'
+import { installVersionDependencies } from '@/helpers/utils.js'
+import { useFetch } from '@/helpers/fetch.js'
+import { handleError } from '@/store/notifications.js'
+import { mixpanel_track } from '@/helpers/mixpanel'
+dayjs.extend(relativeTime)
+
+const props = defineProps({
+  backgroundImage: {
+    type: String,
+    default: null,
+  },
+  project: {
+    type: Object,
+    required: true,
+  },
+  categories: {
+    type: Array,
+    required: true,
+  },
+  instance: {
+    type: Object,
+    default: null,
+  },
+  confirmModal: {
+    type: Object,
+    default: null,
+  },
+  modInstallModal: {
+    type: Object,
+    default: null,
+  },
+  incompatibilityWarningModal: {
+    type: Object,
+    default: null,
+  },
+  featured: {
+    type: Boolean,
+    default: false,
+  },
+  installed: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emits = defineEmits(['open'])
+
+const installing = ref(false)
+const installed = ref(props.installed)
+
+async function install() {
+  installing.value = true
+  const versions = await useFetch(
+    `https://api.modrinth.com/v2/project/${props.project.project_id}/version`,
+    'project versions',
+  )
+  let queuedVersionData
+
+  if (!props.instance) {
+    queuedVersionData = versions[0]
+  } else {
+    queuedVersionData = versions.find(
+      (v) =>
+        v.game_versions.includes(props.instance.metadata.game_version) &&
+        (props.project.project_type !== 'mod' ||
+          v.loaders.includes(props.instance.metadata.loader)),
+    )
+  }
+
+  if (props.project.project_type === 'modpack') {
+    const packs = Object.values(await list().catch(handleError))
+    if (
+      packs.length === 0 ||
+      !packs
+        .map((value) => value.metadata)
+        .find((pack) => pack.linked_data?.project_id === props.project.project_id)
+    ) {
+      await packInstall(
+        props.project.project_id,
+        queuedVersionData.id,
+        props.project.title,
+        props.project.icon_url,
+      ).catch(handleError)
+
+      mixpanel_track('PackInstall', {
+        id: props.project.project_id,
+        version_id: queuedVersionData.id,
+        title: props.project.title,
+        source: 'SearchCard',
+      })
+    } else {
+      props.confirmModal.show(
+        props.project.project_id,
+        queuedVersionData.id,
+        props.project.title,
+        props.project.icon_url,
+      )
+    }
+  } else {
+    if (props.instance) {
+      if (!queuedVersionData) {
+        props.incompatibilityWarningModal.show(
+          props.instance,
+          props.project.title,
+          versions,
+          () => (installed.value = true),
+          props.project.project_id,
+          props.project.project_type,
+        )
+        installing.value = false
+        return
+      } else {
+        await installMod(props.instance.path, queuedVersionData.id).catch(handleError)
+        await installVersionDependencies(props.instance, queuedVersionData)
+
+        mixpanel_track('ProjectInstall', {
+          loader: props.instance.metadata.loader,
+          game_version: props.instance.metadata.game_version,
+          id: props.project.project_id,
+          project_type: props.project.project_type,
+          version_id: queuedVersionData.id,
+          title: props.project.title,
+          source: 'SearchCard',
+        })
+      }
+    } else {
+      props.modInstallModal.show(
+        props.project.project_id,
+        versions,
+        props.project.title,
+        props.project.project_type,
+      )
+      installing.value = false
+      return
+    }
+    if (props.instance) installed.value = true
+  }
+
+  installing.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.icon {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: center;
+  height: 6rem;
+}
+
+.content-wrapper {
+  display: flex;
+  justify-content: space-between;
+  grid-column: 2 / 4;
+  flex-direction: column;
+  grid-row: 1;
+  gap: 0.5rem;
+
+  .description {
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+}
+
+.stats {
+  grid-column: 1 / 3;
+  grid-row: 2;
+  justify-self: stretch;
+  align-self: start;
+}
+
+.install {
+  grid-column: 3 / 4;
+  grid-row: 2;
+  justify-self: end;
+  align-self: start;
+}
+
+.card {
+  margin-bottom: 0;
+  display: grid;
+  grid-template-columns: 6rem auto 7rem;
+  gap: 0.75rem;
+  padding: 1rem;
+
+  &:active:not(&:disabled) {
+    scale: 0.98 !important;
+  }
+}
+
+.joined-text {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  column-gap: 0.5rem;
+  align-items: baseline;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  h2 {
+    margin-bottom: 0 !important;
+    word-wrap: break-word;
+    overflow-wrap: anywhere;
+  }
+}
+
+.button-group {
+  display: inline-flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/SplashScreen.vue
+++ b/apps/app-frontend/src/components/ui/SplashScreen.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="page-loading" :class="{ 'app-loading': appLoading }">
+    <AnimatedLogo class="initializing-icon" />
+  </div>
+</template>
+
+<script setup>
+import { AnimatedLogo } from '@modrinth/ui'
+
+defineProps({
+  appLoading: Boolean,
+})
+</script>
+
+<style scoped lang="scss">
+.page-loading {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  &.app-loading {
+    background-color: #16181c;
+    height: 100vh;
+  }
+}
+
+.initializing-icon {
+  width: 12rem;
+  height: 12rem;
+
+  :deep(svg),
+  svg {
+    width: 12rem;
+    height: 12rem;
+    fill: var(--color-brand);
+    color: var(--color-brand);
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/URLConfirmModal.vue
+++ b/apps/app-frontend/src/components/ui/URLConfirmModal.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { Modal, Button } from '@modrinth/ui'
+import { ref } from 'vue'
+import { useFetch } from '@/helpers/fetch.js'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import { get_categories } from '@/helpers/tags.js'
+import { handleError } from '@/store/notifications.js'
+import { install as packInstall } from '@/helpers/pack.js'
+import mixpanel from 'mixpanel-browser'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+
+const confirmModal = ref(null)
+const project = ref(null)
+const version = ref(null)
+const categories = ref(null)
+const installing = ref(false)
+const modInstallModal = ref(null)
+
+defineExpose({
+  async show(event) {
+    if (event.event === 'InstallVersion') {
+      version.value = await useFetch(
+        `https://api.modrinth.com/v2/version/${encodeURIComponent(event.id)}`,
+        'version',
+      )
+      project.value = await useFetch(
+        `https://api.modrinth.com/v2/project/${encodeURIComponent(version.value.project_id)}`,
+        'project',
+      )
+    } else {
+      project.value = await useFetch(
+        `https://api.modrinth.com/v2/project/${encodeURIComponent(event.id)}`,
+        'project',
+      )
+      version.value = await useFetch(
+        `https://api.modrinth.com/v2/version/${encodeURIComponent(project.value.versions[0])}`,
+        'version',
+      )
+    }
+    categories.value = (await get_categories().catch(handleError)).filter(
+      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+    )
+    confirmModal.value.show()
+    categories.value = (await get_categories().catch(handleError)).filter(
+      (cat) => project.value.categories.includes(cat.name) && cat.project_type === 'mod',
+    )
+    confirmModal.value.show()
+  },
+})
+
+async function install() {
+  confirmModal.value.hide()
+  if (project.value.project_type === 'modpack') {
+    await packInstall(
+      project.value.id,
+      version.value.id,
+      project.value.title,
+      project.value.icon_url,
+    ).catch(handleError)
+
+    mixpanel.track('PackInstall', {
+      id: project.value.id,
+      version_id: version.value.id,
+      title: project.value.title,
+      source: 'ProjectPage',
+    })
+  } else {
+    modInstallModal.value.show(
+      project.value.id,
+      [version.value],
+      project.value.title,
+      project.value.project_type,
+    )
+  }
+}
+</script>
+
+<template>
+  <Modal ref="confirmModal" :header="`Install ${project?.title}`">
+    <div class="modal-body">
+      <SearchCard
+        :project="project"
+        class="project-card"
+        :categories="categories"
+        @open="confirmModal.hide()"
+      />
+      <div class="button-row">
+        <div class="markdown-body">
+          <p>
+            Installing <code>{{ version.id }}</code> from Modrinth
+          </p>
+        </div>
+        <div class="button-group">
+          <Button :loading="installing" color="primary" @click="install">Install</Button>
+        </div>
+      </div>
+    </div>
+  </Modal>
+  <ModInstallModal ref="modInstallModal" />
+</template>
+
+<style scoped lang="scss">
+.modal-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-md);
+  padding: var(--gap-lg);
+}
+
+.button-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--gap-md);
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap-sm);
+}
+
+.project-card {
+  background-color: var(--color-bg);
+  width: 100%;
+
+  :deep(.badge) {
+    border: 1px solid var(--color-raised-bg);
+    background-color: var(--color-accent-contrast);
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/tutorial/GalleryImage.vue
+++ b/apps/app-frontend/src/components/ui/tutorial/GalleryImage.vue
--- a/apps/app-frontend/src/components/ui/tutorial/LoginCard.vue
+++ b/apps/app-frontend/src/components/ui/tutorial/LoginCard.vue
@@ -0,0 +1,140 @@
+<script setup>
+import { LogInIcon } from '@modrinth/assets'
+import { Button, Card } from '@modrinth/ui'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleError } from '@/store/notifications.js'
+import mixpanel from 'mixpanel-browser'
+import { ref } from 'vue'
+import { handleSevereError } from '@/store/error.js'
+const loading = ref(false)
+
+const props = defineProps({
+  nextPage: {
+    type: Function,
+    required: true,
+  },
+  prevPage: {
+    type: Function,
+    required: true,
+  },
+})
+
+async function login() {
+  try {
+    loading.value = true
+    const loggedIn = await login_flow()
+
+    if (loggedIn) {
+      await set_default_user(loggedIn.id).catch(handleError)
+    }
+
+    await mixpanel.track('AccountLogIn')
+    loading.value = false
+    props.nextPage()
+  } catch (err) {
+    loading.value = false
+    handleSevereError(err)
+  }
+}
+</script>
+
+<template>
+  <div class="login-card">
+    <img
+      src="https://launcher-files.modrinth.com/assets/default_profile.png"
+      class="logo"
+      alt="Minecraft art"
+    />
+    <Card class="logging-in">
+      <h2>Sign into Minecraft</h2>
+      <p>
+        Sign in with your Microsoft account to launch Minecraft with your mods and modpacks. If you
+        don't have a Minecraft account, you can purchase the game on the
+        <a
+          href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+          class="link"
+        >
+          Minecraft website
+        </a>
+      </p>
+      <div class="action-row">
+        <Button class="transparent" large @click="prevPage"> Back </Button>
+        <div class="sign-in-pair">
+          <Button color="primary" large :disabled="loading" @click="login">
+            <LogInIcon />
+            {{ loading ? 'Loading...' : 'Sign in' }}
+          </Button>
+        </div>
+        <Button class="transparent" large @click="nextPage()"> Finish</Button>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.login-card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  padding: var(--gap-lg);
+  width: 30rem;
+
+  img {
+    width: 100%;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  }
+}
+
+.logging-in {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  vertical-align: center;
+  gap: var(--gap-md);
+  background-color: var(--color-raised-bg);
+  width: 100%;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  p {
+    text-align: center;
+  }
+}
+
+.link {
+  color: var(--color-blue);
+  text-decoration: underline;
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.action-row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--gap-md);
+  margin-top: var(--gap-md);
+
+  .transparent {
+    padding: 0 var(--gap-md);
+  }
+}
+
+.sign-in-pair {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+  align-items: center;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/tutorial/ModrinthLoginScreen.vue
+++ b/apps/app-frontend/src/components/ui/tutorial/ModrinthLoginScreen.vue
@@ -0,0 +1,326 @@
+<script setup>
+import { UserIcon, LockIcon, MailIcon } from '@modrinth/assets'
+import { Button, Card, Checkbox } from '@modrinth/ui'
+import {
+  DiscordIcon,
+  GithubIcon,
+  MicrosoftIcon,
+  GoogleIcon,
+  SteamIcon,
+  GitLabIcon,
+} from '@/assets/external'
+import {
+  authenticate_begin_flow,
+  authenticate_await_completion,
+  login_2fa,
+  create_account,
+  login_pass,
+} from '@/helpers/mr_auth.js'
+import { handleError, useNotifications } from '@/store/state.js'
+import { onMounted, ref } from 'vue'
+
+const props = defineProps({
+  nextPage: {
+    type: Function,
+    required: true,
+  },
+  prevPage: {
+    type: Function,
+    required: true,
+  },
+  modal: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+const loggingIn = ref(true)
+const twoFactorFlow = ref(null)
+const twoFactorCode = ref('')
+
+const email = ref('')
+const username = ref('')
+const password = ref('')
+const confirmPassword = ref('')
+const subscribe = ref(true)
+
+async function signInOauth(provider) {
+  const url = await authenticate_begin_flow(provider).catch(handleError)
+
+  await window.__TAURI_INVOKE__('tauri', {
+    __tauriModule: 'Shell',
+    message: {
+      cmd: 'open',
+      path: url,
+    },
+  })
+
+  const creds = await authenticate_await_completion().catch(handleError)
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function signIn2fa() {
+  const creds = await login_2fa(twoFactorCode.value, twoFactorFlow.value).catch(handleError)
+
+  if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function signIn() {
+  const creds = await login_pass(
+    username.value,
+    password.value,
+    window.turnstile.getResponse(),
+  ).catch(handleError)
+  window.turnstile.reset()
+
+  if (creds && creds.type === 'two_factor_required') {
+    twoFactorFlow.value = creds.flow
+  } else if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function createAccount() {
+  if (password.value !== confirmPassword.value) {
+    const notifs = useNotifications()
+    notifs.addNotification({
+      title: 'An error occurred',
+      text: 'Passwords do not match!',
+      type: 'error',
+    })
+    return
+  }
+
+  const creds = await create_account(
+    username.value,
+    email.value,
+    password.value,
+    window.turnstile.getResponse(),
+    subscribe.value,
+  ).catch(handleError)
+  window.turnstile.reset()
+
+  if (creds && creds.session) {
+    props.nextPage()
+  }
+}
+
+async function goToNextPage() {
+  props.nextPage()
+}
+
+onMounted(() => {
+  if (window.turnstile === null || !window.turnstile) {
+    const script = document.createElement('script')
+    script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
+    script.async = true
+    script.defer = true
+    document.head.appendChild(script)
+  }
+})
+</script>
+
+<template>
+  <Card>
+    <div class="cf-turnstile" data-sitekey="0x4AAAAAAAHWfmKCm7cUG869"></div>
+    <template v-if="twoFactorFlow">
+      <h1>Enter two-factor code</h1>
+      <p>Please enter a two-factor code to proceed.</p>
+      <input v-model="twoFactorCode" maxlength="11" type="text" placeholder="Enter code..." />
+    </template>
+    <template v-else>
+      <h1 v-if="loggingIn">Login to Modrinth</h1>
+      <h1 v-else>Create an account</h1>
+      <div class="button-grid">
+        <Button class="discord" large @click="signInOauth('discord')">
+          <DiscordIcon />
+          Discord
+        </Button>
+        <Button class="github" large @click="signInOauth('github')">
+          <GithubIcon />
+          Github
+        </Button>
+        <Button class="white" large @click="signInOauth('microsoft')">
+          <MicrosoftIcon />
+          Microsoft
+        </Button>
+        <Button class="google" large @click="signInOauth('google')">
+          <GoogleIcon />
+          Google
+        </Button>
+        <Button class="white" large @click="signInOauth('steam')">
+          <SteamIcon />
+          Steam
+        </Button>
+        <Button class="gitlab" large @click="signInOauth('gitlab')">
+          <GitLabIcon />
+          GitLab
+        </Button>
+      </div>
+      <div class="divider">
+        <hr />
+        <p>Or</p>
+      </div>
+      <div v-if="!loggingIn" class="iconified-input username">
+        <MailIcon />
+        <input v-model="email" type="text" placeholder="Email" />
+      </div>
+      <div class="iconified-input username">
+        <UserIcon />
+        <input
+          v-model="username"
+          type="text"
+          :placeholder="loggingIn ? 'Email or username' : 'Username'"
+        />
+      </div>
+      <div class="iconified-input" :class="{ username: !loggingIn }">
+        <LockIcon />
+        <input v-model="password" type="password" placeholder="Password" />
+      </div>
+      <div v-if="!loggingIn" class="iconified-input username">
+        <LockIcon />
+        <input v-model="confirmPassword" type="password" placeholder="Confirm password" />
+      </div>
+      <Checkbox
+        v-if="!loggingIn"
+        v-model="subscribe"
+        class="subscribe-btn"
+        label="Subscribe to updates about Modrinth"
+      />
+      <div class="link-row">
+        <a v-if="loggingIn" class="button-base" @click="loggingIn = false"> Create account </a>
+        <a v-else class="button-base" @click="loggingIn = true">Sign in</a>
+        <a class="button-base" href="https://modrinth.com/auth/reset-password">
+          Forgot password?
+        </a>
+      </div>
+    </template>
+    <div class="button-row">
+      <Button class="transparent" large @click="prevPage"> {{ modal ? 'Close' : 'Back' }} </Button>
+      <Button v-if="twoFactorCode" color="primary" large @click="signIn2fa"> Login </Button>
+      <Button v-else-if="loggingIn" color="primary" large @click="signIn"> Login </Button>
+      <Button v-else color="primary" large @click="createAccount"> Create account </Button>
+      <Button v-if="!modal" class="transparent" large @click="goToNextPage"> Next </Button>
+    </div>
+  </Card>
+</template>
+
+<style scoped lang="scss">
+.card {
+  width: 25rem;
+}
+
+.button-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--gap-md);
+
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .discord {
+    background-color: #5865f2;
+    color: var(--color-contrast);
+  }
+
+  .github {
+    background-color: #8740f1;
+    color: var(--color-contrast);
+  }
+
+  .white {
+    background-color: var(--color-contrast);
+    color: var(--color-accent-contrast);
+  }
+
+  .google {
+    background-color: #4285f4;
+    color: var(--color-contrast);
+  }
+
+  .gitlab {
+    background-color: #fc6d26;
+    color: var(--color-contrast);
+  }
+}
+
+.divider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--gap-md) 0;
+
+  p {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: var(--color-raised-bg);
+    padding: 0 1rem;
+    margin: 0;
+  }
+
+  hr {
+    border: none;
+    width: 100%;
+    border-top: 2px solid var(--color-button-bg);
+  }
+}
+
+.iconified-input {
+  width: 100%;
+
+  input {
+    width: 100%;
+    flex-basis: auto;
+  }
+}
+
+.username {
+  margin-bottom: var(--gap-sm);
+}
+
+.link-row {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--gap-md) 0;
+
+  a {
+    color: var(--color-blue);
+    text-decoration: underline;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.button-row {
+  display: flex;
+  justify-content: space-between;
+
+  .btn {
+    flex-basis: auto;
+  }
+
+  .transparent {
+    padding: var(--gap-md) 0;
+  }
+}
+
+:deep {
+  .checkbox {
+    border: none;
+  }
+}
+</style>
--- a/apps/app-frontend/src/components/ui/tutorial/OnboardingScreen.vue
+++ b/apps/app-frontend/src/components/ui/tutorial/OnboardingScreen.vue
@@ -0,0 +1,284 @@
+<script setup>
+import { Button } from '@modrinth/ui'
+import { ref } from 'vue'
+import { get, set } from '@/helpers/settings.js'
+import mixpanel from 'mixpanel-browser'
+import GalleryImage from '@/components/ui/tutorial/GalleryImage.vue'
+import LoginCard from '@/components/ui/tutorial/LoginCard.vue'
+import StickyTitleBar from '@/components/ui/tutorial/StickyTitleBar.vue'
+
+const page = ref(1)
+
+const props = defineProps({
+  finish: {
+    type: Function,
+    default: () => {},
+  },
+})
+
+const flow = ref('')
+
+const nextPage = (newFlow) => {
+  page.value++
+  mixpanel.track('OnboardingPage', { page: page.value })
+
+  if (newFlow) {
+    flow.value = newFlow
+  }
+}
+
+const prevPage = () => {
+  page.value--
+}
+
+const finishOnboarding = async () => {
+  mixpanel.track('OnboardingFinish')
+  const settings = await get()
+  settings.fully_onboarded = true
+  await set(settings)
+  props.finish()
+}
+</script>
+
+<template>
+  <div class="onboarding">
+    <StickyTitleBar />
+    <GalleryImage
+      v-if="page === 1"
+      :gallery="[
+        {
+          url: 'https://launcher-files.modrinth.com/onboarding/home.png',
+          title: 'Discovery',
+          subtitle: 'See the latest and greatest mods and modpacks to play with from Modrinth',
+        },
+        {
+          url: 'https://launcher-files.modrinth.com/onboarding/discover.png',
+          title: 'Profile Management',
+          subtitle:
+            'Play, manage and search through all the amazing profiles downloaded on your computer at any time, even offline!',
+        },
+      ]"
+      logo
+    >
+      <Button color="primary" @click="nextPage"> Get started </Button>
+    </GalleryImage>
+    <LoginCard v-else-if="page === 2" :next-page="finishOnboarding" :prev-page="prevPage" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.sleek-primary {
+  background-color: var(--color-brand-highlight);
+  transition: all ease-in-out 0.1s;
+}
+
+.navigation-controls {
+  flex-grow: 1;
+  width: min-content;
+}
+
+.window-controls {
+  z-index: 20;
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.25rem;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+
+.container {
+  --appbar-height: 3.25rem;
+  --sidebar-width: 4.5rem;
+
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  .view {
+    width: calc(100% - var(--sidebar-width));
+
+    .appbar {
+      display: flex;
+      align-items: center;
+      background: var(--color-raised-bg);
+      box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+      padding: var(--gap-md);
+      height: 3.25rem;
+      gap: var(--gap-sm);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    .router-view {
+      width: 100%;
+      height: calc(100% - 3.125rem);
+      overflow: auto;
+      overflow-x: hidden;
+      background-color: var(--color-bg);
+    }
+  }
+}
+
+.nav-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  background-color: var(--color-raised-bg);
+  box-shadow: var(--shadow-inset-sm), var(--shadow-floating);
+  padding: var(--gap-md);
+  width: var(--sidebar-width);
+  max-width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+
+  --sidebar-width: 4.5rem;
+}
+
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 0.5rem;
+
+  .btn {
+    background-color: var(--color-raised-bg);
+    height: 3rem !important;
+    width: 3rem !important;
+    padding: 0.75rem;
+    border-radius: var(--radius-md);
+    box-shadow: none;
+
+    svg {
+      width: 1.5rem !important;
+      height: 1.5rem !important;
+      max-width: 1.5rem !important;
+      max-height: 1.5rem !important;
+    }
+
+    &.active {
+      background-color: var(--color-button-bg);
+      box-shadow: var(--shadow-floating);
+    }
+
+    &.sleek-primary {
+      background-color: var(--color-brand-highlight);
+      transition: all ease-in-out 0.1s;
+    }
+  }
+}
+
+.nav-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+}
+
+.sticky-tip {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+.intro-card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gap-xl);
+
+  .app-logo {
+    width: 100%;
+    height: auto;
+    display: block;
+    margin: auto;
+  }
+
+  p {
+    color: var(--color-contrast);
+    text-align: left;
+    width: 100%;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--gap-sm);
+  }
+}
+
+.final-tip {
+  position: absolute;
+  bottom: 50%;
+  right: 50%;
+  transform: translate(50%, 50%);
+  z-index: 10;
+}
+
+.onboarding {
+  background:
+    top linear-gradient(0deg, #31375f, rgba(8, 14, 55, 0)),
+    url(https://cdn.modrinth.com/landing-new/landing-lower.webp);
+  background-size: cover;
+  height: 100vh;
+  min-height: 100vh;
+  max-height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gap-xl);
+  padding-top: calc(2.5rem + var(--gap-lg));
+}
+
+.first-tip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+
+.whole-page-shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100%;
+  backdrop-filter: brightness(0.5);
+  -webkit-backdrop-filter: brightness(0.5);
+  z-index: 9;
+}
+</style>
--- a/apps/app-frontend/src/components/ui/tutorial/StickyTitleBar.vue
+++ b/apps/app-frontend/src/components/ui/tutorial/StickyTitleBar.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { Button } from '@modrinth/ui'
+import { XIcon } from '@modrinth/assets'
+import { appWindow } from '@tauri-apps/api/window'
+import { saveWindowState, StateFlags } from 'tauri-plugin-window-state-api'
+import { window } from '@tauri-apps/api'
+import { MinimizeIcon, MaximizeIcon } from '@/assets/icons'
+</script>
+
+<template>
+  <div data-tauri-drag-region class="fake-appbar">
+    <section class="window-controls">
+      <Button class="titlebar-button" icon-only @click="() => appWindow.minimize()">
+        <MinimizeIcon />
+      </Button>
+      <Button class="titlebar-button" icon-only @click="() => appWindow.toggleMaximize()">
+        <MaximizeIcon />
+      </Button>
+      <Button
+        class="titlebar-button close"
+        icon-only
+        @click="
+          () => {
+            saveWindowState(StateFlags.ALL)
+            window.getCurrent().close()
+          }
+        "
+      >
+        <XIcon />
+      </Button>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.fake-appbar {
+  position: absolute;
+  width: 100vw;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  height: 2.25rem;
+  background-color: var(--color-raised-bg);
+  -webkit-app-region: drag;
+  z-index: 10000;
+}
+
+.window-controls {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+
+  .titlebar-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all ease-in-out 0.1s;
+    background-color: var(--color-raised-bg);
+    color: var(--color-base);
+    border-radius: 0;
+    height: 2.25rem;
+
+    &.close {
+      &:hover,
+      &:active {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+    }
+
+    &:hover,
+    &:active {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/helpers/auth.js
+++ b/apps/app-frontend/src/helpers/auth.js
@@ -0,0 +1,55 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+// Example function:
+// User goes to auth_url to complete flow, and when completed, authenticate_await_completion() returns the credentials
+// export async function authenticate() {
+//   const auth_url = await authenticate_begin_flow()
+//   console.log(auth_url)
+//   await authenticate_await_completion()
+// }
+
+/// Authenticate a user with Hydra - part 1
+/// This begins the authentication flow quasi-synchronously
+/// This returns a DeviceLoginSuccess object, with two relevant fields:
+///  - verification_uri: the URL to go to to complete the flow
+///  - user_code: the code to enter on the verification_uri page
+export async function login() {
+  return await invoke('auth_login')
+}
+
+/// Retrieves the default user
+/// user is UUID
+export async function get_default_user() {
+  return await invoke('plugin:auth|auth_get_default_user')
+}
+
+/// Updates the default user
+/// user is UUID
+export async function set_default_user(user) {
+  return await invoke('plugin:auth|auth_set_default_user', { user })
+}
+
+/// Remove a user account from the database
+/// user is UUID
+export async function remove_user(user) {
+  return await invoke('plugin:auth|auth_remove_user', { user })
+}
+
+/// Returns a list of users
+/// Returns an Array of Credentials
+export async function users() {
+  return await invoke('plugin:auth|auth_users')
+}
+
+// Get a user by UUID
+// Prefer to use refresh() instead of this because it will refresh the credentials
+// user is UUID
+// Returns Credentials (of user)
+export async function get_user(user) {
+  return await invoke('plugin:auth|auth_get_user', { user })
+}
--- a/apps/app-frontend/src/helpers/events.js
+++ b/apps/app-frontend/src/helpers/events.js
@@ -0,0 +1,107 @@
+/*
+    Event listeners for interacting with the Rust api
+    These are all async functions that return a promise that resolves to the payload object (whatever Rust is trying to deliver)
+*/
+
+/*
+    callback is a function that takes a single argument, which is the payload object (whatever Rust is trying to deliver)
+
+    You can call these to await any kind of emitted signal from Rust, and then do something with the payload object
+    An example place to put this is at the start of main.js before the state is initialized- that way
+    you can listen for any emitted signal from Rust and do something with it as the state is being initialized
+
+    Example:
+      import { loading_listener } from '@/helpers/events'
+      await loading_listener((event) => {
+        // event.event is the event name (useful if you want to use a single callback fn for multiple event types)
+        // event.payload is the payload object
+        console.log(event)
+      })
+      
+    Putting that in a script will print any emitted signal from rust
+*/
+import { listen } from '@tauri-apps/api/event'
+
+/// Payload for the 'loading' event
+/*
+    LoadingPayload {
+        event: {
+          type: string, one of  "StateInit", "PackDownload", etc
+          (Optional fields depending on event type)
+          pack_name: name of the pack
+          pack_id, optional, the id of the modpack
+          pack_version, optional, the version of the modpack
+          profile_name: name of the profile
+          profile_uuid: unique identification of the profile
+
+        }
+        loader_uuid: unique identification of the loading bar
+        fraction: number, (as a fraction of 1, how much we've loaded so far). If null, by convention, loading is finished
+        message: message to display to the user
+    }
+*/
+export async function loading_listener(callback) {
+  return await listen('loading', (event) => callback(event.payload))
+}
+
+/// Payload for the 'process' event
+/*
+    ProcessPayload {
+        uuid: unique identification of the process in the state (currently identified by PID, but that will change)
+        pid: process ID
+        event: event type ("Launched", "Finished")
+        message: message to display to the user
+    }
+*/
+export async function process_listener(callback) {
+  return await listen('process', (event) => callback(event.payload))
+}
+
+/// Payload for the 'profile' event
+/*
+    ProfilePayload {
+        uuid: unique identification of the process in the state (currently identified by path, but that will change)
+        name: name of the profile
+        profile_path: relative path to profile (used for path identification)
+        path: path to profile (used for opening the profile in the OS file explorer)
+        event: event type ("Created", "Added", "Edited", "Removed")
+    }
+*/
+export async function profile_listener(callback) {
+  return await listen('profile', (event) => callback(event.payload))
+}
+
+/// Payload for the 'command' event
+/*
+  CommandPayload {
+    event: event type ("InstallMod", "InstallModpack", "InstallVersion"),
+    id: string id of the mod/modpack/version to install
+  }
+*/
+export async function command_listener(callback) {
+  return await listen('command', (event) => {
+    callback(event.payload)
+  })
+}
+
+/// Payload for the 'warning' event
+/*
+    WarningPayload {
+        message: message to display to the user
+    }
+*/
+export async function warning_listener(callback) {
+  return await listen('warning', (event) => callback(event.payload))
+}
+
+/// Payload for the 'offline' event
+/*
+  OfflinePayload {
+    offline: bool, true or false
+  }
+*/
+export async function offline_listener(callback) {
+  return await listen('offline', (event) => {
+    return callback(event.payload)
+  })
+}
--- a/apps/app-frontend/src/helpers/fetch.js
+++ b/apps/app-frontend/src/helpers/fetch.js
@@ -0,0 +1,18 @@
+import { ofetch } from 'ofetch'
+import { handleError } from '@/store/state.js'
+import { getVersion } from '@tauri-apps/api/app'
+
+export const useFetch = async (url, item, isSilent) => {
+  try {
+    const version = await getVersion()
+
+    return await ofetch(url, {
+      headers: { 'User-Agent': `modrinth/theseus/${version} (support@modrinth.com)` },
+    })
+  } catch (err) {
+    if (!isSilent) {
+      handleError({ message: `Error fetching ${item}` })
+    }
+    console.error(err)
+  }
+}
--- a/apps/app-frontend/src/helpers/import.js
+++ b/apps/app-frontend/src/helpers/import.js
@@ -0,0 +1,63 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+import { create } from './profile'
+
+/*
+  API for importing instances from other launchers
+  launcherType can be one of the following:
+  - MultiMC
+  - GDLauncher
+  - ATLauncher
+  - Curseforge
+  - PrismLauncher
+  - Unknown (shouldn't be used, but is used internally if the launcher type isn't recognized)
+
+  For each launcher type, we can get a guess of the default path for the launcher, and a list of importable instances
+  For most launchers, this will be the application's data directory, with two exceptions:
+  - MultiMC: this goes to the app directory (wherever the app is)
+  - Curseforge: this goes to the 'minecraft' subdirectory of the data directory, as Curseforge has multiple games
+
+*/
+
+/// Gets a list of importable instances from a launcher type and base path
+/// eg: get_importable_instances("MultiMC", "C:/MultiMC")
+/// returns ["Instance 1", "Instance 2"]
+export async function get_importable_instances(launcherType, basePath) {
+  return await invoke('plugin:import|import_get_importable_instances', { launcherType, basePath })
+}
+
+/// Import an instance from a launcher type and base path
+/// eg: import_instance("profile-name-to-go-to", "MultiMC", "C:/MultiMC", "Instance 1")
+export async function import_instance(launcherType, basePath, instanceFolder) {
+  // create a basic, empty instance (most properties will be filled in by the import process)
+  // We do NOT watch the fs for changes to avoid duplicate events during installation
+  // fs watching will be enabled once the instance is imported
+  const profilePath = await create(instanceFolder, '1.19.4', 'vanilla', 'latest', null, true)
+
+  return await invoke('plugin:import|import_import_instance', {
+    profilePath,
+    launcherType,
+    basePath,
+    instanceFolder,
+  })
+}
+
+/// Checks if this instance is valid for importing, given a certain launcher type
+/// eg: is_valid_importable_instance("C:/MultiMC/Instance 1", "MultiMC")
+export async function is_valid_importable_instance(instanceFolder, launcherType) {
+  return await invoke('plugin:import|import_is_valid_importable_instance', {
+    instanceFolder,
+    launcherType,
+  })
+}
+
+/// Gets the default path for the given launcher type
+/// null if it can't be found or doesn't exist
+/// eg: get_default_launcher_path("MultiMC")
+export async function get_default_launcher_path(launcherType) {
+  return await invoke('plugin:import|import_get_default_launcher_path', { launcherType })
+}
--- a/apps/app-frontend/src/helpers/jre.js
+++ b/apps/app-frontend/src/helpers/jre.js
@@ -0,0 +1,43 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+/*
+
+JavaVersion {
+    path: Path
+    version: String
+}
+
+*/
+
+// Finds all the installation of Java 7, if it exists
+// Returns [JavaVersion]
+export async function find_filtered_jres(version) {
+  return await invoke('plugin:jre|jre_find_filtered_jres', { version })
+}
+
+// Gets java version from a specific path by trying to run 'java -version' on it.
+// This also validates it, as it returns null if no valid java version is found at the path
+export async function get_jre(path) {
+  return await invoke('plugin:jre|jre_get_jre', { path })
+}
+
+// Tests JRE version by running 'java -version' on it.
+// Returns true if the version is valid, and matches given (after extraction)
+export async function test_jre(path, majorVersion, minorVersion) {
+  return await invoke('plugin:jre|jre_test_jre', { path, majorVersion, minorVersion })
+}
+
+// Automatically installs specified java version
+export async function auto_install_java(javaVersion) {
+  return await invoke('plugin:jre|jre_auto_install_java', { javaVersion })
+}
+
+// Get max memory in KiB
+export async function get_max_memory() {
+  return await invoke('plugin:jre|jre_get_max_memory')
+}
--- a/apps/app-frontend/src/helpers/logs.js
+++ b/apps/app-frontend/src/helpers/logs.js
@@ -0,0 +1,61 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+/*
+A log is a struct containing the filename string, stdout, and stderr, as follows:
+
+pub struct Logs {
+    pub filename:  String,
+    pub stdout: String,
+    pub stderr: String,
+}
+*/
+
+/// Get all logs that exist for a given profile
+/// This is returned as an array of Log objects, sorted by filename (the folder name, when the log was created)
+export async function get_logs(profilePath, clearContents) {
+  return await invoke('plugin:logs|logs_get_logs', { profilePath, clearContents })
+}
+
+/// Get a profile's log by filename
+export async function get_logs_by_filename(profilePath, logType, filename) {
+  return await invoke('plugin:logs|logs_get_logs_by_filename', { profilePath, logType, filename })
+}
+
+/// Get a profile's log text only by filename
+export async function get_output_by_filename(profilePath, logType, filename) {
+  return await invoke('plugin:logs|logs_get_output_by_filename', { profilePath, logType, filename })
+}
+
+/// Delete a profile's log by filename
+export async function delete_logs_by_filename(profilePath, logType, filename) {
+  return await invoke('plugin:logs|logs_delete_logs_by_filename', {
+    profilePath,
+    logType,
+    filename,
+  })
+}
+
+/// Delete all logs for a given profile
+export async function delete_logs(profilePath) {
+  return await invoke('plugin:logs|logs_delete_logs', { profilePath })
+}
+
+/// Get the latest log for a given profile and cursor (startpoint to read withi nthe file)
+/// Returns:
+/*
+  {
+    cursor: u64
+    output: String
+    new_file: bool <- the cursor was too far, meaning that the file was likely rotated/reset. This signals to the frontend to clear the log and start over with this struct.
+  }
+*/
+
+// From latest.log directly
+export async function get_latest_log_cursor(profilePath, cursor) {
+  return await invoke('plugin:logs|logs_get_latest_log_cursor', { profilePath, cursor })
+}
--- a/apps/app-frontend/src/helpers/metadata.js
+++ b/apps/app-frontend/src/helpers/metadata.js
@@ -0,0 +1,39 @@
+import { invoke } from '@tauri-apps/api/tauri'
+
+/// Gets the game versions from daedalus
+// Returns a VersionManifest
+export async function get_game_versions() {
+  return await invoke('plugin:metadata|metadata_get_game_versions')
+}
+
+// Gets the fabric versions from daedalus
+// Returns Manifest
+export async function get_fabric_versions() {
+  const c = await invoke('plugin:metadata|metadata_get_fabric_versions')
+  console.log('Getting fabric versions', c)
+  return c
+}
+
+// Gets the forge versions from daedalus
+// Returns Manifest
+export async function get_forge_versions() {
+  const c = await invoke('plugin:metadata|metadata_get_forge_versions')
+  console.log('Getting forge versions', c)
+  return c
+}
+
+// Gets the quilt versions from daedalus
+// Returns Manifest
+export async function get_quilt_versions() {
+  const c = await invoke('plugin:metadata|metadata_get_quilt_versions')
+  console.log('Getting quilt versions', c)
+  return c
+}
+
+// Gets the neoforge versions from daedalus
+// Returns Manifest
+export async function get_neoforge_versions() {
+  const c = await invoke('plugin:metadata|metadata_get_neoforge_versions')
+  console.log('Getting neoforge versions', c)
+  return c
+}
--- a/apps/app-frontend/src/helpers/mixpanel.js
+++ b/apps/app-frontend/src/helpers/mixpanel.js
@@ -0,0 +1,57 @@
+import mixpanel from 'mixpanel-browser'
+
+// mixpanel_track
+function trackWrapper(originalTrack) {
+  return function (event_name, properties = {}) {
+    try {
+      originalTrack(event_name, properties)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_track = trackWrapper(mixpanel.track.bind(mixpanel))
+
+// mixpanel_opt_out_tracking()
+function optOutTrackingWrapper(originalOptOutTracking) {
+  return function () {
+    try {
+      originalOptOutTracking()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_opt_out_tracking = optOutTrackingWrapper(
+  mixpanel.opt_out_tracking.bind(mixpanel),
+)
+
+// mixpanel_opt_in_tracking()
+function optInTrackingWrapper(originalOptInTracking) {
+  return function () {
+    try {
+      originalOptInTracking()
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_opt_in_tracking = optInTrackingWrapper(
+  mixpanel.opt_in_tracking.bind(mixpanel),
+)
+
+// mixpanel_init
+function initWrapper(originalInit) {
+  return function (token, config = {}) {
+    try {
+      originalInit(token, config)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+export const mixpanel_init = initWrapper(mixpanel.init.bind(mixpanel))
+
+export const mixpanel_is_loaded = () => {
+  return mixpanel.__loaded
+}
--- a/apps/app-frontend/src/helpers/mr_auth.js
+++ b/apps/app-frontend/src/helpers/mr_auth.js
@@ -0,0 +1,47 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+export async function authenticate_begin_flow(provider) {
+  return await invoke('plugin:mr_auth|authenticate_begin_flow', { provider })
+}
+
+export async function authenticate_await_completion() {
+  return await invoke('plugin:mr_auth|authenticate_await_completion')
+}
+
+export async function cancel_flow() {
+  return await invoke('plugin:mr_auth|cancel_flow')
+}
+export async function login_pass(username, password, challenge) {
+  return await invoke('plugin:mr_auth|login_pass', { username, password, challenge })
+}
+
+export async function login_2fa(code, flow) {
+  return await invoke('plugin:mr_auth|login_2fa', { code, flow })
+}
+
+export async function create_account(username, email, password, challenge, signUpNewsletter) {
+  return await invoke('plugin:mr_auth|create_account', {
+    username,
+    email,
+    password,
+    challenge,
+    signUpNewsletter,
+  })
+}
+
+export async function refresh() {
+  return await invoke('plugin:mr_auth|refresh')
+}
+
+export async function logout() {
+  return await invoke('plugin:mr_auth|logout')
+}
+
+export async function get() {
+  return await invoke('plugin:mr_auth|get')
+}
--- a/apps/app-frontend/src/helpers/pack.js
+++ b/apps/app-frontend/src/helpers/pack.js
@@ -0,0 +1,45 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+import { create } from './profile'
+
+// Installs pack from a version ID
+export async function install(projectId, versionId, packTitle, iconUrl) {
+  const location = {
+    type: 'fromVersionId',
+    project_id: projectId,
+    version_id: versionId,
+    title: packTitle,
+    icon_url: iconUrl,
+  }
+  const profile_creator = await invoke('plugin:pack|pack_get_profile_from_pack', { location })
+  const profile = await create(
+    profile_creator.name,
+    profile_creator.gameVersion,
+    profile_creator.modloader,
+    profile_creator.loaderVersion,
+    profile_creator.icon,
+  )
+
+  return await invoke('plugin:pack|pack_install', { location, profile })
+}
+
+// Installs pack from a path
+export async function install_from_file(path) {
+  const location = {
+    type: 'fromFile',
+    path: path,
+  }
+  const profile_creator = await invoke('plugin:pack|pack_get_profile_from_pack', { location })
+  const profile = await create(
+    profile_creator.name,
+    profile_creator.gameVersion,
+    profile_creator.modloader,
+    profile_creator.loaderVersion,
+    profile_creator.icon,
+  )
+  return await invoke('plugin:pack|pack_install', { location, profile })
+}
--- a/apps/app-frontend/src/helpers/process.js
+++ b/apps/app-frontend/src/helpers/process.js
@@ -0,0 +1,53 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+/// Gets if a process has finished by UUID
+/// Returns bool
+export async function has_finished_by_uuid(uuid) {
+  return await invoke('plugin:process|process_has_finished_by_uuid', { uuid })
+}
+
+/// Gets process exit status by UUID
+/// Returns u32
+export async function get_exit_status_by_uuid(uuid) {
+  return await invoke('plugin:process|process_get_exit_status_by_uuid', { uuid })
+}
+
+/// Gets all process IDs
+/// Returns [u32]
+export async function get_all_uuids() {
+  return await invoke('plugin:process|process_get_all_uuids')
+}
+
+/// Gets all running process IDs
+/// Returns [u32]
+export async function get_all_running_uuids() {
+  return await invoke('plugin:process|process_get_all_running_uuids')
+}
+
+/// Gets all running process IDs with a given profile path
+/// Returns [u32]
+export async function get_uuids_by_profile_path(profilePath) {
+  return await invoke('plugin:process|process_get_uuids_by_profile_path', { profilePath })
+}
+
+/// Gets all running process IDs with a given profile path
+/// Returns [u32]
+export async function get_all_running_profile_paths(profilePath) {
+  return await invoke('plugin:process|process_get_all_running_profile_paths', { profilePath })
+}
+
+/// Gets all running process IDs with a given profile path
+/// Returns [u32]
+export async function get_all_running_profiles() {
+  return await invoke('plugin:process|process_get_all_running_profiles')
+}
+
+/// Kills a process by UUID
+export async function kill_by_uuid(uuid) {
+  return await invoke('plugin:process|process_kill_by_uuid', { uuid })
+}
--- a/apps/app-frontend/src/helpers/profile.js
+++ b/apps/app-frontend/src/helpers/profile.js
@@ -0,0 +1,180 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+/// Add instance
+/*
+    name: String,           // the name of the profile, and relative path to create
+    game_version: String,   // the game version of the profile
+    modloader: ModLoader,   // the modloader to use
+    - ModLoader is an enum, with the following variants: Vanilla, Forge, Fabric, Quilt
+    loader_version: String, // the modloader version to use, set to "latest", "stable", or the ID of your chosen loader
+    icon: Path,  // the icon for the profile
+    - icon is a path to an image file, which will be copied into the profile directory
+*/
+
+export async function create(name, gameVersion, modloader, loaderVersion, icon, noWatch) {
+  //Trim string name to avoid "Unable to find directory"
+  name = name.trim()
+  return await invoke('plugin:profile_create|profile_create', {
+    name,
+    gameVersion,
+    modloader,
+    loaderVersion,
+    icon,
+    noWatch,
+  })
+}
+
+// duplicate a profile
+export async function duplicate(path) {
+  return await invoke('plugin:profile_create|profile_duplicate', { path })
+}
+
+// Remove a profile
+export async function remove(path) {
+  return await invoke('plugin:profile|profile_remove', { path })
+}
+
+// Get a profile by path
+// Returns a Profile
+export async function get(path, clearProjects) {
+  return await invoke('plugin:profile|profile_get', { path, clearProjects })
+}
+
+// Get a profile's full fs path
+// Returns a path
+export async function get_full_path(path) {
+  return await invoke('plugin:profile|profile_get_full_path', { path })
+}
+
+// Get's a mod's full fs path
+// Returns a path
+export async function get_mod_full_path(path, projectPath) {
+  return await invoke('plugin:profile|profile_get_mod_full_path', { path, projectPath })
+}
+
+// Get optimal java version from profile
+// Returns a java version
+export async function get_optimal_jre_key(path) {
+  return await invoke('plugin:profile|profile_get_optimal_jre_key', { path })
+}
+
+// Get a copy of the profile set
+// Returns hashmap of path -> Profile
+export async function list(clearProjects) {
+  return await invoke('plugin:profile|profile_list', { clearProjects })
+}
+
+export async function check_installed(path, projectId) {
+  return await invoke('plugin:profile|profile_check_installed', { path, projectId })
+}
+
+// Installs/Repairs a profile
+export async function install(path, force) {
+  return await invoke('plugin:profile|profile_install', { path, force })
+}
+
+// Updates all of a profile's projects
+export async function update_all(path) {
+  return await invoke('plugin:profile|profile_update_all', { path })
+}
+
+// Updates a specified project
+export async function update_project(path, projectPath) {
+  return await invoke('plugin:profile|profile_update_project', { path, projectPath })
+}
+
+// Add a project to a profile from a version
+// Returns a path to the new project file
+export async function add_project_from_version(path, versionId) {
+  return await invoke('plugin:profile|profile_add_project_from_version', { path, versionId })
+}
+
+// Add a project to a profile from a path + project_type
+// Returns a path to the new project file
+export async function add_project_from_path(path, projectPath, projectType) {
+  return await invoke('plugin:profile|profile_add_project_from_path', {
+    path,
+    projectPath,
+    projectType,
+  })
+}
+
+// Toggle disabling a project
+export async function toggle_disable_project(path, projectPath) {
+  return await invoke('plugin:profile|profile_toggle_disable_project', { path, projectPath })
+}
+
+// Remove a project
+export async function remove_project(path, projectPath) {
+  return await invoke('plugin:profile|profile_remove_project', { path, projectPath })
+}
+
+// Update a managed Modrinth profile to a specific version
+export async function update_managed_modrinth_version(path, versionId) {
+  return await invoke('plugin:profile|profile_update_managed_modrinth_version', { path, versionId })
+}
+
+// Repair a managed Modrinth profile
+export async function update_repair_modrinth(path) {
+  return await invoke('plugin:profile|profile_repair_managed_modrinth', { path })
+}
+
+// Export a profile to .mrpack
+/// included_overrides is an array of paths to override folders to include (ie: 'mods', 'resource_packs')
+// Version id is optional (ie: 1.1.5)
+export async function export_profile_mrpack(
+  path,
+  exportLocation,
+  includedOverrides,
+  versionId,
+  description,
+  name,
+) {
+  return await invoke('plugin:profile|profile_export_mrpack', {
+    path,
+    exportLocation,
+    includedOverrides,
+    versionId,
+    description,
+    name,
+  })
+}
+
+// Given a folder path, populate an array of all the subfolders
+// Intended to be used for finding potential override folders
+// profile
+// -- mods
+// -- resourcepacks
+// -- file1
+// => [mods, resourcepacks]
+// allows selection for 'included_overrides' in export_profile_mrpack
+export async function get_pack_export_candidates(profilePath) {
+  return await invoke('plugin:profile|profile_get_pack_export_candidates', { profilePath })
+}
+
+// Run Minecraft using a pathed profile
+// Returns PID of child
+export async function run(path) {
+  return await invoke('plugin:profile|profile_run', { path })
+}
+
+// Run Minecraft using a pathed profile
+// Waits for end
+export async function run_wait(path) {
+  return await invoke('plugin:profile|profile_run_wait', { path })
+}
+
+// Edits a profile
+export async function edit(path, editProfile) {
+  return await invoke('plugin:profile|profile_edit', { path, editProfile })
+}
+
+// Edits a profile's icon
+export async function edit_icon(path, iconPath) {
+  return await invoke('plugin:profile|profile_edit_icon', { path, iconPath })
+}
--- a/apps/app-frontend/src/helpers/settings.js
+++ b/apps/app-frontend/src/helpers/settings.js
@@ -0,0 +1,49 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+// Settings object
+/*
+
+Settings {
+    "memory": MemorySettings,
+    "game_resolution": [int int],
+    "custom_java_args": [String ...],
+    "custom_env_args" : [(string, string) ... ]>,
+    "java_globals": Hash of (string, Path),
+    "default_user": Uuid string (can be null),
+    "hooks": Hooks,
+    "max_concurrent_downloads": uint,
+    "version": u32,
+    "collapsed_navigation": bool,
+}
+
+Memorysettings {
+    "min": u32, can be null,
+    "max": u32,
+}
+
+*/
+
+// Get full settings object
+export async function get() {
+  return await invoke('plugin:settings|settings_get')
+}
+
+// Set full settings object
+export async function set(settings) {
+  return await invoke('plugin:settings|settings_set', { settings })
+}
+
+// Changes the config dir
+// Seizes the entire application state until its done
+export async function change_config_dir(newConfigDir) {
+  return await invoke('plugin:settings|settings_change_config_dir', { newConfigDir })
+}
+
+export async function is_dir_writeable(newConfigDir) {
+  return await invoke('plugin:settings|settings_is_dir_writeable', { newConfigDir })
+}
--- a/apps/app-frontend/src/helpers/state.js
+++ b/apps/app-frontend/src/helpers/state.js
@@ -0,0 +1,35 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+// Initialize the theseus API state
+// This should be called during the initializion/opening of the launcher
+export async function initialize_state() {
+  return await invoke('initialize_state')
+}
+
+// Gets active progress bars
+export async function progress_bars_list() {
+  return await invoke('plugin:utils|progress_bars_list')
+}
+
+// Check if any safe loading bars are active
+export async function check_safe_loading_bars_complete() {
+  return await invoke('plugin:utils|safety_check_safe_loading_bars')
+}
+
+// Get opening command
+// For example, if a user clicks on an .mrpack to open the app.
+// This should be called once and only when the app is done booting up and ready to receive a command
+// Returns a Command struct- see events.js
+export async function get_opening_command() {
+  return await invoke('plugin:utils|get_opening_command')
+}
+
+// Wait for settings to sync
+export async function await_sync() {
+  return await invoke('plugin:utils|await_sync')
+}
--- a/apps/app-frontend/src/helpers/tags.js
+++ b/apps/app-frontend/src/helpers/tags.js
@@ -0,0 +1,36 @@
+/**
+ * All theseus API calls return serialized values (both return values and errors);
+ * So, for example, addDefaultInstance creates a blank Profile object, where the Rust struct is serialized,
+ *  and deserialized into a usable JS object.
+ */
+import { invoke } from '@tauri-apps/api/tauri'
+
+// Gets tag bundle of all tags
+export async function get_tag_bundle() {
+  return await invoke('plugin:tags|tags_get_tag_bundle')
+}
+
+// Gets cached category tags
+export async function get_categories() {
+  return await invoke('plugin:tags|tags_get_categories')
+}
+
+// Gets cached loaders tags
+export async function get_loaders() {
+  return await invoke('plugin:tags|tags_get_loaders')
+}
+
+// Gets cached game_versions tags
+export async function get_game_versions() {
+  return await invoke('plugin:tags|tags_get_game_versions')
+}
+
+// Gets cached donation_platforms tags
+export async function get_donation_platforms() {
+  return await invoke('plugin:tags|tags_get_donation_platforms')
+}
+
+// Gets cached licenses tags
+export async function get_report_types() {
+  return await invoke('plugin:tags|tags_get_report_types')
+}
--- a/apps/app-frontend/src/helpers/utils.js
+++ b/apps/app-frontend/src/helpers/utils.js
@@ -0,0 +1,103 @@
+import {
+  add_project_from_version as installMod,
+  check_installed,
+  get_full_path,
+  get_mod_full_path,
+} from '@/helpers/profile'
+import { useFetch } from '@/helpers/fetch.js'
+import { handleError } from '@/store/notifications.js'
+import { invoke } from '@tauri-apps/api/tauri'
+
+export async function isDev() {
+  return await invoke('is_dev')
+}
+
+// One of 'Windows', 'Linux', 'MacOS'
+export async function getOS() {
+  return await invoke('plugin:utils|get_os')
+}
+
+export async function showInFolder(path) {
+  return await invoke('plugin:utils|show_in_folder', { path })
+}
+
+export async function showLauncherLogsFolder() {
+  return await invoke('plugin:utils|show_launcher_logs_folder', {})
+}
+
+// Opens a profile's folder in the OS file explorer
+export async function showProfileInFolder(path) {
+  const fullPath = await get_full_path(path)
+  return await showInFolder(fullPath)
+}
+
+export async function highlightModInProfile(profilePath, projectPath) {
+  const fullPath = await get_mod_full_path(profilePath, projectPath)
+  return await showInFolder(fullPath)
+}
+
+export const releaseColor = (releaseType) => {
+  switch (releaseType) {
+    case 'release':
+      return 'green'
+    case 'beta':
+      return 'orange'
+    case 'alpha':
+      return 'red'
+    default:
+      return ''
+  }
+}
+
+export const installVersionDependencies = async (profile, version) => {
+  for (const dep of version.dependencies) {
+    if (dep.dependency_type !== 'required') continue
+    // disallow fabric api install on quilt
+    if (dep.project_id === 'P7dR8mSH' && profile.metadata.loader === 'quilt') continue
+    if (dep.version_id) {
+      if (
+        dep.project_id &&
+        (await check_installed(profile.path, dep.project_id).catch(handleError))
+      )
+        continue
+      await installMod(profile.path, dep.version_id)
+    } else {
+      if (
+        dep.project_id &&
+        (await check_installed(profile.path, dep.project_id).catch(handleError))
+      )
+        continue
+      const depVersions = await useFetch(
+        `https://api.modrinth.com/v2/project/${dep.project_id}/version`,
+        'dependency versions',
+      )
+      const latest = depVersions.find(
+        (v) =>
+          v.game_versions.includes(profile.metadata.game_version) &&
+          v.loaders.includes(profile.metadata.loader),
+      )
+      if (latest) {
+        await installMod(profile.path, latest.id).catch(handleError)
+      }
+    }
+  }
+}
+
+export const openLink = (url) => {
+  window.__TAURI_INVOKE__('tauri', {
+    __tauriModule: 'Shell',
+    message: {
+      cmd: 'open',
+      path: url,
+    },
+  })
+}
+
+export const refreshOffline = async () => {
+  return await invoke('plugin:utils|refresh_offline', {})
+}
+
+// returns true/false
+export const isOffline = async () => {
+  return await invoke('plugin:utils|is_offline', {})
+}
--- a/apps/app-frontend/src/main.js
+++ b/apps/app-frontend/src/main.js
@@ -0,0 +1,83 @@
+import { createApp } from 'vue'
+import router from '@/routes'
+import App from '@/App.vue'
+import { createPinia } from 'pinia'
+import '@modrinth/assets/omorphia.scss'
+import '@/assets/stylesheets/global.scss'
+import 'floating-vue/dist/style.css'
+import FloatingVue from 'floating-vue'
+import { get_opening_command, initialize_state } from '@/helpers/state'
+import loadCssMixin from './mixins/macCssFix.js'
+import { get } from '@/helpers/settings'
+import { invoke } from '@tauri-apps/api'
+import { isDev } from './helpers/utils.js'
+import { createPlugin } from '@vintl/vintl/plugin'
+
+const VIntlPlugin = createPlugin({
+  controllerOpts: {
+    defaultLocale: 'en-US',
+    locale: 'en-US',
+    locales: [
+      {
+        tag: 'en-US',
+        meta: {
+          displayName: 'American English',
+        },
+      },
+    ],
+  },
+  globalMixin: true,
+  injectInto: [],
+})
+
+const pinia = createPinia()
+
+let app = createApp(App)
+app.use(router)
+app.use(pinia)
+app.use(FloatingVue)
+app.mixin(loadCssMixin)
+app.use(VIntlPlugin)
+
+const mountedApp = app.mount('#app')
+
+const raw_invoke = async (plugin, fn, args) => {
+  if (plugin === '') {
+    await invoke(fn, args)
+  } else {
+    await invoke('plugin:' + plugin + '|' + fn, args)
+  }
+}
+isDev()
+  .then((dev) => {
+    if (dev) {
+      window.raw_invoke = raw_invoke
+    }
+  })
+  .catch((err) => {
+    console.error(err)
+  })
+
+initialize_state()
+  .then(() => {
+    // First, redirect to other landing page if we have that setting
+    get()
+      .then((fetchSettings) => {
+        if (fetchSettings?.default_page && fetchSettings?.default_page !== 'Home') {
+          router.push({ name: fetchSettings?.default_page })
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+      .finally(() => {
+        mountedApp.initialize()
+        get_opening_command().then((command) => {
+          console.log(JSON.stringify(command)) // change me to use whatever FE command handler is made
+        })
+      })
+  })
+  .catch((err) => {
+    console.error('Failed to initialize app', err)
+    mountedApp.failure(err)
+  })
--- a/apps/app-frontend/src/mixins/macCssFix.js
+++ b/apps/app-frontend/src/mixins/macCssFix.js
@@ -0,0 +1,27 @@
+import { invoke } from '@tauri-apps/api/tauri'
+import cssContent from '@/assets/stylesheets/macFix.css?inline'
+
+export default {
+  async mounted() {
+    await this.checkDisableMouseover()
+  },
+  methods: {
+    async checkDisableMouseover() {
+      try {
+        // Fetch the CSS content from the Rust backend
+        const should_disable_mouseover = await invoke('plugin:utils|should_disable_mouseover')
+
+        if (should_disable_mouseover) {
+          // Create a style element and set its content
+          const styleElement = document.createElement('style')
+          styleElement.innerHTML = cssContent
+
+          // Append the style element to the document's head
+          document.head.appendChild(styleElement)
+        }
+      } catch (error) {
+        console.error('Error checking OS version from Rust backend', error)
+      }
+    },
+  },
+}
--- a/apps/app-frontend/src/pages/Browse.vue
+++ b/apps/app-frontend/src/pages/Browse.vue
@@ -0,0 +1,939 @@
+<script setup>
+import { computed, nextTick, ref, readonly, shallowRef, watch, onUnmounted } from 'vue'
+import { ClearIcon, SearchIcon, ClientIcon, ServerIcon, XIcon } from '@modrinth/assets'
+import {
+  Pagination,
+  Checkbox,
+  Button,
+  DropdownSelect,
+  Promotion,
+  NavRow,
+  Card,
+  SearchFilter,
+} from '@modrinth/ui'
+import { formatCategoryHeader, formatCategory } from '@modrinth/utils'
+import Multiselect from 'vue-multiselect'
+import { handleError } from '@/store/state'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { get_categories, get_loaders, get_game_versions } from '@/helpers/tags'
+import { useRoute, useRouter } from 'vue-router'
+import { Avatar } from '@modrinth/ui'
+import SearchCard from '@/components/ui/SearchCard.vue'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import ModInstallModal from '@/components/ui/ModInstallModal.vue'
+import SplashScreen from '@/components/ui/SplashScreen.vue'
+import IncompatibilityWarningModal from '@/components/ui/IncompatibilityWarningModal.vue'
+import { useFetch } from '@/helpers/fetch.js'
+import { check_installed, get, get as getInstance } from '@/helpers/profile.js'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { isOffline } from '@/helpers/utils'
+import { offline_listener } from '@/helpers/events'
+
+const router = useRouter()
+const route = useRoute()
+
+const offline = ref(await isOffline())
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
+const confirmModal = ref(null)
+const modInstallModal = ref(null)
+const incompatibilityWarningModal = ref(null)
+
+const breadcrumbs = useBreadcrumbs()
+breadcrumbs.setContext({ name: 'Browse', link: route.path, query: route.query })
+
+const loading = ref(false)
+const query = ref('')
+const facets = ref([])
+const orFacets = ref([])
+const selectedVersions = ref([])
+const onlyOpenSource = ref(false)
+const showSnapshots = ref(false)
+const hideAlreadyInstalled = ref(false)
+const selectedEnvironments = ref([])
+const sortTypes = readonly([
+  { display: 'Relevance', name: 'relevance' },
+  { display: 'Download count', name: 'downloads' },
+  { display: 'Follow count', name: 'follows' },
+  { display: 'Recently published', name: 'newest' },
+  { display: 'Recently updated', name: 'updated' },
+])
+const sortType = ref(sortTypes[0])
+const maxResults = ref(20)
+const currentPage = ref(1)
+const projectType = ref(route.params.projectType)
+const instanceContext = ref(null)
+const ignoreInstanceLoaders = ref(false)
+const ignoreInstanceGameVersions = ref(false)
+
+const results = shallowRef([])
+const pageCount = computed(() =>
+  results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
+)
+
+function getArrayOrString(x) {
+  if (typeof x === 'string' || x instanceof String) {
+    return [x]
+  } else {
+    return x
+  }
+}
+
+if (route.query.iv) {
+  ignoreInstanceGameVersions.value = route.query.iv === 'true'
+}
+if (route.query.il) {
+  ignoreInstanceLoaders.value = route.query.il === 'true'
+}
+if (route.query.i) {
+  instanceContext.value = await getInstance(route.query.i, true)
+}
+if (route.query.q) {
+  query.value = route.query.q
+}
+if (route.query.f) {
+  facets.value = getArrayOrString(route.query.f)
+}
+if (route.query.g) {
+  orFacets.value = getArrayOrString(route.query.g)
+}
+if (route.query.v) {
+  selectedVersions.value = getArrayOrString(route.query.v)
+}
+if (route.query.l) {
+  onlyOpenSource.value = route.query.l === 'true'
+}
+if (route.query.h) {
+  showSnapshots.value = route.query.h === 'true'
+}
+if (route.query.e) {
+  selectedEnvironments.value = getArrayOrString(route.query.e)
+}
+if (route.query.s) {
+  sortType.value.name = route.query.s
+
+  switch (sortType.value.name) {
+    case 'relevance':
+      sortType.value.display = 'Relevance'
+      break
+    case 'downloads':
+      sortType.value.display = 'Downloads'
+      break
+    case 'newest':
+      sortType.value.display = 'Recently published'
+      break
+    case 'updated':
+      sortType.value.display = 'Recently updated'
+      break
+    case 'follows':
+      sortType.value.display = 'Follow count'
+      break
+  }
+}
+
+if (route.query.m) {
+  maxResults.value = route.query.m
+}
+if (route.query.o) {
+  currentPage.value = Math.ceil(route.query.o / maxResults.value) + 1
+}
+if (route.query.ai) {
+  hideAlreadyInstalled.value = route.query.ai === 'true'
+}
+
+async function refreshSearch() {
+  const base = 'https://api.modrinth.com/v2/'
+
+  const params = [`limit=${maxResults.value}`, `index=${sortType.value.name}`]
+  if (query.value.length > 0) {
+    params.push(`query=${query.value.replace(/ /g, '+')}`)
+  }
+  if (instanceContext.value) {
+    if (!ignoreInstanceLoaders.value && projectType.value === 'mod') {
+      orFacets.value = [`categories:${encodeURIComponent(instanceContext.value.metadata.loader)}`]
+    }
+    if (!ignoreInstanceGameVersions.value) {
+      selectedVersions.value = [instanceContext.value.metadata.game_version]
+    }
+  }
+  if (
+    facets.value.length > 0 ||
+    orFacets.value.length > 0 ||
+    selectedVersions.value.length > 0 ||
+    selectedEnvironments.value.length > 0 ||
+    projectType.value
+  ) {
+    let formattedFacets = []
+    for (const facet of facets.value) {
+      formattedFacets.push([facet])
+    }
+    // loaders specifier
+    if (orFacets.value.length > 0) {
+      formattedFacets.push(orFacets.value)
+    } else if (projectType.value === 'mod') {
+      formattedFacets.push(
+        ['forge', 'fabric', 'quilt', 'neoforge'].map(
+          (x) => `categories:'${encodeURIComponent(x)}'`,
+        ),
+      )
+    } else if (projectType.value === 'datapack') {
+      formattedFacets.push(['datapack'].map((x) => `categories:'${encodeURIComponent(x)}'`))
+    }
+
+    if (selectedVersions.value.length > 0) {
+      const versionFacets = []
+      for (const facet of selectedVersions.value) {
+        versionFacets.push('versions:' + facet)
+      }
+      formattedFacets.push(versionFacets)
+    }
+    if (onlyOpenSource.value) {
+      formattedFacets.push(['open_source:true'])
+    }
+
+    if (selectedEnvironments.value.length > 0) {
+      let environmentFacets = []
+      const includesClient = selectedEnvironments.value.includes('client')
+      const includesServer = selectedEnvironments.value.includes('server')
+      if (includesClient && includesServer) {
+        environmentFacets = [['client_side:required'], ['server_side:required']]
+      } else {
+        if (includesClient) {
+          environmentFacets = [
+            ['client_side:optional', 'client_side:required'],
+            ['server_side:optional', 'server_side:unsupported'],
+          ]
+        }
+        if (includesServer) {
+          environmentFacets = [
+            ['client_side:optional', 'client_side:unsupported'],
+            ['server_side:optional', 'server_side:required'],
+          ]
+        }
+      }
+
+      formattedFacets = [...formattedFacets, ...environmentFacets]
+    }
+
+    if (projectType.value) {
+      formattedFacets.push([
+        `project_type:${projectType.value === 'datapack' ? 'mod' : projectType.value}`,
+      ])
+    }
+
+    if (hideAlreadyInstalled.value) {
+      const installedMods = await get(instanceContext.value.path, false).then((x) =>
+        Object.values(x.projects)
+          .filter((x) => x.metadata.project)
+          .map((x) => x.metadata.project.id),
+      )
+      installedMods.map((x) => [`project_id != ${x}`]).forEach((x) => formattedFacets.push(x))
+      console.log(`facets=${JSON.stringify(formattedFacets)}`)
+    }
+
+    params.push(`facets=${JSON.stringify(formattedFacets)}`)
+  }
+  const offset = (currentPage.value - 1) * maxResults.value
+  if (currentPage.value !== 1) {
+    params.push(`offset=${offset}`)
+  }
+  let url = 'search'
+  if (params.length > 0) {
+    for (let i = 0; i < params.length; i++) {
+      url += i === 0 ? `?${params[i]}` : `&${params[i]}`
+    }
+  }
+
+  let val = `${base}${url}`
+
+  let rawResults = await useFetch(val, 'search results', offline.value)
+  if (!rawResults) {
+    rawResults = {
+      hits: [],
+      total_hits: 0,
+      limit: 1,
+    }
+  }
+  if (instanceContext.value) {
+    for (val of rawResults.hits) {
+      val.installed = await check_installed(instanceContext.value.path, val.project_id).then(
+        (x) => (val.installed = x),
+      )
+    }
+  }
+  results.value = rawResults
+}
+
+async function onSearchChange(newPageNumber) {
+  currentPage.value = newPageNumber
+
+  if (query.value === null) {
+    return
+  }
+  await refreshSearch()
+  const obj = getSearchUrl((currentPage.value - 1) * maxResults.value, true)
+
+  // Only replace in router if the query is different
+  if (JSON.stringify(obj) != JSON.stringify(route.query)) {
+    await router.replace({ path: route.path, query: obj })
+    breadcrumbs.setContext({ name: 'Browse', link: route.path, query: obj })
+  }
+}
+
+const searchWrapper = ref(null)
+async function onSearchChangeToTop(newPageNumber) {
+  await onSearchChange(newPageNumber)
+  await nextTick()
+  searchWrapper.value.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+async function clearSearch() {
+  query.value = ''
+  await onSearchChange(1)
+}
+
+function getSearchUrl(offset, useObj) {
+  const queryItems = []
+  const obj = {}
+
+  if (query.value) {
+    queryItems.push(`q=${encodeURIComponent(query.value)}`)
+    obj.q = query.value
+  }
+  if (offset > 0) {
+    queryItems.push(`o=${offset}`)
+    obj.o = offset
+  }
+  if (facets.value.length > 0) {
+    queryItems.push(`f=${encodeURIComponent(facets.value)}`)
+    obj.f = facets.value
+  }
+  if (orFacets.value.length > 0) {
+    queryItems.push(`g=${encodeURIComponent(orFacets.value)}`)
+    obj.g = orFacets.value
+  }
+  if (selectedVersions.value.length > 0) {
+    queryItems.push(`v=${encodeURIComponent(selectedVersions.value)}`)
+    obj.v = selectedVersions.value
+  }
+  if (onlyOpenSource.value) {
+    queryItems.push('l=true')
+    obj.l = true
+  }
+  if (showSnapshots.value) {
+    queryItems.push('h=true')
+    obj.h = true
+  }
+  if (selectedEnvironments.value.length > 0) {
+    queryItems.push(`e=${encodeURIComponent(selectedEnvironments.value)}`)
+    obj.e = selectedEnvironments.value
+  }
+  if (sortType.value.name !== 'relevance') {
+    queryItems.push(`s=${encodeURIComponent(sortType.value.name)}`)
+    obj.s = sortType.value.name
+  }
+  if (maxResults.value !== 20) {
+    queryItems.push(`m=${encodeURIComponent(maxResults.value)}`)
+    obj.m = maxResults.value
+  }
+  if (instanceContext.value) {
+    queryItems.push(`i=${encodeURIComponent(instanceContext.value.path)}`)
+    obj.i = instanceContext.value.path
+  }
+  if (ignoreInstanceGameVersions.value) {
+    queryItems.push('iv=true')
+    obj.iv = true
+  }
+  if (ignoreInstanceLoaders.value) {
+    queryItems.push('il=true')
+    obj.il = true
+  }
+  if (hideAlreadyInstalled.value) {
+    queryItems.push('ai=true')
+    obj.ai = true
+  }
+
+  let url = `${route.path}`
+
+  if (queryItems.length > 0) {
+    url += `?${queryItems[0]}`
+
+    for (let i = 1; i < queryItems.length; i++) {
+      url += `&${queryItems[i]}`
+    }
+  }
+
+  return useObj ? obj : url
+}
+
+const sortedCategories = computed(() => {
+  const values = new Map()
+  for (const category of categories.value.filter(
+    (cat) => cat.project_type === (projectType.value === 'datapack' ? 'mod' : projectType.value),
+  )) {
+    if (!values.has(category.header)) {
+      values.set(category.header, [])
+    }
+    values.get(category.header).push(category)
+  }
+  return values
+})
+
+// Sorts alphabetically, but correctly identifies 8x, 128x, 256x, etc
+// identifier[0], then if it ties, identifier[1], etc
+async function sortByNameOrNumber(sortable, identifiers) {
+  sortable.sort((a, b) => {
+    for (let identifier of identifiers) {
+      let aNum = parseFloat(a[identifier])
+      let bNum = parseFloat(b[identifier])
+      if (isNaN(aNum) && isNaN(bNum)) {
+        // Both are strings, sort alphabetically
+        let stringComp = a[identifier].localeCompare(b[identifier])
+        if (stringComp != 0) return stringComp
+      } else if (!isNaN(aNum) && !isNaN(bNum)) {
+        // Both are numbers, sort numerically
+        let numComp = aNum - bNum
+        if (numComp != 0) return numComp
+      } else {
+        // One is a number and one is a string, numbers go first
+        let numStringComp = isNaN(aNum) ? 1 : -1
+        if (numStringComp != 0) return numStringComp
+      }
+    }
+    return 0
+  })
+  return sortable
+}
+
+async function clearFilters() {
+  for (const facet of [...facets.value]) {
+    await toggleFacet(facet, true)
+  }
+  for (const facet of [...orFacets.value]) {
+    await toggleOrFacet(facet, true)
+  }
+  onlyOpenSource.value = false
+  selectedVersions.value = []
+  selectedEnvironments.value = []
+  await onSearchChangeToTop(1)
+}
+
+async function toggleFacet(elementName, doNotSendRequest = false) {
+  const index = facets.value.indexOf(elementName)
+
+  if (index !== -1) {
+    facets.value.splice(index, 1)
+  } else {
+    facets.value.push(elementName)
+  }
+
+  if (!doNotSendRequest) {
+    await onSearchChangeToTop(1)
+  }
+}
+
+async function toggleOrFacet(elementName, doNotSendRequest) {
+  const index = orFacets.value.indexOf(elementName)
+  if (index !== -1) {
+    orFacets.value.splice(index, 1)
+  } else {
+    orFacets.value.push(elementName)
+  }
+
+  if (!doNotSendRequest) {
+    await onSearchChangeToTop(1)
+  }
+}
+
+function toggleEnv(environment, sendRequest) {
+  const index = selectedEnvironments.value.indexOf(environment)
+  if (index !== -1) {
+    selectedEnvironments.value.splice(index, 1)
+  } else {
+    selectedEnvironments.value.push(environment)
+  }
+
+  if (!sendRequest) {
+    onSearchChangeToTop(1)
+  }
+}
+
+watch(
+  () => route.params.projectType,
+  async (newType) => {
+    // Check if the newType is not the same as the current value
+    if (!newType || newType === projectType.value) return
+
+    projectType.value = newType
+    breadcrumbs.setContext({ name: 'Browse', link: `/browse/${projectType.value}` })
+
+    sortType.value = { display: 'Relevance', name: 'relevance' }
+    query.value = ''
+
+    loading.value = true
+    await clearFilters()
+    loading.value = false
+  },
+)
+
+const [categories, loaders, availableGameVersions] = await Promise.all([
+  get_categories()
+    .catch(handleError)
+    .then((s) => sortByNameOrNumber(s, ['header', 'name']))
+    .then(ref),
+  get_loaders().catch(handleError).then(ref),
+  get_game_versions().catch(handleError).then(ref),
+  refreshSearch(),
+])
+
+const selectableProjectTypes = computed(() => {
+  const values = [
+    { label: 'Shaders', href: `/browse/shader` },
+    { label: 'Resource Packs', href: `/browse/resourcepack` },
+  ]
+
+  if (instanceContext.value) {
+    if (
+      availableGameVersions.value.findIndex(
+        (x) => x.version === instanceContext.value.metadata.game_version,
+      ) <= availableGameVersions.value.findIndex((x) => x.version === '1.13')
+    ) {
+      values.unshift({ label: 'Data Packs', href: `/browse/datapack` })
+    }
+
+    if (instanceContext.value.metadata.loader !== 'vanilla') {
+      values.unshift({ label: 'Mods', href: '/browse/mod' })
+    }
+  } else {
+    values.unshift({ label: 'Data Packs', href: `/browse/datapack` })
+    values.unshift({ label: 'Mods', href: '/browse/mod' })
+    values.unshift({ label: 'Modpacks', href: '/browse/modpack' })
+  }
+
+  return values
+})
+
+const showVersions = computed(
+  () => instanceContext.value === null || ignoreInstanceGameVersions.value,
+)
+const showLoaders = computed(
+  () =>
+    (projectType.value !== 'datapack' &&
+      projectType.value !== 'resourcepack' &&
+      projectType.value !== 'shader' &&
+      instanceContext.value === null) ||
+    ignoreInstanceLoaders.value,
+)
+
+onUnmounted(() => unlistenOffline())
+</script>
+
+<template>
+  <div ref="searchWrapper" class="search-container">
+    <aside class="filter-panel">
+      <Card v-if="instanceContext" class="small-instance">
+        <router-link :to="`/instance/${encodeURIComponent(instanceContext.path)}`" class="instance">
+          <Avatar
+            :src="
+              !instanceContext.metadata.icon ||
+              (instanceContext.metadata.icon && instanceContext.metadata.icon.startsWith('http'))
+                ? instanceContext.metadata.icon
+                : convertFileSrc(instanceContext.metadata.icon)
+            "
+            :alt="instanceContext.metadata.name"
+            size="sm"
+          />
+          <div class="small-instance_info">
+            <span class="title">{{
+              instanceContext.metadata.name.length > 20
+                ? instanceContext.metadata.name.substring(0, 20) + '...'
+                : instanceContext.metadata.name
+            }}</span>
+            <span>
+              {{
+                instanceContext.metadata.loader.charAt(0).toUpperCase() +
+                instanceContext.metadata.loader.slice(1)
+              }}
+              {{ instanceContext.metadata.game_version }}
+            </span>
+          </div>
+        </router-link>
+        <Checkbox
+          v-model="ignoreInstanceGameVersions"
+          label="Override game versions"
+          class="filter-checkbox"
+          @update:model-value="onSearchChangeToTop(1)"
+          @click.prevent.stop
+        />
+        <Checkbox
+          v-model="ignoreInstanceLoaders"
+          label="Override loaders"
+          class="filter-checkbox"
+          @update:model-value="onSearchChangeToTop(1)"
+          @click.prevent.stop
+        />
+        <Checkbox
+          v-model="hideAlreadyInstalled"
+          label="Hide already installed"
+          class="filter-checkbox"
+          @update:model-value="onSearchChangeToTop(1)"
+          @click.prevent.stop
+        />
+      </Card>
+      <Card class="search-panel-card">
+        <Button
+          role="button"
+          :disabled="
+            onlyOpenSource === false &&
+            selectedEnvironments.length === 0 &&
+            selectedVersions.length === 0 &&
+            facets.length === 0 &&
+            orFacets.length === 0
+          "
+          @click="clearFilters"
+        >
+          <ClearIcon /> Clear filters
+        </Button>
+        <div v-if="showLoaders" class="loaders">
+          <h2>Loaders</h2>
+          <div
+            v-for="loader in loaders.filter(
+              (l) =>
+                (projectType !== 'mod' && l.supported_project_types?.includes(projectType)) ||
+                (projectType === 'mod' &&
+                  ['fabric', 'forge', 'quilt', 'neoforge'].includes(l.name)),
+            )"
+            :key="loader"
+          >
+            <SearchFilter
+              :active-filters="orFacets"
+              :icon="loader.icon"
+              :display-name="formatCategory(loader.name)"
+              :facet-name="`categories:${encodeURIComponent(loader.name)}`"
+              class="filter-checkbox"
+              @toggle="toggleOrFacet"
+            />
+          </div>
+        </div>
+        <div v-if="showVersions" class="versions">
+          <h2>Minecraft versions</h2>
+          <Checkbox v-model="showSnapshots" class="filter-checkbox" label="Include snapshots" />
+          <multiselect
+            v-model="selectedVersions"
+            :options="
+              showSnapshots
+                ? availableGameVersions.map((x) => x.version)
+                : availableGameVersions
+                    .filter((it) => it.version_type === 'release')
+                    .map((x) => x.version)
+            "
+            :multiple="true"
+            :searchable="true"
+            :show-no-results="false"
+            :close-on-select="false"
+            :clear-search-on-select="false"
+            :show-labels="false"
+            placeholder="Choose versions..."
+            @update:model-value="onSearchChangeToTop(1)"
+          />
+        </div>
+        <div
+          v-for="categoryList in Array.from(sortedCategories)"
+          :key="categoryList[0]"
+          class="categories"
+        >
+          <h2>{{ formatCategoryHeader(categoryList[0]) }}</h2>
+          <div v-for="category in categoryList[1]" :key="category.name">
+            <SearchFilter
+              :active-filters="facets"
+              :icon="category.icon"
+              :display-name="formatCategory(category.name)"
+              :facet-name="`categories:${encodeURIComponent(category.name)}`"
+              class="filter-checkbox"
+              @toggle="toggleFacet"
+            />
+          </div>
+        </div>
+        <div v-if="projectType !== 'datapack'" class="environment">
+          <h2>Environments</h2>
+          <SearchFilter
+            :active-filters="selectedEnvironments"
+            display-name="Client"
+            facet-name="client"
+            class="filter-checkbox"
+            @toggle="toggleEnv"
+          >
+            <ClientIcon aria-hidden="true" />
+          </SearchFilter>
+          <SearchFilter
+            :active-filters="selectedEnvironments"
+            display-name="Server"
+            facet-name="server"
+            class="filter-checkbox"
+            @toggle="toggleEnv"
+          >
+            <ServerIcon aria-hidden="true" />
+          </SearchFilter>
+        </div>
+        <div class="open-source">
+          <h2>Open source</h2>
+          <Checkbox
+            v-model="onlyOpenSource"
+            label="Open source only"
+            class="filter-checkbox"
+            @update:model-value="onSearchChangeToTop(1)"
+          />
+        </div>
+      </Card>
+    </aside>
+    <div class="search">
+      <Promotion class="promotion" :external="false" query-param="?r=launcher" />
+      <Card class="project-type-container">
+        <NavRow :links="selectableProjectTypes" />
+      </Card>
+      <Card class="search-panel-container">
+        <div class="iconified-input">
+          <SearchIcon aria-hidden="true" />
+          <input
+            v-model="query"
+            autocomplete="off"
+            type="text"
+            :placeholder="`Search ${projectType}s...`"
+            @input="onSearchChange(1)"
+          />
+          <Button @click="() => clearSearch()">
+            <XIcon />
+          </Button>
+        </div>
+        <div class="inline-option">
+          <span>Sort by</span>
+          <DropdownSelect
+            v-model="sortType"
+            name="Sort by"
+            :options="sortTypes"
+            :display-name="(option) => option?.display"
+            @change="onSearchChange(1)"
+          />
+        </div>
+        <div class="inline-option">
+          <span>Show per page</span>
+          <DropdownSelect
+            v-model="maxResults"
+            name="Max results"
+            :options="[5, 10, 15, 20, 50, 100]"
+            :default-value="maxResults"
+            :model-value="maxResults"
+            class="limit-dropdown"
+            @change="onSearchChange(1)"
+          />
+        </div>
+      </Card>
+      <Pagination
+        :page="currentPage"
+        :count="pageCount"
+        :link-function="(x) => getSearchUrl(x <= 1 ? 0 : (x - 1) * maxResults)"
+        class="pagination-before"
+        @switch-page="onSearchChange"
+      />
+      <SplashScreen v-if="loading" />
+      <section v-else-if="offline && results.total_hits === 0" class="offline">
+        You are currently offline. Connect to the internet to browse Modrinth!
+      </section>
+      <section v-else class="project-list display-mode--list instance-results" role="list">
+        <SearchCard
+          v-for="result in results.hits"
+          :key="result?.project_id"
+          :project="result"
+          :instance="instanceContext"
+          :categories="[
+            ...categories.filter(
+              (cat) =>
+                result?.display_categories.includes(cat.name) && cat.project_type === projectType,
+            ),
+            ...loaders.filter(
+              (loader) =>
+                result?.display_categories.includes(loader.name) &&
+                loader.supported_project_types?.includes(projectType),
+            ),
+          ]"
+          :confirm-modal="confirmModal"
+          :mod-install-modal="modInstallModal"
+          :incompatibility-warning-modal="incompatibilityWarningModal"
+          :installed="result.installed"
+        />
+      </section>
+      <pagination
+        :page="currentPage"
+        :count="pageCount"
+        :link-function="(x) => getSearchUrl(x <= 1 ? 0 : (x - 1) * maxResults)"
+        class="pagination-after"
+        @switch-page="onSearchChangeToTop"
+      />
+      <br />
+    </div>
+  </div>
+  <InstallConfirmModal ref="confirmModal" />
+  <ModInstallModal ref="modInstallModal" />
+  <IncompatibilityWarningModal ref="incompatibilityWarningModal" />
+</template>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
+<style lang="scss">
+.small-instance {
+  min-height: unset !important;
+
+  .instance {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+
+    .title {
+      font-weight: 600;
+      color: var(--color-contrast);
+    }
+  }
+
+  .small-instance_info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    justify-content: space-between;
+    padding: 0.25rem 0;
+  }
+}
+
+.filter-checkbox {
+  margin-bottom: 0.3rem;
+  font-size: 1rem;
+
+  svg {
+    display: flex;
+    align-self: center;
+    justify-self: center;
+  }
+
+  button.checkbox {
+    border: none;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.project-type-dropdown {
+  width: 100% !important;
+}
+
+.promotion {
+  margin-top: 1rem;
+}
+
+.project-type-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.search-panel-card {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0 !important;
+  min-height: min-content !important;
+}
+
+.iconified-input {
+  input {
+    max-width: none !important;
+    flex-basis: auto;
+  }
+}
+
+.search-panel-container {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 1rem !important;
+  white-space: nowrap;
+  gap: 1rem;
+
+  .inline-option {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+
+    .sort-dropdown {
+      max-width: 12.25rem;
+    }
+
+    .limit-dropdown {
+      width: 5rem;
+    }
+  }
+
+  .iconified-input {
+    flex-grow: 1;
+  }
+
+  .filter-panel {
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+
+      svg {
+        margin-right: 0.4rem;
+      }
+    }
+  }
+}
+
+.search-container {
+  display: flex;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+
+  .filter-panel {
+    position: fixed;
+    width: 20rem;
+    padding: 1rem 0.5rem 1rem 1rem;
+    display: flex;
+    flex-direction: column;
+    height: fit-content;
+    min-height: calc(100vh - 3.25rem);
+    max-height: calc(100vh - 3.25rem);
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      width: 0;
+      background: transparent;
+    }
+
+    h2 {
+      color: var(--color-contrast);
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      font-size: 1.16rem;
+    }
+  }
+
+  .search {
+    margin: 0 1rem 0.5rem 20.5rem;
+    width: calc(100% - 20.5rem);
+
+    .offline {
+      margin: 1rem;
+      text-align: center;
+    }
+
+    .loading {
+      margin: 2rem;
+      text-align: center;
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/pages/Index.vue
+++ b/apps/app-frontend/src/pages/Index.vue
@@ -0,0 +1,136 @@
+<script setup>
+import { ref, onUnmounted, shallowRef, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import RowDisplay from '@/components/RowDisplay.vue'
+import { list } from '@/helpers/profile.js'
+import { offline_listener, profile_listener } from '@/helpers/events'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { useFetch } from '@/helpers/fetch.js'
+import { handleError } from '@/store/notifications.js'
+import dayjs from 'dayjs'
+import { isOffline } from '@/helpers/utils'
+
+const featuredModpacks = ref({})
+const featuredMods = ref({})
+const filter = ref('')
+
+const route = useRoute()
+const breadcrumbs = useBreadcrumbs()
+
+breadcrumbs.setRootContext({ name: 'Home', link: route.path })
+
+const recentInstances = shallowRef([])
+
+const offline = ref(await isOffline())
+
+const getInstances = async () => {
+  const profiles = await list(true).catch(handleError)
+  recentInstances.value = Object.values(profiles).sort((a, b) => {
+    return dayjs(b.metadata.last_played ?? 0).diff(dayjs(a.metadata.last_played ?? 0))
+  })
+
+  let filters = []
+  for (const instance of recentInstances.value) {
+    if (instance.metadata.linked_data && instance.metadata.linked_data.project_id) {
+      filters.push(`NOT"project_id"="${instance.metadata.linked_data.project_id}"`)
+    }
+  }
+  filter.value = filters.join(' AND ')
+}
+
+const getFeaturedModpacks = async () => {
+  const response = await useFetch(
+    `https://api.modrinth.com/v2/search?facets=[["project_type:modpack"]]&limit=10&index=follows&filters=${filter.value}`,
+    'featured modpacks',
+    offline.value,
+  )
+  if (response) {
+    featuredModpacks.value = response.hits
+  } else {
+    featuredModpacks.value = []
+  }
+}
+const getFeaturedMods = async () => {
+  const response = await useFetch(
+    'https://api.modrinth.com/v2/search?facets=[["project_type:mod"]]&limit=10&index=follows',
+    'featured mods',
+    offline.value,
+  )
+  if (response) {
+    featuredMods.value = response.hits
+  } else {
+    featuredModpacks.value = []
+  }
+}
+
+await getInstances()
+
+await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+
+const unlistenProfile = await profile_listener(async (e) => {
+  await getInstances()
+  if (e.event === 'created' || e.event === 'removed') {
+    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+  }
+})
+
+const unlistenOffline = await offline_listener(async (b) => {
+  offline.value = b
+  if (!b) {
+    await Promise.all([getFeaturedModpacks(), getFeaturedMods()])
+  }
+})
+
+// computed sums of recentInstances, featuredModpacks, featuredMods, treating them as arrays if they are not
+const total = computed(() => {
+  return (
+    (recentInstances.value?.length ?? 0) +
+    (featuredModpacks.value?.length ?? 0) +
+    (featuredMods.value?.length ?? 0)
+  )
+})
+
+onUnmounted(() => {
+  unlistenProfile()
+  unlistenOffline()
+})
+</script>
+
+<template>
+  <div class="page-container">
+    <RowDisplay
+      v-if="total > 0"
+      :instances="[
+        {
+          label: 'Jump back in',
+          route: '/library',
+          instances: recentInstances,
+          downloaded: true,
+        },
+        {
+          label: 'Popular packs',
+          route: '/browse/modpack',
+          instances: featuredModpacks,
+          downloaded: false,
+        },
+        {
+          label: 'Popular mods',
+          route: '/browse/mod',
+          instances: featuredMods,
+          downloaded: false,
+        },
+      ]"
+      :can-paginate="true"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+</style>
--- a/apps/app-frontend/src/pages/Library.vue
+++ b/apps/app-frontend/src/pages/Library.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { onUnmounted, ref, shallowRef } from 'vue'
+import GridDisplay from '@/components/GridDisplay.vue'
+import { list } from '@/helpers/profile.js'
+import { useRoute } from 'vue-router'
+import { useBreadcrumbs } from '@/store/breadcrumbs'
+import { offline_listener, profile_listener } from '@/helpers/events.js'
+import { handleError } from '@/store/notifications.js'
+import { Button } from '@modrinth/ui'
+import { PlusIcon } from '@modrinth/assets'
+import InstanceCreationModal from '@/components/ui/InstanceCreationModal.vue'
+import { NewInstanceImage } from '@/assets/icons'
+import { isOffline } from '@/helpers/utils'
+
+const route = useRoute()
+const breadcrumbs = useBreadcrumbs()
+
+breadcrumbs.setRootContext({ name: 'Library', link: route.path })
+
+const profiles = await list(true).catch(handleError)
+const instances = shallowRef(Object.values(profiles))
+
+const offline = ref(await isOffline())
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
+const unlistenProfile = await profile_listener(async () => {
+  const profiles = await list(true).catch(handleError)
+  instances.value = Object.values(profiles)
+})
+onUnmounted(() => {
+  unlistenProfile()
+  unlistenOffline()
+})
+</script>
+
+<template>
+  <GridDisplay v-if="instances.length > 0" label="Instances" :instances="instances" />
+  <div v-else class="no-instance">
+    <div class="icon">
+      <NewInstanceImage />
+    </div>
+    <h3>No instances found</h3>
+    <Button color="primary" :disabled="offline" @click="$refs.installationModal.show()">
+      <PlusIcon />
+      Create new instance
+    </Button>
+    <InstanceCreationModal ref="installationModal" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.no-instance {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--gap-md);
+
+  p,
+  h3 {
+    margin: 0;
+  }
+
+  .icon {
+    svg {
+      width: 10rem;
+      height: 10rem;
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/pages/Settings.vue
+++ b/apps/app-frontend/src/pages/Settings.vue
@@ -0,0 +1,580 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { LogOutIcon, LogInIcon, BoxIcon, FolderSearchIcon, UpdatedIcon } from '@modrinth/assets'
+import { Card, Slider, DropdownSelect, Toggle, Modal, Button } from '@modrinth/ui'
+import { handleError, useTheming } from '@/store/state'
+import { is_dir_writeable, change_config_dir, get, set } from '@/helpers/settings'
+import { get_max_memory } from '@/helpers/jre'
+import { get as getCreds, logout } from '@/helpers/mr_auth.js'
+import JavaSelector from '@/components/ui/JavaSelector.vue'
+import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
+import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'
+import { open } from '@tauri-apps/api/dialog'
+import { getOS } from '@/helpers/utils.js'
+import { getVersion } from '@tauri-apps/api/app'
+
+const pageOptions = ['Home', 'Library']
+
+const themeStore = useTheming()
+
+const version = await getVersion()
+
+const accessSettings = async () => {
+  const settings = await get()
+
+  settings.javaArgs = settings.custom_java_args.join(' ')
+  settings.envArgs = settings.custom_env_args.map((x) => x.join('=')).join(' ')
+
+  return settings
+}
+
+const fetchSettings = await accessSettings().catch(handleError)
+
+const settings = ref(fetchSettings)
+const settingsDir = ref(settings.value.loaded_config_dir)
+const maxMemory = ref(Math.floor((await get_max_memory().catch(handleError)) / 1024))
+
+watch(
+  settings,
+  async (oldSettings, newSettings) => {
+    if (oldSettings.loaded_config_dir !== newSettings.loaded_config_dir) {
+      return
+    }
+
+    const setSettings = JSON.parse(JSON.stringify(newSettings))
+
+    if (setSettings.opt_out_analytics) {
+      mixpanel_opt_out_tracking()
+    } else {
+      mixpanel_opt_in_tracking()
+    }
+
+    for (const [key, value] of Object.entries(setSettings.java_globals)) {
+      if (value?.path === '') {
+        value.path = undefined
+      }
+
+      if (value?.path) {
+        value.path = value.path.replace('java.exe', 'javaw.exe')
+      }
+
+      console.log(`${key}: ${value}`)
+    }
+
+    setSettings.custom_java_args = setSettings.javaArgs.trim().split(/\s+/).filter(Boolean)
+    setSettings.custom_env_args = setSettings.envArgs
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((x) => x.split('=').filter(Boolean))
+
+    if (!setSettings.hooks.pre_launch) {
+      setSettings.hooks.pre_launch = null
+    }
+    if (!setSettings.hooks.wrapper) {
+      setSettings.hooks.wrapper = null
+    }
+    if (!setSettings.hooks.post_exit) {
+      setSettings.hooks.post_exit = null
+    }
+
+    await set(setSettings)
+  },
+  { deep: true },
+)
+
+const credentials = ref(await getCreds().catch(handleError))
+const loginScreenModal = ref()
+
+async function logOut() {
+  await logout().catch(handleError)
+  credentials.value = await getCreds().catch(handleError)
+}
+
+async function signInAfter() {
+  loginScreenModal.value.hide()
+  credentials.value = await getCreds().catch(handleError)
+}
+
+async function findLauncherDir() {
+  const newDir = await open({
+    multiple: false,
+    directory: true,
+    title: 'Select a new app directory',
+  })
+
+  const writeable = await is_dir_writeable(newDir)
+
+  if (!writeable) {
+    handleError('The selected directory does not have proper permissions for write access.')
+    return
+  }
+
+  if (newDir) {
+    settingsDir.value = newDir
+    await refreshDir()
+  }
+}
+
+async function refreshDir() {
+  await change_config_dir(settingsDir.value).catch(handleError)
+  settings.value = await accessSettings().catch(handleError)
+  settingsDir.value = settings.value.loaded_config_dir
+}
+</script>
+
+<template>
+  <div class="settings-page">
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">General settings</span>
+        </h3>
+      </div>
+      <Modal
+        ref="loginScreenModal"
+        class="login-screen-modal"
+        :noblur="!themeStore.advancedRendering"
+      >
+        <ModrinthLoginScreen :modal="true" :prev-page="signInAfter" :next-page="signInAfter" />
+      </Modal>
+      <div class="adjacent-input">
+        <label for="theme">
+          <span class="label__title">Manage account</span>
+          <span v-if="credentials" class="label__description">
+            You are currently logged in as {{ credentials.user.username }}.
+          </span>
+          <span v-else> Sign in to your Modrinth account. </span>
+        </label>
+        <button v-if="credentials" class="btn" @click="logOut">
+          <LogOutIcon />
+          Sign out
+        </button>
+        <button v-else class="btn" @click="$refs.loginScreenModal.show()">
+          <LogInIcon />
+          Sign in
+        </button>
+      </div>
+      <label for="theme">
+        <span class="label__title">App directory</span>
+        <span class="label__description">
+          The directory where the launcher stores all of its files.
+        </span>
+      </label>
+      <div class="app-directory">
+        <div class="iconified-input">
+          <BoxIcon />
+          <input id="appDir" v-model="settingsDir" type="text" class="input" />
+          <Button @click="findLauncherDir">
+            <FolderSearchIcon />
+          </Button>
+        </div>
+        <Button large @click="refreshDir">
+          <UpdatedIcon />
+          Refresh
+        </Button>
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">Display</span>
+        </h3>
+      </div>
+      <div class="adjacent-input">
+        <label for="theme">
+          <span class="label__title">Color theme</span>
+          <span class="label__description">Change the global launcher color theme.</span>
+        </label>
+        <DropdownSelect
+          id="theme"
+          name="Theme dropdown"
+          :options="themeStore.themeOptions"
+          :default-value="settings.theme"
+          :model-value="settings.theme"
+          class="theme-dropdown"
+          @change="
+            (e) => {
+              themeStore.setThemeState(e.option.toLowerCase())
+              settings.theme = themeStore.selectedTheme
+            }
+          "
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="advanced-rendering">
+          <span class="label__title">Advanced rendering</span>
+          <span class="label__description">
+            Enables advanced rendering such as blur effects that may cause performance issues
+            without hardware-accelerated rendering.
+          </span>
+        </label>
+        <Toggle
+          id="advanced-rendering"
+          :model-value="themeStore.advancedRendering"
+          :checked="themeStore.advancedRendering"
+          @update:model-value="
+            (e) => {
+              themeStore.advancedRendering = e
+              settings.advanced_rendering = themeStore.advancedRendering
+            }
+          "
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="minimize-launcher">
+          <span class="label__title">Minimize launcher</span>
+          <span class="label__description"
+            >Minimize the launcher when a Minecraft process starts.</span
+          >
+        </label>
+        <Toggle
+          id="minimize-launcher"
+          :model-value="settings.hide_on_process"
+          :checked="settings.hide_on_process"
+          @update:model-value="
+            (e) => {
+              settings.hide_on_process = e
+            }
+          "
+        />
+      </div>
+      <div v-if="getOS() != 'MacOS'" class="adjacent-input">
+        <label for="native-decorations">
+          <span class="label__title">Native decorations</span>
+          <span class="label__description">Use system window frame (app restart required).</span>
+        </label>
+        <Toggle
+          id="native-decorations"
+          :model-value="settings.native_decorations"
+          :checked="settings.native_decorations"
+          @update:model-value="
+            (e) => {
+              settings.native_decorations = e
+            }
+          "
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="opening-page">
+          <span class="label__title">Default landing page</span>
+          <span class="label__description">Change the page to which the launcher opens on.</span>
+        </label>
+        <DropdownSelect
+          id="opening-page"
+          name="Opening page dropdown"
+          :options="pageOptions"
+          :default-value="settings.default_page"
+          :model-value="settings.default_page"
+          class="opening-page"
+          @change="
+            (e) => {
+              settings.default_page = e.option
+            }
+          "
+        />
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">Resource management</span>
+        </h3>
+      </div>
+
+      <div class="adjacent-input">
+        <label for="max-downloads">
+          <span class="label__title">Maximum concurrent downloads</span>
+          <span class="label__description"
+            >The maximum amount of files the launcher can download at the same time. Set this to a
+            lower value if you have a poor internet connection.</span
+          >
+        </label>
+        <Slider
+          id="max-downloads"
+          v-model="settings.max_concurrent_downloads"
+          :min="1"
+          :max="10"
+          :step="1"
+        />
+      </div>
+
+      <div class="adjacent-input">
+        <label for="max-writes">
+          <span class="label__title">Maximum concurrent writes</span>
+          <span class="label__description"
+            >The maximum amount of files the launcher can write to the disk at once. Set this to a
+            lower value if you are frequently getting I/O errors.</span
+          >
+        </label>
+        <Slider
+          id="max-writes"
+          v-model="settings.max_concurrent_writes"
+          :min="1"
+          :max="50"
+          :step="1"
+        />
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">Privacy</span>
+        </h3>
+      </div>
+      <div class="adjacent-input">
+        <label for="opt-out-analytics">
+          <span class="label__title">Disable analytics</span>
+          <span class="label__description">
+            Modrinth collects anonymized analytics and usage data to improve our user experience and
+            customize your experience. By enabling this option, you opt out and your data will no
+            longer be collected.
+          </span>
+        </label>
+        <Toggle
+          id="opt-out-analytics"
+          :model-value="settings.opt_out_analytics"
+          :checked="settings.opt_out_analytics"
+          @update:model-value="
+            (e) => {
+              settings.opt_out_analytics = e
+            }
+          "
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="disable-discord-rpc">
+          <span class="label__title">Disable Discord RPC</span>
+          <span class="label__description">
+            Disables the Discord Rich Presence integration. 'Modrinth' will no longer show up as a
+            game or app you are using on your Discord profile. This does not disable any
+            instance-specific Discord Rich Presence integrations, such as those added by mods.
+          </span>
+        </label>
+        <Toggle
+          id="disable-discord-rpc"
+          v-model="settings.disable_discord_rpc"
+          :checked="settings.disable_discord_rpc"
+        />
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">Java settings</span>
+        </h3>
+      </div>
+      <label for="java-21">
+        <span class="label__title">Java 21 location</span>
+      </label>
+      <JavaSelector id="java-17" v-model="settings.java_globals.JAVA_21" :version="21" />
+      <label for="java-17">
+        <span class="label__title">Java 17 location</span>
+      </label>
+      <JavaSelector id="java-17" v-model="settings.java_globals.JAVA_17" :version="17" />
+      <label for="java-8">
+        <span class="label__title">Java 8 location</span>
+      </label>
+      <JavaSelector id="java-8" v-model="settings.java_globals.JAVA_8" :version="8" />
+      <hr class="card-divider" />
+      <label for="java-args">
+        <span class="label__title">Java arguments</span>
+      </label>
+      <input
+        id="java-args"
+        v-model="settings.javaArgs"
+        autocomplete="off"
+        type="text"
+        class="installation-input"
+        placeholder="Enter java arguments..."
+      />
+      <label for="env-vars">
+        <span class="label__title">Environmental variables</span>
+      </label>
+      <input
+        id="env-vars"
+        v-model="settings.envArgs"
+        autocomplete="off"
+        type="text"
+        class="installation-input"
+        placeholder="Enter environmental variables..."
+      />
+      <hr class="card-divider" />
+      <div class="adjacent-input">
+        <label for="max-memory">
+          <span class="label__title">Java memory</span>
+          <span class="label__description">
+            The memory allocated to each instance when it is ran.
+          </span>
+        </label>
+        <Slider
+          id="max-memory"
+          v-model="settings.memory.maximum"
+          :min="8"
+          :max="maxMemory"
+          :step="64"
+          unit="mb"
+        />
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">Hooks</span>
+        </h3>
+      </div>
+      <div class="adjacent-input">
+        <label for="pre-launch">
+          <span class="label__title">Pre launch</span>
+          <span class="label__description"> Ran before the instance is launched. </span>
+        </label>
+        <input
+          id="pre-launch"
+          v-model="settings.hooks.pre_launch"
+          autocomplete="off"
+          type="text"
+          placeholder="Enter pre-launch command..."
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="wrapper">
+          <span class="label__title">Wrapper</span>
+          <span class="label__description"> Wrapper command for launching Minecraft. </span>
+        </label>
+        <input
+          id="wrapper"
+          v-model="settings.hooks.wrapper"
+          autocomplete="off"
+          type="text"
+          placeholder="Enter wrapper command..."
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="post-exit">
+          <span class="label__title">Post exit</span>
+          <span class="label__description"> Ran after the game closes. </span>
+        </label>
+        <input
+          id="post-exit"
+          v-model="settings.hooks.post_exit"
+          autocomplete="off"
+          type="text"
+          placeholder="Enter post-exit command..."
+        />
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">Window size</span>
+        </h3>
+      </div>
+      <div class="adjacent-input">
+        <label for="fullscreen">
+          <span class="label__title">Fullscreen</span>
+          <span class="label__description">
+            Overwrites the options.txt file to start in full screen when launched.
+          </span>
+        </label>
+        <Toggle
+          id="fullscreen"
+          :model-value="settings.force_fullscreen"
+          :checked="settings.force_fullscreen"
+          @update:model-value="
+            (e) => {
+              settings.force_fullscreen = e
+            }
+          "
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="width">
+          <span class="label__title">Width</span>
+          <span class="label__description"> The width of the game window when launched. </span>
+        </label>
+        <input
+          id="width"
+          v-model="settings.game_resolution[0]"
+          :disabled="settings.force_fullscreen"
+          autocomplete="off"
+          type="number"
+          placeholder="Enter width..."
+        />
+      </div>
+      <div class="adjacent-input">
+        <label for="height">
+          <span class="label__title">Height</span>
+          <span class="label__description"> The height of the game window when launched. </span>
+        </label>
+        <input
+          id="height"
+          v-model="settings.game_resolution[1]"
+          :disabled="settings.force_fullscreen"
+          autocomplete="off"
+          type="number"
+          class="input"
+          placeholder="Enter height..."
+        />
+      </div>
+    </Card>
+    <Card>
+      <div class="label">
+        <h3>
+          <span class="label__title size-card-header">About</span>
+        </h3>
+      </div>
+      <div>
+        <label>
+          <span class="label__title">App version</span>
+          <span class="label__description">Theseus v{{ version }} </span>
+        </label>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.settings-page {
+  margin: 1rem;
+}
+
+.installation-input {
+  width: 100% !important;
+  flex-grow: 1;
+}
+
+.theme-dropdown {
+  text-transform: capitalize;
+}
+
+.card-divider {
+  margin: 1rem 0;
+}
+
+:deep {
+  .login-screen-modal {
+    .modal-container .modal-body {
+      width: auto;
+
+      .content {
+        background: none;
+      }
+    }
+  }
+}
+
+.app-directory {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap-sm);
+
+  .iconified-input {
+    flex-grow: 1;
+
+    input {
+      flex-basis: auto;
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/pages/index.js
+++ b/apps/app-frontend/src/pages/index.js
@@ -0,0 +1,6 @@
+import Index from './Index.vue'
+import Browse from './Browse.vue'
+import Library from './Library.vue'
+import Settings from './Settings.vue'
+
+export { Index, Browse, Library, Settings }
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="instance-container">
+    <div class="side-cards">
+      <Card class="instance-card" @contextmenu.prevent.stop="handleRightClick">
+        <Avatar
+          size="lg"
+          :src="
+            !instance.metadata.icon ||
+            (instance.metadata.icon && instance.metadata.icon.startsWith('http'))
+              ? instance.metadata.icon
+              : convertFileSrc(instance.metadata?.icon)
+          "
+        />
+        <div class="instance-info">
+          <h2 class="name">{{ instance.metadata.name }}</h2>
+          <span class="metadata">
+            {{ instance.metadata.loader }} {{ instance.metadata.game_version }}
+          </span>
+        </div>
+        <span class="button-group">
+          <Button v-if="instance.install_stage !== 'installed'" disabled class="instance-button">
+            Installing...
+          </Button>
+          <Button
+            v-else-if="playing === true"
+            color="danger"
+            class="instance-button"
+            @click="stopInstance('InstancePage')"
+            @mouseover="checkProcess"
+          >
+            <StopCircleIcon />
+            Stop
+          </Button>
+          <Button
+            v-else-if="playing === false && loading === false"
+            color="primary"
+            class="instance-button"
+            @click="startInstance('InstancePage')"
+            @mouseover="checkProcess"
+          >
+            <PlayIcon />
+            Play
+          </Button>
+          <Button
+            v-else-if="loading === true && playing === false"
+            disabled
+            class="instance-button"
+          >
+            Loading...
+          </Button>
+          <Button
+            v-tooltip="'Open instance folder'"
+            class="instance-button"
+            @click="showProfileInFolder(instance.path)"
+          >
+            <FolderOpenIcon />
+            Folder
+          </Button>
+        </span>
+        <hr class="card-divider" />
+        <div class="pages-list">
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/`" class="btn">
+            <BoxIcon />
+            Content
+          </RouterLink>
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/logs`" class="btn">
+            <FileIcon />
+            Logs
+          </RouterLink>
+          <RouterLink :to="`/instance/${encodeURIComponent($route.params.id)}/options`" class="btn">
+            <SettingsIcon />
+            Options
+          </RouterLink>
+        </div>
+      </Card>
+    </div>
+    <div class="content">
+      <Promotion :external="false" query-param="?r=launcher" />
+      <RouterView v-slot="{ Component }">
+        <template v-if="Component">
+          <Suspense @pending="loadingBar.startLoading()" @resolve="loadingBar.stopLoading()">
+            <component
+              :is="Component"
+              :instance="instance"
+              :options="options"
+              :offline="offline"
+              :playing="playing"
+              :versions="modrinthVersions"
+              :installed="instance.install_stage !== 'installed'"
+            ></component>
+          </Suspense>
+        </template>
+      </RouterView>
+    </div>
+  </div>
+  <ContextMenu ref="options" @option-clicked="handleOptionsClick">
+    <template #play> <PlayIcon /> Play </template>
+    <template #stop> <StopCircleIcon /> Stop </template>
+    <template #add_content> <PlusIcon /> Add Content </template>
+    <template #edit> <EditIcon /> Edit </template>
+    <template #copy_path> <ClipboardCopyIcon /> Copy Path </template>
+    <template #open_folder> <ClipboardCopyIcon /> Open Folder </template>
+    <template #copy_link> <ClipboardCopyIcon /> Copy Link </template>
+    <template #open_link> <ClipboardCopyIcon /> Open In Modrinth <ExternalIcon /> </template>
+    <template #copy_names><EditIcon />Copy names</template>
+    <template #copy_slugs><HashIcon />Copy slugs</template>
+    <template #copy_links><GlobeIcon />Copy Links</template>
+    <template #toggle><EditIcon />Toggle selected</template>
+    <template #disable><XIcon />Disable selected</template>
+    <template #enable><CheckCircleIcon />Enable selected</template>
+    <template #hide_show><EyeIcon />Show/Hide unselected</template>
+    <template #update_all
+      ><UpdatedIcon />Update {{ selected.length > 0 ? 'selected' : 'all' }}</template
+    >
+    <template #filter_update><UpdatedIcon />Select Updatable</template>
+  </ContextMenu>
+</template>
+<script setup>
+import { Button, Avatar, Card, Promotion } from '@modrinth/ui'
+import {
+  BoxIcon,
+  SettingsIcon,
+  FileIcon,
+  PlayIcon,
+  StopCircleIcon,
+  EditIcon,
+  FolderOpenIcon,
+  ClipboardCopyIcon,
+  PlusIcon,
+  ExternalIcon,
+  HashIcon,
+  GlobeIcon,
+  EyeIcon,
+  XIcon,
+  CheckCircleIcon,
+  UpdatedIcon,
+} from '@modrinth/assets'
+import { get, run } from '@/helpers/profile'
+import {
+  get_all_running_profile_paths,
+  get_uuids_by_profile_path,
+  kill_by_uuid,
+} from '@/helpers/process'
+import { offline_listener, process_listener, profile_listener } from '@/helpers/events'
+import { useRoute, useRouter } from 'vue-router'
+import { ref, onUnmounted } from 'vue'
+import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
+import { isOffline, showProfileInFolder } from '@/helpers/utils.js'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
+import { mixpanel_track } from '@/helpers/mixpanel'
+import { convertFileSrc } from '@tauri-apps/api/tauri'
+import { useFetch } from '@/helpers/fetch'
+import { handleSevereError } from '@/store/error.js'
+
+const route = useRoute()
+
+const router = useRouter()
+const breadcrumbs = useBreadcrumbs()
+
+const instance = ref(await get(route.params.id).catch(handleError))
+
+breadcrumbs.setName(
+  'Instance',
+  instance.value.metadata.name.length > 40
+    ? instance.value.metadata.name.substring(0, 40) + '...'
+    : instance.value.metadata.name,
+)
+
+breadcrumbs.setContext({
+  name: instance.value.metadata.name,
+  link: route.path,
+  query: route.query,
+})
+
+const offline = ref(await isOffline())
+
+const loadingBar = useLoading()
+
+const uuid = ref(null)
+const playing = ref(false)
+const loading = ref(false)
+const options = ref(null)
+
+const startInstance = async (context) => {
+  loading.value = true
+  uuid.value = await run(route.params.id).catch(handleSevereError)
+  loading.value = false
+  playing.value = true
+
+  mixpanel_track('InstanceStart', {
+    loader: instance.value.metadata.loader,
+    game_version: instance.value.metadata.game_version,
+    source: context,
+  })
+}
+
+const checkProcess = async () => {
+  const runningPaths = await get_all_running_profile_paths().catch(handleError)
+  if (runningPaths.includes(instance.value.path)) {
+    playing.value = true
+    return
+  }
+
+  playing.value = false
+  uuid.value = null
+}
+
+// Get information on associated modrinth versions, if any
+const modrinthVersions = ref([])
+if (!(await isOffline()) && instance.value.metadata.linked_data?.project_id) {
+  modrinthVersions.value = await useFetch(
+    `https://api.modrinth.com/v2/project/${instance.value.metadata.linked_data.project_id}/version`,
+    'project',
+  )
+}
+
+await checkProcess()
+
+const stopInstance = async (context) => {
+  playing.value = false
+  if (!uuid.value) {
+    const uuids = await get_uuids_by_profile_path(instance.value.path).catch(handleError)
+    uuid.value = uuids[0] // populate Uuid to listen for in the process_listener
+    uuids.forEach(async (u) => await kill_by_uuid(u).catch(handleError))
+  } else await kill_by_uuid(uuid.value).catch(handleError)
+
+  mixpanel_track('InstanceStop', {
+    loader: instance.value.metadata.loader,
+    game_version: instance.value.metadata.game_version,
+    source: context,
+  })
+}
+
+const handleRightClick = (event) => {
+  const baseOptions = [
+    { name: 'add_content' },
+    { type: 'divider' },
+    { name: 'edit' },
+    { name: 'open_folder' },
+    { name: 'copy_path' },
+  ]
+
+  options.value.showMenu(
+    event,
+    instance.value,
+    playing.value
+      ? [
+          {
+            name: 'stop',
+            color: 'danger',
+          },
+          ...baseOptions,
+        ]
+      : [
+          {
+            name: 'play',
+            color: 'primary',
+          },
+          ...baseOptions,
+        ],
+  )
+}
+
+const handleOptionsClick = async (args) => {
+  switch (args.option) {
+    case 'play':
+      await startInstance('InstancePageContextMenu')
+      break
+    case 'stop':
+      await stopInstance('InstancePageContextMenu')
+      break
+    case 'add_content':
+      await router.push({
+        path: `/browse/${instance.value.metadata.loader === 'vanilla' ? 'datapack' : 'mod'}`,
+        query: { i: route.params.id },
+      })
+      break
+    case 'edit':
+      await router.push({
+        path: `/instance/${encodeURIComponent(route.params.id)}/options`,
+      })
+      break
+    case 'open_folder':
+      await showProfileInFolder(instance.value.path)
+      break
+    case 'copy_path':
+      await navigator.clipboard.writeText(instance.value.path)
+      break
+  }
+}
+
+const unlistenProfiles = await profile_listener(async (event) => {
+  if (event.profile_path_id === route.params.id) {
+    if (event.event === 'removed') {
+      await router.push({
+        path: '/',
+      })
+      return
+    }
+    instance.value = await get(route.params.id).catch(handleError)
+  }
+})
+
+const unlistenProcesses = await process_listener((e) => {
+  if (e.event === 'finished' && uuid.value === e.uuid) playing.value = false
+})
+
+const unlistenOffline = await offline_listener((b) => {
+  offline.value = b
+})
+
+onUnmounted(() => {
+  unlistenProcesses()
+  unlistenProfiles()
+  unlistenOffline()
+})
+</script>
+
+<style scoped lang="scss">
+.instance-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 17rem;
+}
+
+Button {
+  width: 100%;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.side-cards {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  min-height: calc(100% - 3.25rem);
+  max-height: calc(100% - 3.25rem);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    background: transparent;
+  }
+
+  .card {
+    min-height: unset;
+    margin-bottom: 0;
+  }
+}
+
+.instance-nav {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 1rem;
+  gap: 0.5rem;
+  background: var(--color-raised-bg);
+  height: 100%;
+}
+
+.name {
+  font-size: 1.25rem;
+  color: var(--color-contrast);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.metadata {
+  text-transform: capitalize;
+}
+
+.instance-container {
+  display: flex;
+  flex-direction: row;
+  overflow: auto;
+  gap: 1rem;
+  min-height: 100%;
+}
+
+.content {
+  margin-left: 19rem;
+}
+
+.instance-info {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  width: fit-content;
+  color: var(--color-orange);
+}
+
+.pages-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-xs);
+
+  .btn {
+    font-size: 100%;
+    font-weight: 400;
+    background: inherit;
+    transition: all ease-in-out 0.1s;
+    width: 100%;
+    color: var(--color-primary);
+    box-shadow: none;
+
+    &.router-link-exact-active {
+      box-shadow: var(--shadow-inset-lg);
+      background: var(--color-button-bg);
+      color: var(--color-contrast);
+    }
+
+    &:hover {
+      background-color: var(--color-button-bg);
+      color: var(--color-contrast);
+      box-shadow: var(--shadow-inset-lg);
+      text-decoration: none;
+    }
+
+    svg {
+      width: 1.3rem;
+      height: 1.3rem;
+    }
+  }
+}
+
+.instance-nav {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: left;
+  padding: 1rem;
+  gap: 0.5rem;
+  height: min-content;
+  width: 100%;
+}
+
+.instance-button {
+  width: fit-content;
+}
+
+.actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 0.5rem;
+}
+
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 1rem 0 0;
+  overflow: auto;
+}
+
+.stats {
+  grid-area: stats;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: var(--gap-md);
+
+  .stat {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: fit-content;
+    gap: var(--gap-xs);
+    --stat-strong-size: 1.25rem;
+
+    strong {
+      font-size: var(--stat-strong-size);
+    }
+
+    p {
+      margin: 0;
+    }
+
+    svg {
+      height: var(--stat-strong-size);
+      width: var(--stat-strong-size);
+    }
+  }
+
+  .date {
+    margin-top: auto;
+  }
+
+  @media screen and (max-width: 750px) {
+    flex-direction: row;
+    column-gap: var(--gap-md);
+    margin-top: var(--gap-xs);
+  }
+
+  @media screen and (max-width: 600px) {
+    margin-top: 0;
+
+    .stat-label {
+      display: none;
+    }
+  }
+}
+</style>
--- a/apps/app-frontend/src/pages/instance/Logs.vue
+++ b/apps/app-frontend/src/pages/instance/Logs.vue
@@ -0,0 +1,544 @@
+<template>
+  <Card class="log-card">
+    <div class="button-row">
+      <DropdownSelect
+        v-model="selectedLogIndex"
+        :default-value="0"
+        name="Log date"
+        :options="logs.map((_, index) => index)"
+        :display-name="(option) => logs[option]?.name"
+        :disabled="logs.length === 0"
+      />
+      <div class="button-group">
+        <Button :disabled="!logs[selectedLogIndex]" @click="copyLog()">
+          <ClipboardCopyIcon v-if="!copied" />
+          <CheckIcon v-else />
+          {{ copied ? 'Copied' : 'Copy' }}
+        </Button>
+        <Button color="primary" :disabled="offline || !logs[selectedLogIndex]" @click="share">
+          <ShareIcon />
+          Share
+        </Button>
+        <Button
+          v-if="logs[selectedLogIndex] && logs[selectedLogIndex].live === true"
+          @click="clearLiveLog()"
+        >
+          <TrashIcon />
+          Clear
+        </Button>
+
+        <Button
+          v-else
+          :disabled="!logs[selectedLogIndex] || logs[selectedLogIndex].live === true"
+          color="danger"
+          @click="deleteLog()"
+        >
+          <TrashIcon />
+          Delete
+        </Button>
+      </div>
+    </div>
+    <div class="button-row">
+      <input
+        id="text-filter"
+        v-model="searchFilter"
+        autocomplete="off"
+        type="text"
+        class="text-filter"
+        placeholder="Type to filter logs..."
+      />
+      <div class="filter-group">
+        <Checkbox
+          v-for="level in levels"
+          :key="level.toLowerCase()"
+          v-model="levelFilters[level.toLowerCase()]"
+          class="filter-checkbox"
+        >
+          {{ level }}
+        </Checkbox>
+      </div>
+    </div>
+    <div class="log-text">
+      <RecycleScroller
+        v-slot="{ item }"
+        ref="logContainer"
+        class="scroller"
+        :items="displayProcessedLogs"
+        direction="vertical"
+        :item-size="20"
+        key-field="id"
+      >
+        <div class="user no-wrap">
+          <span :style="{ color: item.prefixColor, 'font-weight': item.weight }">{{
+            item.prefix
+          }}</span>
+          <span :style="{ color: item.textColor }">{{ item.text }}</span>
+        </div>
+      </RecycleScroller>
+    </div>
+    <ShareModal
+      ref="shareModal"
+      header="Share Log"
+      share-title="Instance Log"
+      share-text="Check out this log from an instance on the Modrinth App"
+      link
+    />
+  </Card>
+</template>
+
+<script setup>
+import { CheckIcon, ClipboardCopyIcon, ShareIcon, TrashIcon } from '@modrinth/assets'
+import { Button, Card, ShareModal, Checkbox, DropdownSelect } from '@modrinth/ui'
+import {
+  delete_logs_by_filename,
+  get_logs,
+  get_output_by_filename,
+  get_latest_log_cursor,
+} from '@/helpers/logs.js'
+import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
+import dayjs from 'dayjs'
+import isToday from 'dayjs/plugin/isToday'
+import isYesterday from 'dayjs/plugin/isYesterday'
+import { get_uuids_by_profile_path } from '@/helpers/process.js'
+import { useRoute } from 'vue-router'
+import { process_listener } from '@/helpers/events.js'
+import { handleError } from '@/store/notifications.js'
+import { ofetch } from 'ofetch'
+
+import { RecycleScroller } from 'vue-virtual-scroller'
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+dayjs.extend(isToday)
+dayjs.extend(isYesterday)
+
+const route = useRoute()
+
+const props = defineProps({
+  instance: {
+    type: Object,
+    required: true,
+  },
+  offline: {
+    type: Boolean,
+    default: false,
+  },
+  playing: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const currentLiveLog = ref(null)
+const currentLiveLogCursor = ref(0)
+const emptyText = ['No live game detected.', 'Start your game to proceed.']
+
+const logs = ref([])
+await setLogs()
+
+const logsColored = true
+
+const selectedLogIndex = ref(0)
+const copied = ref(false)
+const logContainer = ref(null)
+const interval = ref(null)
+const userScrolled = ref(false)
+const isAutoScrolling = ref(false)
+const shareModal = ref(null)
+
+const levels = ['Comment', 'Error', 'Warn', 'Info', 'Debug', 'Trace']
+const levelFilters = ref({})
+levels.forEach((level) => {
+  levelFilters.value[level.toLowerCase()] = true
+})
+const searchFilter = ref('')
+
+function shouldDisplay(processedLine) {
+  if (!processedLine.level) {
+    return true
+  }
+
+  if (!levelFilters.value[processedLine.level.toLowerCase()]) {
+    return false
+  }
+  if (searchFilter.value !== '') {
+    if (!processedLine.text.toLowerCase().includes(searchFilter.value.toLowerCase())) {
+      return false
+    }
+  }
+  return true
+}
+
+// Selects from the processed logs which ones should be displayed (shouldDisplay)
+// In addition, splits each line by \n. Each split line is given the same properties as the original line
+const displayProcessedLogs = computed(() => {
+  return processedLogs.value.filter((l) => shouldDisplay(l))
+})
+
+const processedLogs = computed(() => {
+  // split based on newline and timestamp lookahead
+  // (not just newline because of multiline messages)
+  const splitPattern = /\n(?=(?:#|\[\d\d:\d\d:\d\d\]))/
+
+  const lines = logs.value[selectedLogIndex.value]?.stdout.split(splitPattern) || []
+  const processed = []
+  let id = 0
+  for (let i = 0; i < lines.length; i++) {
+    // Then split off of \n.
+    // Lines that are not the first have prefix = null
+    const text = getLineText(lines[i])
+    const prefix = getLinePrefix(lines[i])
+    const prefixColor = getLineColor(lines[i], true)
+    const textColor = getLineColor(lines[i], false)
+    const weight = getLineWeight(lines[i])
+    const level = getLineLevel(lines[i])
+    text.split('\n').forEach((line, index) => {
+      processed.push({
+        id: id,
+        text: line,
+        prefix: index === 0 ? prefix : null,
+        prefixColor: prefixColor,
+        textColor: textColor,
+        weight: weight,
+        level: level,
+      })
+      id += 1
+    })
+  }
+  return processed
+})
+
+async function getLiveStdLog() {
+  if (route.params.id) {
+    const uuids = await get_uuids_by_profile_path(route.params.id).catch(handleError)
+    let returnValue
+    if (uuids.length === 0) {
+      returnValue = emptyText.join('\n')
+    } else {
+      const logCursor = await get_latest_log_cursor(
+        props.instance.path,
+        currentLiveLogCursor.value,
+      ).catch(handleError)
+      if (logCursor.new_file) {
+        currentLiveLog.value = ''
+      }
+      currentLiveLog.value = currentLiveLog.value + logCursor.output
+      currentLiveLogCursor.value = logCursor.cursor
+      returnValue = currentLiveLog.value
+    }
+    return { name: 'Live Log', stdout: returnValue, live: true }
+  }
+  return null
+}
+
+async function getLogs() {
+  return (await get_logs(props.instance.path, true).catch(handleError))
+    .filter(
+      // filter out latest_stdout.log or anything without .log in it
+      (log) =>
+        log.filename !== 'latest_stdout.log' &&
+        log.filename !== 'latest_stdout' &&
+        log.stdout !== '' &&
+        (log.filename.includes('.log') || log.filename.endsWith('.txt')),
+    )
+    .map((log) => {
+      log.name = log.filename || 'Unknown'
+      log.stdout = 'Loading...'
+      return log
+    })
+}
+
+async function setLogs() {
+  const [liveStd, allLogs] = await Promise.all([getLiveStdLog(), getLogs()])
+  logs.value = [liveStd, ...allLogs]
+}
+
+const copyLog = () => {
+  if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
+    navigator.clipboard.writeText(logs.value[selectedLogIndex.value].stdout)
+    copied.value = true
+  }
+}
+
+const share = async () => {
+  if (logs.value.length > 0 && logs.value[selectedLogIndex.value]) {
+    const url = await ofetch('https://api.mclo.gs/1/log', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: `content=${encodeURIComponent(logs.value[selectedLogIndex.value].stdout)}`,
+    }).catch(handleError)
+
+    shareModal.value.show(url.url)
+  }
+}
+
+watch(selectedLogIndex, async (newIndex) => {
+  copied.value = false
+  userScrolled.value = false
+
+  if (logs.value.length > 1 && newIndex !== 0) {
+    logs.value[newIndex].stdout = 'Loading...'
+    logs.value[newIndex].stdout = await get_output_by_filename(
+      props.instance.path,
+      logs.value[newIndex].log_type,
+      logs.value[newIndex].filename,
+    ).catch(handleError)
+  }
+})
+
+if (logs.value.length > 1 && !props.playing) {
+  selectedLogIndex.value = 1
+} else {
+  selectedLogIndex.value = 0
+}
+
+const deleteLog = async () => {
+  if (logs.value[selectedLogIndex.value] && selectedLogIndex.value !== 0) {
+    let deleteIndex = selectedLogIndex.value
+    selectedLogIndex.value = deleteIndex - 1
+    await delete_logs_by_filename(
+      props.instance.path,
+      logs.value[deleteIndex].log_type,
+      logs.value[deleteIndex].filename,
+    ).catch(handleError)
+    await setLogs()
+  }
+}
+
+const clearLiveLog = async () => {
+  currentLiveLog.value = ''
+  // does not reset cursor
+}
+
+const isLineLevel = (text, level) => {
+  if ((text.includes('/INFO') || text.includes('[System] [CHAT]')) && level === 'info') {
+    return true
+  }
+
+  if (text.includes('/WARN') && level === 'warn') {
+    return true
+  }
+
+  if (text.includes('/DEBUG') && level === 'debug') {
+    return true
+  }
+
+  if (text.includes('/TRACE') && level === 'trace') {
+    return true
+  }
+
+  const errorTriggers = ['/ERROR', 'Exception:', ':?]', 'Error', '[thread', '	at']
+  if (level === 'error') {
+    for (const trigger of errorTriggers) {
+      if (text.includes(trigger)) return true
+    }
+  }
+
+  if (text.trim()[0] === '#' && level === 'comment') {
+    return true
+  }
+  return false
+}
+
+const getLineWeight = (text) => {
+  if (
+    !logsColored ||
+    isLineLevel(text, 'info') ||
+    isLineLevel(text, 'debug') ||
+    isLineLevel(text, 'trace')
+  ) {
+    return 'normal'
+  }
+
+  if (isLineLevel(text, 'error') || isLineLevel(text, 'warn')) {
+    return 'bold'
+  }
+}
+
+const getLineLevel = (text) => {
+  for (const level of levels) {
+    if (isLineLevel(text, level.toLowerCase())) {
+      return level
+    }
+  }
+}
+
+const getLineColor = (text, prefix) => {
+  if (isLineLevel(text, 'comment')) {
+    return 'var(--color-green)'
+  }
+
+  if (!logsColored || text.includes('[System] [CHAT]')) {
+    return 'var(--color-white)'
+  }
+  if (
+    (isLineLevel(text, 'info') || isLineLevel(text, 'debug') || isLineLevel(text, 'trace')) &&
+    prefix
+  ) {
+    return 'var(--color-blue)'
+  }
+  if (isLineLevel(text, 'warn')) {
+    return 'var(--color-orange)'
+  }
+  if (isLineLevel(text, 'error')) {
+    return 'var(--color-red)'
+  }
+}
+
+const getLinePrefix = (text) => {
+  if (text.includes(']:')) {
+    return text.split(']:')[0] + ']:'
+  }
+}
+
+const getLineText = (text) => {
+  if (text.includes(']:')) {
+    if (text.split(']:').length > 2) {
+      return text.split(']:').slice(1).join(']:')
+    }
+    return text.split(']:')[1]
+  } else {
+    return text
+  }
+}
+
+function handleUserScroll() {
+  if (!isAutoScrolling.value) {
+    userScrolled.value = true
+  }
+}
+
+interval.value = setInterval(async () => {
+  if (logs.value.length > 0) {
+    logs.value[0] = await getLiveStdLog()
+
+    const scroll = logContainer.value.getScroll()
+    // Allow resetting of userScrolled if the user scrolls to the bottom
+    if (selectedLogIndex.value === 0) {
+      if (scroll.end >= logContainer.value.$el.scrollHeight - 10) userScrolled.value = false
+      if (!userScrolled.value) {
+        await nextTick()
+        isAutoScrolling.value = true
+        logContainer.value.scrollToItem(displayProcessedLogs.value.length - 1)
+        setTimeout(() => (isAutoScrolling.value = false), 50)
+      }
+    }
+  }
+}, 250)
+
+const unlistenProcesses = await process_listener(async (e) => {
+  if (e.event === 'launched') {
+    currentLiveLog.value = ''
+    currentLiveLogCursor.value = 0
+    selectedLogIndex.value = 0
+  }
+  if (e.event === 'finished') {
+    currentLiveLog.value = ''
+    currentLiveLogCursor.value = 0
+    userScrolled.value = false
+    await setLogs()
+    selectedLogIndex.value = 1
+  }
+})
+
+onMounted(() => {
+  logContainer.value.$el.addEventListener('scroll', handleUserScroll)
+})
+
+onBeforeUnmount(() => {
+  logContainer.value.$el.removeEventListener('scroll', handleUserScroll)
+})
+onUnmounted(() => {
+  clearInterval(interval.value)
+  unlistenProcesses()
+})
+</script>
+
+<style scoped lang="scss">
+.log-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: calc(100vh - 11rem);
+}
+
+.button-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.log-text {
+  width: 100%;
+  height: 100%;
+  font-family: var(--mono-font);
+  background-color: var(--color-accent-contrast);
+  color: var(--color-contrast);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  overflow-x: auto; /* Enables horizontal scrolling */
+  overflow-y: hidden; /* Disables vertical scrolling on this wrapper */
+  white-space: nowrap; /* Keeps content on a single line */
+  white-space: normal;
+  color-scheme: dark;
+
+  .no-wrap {
+    white-space: pre;
+  }
+}
+
+.filter-checkbox {
+  margin-bottom: 0.3rem;
+  font-size: 1rem;
+
+  svg {
+    display: flex;
+    align-self: center;
+    justify-self: center;
+  }
+}
+
+.filter-group {
+  display: flex;
+  padding: 0.6rem;
+  flex-direction: row;
+  overflow: auto;
+  gap: 0.5rem;
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+  }
+}
+
+:deep(.vue-recycle-scroller__item-wrapper) {
+  overflow: visible; /* Enables horizontal scrolling */
+}
+
+:deep(.vue-recycle-scroller) {
+  &::-webkit-scrollbar-corner {
+    background-color: var(--color-bg);
+    border-radius: 0 0 10px 0;
+  }
+}
+
+.scroller {
+  height: 100%;
+}
+
+.user {
+  height: 32%;
+  padding: 0 12px;
+  display: flex;
+
+  align-items: center;
+}
+</style>
--- a/apps/app-frontend/src/pages/instance/Mods.vue
+++ b/apps/app-frontend/src/pages/instance/Mods.vue
--- a/apps/app-frontend/src/pages/instance/Options.vue
+++ b/apps/app-frontend/src/pages/instance/Options.vue
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -0,0 +1,6 @@
+import Index from './Index.vue'
+import Mods from './Mods.vue'
+import Options from './Options.vue'
+import Logs from './Logs.vue'
+
+export { Index, Mods, Options, Logs }
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg viewBox="0 0 2084 2084" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><g fill-rule="nonzero"><path d="M1041.67 81.38l272.437 159.032-825.246 478.685-272.438-157.971L1041.67 81.38zm87.28 371.074l274.024-159.032 463.937 271.945-276.14 153.73-461.821-266.643z" fill="#3b3b3b"/><path d="M216.42 561.126v961.081l825.247 479.746V1684.95l-551.222-321.774-1.587-644.079L216.42 561.126z" fill="#2e2e2e"/><path d="M1866.91 1517.97l-825.246 483.986v-317.003l550.164-320.714-1.058-645.139 276.14-153.73v952.6z" fill="#333"/><path d="M1590.77 719.097l-549.106 310.112v165.393l214.246-122.984v488.757l138.599-81.106V989.451l196.261-115.563V719.097z" fill="#89c236"/><path d="M488.858 719.097l1.587 644.079 152.353 90.118v-198.79l230.645 132.527v199.319l168.753 98.6v-655.741L488.858 719.097zm383.527 531.166l-227.471-131.466v-150.02l227.471 127.225v154.261z" fill="#7baf31"/></g></svg>
				`@@ -0,0 +1 @@`
				<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ko-fi</title><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z" fill="currentColor" /></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Open Collective</title><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Patreon</title><path d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z" fill="currentColor"/></svg>`
				`@@ -0,0 +1 @@`
				<svg id="Layer_1" enable-background="new 0 0 100 100" height="512" viewBox="0 0 100 100" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_x33_2.Reddit"><path id="Icon_69_" d="m90 50.6c-.2-4.8-4.2-8.6-9.1-8.5-2.2.1-4.2 1-5.7 2.4-6.8-4.7-14.9-7.2-23.2-7.4l3.9-18.7 12.9 2.6c.4 3.3 3.3 5.7 6.6 5.3s5.7-3.3 5.3-6.6-3.3-5.7-6.6-5.3c-1.9.2-3.6 1.3-4.5 2.9l-14.7-2.9c-1-.2-2 .4-2.2 1.4l-4.4 20.9c-8.4.1-16.5 2.7-23.5 7.4-3.5-3.3-9.1-3.2-12.4.4-3.3 3.5-3.2 9.1.4 12.4.7.6 1.5 1.2 2.4 1.6-.1.9-.1 1.8 0 2.6 0 13.5 15.7 24.5 35.1 24.5s35.1-10.9 35.1-24.5c.1-.9.1-1.8 0-2.6 2.8-1.4 4.7-4.5 4.6-7.9zm-60.3 6.1c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6zm35 16.6c-4.3 3.2-9.5 4.9-14.8 4.6-5.3.2-10.6-1.4-14.8-4.6-.6-.7-.5-1.7.2-2.3.6-.5 1.4-.5 2.1 0 3.6 2.6 8 4 12.5 3.8 4.5.2 8.9-1 12.6-3.7.7-.6 1.7-.6 2.4 0 .6.7.6 1.7 0 2.4v-.2zm-1-10.3c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6c.1 3.3-2.4 6.1-5.8 6.2-.1 0-.2 0-.3 0z"/></g></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>`