diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml
new file mode 100644
index 0000000..d1d2927
--- /dev/null
+++ b/.idea/jsLibraryMappings.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptLibraryMappings">
+    <file url="PROJECT" libraries="{@types/jquery}" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/skyflask.iml b/.idea/skyflask.iml
index a2d1d1b..5250c40 100644
--- a/.idea/skyflask.iml
+++ b/.idea/skyflask.iml
@@ -7,6 +7,7 @@
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="jdk" jdkName="Python 3.10 (skyflask)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="@types/jquery" level="application" />
   </component>
   <component name="TemplatesService">
     <option name="TEMPLATE_CONFIGURATION" value="Jinja2" />
diff --git a/.idea/sqldialects.xml b/.idea/sqldialects.xml
new file mode 100644
index 0000000..ed8c721
--- /dev/null
+++ b/.idea/sqldialects.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="SqlDialectMappings">
+    <file url="file://$PROJECT_DIR$/skanhama/routes.py" dialect="SQLite" />
+    <file url="PROJECT" dialect="SQLite" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/config.py b/config.py
new file mode 100644
index 0000000..54adb80
--- /dev/null
+++ b/config.py
@@ -0,0 +1,4 @@
+class Config(object):
+    SECRET_KEY = "cloaked"
+    SQLALCHEMY_DATABASE_URI = "sqlite:///site.db"
+    SQLALCHEMY_TRACK_MODIFICATIONS = False
diff --git a/setup.py b/setup.py
index 0caf956..a17d5ab 100644
--- a/setup.py
+++ b/setup.py
@@ -2,4 +2,4 @@
 
 
 if __name__ == '__main__':
-    app.run()
+    app.run(debug=True)
diff --git a/skanhama/__init__.py b/skanhama/__init__.py
index 7cd3800..9904fd4 100644
--- a/skanhama/__init__.py
+++ b/skanhama/__init__.py
@@ -5,9 +5,10 @@
 app = Flask(__name__)
 app.config["SECRET_KEY"] = "cloaked"
 app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///site.db"
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
 db = SQLAlchemy(app)
 login_manager = LoginManager(app)
 login_manager.login_view = "login"
 login_manager.login_message_category = "flash flash-fail"
 
-from skanhama import routes
+from skanhama import routes, models
diff --git a/skanhama/forms.py b/skanhama/forms.py
index 31a5472..6de6471 100644
--- a/skanhama/forms.py
+++ b/skanhama/forms.py
@@ -9,7 +9,6 @@
 class RegistrationForm(FlaskForm):
     username = StringField("Username", validators=[DataRequired(), Length(min=4, max=23)])
     email = StringField("Email", validators=[DataRequired(), Email(), Length(min=4, max=120)])
-    confirm_email = StringField("Confirm Email", validators=[DataRequired(), Email(), Length(min=4, max=120), EqualTo("email")])
     password = PasswordField("Password", validators=[DataRequired()])
     confirm_password = PasswordField("Confirm Password", validators=[DataRequired(), EqualTo("password")])
     submit = SubmitField("Sign Up")
@@ -60,6 +59,7 @@ class UploadPackage(FlaskForm):
     name = StringField("Package Name", validators=[DataRequired()])
     version = StringField("Current Version", validators=[DataRequired(), Length(min=1, max=30)])
     author = StringField("Author(s) or Team", validators=[DataRequired()])
+    summary = TextAreaField("Brief Description", validators=[DataRequired(), Length(min=1, max=240)])
     description = TextAreaField("Description", validators=[DataRequired(), Length(min=1, max=5000)])
     requirements = TextAreaField("Requirements", validators=[DataRequired()])
     category = SelectField("Primary Category", choices=["Combat", "Sex"], validators=[DataRequired()])
diff --git a/skanhama/models.py b/skanhama/models.py
index acbd553..378808a 100644
--- a/skanhama/models.py
+++ b/skanhama/models.py
@@ -17,7 +17,7 @@ class User(db.Model, UserMixin):
     confirmed = db.Column(db.Boolean, nullable=False, default=False)
     confirmed_on = db.Column(db.DateTime, nullable=True)
     admin = db.Column(db.Boolean, nullable=False, default=False)
-    uploads = db.relationship("Package", backref="upload_author", lazy=True)
+    uploads = db.relationship("Package", backref="upload_author", lazy="dynamic")
     comments = db.relationship("Comment", backref="comment_author", lazy=True)
 
     def __repr__(self):
@@ -29,12 +29,14 @@ class Package(db.Model):
     name = db.Column(db.String(120), unique=True, nullable=False)
     version = db.Column(db.String(30), nullable=False)
     author = db.Column(db.String(100), nullable=False)
+    summary = db.Column(db.String(230), nullable=False)
     description = db.Column(db.Text, nullable=False)
     requirements = db.Column(db.Text, nullable=False)
     package_dir = db.Column(db.String(400), nullable=False, unique=True)
     date_uploaded = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
     downloads_total = db.Column(db.BigInteger, nullable=False)
     downloads_current_version = db.Column(db.BigInteger, nullable=False)
+    likes = db.Column(db.BigInteger, nullable=False)
     views_total = db.Column(db.BigInteger, nullable=False)
     nsfw = db.Column(db.Boolean, nullable=False)
     user_id = db.Column(db.Integer, db.ForeignKey("user.id"), nullable=False)
