commit d1d520817ad848abecee3a3fb07d75edfe43dcc0
Author: Facinorous <63425706+Facinorous-420@users.noreply.github.com>
Date:   Sun Mar 27 09:30:40 2022 -0400

    Initial commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c6968ae
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,29 @@
+lib-cov
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+*.swp
+
+pids
+logs
+results
+tmp
+
+# Constants
+src/CONSTANTS.ts
+
+# Dependency directory
+node_modules
+
+# OS metadata
+.DS_Store
+Thumbs.db
+
+# Ignore built files
+dist/**/*
+
+package-lock.json
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..0ad25db
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5da4074
--- /dev/null
+++ b/README.md
@@ -0,0 +1,176 @@
+<br />
+<p align="center">
+  <a href="dick_example_2.png">
+    <img src="dick_example_2.png" alt="Login">
+  </a>
+  <details align="center">
+  <summary>Profile Preview</summary>
+    <a href="dick_example_1.png">
+    <img src="dick_example_1.png" alt="Profile">
+  </a>
+  </details>
+
+  <h3 align="center">DICK (Directly Integrated Client for Keisters)</h3>
+
+  <p align="center">
+    The main repository for DICK, an <a href="https://github.com/tycrek/ass">ASS</a> front end
+    <br />
+    <br />
+    <a href="https://github.com/facinorous-420/dick/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/facinorous-420/dick/issues">Request Feature</a>
+  </p>
+</p>
+
+<!-- TABLE OF CONTENTS -->
+<details open="open">
+  <summary>Table of Contents</summary>
+  <ol>
+    <li><a href="#about-the-project">About The Project</a></li>
+    <li><a href="#running-the-dashboard">Running The Dashboard</a>
+      <ul>
+        <li><a href="#config">Config</a></li>
+          <ul>
+            <li><a href="#development">Starting Development</a></li>
+            <li><a href="#production">Starting Production</a></li>
+          </ul>
+        </ul>
+    </li>
+    <li>
+      <a href="#contributing">Contributing</a>
+    </li>
+    <li>
+      <a href="#contact">Contact</a>
+    </li>
+    <li>
+      <a href="#acknowledgements">Acknowledgements</a>
+    </li>
+  </ol>
+</details>
+
+
+
+## About The Project
+
+Dick was created to be an easy to use front end for <a href="https://github.com/tycrek/ass">Ass</a> as there was no public option to allow users to view their saved images on their server. I decided to learn tailwind and also at the same time build this. I did this all in my spare time, and will keep updating as best as I can while I use it. I'm still learning all this so if anyone has suggestions on how to do things better, I am all ears! I love learning! :)
+
+**Current Feautres:**
+1. General statistics on your file uploads
+2. File browser, allows you to see all your uploads on one webpage (plans to make it more powerful)
+3. Deletion of items (currently one at a time, plans for multiple at once)
+4. Copy link of items (currently one at a time, plans for multiple with spaces in between in pastebin)
+
+**Planned Feautres:**
+1. There are a lot of good ideas out there, to keep track of what is currently planned see <a href="https://github.com/Facinorous-420/dick/projects/2">the v1.1 project board</a>
+
+The front end is built using <a href="https://tailwindcss.com">Tailwind CSS</a>, <a href="https://lucide.dev/">Lucide Icons,</a> as well as hand crafted components all templated using <a href="https://ejs.co/">EJS</a>. I plan to eventually rewrite this in React.
+
+The back end is written in <a href="https://www.typescriptlang.org/">Typescript</a>, utilizing <a href="https://expressjs.com/">expressJS</a>.
+
+
+## Running The Dashboard
+
+Running DICK is very simple, though there is no docker container.<br/>
+You must have `Node >=v16.14.0`, which you should if you're running ASS.
+
+
+### Config
+
+Inside of your dick root folder, you will see `src/CONSTANTS.ts.example`. Copy this to `CONSTANTS.ts`<br/>
+Inside this file, is some basic configuration you can change for your set up. There are only 5 variables you need to worry about in this file:
+
+| Variable                                     |           Description           |
+| --------------------------------------------- | :---------------------: |
+| `DICK_SUBMODULE = false` | Put this to true if you wish to run DICK as an ASS submoduke, false if seperate                 |
+| `ASSLOCATION = "../ass"` | If running DICK seperately, DICK will use this to find your ASS install folder |
+| `ASSSECURE = false` | Put this to true if you are running ASS behind a domain with HTTPS,. false if HTTP                  |
+| `ASSDOMAIN = "127.0.0.1:40115"` | Put this to your ASS domain. Can be an ip, or domain for example `https://cdn.mydomain.com` |
+| `STAFF_IDS = ["ass"]` | Change this to whatever your username is in your ASS `auth.json` file. Default user in ASS, is `ass` |
+
+### Running
+#### Development
+
+<details>
+    <summary><sub>Open to view the development set up steps</sub></summary>
+
+  1. Create a folder, call it whatever you wish
+  2. Install, and run ASS https://github.com/tycrek/ass#installation (This will create an `ass` folder) 
+  3. Go back into the folder you created and clone this repo `git clone https://github.com/Facinorous-420/dick`
+  4. Go into the newly created `dick` folder `cd dick`
+  5. Go into `/src` and copy `CONSTANTS.ts.example` to `CONSTANTS.ts` and edit it as needed
+  6. Go back to the root of `dick` and install the dependancies for the frontend, `npm i`
+  7. Run `npm run build:dev` to compile the code base in watch mode
+  8. In a new terminal, run `npm run serve:dev` to run DICK using nodemon
+  
+:warning:```ASS will be running under it's port of 40115 whereas the dashboard will be under the port 3000.```<br/>
+</details>
+  
+#### Production
+<details>
+    <summary><sub>Open to view the production set up steps</sub></summary><br/>
+  
+  1. Create a folder, call it whatever you wish
+  2. Install, and run ASS https://github.com/tycrek/ass#installation (This will create an `ass` folder) 
+  3. Go back into the folder you created and clone this repo `git clone https://github.com/Facinorous-420/dick`
+  4. Go into the newly created `dick` folder `cd dick`
+  5. Go into `/src` and copy `CONSTANTS.ts.example` to `CONSTANTS.ts` and edit it as needed
+  6. Go back to the root of `dick` and install the dependancies for the frontend, `npm i`
+  7. Run `npm start` to compile the code base and run DICK
+   
+</details>
+
+When you approach the login screen, your secret key is the key generated for your account. You should not share this with anyone.
+
+:warning:```ASS and the dashboard will be under their own ports.```<br/>
+<sub> They will have entirely different routing. This means you can use two different domains for each, such as `cdn.yourdomain.com` for ASS and `dashboard.yourdomain.com` for DICK. </sub>
+
+<details>
+    <summary><sub>Open to view the set up steps to run this as a submodule to ass</sub></summary><br/>
+
+**Preface:** You need to edit `/src/CONSTANTS.ts`'s variable of `DICK_SUBMODULE` to `true`
+  
+1. Setup ASS https://github.com/tycrek/ass#installation
+   For when it asks for name of front end, leave as `ass-x` (default) for now.
+
+2. Add this repo as a submodule into ASS `git submodule add https://github.com/Facinorous-420/dick`
+3. Go into the frontend's directory, `cd dick`, and run `git submodule update --init --recursive` to initiaze it
+4. Install the dependancies for the frontend, `npm i`
+5. Run `npm run build` to compile the frontend and get it ready to run
+6. Then move to the ASS directory and run the ASS setup again `npm run setup`
+7. Leave everything as you did prior, but this time under `frontend name`, type `dick` and continue
+8. Go into the `.gitmodules` file, and youll notice two submodules. Remove the
+   ```
+   [submodule "ass-x"]
+     path = ass-x
+     url = git@github.com:tycrek/ass-x.git
+   ```
+   submodule so only the
+   ```
+   [submodule "dick"]
+     path = dick
+     url = https://github.com/Facinorous-420/dick
+   ```
+   one is left
+9. Run `npm run build` to recompile this change
+10. You can run ASS, `npm start` or however you normally run your ass instance
+   
+</details>
+
+## Contributing
+
+<sub> If using VSCode, I'd recommend using this extension: https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github</sub>
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+
+
+## Contact
+
+| Developer                                     |           Job           |
+| --------------------------------------------- | :---------------------: |
+| [Facinorous](https://github.com/facinorous-420) | Lead                  |
+| [Sublime](https://github.com/senpaiSubby)#4233 | Helping hand, my sensei, created the back end |
diff --git a/dick_example_1.png b/dick_example_1.png
new file mode 100644
index 0000000..6cb5dd3
Binary files /dev/null and b/dick_example_1.png differ
diff --git a/dick_example_2.png b/dick_example_2.png
new file mode 100644
index 0000000..49cd619
Binary files /dev/null and b/dick_example_2.png differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..2749eff
--- /dev/null
+++ b/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "dick",
+  "version": "1.0.0",
+  "description": "A frontend for ASS",
+  "main": "./dist/dashboard.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Facinorous-420/dick"
+  },
+  "author": "facinorous-420",
+  "license": "AGPL-3.0",
+  "scripts": {
+    "start": "npm run build && npm run serve",
+    "build": "tsc && mix --production && postcss ./src/public/css/tailwind.css -o ./dist/public/css/app.css",
+    "build:dev": "concurrently --kill-others \"tsc -w\" \"mix watch\" \"tailwindcss build -i ./src/public/css/tailwind.css -o ./dist/public/css/app.css --watch\" ",
+    "serve": "node dist/dashboard.js",
+    "serve:dev": "nodemon dist/dashboard.js"
+  },
+  "dependencies": {
+    "@callmekory/logger": "^1.1.1",
+    "async": "^3.2.3",
+    "bcrypt": "^5.0.1",
+    "body-parser": "^1.19.2",
+    "compression": "^1.7.4",
+    "connect-flash": "^0.1.1",
+    "cookie-parser": "^1.4.6",
+    "cookie-session": "^2.0.0",
+    "ejs": "^3.1.6",
+    "errorhandler": "^1.5.1",
+    "express": "^4.17.3",
+    "lucide": "^0.17.13",
+    "passport": "^0.5.2",
+    "passport-local": "^1.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.0",
+    "@types/async": "^3.2.12",
+    "@types/body-parser": "^1.19.2",
+    "@types/compression": "^1.7.2",
+    "@types/connect-flash": "^0.0.37",
+    "@types/cookie-session": "^2.0.44",
+    "@types/errorhandler": "^1.5.0",
+    "@types/express": "^4.17.13",
+    "@types/express-busboy": "^8.0.0",
+    "@types/express-session": "^1.17.4",
+    "@types/fs-extra": "^9.0.13",
+    "@types/node": "^17.0.22",
+    "@types/passport": "^1.0.7",
+    "@types/passport-local": "^1.0.34",
+    "@types/request": "^2.48.8",
+    "autoprefixer": "^10.4.4",
+    "concurrently": "^7.1.0",
+    "cssnano": "5.1.5",
+    "laravel-mix": "^6.0.43",
+    "nodemon": "^2.0.15",
+    "postcss-advanced-variables": "^3.0.1",
+    "postcss-cli": "^9.1.0",
+    "tailwindcss": "^3.0.23",
+    "ts-node": "^10.7.0",
+    "tslint": "^5.20.1",
+    "typescript": "^4.6.2"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..3d15333
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+    plugins: [
+      require('tailwindcss'),
+      require("postcss-advanced-variables"),
+      require("tailwindcss/nesting"),
+      require('autoprefixer'),
+      require('cssnano')({
+        preset: 'default',
+      }),
+    ],
+  }
\ No newline at end of file
diff --git a/src/CONSTANTS.ts.example b/src/CONSTANTS.ts.example
new file mode 100644
index 0000000..09c230e
--- /dev/null
+++ b/src/CONSTANTS.ts.example
@@ -0,0 +1,33 @@
+import { templatePathBuilder } from "./utils/utils"
+
+/* 
+------------------- USER CONSTANTS ------------------------
+*/
+// Variable to set DICK to run as a submodule to ASS or seperately: true = submodule | false = seperate
+export const DICK_SUBMODULE = false
+
+// * ------------------- ASS HOST INFORMATION ----------------------------
+// Boolean variable if your ASS is secured with HTTPS: true = https | false = http
+export const ASSSECURE = false
+// This is the domain your ASS is hosted at: "127.0.0.1" | "cdn.domain.com"
+export const ASSDOMAIN = "127.0.0.1:40115" 
+// If running DICK in seperate mode, it will need to know where your ASS is installed
+export const ASSLOCATION = "../ass"
+
+// * ------------------- STAFF ID CONSTANTS ---------------------------- <--- this will eventually be moved away from constants
+// Array of all USERNAMES in your ASS auth.json file that will have admin access: ["ass", "dick", "frank"]
+export const STAFF_IDS = ["ass"] 
+
+
+/* 
+------------------- SYSTEM CONSTANTS ------------------------
+*/
+// * ------------------- TEMPLATE PATH CONSTANTS ------------------------
+export const TEMPLATE = {
+  USER: templatePathBuilder("/user.ejs"),
+  PUBLIC: templatePathBuilder("/public.ejs"),
+  ERRORS: {
+    403: templatePathBuilder("/errors/403.ejs"),
+    404: templatePathBuilder("/errors/404.ejs")
+  }
+}
diff --git a/src/Pager.ts b/src/Pager.ts
new file mode 100644
index 0000000..501e822
--- /dev/null
+++ b/src/Pager.ts
@@ -0,0 +1,138 @@
+import { Response } from "express"
+import { parseAuthFile, parseDataFile } from "./utils/assJSONStructure"
+import { RenderOptions } from "./typings/Pager"
+import { ASSDOMAIN, ASSSECURE, STAFF_IDS } from "./CONSTANTS"
+import { convertTimestamp, formatSize } from "./utils/utils"
+import { ASSUser, ASSItem } from "./typings/ASSTypes"
+import { IExtendedRequest } from "./typings/express-ext"
+
+export class Pager {
+  /**
+   * Process and render the specified template with provided options
+   */
+  static async render(
+    res: Response,
+    req: IExtendedRequest,
+    template: string,
+    options?: RenderOptions
+  ) {
+    if (!options) options = { params: {} }
+    if (!options.params) options.params = []
+
+    const data: Array<ASSItem> = parseDataFile()
+    const users: Array<ASSUser> = parseAuthFile()
+
+    // If user is already authenticated load the authenticated data
+    if (req.isAuthenticated()) {
+      return this.renderAuthenticatedData(res, req, template, options, data, users)
+    }
+    
+    // If user is not authenticated only load guest data
+    return this.renderUnauthenticatedData(res, req, template, options, data, users)
+  }
+
+  /**
+   * Renders templates for unauthenticated templates
+   */
+   static async renderUnauthenticatedData(
+    res: Response,
+    req: IExtendedRequest,
+    template: string,
+    options: RenderOptions,
+    data: Array<ASSItem>,
+    users: Array<ASSUser>
+  ) {
+    const totalUsers = users.length
+    const totalData = data.length
+    const totalSize = formatSize(data.map(item => item.size).reduce((prev, curr) => prev + curr, 0))
+
+    const baseData = {
+      params: options.params,
+      path: req.path,
+      totalUsers,
+      totalData,
+      totalSize
+    }
+
+    // We render template using the absolute path of the template and the merged default data with the additional data provided.
+    return res.render(template, Object.assign(baseData, options))
+  }
+
+  /**
+   * Renders templates for authenticated templates,
+   */
+  // eslint-disable-next-line complexity
+  static async renderAuthenticatedData(
+    res: Response,
+    req: IExtendedRequest,
+    template: string,
+    options: RenderOptions,
+    data: Array<ASSItem>,
+    users: Array<ASSUser>
+  ) {
+    // * -------------------- BUILD DATA OBJECT FOR FRONTEND EJS VARIABLES ------------
+    const totalUsers = users.length
+    const totalData = data.length
+    const totalSize = formatSize(data.map(item => item.size).reduce((prev, curr) => prev + curr, 0))
+    const hasRole = STAFF_IDS.indexOf(req.user.username) > -1
+    // Get all the specific users file information, using secret key to match
+    const usersData = data.filter(item => item.owner == req.user.password).map((item) => ({
+      ...item, 
+      timestamp: convertTimestamp(item.timestamp)
+    })).sort((a, b) => {
+      let da = new Date(a.timestamp),
+          db = new Date(b.timestamp)
+          return db.getTime() - da.getTime()
+    })
+
+    // I feel like this could be done better, but I created an object filled with useful variables for the user data to be rendered on the pages
+    const usersDataObj = {
+      data: usersData,
+      allImages: usersData.filter(item=> item.type.includes('image')),
+      allVideos: usersData.filter(item=> item.type.includes('video')),
+      allFiles: usersData.filter(item=> item.type.includes('file')),
+      allOthers: usersData.filter(item=> item.type.includes('other')),
+      totalSize:formatSize(usersData.map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+      totalImageSize: formatSize(usersData.filter(item=> item.type.includes('image')).map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+      totalVideosSize: formatSize(usersData.filter(item=> item.type.includes('video')).map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+      totalFilesSize: formatSize(usersData.filter(item=> item.type.includes('file')).map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+      totalOthersSize: formatSize(usersData.filter(item=> item.type.includes('other')).map(item => item.size).reduce((prev, curr) => prev + curr, 0))
+    }
+    
+    let targetDataObj = {}
+    // If the user is staff and is trying to view another users information, we will grab it here to render that as well..
+    /*
+    if (options.params.userID) {
+    const targetData = data.filter((item: ASSItem ) => (item: { owner: string }) => item.owner == options.params.userID)
+      targetDataObj = {
+        data: targetData,
+        allImages: targetData.filter(item=> item.type.includes('image')),
+        allVideos: targetData.filter(item=> item.type.includes('video')),
+        allFiles: targetData.filter(item=> item.type.includes('file')),
+        allOthers: targetData.filter(item=> item.type.includes('other')),
+        totalSize:formatSize(targetData.map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+        totalImageSize: formatSize(targetData.filter(item=> item.type.includes('image')).map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+        totalVideosSize: formatSize(targetData.filter(item=> item.type.includes('video')).map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+        totalFilesSize: formatSize(targetData.filter(item=> item.type.includes('file')).map(item => item.size).reduce((prev, curr) => prev + curr, 0)),
+        totalOthersSize: formatSize(targetData.filter(item=> item.type.includes('other')).map(item => item.size).reduce((prev, curr) => prev + curr, 0))
+      }
+    }
+    */
+
+    const baseData = {
+      assDomain: ASSDOMAIN,
+      assSecure: ASSSECURE,
+      user: req.user,
+      totalSize,
+      totalUsers,
+      totalData,
+      usersDataObj,
+      //targetDataObj: options.params.userID ? targetDataObj : null,
+      params: options.params,
+      path: req.path,
+      hasRole
+    }
+
+    return res.render(template, Object.assign(baseData, options))
+  }
+}
diff --git a/src/dashboard.ts b/src/dashboard.ts
new file mode 100644
index 0000000..7a27e2e
--- /dev/null
+++ b/src/dashboard.ts
@@ -0,0 +1,71 @@
+import express from "express"
+import compression from "compression" // compresses requests
+import path from "path"
+import passport from "passport"
+import cookieSession from "cookie-session"
+import bodyParser from 'body-parser'
+import flash from 'connect-flash'
+import errorHandler from "errorhandler"
+
+import { Pager } from "./Pager"
+import { TEMPLATE } from "./CONSTANTS"
+import { authRoutes } from "./routes/route.auth"
+import { publicRoutes } from "./routes/route.public"
+import { userRoutes } from "./routes/route.user"
+import { adminRoutes } from "./routes/route.admin"
+
+// Add async into express cause async is megachad
+const app = express()
+
+// Setting up express
+app.set("port", process.env.PORT || 3000)
+app.set("trust proxy", true)
+app.set("views", path.join(__dirname, "../views"))
+app.set("view engine", "ejs")
+app.use(bodyParser.urlencoded({ extended: false }))
+app.use(compression())
+app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
+app.use(errorHandler())
+
+// Make express use passport and session to store the user cookie
+app.use(cookieSession({
+  name: 'DICK',
+  keys: ['_H-A*7LKy0ivJCc3JJ!p7GriVigPN+faeXKl3QS8tx)SRoJV6l6s2biA#BAR2a9siA=xfcXW(2D-Ig9J2eP83zeBC6Fc%BSvg+DQbeWljQ$ypx!dtJ(#VTu!Cu#hXQQoilz4-Mr33xz&#(PdRwuP1T'],
+  maxAge: 30 * 24 * 60 * 1000 // 30 days
+}))
+app.use(flash());
+app.use(passport.initialize())
+app.use(passport.session())
+
+// Global variables
+app.use((request, response, next) => {
+  response.locals.success_alert_message = request.flash('success_alert_message');
+  response.locals.error_message = request.flash('error_message');
+  response.locals.error = request.flash('error');
+  next();
+})
+
+// Make the public folder available publically, you know, so the public can view the public files that should be freely open to the genreal public
+app.use(
+  express.static(path.join(__dirname, "public/"), { maxAge: 31557600000 })
+)
+
+// Add the routes
+authRoutes(app)
+publicRoutes(app)
+userRoutes(app)
+adminRoutes(app)
+
+// Catch all 404 page
+app.use(async (req, res) => await Pager.render(res, req, TEMPLATE.ERRORS[404]))
+
+// Run DICK
+app.listen(app.get("port"), () => {
+  console.log(
+    "  Dick is running at http://localhost:%d in %s mode",
+    app.get("port"),
+    app.get("env")
+  )
+  console.log("  Press CTRL-C to stop\n")
+})
diff --git a/src/public/css/tailwind.css b/src/public/css/tailwind.css
new file mode 100644
index 0000000..a6dbb8b
--- /dev/null
+++ b/src/public/css/tailwind.css
@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  /* Custom Background Colors */
+  .bg-primary {
+    @apply bg-lighttheme-primary dark:bg-darktheme-primary;
+  }
+  .bg-secondary {
+    @apply bg-lighttheme-secondary dark:bg-darktheme-secondary;
+  }
+  .bg-secondary-hover {
+    @apply bg-lighttheme-secondaryHover dark:bg-darktheme-secondaryHover;
+  }
+  .bg-tertiary {
+    @apply bg-lighttheme-tertiary dark:bg-darktheme-tertiary;
+  }
+  .bg-tertiary-hover {
+    @apply bg-lighttheme-tertiaryHover dark:bg-darktheme-tertiaryHover;
+  }
+  .text-color-primary {
+    @apply text-lightthemeText-primary dark:text-darkthemeText-primary;
+  }
+  .text-color-secondary {
+    @apply text-lightthemeText-secondary dark:text-darkthemeText-secondary;
+  }
+  .text-color-accent {
+    @apply text-lightthemeText-accentPrimary dark:text-darkthemeText-accentPrimary;
+  }
+  .text-color-accentsecondary {
+    @apply text-lightthemeText-accentSecondary dark:text-darkthemeText-accentSecondary;
+  }
+}
+
+@layer components {
+  /* Component Sizing */
+  .custom-size-profile {
+    height: 200px;
+    width: 200px;
+  }
+  .custom-w-preview {
+    height: 800px;
+    width: 800px;
+  }
+}
diff --git a/src/public/images/dick-logo.png b/src/public/images/dick-logo.png
new file mode 100644
index 0000000..6a8a9a6
Binary files /dev/null and b/src/public/images/dick-logo.png differ
diff --git a/src/public/images/profile-2.png b/src/public/images/profile-2.png
new file mode 100644
index 0000000..16bc8fe
Binary files /dev/null and b/src/public/images/profile-2.png differ
diff --git a/src/public/images/profile.png b/src/public/images/profile.png
new file mode 100644
index 0000000..6ddc51a
Binary files /dev/null and b/src/public/images/profile.png differ
diff --git a/src/public/js/components.js b/src/public/js/components.js
new file mode 100644
index 0000000..8a31835
--- /dev/null
+++ b/src/public/js/components.js
@@ -0,0 +1,205 @@
+// DOM Ready Function
+function ready(fn) {
+  if (document.readyState != 'loading') {
+      fn();
+  } else {
+      document.addEventListener('DOMContentLoaded', fn);
+  }
+}
+
+// DOM Ready Called
+ready(function () {
+
+  const openFile = document.getElementById('openFile');
+  const showFile = document.getElementById('showFile');
+
+  const traMove = document.getElementsByClassName('traMove');
+  const tabsProfile = document.getElementsByClassName('tabsProfile');
+  const tabsProfileContent = document.getElementsByClassName('tabsProfileContent');
+  const dropdownNavBtn = document.getElementById('dropdownNavBtn');
+  const dropdownNav = document.getElementById('dropdownNav');
+
+  const dropdownProfileBtn = document.getElementsByClassName('dropdownProfileBtn');
+  const dropdownProfile = document.getElementsByClassName('dropdownProfile');
+
+  const dropdownSearchBtn = document.getElementsByClassName('dropdownSearchBtn');
+  const dropdownSearch = document.getElementsByClassName('dropdownSearch');
+  const dropdownFileBtn = document.getElementsByClassName('dropdownFileBtn');
+
+  // Open File Manager Event
+  /*
+  function fireFileManager(){
+      openFile.addEventListener('click', () => {
+          showFile.click();
+      });
+  }
+  fireFileManager();
+*/
+
+  // Dropdown Navbar Event
+  function fireDropdownNav(){
+      dropdownNavBtn.addEventListener('click', () => {
+          if (dropdownNav.classList.contains('-translate-y-full')) {
+              dropdownNav.classList.remove('-translate-y-full');
+              dropdownNav.classList.add('translate-y-0', 'ease-linear');
+
+              // When the event get fired, every 'traMove' id attibute will move down
+              Array.prototype.forEach.call(traMove, (e) => {
+                  e.classList.remove('-translate-y-32');
+                  e.classList.add('translate-y-0', 'ease-linear');
+              });
+          } else {
+              dropdownNav.classList.add('-translate-y-full',);
+              dropdownNav.classList.remove('translate-y-0', 'ease-linear');
+
+               // Then if you hide the event, every 'traMove' id attribute will back to normal
+              Array.prototype.forEach.call(traMove, (e) => {
+                  e.classList.add('-translate-y-32');
+                  e.classList.remove('translate-y-0', 'ease-linear');
+              });
+          }
+      });
+  }
+  fireDropdownNav();
+
+  // Dropdown Profile Event
+  function fireDropdownProfile() {
+      Array.prototype.forEach.call(dropdownProfileBtn, function (e, index) {
+          e.addEventListener('click', () => {
+              var timer;
+              if (dropdownProfile[index].classList.contains('opacity-0')) {
+                  window.clearTimeout(timer);
+                  dropdownProfile[index].classList.remove('opacity-0', 'translate-y-6', 'invisible');
+                  dropdownProfile[index].classList.add('translate-y-0', 'opacity-100');
+              } else {
+                  dropdownProfile[index].classList.add('opacity-0', 'translate-y-6');
+                  dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100');
+                  
+                  //Set timer to hide the dropdown
+                  //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownProfile attribute 
+                  timer = window.setTimeout( () => {
+                      dropdownProfile[index].classList.add('invisible');
+                  }, 250);
+              }
+          });
+
+          // Click outside event
+          window.addEventListener('click', (eve) => {
+              if (!dropdownProfileBtn[index].contains(eve.target) && !dropdownProfile[index].contains(eve.target)) {
+                  dropdownProfile[index].classList.add('opacity-0', 'translate-y-6');
+                  dropdownProfile[index].classList.remove('translate-y-0', 'opacity-100');
+                  
+                  // Same as above
+                  timer = window.setTimeout( () => {
+                      dropdownProfile[index].classList.add('invisible');
+                  }, 250);
+              }
+          });
+      });
+  }
+  fireDropdownProfile();
+
+
+  // Dropdown Search Event
+  function fireDropdownSearch() {
+      Array.prototype.forEach.call(dropdownSearchBtn, (e, index) => {
+          e.addEventListener('click', () => {
+              var timer;
+              if (dropdownSearch[index].classList.contains('opacity-0')) {
+                  window.clearTimeout(timer);
+                  dropdownSearch[index].classList.remove('opacity-0', 'translate-y-6', 'invisible');
+                  dropdownSearch[index].classList.add('translate-y-0', 'opacity-100');
+              } else {
+                  dropdownSearch[index].classList.add('opacity-0', 'translate-y-6');
+                  dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100');
+
+                  //Set timer to hide the dropdown
+                  //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownSearch attribute 
+                  timer = window.setTimeout( () => {
+                      dropdownSearch[index].classList.add('invisible');
+                  }, 250);
+              }
+
+          });
+          
+          // Click outside event
+          window.addEventListener('click', (eve) => {
+              if (!dropdownSearchBtn[index].contains(eve.target) && !dropdownSearch[index].contains(eve.target)) {
+                  dropdownSearch[index].classList.add('opacity-0', 'translate-y-6');
+                  dropdownSearch[index].classList.remove('translate-y-0', 'opacity-100');
+                  
+                  // Same as above
+                  timer = window.setTimeout( () => {
+                      dropdownSearch[index].classList.add('invisible');
+                  }, 250);
+              }
+          });
+
+      });
+  }
+  fireDropdownSearch();
+
+  // Dropdown File Event
+  function fireDropdownFile() {
+      Array.prototype.forEach.call(dropdownFileBtn, (e, index) => {
+          const findSibling = e.parentElement.children[1];
+          e.addEventListener('click', () => {
+              var timer;
+              if (findSibling.classList.contains('opacity-0')) {
+                  window.clearTimeout(timer);
+                  findSibling.classList.remove('opacity-0', 'translate-y-6', 'invisible');
+                  findSibling.classList.add('translate-y-0', 'opacity-100');
+              } else {
+                  findSibling.classList.add('opacity-0', 'translate-y-6');
+                  findSibling.classList.remove('translate-y-0', 'opacity-100');
+                  
+                  //Set timer to hide the dropdown
+                  //the value of timer '250' must be same as the tailwind class 'duration-250' in the class dropdownFile attribute
+                  timer = window.setTimeout( () => {
+                      findSibling.classList.add('invisible');
+                  }, 250);
+              }
+          });
+
+          // Click outside event
+          window.addEventListener('click', (eve) => {
+              if (!dropdownFileBtn[index].contains(eve.target) && !findSibling.contains(eve.target)) {
+                  findSibling.classList.add('opacity-0', 'translate-y-6');
+                  findSibling.classList.remove('translate-y-0', 'opacity-100');
+                  
+                  // Same as above
+                  timer = window.setTimeout( () => {
+                      findSibling.classList.add('invisible');
+                  }, 250);
+              }
+
+          });
+
+      });
+  }
+  fireDropdownFile();
+
+  // Tabs Profile Event
+  function fireTabsProfile(){
+      //File Manager Tab = 0
+      tabsProfile[0].addEventListener('click', () => {
+          if (tabsProfile[1].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
+              tabsProfile[1].classList.remove('border-b-2', 'border-purple-400', 'font-semibold');
+              tabsProfile[0].classList.add('border-b-2', 'border-purple-400', 'font-semibold');
+              tabsProfileContent[1].classList.add('hidden');
+              tabsProfileContent[0].classList.remove('hidden');
+          }
+      });
+      //Config Gen Tab = 1
+      tabsProfile[1].addEventListener('click', () => {
+          if (tabsProfile[0].classList.contains('border-b-2', 'border-purple-400', 'font-semibold')) {
+              tabsProfile[0].classList.remove('border-b-2', 'border-purple-400', 'font-semibold');
+              tabsProfile[1].classList.add('border-b-2', 'border-purple-400', 'font-semibold');
+              tabsProfileContent[0].classList.add('hidden');
+              tabsProfileContent[1].classList.remove('hidden');
+          }
+      });
+  }
+  fireTabsProfile();
+
+});
\ No newline at end of file
diff --git a/src/public/js/theme/theme-set.js b/src/public/js/theme/theme-set.js
new file mode 100644
index 0000000..76d5f82
--- /dev/null
+++ b/src/public/js/theme/theme-set.js
@@ -0,0 +1,9 @@
+if (
+    localStorage.getItem('color-theme') === 'dark' ||
+    (!('color-theme' in localStorage) &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
\ No newline at end of file
diff --git a/src/public/js/theme/theme-switcher.js b/src/public/js/theme/theme-switcher.js
new file mode 100644
index 0000000..89e8f6e
--- /dev/null
+++ b/src/public/js/theme/theme-switcher.js
@@ -0,0 +1,40 @@
+var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
+var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
+
+// Change the icons inside the button based on previous settings
+if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    themeToggleLightIcon.classList.remove('hidden');
+} else {
+    themeToggleDarkIcon.classList.remove('hidden');
+}
+
+var themeToggleBtn = document.getElementById('theme-toggle');
+
+themeToggleBtn.addEventListener('click', function() {
+
+    // toggle icons inside button
+    themeToggleDarkIcon.classList.toggle('hidden');
+    themeToggleLightIcon.classList.toggle('hidden');
+
+    // if set via local storage previously
+    if (localStorage.getItem('color-theme')) {
+        if (localStorage.getItem('color-theme') === 'light') {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('color-theme', 'dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('color-theme', 'light');
+        }
+
+    // if NOT set via local storage previously
+    } else {
+        if (document.documentElement.classList.contains('dark')) {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('color-theme', 'light');
+        } else {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('color-theme', 'dark');
+        }
+    }
+    
+});
\ No newline at end of file
diff --git a/src/public/modules/app.js b/src/public/modules/app.js
new file mode 100644
index 0000000..c8eacdd
--- /dev/null
+++ b/src/public/modules/app.js
@@ -0,0 +1 @@
+import "./components/lucide"
\ No newline at end of file
diff --git a/src/public/modules/components/lucide.js b/src/public/modules/components/lucide.js
new file mode 100644
index 0000000..db42b07
--- /dev/null
+++ b/src/public/modules/components/lucide.js
@@ -0,0 +1,15 @@
+import { createIcons, icons } from "lucide"
+
+(function () {
+    "use strict"
+
+    // Lucide Icons
+    createIcons({
+        icons,
+        nameAttr: "data-lucide",
+    })
+    window.lucide = {
+        createIcons: createIcons,
+        icons: icons,
+    }
+})()
diff --git a/src/routes/route.admin.ts b/src/routes/route.admin.ts
new file mode 100644
index 0000000..294d6b3
--- /dev/null
+++ b/src/routes/route.admin.ts
@@ -0,0 +1,16 @@
+import { Request, Response, Router } from "express"
+import { authCheck, adminCheck, wrap } from "../utils/utils"
+import { TEMPLATE } from "../CONSTANTS"
+import { Pager } from "../Pager"
+
+export const adminRoutes = (app: Router) => {
+    app.get(
+        "/admin",
+        authCheck,
+        adminCheck,
+        wrap,
+        async (req: Request, res: Response) => {
+          return Pager.render(res, req, TEMPLATE.USER, {})
+        }
+      )
+}
diff --git a/src/routes/route.auth.ts b/src/routes/route.auth.ts
new file mode 100644
index 0000000..81edbc2
--- /dev/null
+++ b/src/routes/route.auth.ts
@@ -0,0 +1,73 @@
+import { Request, Response, NextFunction, Router } from "express"
+import { authCheck } from "../utils/utils"
+
+const { passport } = require("../utils/passport")
+
+export const authRoutes = (app: Router) => {
+  // If user is already logged in, send the profile response,
+  // Otherwise, send a 401 response that the user is not authenticated
+  // AuthCheck before navigating to home page
+  app.get("/auth/check", authCheck, (req: Request, res: Response) => {
+    res.status(200).json({
+      authenticated: true,
+      message: "user successfully authenticated",
+      user: req.user,
+      cookies: req.cookies,
+    })
+  })
+
+  // When login is successful, retrieve user info
+  app.get("/auth/login/success", (req: Request, res: Response) => {
+    if (req.user) {
+      res.json({
+        success: true,
+        message: "user has successfully authenticated",
+        user: req.user,
+        cookies: req.cookies,
+      })
+    }
+  })
+
+  // When login failed, send failed msg
+  app.get("/auth/login/failed", (req: Request, res: Response) => {
+    res.status(401).json({
+      success: false,
+      message: "Username or password is incorrect.",
+    })
+  })
+
+  // When logout, redirect to client
+  app.get("/auth/logout", (req: Request, res: Response) => {
+    const user = req.user
+    req.logout()
+    req.flash('success_alert_message', 'You have been succesfully logged out')
+    return res.redirect("/login")
+  })
+
+  // Auth with local passport, send them to ricky boy to prevent brute forcing 'cause Im too lazy to add proper captcha rn
+  app.post(
+    "/auth/login",
+    passport.authenticate("local", {
+      successRedirect: "/",
+      failureRedirect: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+      failureFlash: true
+    }),
+    (req: Request, res: Response, next: NextFunction) => {
+      next()
+    }
+  )
+
+
+  // Redirect to home page after successfully login
+  app.get(
+    "/auth/callback",
+    passport.authenticate("local"),
+    (req: Request, res: Response) => {
+      if (req.user) {
+        return res.redirect("/")
+      }
+      console.log('we hit here')
+      return res.redirect("/login")
+    }
+  )
+}
diff --git a/src/routes/route.public.ts b/src/routes/route.public.ts
new file mode 100644
index 0000000..79ad557
--- /dev/null
+++ b/src/routes/route.public.ts
@@ -0,0 +1,13 @@
+import { Request, Response, Router } from "express"
+import { TEMPLATE } from "../CONSTANTS"
+import { Pager } from "../Pager"
+
+export const publicRoutes = (app: Router) => {
+  app.get("/login", async (req: Request, res: Response) => {
+    // If the user is already logged in via cookies, redirect them to the dashboard
+    if (req.user) {
+      return res.redirect('/')
+    }
+    await Pager.render(res, req, TEMPLATE.PUBLIC)
+  })
+}
diff --git a/src/routes/route.user.ts b/src/routes/route.user.ts
new file mode 100644
index 0000000..8ee673a
--- /dev/null
+++ b/src/routes/route.user.ts
@@ -0,0 +1,36 @@
+import { Request, Response, Router } from "express"
+import { adminCheck, authCheck, wrap } from "../utils/utils"
+import { TEMPLATE } from "../CONSTANTS"
+import { Pager } from "../Pager"
+import { parseAuthFile } from "../utils/assJSONStructure"
+
+export const userRoutes = (app: Router) => {
+  // User Profile
+  app.get(
+    "/",
+    authCheck,
+    wrap,
+    async (req: Request, res: Response) => {
+      await Pager.render(res, req, TEMPLATE.USER, {})
+    }
+  )
+
+  // External Viewing Of Other User Profiles (Admin Only)
+  app.get(
+    "/:userID",
+    authCheck,
+    adminCheck,
+    wrap,
+    async (req: Request, res: Response) => {
+    const allUsers = parseAuthFile()
+    const User = allUsers.find((user) => user.username === req.params.userID)
+    if (!User) {
+      // TODO ADD USER NOT FOUND PAGE FOR THIS ERROR INSTEAD OF SENDING A 404
+      return Pager.render(res, req, TEMPLATE.ERRORS[404])
+    }
+      return Pager.render(res, req, TEMPLATE.USER, {
+        params: req.params,
+      })
+    }
+  )
+}
diff --git a/src/typings/ASSTypes.d.ts b/src/typings/ASSTypes.d.ts
new file mode 100644
index 0000000..91c6ac7
--- /dev/null
+++ b/src/typings/ASSTypes.d.ts
@@ -0,0 +1,18 @@
+export interface ASSUser {
+    username: string
+    password: string
+    count: number
+}
+
+export interface ASSItem {
+    id: string
+    deleteId: string
+    type: Array<string>
+    thumbnailName: string
+    originalName: string
+    fileExtension: string
+    fileLocation: string
+    timestamp: number
+    size: number
+    owner: string
+}
\ No newline at end of file
diff --git a/src/typings/Pager.d.ts b/src/typings/Pager.d.ts
new file mode 100644
index 0000000..193c8d5
--- /dev/null
+++ b/src/typings/Pager.d.ts
@@ -0,0 +1,5 @@
+export interface RenderOptions {
+  pageName?: string
+  params?: any
+  message?: any
+}
diff --git a/src/typings/express-ext.d.ts b/src/typings/express-ext.d.ts
new file mode 100644
index 0000000..394e81e
--- /dev/null
+++ b/src/typings/express-ext.d.ts
@@ -0,0 +1,8 @@
+import { Request } from "express"
+
+export interface IExtendedRequest extends Request {
+  user?: {
+    username?: string
+    password?: string
+  }
+}
diff --git a/src/typings/passport-ext.d.ts b/src/typings/passport-ext.d.ts
new file mode 100644
index 0000000..fc8a47b
--- /dev/null
+++ b/src/typings/passport-ext.d.ts
@@ -0,0 +1,12 @@
+type User = {
+  username: string
+  password: string
+}
+
+declare namespace Express {
+  export interface Request {
+    User: User
+    path: string
+    params?: any
+  }
+}
diff --git a/src/utils/assJSONStructure.ts b/src/utils/assJSONStructure.ts
new file mode 100644
index 0000000..322fc23
--- /dev/null
+++ b/src/utils/assJSONStructure.ts
@@ -0,0 +1,60 @@
+import { DICK_SUBMODULE, ASSLOCATION } from "../CONSTANTS"
+import fs from "fs"
+import path from "path"
+import { ASSItem } from "typings/ASSTypes"
+    
+    let DATA_FILE_PATH = path.resolve(`${ASSLOCATION}/data.json`)
+    let AUTH_FILE_PATH = path.resolve(`${ASSLOCATION}/auth.json`)
+    if (DICK_SUBMODULE !== false) {
+      DATA_FILE_PATH = path.resolve(`data.json`)
+      AUTH_FILE_PATH = path.resolve(`auth.json`)
+    }
+
+    export const parseDataFile = () => {
+      const rawDataJson = JSON.parse(fs.readFileSync(DATA_FILE_PATH).toString())
+      console.log(DATA_FILE_PATH)
+      // Parsed users, raw file stores the password as the key in the json file
+      const allDataIDs = Object.keys(rawDataJson)
+      
+      // Create a new object to contain the important information we use
+      const allData: any[] | Array<ASSItem> = []
+      for (const id of allDataIDs) {
+        const fileType = Object.keys(rawDataJson[id].is).filter((type: any) => rawDataJson[id].is[type])
+        allData.push({
+      id,
+      deleteId: rawDataJson[id].deleteId,
+      type: fileType,
+      thumbnailName: rawDataJson[id].thumbnail,
+      originalName: rawDataJson[id].originalname,
+      fileExtension: rawDataJson[id].ext,
+      fileLocation: rawDataJson[id].path,
+      timestamp: rawDataJson[id].timestamp,
+      size: rawDataJson[id].size,
+      owner: rawDataJson[id].token
+        })
+      }
+
+      return allData
+    }
+
+export const parseAuthFile = () => {
+  const rawAuthJson = JSON.parse(fs.readFileSync(AUTH_FILE_PATH).toString())
+
+  const unparsedAuthUsers = rawAuthJson.users
+
+  // Parsed users, raw file stores the password as the key in the json file
+  const Allpasswords = Object.keys(unparsedAuthUsers)
+
+  // Create a new object to contain login information in a more standard
+  // Way, a list with multiple objects containing the keys "username" and "password"
+  const allUsers = []
+  for (const password of Allpasswords) {
+    allUsers.push({
+      username: unparsedAuthUsers[password].username,
+      password,
+      count: unparsedAuthUsers[password].count
+    })
+  }
+
+  return allUsers
+}
\ No newline at end of file
diff --git a/src/utils/passport.ts b/src/utils/passport.ts
new file mode 100644
index 0000000..0714416
--- /dev/null
+++ b/src/utils/passport.ts
@@ -0,0 +1,30 @@
+import passport from "passport"
+import { Strategy } from "passport-local"
+import { parseAuthFile } from "./assJSONStructure"
+
+passport.use(
+  new Strategy(async (username: string, password: string, done: any) => {
+    const allUsers = parseAuthFile()
+
+    // Check if username exists
+    const User = allUsers.find((user) => user.username === username)
+    if (!User) return done(null, false, { message: 'Username does not exist!' })
+
+    // Compare bcrypt password hash to the supplied password
+    // ! UNCOMMENT THIS WHEN BCRYPT IS ENABLED LATER ON FOR PASSWORD HASHING TO WORK CORRECTLY
+    // const isPassCorrect = bcrypt.compareSync(password, user.passwordHash)
+    const isPassCorrect = password == User.password ? true : false
+
+    // If password is incorrent return a null user object to the auth callback
+    if (!isPassCorrect) return done(null, false, { message: 'Password is incorrect!' })
+
+    // If password is correct return the entire user object
+    return done(null, User)
+  })
+)
+
+// Deserializing and serializing users without any additional logic.
+passport.serializeUser((user: User, done) => done(null, user))
+passport.deserializeUser((obj, done) => done(null, obj))
+
+module.exports = { passport }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
new file mode 100644
index 0000000..9584cbd
--- /dev/null
+++ b/src/utils/utils.ts
@@ -0,0 +1,83 @@
+import { Log } from "@callmekory/logger"
+import { STAFF_IDS } from "../CONSTANTS"
+import { Response, NextFunction } from "express"
+import { join, normalize } from "path"
+import { IExtendedRequest } from "../typings/express-ext"
+/**
+ * Generate the appropriate pathing for the a template to be rendered
+ */
+export const templatePathBuilder = (templatePath: string) => {
+  const templateDir = normalize(join(__dirname, "..", "..", "views"))
+
+  return normalize(join(templateDir, "templates", templatePath))
+}
+
+/**
+ * Wraps the express route in a function that passes the
+ * `next` method from the route to the promise's catch
+ * statement which allows the middleware to catch the
+ * exception.
+ */
+export const wrap = (req: IExtendedRequest, res: Response, next: NextFunction) => {
+  if (req.user) {
+    Log.info(`${req.user.username} navigated to page ${req.path}`)
+  }
+
+  return next()
+}
+
+// Express middleware to check if username/password match one of the users
+// in auth.json
+export const authCheck = (req: IExtendedRequest, res: Response, next: NextFunction) => {
+  if (!req.user) {
+    Log.info(`A user navigated to page ${req.path} and is not logged in, redirecting to login page`)
+    req.flash('error_message', 'Please log in to access the requested page')
+    res.redirect('/login')
+  } else next()
+}
+
+// Express middleware to check if username trying to access the page matches the users
+// in CONSTANTS
+export const adminCheck = (req: IExtendedRequest, res: Response, next: NextFunction) => {
+  if ((STAFF_IDS.indexOf(req.user.username) > -1) == false) {
+    Log.info(`${req.user.username} navigated to page ${req.path} and is not an admin, redirecting to users dashboard`)
+    res.redirect('/')
+  } else next()
+}
+
+/**
+ *
+ * @param obj Object to be checked if empty
+ */
+export const isObjectEmpty = (obj: object) => {
+  for (const key in obj) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (obj.hasOwnProperty(key)) return false
+  }
+  return true
+}
+
+/**
+ *
+ * @param kb Number value of the size to be formatted
+ * @param decimals The amount of decimals you wish to add to the converted value
+ */
+export const formatSize = (kb: number, decimals = 2) => {
+  if (kb === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(kb) / Math.log(k));
+
+  return parseFloat((kb / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+/**
+ *
+ * @param unixTimestamp Unix timestamp you wish to convert to a Date object
+ */
+ export const convertTimestamp = (unixTimestamp: number) => { 
+  return new Date(unixTimestamp)
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..da57935
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,55 @@
+const defaultTheme = require('tailwindcss/defaultTheme')
+const colors = require('tailwindcss/colors')
+
+module.exports = {
+  darkMode: 'class',
+  content: [
+  './**/*.ejs',
+  './src/public/**/*.js'
+],
+  theme: {
+    extend: {
+      colors: {
+        darktheme: {
+          primary: '#1b253b',
+          secondary: '#232d45',
+          secondaryHover: '#222f4d',
+          tertiary: '#28334e',
+          tertiaryHover: '#2d3c5d'
+        },
+        darkthemeText: {
+          primary: colors.white,
+          secondary: colors.slate[400],
+          accentPrimary: colors.purple[400],
+          accentSecondary: colors.purple[800]
+        },
+        lighttheme: {
+          primary: '#2b910e',
+          secondary: '#f1f5f9',
+          secondaryHover: '#294ab3',
+          tertiary: colors.white,
+          tertiaryHover: '#eef1f6'
+        },
+        lightthemeText: {
+          primary: colors.slate[800],
+          secondary: colors.slate[400],
+          accentPrimary: colors.purple[600],
+          accentSecondary: colors.purple[800]
+        }
+      },
+      maxHeight: {
+        '0': '0',
+        xl: '36rem',
+      },
+      fontFamily: {
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
+      },
+      borderRadius: {
+        'full': '2.5rem',
+      }
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+  ]
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a3a365c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+      "module": "commonjs",
+      "lib": ["esnext", "dom"],
+      "target": "esnext",
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "moduleResolution": "node",
+      "outDir": "dist",
+      "baseUrl": "src",
+      "typeRoots": [
+        "node_modules/@types"
+    ]
+  },
+  "exclude": ["node_modules"],
+  "include": [
+      "src/**/*.ts"
+  ]
+}
diff --git a/views/pages/admin/main.ejs b/views/pages/admin/main.ejs
new file mode 100644
index 0000000..dfb45c4
--- /dev/null
+++ b/views/pages/admin/main.ejs
@@ -0,0 +1,2 @@
+<p class="text-orange-700 dark:text-orange-400">I already said this page was TBA, what more do you want from me? To
+    actually code it? 😜 </p>
\ No newline at end of file
diff --git a/views/pages/public/login.ejs b/views/pages/public/login.ejs
new file mode 100644
index 0000000..27186ab
--- /dev/null
+++ b/views/pages/public/login.ejs
@@ -0,0 +1,86 @@
+<div class="bg-secondary max-h-1/2 max-w-md mx-auto overflow-hidden rounded-lg shadow-xl">
+  <div class="flex flex-col items-center justify-center overflow-y-auto md:flex-row">
+    <div class="flex items-center justify-center p-6 sm:p-12">
+      <div class="w-full">
+        <h3 class="text-gray-700 dark:text-gray-400 font-bold text-2xl text-center">DICK</h3>
+        <p class="text-purple-400 text-xs pt-2 pb-5 text-center">Sign in to easily manage your nudes.</p>
+
+
+        <% if(success_alert_message != ''){ %>
+          <div class="alert alert-success alert-dismissible fade show" role="alert">
+            <%= success_alert_message %>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+      <% } %>
+      
+      <% if(error_message != ''){ %>
+          <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            <%= error_message %>
+            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+      <% } %>
+
+        <form class="flex flex-col" method="post" action="/auth/login">
+          <label class="block text-sm">
+            <span class="text-gray-700 dark:text-gray-400">Username</span>
+            <input
+              class="form-input block w-full mt-1 rounded text-sm  dark:text-gray-400 dark:border-gray-600 dark:bg-gray-700 transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-purple-600 focus:text-purple-400"
+              placeholder="Imposter" name="username" type="text" />
+          </label>
+          <label class="block mt-4 text-sm">
+            <span class="text-gray-700 dark:text-gray-400">Secret Key</span>
+            <input
+              class="form-input block w-full mt-1 rounded text-sm  dark:text-gray-400 dark:border-gray-600 dark:bg-gray-700 transition duration-500 focus:border-transparent border-transparent focus:ring-0 focus:border-purple-600 focus:text-purple-400"
+              placeholder="***************" name="password" type="password" />
+          </label>
+
+          <button
+            class="block w-full px-4 py-2 mt-4 text-sm font-medium leading-5 text-center text-color-primary transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple"
+            type="submit">
+            Sign In
+          </button>
+        </form>
+        <!-- Add this in when we get system settings that can enable/disable registration
+          <p class="mt-4 text-center">
+            <a
+              class="text-sm font-medium text-purple-600 dark:text-purple-400 hover:underline"
+              href="3"
+            >
+              Create account
+            </a>
+          </p>
+         -->
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="bg-secondary h-1/2 max-w-md mt-5 mx-auto rounded-lg shadow-xl">
+  <div class="flex justify-around p-3">
+    <div class="text-center">
+      <i data-lucide="files" class="text-purple-400 mx-auto"></i>
+      <p class="text-gray-700 dark:text-gray-400">Total Files Saved </p>
+      <p class="text-gray-700 dark:text-gray-400">
+        <%= totalData %>
+      </p>
+    </div>
+    <div class="text-center px-5">
+      <i data-lucide="hard-drive" class="text-purple-400 mx-auto"></i>
+      <p class="text-gray-700 dark:text-gray-400">Total Space Used </p>
+      <p class="text-gray-700 dark:text-gray-400">
+        <%= totalSize %>
+      </p>
+    </div>
+    <div class="text-center">
+      <i data-lucide="users" class="text-purple-400 mx-auto"></i>
+      <p class="text-gray-700 dark:text-gray-400">Total Users </p>
+      <p class="text-gray-700 dark:text-gray-400">
+        <%= totalUsers %>
+      </p>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/views/pages/user/main.ejs b/views/pages/user/main.ejs
new file mode 100644
index 0000000..e65da33
--- /dev/null
+++ b/views/pages/user/main.ejs
@@ -0,0 +1,153 @@
+<!-- Content Title -->
+<span class="text-lg font-semibold text-color-secondary md:text-xl lg:text-xl">
+    Your Profile
+</span>
+<!-- End Content Title -->
+
+<div class="bg-tertiary mt-6 h-auto w-full rounded-lg">
+    <!-- Content Profile -->
+    <div
+        class="flex w-full flex-row flex-wrap items-center space-x-3 border-b border-purple-400/25 py-3 px-6 md:space-x-6 md:px-5 md:py-5 lg:space-x-6 lg:px-5 lg:py-5">
+        
+        <div class="flex flex-1 px-5 items-center justify-center lg:justify-start pb-5 xl:pb-0">
+            <div class="flex-none lg:custom-size-profile md:h-40 md:w-40 sm:h-32 sm:w-32 h-20 w-20 relative">
+                <img class="rounded-full object-cover object-center"
+                src="/images/profile.png" alt="Profile" />
+            </div>
+            <div class="ml-5">
+                <div class="truncate text-base text-color-primary sm:text-xl md:text-2xl lg:text-2xl">
+                    <%= user.username %>
+                </div>
+                <div class="text-xs text-color-secondary sm:text-base md:text-base lg:text-base">
+                    <% if(hasRole){ %> admin <% } else { %> user <% } %>
+                </div>
+            </div>
+        </div>
+
+        <!-- Profile Stat Cards -->
+        <div class="flex flex-wrap lg:flex-row gap-6 items-center justify-center pb-5 -mx-5">
+
+            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
+                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                    <div class="flex">
+                        <i data-lucide="files" class="text-purple-400 mr-2"></i>
+                        <p class="ml-auto text-slate-500 text-sm">
+                            <%= totalSize %>
+                        </p>
+                    </div>
+                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
+                        <%= usersDataObj.data.length %>
+                    </div> 
+                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
+                        Total Files
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-6 sm:col-span-3 xl:col-span-1 w-px h-40 border border-r border-purple-400 border-dashed mx-4 xl:mx-6 hidden md:table-cell" ></div>
+
+            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
+                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover ">
+                    <div class="flex">
+                        <i data-lucide="image" class="text-blue-400 mr-2"></i>
+                        <p class="ml-auto text-slate-500 text-sm">
+                            <%= usersDataObj.totalImageSize %>
+                        </p>
+                    </div>
+                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
+                        <%= usersDataObj.allImages.length %>
+                    </div>
+                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
+                        <% if(usersDataObj.allImages.length==1){ %> Image <% } else { %> Images <% } %>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
+                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                    <div class="flex">
+                        <i data-lucide="video" class="text-yellow-400 mr-2"></i>
+                        <p class="ml-auto text-slate-500 text-sm">
+                            <%= usersDataObj.totalVideosSize %>
+                        </p>
+                    </div>
+                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
+                        <%= usersDataObj.allVideos.length %>
+                    </div>
+                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
+                        <% if(usersDataObj.allVideos.length==1){ %> Video <% } else { %> Videos <% } %>
+                    </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 xl:col-span-2">
+                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                    <div class="flex">
+                        <i data-lucide="file" class="text-orange-400 mr-2"></i>
+                        <p class="ml-auto text-slate-500 text-sm">
+                            <%= usersDataObj.totalFilesSize %>
+                        </p>
+                    </div>
+                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
+                        <%= usersDataObj.allFiles.length %>
+                    </div>
+                    <div class="sm:text-sm md:text-base text-base text-slate-500 mt-1">
+                        <% if(usersDataObj.allFiles.length==1){ %> File <% } else { %> Files <% } %>
+                     </div>
+                </div>
+            </div>
+
+            <div class="col-span-12 sm:col-span-6 xl:col-span-2 min-w-30">
+                <div class="bg-secondary shadow-xl rounded-lg p-5 hover:bg-secondary-hover">
+                    <div class="flex">
+                        <i data-lucide="ghost" class="text-green-400 mr-2"></i>
+                        <p class="ml-auto text-slate-500 text-sm">
+                            <%= usersDataObj.totalOthersSize %>
+                        </p>
+                    </div>
+                    <div class="text-color-primary sm:text-lg md:text-3xl font-medium leading-8 mt-6">
+                        <%= usersDataObj.allOthers.length %>
+                    </div>
+                    <div class="sm:text-sm md:text-base text-slate-500 mt-1">
+                        <% if(usersDataObj.allOthers.length==1){ %> Other <% } else { %> Others <% } %>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        <!-- EndProfile Stat Cards -->
+
+    </div>
+    <!-- EndContent Profile -->
+
+    <!-- Content Profile Tabs -->
+    <div
+        class="flex flex-col flex-wrap items-center space-y-4 px-5 pt-5 md:flex-row md:space-y-0 lg:flex-row lg:space-y-0">
+        <button data-id="file-manager"
+            class="tabsProfile inline-flex w-full items-center space-x-2 border-b-2 border-purple-400 px-6 pb-5 text-sm font-semibold text-color-primary md:w-auto md:text-base lg:w-auto lg:text-base">
+            <i data-lucide="Files" class="text-color-secondary"></i>
+            <span class="truncate"> File Manager </span>
+        </button>
+
+        <button data-id="config-gen"
+            class="tabsProfile inline-flex w-full items-center space-x-2 px-6 pb-5 text-sm text-color-primary md:w-auto md:text-base lg:w-auto lg:text-base">
+            <i data-lucide="Settings" class="text-color-secondary"></i>
+            <span> Config Gen </span>
+            <span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">
+                TBA
+            </span>
+        </button>
+    </div>
+    <!-- EndContent Profile Tabs -->
+</div>
+
+<div class="mt-10 flex flex-col flex-wrap space-x-0 space-y-6 md:flex-row md:flex-nowrap md:space-x-6 md:space-y-0 lg:flex-row lg:flex-nowrap lg:space-x-6 lg:space-y-0">
+    <div class="tabsProfileContent">
+        <%- include("./tabs/filemanager") %>
+    </div>
+    <div class="tabsProfileContent hidden">
+        <%- include("./tabs/configgen") %>
+    </div>
+</div>
+
+
diff --git a/views/pages/user/tabs/configgen.ejs b/views/pages/user/tabs/configgen.ejs
new file mode 100644
index 0000000..50ed859
--- /dev/null
+++ b/views/pages/user/tabs/configgen.ejs
@@ -0,0 +1,3 @@
+<div class="flex-1 basis-full space-y-3 md:basis-2/3 lg:basis-3/4">
+    <p class="text-orange-700 dark:text-orange-400">This tab is coming to a DICK near you soon </p>
+</div>
\ No newline at end of file
diff --git a/views/pages/user/tabs/filemanager.ejs b/views/pages/user/tabs/filemanager.ejs
new file mode 100644
index 0000000..3d5f849
--- /dev/null
+++ b/views/pages/user/tabs/filemanager.ejs
@@ -0,0 +1,135 @@
+<!--This is where we will place the type filters when we are ready for that-->
+
+<div class="flex-1 basis-full space-y-3 md:basis-2/3 lg:basis-3/4">
+
+    <!--This is where we will place the upper menu when we are ready for that-->
+
+    <!-- Files -->
+    <div class="flex flex-row flex-wrap justify-center lg:justify-start gap-3 pt-3 lg:gap-4">
+        <% if (usersDataObj.data.length == 0) { %>
+            <p class="text-orange-700 dark:text-orange-400 pl-5">Looks like you have no files!<br/>
+                Upload some to see some action here.</p>
+        <% } else { %>
+            <% usersDataObj.data.forEach(item => { %>
+
+                <div class="bg-tertiary h-auto w-36 cursor-pointer rounded-md p-3 transition duration-300 ease-in-out hover:scale-105 hover:shadow-xl sm:w-44 md:w-[139px] lg:w-40">
+                    <!-- File Header -->
+                    <div class="flex flex-row flex-nowrap items-center justify-between">
+                        <!--We will add this and style it when we add multi-delete, for now eggplant
+                        <input class="accent-blue-700 rounded-md h-3 w-4 md:h-4 md:w-5 lg:h-4 lg:w-4" type="checkbox" />
+                        -->
+                        <span>🍆</span>
+
+                        <div class="relative">
+                            <!-- File Dropdown Button -->
+                            <button class="dropdownFileBtn relative text-gray-400">
+                                <svg class="relative h-3 w-3 md:h-4 md:w-4 lg:h-4 lg:w-4" xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                    stroke-linecap="round" stroke-linejoin="round">
+                                    <circle class="relative" cx="12" cy="12" r="1"></circle>
+                                    <circle class="relative" cx="12" cy="5" r="1"></circle>
+                                    <circle class="relative" cx="12" cy="19" r="1"></circle>
+                                </svg>
+                            </button>
+                            <!-- End File Dropdown Button -->
+
+                            <!-- File Dropdown -->
+                            <div class="dropdownFile duration-250 bg-tertiary invisible absolute top-6 right-0 z-10 h-auto w-36 translate-y-6 rounded-lg opacity-0 shadow-lg transition ease-linear">
+                                <!-- File Dropdown Menu-->
+                                <div class="grid grid-cols-1 px-3 py-2 space-y-2 shadow-xl">
+                                    <button onClick="copyLink<%= `('${item.id}')` %>" data-tooltip-target=<%= `${item.id}-copy` %> data-tooltip-trigger="click" class="tooltip dropdown-item w-full rounded-md p-2 text-color-primary hover:bg-tertiary-hover"> 
+                                        <i data-lucide="link" class="w-4 h-4 mr-2 inline"></i> 
+                                        Copy Link 
+                                    </button>
+                                    <div id=<%= `${item.id}-copy` %> role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                                        Link copied to clipboard!
+                                        <div class="tooltip-arrow" data-popper-arrow></div>
+                                    </div>
+                                    
+                                    <button onClick="deleteItem<%= `('${item.id}', '${item.deleteId}')` %>" data-tooltip-target=<%= `${item.id}-delete` %> data-tooltip-trigger="click" 
+                                        class="tooltip dropdown-item w-full rounded-md p-2 text-color-primary hover:bg-tertiary-hover"> 
+                                        <i data-lucide="trash" class="w-4 h-4 mr-2 inline"></i>
+                                        Delete 
+                                    </button>
+                                    <div id=<%= `${item.id}-delete` %> role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
+                                        Item is being deleted, page will refresh when finished.
+                                        <div class="tooltip-arrow" data-popper-arrow></div>
+                                    </div>
+                                </div>
+                            <!-- End File Dropdown Menu-->
+                            </div>
+                        <!-- File Dropdown -->
+                        </div>
+                    </div>
+                    <!-- End File Header -->
+
+                    <div class="space-y-3">
+
+                        <% if (item.type == 'image') { %>
+                            <a target="_blank" href=<%= assSecure ? `https://${assDomain}/${item.id}` : `http://${assDomain}/${item.id}` %>>
+                                <div class="mt-2 flex flex-wrap items-center justify-center">
+                                    <img class="h-20 w-auto rounded-md object-cover object-center md:h-24 lg:h-24"
+                                        src=<%= assSecure ? `https://${assDomain}/${item.id}/direct` : `http://${assDomain}/${item.id}/direct`%> alt=<%= item.originalName %> />
+                                </div>
+                            </a>
+                        <% } else { %>
+                            <a target="_blank" href=<%= assSecure ? `https://${assDomain}/${item.id}` : `http://${assDomain}/${item.id}` %>>
+                                <div class="relatiive mt-2 flex flex-wrap items-center justify-center">
+                                    <svg class="relative h-20 w-auto fill-gray-400 md:h-24 lg:h-24"
+                                        xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                        stroke="currentColor" stroke-width="0" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z"> </path>
+                                        <polyline points="14 2 14 8 20 8"></polyline>
+                                    </svg>
+                                    <div class="absolute text-sm font-medium text-color-primary">
+                                        <%= item.fileExtension %>
+                                    </div>
+                                </div>
+                            </a>
+                        <% } %>
+
+                        <div class="text-center">
+                            <a target="_blank" href=<%= assSecure ? `https://${assDomain}/${item.id}` : `http://${assDomain}/${item.id}` %> class="text-base font-medium text-color-primary md:text-lg lg:text-lg">
+                                <p class="truncate hover:overflow-visible"><%= item.originalName %></p>
+                            </a>
+                            <div class="text-xs text-gray-400 md:text-sm lg:text-sm">
+                                <%= item.timestamp.toISOString().split('T')[0] %>
+                            </div>
+                            <div class="text-xs text-gray-400">
+                                <% const k = 1024 %>
+                                <% const dm = 2 %>
+                                <% const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] %>
+                                <% const i = Math.floor(Math.log(item.size) / Math.log(k)) %>
+                                <% const convertedSize = parseFloat((item.size / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; item.size %>
+                                <%= convertedSize %>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+            <% }) %>
+        <% } %>
+    </div>
+    <!-- End Files -->
+</div>
+
+<!--This is where we will place the pagination when we are ready for that-->
+
+<iframe src="" id="HiddenFrame" class="hidden w-0 h-0"></iframe>
+<script>
+    function copyLink(itemId) {
+        const itemLink = <%= assSecure  %> ? `https://<%= assDomain  %>/${itemId}` : `http://<%= assDomain  %>/${itemId}`
+        navigator.clipboard.writeText(itemLink)
+    }
+    
+    function deleteItem(itemId, deleteId) {
+        const itemDeleteLink = <%= assSecure  %> ? `https://<%= assDomain  %>/${itemId}/delete/${deleteId}` : `http://<%= assDomain  %>/${itemId}/delete/${deleteId}`
+        document.getElementById("HiddenFrame").src=itemDeleteLink
+        // After setting our invisible iframe to the delete url, we make sure to give ass time to deletr the file then reset iframe and reload page
+        setTimeout(function() {
+            document.getElementById("HiddenFrame").src=''
+            document.location.reload()
+        }, 250);
+
+    }
+</script>
\ No newline at end of file
diff --git a/views/pages/user/tabs/filemanager/pagination.ejs b/views/pages/user/tabs/filemanager/pagination.ejs
new file mode 100644
index 0000000..d09d9bc
--- /dev/null
+++ b/views/pages/user/tabs/filemanager/pagination.ejs
@@ -0,0 +1,40 @@
+<div class="mt-8 flex flex-nowrap justify-end">
+    <div class="basis-full px-0 md:basis-2/3 md:px-12 lg:basis-3/4 lg:px-12">
+        <div
+            class="flex flex-row flex-wrap items-center justify-center space-x-3 text-sm text-color-primary md:justify-start md:text-base lg:justify-start lg:text-base">
+            <button>
+                <svg class="h-auto w-4 md:w-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="11 17 6 12 11 7"></polyline>
+                    <polyline points="18 17 13 12 18 7"></polyline>
+                </svg>
+            </button>
+
+            <button>
+                <svg class="h-auto w-4 md:w-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="15 18 9 12 15 6"></polyline>
+                </svg>
+            </button>
+
+            <button class="bg-tertiary rounded-mdpy-2 px-4">1</button>
+            <button class="py-2 px-4">2</button>
+            <button class="py-2 px-4">3</button>
+
+            <button>
+                <svg class="h-auto w-4 md:w-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="9 18 15 12 9 6"></polyline>
+                </svg>
+            </button>
+
+            <button>
+                <svg class="h-auto w-4 md:w-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="13 17 18 12 13 7"></polyline>
+                    <polyline points="6 17 11 12 6 7"></polyline>
+                </svg>
+            </button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/pages/user/tabs/filemanager/typefilter.ejs b/views/pages/user/tabs/filemanager/typefilter.ejs
new file mode 100644
index 0000000..c53c053
--- /dev/null
+++ b/views/pages/user/tabs/filemanager/typefilter.ejs
@@ -0,0 +1,121 @@
+    <!-- Content Sidebar -->
+    <div class="bg-tertiary h-max flex-none basis-full rounded-lg p-6 md:basis-1/3 lg:basis-1/4">
+        <div class="grid grid-cols-1 gap-y-6 divide-y divide-gray-300/25 text-sm md:text-base lg:text-base">
+            <!-- Content Sidebar List 1 -->
+            <div class="last:pt-6">
+                <ul class="list-none space-y-5">
+                    <li>
+                        <button
+                            class="inline-flex w-full items-center space-x-3 rounded-md bg-blue-700 px-3 py-1.5 font-semibold text-color-primary">
+                            <svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                                <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                                <polyline points="21 15 16 10 5 21"></polyline>
+                            </svg>
+                            <span class="truncate">Image</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
+                            <svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <polygon points="23 7 16 12 23 17 23 7"></polygon>
+                                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
+                            </svg>
+                            <span class="truncate">Video</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
+                            <svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z">
+                                </path>
+                                <polyline points="14 2 14 8 20 8"></polyline>
+                            </svg>
+                            <span class="truncate">Documents</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
+                            <svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
+                                <circle cx="9" cy="7" r="4"></circle>
+                                <path d="M23 21v-2a4 4 0 00-3-3.87"></path>
+                                <path d="M16 3.13a4 4 0 010 7.75"></path>
+                            </svg>
+                            <span class="truncate">Shared</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
+                            <svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <polyline points="3 6 5 6 21 6"></polyline>
+                                <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2">
+                                </path>
+                            </svg>
+                            <span class="truncate">Trash</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            <!-- End Content Sidebar List 1 -->
+
+            <!-- Content Sidebar List 2 -->
+            <div class="last:pt-6">
+                <ul class="list-none space-y-5">
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
+                            <div class="h-2 w-2 flex-none rounded-full bg-orange-500"></div>
+                            <span class="truncate">Custom</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
+                            <div class="h-2 w-2 flex-none rounded-full bg-green-500"></div>
+                            <span class="truncate">Important Meeting</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
+                            <div class="h-2 w-2 flex-none rounded-full bg-yellow-500"></div>
+                            <span class="truncate">Work</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
+                            <div class="h-2 w-2 flex-none rounded-full bg-orange-500"></div>
+                            <span class="truncate">Design</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
+                            <div class="h-2 w-2 flex-none rounded-full bg-red-500"></div>
+                            <span class="truncate">Next Week</span>
+                        </button>
+                    </li>
+                    <li>
+                        <button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
+                            <svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
+                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round">
+                                <line x1="12" y1="5" x2="12" y2="19"></line>
+                                <line x1="5" y1="12" x2="19" y2="12"></line>
+                            </svg>
+                            <span class="truncate">Add New Label</span>
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            <!-- Content Sidebar List 2 -->
+        </div>
+    </div>
+    <!-- End Content Sidebar -->
\ No newline at end of file
diff --git a/views/pages/user/tabs/filemanager/uppermenu.ejs b/views/pages/user/tabs/filemanager/uppermenu.ejs
new file mode 100644
index 0000000..f20aeb3
--- /dev/null
+++ b/views/pages/user/tabs/filemanager/uppermenu.ejs
@@ -0,0 +1,75 @@
+<div class="flex flex-col-reverse flex-wrap justify-between lg:flex-row lg:flex-nowrap">
+    <div class="-mt-0 lg:-mt-5">
+        <!-- Content Search Bar -->
+        <form action="#" class="relative mt-3 h-auto w-auto lg:mt-0">
+            <input
+                class="bg-tertiary relative z-10 w-full rounded-md px-12 py-2 text-color-primary shadow-lg placeholder:text-gray-400 focus:border focus:border-gray-300/25 focus:outline-none md:w-full lg:w-auto"
+                value="" placeholder="Search Files" />
+            <div class="absolute inset-0 flex flex-row flex-nowrap items-center justify-between px-4">
+                <svg class="z-20 flex-none text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20"
+                    height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="11" cy="11" r="8"></circle>
+                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+                <svg class="dropdownSearchBtn z-20 flex-none cursor-pointer text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+            </div>
+        </form>
+        <!-- End Content Search Bar -->
+
+        <!-- Content Search Bar Dropdown -->
+        <form action=""
+            class="dropdownSearch duration-250 bg-tertiary invisible absolute z-10 mt-2 h-auto w-10/12 translate-y-6 rounded-lg p-6 opacity-0 shadow-lg transition ease-linear md:w-auto lg:w-auto">
+            <!-- Content Search Bar Dropdown Input -->
+            <div class="grid grid-cols-1 gap-5 text-sm md:grid-cols-1 md:text-base lg:grid-cols-2 lg:text-base">
+                <div>
+                    <label class="mb-2 block text-color-primary">File Name (Fuzzy Search)</label>
+                    <input
+                        class="bg-primary block w-full rounded-md py-2 px-2 text-color-primary placeholder:text-gray-400 focus:outline-none focus:ring focus:ring-gray-300/20"
+                        value="" placeholder="nudes" />
+                </div>
+                <div>
+                    <label class="mb-2 block text-color-primary">Extension</label>
+                    <input
+                        class="bg-primary block w-full rounded-md py-2 px-2 text-color-primary placeholder:text-gray-400 focus:outline-none focus:ring focus:ring-gray-300/20"
+                        value="" placeholder="png" />
+                </div>
+                <div>
+                    <label class="mb-2 block text-color-primary">Created At</label>
+                    <input
+                        class="bg-primary block w-full rounded-md py-2 px-2 text-color-primary placeholder:text-gray-400 focus:outline-none focus:ring focus:ring-gray-300/20"
+                        value="" placeholder="Make/get a date picker for this slot + extend it to full width" />
+                </div>
+            </div>
+            <!-- End Content Search Bar Dropdown Input -->
+
+            <!-- Content Search Bar Dropdown Button -->
+            <div
+                class="mt-6 flex items-center justify-end space-x-2 text-sm text-color-primary md:text-base lg:text-base">
+                <button class="rounded-md bg-blue-700 px-5 py-2 hover:bg-blue-600">
+                    Search
+                </button>
+            </div>
+            <!-- Content Search Bar Dropdown Button -->
+        </form>
+        <!-- Content Search Bar Dropdown -->
+    </div>
+
+    <div class="-mt-0 lg:-mt-5">
+        <div class="flex flex-row flex-nowrap items-center space-x-2">
+            <!-- Content Upload Form -->
+            <form action="">
+                <button id="openFile"
+                    class="rounded-md bg-blue-700 py-2 px-2.5 font-medium text-color-primary hover:bg-blue-600">
+                    Upload New File
+                </button>
+                <input id="showFile" type="File" class="hidden" />
+            </form>
+            <!-- End Content Upload Form -->
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/templates/errors/404.ejs b/views/templates/errors/404.ejs
new file mode 100644
index 0000000..200e16f
--- /dev/null
+++ b/views/templates/errors/404.ejs
@@ -0,0 +1,19 @@
+<%- include("../partials/head") %>
+
+<section class="bg-gray-50 dark:bg-gray-900">
+    <div class="flex flex-col items-center justify-center min-h-screen p-6">
+        <div class="flex-col lg:flex-row items-center justify-center h-screen text-center lg:text-left">
+            <div class="text-color-primary mt-10 lg:mt-0">
+                <div class="text-8xl font-medium">404</div>
+                <div class="text-xl lg:text-3xl font-medium mt-5">Oops. This page does not exist.</div>
+                <div class="text-lg mt-3">You may have mistyped the address or DICK seems to be malfunctioning</div>
+                <a href="/login" class="py-3 px-4 text-color-primary border-white dark:border-darkmode-400 dark:text-slate-200 mt-10">
+                    Back to Home
+                </a>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script src="/js/app.js"></script>
+<script src="/js/theme/theme-switcher.js"></script>
\ No newline at end of file
diff --git a/views/templates/partials/footer.ejs b/views/templates/partials/footer.ejs
new file mode 100644
index 0000000..bd4cf7c
--- /dev/null
+++ b/views/templates/partials/footer.ejs
@@ -0,0 +1,3 @@
+<script src="/js/app.js"></script>
+<script src="/js/components.js"></script>
+<script src="/js/theme/theme-switcher.js"></script>
\ No newline at end of file
diff --git a/views/templates/partials/head.ejs b/views/templates/partials/head.ejs
new file mode 100644
index 0000000..dd19058
--- /dev/null
+++ b/views/templates/partials/head.ejs
@@ -0,0 +1,25 @@
+<head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta name="description" content="The frontend for your backend" />
+      <meta name="keywords" content="your, keywords" />
+      <meta name="author" content="Facinorous-420" />
+  
+      <meta property="og:description" content="DICK, the frontend for your ASS" />
+      <meta property="og:url" content="https://github.com/facinorous-420/dick" />
+      <meta property="og:site_name" content="DICK (Directly Integrated Client for Keisters)" />
+      <meta property="og:image" content="/images/dick-logo.png" />
+  
+      <!--meta twitter-->
+      <meta name="twitter:card" content="summary" />
+      <meta property="twitter:image" content="/images/dick-logo.png" />
+      <meta property="twitter:title" content="DICK (Directly Integrated Client for Keisters)" />
+      <meta property="twitter:description" content="DICK, the frontend for your ASS" />
+      <!-- end meta twitter-->
+  
+      <title>DICK (Directly Intregrated Client for Keisters)</title>
+  
+      <link rel="stylesheet" href="/css/app.css">
+      <script src="/js/theme/theme-set.js"></script>
+      <link rel="icon" type="image/png" href="/images/dick-logo.png">
+</head>
diff --git a/views/templates/partials/nav.ejs b/views/templates/partials/nav.ejs
new file mode 100644
index 0000000..e51f031
--- /dev/null
+++ b/views/templates/partials/nav.ejs
@@ -0,0 +1,29 @@
+<nav class="bg-primary w-full flex-1 justify-center overflow-hidden">
+  <div class="mx-auto flex w-full flex-row flex-wrap items-center justify-center">
+
+      <div
+          class="bg-primary border-l-none border-r-none z-20 order-1 grow-0 basis-full shadow-2xl border-b border-gray-300/25 md:border-t lg:border-t py-4 md:order-1 md:basis-1/6 md:border-l md:border-r lg:order-1 lg:basis-1/6 lg:border-l lg:border-r">
+          <div class="flex flex-row justify-between">
+
+            <%- include("./nav/logo") %>
+
+              <!-- Navbar Hamburger Button -->
+              <button id="dropdownNavBtn" class="block pr-3 md:hidden md:pr-7 lg:hidden lg:pr-7">
+                  <svg class="text-color-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                      stroke-linecap="round" stroke-linejoin="round">
+                      <line x1="21" y1="6" x2="3" y2="6"></line>
+                      <line x1="21" y1="12" x2="9" y2="12"></line>
+                      <line x1="21" y1="18" x2="7" y2="18"></line>
+                  </svg>
+              </button>
+              <!-- End Navbar Hamburger Button -->
+              
+          </div>
+      </div>
+
+      <%- include("./nav/breadcrumb") %>
+      <%- include("./nav/profile") %>
+      <%- include("./nav/menu") %>
+  </div>
+</nav>
\ No newline at end of file
diff --git a/views/templates/partials/nav/breadcrumb.ejs b/views/templates/partials/nav/breadcrumb.ejs
new file mode 100644
index 0000000..b06ad35
--- /dev/null
+++ b/views/templates/partials/nav/breadcrumb.ejs
@@ -0,0 +1,16 @@
+<div
+    class="traMove order-3 w-full flex-1 basis-1/3 -translate-y-32 shadow-2xl border-b border-gray-300/25 md:border-t lg:border-t transition duration-300 sm:basis-1/2 md:order-2 md:flex-1 md:basis-2/3 md:-translate-y-0 lg:order-2 lg:flex-1 lg:basis-2/3 lg:-translate-y-0">
+    <div class="flex h-16 w-full flex-row flex-nowrap items-center space-x-2 pl-3 text-color-primary md:pl-7 lg:pl-7">
+        <a href="#" class="inine-block">🍆</a>
+
+        <svg class="inline-block text-gray-400" xmlns="http://www.w3.org/2000/svg" width="12" height="12"
+            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+            stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+
+        <% if(path == '/'){ %><div href="#" class="inline-block text-gray-300">Dashboard</div> <% } %>
+        <% if(path == '/admin'){ %><div href="#" class="inline-block text-gray-300">Admin Dashboard</div> <% } %>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/templates/partials/nav/logo.ejs b/views/templates/partials/nav/logo.ejs
new file mode 100644
index 0000000..268150a
--- /dev/null
+++ b/views/templates/partials/nav/logo.ejs
@@ -0,0 +1,4 @@
+<div class="flex h-0 pl-3 md:h-8 md:pl-7 lg:h-8 lg:pl-7">
+    <img alt="DICK" class="w-6" src="/images/dick-logo.png">
+    <span class="text-white ml-3 hidden text-lg font-medium md:block lg:block">DICK</span>
+</div>
\ No newline at end of file
diff --git a/views/templates/partials/nav/menu.ejs b/views/templates/partials/nav/menu.ejs
new file mode 100644
index 0000000..e189bb1
--- /dev/null
+++ b/views/templates/partials/nav/menu.ejs
@@ -0,0 +1,83 @@
+<div id="dropdownNav"
+    class="order-2 mt-0 w-full basis-full -translate-y-full border-b border-gray-300/25 transition duration-300 md:order-4 md:mt-12 md:max-w-2xl md:basis-full md:-translate-y-0 md:border-none lg:order-4 lg:mt-12 lg:max-w-6xl lg:basis-full lg:-translate-y-0 lg:border-none xl:max-w-full 2xl:max-w-full">
+    <div
+        class="mx-3 flex h-auto flex-col justify-start py-3 md:mx-3 md:flex-row md:py-0 lg:mx-10 lg:flex-row lg:py-0 xl:px-10 2xl:px-10">
+
+        <div class="group flex-none">
+            <a href="/"
+                class="<% if(path == '/') { %>bg-secondary <% } else { %> z-20 lg:group-hover:bg-secondary-hover <% } %>
+                relative inline-flex w-full items-center justify-start space-x-2 rounded-none px-6 pt-3 pb-3 text-color-primary md:w-auto md:justify-center md:rounded-t-2xl lg:w-auto lg:justify-center lg:rounded-t-2xl">
+                <!-- Navbar List Menu Icon -->
+                <i data-lucide="home" class="<% if(path == '/') { %> text-color-accent <% } else { %> text-color-secondary <% } %>"></i>
+                <!-- EndNavbar List Menu Icon -->
+                <div class="<% if(path == '/') { %> text-color-primary font-semibold <% } else { %> text-color-secondary <% } %>
+                        relative truncate ">Dashboard</div>
+                
+                <!-- Rounding To Tab Corner -->
+                <% if(path == '/') { %> 
+                <div
+                    class="bg-primary relative -bottom-0 -left-6 z-10 hidden h-4 w-4 rounded-br-full md:absolute md:block lg:absolute lg:block">
+                </div>
+                <div
+                    class="bg-secondary relative bottom-0 -left-6 hidden h-4 w-4 md:absolute md:block lg:absolute lg:block">
+                </div>
+
+                <% if(!hasRole) { %>
+                <div 
+                class="bg-secondary lg:block md:block hidden lg:absolute md:absolute relative z-10 custom-bg-main -bottom-0 -right-4 w-4 h-4">
+            </div>
+            <div 
+               class="bg-primary lg:block md:block hidden lg:absolute md:absolute relative z-10 custom-bg-body -bottom-0 -right-4 w-4 h-4 rounded-bl-full">
+            </div>
+            <% } %>
+
+                <% } %>
+                <!-- EndRounding To Tab Corner -->
+            </a>
+        </div>
+
+        <% if(hasRole){ %>
+            <!-- Use 'group' and 'group-hover:' for hovering the weird rounded too-->
+            <div class="group flex-none">
+                <a href="admin"
+                    class="<% if(path == '/admin') { %> bg-secondary <% } else { %> lg:group-hover:bg-secondary-hover <% } %>
+                    relative inline-flex w-full items-center justify-start space-x-2 rounded-none px-6 pt-3 pb-3 text-color-primary md:w-auto md:justify-center md:rounded-tr-2xl md:rounded-tl-2xl lg:w-auto lg:justify-center lg:rounded-tr-2xl lg:rounded-tl-2xl">
+                    <!-- Navbar List Menu Icon -->
+                    <i data-lucide="settings" class="<% if(path == '/admin') { %> text-color-accent <% } else { %> text-color-secondary <% } %>"></i>
+                    <!-- End Navbar List Menu Icon -->
+                    <div class="<% if(path == '/admin') { %> text-color-primary font-semibold <% } else { %> text-color-secondary <% } %> 
+                            relative truncate">
+                            Admin
+                            <span class="text-xs inline-block py-1 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-yellow-600 text-black rounded-full">
+                                TBA
+                            </span>
+                        </div>
+
+                    <!-- Rounding To Tab Corner -->
+                    <% if(path == '/admin') { %>  
+                    <div
+                        class="bg-primary relative -bottom-0 -left-6 z-10 hidden h-4 w-4 rounded-br-full md:absolute md:block lg:absolute lg:block">
+                    </div>
+                    <div
+                        class="bg-secondary relative bottom-0 -left-6 hidden h-4 w-4 md:absolute md:block lg:absolute lg:block">
+                    </div>
+                    <div 
+                        class="bg-secondary lg:block md:block hidden lg:absolute md:absolute relative z-10 custom-bg-main -bottom-0 -right-4 w-4 h-4">
+                    </div>
+                    <div 
+                       class="bg-primary lg:block md:block hidden lg:absolute md:absolute relative z-10 custom-bg-body -bottom-0 -right-4 w-4 h-4 rounded-bl-full">
+                    </div>
+                    <% } else { %> 
+                    <div
+                        class="lg:group-hover:bg-secondary-hover md:group-hover:bg-secondary-hover bg-primary relative -bottom-0 -left-2 z-10 hidden h-4 w-4 rounded-bl-full md:absolute md:block lg:absolute lg:block">
+                    </div>
+                    <div
+                        class="bg-secondary relative bottom-0 -left-2 hidden h-4 w-4 md:absolute md:block lg:absolute lg:block">
+                    </div>    
+                    <% } %>
+                    <!-- EndRounding To Tab Corner -->
+                </a>
+            </div>
+            <% } %>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/templates/partials/nav/profile.ejs b/views/templates/partials/nav/profile.ejs
new file mode 100644
index 0000000..d370b46
--- /dev/null
+++ b/views/templates/partials/nav/profile.ejs
@@ -0,0 +1,35 @@
+<div class="traMove order-4 flex-1 basis-1/3 -translate-y-32 shadow-2xl border-b border-gray-300/25 transition duration-300 sm:basis-1/2 md:order-3 md:basis-1/6 md:-translate-y-0 md:border-t md:border-r lg:border-r lg:order-3 lg:basis-1/6 lg:-translate-y-0 lg:border-t">
+    <div class="flex h-16 flex-row flex-nowrap items-center justify-end pr-3 md:pr-7 lg:pr-7">
+        <div class="flex-none">
+            <div class="flex flex-row flex-nowrap items-center space-x-6">
+                <!-- Theme Toggler -->
+                <button id="theme-toggle" data-tooltip-target="themeTogglerToolTip" type="button"
+                    class="relative text-gray-400 hover:bg-gray-800 dark:hover:bg-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
+                    <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+                    </svg>
+                    <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                            fill-rule="evenodd" clip-rule="evenodd"></path>
+                    </svg>
+                </button>
+                <div id="themeTogglerToolTip" role="tooltip"
+                    class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
+                    Toggle theme
+                    <div class="tooltip-arrow" data-popper-arrow></div>
+                </div>
+                <!-- End Theme Toggler -->
+
+                <!-- Navbar Profile Image -->
+                <div class="dropdownProfileBtn relative z-[100] cursor-pointer hover:scale-110">
+                    <img class="relative h-10 w-10 rounded-full object-cover object-center" src="./images/profile.png"
+                        alt="Profile" />
+                </div>
+                <!-- End Navbar Profile Image -->
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/templates/partials/nav/profile_dropdown.ejs b/views/templates/partials/nav/profile_dropdown.ejs
new file mode 100644
index 0000000..249d7b1
--- /dev/null
+++ b/views/templates/partials/nav/profile_dropdown.ejs
@@ -0,0 +1,36 @@
+<!-- Dropdown Navbar Profile -->
+<div class="dropdownProfile duration-250 bg-tertiary invisible absolute -top-2 right-3 h-auto w-52 translate-y-6 rounded-lg opacity-0 shadow-lg transition ease-linear md:-top-24 md:right-7 lg:-top-24 lg:right-7">
+    <div class="flex flex-col flex-wrap border-b border-gray-300/25 p-3">
+        <span class="w-44 flex-none truncate font-semibold text-color-primary">
+            <%= user.username %>
+        </span>
+        <div class="w-44 flex-none truncate text-xs text-gray-400">
+            <% if(hasRole){ %> admin <% } else { %> user <% } %>
+        </div>
+    </div>
+    <div class="grid grid-cols-1">
+        <!-- This is if we ever decide to add more dropdown options here
+                <a href="#" class="hover:bg-tertiary-hover inline-flex items-center space-x-2 py-2 px-3">
+                    <svg class="flex-none text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                        stroke-linejoin="round">
+                        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
+                        <circle cx="12" cy="7" r="4"></circle>
+                    </svg>
+                    <div class="truncate text-sm text-color-primary">Profile</div>
+                </a>
+            -->
+    </div>
+    <div class="border-t border-gray-300/25">
+        <a href="/auth/logout"
+            class="hover:bg-tertiary-hover inline-flex w-full items-center space-x-2 rounded-b-lg px-3 pt-3 pb-1">
+            <svg class="text-gray-400" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="1" y="5" width="22" height="14" rx="7" ry="7"></rect>
+                <circle cx="16" cy="12" r="3"></circle>
+            </svg>
+            <div class="text-sm text-color-primary">Logout</div>
+        </a>
+    </div>
+</div>
+<!-- End Dropdown Navbar Profile -->
\ No newline at end of file
diff --git a/views/templates/public.ejs b/views/templates/public.ejs
new file mode 100644
index 0000000..8021f92
--- /dev/null
+++ b/views/templates/public.ejs
@@ -0,0 +1,10 @@
+<%- include("./partials/head") %>
+  <section class="bg-primary"> 
+    <div class="flex flex-col items-center justify-center min-h-screen p-6">
+      <!-- Page Content -->
+      <% if(path == '/login'){ %> <%- include("../pages/public/login") %> <% } %>
+      <%//We will enable this when we add the server logic to toggle registration if(path == '/register'){ %> <%-// include("../pages/public/register") %> <%// } %> 
+      <!-- /Page Content -->
+     </div>
+  </section>
+<%- include("./partials/footer") %>
\ No newline at end of file
diff --git a/views/templates/user.ejs b/views/templates/user.ejs
new file mode 100644
index 0000000..d249337
--- /dev/null
+++ b/views/templates/user.ejs
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="scrollbar">
+<%- include("./partials/head") %>
+    <body class="bg-primary relative mx-auto flex h-full w-full flex-col flex-wrap justify-center">
+        <%- include("./partials/nav") %>
+        <main class="traMove bg-primary relative h-full flex-1 -translate-y-32 transition duration-300 md:-translate-y-0 lg:-translate-y-0">
+            <%- include("./partials/nav/profile_dropdown") %>
+            <section class="mb-0 flex h-auto flex-wrap justify-center md:mb-10 lg:mb-10">
+                <div class="bg-secondary my-10 mx-2 max-w-3xl flex-1 rounded-2xl py-6 px-3 md:my-0 md:mx-3 md:max-w-3xl md:px-5 lg:my-0 lg:mx-3 lg:max-w-7xl lg:px-5 xl:mx-3 xl:max-w-full 2xl:mx-3 2xl:max-w-full">
+                    <!-- Page Content -->
+                    <% if(path=='/' ){ %>
+                    <%- include("../pages/user/main") %>
+                    <% } %>
+                    <% if(path=='/admin' ){ %>
+                    <%- include("../pages/admin/main") %>
+                    <% } %>
+                    <!-- /Page Content -->
+                </div>
+            </section>
+        </main>
+        <%- include("./partials/footer") %>
+    </body>
+</html>
\ No newline at end of file
diff --git a/webpack.mix.js b/webpack.mix.js
new file mode 100644
index 0000000..d93155f
--- /dev/null
+++ b/webpack.mix.js
@@ -0,0 +1,7 @@
+const mix = require('laravel-mix')
+
+// I'm using laravel-mix to copy all the images, and js to the public folder then transpile the EJSmodules in src/public/modules/app.js
+mix.setPublicPath('dist/public')
+   .copyDirectory("src/public/js", "dist/public/js")
+   .copyDirectory("src/public/images", "dist/public/images")
+   .js('src/public/modules/app.js', 'dist/public/js')
\ No newline at end of file