Initial commitwasm-initial

37 files changed, 2719 insertions, 0 deletions

diff --git a/Server.Client/Pages/Component/AboutDialog.razor b/Server.Client/Pages/Component/AboutDialog.razor
new file mode 100644
index 0000000..0ef8473
--- /dev/null
+++ b/Server.Client/Pages/Component/AboutDialog.razor
@@ -0,0 +1,736 @@
+@using System.Reflection
+@* @using Microsoft.AspNetCore.Hosting
+@inject IDbContextFactory<HBContext> dbFactory
+@inject IHostingEnvironment hostingEnvironment*@
+ @implements IDialog
+
+<Dialog @ref=dialog>
+    <p id="title">@Title</p>
+    <p id="author">Created by Jake Mannens</p>
+    <div id="license">
+        <center>GNU AFFERO GENERAL PUBLIC LICENSE</center><br/>
+        <center>Version 3, 19 November 2007</center>
+        <br/><br/>
+         Copyright (C) 2007 Free Software Foundation, Inc.
+         &lt<a href="https://fsf.org/" target="_blank">https://fsf.org/</a>&gt
+         Everyone is permitted to copy and distribute verbatim copies
+         of this license document, but changing it is not allowed.
+        <br/><br/>
+        <center>Preamble</center>
+        <br/><br/>
+        The GNU Affero General Public License is a free, copyleft license for
+        software and other kinds of works, specifically designed to ensure
+        cooperation with the community in the case of network server software.
+        <br/><br/>
+        The licenses for most software and other practical works are designed
+        to take away your freedom to share and change the works.  By contrast,
+        our General Public Licenses are intended to guarantee your freedom to
+        share and change all versions of a program--to make sure it remains free
+        software for all its users.
+        <br/><br/>
+        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.
+        <br/><br/>
+        Developers that use our General Public Licenses protect your rights
+        with two steps: (1) assert copyright on the software, and (2) offer
+        you this License which gives you legal permission to copy, distribute
+        and/or modify the software.
+        <br/><br/>
+        A secondary benefit of defending all users' freedom is that
+        improvements made in alternate versions of the program, if they
+        receive widespread use, become available for other developers to
+        incorporate.  Many developers of free software are heartened and
+        encouraged by the resulting cooperation.  However, in the case of
+        software used on network servers, this result may fail to come about.
+        The GNU General Public License permits making a modified version and
+        letting the public access it on a server without ever releasing its
+        source code to the public.
+        <br/><br/>
+        The GNU Affero General Public License is designed specifically to
+        ensure that, in such cases, the modified source code becomes available
+        to the community.  It requires the operator of a network server to
+        provide the source code of the modified version running there to the
+        users of that server.  Therefore, public use of a modified version, on
+        a publicly accessible server, gives the public access to the source
+        code of the modified version.
+        <br/><br/>
+        An older license, called the Affero General Public License and
+        published by Affero, was designed to accomplish similar goals.  This is
+        a different license, not a version of the Affero GPL, but Affero has
+        released a new version of the Affero GPL which permits relicensing under
+        this license.
+        <br/><br/>
+        The precise terms and conditions for copying, distribution and
+        modification follow.
+        <br/><br/>
+        <center>TERMS AND CONDITIONS</center>
+        <br/><br/>
+        0. Definitions.
+        <br/><br/>
+        "This License" refers to version 3 of the GNU Affero General Public License.
+        <br/><br/>
+        "Copyright" also means copyright-like laws that apply to other kinds of
+        works, such as semiconductor masks.
+        <br/><br/>
+        "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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        A "covered work" means either the unmodified Program or a work based
+        on the Program.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        1. Source Code.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        The Corresponding Source need not include anything that users
+        can regenerate automatically from other parts of the Corresponding
+        Source.
+        <br/><br/>
+        The Corresponding Source for a work in source code form is that
+        same work.
+        <br/><br/>
+        2. Basic Permissions.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        Conveying under any other circumstances is permitted solely under
+        the conditions stated below.  Sublicensing is not allowed; section 10
+        makes it unnecessary.
+        <br/><br/>
+        3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        4. Conveying Verbatim Copies.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        5. Conveying Modified Source Versions.
+        <br/><br/>
+        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:
+        <br/><br/>
+          a) The work must carry prominent notices stating that you modified
+            it, and giving a relevant date.
+        <br/><br/>
+          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".
+        <br/><br/>
+          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.
+        <br/><br/>
+          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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        6. Conveying Non-Source Forms.
+        <br/><br/>
+        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:
+        <br/><br/>
+          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.
+        <br/><br/>
+          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.
+        <br/><br/>
+          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.
+        <br/><br/>
+          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.
+        <br/><br/>
+          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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        "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.
+        <br/><br/>
+        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).
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        7. Additional Terms.
+        <br/><br/>
+        "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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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:
+        <br/><br/>
+          a) Disclaiming warranty or limiting liability differently from the
+            terms of sections 15 and 16 of this License; or
+        <br/><br/>
+          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
+        <br/><br/>
+          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
+        <br/><br/>
+          d) Limiting the use for publicity purposes of names of licensors or
+            authors of the material; or
+        <br/><br/>
+          e) Declining to grant rights under trademark law for use of some
+            trade names, trademarks, or service marks; or
+        <br/><br/>
+          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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        8. Termination.
+        <br/><br/>
+        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).
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        9. Acceptance Not Required for Having Copies.
+        <br/><br/>
+        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.
+        <br/><br/>
+        10. Automatic Licensing of Downstream Recipients.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        11. Patents.
+        <br/><br/>
+        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".
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+        12. No Surrender of Others' Freedom.
+        <br/><br/>
+        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.
+        <br/><br/>
+        13. Remote Network Interaction; Use with the GNU General Public License.
+        <br/><br/>
+        Notwithstanding any other provision of this License, if you modify the
+        Program, your modified version must prominently offer all users
+        interacting with it remotely through a computer network (if your version
+        supports such interaction) an opportunity to receive the Corresponding
+        Source of your version by providing access to the Corresponding Source
+        from a network server at no charge, through some standard or customary
+        means of facilitating copying of software.  This Corresponding Source
+        shall include the Corresponding Source for any work covered by version 3
+        of the GNU General Public License that is incorporated pursuant to the
+        following paragraph.
+        <br/><br/>
+        Notwithstanding any other provision of this License, you have
+        permission to link or combine any covered work with a work licensed
+        under version 3 of the GNU General Public License into a single
+        combined work, and to convey the resulting work.  The terms of this
+        License will continue to apply to the part which is the covered work,
+        but the work with which it is combined will remain governed by version
+        3 of the GNU General Public License.
+        <br/><br/>
+        14. Revised Versions of this License.
+        <br/><br/>
+        The Free Software Foundation may publish revised and/or new versions of
+        the GNU Affero General Public License from time to time.  Such new versions
+        will be similar in spirit to the present version, but may differ in detail to
+        address new problems or concerns.
+        <br/><br/>
+        Each version is given a distinguishing version number.  If the
+        Program specifies that a certain numbered version of the GNU Affero General
+        Public License "or any later version" applies to it, you have the
+        option of following the terms and conditions either of that numbered
+        version or of any later version published by the Free Software
+        Foundation.  If the Program does not specify a version number of the
+        GNU Affero General Public License, you may choose any version ever published
+        by the Free Software Foundation.
+        <br/><br/>
+        If the Program specifies that a proxy can decide which future
+        versions of the GNU Affero General Public License can be used, that proxy's
+        public statement of acceptance of a version permanently authorizes you
+        to choose that version for the Program.
+        <br/><br/>
+        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.
+        <br/><br/>
+        15. Disclaimer of Warranty.
+        <br/><br/>
+        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.
+        <br/><br/>
+        16. Limitation of Liability.
+        <br/><br/>
+        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.
+        <br/><br/>
+        17. Interpretation of Sections 15 and 16.
+        <br/><br/>
+        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.
+        <br/><br/>
+        <center>END OF TERMS AND CONDITIONS</center>
+        <br/><br/>
+        <center>How to Apply These Terms to Your New Programs</center>
+        <br/><br/>
+        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.
+        <br/><br/>
+        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.
+        <br/><br/>
+          &ltone line to give the program's name and a brief idea of what it does.&gt
+            Copyright (C) &ltyear&gt  &ltname of author&gt
+        <br/><br/>
+          This program is free software: you can redistribute it and/or modify
+            it under the terms of the GNU Affero General Public License as published
+            by the Free Software Foundation, either version 3 of the License, or
+            (at your option) any later version.
+        <br/><br/>
+          This program is distributed in the hope that it will be useful,
+            but WITHOUT ANY WARRANTY; without even the implied warranty of
+            MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+            GNU Affero General Public License for more details.
+        <br/><br/>
+          You should have received a copy of the GNU Affero General Public License
+            along with this program.  If not, see
+            &lt<a href="https://www.gnu.org/licenses/" target="_blank">https://www.gnu.org/licenses/</a>&gt.
+        <br/><br/>
+        Also add information on how to contact you by electronic and paper mail.
+        <br/><br/>
+        If your software can interact with users remotely through a computer
+        network, you should also make sure that it provides a way for users to
+        get its source.  For example, if your program is a web application, its
+        interface could display a "Source" link that leads users to an archive
+        of the code.  There are many ways you could offer source, and different
+        solutions will be better for different programs; see section 13 for the
+        specific requirements.
+        <br/><br/>
+        You should also get your employer (if you work as a programmer) or school,
+        if any, to sign a "copyright disclaimer" for the program, if necessary.
+        For more information on this, and how to apply and follow the GNU AGPL, see
+        &lt<a href="https://www.gnu.org/licenses/" target="_blank">https://www.gnu.org/licenses/</a>&gt.
+    </div>
+    <a href="https://gitlab.com/plasmicplexus/HyperBooru-Server" target="_blank">Source</a>
+	<div id="progressContainer">
+        @if(progress.HasValue) {
+            var untagged = progress.Value.Untagged.ToString("N0");
+            var total    = progress.Value.Total.ToString("N0");
+            var percent  = (progress.Value.Untagged * 100f / progress.Value.Total).ToString("f1");
+            <p id="progress">Untagged: @($"{untagged}/{total} ({percent}%)")</p>
+		}
+		<ProgressBar @ref=progressBar />
+	</div>
+    <ButtonContainer>
+        <button @onclick=Hide>Close</button>
+    </ButtonContainer>
+</Dialog>
+
+@code {
+    private Dialog dialog;
+
+    private ProgressBar progressBar;
+
+    private (long Untagged, long Total)? progress;
+
+    public bool Visible {
+        get => dialog.Visible;
+        set {
+            dialog.Visible = value;
+            if(value) {
+                // using var db = dbFactory.CreateDbContext();
+                // progress = (
+                //     Untagged: db.Media
+                //         .Where(m => m.Tags.Any(t => t.TagDefinition.ObjectId == (int) HBObjectId.IngestTag))
+                //         .Count(),
+                //     Total: db.Media.Count()
+                // );
+                // progressBar.Progress = (float) progress.Value!.Untagged / (float) progress.Value!.Total;
+                // InvokeAsync(() => StateHasChanged());
+            }
+        }
+    }
+
+    public void Show() => Visible = true;
+    public void Hide() => Visible = false;
+
+    public string Title =>
+        $"HyperBooru v{Version} {Development}";
+
+    public string? Version =>
+        GetType()
+        .Assembly
+        .GetCustomAttribute<AssemblyInformationalVersionAttribute>()?
+        .InformationalVersion;
+
+    public string? Development {
+        get {
+            #if DEBUG
+            return "(Development)";
+            #else
+            return hostingEnvironment.IsDevelopment() ? "(Development)" : null;
+            #endif
+        }
+    }
+}
diff --git a/Server.Client/Pages/Component/AboutDialog.razor.css b/Server.Client/Pages/Component/AboutDialog.razor.css
new file mode 100644
index 0000000..cbc4b59
--- /dev/null
+++ b/Server.Client/Pages/Component/AboutDialog.razor.css
@@ -0,0 +1,29 @@
+p#title {
+    margin-bottom: 0;
+}
+
+p#author {
+    font-size: 8pt;
+}
+
+p#progress {
+    flex:         1 0 auto;
+    font-size:    8pt;
+    margin-right: 10px;
+}
+
+div#license {
+    background:    #222;
+    border-radius: 10px;
+    box-sizing:    border-box;
+    font-family:   'Lucida Console';
+    font-size:     8pt;
+    max-height:    300px;
+    overflow-y:    auto;
+    padding:       20px;
+}
+
+div#progressContainer {
+    align-items: center;
+    display:     flex;
+}
diff --git a/Server.Client/Pages/Component/ButtonContainer.razor b/Server.Client/Pages/Component/ButtonContainer.razor
new file mode 100644
index 0000000..a631dcc
--- /dev/null
+++ b/Server.Client/Pages/Component/ButtonContainer.razor
@@ -0,0 +1,8 @@
+<div>
+    @ChildContent
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+}
diff --git a/Server.Client/Pages/Component/ButtonContainer.razor.css b/Server.Client/Pages/Component/ButtonContainer.razor.css
new file mode 100644
index 0000000..c2d5d25
--- /dev/null
+++ b/Server.Client/Pages/Component/ButtonContainer.razor.css
@@ -0,0 +1,10 @@
+div {
+    display:         flex;
+    justify-content: flex-end;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div {
+        justify-content: center;
+    }
+}
diff --git a/Server.Client/Pages/Component/Dialog.razor b/Server.Client/Pages/Component/Dialog.razor
new file mode 100644
index 0000000..673ec2f
--- /dev/null
+++ b/Server.Client/Pages/Component/Dialog.razor
@@ -0,0 +1,70 @@
+@inject IJSRuntime jsRuntime
+@implements IDialog
+
+<div
+    class="dialog"
+    onmousedown="dialogMouseDown(event)"
+    style="opacity:0;visibility:hidden;@(heightStyle)"
+    @ref=dialogDiv>
+    @if(Title is not null) {
+        <div class="titlebar" onmousedown="dialogTitleMouseDown(event)">
+            <p class="title">@Title</p>
+            <hr/>
+        </div>
+    }
+    <div class="content">
+        @ChildContent
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public int HeightPixels  { set => height = $"{value}px"; }
+    [Parameter]
+    public int HeightPercent { set => height = $"{value}%"; }
+
+    public bool Visible {
+        get => visible;
+        set {
+            visible = value;
+            jsRuntime.InvokeVoidAsync(
+                "setDialogVisibility",
+                new object?[] { dialogDiv, value });
+        }
+    }
+
+    private bool visible = false;
+
+    private string? height;
+
+    private ElementReference dialogDiv;
+
+    public void Show() => Visible = true;
+    public void Hide() => Visible = false;
+
+    protected override async void OnAfterRender(bool firstRender) {
+        if(firstRender) {
+            await jsRuntime.InvokeVoidAsync("dialogAddObjectReference", new object[] {
+                dialogDiv,
+                DotNetObjectReference.Create(this)
+            });
+        }
+    }
+
+    [JSInvokable("KeyHandler")]
+    public void KeyHandler(string key) {
+        if(key == "Escape") {
+            Hide();
+            return;
+        }
+    }
+
+    private string heightStyle =>
+    $"{(height is null ? "" : $"max-height:{height};")}";
+}
diff --git a/Server.Client/Pages/Component/Dialog.razor.css b/Server.Client/Pages/Component/Dialog.razor.css
new file mode 100644
index 0000000..93680c5
--- /dev/null
+++ b/Server.Client/Pages/Component/Dialog.razor.css
@@ -0,0 +1,35 @@
+div.dialog {
+    background:     var(--col-dialog-bg);
+    border-radius:  20px;
+    box-shadow:     0px 5px 10px 10px rgb(0 0 0 / 25%);
+    display:        flex;
+    flex-direction: column;
+    left:           50%;
+    padding:        0;
+    position:       absolute;
+    top:            50%;
+    transform:      translate(-50%, -50%);
+    transition:     visibility 0.1s, opacity 0.1s linear;
+    width:          min(450px, 100%);
+    z-index:        1000;
+}
+
+hr {
+    margin: 0;
+}
+
+div.titlebar {
+    cursor: grab;
+}
+
+div.titlebar p.title {
+    font-size: 10pt;
+    margin:    0;
+    padding:   10px 20px 10px 20px;
+}
+
+div.content {
+    display:        flex;
+    flex-direction: column;
+    padding:        20px;
+}
diff --git a/Server.Client/Pages/Component/MediaTagTable.razor b/Server.Client/Pages/Component/MediaTagTable.razor
new file mode 100644
index 0000000..0524739
--- /dev/null
+++ b/Server.Client/Pages/Component/MediaTagTable.razor
@@ -0,0 +1,75 @@
+@inject HBSession hb
+
+<table class="data-table">
+    <tr>
+        <th>Namespace</th>
+        <th>Tag Name</th>
+        <th></th>
+    </tr>
+    @foreach(var e in tagDefs) {
+        <tr>
+            <td>
+                @if(e.isImplicit) {
+                    <i>@e.tagDef.Namespace</i>
+                } else {
+                    @e.tagDef.Namespace
+                }
+            </td>
+            <td>
+                <a href="/Gallery?t=@(e.tagDef.TagDefinitionId)" class="nondecorated">
+                    @if(e.isImplicit) {
+                        <i>@e.tagDef.Name</i>
+                    } else {
+                        @e.tagDef.Name
+                    }
+                </a>
+            </td>
+            <td>
+                @if(!e.isImplicit) {
+                    <a href="javascript:;" @onclick=@(() => Delete(e.tagDef))>Delete</a>
+                } else {
+                    <a href="javascript:;" @onclick=@(() => MakeExplicit(e.tagDef))>Make Explicit</a>
+                }
+            </td>
+        </tr>
+    }
+</table>
+
+@code {
+    [Parameter]
+    public Guid MediaId { get; set; }
+
+    private (TagDefinition tagDef, bool isImplicit)[] tagDefs = [];
+
+    protected override void OnInitialized() => LoadTagDefs();
+
+    public void Refresh() {
+        LoadTagDefs();
+        // StateHasChanged();
+    }
+
+    private void Delete(TagDefinition tagDef) {
+        // tagService.RemoveTag(Media.Guid, tagDef.Guid);
+        // Refresh();
+    }
+
+    private async void LoadTagDefs() {
+        var tags = await hb.Media.GetTagsAsync(MediaId);
+
+        tagDefs = tags.Select(td => (tagDef: td, isImplicit: false)).ToArray();
+
+        await InvokeAsync(() => StateHasChanged());
+
+        // using var db = dbFactory.CreateDbContext();
+        // var media = db.Media.First(m => m.ObjectId == Media.ObjectId);
+
+        // tagDefs = tagService.GetAllTags(Media)
+        //     .Where(e => e.tagDefinition.Source == TagSource.UserTag)
+        //     .ToArray();
+    }
+
+    private void MakeExplicit(TagDefinition tagDef) {
+        // tagService.AddTag(Media, tagDef);
+        // Refresh();
+    }
+}
diff --git a/Server.Client/Pages/Component/MediaTagTable.razor.css b/Server.Client/Pages/Component/MediaTagTable.razor.css
new file mode 100644
index 0000000..4dedb3f
--- /dev/null
+++ b/Server.Client/Pages/Component/MediaTagTable.razor.css
@@ -0,0 +1,9 @@
+th, td {
+    font-size: 8pt;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    th, td {
+        font-size: 7pt;
+    }
+}
diff --git a/Server.Client/Pages/Component/MobileMenu.razor b/Server.Client/Pages/Component/MobileMenu.razor
new file mode 100644
index 0000000..49c45d5
--- /dev/null
+++ b/Server.Client/Pages/Component/MobileMenu.razor
@@ -0,0 +1,26 @@
+@inject NavigationManager navigationManager
+@inject IJSRuntime jsRuntime
+@implements IDisposable
+
+<div id="mobile-menu" class="hidden">
+	<a href="/">Home</a>
+	<a href="/TagDefinitions">Tags</a>
+	<a href="/Gallery?ingest=true">Ingest</a>
+	<a href="/Upload">Upload</a>
+	<div id="nsfw-switch">
+		<p id="nsfw-label">NSFW</p>
+		<NsfwSwitch/>
+	</div>
+   	<a href="javascript:logout();">Logout</a>
+</div>
+
+@code {
+	protected override void OnInitialized() =>
+		navigationManager.LocationChanged += LocationChanged;
+
+	public async void LocationChanged(object? sender, LocationChangedEventArgs e) =>
+		await jsRuntime.InvokeVoidAsync("hideMobileMenu");
+
+	public void Dispose() =>
+		navigationManager.LocationChanged -= LocationChanged;
+}
diff --git a/Server.Client/Pages/Component/MobileMenu.razor.css b/Server.Client/Pages/Component/MobileMenu.razor.css
new file mode 100644
index 0000000..0237cf1
--- /dev/null
+++ b/Server.Client/Pages/Component/MobileMenu.razor.css
@@ -0,0 +1,46 @@
+div#mobile-menu {
+    background:     var(--col-bg);
+    display:        none;
+    flex-direction: column;
+    flex:           1 1 calc(100vh - 59px);
+    height:         100%;
+    overflow-y:     auto;
+    position:       relative;
+    width:          100%;
+}
+
+body.mobile-menu-visible div#mobile-menu {
+    display: flex;
+}
+
+div#mobile-menu > a {
+    color:   #fff;
+    padding: 20px;
+}
+
+div#mobile-menu > a:not(:last-of-type) {
+    border-bottom: 1px solid var(--col-hr);
+}
+
+div#mobile-menu > a:hover {
+    background: var(--col-dialog-bg);
+    filter:     none;
+}
+
+div#mobile-menu > a:active {
+    background: #fff;
+    color:      var(--col-bg);
+    filter:     none;
+}
+
+div#nsfw-switch {
+    align-items:    center;
+    border-bottom:  1px solid var(--col-hr);
+    display:        flex;
+    flex-direction: row;
+    padding:        5px 20px 5px 20px;
+}
+
+div#nsfw-switch > p#nsfw-label {
+    margin-right: auto;
+}
diff --git a/Server.Client/Pages/Component/NsfwSwitch.razor b/Server.Client/Pages/Component/NsfwSwitch.razor
new file mode 100644
index 0000000..f4f9c1f
--- /dev/null
+++ b/Server.Client/Pages/Component/NsfwSwitch.razor
@@ -0,0 +1,6 @@
+<Switch InitialValue=false OnToggle=ToggleNsfw/>
+
+@code {
+    private void ToggleNsfw(bool showNsfw) => _ = 0;
+        // userService.UserSessionState.ShowNsfw = showNsfw;
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Component/ProgressBar.razor b/Server.Client/Pages/Component/ProgressBar.razor
new file mode 100644
index 0000000..aa22194
--- /dev/null
+++ b/Server.Client/Pages/Component/ProgressBar.razor
@@ -0,0 +1,17 @@
+<div id="outer">
+	<div id="inner" style="width:@(Progress * 100)%">
+	</div>
+</div>
+
+@code {
+	private float progress = 0;
+
+	[Parameter]
+	public float Progress {
+		get => progress;
+		set {
+			progress = value;
+			InvokeAsync(() => StateHasChanged());
+		}
+	}
+}
diff --git a/Server.Client/Pages/Component/ProgressBar.razor.css b/Server.Client/Pages/Component/ProgressBar.razor.css
new file mode 100644
index 0000000..f49c982
--- /dev/null
+++ b/Server.Client/Pages/Component/ProgressBar.razor.css
@@ -0,0 +1,17 @@
+div#outer {
+    background:    var(--col-progbar-bg);
+    border-radius: 15px;
+    height:        15px;
+    margin:        0;
+    padding:       0;
+    width:         100%;
+}
+
+div#inner {
+    background:       var(--col-progbar-fg);
+    border-radius:    15px;
+    height:           100%;
+    margin:           0;
+    padding:          0;
+    transition:       width 0.5s ease;
+}
diff --git a/Server.Client/Pages/Component/RedirectLogin.razor b/Server.Client/Pages/Component/RedirectLogin.razor
new file mode 100644
index 0000000..290a7ac
--- /dev/null
+++ b/Server.Client/Pages/Component/RedirectLogin.razor
@@ -0,0 +1,6 @@
+@inject NavigationManager navigationManager
+
+@code {
+    protected override void OnInitialized() =>
+        navigationManager.NavigateTo("/Login", true);
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Component/Switch.razor b/Server.Client/Pages/Component/Switch.razor
new file mode 100644
index 0000000..5264094
--- /dev/null
+++ b/Server.Client/Pages/Component/Switch.razor
@@ -0,0 +1,18 @@
+<label>
+  <input
+      type="checkbox"
+      checked=@InitialValue
+      @onchange=@(e => OnToggle.InvokeAsync((e.Value as bool?) ?? false))
+      hidden/>
+  <div class="switch-outer">
+    <div class="switch-inner"/>
+  </div>
+</label>
+
+@code {
+    [Parameter]
+    public bool InitialValue { get; set; } = false;
+
+    [Parameter]
+    public EventCallback<bool> OnToggle { get; set; }
+}
diff --git a/Server.Client/Pages/Component/Switch.razor.css b/Server.Client/Pages/Component/Switch.razor.css
new file mode 100644
index 0000000..6b1f5d5
--- /dev/null
+++ b/Server.Client/Pages/Component/Switch.razor.css
@@ -0,0 +1,25 @@
+div.switch-outer {
+    background:    var(--col-switch-bg);
+    border-radius: 20px;
+    border:        1px solid var(--col-switch-fg);
+    cursor:        pointer;
+    height:        20px;
+    transition:    background 0.1s linear;
+    width:         40px;
+}
+
+div.switch-inner {
+    background:    var(--col-switch-fg);
+    border-radius: 20px;
+    height:        20px;
+    transition:    margin-left 0.1s linear;
+    width:         20px;
+}
+
+input:checked + div.switch-outer {
+    background: var(--col-switch-bg-hl);
+}
+
+input:checked + div.switch-outer > div.switch-inner {
+    margin-left: 20px;
+}
diff --git a/Server.Client/Pages/Component/TabContainer.razor b/Server.Client/Pages/Component/TabContainer.razor
new file mode 100644
index 0000000..3caab0b
--- /dev/null
+++ b/Server.Client/Pages/Component/TabContainer.razor
@@ -0,0 +1,35 @@
+<link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
+
+<div class="tabs">
+    @foreach(var pane in Panes) {
+        <a href="javascript:;" @onclick=@(() => ActivePane = pane) class="@(pane == ActivePane ? "selected" : "")">
+            @pane.Title
+        </a>
+    }
+</div>
+
+<CascadingValue Value="this">
+    @ChildContent
+</CascadingValue>
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    public TabPane? ActivePane { get; set; }
+    List<TabPane> Panes = new();
+
+    public void AddPane(TabPane tabPane) {
+        Panes.Add(tabPane);
+        if(Panes.Count == 1)
+            ActivePane = tabPane;
+        StateHasChanged();
+    }
+
+    public void RemovePane(TabPane tabPane) {
+        if(ActivePane == tabPane)
+            ActivePane = Panes.ElementAtOrDefault(0);
+        Panes.Remove(tabPane);
+        StateHasChanged();
+    }
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Component/TabContainer.razor.css b/Server.Client/Pages/Component/TabContainer.razor.css
new file mode 100644
index 0000000..bfb5694
--- /dev/null
+++ b/Server.Client/Pages/Component/TabContainer.razor.css
@@ -0,0 +1,27 @@
+div.tabs {
+    display:       inherit !important;
+    border-bottom: 1px solid white;
+}
+
+div.tabs > a {
+    display: inline-block;
+    padding: 10px 10px 9px 10px;
+}
+
+div.tabs > a.selected {
+    border-bottom:  4px solid white;
+    padding-bottom: 5px;
+}
+
+@media (hover: hover) {
+    div.tabs > a:hover {
+        background: rgba(255, 255, 255, 0.4);
+        filter:     none;
+    }
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div.tabs > a {
+        font-size: 8pt;
+    }
+}
diff --git a/Server.Client/Pages/Component/TabPane.razor b/Server.Client/Pages/Component/TabPane.razor
new file mode 100644
index 0000000..ba4a13a
--- /dev/null
+++ b/Server.Client/Pages/Component/TabPane.razor
@@ -0,0 +1,29 @@
+@implements IDisposable
+
+<link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
+
+@if(Parent.ActivePane == this) {
+    @ChildContent
+}
+
+@code {
+    [CascadingParameter]
+    private TabContainer Parent { get; set; }
+
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    protected override void OnInitialized() {
+        if (Parent is null)
+            throw new ArgumentNullException(nameof(Parent), "TabPane must exist within a TabContainer");
+
+        Parent.AddPane(this);
+    }
+
+    public void Dispose() {
+        Parent.RemovePane(this);
+    }
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Component/TabPane.razor.css b/Server.Client/Pages/Component/TabPane.razor.css
new file mode 100644
index 0000000..5f28270
--- /dev/null
+++ b/Server.Client/Pages/Component/TabPane.razor.css
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/Server.Client/Pages/Component/TagEditDialog.razor b/Server.Client/Pages/Component/TagEditDialog.razor
new file mode 100644
index 0000000..6192d55
--- /dev/null
+++ b/Server.Client/Pages/Component/TagEditDialog.razor
@@ -0,0 +1,96 @@
+@* @inject IDbContextFactory<HBContext> dbFactory;
+@inject ITagService tagService*@
+@implements IDialog
+
+<Dialog Title=@Title @ref=dialog>
+    <label>
+        Name
+        @if(nameExists) {
+            <p class="error">Tag with that name already exists!</p>
+        }
+    </label>
+    <input type="text" @bind=tagName required/>
+    <label>Namespace</label>
+    <input type="text" @bind=tagNamespace/>
+    <label>
+        Alias
+        @if(aliasExists) {
+            <p class="error">Tag with that alias already exists!</p>
+        }
+    </label>
+    <input type="text" @bind=tagAlias/>
+    <ButtonContainer>
+        <button @onclick=Hide class="secondary">Cancel</button>
+        <button @onclick=Submit>@(TagDefinition is null ? "Create" : "Apply")</button>
+    </ButtonContainer>
+</Dialog>
+
+@code {
+    [Parameter]
+    public TagDefinition? TagDefinition { get; set; }
+
+    [Parameter]
+    public EventHandler OnTagUpdate { get; set; }
+
+    public bool Visible {
+        get => visible;
+        set {
+            if(value)
+                Load();
+            visible = dialog.Visible = value;
+        }
+    }
+
+    private string Title =>
+        TagDefinition is null ? "Create a new tag definition" : "Edit tag definition";
+
+    private Dialog dialog;
+
+    private string? tagName;
+    private string? tagNamespace;
+    private string? tagAlias;
+
+    private bool nameExists  = false;
+    private bool aliasExists = false;
+
+    private bool visible = false;
+
+    public void Show() => Visible = true;
+    public void Hide() => Visible = false;
+
+    public void Show(TagDefinition? toEdit) {
+        TagDefinition = toEdit;
+        Visible       = true;
+    }
+
+    public void Show(string? @namespace) {
+        TagDefinition = null;
+        Visible       = true;
+        tagNamespace  = @namespace;
+    }
+
+    private void Load() {
+        tagName      = TagDefinition?.Name;
+        tagNamespace = TagDefinition?.Namespace;
+        tagAlias     = TagDefinition?.Alias;
+        nameExists   = false;
+        aliasExists  = false;
+    }
+
+    private void Submit() {
+        try {
+            if(TagDefinition is null) {
+                // tagService.CreateTagDefinition(tagName, tagNamespace, tagAlias);
+            } else {
+                // tagService.UpdateTagDefinition(TagDefinition, tagName, tagNamespace, tagAlias);
+            }
+        } catch(ApiModels.TagDuplicateException e) {
+            nameExists  = e.NameExists;
+            aliasExists = e.AliasExists;
+            return;
+        }
+
+        OnTagUpdate.Invoke(this, new EventArgs());
+        Hide();
+    }
+}
diff --git a/Server.Client/Pages/Component/TagEditDialog.razor.css b/Server.Client/Pages/Component/TagEditDialog.razor.css
new file mode 100644
index 0000000..02781c0
--- /dev/null
+++ b/Server.Client/Pages/Component/TagEditDialog.razor.css
@@ -0,0 +1,11 @@
+p.error {
+    color:          var(--col-error-pri);
+    display:        inline;
+    font-size:      8pt;
+    margin-left:    5px;
+    vertical-align: middle;
+}
+
+input {
+    width: 100%;
+}
diff --git a/Server.Client/Pages/Component/TagSelectDialog.razor b/Server.Client/Pages/Component/TagSelectDialog.razor
new file mode 100644
index 0000000..c2fddc2
--- /dev/null
+++ b/Server.Client/Pages/Component/TagSelectDialog.razor
@@ -0,0 +1,193 @@
+@* @inject IDbContextFactory<HBContext> dbFactory
+@inject ITagService tagService
+@inject IUserService userService*@
+@implements IDisposable
+@implements IDialog
+
+<link rel="stylesheet" href="@(nameof(HyperBooru)).styles.css"/>
+
+<Dialog Title=@(Title ?? "Select one or more tag(s)") @ref=dialog>
+    <input
+        type="text"
+        placeholder="Search"
+        autocorrect="off"
+        autocapitalize="off"
+        autocomplete="off"
+        @ref=queryInput
+        @oninput=QueryInput
+        @onkeypress=QueryKey
+        value=@query/>
+    <div class="tag-definitions">
+        @for(int i = 0; i < tagDefinitions.Count(); i++) {
+            if(!MatchesQuery(tagDefinitions[i].tagDefinition))
+                continue;
+            var local = i;
+            var ns    = tagDefinitions[i].tagDefinition.Namespace;
+            var alias = tagDefinitions[i].tagDefinition.Alias;
+            var title = string.Join(" ", new[] {
+                ns,
+                alias is not null ? $"({alias})" : null
+            });
+@*             <input
+                type="checkbox"
+                id="tagDef-@tagDefinitions[i].tagDefinition.Guid"
+                @bind=tagDefinitions[local].selected />
+            <label
+                for="tagDef-@tagDefinitions[i].tagDefinition.Guid"
+                title=@title>
+                @tagDefinitions[i].tagDefinition.Name
+            </label>
+ *@        }
+    </div>
+    <ButtonContainer>
+        <button @onclick=@(() => dialog.Hide()) class="secondary">Cancel</button>
+        <button @onclick=@(() => Submit())>Accept</button>
+    </ButtonContainer>
+</Dialog>
+
+@code {
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public EventCallback<TagDefinition[]> OnSubmit { get; set; }
+
+    public TagDefinition[] SelectedTags { get; set; } =
+    Array.Empty<TagDefinition>();
+
+    public bool Visible {
+        get => visible;
+        set {
+            if(value)
+                LoadTags();
+            query   = null;
+            visible = dialog.Visible = value;
+        }
+    }
+
+    private (TagDefinition tagDefinition, bool selected)[] tagDefinitions;
+
+    // private HBContext db;
+
+    private Dialog dialog;
+
+    private bool visible;
+
+    private string?          query;
+    private ElementReference queryInput;
+
+    public void Show() => Visible = true;
+    public void Hide() => Visible = false;
+
+    protected override void OnInitialized() {
+        // userService.UserSessionState.OnStateChange += ShowNsfwChanged;
+        LoadTags();
+    }
+
+    private void LoadTags() {
+        // db = dbFactory.CreateDbContext();
+
+        // var selected = SelectedTags.Select(td => td.Guid);
+
+        // int[] nsfwTags = Array.Empty<int>();
+        // if(!userService.UserSessionState.ShowNsfw)
+        //     nsfwTags = tagService.TagsThatImply(HBContext.NsfwTag)
+        //         .Select(td => td.ObjectId)
+        //         .ToArray();
+
+        // tagDefinitions = db.TagDefinitions
+        //     .Include(td => td.ImplicitTags)
+        //     .Where(td => td.Source == TagSource.UserTag)
+        //     .OrderBy(td => td.Name)
+        //     .AsEnumerable()
+        //     .Where(td => userService.UserSessionState.ShowNsfw || !td.ImplicitTags
+        //         .IntersectBy(nsfwTags, td => td.ObjectId)
+        //         .Any())
+        //     .Select(td => new Tuple<TagDefinition, bool>(
+        //         td,
+        //         selected.Contains(td.Guid)).ToValueTuple())
+        //     .ToArray();
+    }
+
+    private void QueryInput(ChangeEventArgs e) {
+        query = (string?) e.Value;
+        StateHasChanged();
+    }
+
+    private void QueryKey(KeyboardEventArgs e) {
+        if(e.Code != "Enter" && e.Code != "NumpadEnter")
+            return;
+
+        if(string.IsNullOrEmpty(query)) {
+            Submit();
+            return;
+        }
+
+        int c = 0;
+        int? last = null;
+        for(int i = 0; i < tagDefinitions.Count(); i++) {
+            if(!MatchesQuery(tagDefinitions[i].tagDefinition))
+                continue;
+            last = i;
+            c++;
+        }
+
+        if(c == 1 && last is not null)
+            tagDefinitions[(int) last].selected =
+                !tagDefinitions[(int) last].selected;
+
+        query = null;
+        StateHasChanged();
+    }
+
+    private bool MatchesQuery(TagDefinition tagDef) {
+        // TagDefinition? singleTag = null;
+
+        // if(string.IsNullOrEmpty(query))
+        //     return true;
+
+        // singleTag = tagDefinitions.FirstOrDefault(
+        //     e => string.Equals(
+        //         e.tagDefinition.Alias,
+        //         query,
+        //         StringComparison.OrdinalIgnoreCase)).tagDefinition;
+
+        // if(singleTag is not null)
+        //     return tagDef.Guid == singleTag.Guid;
+
+        // singleTag = tagDefinitions.FirstOrDefault(
+        //     e => string.Equals(
+        //         e.tagDefinition.Name,
+        //         query,
+        //         StringComparison.OrdinalIgnoreCase)).tagDefinition;
+
+        // if(singleTag is not null)
+        //     return tagDef.Guid == singleTag.Guid;
+
+        // return tagDef.Name.ToLower().Contains(query.ToLower());
+        return false;
+    }
+
+    private async void Submit() {
+        await OnSubmit.InvokeAsync(
+            tagDefinitions
+                .Where(e => e.selected)
+                .Select(e => e.tagDefinition)
+                .ToArray());
+        for(int i = 0; i < tagDefinitions.Count(); i++)
+            tagDefinitions[i].selected = false;
+        Hide();
+        StateHasChanged();
+    }
+
+    // public async void ShowNsfwChanged(UserSessionState userSessionState) =>
+    //     await InvokeAsync(() => {
+    //         LoadTags();
+    //         StateHasChanged();
+    //     });
+
+    public void Dispose() {
+        // db.Dispose();
+        // userService.UserSessionState.OnStateChange -= ShowNsfwChanged;
+    }
+}
diff --git a/Server.Client/Pages/Component/TagSelectDialog.razor.css b/Server.Client/Pages/Component/TagSelectDialog.razor.css
new file mode 100644
index 0000000..dadd0c4
--- /dev/null
+++ b/Server.Client/Pages/Component/TagSelectDialog.razor.css
@@ -0,0 +1,29 @@
+div.tag-definitions {
+    max-height:  450px;
+    overflow-y:  auto;
+    user-select: none;
+}
+
+div.tag-definitions label {
+    background:    #555;
+    border-radius: 10px;
+    display:       inline-block;
+    font-size:     10pt;
+    margin:        0 5px 5px 0;
+    padding:       5px 7px 5px 7px;
+    transition:    background 0.1s linear;
+}
+
+@media(hover: hover) {
+    div.tag-definitions label:hover {
+        background: #777;
+    }
+}
+
+div.tag-definitions input:checked + label {
+    background: #aaa;
+}
+
+div.tag-definitions input {
+    display: none;
+}
diff --git a/Server.Client/Pages/Component/Titlebar.razor b/Server.Client/Pages/Component/Titlebar.razor
new file mode 100644
index 0000000..521fb46
--- /dev/null
+++ b/Server.Client/Pages/Component/Titlebar.razor
@@ -0,0 +1,98 @@
+@inject IJSRuntime jsRuntime
+@inject NavigationManager nav
+@inject HBSession session;
+@* @inject IUserService userService *@
+
+<script suppress-error="BL9992">
+    async function login() {
+        var username = document.querySelector('input#username');
+        var password = document.querySelector('input#password');
+
+        var formData = new FormData();
+        formData.append('username', username.value);
+        formData.append('password', password.value);
+
+        var resp = await fetch('/Login', {
+            method: 'POST',
+            body: formData
+        });
+
+        if(resp.ok) {
+            window.location.href = '/';
+        } else if(resp.status == 403) {
+            var form = document.querySelector('form.login');
+            form.classList.remove('bad-login');
+            @* TODO: improve this hacky method of triggering reflow *@
+            form.offsetWidth;
+            form.classList.add('bad-login');
+            username.value = password.value = null;
+            username.focus();
+        } else {
+            alert('Unknown error while attempting to login!');
+        }
+    }
+
+    async function logout() {
+        var resp = await fetch('/Logout', { method: 'POST' });
+        if(resp.ok) {
+            window.location.href = '/Login';
+        } else {
+            alert('Error logging out!');
+        }
+    }
+</script>
+
+@if(!IsLoginPage) {
+	<div id="navbar">
+		<p class="mobile">HyperBooru</p>
+		<a class="mobile menu-button" href="javascript:toggleMobileMenu();">&#x2630</a>
+
+		<a class="desktop" href="/">Home</a>
+		<a class="desktop" href="/TagDefinitions">Tags</a>
+		<a class="desktop" href="/Gallery?ingest=true">Ingest</a>
+		<a class="desktop" href="/Upload">Upload</a>
+		@* <a class="desktop" href="javascript:;" @onclick=@(() => aboutDialog.Show())>About</a> *@
+		<a class="desktop" href="javascript:;">About</a>
+
+		<p class="desktop" id="nsfw-label">NSFW</p>
+		<div id="nsfw-switch" class="desktop">
+			<NsfwSwitch/>
+		</div>
+		<form action="/Gallery" method="get" class="desktop">
+			<input type="text" name="q" placeholder="Search"/>
+		</form>
+		<a class="desktop" href="javascript:logout();">Logout</a>
+	</div>
+	@* <AboutDialog @ref=aboutDialog/> *@
+} else {
+	<div id="navbar">
+		<h2>Login</h2>
+		<form class="login" action="javascript:login();">
+			<input
+				id="username"
+				placeholder="Username"
+				type="text"
+				autocorrect="off"
+				autocapitalize="off"
+				autocomplete="off"
+				autofocus
+                @bind=Username/>
+			<input id="password" placeholder="Password" type="password" @bind=Password/>
+		</form>
+		<a @onclick=Login>Login</a>
+	</div>
+}
+
+@code {
+    // private AboutDialog aboutDialog;
+
+    public string Username { get; set; } = "";
+    public string Password { get; set; } = "";
+
+    private bool IsLoginPage =>
+        new Uri(nav.Uri).AbsolutePath.Equals("/Login", StringComparison.OrdinalIgnoreCase);
+
+    private async void Login() {
+        await session.LoginAsync(Username, Password);
+    }
+}
diff --git a/Server.Client/Pages/Component/Titlebar.razor.css b/Server.Client/Pages/Component/Titlebar.razor.css
new file mode 100644
index 0000000..58a1c0c
--- /dev/null
+++ b/Server.Client/Pages/Component/Titlebar.razor.css
@@ -0,0 +1,99 @@
+div#navbar {
+    align-items:   center;
+    background:    var(--col-navbar-bg);
+    box-shadow:    rgba(0, 0, 0, 0.5) 0px 10px 10px;
+    display:       flex;
+    height:        59px;
+    z-index:       100;
+}
+
+div#navbar > h2 {
+    margin-left: 20px;
+}
+
+div#navbar > a, div#navbar > p {
+    align-items: center;
+    color:       white;
+    display:     flex;
+    height:      100%;
+    padding:     0 20px 0 20px;
+    user-select: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    div#navbar > a:hover {
+        background: rgba(255, 255, 255, 0.4);
+        filter:     none;
+    }
+}
+
+div#navbar > a:active {
+    background: #fff;
+    color:      var(--col-navbar-bg);
+}
+
+div#navbar > a.menu-button {
+    font-size:   18pt;
+    margin-left: auto;
+}
+
+p#nsfw-label {
+    align-self:  center;
+    font-size:   9pt;
+    margin-left: auto;
+}
+
+div#nsfw-switch {
+    align-self:  center;
+    margin-left: 10px;
+}
+
+form {
+    display:   flex;
+    margin:    0 20px 0 20px;
+    min-width: 30%;
+}
+
+form.login {
+    margin-left: auto;
+}
+
+form.login.bad-login {
+    animation-iteration-count: 3;
+    animation-timing-function: linear;
+    animation:                 bad-login 0.2s;
+}
+
+@keyframes bad-login {
+      0% { transform: translateX(0);     }
+     33% { transform: translateX(-20px); }
+     66% { transform: translateX(+20px); }
+    100% { transform: translateX(0);     }
+}
+
+input[type="text"], input[type="password"] {
+    align-self:    center;
+    background:    var(--col-bg);
+    border-radius: 0;
+    color:         white;
+    font-size:     12pt;
+    height:        40px !important;
+    margin:        0;
+    width:         100%;
+}
+
+input[type="password"] {
+    margin-left: 20px;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    .desktop {
+        display: none !important;
+    }
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .mobile {
+        display: none !important;
+    }
+}
diff --git a/Server.Client/Pages/Gallery.razor b/Server.Client/Pages/Gallery.razor
new file mode 100644
index 0000000..b3391d1
--- /dev/null
+++ b/Server.Client/Pages/Gallery.razor
@@ -0,0 +1,151 @@
+@page "/"
+@page "/Gallery"
+@inject IJSRuntime jsRuntime
+@inject HBSession hb
+@* @implements IDisposable
+@attribute [Authorize]*@
+
+<PageTitle>@Title</PageTitle>
+
+@if(Ingest && !hb.HasNsfwClaim) {
+    <div id="feed-error">
+        <p><center>Ingest feed is not available unless NSFW mode is enabled!</center></p>
+        <p><center><i>You must enable NSFW mode to continue...</i></center></p>
+    </div>
+} else if(TagId is not null && Query is not null) {
+    <div id="feed-error">
+        <p><center>Invalid query parameters! Both a search query and</center></p>
+        <p><center>a tag ID have been specified!</center></p>
+    </div>
+} else {
+	<div style="padding:var(--size-default-gap);">
+		@foreach(var mediaId in displayMedia) {
+			// Precalculate thumbnail size to help the browser
+			// lay out the images during initial page load
+			@* int width = (int) media.CurrentUploadedFile!.Width! * 200 / (int) media.CurrentUploadedFile.Height!; *@
+			<a href="/ViewMedia?m=@mediaId">
+				<img src="/media/thumb/@mediaId?h=200" height="200"/>
+			</a>
+		}
+		<div id="canary" style="height:1px;"></div>
+	</div>
+}
+
+<script suppress-error="BL9992">
+    function registerScrollObserver(dotNetObject) {
+        var scrollObserver = new IntersectionObserver(
+            async (e) => {
+                if(e[0].isIntersecting) {
+                    await dotNetObject.invokeMethodAsync('LoadMedia', false);
+                }
+            },
+            {
+                root: document.getElementById('content'),
+                threshold: 0
+            });
+        scrollObserver.observe(document.getElementById("canary"));
+    }
+</script>
+
+@code {
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "t")]
+    public Guid? TagId { get; set; }
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "q")]
+    public string? Query { get; set; }
+
+    [Parameter]
+    [SupplyParameterFromQuery(Name = "s")]
+    public string? SortOrder { get; set; }
+
+    [Parameter]
+    [SupplyParameterFromQuery]
+    public bool Ingest { get; set; } = false;
+
+    public const int PageSize = 50;
+
+    private string Title {
+        get {
+            if(Query is null)
+                return Ingest ? "Ingest Feed" : "Gallery";
+            else
+                return "Search Results";
+        }
+    }
+
+    private List<Guid> displayMedia = new();
+
+    // protected override void OnInitialized() =>
+    //     userService.UserSessionState.OnStateChange += ShowNsfwChanged;
+
+    protected override void OnInitialized() =>
+        Console.WriteLine("PENUS");
+
+    protected override void OnParametersSet() => LoadMedia(true);
+
+    protected override void OnAfterRender(bool firstRender) {
+        if(firstRender)
+            jsRuntime.InvokeVoidAsync(
+                "registerScrollObserver",
+                DotNetObjectReference.Create(this));
+    }
+
+    [JSInvokable("LoadMedia")]
+    public void LoadMedia(bool initial = false) {
+        Guid? key =
+			displayMedia?.Any() ?? false && !initial ? displayMedia.Last() : null;
+
+        if(initial)
+            displayMedia = new();
+
+        ApiModels.SortOrder? sortOrder = null;
+        if(Enum.TryParse<ApiModels.SortOrder>(SortOrder, true, out var so))
+            sortOrder = so;
+
+        FeedRequest feedRequest = new FeedRequest() {
+			SelectIngest      = Ingest,
+			IncludeNsfw       = hb.HasNsfwClaim,
+			ContinuationToken = key,
+			Count             = PageSize,
+			SortOrder         = sortOrder ?? default
+        };
+
+        if(TagId is not null && Query is null) {
+            feedRequest = new FeedTagRequest() {
+				SelectIngest      = Ingest,
+				IncludeNsfw       = hb.HasNsfwClaim,
+				TagId             = (Guid) TagId!,
+				ContinuationToken = key,
+				Count             = PageSize,
+				SortOrder         = sortOrder ?? default
+			};
+        } else if(Query is not null && TagId is null) {
+            feedRequest = new FeedSearchRequest() {
+				SelectIngest      = Ingest,
+				IncludeNsfw       = hb.HasNsfwClaim,
+				Query             = string.IsNullOrWhiteSpace(Query) ? null : Query,
+				ContinuationToken = key,
+				Count             = PageSize,
+				SortOrder         = sortOrder ?? default
+            };
+        }
+
+		hb.Feed
+			.LoadChunkAsync(feedRequest)
+			.ContinueWith(async m => {
+				displayMedia!.AddRange(await m);
+				await InvokeAsync(() => StateHasChanged());
+			});
+    }
+
+    // private async void ShowNsfwChanged(UserSessionState userSessionState) {
+    //     await InvokeAsync(() => {
+    //         LoadMedia(true);
+    //     });
+    // }
+
+  //   public void Dispose() =>
+		// userService.UserSessionState.OnStateChange -= ShowNsfwChanged;
+}
diff --git a/Server.Client/Pages/Gallery.razor.css b/Server.Client/Pages/Gallery.razor.css
new file mode 100644
index 0000000..6226d9b
--- /dev/null
+++ b/Server.Client/Pages/Gallery.razor.css
@@ -0,0 +1,15 @@
+img {
+    height:       auto;
+    margin-right: 5px;
+    max-height:   200px;
+    max-width:    100%;
+    width:        auto;
+}
+
+div#feed-error {
+    left:      50%;
+    padding:   10px;
+    position:  relative;
+    top:       50%;
+    transform: translate(-50%, -50%);
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Login.razor b/Server.Client/Pages/Login.razor
new file mode 100644
index 0000000..bdc6069
--- /dev/null
+++ b/Server.Client/Pages/Login.razor
@@ -0,0 +1,17 @@
+@page "/Login"
+@* @inject NavigationManager navigationManager *@
+
+<PageTitle>HyperBooru Login</PageTitle>
+
+<div/>
+
+@code {
+    // [CascadingParameter]
+    // public Task<AuthenticationState> AuthenticationState{ get; set; }
+
+    protected override void OnInitialized() {
+        // var authState = AuthenticationState.GetAwaiter().GetResult();
+        // if(authState!.User.Identity?.IsAuthenticated ?? false)
+        //     navigationManager.NavigateTo("/");
+    }
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Login.razor.css b/Server.Client/Pages/Login.razor.css
new file mode 100644
index 0000000..fc8c8ca
--- /dev/null
+++ b/Server.Client/Pages/Login.razor.css
@@ -0,0 +1,6 @@
+div {
+    background: url('/images/loginbg.webp');
+    filter:     brightness(0.6);
+    height:     100%;
+    width:      100%;
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/NotFound.razor b/Server.Client/Pages/NotFound.razor
new file mode 100644
index 0000000..917ada1
--- /dev/null
+++ b/Server.Client/Pages/NotFound.razor
@@ -0,0 +1,5 @@
+@page "/not-found"
+@layout MainLayout
+
+<h3>Not Found</h3>
+<p>Sorry, the content you are looking for does not exist.</p>
\ No newline at end of file
diff --git a/Server.Client/Pages/TagDefinitions.razor b/Server.Client/Pages/TagDefinitions.razor
new file mode 100644
index 0000000..032386e
--- /dev/null
+++ b/Server.Client/Pages/TagDefinitions.razor
@@ -0,0 +1,187 @@
+@page "/TagDefinitions"
+@* @inject IDbContextFactory<HBContext> dbFactory
+@inject ITagService tagService
+@inject IUserService userService
+@implements IDisposable*@
+
+<PageTitle>Tag Definitions</PageTitle>
+
+<div style="padding:var(--size-default-gap);">
+    <ButtonContainer>
+        <button @onclick=PromptTagCreate data-keyboard-shortcut="c"><u>C</u>reate</button>
+    </ButtonContainer>
+
+    <TabContainer @ref=tabContainer>
+        @foreach(var ns in tagNamespaces) {
+            <TabPane Title="@(ns ?? "Default")">
+                <table id="tag-definitions" class="data-table">
+                    <tr>
+                        <th>Alias</th>
+                        <th>Name</th>
+                        <th>Implicit Tags</th>
+                        <th></th>
+                    </tr>
+                    @foreach(var tagDef in tagDefinitions.Where(td => td.Namespace == ns)) {
+                        @* <tr data-guid="@tagDef.Guid"> *@
+                        <tr>
+                            <td>@tagDef.Alias</td>
+                            <td>
+@*                                 <a href="/Gallery?t=@tagDef.Guid" class="nondecorated">
+                                    @tagDef.Name
+                                </a>
+ *@                            </td>
+                            <td>
+                                <i>
+                                    @{
+                                        // var implicitTags = tagDef.ImplicitTags
+                                        //     .Where(td => td.Source == TagSource.UserTag);
+                                        // foreach(var tag in implicitTags) {
+                                        //     <a href="/Gallery?q=@tag.Name" class="nondecorated">
+                                        //         @tag.Name
+                                        //     </a>
+                                        //     if(tag != implicitTags.Last())
+                                        //         @(", ")
+                                        // }
+                                    }
+                            </i>
+                            </td>
+                            <td class="actions">
+                                <a href="javascript:;" @onclick=@(() => tagEditDialog.Show(tagDef))>Edit</a>
+                                <a href="javascript:;" @onclick=@(() => PromptToDelete(tagDef))>
+                                    Delete
+                                </a>
+                                <a href="javascript:;" @onclick=@(() => PromptImplicitTags(tagDef))>
+                                    Implicit Tags
+                                </a>
+@*                                 @if(tagDef.ImplicitTags.Select(td => td.Guid).Contains(HBContext.NsfwTag)) {
+                                    <a href="javascript:;" @onclick=@(() => SetNsfw(tagDef, false))>Make SFW</a>
+                                } else {
+                                    <a href="javascript:;" @onclick=@(() => SetNsfw(tagDef, true))>Make NSFW</a>
+                                }
+ *@                            </td>
+                        </tr>
+                    }
+                </table>
+            </TabPane>
+        }
+    </TabContainer>
+</div>
+
+<Dialog Title="Are you sure you want to delete this tag definition?" @ref=deleteTagDialog>
+    <ButtonContainer>
+        <button @onclick=@(() => deleteTagDialog.Hide()) class="secondary">Cancel</button>
+        <button @onclick=@(() => DeleteTagDefinition()) class="warning">Confirm</button>
+    </ButtonContainer>
+</Dialog>
+
+<TagEditDialog OnTagUpdate=TagUpdated @ref=tagEditDialog/>
+
+<TagSelectDialog
+    OnSubmit=SetImplicitTags
+    @ref=implicitTagDialog />
+ 
+@code {
+    private TabContainer    tabContainer;
+    private Dialog          deleteTagDialog;
+    private TagEditDialog   tagEditDialog;
+    private TagSelectDialog implicitTagDialog;
+
+    private TagDefinition? toDelete;
+    private TagDefinition? toEditImplicit;
+
+    private TagDefinition[] tagDefinitions;
+
+    private string?[] tagNamespaces;
+
+    // protected override void OnInitialized() =>
+    //     userService.UserSessionState.OnStateChange += ShowNsfwChanged;
+
+    protected override void OnParametersSet() =>
+        LoadTags();
+
+    private void LoadTags() {
+        // int[] nsfwTags = Array.Empty<int>();
+        // if(!userService.UserSessionState.ShowNsfw)
+        //     nsfwTags = tagService.TagsThatImply(HBContext.NsfwTag)
+        //         .Select(td => td.ObjectId)
+        //         .ToArray();
+
+        // tagDefinitions = dbFactory.CreateDbContext().TagDefinitions
+        //         .Include(td => td.ImplicitTags)
+        //         .Where(td => td.Source == TagSource.UserTag)
+        //         .OrderBy(td => td.Namespace)
+        //         .ThenBy(td => td.Name)
+        //         .AsEnumerable()
+        //         .Where(td => userService.UserSessionState.ShowNsfw || !td.ImplicitTags
+        //             .IntersectBy(nsfwTags, td => td.ObjectId)
+        //             .Any())
+        //         .ToArray();
+
+        // tagNamespaces = tagDefinitions
+        //     .Select(td => td.Namespace)
+        //     .Order()
+        //     .Distinct()
+        //     .ToArray();
+    }
+
+    private void PromptToDelete(TagDefinition toDelete) {
+        this.toDelete = toDelete;
+        deleteTagDialog.Show();
+    }
+
+    private void DeleteTagDefinition() {
+        // if(toDelete is null)
+        //     return;
+
+        // tagService.DeleteTagDefinition(toDelete);
+        // deleteTagDialog.Hide();
+        // LoadTags();
+        // StateHasChanged();
+    }
+
+    private void PromptTagCreate() {
+        string? ns = tabContainer.ActivePane?.Title;
+        if(ns == "Default")
+            ns = null;
+        tagEditDialog.Show(ns);
+    }
+
+    private void TagUpdated(object? sender, EventArgs e) {
+        LoadTags();
+        StateHasChanged();
+    }
+
+    private void PromptImplicitTags(TagDefinition toEditImplicit) {
+        // this.toEditImplicit = toEditImplicit;
+        // implicitTagDialog.SelectedTags =
+        //     toEditImplicit.ImplicitTags.ToArray();
+        // implicitTagDialog.Show();
+    }
+
+    private void SetImplicitTags(TagDefinition[] tagDefs) {
+        if(toEditImplicit is null)
+            return;
+
+        // tagService.SetImplicitTags(toEditImplicit, tagDefs);
+        LoadTags();
+        StateHasChanged();
+    }
+
+    private void SetNsfw(TagDefinition tagDef, bool nsfw) {
+        // if(nsfw)
+        //     tagService.AddImplicitTag(tagDef.Guid, HBContext.NsfwTag);
+        // else
+        //     tagService.RemoveImplicitTag(tagDef.Guid, HBContext.NsfwTag);
+        // LoadTags();
+        // StateHasChanged();
+    }
+
+    // private async void ShowNsfwChanged(UserSessionState userSessionState) =>
+    //     await InvokeAsync(() => {
+    //         LoadTags();
+    //         StateHasChanged();
+    //     });
+
+    // public void Dispose() =>
+    //     userService.UserSessionState.OnStateChange -= ShowNsfwChanged;
+}
diff --git a/Server.Client/Pages/TagDefinitions.razor.css b/Server.Client/Pages/TagDefinitions.razor.css
new file mode 100644
index 0000000..409eacc
--- /dev/null
+++ b/Server.Client/Pages/TagDefinitions.razor.css
@@ -0,0 +1,5 @@
+@media (hover: none) and (pointer: coarse) {
+    td, th {
+        font-size: 6pt;
+    }
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/Upload.razor b/Server.Client/Pages/Upload.razor
new file mode 100644
index 0000000..74cfd64
--- /dev/null
+++ b/Server.Client/Pages/Upload.razor
@@ -0,0 +1,42 @@
+@page "/Upload"
+
+<div id="dropzone">
+    <p></p>
+    <form id="uploadForm" action="/media" method="post" enctype="multipart/form-data">
+        <input type="file" id="fileUpload" name="fileUpload" accept="image/*,video/*" multiple/>
+    </form>
+</div>
+
+<script suppress-error="BL9992">
+    var dropzone   = document.getElementById('dropzone');
+    var uploadForm = document.getElementById('uploadForm');
+    var fileUpload = document.getElementById('fileUpload');
+
+    dropzone.ondragover = function (e) {
+        e.preventDefault();
+    }
+
+    dropzone.ondragenter = function(e) {
+        e.preventDefault();
+        dropzone.classList.toggle('hover', true);
+    }
+
+    dropzone.ondragleave = function(e) {
+        e.preventDefault();
+        dropzone.classList.toggle('hover', false);
+    }
+
+    dropzone.ondrop = function(e) {
+        e.preventDefault();
+        fileUpload.files = e.dataTransfer.files;
+        uploadForm.submit();
+    }
+
+    dropzone.onclick = function(e) {
+        fileUpload.click();
+    }
+
+    fileUpload.onchange = function(e) {
+        uploadForm.submit();
+    }
+</script>
diff --git a/Server.Client/Pages/Upload.razor.css b/Server.Client/Pages/Upload.razor.css
new file mode 100644
index 0000000..d510bc6
--- /dev/null
+++ b/Server.Client/Pages/Upload.razor.css
@@ -0,0 +1,48 @@
+div#dropzone {
+    border-radius: 10px;
+    border:        3px dashed #aaa;
+    cursor:        pointer;
+    height:        400px;
+    left:          50%;
+    position:      relative;
+    top:           50%;
+    transform:     translate(-50%, -50%);
+    transition:    border-color 0.1s linear;
+    width:         min(700px, 85%);
+}
+
+div#dropzone p {
+    color:      #aaa;
+    display:    inline-block;
+    left:       50%;
+    margin:     0;
+    position:   relative;
+    text-align: center;
+    top:        50%;
+    transform:  translate(-50%, -50%);
+}
+
+div#dropzone p::before {
+    content:     "Drag a file to upload it\Aor click to select one or more file(s)";
+    white-space: pre;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#dropzone p::before {
+        content: "Tap to select a file to upload";
+    }
+}
+
+div#dropzone input {
+    display: none;
+}
+
+@media (hover: hover) {
+    div#dropzone.hover, div#dropzone:hover {
+        border: 3px dashed white;
+    }
+
+    div#dropzone.hover p, div#dropzone:hover p {
+        color: white;
+    }
+}
\ No newline at end of file
diff --git a/Server.Client/Pages/ViewMedia.razor b/Server.Client/Pages/ViewMedia.razor
new file mode 100644
index 0000000..4c9151e
--- /dev/null
+++ b/Server.Client/Pages/ViewMedia.razor
@@ -0,0 +1,270 @@
+@page "/ViewMedia"
+@* @using HyperBooru.Util*@
+@inject HBSession hb
+@inject IJSRuntime jsRuntime
+@* @inject IDbContextFactory<HBContext> dbFactory
+@inject ITagService tagService
+@inject IMediaService mediaService
+@inject ISourceService sourceService
+ *@
+
+<PageTitle>@title</PageTitle>
+
+<script suppress-warning="BL9992">
+    function toggleSidebar() {
+        document.getElementById("hcontainer").classList.toggle("hide-metadata");
+    }
+
+	function setMobilePane(pane) {
+		var panes = Array.from(document.querySelectorAll('[class^="mobile-pane-"]'));
+
+		panes.forEach(e => e.classList.remove('visible'));
+		panes
+			.filter(e => e.classList.contains(`mobile-pane-${pane}`))
+			.forEach(e => e.classList.add('visible'));
+	}
+
+	function pageKeyDownHandler(e) {
+		if(!e.ctrlKey && !e.metaKey && !e.altKey && !e.shiftKey && !e.isComposing)
+			if(e.key == 's')
+				toggleSidebar();
+	}
+</script>
+
+<div id="vcontainer">
+	<div id="hcontainer">
+		<div id="image-container" class="mobile-pane-image visible">
+			<img
+				src="/media/@(MediaId)"/>
+@* 			<img
+				src="/media/@(media.Guid)"
+				width=@media.CurrentUploadedFile.Width
+				height=@media.CurrentUploadedFile.Height/>
+ *@		</div>
+		<div id="metadata-show-button">
+			<a href="javascript:toggleSidebar();" title="Toggle sidebar (S)"></a>
+		</div>
+		<div id="metadata" class="mobile-pane-metadata">
+			<div id="metadata-container">
+				<div id="metadata-fileinfo">
+					@if(infoEditMode) {
+@* 						<form action="javascript:;" @onsubmit=@(() => ApplyInfoEdit(true))>
+							<table id="edit-metadata">
+								<tr>
+									<td>Title:</td>
+									<td><input type="text" @bind=shortDescription @ref=shortDescriptionInput/></td>
+								</tr>
+								<tr>
+									<td>Description:</td>
+									<td><textarea rows="4" @bind=longDescription/></td>
+								</tr>
+							</table>
+						</form>
+ *@					} else {
+						<p>Title: <i>@(media?.ShortDescription ?? "None")</i></p>
+						<p class="newlines">Description:<br/><i>@(media?.LongDescription ?? "None")</i></p>
+					}
+@* 					<p>Resolution: @(media.CurrentUploadedFile.Width)x@(media.CurrentUploadedFile.Height)</p>
+					<p class="heading">Upload history</p>
+					<hr/>
+					<table id="uploaded-files" class="data-table">
+						<tr>
+							<th>Created On</th>
+							<th>Last Write</th>
+							<th>Uploaded On</th>
+							<th>Filename</th>
+							<th>Size</th>
+							<th>Original Checksum</th>
+						</tr>
+						@foreach(var file in media.UploadedFiles.OrderByDescending(uf => uf.UploadTime)) {
+							string? sourceUrl = null;
+							if(file.Filename is not null)
+								sourceUrl = sourceService.GetUrlFromFilename(file.Filename);
+							<tr>
+								<td title=@file.CreateTime?.ToString()>
+									@(file.CreateTime?.ToString("d") ?? "N/A")
+								</td>
+								<td title=@file.LastWriteTime?.ToString()>
+									@(file.LastWriteTime?.ToString("d") ?? "N/A")
+								</td>
+								<td title=@file.UploadTime>@(file.UploadTime.ToString("d"))</td>
+								<td title=@(file.Path is not null ? $"{file.Path.Replace('\\', '/')}/{file.Filename}" : file.Filename)>
+									@if(sourceUrl is not null) {
+										<a class="nondecorated" target="_blank" href=@sourceUrl>@file.Filename</a>
+									} else {
+										@file.Filename
+									}
+								</td>
+								<td title=@file.Length>@file.Length.ToBytesSI()</td>
+								<td
+									title=@(file.Checksum + (file.ChecksumVerified ? " (verified)" : ""))
+									class=@(file.ChecksumVerified ? "verified" : null)>
+									
+									@file.Checksum.Substring(0, 8)
+								</td>
+							</tr>
+						}
+					</table>
+ *@				</div>
+				<div id="metadata-tags">
+					<p class="heading">Tags</p>
+					<hr/>
+					<MediaTagTable MediaId=MediaId @ref=mediaTagTable/>
+				</div>
+			</div>
+			<div id="button-container">
+				<ButtonContainer>
+@* 					<button @onclick=@(() => deleteDialog.Show()) class="warning" data-keyboard-shortcut="d">
+						<img src="/images/trash.svg"/>
+						<p><u>D</u>elete</p>
+					</button>
+					<button @onclick=@(() => tagDialog.Show()) class="secondary" data-keyboard-shortcut="t">
+						<img src="/images/tag.svg"/>
+						<p>Add <u>T</u>ag</p>
+					</button>
+					<button @onclick=@(() => ocrDialog.Show()) class="secondary" data-keyboard-shortcut="o">
+						<img src="/images/book.svg"/>
+						<p>View <u>O</u>CR</p>
+					</button>
+ *@					@if(infoEditMode) {
+@* 						<button @onclick=@(() => ApplyInfoEdit(false)) class="secondary">
+							<img src="/images/cross.svg"/>
+							<p>Cancel</p>
+						</button>
+						<button @onclick=@(() => ApplyInfoEdit(true))>
+							<img src="/images/checkmark.svg"/>
+							<p>Apply</p>
+						</button>
+ *@					} else {
+						<button @onclick=@(() => InfoEditMode = true) class="secondary" data-keyboard-shortcut="e">
+							<img src="/images/edit.svg"/>
+							<p><u>E</u>dit Info</p>
+						</button>
+					}
+@* 					@if(media.IsIngest) {
+						<button @onclick=@(() => SetIngest(false)) data-keyboard-shortcut="c">
+							<img src="/images/checkmark.svg"/>
+							<p>Mark Tagging <u>C</u>omplete</p>
+						</button>
+					} else {
+ *@						<button class="secondary" @onclick=@(() => SetIngest(true)) data-keyboard-shortcut="c">
+							<img src="/images/cross.svg"/>
+							<p>Mark Tagging In<u>c</u>omplete</p>
+						</button>
+					@* } *@
+				</ButtonContainer>
+			</div>
+		</div>
+	</div>
+	<div id="bottom-bar">
+		<img onclick="setMobilePane('image');" src="/images/photo.svg" width="25" height="25"/>
+		<img onclick="setMobilePane('metadata');" src="/images/info.svg" width="25" height="25"/>
+	</div>
+</div>
+
+@* <Dialog Title="Delete this media?" @ref=deleteDialog>
+    <ButtonContainer>
+        <button @onclick=@(() => deleteDialog.Hide()) class="secondary">Cancel</button>
+        <button @onclick=DeleteMedia class="warning">Confirm</button>
+    </ButtonContainer>
+</Dialog>
+
+<Dialog Title="OCR Data" @ref=ocrDialog>
+    @if(media.OcrData is null) {
+        <p><center>This media item hasn't been scanned yet!</center></p>
+    } else {
+        <code style="max-height:400px;">@media.OcrData?.Text</code>
+    }
+    <ButtonContainer>
+        <button @onclick=@(() => ocrDialog.Hide())>Close</button>
+    </ButtonContainer>
+</Dialog>
+
+<TagSelectDialog
+    Title="Select one or more tag(s) to add"
+    OnSubmit=AddTags
+    @ref=tagDialog/>
+ *@
+@code {
+	[Parameter]
+	[SupplyParameterFromQuery(Name = "m")]
+	public Guid MediaId { get; set; }
+
+	private ApiModels.Media media;
+
+	private string title;
+
+	private bool    infoEditMode = false;
+	private string? shortDescription;
+	private string? longDescription;
+
+	private MediaTagTable   mediaTagTable;
+	// private Dialog          deleteDialog;
+	// private Dialog          ocrDialog;
+	// private TagSelectDialog tagDialog;
+
+	private ElementReference shortDescriptionInput;
+
+	protected override void OnInitialized() =>
+		LoadMedia();
+
+	protected override async void OnAfterRender(bool firstRender) {
+		if(infoEditMode)
+			await shortDescriptionInput.FocusAsync();
+	}
+
+	private async void LoadMedia() {
+		media = await hb.Media.GetAsync(MediaId);
+		// using var db = dbFactory.CreateDbContext();
+		// media = db.Media
+		//     .Include(m => m.Tags)
+		//     .ThenInclude(t => t.TagDefinition)
+		//     .Include(m => m.CurrentUploadedFile)
+		//     .Include(m => m.UploadedFiles)
+		//     .Include(m => m.OcrData)
+		//     .First(m => m.Guid == MediaId);
+
+		// title = media.DisplayName ?? "Media View";
+		// InvokeAsync(() => StateHasChanged());
+	}
+
+    // private void AddTags(TagDefinition[] tagDefs) {
+    //     foreach(var tagDef in tagDefs)
+    //         tagService.AddTag(media, tagDef);
+    //     mediaTagTable.Refresh();
+    // }
+
+    private async void SetIngest(bool ingest) {
+        // mediaService.SetIngest(media, ingest);
+        LoadMedia();
+
+        if(ingest)
+            StateHasChanged();
+        else
+            await jsRuntime.InvokeVoidAsync("history.back");
+    }
+
+    private bool InfoEditMode {
+        get => infoEditMode;
+        set {
+            shortDescription = media.ShortDescription;
+            longDescription  = media.LongDescription;
+            infoEditMode     = value;
+            StateHasChanged();
+        }
+    }
+
+    // private void ApplyInfoEdit(bool apply) {
+    //     if(apply) {
+    //         mediaService.SetDescription(media, shortDescription, longDescription);
+    //         LoadMedia();
+    //     }
+
+    //     infoEditMode = false;
+    // }
+
+    // private async void DeleteMedia() {
+    //     mediaService.Delete(media);
+    //     await jsRuntime.InvokeVoidAsync("history.back");
+    // }
+}
diff --git a/Server.Client/Pages/ViewMedia.razor.css b/Server.Client/Pages/ViewMedia.razor.css
new file mode 100644
index 0000000..1a856d3
--- /dev/null
+++ b/Server.Client/Pages/ViewMedia.razor.css
@@ -0,0 +1,222 @@
+div#vcontainer {
+    align-items:    start;
+    display:        flex;
+    flex-direction: column;
+    height:         100%;
+    overflow:       hidden;
+    width:          100%;
+}
+
+div#hcontainer {
+    align-items:    start;
+    display:        flex;
+    flex-direction: row;
+    height:         100%;
+    overflow:       hidden;
+    width:          100%;
+}
+
+div#image-container {
+    box-sizing: border-box;
+    flex:       1 0 0;
+    height:     100%;
+    overflow:   auto;
+    padding:    var(--size-default-gap);
+    width:      100%;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#image-container {
+        padding: 0 !important;
+    }
+}
+
+div#image-container > img {
+    display:    block;
+    left:       50%;
+    max-height: 100%;
+    max-width:  100%;
+    object-fit: contain;
+    position:   relative;
+    top:        50%;
+    transform:  translate(-50%, -50%);
+}
+
+div#metadata-show-button {
+    display:         flex;
+    flex-direction:  column;
+    height:          100%;
+    justify-content: center;
+    user-select:     none;
+    width:           20px;
+}
+
+div#metadata-show-button > a::before {
+    content: "\25B6";
+}
+
+div#hcontainer.hide-metadata > div#metadata-show-button > a::before {
+    content: "\25C0" !important;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#metadata-show-button {
+        display: none !important;
+    }
+}
+
+div#metadata-show-button > a {
+    /* TODO: Use colours from global.css */
+    background:    #333;
+    border-radius: 10px 0 0 10px;
+    color:         #fff;
+    display:       block;
+    padding:       15px 0 15px 0;
+    text-align:    center;
+}
+
+div#metadata-show-button > a:hover {
+    filter: brightness(1.5);
+}
+
+div#metadata-show-button > a:active {
+    background: #fff;
+}
+
+div#metadata {
+    background:     #333;
+    box-shadow:     rgba(0, 0, 0, 0.25) -10px 0px 10px;
+    box-sizing:     border-box;
+    display:        flex;
+    flex-direction: column;
+    flex:           0 0 auto;
+    height:         100%;
+    margin-left:    auto;
+    padding:        30px;
+    transition:     margin-right 0.1s linear;
+    width:          700px;
+    z-index:        90;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    div#hcontainer.hide-metadata > div#metadata {
+        box-shadow:   none;
+        margin-right: -700px;
+    }
+}
+
+@media (hover: none) and (pointer: coarse) {
+    [class^="mobile-pane-"] {
+        width: 100% !important;
+    }
+
+    [class^="mobile-pane-"]:not(.visible) {
+        display: none !important;
+    }
+}
+
+div#button-container {
+    margin-top: auto;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#button-container button {
+        font-size: 8pt;
+    }
+}
+
+div#metadata-container {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+table#edit-metadata {
+    border-collapse: collapse;
+    width:           100%;
+}
+
+table#edit-metadata tr:first-child {
+    vertical-align: middle;
+}
+
+table#edit-metadata tr:last-child {
+    vertical-align: top;
+}
+
+table#edit-metadata td:last-child {
+    width: 100%;
+}
+
+table#edit-metadata td > input {
+    width:  100%;
+    margin: 0;
+}
+
+table#edit-metadata td > textarea {
+    margin: 0;
+    resize: none;
+    width:  100%;
+}
+
+table#uploaded-files th {
+    font-size: 8pt;
+}
+
+table#uploaded-files td {
+    font-family:   'Lucida Console';
+    font-size:     7pt;
+    overflow:      hidden;
+    text-overflow: ellipsis;
+    white-space:   nowrap;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    table#uploaded-files th,
+    table#uploaded-files td {
+        font-size: 6pt;
+    }
+}
+
+table#uploaded-files td:nth-child(4) {
+    max-width: 170px;
+}
+
+table#uploaded-files td.verified {
+    color: var(--col-checksum-verified-pri);
+}
+
+p.heading {
+    margin-top: 30px;
+}
+
+p.newlines {
+    white-space: pre-line;
+}
+
+div#bottom-bar {
+    /* TODO: Use colours from global.css */
+    align-items:    center;
+    background:     #141414;
+    box-shadow:     rgba(0, 0, 0, 0.25) 0px -5px 5px;
+    display:        none;
+    flex-direction: row;
+    width:          100%;
+}
+
+@media (hover: none) and (pointer: coarse) {
+    div#bottom-bar {
+        display: flex;
+    }
+}
+
+div#bottom-bar > img {
+    color:   white;
+    margin:  auto;
+    padding: 10px;
+}
+
+div#bottom-bar > img:active {
+    /* TODO: Use colours from global.css */
+    background: white;
+    color:      #141414;
+}