diff --git a/skanhama/routes.py b/skanhama/routes.py
index f7430ff..9ea2900 100644
--- a/skanhama/routes.py
+++ b/skanhama/routes.py
@@ -1,5 +1,6 @@
 import secrets
 import os.path
+import sqlite3
 import zipfile
 import hashlib
 import shutil
@@ -7,7 +8,7 @@
 
 from datetime import datetime
 from pathlib import Path
-from flask import render_template, url_for, flash, redirect, request
+from flask import render_template, url_for, flash, redirect, request, jsonify
 from flask_login import login_user, current_user, logout_user, login_required
 from werkzeug.security import generate_password_hash, check_password_hash
 from skanhama import app, db
@@ -178,6 +179,7 @@ def upload():
                 pack = Package(name=form.name.data,
                                version=form.version.data,
                                author=current_user.username,
+                               summary=form.summary.data,
                                description=form.description.data,
                                requirements=form.requirements.data,
                                package_dir=file_dict["_package_data"][1],
@@ -185,11 +187,12 @@ def upload():
                                downloads_total=0,
                                downloads_current_version=0,
                                views_total=0,
+                               likes=0,
                                nsfw=form.nsfw.data,
                                user_id=current_user.id)
                 db.session.add(pack)
                 db.session.commit()
-                flash("Your package has been successfully uploaded.", "success")
+                flash("Your package was successfully uploaded.", "success")
             else:
                 flash("Your package did not contain any .hkx files and has not been uploaded. Please ensure you "
                       "upload a package that contains valid Skyrim animation files.", "fail")
@@ -211,3 +214,32 @@ def about():
 @app.route("/faq")
 def faq():
     return render_template("faq.html")
+
+
+# @app.route("/livesearch", methods=["GET", "POST"])
+# def livesearch():
+#     # searchbox = request.form.get("text")
+#     # con = sqlite3.connect("site.db")
+#     # cursor = con.cursor()
+#     # query = "select name from package where name LIKE '{}%' order by name".format(searchbox)
+#     # cursor.execute(query)
+#     # result = cursor.fetchall()
+#     # return jsonify(result)
+#     searchbox = request.form.get("text")
+#     searchbox = '%' + searchbox + '%'
+#     engine = create_engine('sqlite:///site.db', echo=True)
+#     conn = engine.connect()
+#     result = conn.engine.execute("select * from PACKAGE where name LIKE ? order by name LIMIT 4", searchbox).fetchall()
+#     conn.close()
+#     result= Convert(result)
+#     return result
+#
+#
+# def Convert(lst):
+#     resultproxy = lst
+#     d, a = {}, []
+#     for rowproxy in resultproxy:
+#         for column, value in rowproxy.items():
+#             d = {**d, **{column: value}}
+#         a.append(d)
+#     return d
diff --git a/skanhama/site.db b/skanhama/site.db
index b96bbfc..b029f17 100644
Binary files a/skanhama/site.db and b/skanhama/site.db differ
diff --git a/skanhama/static/bg_01 copy.jpg b/skanhama/static/bg_01 copy.jpg
deleted file mode 100644
index 81ff104..0000000
Binary files a/skanhama/static/bg_01 copy.jpg and /dev/null differ
diff --git a/skanhama/static/scripts.js b/skanhama/static/scripts.js
index 2b15791..7c8ae8b 100644
--- a/skanhama/static/scripts.js
+++ b/skanhama/static/scripts.js
@@ -1,25 +1,40 @@
-// Function to handle search bar in the navigation bar
-// Expands on click to cover other nav bar items
-function navSearchFocus() {
-    let nav = document.getElementById("nav-list");
-    nav.style.display = "none";
-}
+// Handle opening and closing of the navbar search input
+// Opens on search icon click and closes when user presses outside the search input
+const navSearchIcon = document.getElementById("nav-search-icon");
+const navSearchInput = document.getElementById("nav-search-input");
+const navBar = document.getElementById("nav-list");
 
-window.onclick = function(event) {
-    if (!event.target.matches(".search-nav")) {
-        let nav = document.getElementById("nav-list");
-        nav.style.display = "visible";
-    }
+navSearchIcon.addEventListener("click", navSearchFunction);
+function navSearchFunction() {
+    navSearchIcon.style.display = "none";
+    navBar.style.display = "none";
+    navSearchInput.style.display = "inline-flex";
+    navSearchInput.focus();
+    window.addEventListener("click", navSearchClickOut);
 }
 
-// Function to handle dropdown of account menu when user is logged in
-// Dropdown is shown on button click and hidden on button click or click outside of dropdown area
-function dropdownAccount() {
-    document.getElementById("dropdownAccount").classList.toggle("dropdown-show")
+const navSearchClickOut = (e) => {
+  if (!e.target.id.includes("nav-search-input") && !e.target.id.includes("nav-search-icon")) {
+    navSearchInput.style.display = "none";
+    navSearchIcon.style.display = "block";
+    navBar.style.display = "inline-flex";
+    window.removeEventListener("click", navSearchClickOut);
+  }
+};
+
+// Handle opening and closing of the Account Menu
+// Opens on Account icon click and closes when user presses outside the menu
+const accountMenuIcon = document.getElementById("accountMenuIcon");
+const accountMenu = document.getElementById("dropdownAccount");
+
+accountMenuIcon.addEventListener("click", accountMenuFunction);
+function accountMenuFunction() {
+    accountMenu.classList.toggle("dropdown-show");
+    window.addEventListener("click", accountMenuClickOut);
 }
 
-window.onclick = function(event) {
-    if (!event.target.matches(".btn-dropdown")) {
+const accountMenuClickOut = (e) => {
+    if (!e.target.matches(".btn-dropdown")) {
         const dropdowns = document.getElementsByClassName("dropdown-content");
         let i;
         for (i = 0; i < dropdowns.length; i++) {
@@ -28,5 +43,22 @@ window.onclick = function(event) {
                 openDropdown.classList.remove("dropdown-show");
             }
         }
+        window.removeEventListener("click", accountMenuClickOut);
     }
 }
+
+// Live (Active) Search function in the search bar in the nav menu
+// $(function (){
+//     $("#nav-search-input").on("input", function(e){
+//         let textFrontEnd = $("#nav-search-input").val();
+//         // console.log(textFrontEnd);
+//         $.ajax({
+//             method:"post",
+//             url:"/livesearch",
+//             data:{text:textFrontEnd},
+//             success:function (res){
+//                 console.log(res);
+//             }
+//         })
+//     })
+// })
diff --git a/skanhama/static/style.css b/skanhama/static/style.css
index f51f0e7..1e9f6c0 100644
--- a/skanhama/static/style.css
+++ b/skanhama/static/style.css
@@ -7,12 +7,18 @@
    --container-body-margin: 0.5rem 2rem;
    --container-body-padding: 0.25rem;
    --row-gap: calc(10vmin + 5px);
-   --clr-AA: rgb(102, 252, 241);
-   --clr-AB: rgb(69, 149, 143);
-   --clr-BA: rgb(225, 153, 19);
-   --clr-BB: rgb(141, 95, 34);
-   --clr-CA: rgb(139, 57, 187);
-   --clr-CB: rgb(69, 34, 111);
+   /*--clr-AA: rgb(102, 252, 241);*/
+   /*--clr-AB: rgb(69, 149, 143);*/
+   /*--clr-BA: rgb(225, 153, 19);*/
+   /*--clr-BB: rgb(141, 95, 34);*/
+   /*--clr-CA: rgb(139, 57, 187);*/
+   /*--clr-CB: rgb(69, 34, 111);*/
+   --clr-AA: rgb(253, 41, 122);
+   --clr-AB: rgb(163, 47, 88);
+   --clr-CA: rgb(243, 165, 21);
+   --clr-CB: rgb(141, 95, 34);
+   --clr-BA: rgb(139, 57, 187);
+   --clr-BB: rgb(69, 34, 111);
 
    --clr-border-light: rgb(42, 48, 52);
    --clr-border-dark: rgb(15, 15, 23);
@@ -27,18 +33,24 @@
    --clr-text-accent: var(--clr-AA);
    --clr-text-dark: rgb(13, 13, 14);
 
-   --clr-bg-header: rgb(15, 15, 17);
-   --clr-bg-dropdown: rgb(21, 21, 24);
-   --clr-bg-content: rgb(26, 26, 29);
+   --clr-bg-header: rgb(23, 23, 26);
+   --clr-bg-dropdown: rgba(21, 21, 24, 0.9);
+   --clr-bg-dropdown-accent: rgba(59, 59, 66, 0.8);
+   --clr-bg-content: rgb(37, 37, 42);
+   --clr-bg-content-accent: rgb(33, 33, 36);
    --clr-bg-footer: var(--clr-bg-header);
-   --clr-bg-hover: rgb(36, 36, 40);
-
-   --size-h1: 1.5rem;
-   --size-h2: 1.3rem;
-   --size-h3: 1.1rem;
-   --size-p: 0.9rem;
+   --clr-bg-hover: rgb(43, 43, 49);
+   --clr-bg-btn: rgba(16, 16, 19, 0.4);
+
+   --size-h1: 1.3em;
+   --size-h2: 1.2em;
+   --size-h3: 1.1em;
+   --size-h4: 1.0em;
+   --size-p: 1em;
    --size-button: 1.0rem;
    --gradient-A: linear-gradient(45deg, var(--clr-CA), var(--clr-AA)) 1;
+   --gradient-B: -webkit-linear-gradient(top left, var(--clr-CA), var(--clr-AA));
+   --badge-radius: 0.25rem;
 }
 
 /*
@@ -50,10 +62,10 @@ box-sizing: border-box;
 
 body {
    min-height: 100vh;
-   background: #1f1f1f url("../static/bg_01 copy.jpg") no-repeat;
+   background: #1f1f1f url("../static/site/media/bg_01.jpg") no-repeat;
    background-size: auto;
-   font-family: 'Open Sans', sans-serif;
-   font-weight: 300;
+   font-family: 'Montserrat', sans-serif; /* 300 / 400 / 500 / 700 */
+   font-weight: 400;
    font-size: 1em;
    color: #f8f8f8;
    margin: 0;
@@ -61,28 +73,29 @@ body {
 }
 h1 {
    font-size: var(--size-h1);
-   font-family: 'Titillium Web', sans-serif;
-   font-weight: 600;
+   font-weight: 500;
    margin: 0;
-   /*border: solid #13e1aa 1px;*/
 }
 h2 {
    font-size: var(--size-h2);
-   font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    margin: 0;
 }
 h3 {
    font-size: var(--size-h3);
-   font-family: 'Titillium Web', sans-serif;
    font-weight: 400;
    margin: 0;
 }
 p {
    font-size: var(--size-p);
    margin: 0;
+   font-family: 'Work Sans', sans-serif; /* 300 / 400 */
+   font-weight: 300;
    /*border: solid #13e1aa 1px;*/
 }
+.fc-generic {
+   font-family: 'Work Sans', sans-serif;
+}
 a {
    color: var(--clr-AB);
 }
@@ -93,6 +106,10 @@ a:visited {
 /***********************************************************************
  *                Layout Settings
  ***********************************************************************/
+/* Misc */
+.hidden {
+   display: none;
+}
 /* Main */
 .main {
    min-height: 100vh;
@@ -140,6 +157,9 @@ a:visited {
    align-items: center;
    flex-wrap: nowrap;
 }
+#nav-list {
+   display: inline-flex;
+}
 .header-inner-center ul {
    padding: 0;
    display: inline-flex;
@@ -154,39 +174,47 @@ a:visited {
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
-   width: 7rem;
+   width: 7.5rem;
 }
+
 /* Nav Bar Search */
-#search-input-nav {
-   padding: 5px;
-   -webkit-transition: all .5s ease;
-   -moz-transition: all .5s ease;
-   transition: all .5s ease;
+#nav-search-input {
+   padding: 4px;
    align-items: center;
-   display: inline-flex;
-   width: 75px;
+   /*display: inline-flex;*/
+   width: 23rem;
    max-height: 2rem;
+   margin: 0;
+   display: none;
 }
-#search-input-nav:focus {
-   width: 200px;
- }
 
-/* Search */
-#search-input-nav {
-   border-radius: 0;
-   border: none;
-   background: none;
-   border-bottom: solid var(--clr-offsetA) 1px;
-   color: var(--clr-text-light);
- }
-#search-input-nav:focus {
-   outline: none;
-   border: none;
-   border-bottom: solid 1px;
-   border-image: var(--gradient-A);
- }
+/* Nav Bar Search Results */
+.search-results {
+   /*display: none;*/
+   position: fixed;
+   top: var(--height-header);
+   z-index: 1;
+   width: 30rem;
+   background-color: #1d1717;
+   min-height: 1.5rem;
+}
+.search-results-inner ul {
+   position: relative;
+   display: flex;
+   flex-direction: column;
+   justify-content: space-between;
+   align-items: flex-start;
+}
+.search-results-inner li {
+   margin: 0.2rem 0 0.2rem 0.4rem;
+}
+/*.search-results-list li {*/
+/*   display: inline-flex;*/
+/*   flex-direction: column;*/
+/*   align-items: center;*/
+/*}*/
 
-/* Right Header Area*/
+/* Right Header Area */
 .header-inner-right{
    grid-column: 7 / span 2;
    display: inline-flex;
@@ -195,7 +223,7 @@ a:visited {
    align-items: center;
    gap: 0.8rem;
 }
-.header-inner-right a {
+/*.header-inner-right a {
    display: inline-block;
 }
 .header-inner-right > .btn {
@@ -207,13 +235,34 @@ a:visited {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
-}
+}*/
 
-/* Account Dropdown */
-.dropdown {
+/* Header Inner Right - Notification Area */
+.header-inner-right-notifications {
    position: relative;
    display: inline-block;
+   font-size: 1.5em;
+   height: inherit;
+}
+
+/* Icons */
+.icon {
+   padding: 0.5rem;
+   margin: 0;
+}
+/* Notifications Icon */
+.badge {
+   -webkit-border-radius: var(--badge-radius);
+   -moz-border-radius: var(--badge-radius);
+   border-radius: var(--badge-radius);
+   padding-left: var(--badge-radius);
+   padding-right: var(--badge-radius);
+   vertical-align: top;
+   margin-left: -1.5rem;
+   z-index: 1;
 }
+
+/* Account Dropdown Menu */
 .dropdown-content {
    display: none;
    position: absolute;
@@ -227,24 +276,11 @@ a:visited {
    width: inherit;
    height: inherit;
 }
-.dropdown-content {
-   background: var(--clr-bg-dropdown);
-}
-.dropdown-content a {
-   color: var(--clr-text-light);
-   text-decoration: none;
-   border: solid 1px var(--clr-bg-dropdown);
-}
-.dropdown-content a:hover {
-   background: var(--clr-bg-hover);
-   border: solid 1px;
-   border-image: var(--gradient-A);
-}
 .dropdown-show {
    display: flex;
    flex: 1;
    right: 0;
-   margin-top: 0.75rem;
+   margin-top: 0.7rem;
    width: 13rem;
    flex-direction: column;
    justify-content: space-between;
@@ -259,12 +295,10 @@ a:visited {
 }
 .content-container {
    margin: 1rem 1.2rem;
-   padding: 0.3rem;
    border: solid var(--clr-AA) 1px;
 }
 .content-2col {
    margin: 1rem 1.2rem;
-   padding: 0.3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
@@ -302,6 +336,7 @@ a:visited {
    flex-direction: column;
    margin: 2rem 0 0 0;
 }
+
 .container-sidebar-right .form-group {
    row-gap: 1.6rem;
 }
@@ -327,8 +362,10 @@ a:visited {
 }
 .form-control-label {
    margin: 0;
+   font-weight: 400;
+   font-size: var(--size-p);
 }
-.form-control {
+.fc-generic {
    height: 1.4rem;
    width: 100%;
 }
@@ -364,7 +401,49 @@ a:visited {
    align-items: center;
    height: var(--height-footer);
 }
-
+/************************************************************************/
+/* Forms                                                                */
+/************************************************************************/
+fieldset.form-group-field {
+   border: none;
+}
+.fc-generic {
+   color: var(--clr-text-light);
+   border: none;
+   border-bottom: solid var(--clr-offsetA) 1px;
+   background: var(--clr-bg-content);
+   font-weight: 400;
+}
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active{
+   -webkit-box-shadow: 0 0 0 30px var(--clr-bg-content) inset !important;
+   -webkit-text-fill-color: var(--clr-text-light) !important;
+}
+.fc-generic:focus {
+   border: none;
+   border-bottom: solid 1px;
+   border-image: var(--gradient-A);
+   outline-style: none;
+}
+.invalid-feedback {
+   font-size: 0.75em;
+   color: var(--clr-text-accent);
+}
+.invalid-form {
+   border-bottom: solid rgb(90, 8, 35) 1px;
+}
+.form-check {
+   font-family: 'Open Sans', sans-serif;
+   font-size: 0.8em;
+   font-weight: 400;
+}
+#forgot-password {
+   font-family: 'Open Sans', sans-serif;
+   font-size: 0.8em;
+   font-weight: 400;
+}
 /* Account Page */
 #account-header {
    margin: 0 0 0.8rem 0;
@@ -424,34 +503,149 @@ a:visited {
    font-size: 1.1em;
 }
 
+/* Upload Form */
+.upload-content {
+   /*border: 1px solid red;*/
+
+}
+#upload-basic {
+   background-color: var(--clr-bg-content-accent);
+   padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+}
+.form-group-upload {
+   margin: 0;
+   padding: 0;
+   border: none;
+}
+.form-label-upload {
+   font-size: 1em;
+}
+.fc-generic .fc-upload {
+   color: var(--clr-text-light);
+   border: none;
+   border-bottom: solid var(--clr-offsetA) 1px;
+   background: transparent;
+   font-weight: 400;
+   display: flex;
+   flex-direction: column;
+   margin-top: 0.15rem;
+
+}
+.fc-generic .fc-upload:focus {
+   border: none;
+   border-bottom: solid 1px;
+   border-image: var(--gradient-A);
+   outline-style: none;
+}
+
+.upload-header {
+   margin: 0 0 0.5rem 0;
+}
+#h1-upload {
+   padding: 0.5rem 0.75rem 0.5rem 0.75rem;
+}
+
+
+/* Browse Page */
+.browse-section-popular .inner {
+   display: flex;
+   flex-direction: row;
+   flex-wrap: wrap;
+   flex-basis: 50%;
+   justify-content: space-between;
+}
+/*.browse-section-popular .inner .card-popular:nth-child(2) {*/
+/*   flex-basis: 100%;*/
+/*}*/
+.card-popular {
+   width: 49%;
+   margin: 1rem 0 0 0;
+   background-color: #1d1717;
+}
+
+
 /***********************************************************************
  *                Styling
  ***********************************************************************/
 /* Header */
 .header {
    background: var(--clr-bg-header);
-}
-.header-inner-center ul {
-
 }
 .header-inner-center a {
    color: var(--clr-text-light);
-   font-weight: 400;
-   font-size: var(--size-h3);
-   letter-spacing: 2px;
+   font-weight: 500;
+   font-size: var(--size-h1);
+
    text-decoration: none;
-   border: solid rgba(0, 0, 0, 0) 1px;
+   /*border: solid rgba(0, 0, 0, 0) 1px;*/
 }
+
+/* Nav Bar Search */
+#nav-search-input {
+   font-size: 1em;
+   border-radius: 0;
+   background: none;
+   color: var(--clr-text-light);
+   -webkit-transition: all .5s ease-in-out;
+   -moz-transition: all .5s ease-in-out;
+   transition: all .5s ease-in-out;
+   outline: none;
+   border: none;
+   border-bottom: solid 1px;
+   border-image: var(--gradient-A);
+ }
+/*.gradient-link:hover {
+   background-image: var(--gradient-B);
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+}*/
 .header-inner-center a:hover {
+   background: var(--gradient-B);
+}
+/* Icons & Badge Styling*/
+.icon {
+   font-size: 1.5rem;
+}
+.icon:hover {
+   background: -webkit-gradient(linear, left top, right bottom, from(var(--clr-CA)), to(var(--clr-AA)));
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+   cursor: pointer;
+}
+.badge {
+   background: var(--clr-CA);
+   font-size: 0.5em;
+   font-weight: 800;
+   color: var(--clr-text-dark);
+}
+/* Dropdown Account Menu */
+#dropdownAccountName {
+   background: var(--gradient-B);
+}
+#dropdownAccountName {
+   padding: 0.8rem 0 0.8rem 0;
+   width: inherit;
+   height: inherit;
+   text-align: center;
+}
+.dropdown-content {
+   background: var(--clr-bg-dropdown);
+   backdrop-filter: blur(3px);
+   font-size: 1rem;
+   font-weight: 300;
+}
+.dropdown-content a {
    color: var(--clr-text-light);
+   text-decoration: none;
+   border: solid 1px rgba(0, 0, 0, 0);
+}
+.dropdown-content a:hover {
    background: var(--clr-bg-hover);
    border: solid 1px;
    border-image: var(--gradient-A);
 }
 
 
-
-
 /* Content & Footer */
 
 .content {
@@ -467,23 +661,25 @@ a:visited {
    text-decoration: none;
    color: var(--clr-text-light);
    font-size: var(--size-button);
+   background-color: var(--clr-bg-btn);
+   border: solid var(--clr-border-light) 1px;
 }
 .btn-clear {
    background: none;
    border: solid var(--clr-border-light) 1px;
 }
-.btn-clear:hover {
+.btn:hover {
    color: var(--clr-text-light) !important;
    background: var(--clr-bg-hover);
    border: solid 1px;
    border-image: var(--gradient-A);
 }
-.btn-clear:visited {
+.btn:visited {
    color: var(--clr-text-light);
 }
 .btn-solid {
    color: var(--clr-text-light);
-   background: var(--clr-bg-content);
+   background: var(--clr-bg-btn);
    border: solid var(--clr-AA) 1px;
 }
 .btn-solid:hover {
@@ -496,51 +692,7 @@ a:visited {
    color: var(--clr-text-light);
 }
 
-/* Forms */
-fieldset.form-group-field {
-   border: none;
-}
-.form-control-label {
-   font-weight: 600;
-   font-size: var(--size-p);
-}
-.form-control {
-   color: var(--clr-text-light);
-   border: none;
-   border-bottom: solid var(--clr-offsetA) 1px;
-   background: var(--clr-bg-content);
-   font-weight: 400;
-}
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active{
-   -webkit-box-shadow: 0 0 0 30px var(--clr-bg-content) inset !important;
-   -webkit-text-fill-color: var(--clr-text-light) !important;
-}
-.form-control:focus {
-   border: none;
-   border-bottom: solid 1px;
-   border-image: var(--gradient-A);
-   outline-style: none;
-}
-.invalid-feedback {
-   font-size: 0.75em;
-   color: var(--clr-text-accent);
-}
-.invalid-form {
-   border-bottom: solid rgb(90, 8, 35) 1px;
-}
-.form-check {
-   font-family: 'Open Sans', sans-serif;
-   font-size: 0.8em;
-   font-weight: 400;
-}
-#forgot-password {
-   font-family: 'Open Sans', sans-serif;
-   font-size: 0.8em;
-   font-weight: 400;
-}
+
 
 /* Flashes */
 .flash {
diff --git a/skanhama/static/temp_logo.png b/skanhama/static/temp_logo.png
deleted file mode 100644
index 2063743..0000000
Binary files a/skanhama/static/temp_logo.png and /dev/null differ
diff --git a/skanhama/templates/browse.html b/skanhama/templates/browse.html
index c572bfe..4937c53 100644
--- a/skanhama/templates/browse.html
+++ b/skanhama/templates/browse.html
@@ -1,15 +1,26 @@
 {% extends "layout.html" %}
 {% block content %}
     <div class="content-container">
-        <div class="browse-hot">
-        </div>
-        <div class="browse-body">
-            <h1>Browse Packages</h1>
+        <div class="browse-section-popular">
+            <h1>Popular Animation Packages</h1>
+            <div class="inner">
             {% for package in packages.items %}
-                <div class="card-hot">
-                    <h2><a class="card-title" href="{{ url_for('package', package_id=package.id) }}">{{ package.name }}</a></h2>
+                <div class="card-popular">
+                    <h2><a class="card-popular-title" href="{{ url_for('package', package_id=package.id) }}">{{ package.name }}</a></h2>
+                    <p class="card-popular-summary">{{ package.summary }}</p>
+                    <p class="card-popular-version">{{ package.version }}</p>
+                    <p class="card-popular-author">Uploaded by {{ package.author }}</p>
                 </div>
             {% endfor %}
+            </div>
+        </div>
+        <div class="browse-section-categories">
+            <h1>Other Browsing Methods</h1>
+            <a class="btn">All Animation Packages</a>
+            <a class="btn">Browse by Categories</a>
+        </div>
+        <div class="browse-section-all">
+            <h1>Latest Animation Packages</h1>
         </div>
     </div>
 {% endblock content %}
\ No newline at end of file
diff --git a/skanhama/templates/layout.html b/skanhama/templates/layout.html
index 32404ca..e742a81 100644
--- a/skanhama/templates/layout.html
+++ b/skanhama/templates/layout.html
@@ -2,56 +2,72 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     {% if title %}
         <title>skanhama - {{ title }}</title>
     {% else %}
         <title>skanhama</title>
     {% endif %}
+
+    <!-- Internal Refs -->
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
-    <script src="{{ url_for("static", filename="scripts.js") }}"></script>
+    <script async src="{{ url_for("static", filename="scripts.js") }}"></script>
 
     <!-- External Refs -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Titillium+Web:wght@300;400;600&display=swap" rel="stylesheet">
-    <script src="https://kit.fontawesome.com/5dbb6979db.js" crossorigin="anonymous"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&family=Work+Sans:wght@300;400&display=swap" rel="stylesheet">
+    <script defer src="https://kit.fontawesome.com/5dbb6979db.js" crossorigin="anonymous"></script>
 </head>
 <body>
     <div class="main">
         <div class="header">
             <div class="header-inner">
                 <div class="header-inner-left">
-                    <a href="{{ url_for('home') }}"><img id="logo" src="{{ url_for("static", filename="logo.svg") }}" alt="Logo and Home Link"></a>
+                    <a href="{{ url_for('home') }}"><img id="logo" src="{{ url_for("static", filename="/site/media/logo2.svg") }}" alt="Home"></a>
                 </div>
                 <nav class="header-inner-center">
                     <ul id="nav-list">
-                        <li><a href="{{ url_for('browse') }}">Browse</a></li>
-                        <li><a href="{{ url_for('upload') }}">Upload</a></li>
-                        <li><a href="{{ url_for('about') }}">About</a></li>
+                        <li><a class="gradient-link" href="{{ url_for('browse') }}">Browse</a></li>
+                        <li><a class="gradient-link" href="{{ url_for('upload') }}">Upload</a></li>
+                        <li><a class="gradient-link" href="{{ url_for('about') }}">About</a></li>
                     </ul>
                     <form name="search-nav">
-                        <input type="text" id="search-input-nav" class="search-input" placeholder="Search..." autocomplete="off" onclick="navSearchFocus()">
+                        <input type="text" id="nav-search-input" class="search-input" placeholder="Search..." autocomplete="off">
+{#                        <i class="fas fa-times icon-close"></i>#}
+                        <!-- #TODO: add closing x with custom logic if needed, change between input type search/text to toggle built in x -->
                     </form>
-                    <i class="fas fa-search"></i>
+                    <div class="search-results hidden">
+                        <div class="search-results-inner">
+                            <ul>
+                                <li id="search-results-prompt">Start typing to display results.</li>
+                                <li>Example 01</li>
+                                <li>Example 02</li>
+                            </ul>
+                        </div>
+                    </div>
+                    <i id="nav-search-icon" class="fas fa-search icon"></i>
                 </nav>
                 <div class="header-inner-right">
                     {% if current_user.is_authenticated %}
                         <div class="header-inner-right-notifications">
-                            <i class="far fa-bell"></i>
-                        </div>
-                        <div class="dropdown">
-                        <i class="fas fa-user-circle"></i>
-                            <button onclick="dropdownAccount()" class="btn btn-clear btn-dropdown">Account</button>
+                            <i class="far fa-bell icon"></i>
+                            <span class="badge" id="badge-notifications">23</span>
+                            <i id="accountMenuIcon" class="fas fa-user-circle btn-dropdown icon"></i>
                             <div id="dropdownAccount" class="dropdown-content">
-                                <h2>{{ current_user.username }}</h2>
+                                <div id="dropdownAccountName">
+                                    <h2>{{ current_user.username }}</h2>
+                                </div>
                                 <a href="{{ url_for('account') }}">Account Settings</a>
                                 <a href="#">Uploaded Packages</a>
                                 <a href="{{ url_for('logout') }}">Sign Out</a>
                             </div>
                         </div>
                     {% else %}
-                        <a id="login" class="btn btn-clear" href="{{ url_for('login') }}">Log In</a>
-                        <a id="register" class="btn btn-clear" href="{{ url_for('register') }}">Register</a>
+                        <a id="login" class="btn" href="{{ url_for('login') }}">Log In</a>
+                        <a id="register" class="btn" href="{{ url_for('register') }}">Register</a>
                     {% endif %}
                 </div>
             </div>
diff --git a/skanhama/templates/register.html b/skanhama/templates/register.html
index d35e32d..19399b6 100644
--- a/skanhama/templates/register.html
+++ b/skanhama/templates/register.html
@@ -7,6 +7,7 @@ <h1>Create an Account</h1>
             <form method="POST" action="" class="form-main">
                 {{ form.hidden_tag() }}
                 <fieldset class="form-group-field">
+                    <!-- Username -->
                     <div class="form-group">
                         {{ form.username.label(class="form-control-label") }}
                         {% if form.username.errors %}
@@ -20,6 +21,7 @@ <h1>Create an Account</h1>
                             {{ form.username(class="form-control") }}
                         {% endif %}
                     </div>
+                    <!-- Email -->
                     <div class="form-group">
                         {{ form.email.label(class="form-control-label") }}
                         {% if form.email.errors %}
@@ -33,19 +35,7 @@ <h1>Create an Account</h1>
                             {{ form.email(class="form-control") }}
                         {% endif %}
                     </div>
-                    <div class="form-group">
-                        {{ form.confirm_email.label(class="form-control-label") }}
-                        {% if form.confirm_email.errors %}
-                            {{ form.confirm_email(class="form-control invalid-form") }}
-                            <div class="invalid-feedback">
-                                {% for error in form.confirm_email.errors %}
-                                    <span>{{ error }}</span>
-                                {% endfor %}
-                            </div>
-                        {% else %}
-                            {{ form.confirm_email(class="form-control") }}
-                        {% endif %}
-                    </div>
+                    <!-- Password -->
                     <div class="form-group">
                         {{ form.password.label(class="form-control-label") }}
                         {% if form.password.errors %}
@@ -59,6 +49,7 @@ <h1>Create an Account</h1>
                             {{ form.password(class="form-control") }}
                         {% endif %}
                     </div>
+                    <!-- Password reconfirm -->
                     <div class="form-group">
                         {{ form.confirm_password.label(class="form-control-label") }}
                         {% if form.confirm_password.errors %}
@@ -72,6 +63,7 @@ <h1>Create an Account</h1>
                             {{ form.confirm_password(class="form-control") }}
                         {% endif %}
                     </div>
+                    <!-- Submit -->
                     <div class="form-group container-center">
                         {{ form.submit(class="btn btn-clear btn-submit") }}
                     </div>
diff --git a/skanhama/templates/upload.html b/skanhama/templates/upload.html
index 99dca01..22a5a7b 100644
--- a/skanhama/templates/upload.html
+++ b/skanhama/templates/upload.html
@@ -2,63 +2,83 @@
 {% block content %}
     <div class="content-container">
         <div class="upload-top">
+            <h1 id="h1-upload">Upload an Animation Package</h1>
             <form method="POST" action="" enctype="multipart/form-data">
                 {{ form.hidden_tag() }}
-                <fieldset class="form-group-field">
-                    <!-- Name -->
-                    <div class="form-group">
-                        {{ form.name.label(class="form-control-label") }}
-                        {% if form.name.errors %}
-                            {{ form.name(class="form-control invalid-form") }}
-                            <div class="invalid-feedback">
-                                {% for error in form.name.errors %}
-                                    <span>{{ error }}</span>
-                                {% endfor %}
-                            </div>
-                        {% else %}
-                            {{ form.name(class="form-control") }}
-                        {% endif %}
-                    </div>
-                    <!-- Version -->
-                    <div class="form-group">
-                        {{ form.version.label(class="form-control-label") }}
-                        {% if form.version.errors %}
-                            {{ form.version(class="form-control invalid-form") }}
-                            <div class="invalid-feedback">
-                                {% for error in form.version.errors %}
-                                    <span>{{ error }}</span>
-                                {% endfor %}
-                            </div>
-                        {% else %}
-                            {{ form.version(class="form-control") }}
-                        {% endif %}
+                <fieldset class="form-group-upload">
+                    <div class="upload-content" id="upload-basic">
+                        <h2 class="upload-header">Mod Details</h2>
+                        <!-- Name -->
+                        <div class="form-group-upload">
+                            {{ form.name.label(class="form-label-upload") }}
+                            {% if form.name.errors %}
+                                {{ form.name(class="form-control invalid-form") }}
+                                <div class="invalid-feedback">
+                                    {% for error in form.name.errors %}
+                                        <span>{{ error }}</span>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                {{ form.name(class="form-control fc-upload") }}
+                            {% endif %}
+                        </div>
+                        <!-- Authors -->
+                        <div class="form-group">
+                            {{ form.author.label(class="form-control-label") }}
+                            {% if form.author.errors %}
+                                {{ form.author(class="form-control invalid-form") }}
+                                <div class="invalid-feedback">
+                                    {% for error in form.author.errors %}
+                                        <span>{{ error }}</span>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                {{ form.author(class="form-control") }}
+                            {% endif %}
+                        </div>
+                        <!-- Version -->
+                        <div class="form-group">
+                            {{ form.version.label(class="form-control-label") }}
+                            {% if form.version.errors %}
+                                {{ form.version(class="form-control invalid-form") }}
+                                <div class="invalid-feedback">
+                                    {% for error in form.version.errors %}
+                                        <span>{{ error }}</span>
+                                    {% endfor %}
+                                </div>
+                            {% else %}
+                                {{ form.version(class="form-control") }}
+                            {% endif %}
+                        </div>
                     </div>
-                    <!-- Authors -->
+
+
+                    <!-- Category -->
                     <div class="form-group">
-                        {{ form.author.label(class="form-control-label") }}
-                        {% if form.author.errors %}
-                            {{ form.author(class="form-control invalid-form") }}
+                        {{ form.category.label(class="form-control-label") }}
+                        {% if form.category.errors %}
+                            {{ form.category(class="form-control invalid-form") }}
                             <div class="invalid-feedback">
-                                {% for error in form.author.errors %}
+                                {% for error in form.category.errors %}
                                     <span>{{ error }}</span>
                                 {% endfor %}
                             </div>
                         {% else %}
-                            {{ form.author(class="form-control") }}
+                            {{ form.category(class="form-control") }}
                         {% endif %}
                     </div>
-                    <!-- Category -->
+                    <!-- Brief Summary -->
                     <div class="form-group">
-                        {{ form.category.label(class="form-control-label") }}
-                        {% if form.category.errors %}
-                            {{ form.category(class="form-control invalid-form") }}
+                        {{ form.summary.label(class="form-control-label") }}
+                        {% if form.summary.errors %}
+                            {{ form.summary(class="form-control invalid-form") }}
                             <div class="invalid-feedback">
-                                {% for error in form.category.errors %}
+                                {% for error in form.summary.errors %}
                                     <span>{{ error }}</span>
                                 {% endfor %}
                             </div>
                         {% else %}
-                            {{ form.category(class="form-control") }}
+                            {{ form.summary(class="form-control") }}
                         {% endif %}
                     </div>
                     <!-- Description -->