diff --git a/ACMAS/app/ACMAS_Web/components/button/button.html b/ACMAS/app/ACMAS_Web/components/button/button.html
index 5010a7f..a7ac40d 100644
--- a/ACMAS/app/ACMAS_Web/components/button/button.html
+++ b/ACMAS/app/ACMAS_Web/components/button/button.html
@@ -1,7 +1,7 @@
-<span class="button-component pt-2">
+<span class="button-component">
     {% if component_type == "primary" %}
-    <button type="submit" class="px-4 py-2 rounded-xl text-white text-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="{{ value }}" name="{{ name }}">{{ text }}</button>
+    <button type="submit" class="px-5 py-3 rounded-xl text-white font-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="{{ value }}" name="{{ name }}">{{ text }}</button>
     {% elif component_type == "secondary" %}
-    <button type="submit" class="px-4 py-2 rounded-xl text-gray-700 text-semibold border border-gray-300 text-lg bg-white hover:bg-gray-100 transition ease-in duration-200" value="{{ value }}" name="{{ name }}">{{ text }}</button>
+    <button type="submit" class="px-5 py-3 rounded-xl text-gray-700 font-semibold border border-gray-300 text-lg bg-white hover:bg-gray-100 transition ease-in duration-200" value="{{ value }}" name="{{ name }}">{{ text }}</button>
     {% endif %}
 </span>
diff --git a/ACMAS/app/ACMAS_Web/components/field/field.html b/ACMAS/app/ACMAS_Web/components/field/field.html
index 2def580..663f1e6 100644
--- a/ACMAS/app/ACMAS_Web/components/field/field.html
+++ b/ACMAS/app/ACMAS_Web/components/field/field.html
@@ -1,7 +1,12 @@
-<div class="field-component p-0.5">
+{% load component_tags %}
+
+<div class="field-component flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full items-center">
     {% if component_type == "input" %}
-    <input type="file" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" name="{{ name }}">
-    {% else %}
-    <input type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" name="{{ name }}" placeholder="{{ placeholder }}">
+        <input type="file" class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 focus:outline-none" name="{{ name }}">
+        {% else %}
+        {% if icon_name != "" %}
+            {% component "icon" icon=icon_name icon_type="mini" icon_class="w-6 h-6 flex-shrink-0 text-gray-400" %}
+        {% endif %}
+        <input type="{{ component_type }}" class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" name="{{ name }}" placeholder="{{ placeholder }}" />
     {% endif %}
 </div>
diff --git a/ACMAS/app/ACMAS_Web/components/field/field.py b/ACMAS/app/ACMAS_Web/components/field/field.py
index 2e574f5..cc0e200 100644
--- a/ACMAS/app/ACMAS_Web/components/field/field.py
+++ b/ACMAS/app/ACMAS_Web/components/field/field.py
@@ -5,9 +5,10 @@
 class Field(component.Component):
     template_name = "field/field.html"
 
-    def get_context_data(self, placeholder, name, component_type):
+    def get_context_data(self, placeholder, name, component_type, icon_name):
         return {
             "placeholder": placeholder,
             "name": name,
             "component_type": component_type,
+            "icon_name": icon_name,
         }
diff --git a/ACMAS/app/ACMAS_Web/static/img/github.png b/ACMAS/app/ACMAS_Web/static/img/github.png
new file mode 100644
index 0000000..9490ffc
Binary files /dev/null and b/ACMAS/app/ACMAS_Web/static/img/github.png differ
diff --git a/ACMAS/app/ACMAS_Web/templates/_base.html b/ACMAS/app/ACMAS_Web/templates/_base.html
index f96f29c..670cebf 100644
--- a/ACMAS/app/ACMAS_Web/templates/_base.html
+++ b/ACMAS/app/ACMAS_Web/templates/_base.html
@@ -138,7 +138,6 @@
             </li>
             {% endblock %}
           {% endif %}
-          <li><a class="block py-2 pl-3 pr-4 text-gray-900 rounded md:hover:bg-gray-100 md:hover:bg-transparent md:border-0 hover:text-gray-500" href="https://github.com/ACMAS/ACMAS-Frontend">GitHub</a></li>
           {% if user.is_authenticated %}
             {% block user %}
               <!-- Logout -->
@@ -158,27 +157,23 @@
       </div>
     </div>
   </nav>
-
-
-  <div class="">
+  <div>
     {% block content %}
     {% endblock content %}
   </div>
-  {% comment %} <div class="ocean" id="hide-mobile">
-    <div class="wave"></div>
-    <div class="wave"></div>
-  </div> {% endcomment %}
-  <!--
-  <div class="custom-shape-divider-bottom-1669508581" id="hide-mobile">
-    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
-      <path
-        d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" 
-        class="shape-fill">
-      </path>
-    /svg>
-  </div>
-  -->
 </body>
+
+<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-white md:flex md:items-center md:justify-between md:p-6">
+  <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400"></span>
+  <ul class="flex flex-wrap items-center justify-items-center mt-3 text-sm font-medium text-gray-500 dark:text-gray-400 sm:mt-0">
+    <li class="mr-6">
+        <a href="https://github.com/ACMAS/ACMAS-Frontend"><img class="xl:h-6 h-4 text-gray-500" src="../static/img/github.png" alt="github"></a>
+    </li>
+    <li class="mr-4 filter invert">
+      <a href="https://new.rcos.io/"><img class="xl:h-6 h-4 text-gray-500" src="../static/img/RCOS.png" alt="RCOS"></a>
+    </li>
+  </ul>
+</footer>
 {% endblock body %}
 
 </html>
diff --git a/ACMAS/app/ACMAS_Web/templates/index.html b/ACMAS/app/ACMAS_Web/templates/index.html
index c6e92b5..c29a4fb 100644
--- a/ACMAS/app/ACMAS_Web/templates/index.html
+++ b/ACMAS/app/ACMAS_Web/templates/index.html
@@ -31,7 +31,6 @@ <h2 class="text-3xl text-white mb-24" style="color: #327796">Automated Course Ma
         </div>
     </div>
 </div>
-  
 <div class="container mx-auto px-4 z-3 -mt-64 pt-24 relative w-8/12">
     <div class="justify-center flex flex-wrap -mx-4">
         <div class="bg-white rounded-xl shadow-lg">
@@ -40,24 +39,22 @@ <h2 class="text-3xl text-white mb-24" style="color: #327796">Automated Course Ma
                     class="px-6 rounded-xl relative w-full lg:w-3/12 w-full py-8 md:w-6/12 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105 hover:bg-gray-50 duration-200 cursor-pointer"
                     onclick="window.location.href='searchByCourse';"
                 >
-                <div class="flex justify-center text-gray-700">
-                    {% component "icon" icon="academic-cap" icon_type="mini" icon_class="w-5 h-5" %}
+                <div class="flex justify-center text-gray-600">
+                    {% component "icon" icon="academic-cap" icon_type="mini" icon_class="w-6 h-6" %}
                 </div>
                     <div class="text-center py-2">
                         <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Search by Course</h5>
-                        <p class="text-gray-500 text-md">Blah blah blah blah</p>
                     </div>
                 </div>
                 <div
                     class="px-6 rounded-xl relative w-full lg:w-3/12 w-full py-8 md:w-6/12 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105 hover:bg-gray-50 duration-200 cursor-pointer"
                     onclick="window.location.href='searchByQuestion';"
                 >
-                    <div class="flex justify-center text-gray-700">
-                        {% component "icon" icon="magnifying-glass" icon_type="mini" icon_class="w-5 h-5" %}
+                    <div class="flex justify-center text-gray-600">
+                        {% component "icon" icon="magnifying-glass" icon_type="mini" icon_class="w-6 h-6" %}
                     </div>
                     <div class="text-center py-2">
                         <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Search by Question</h5>
-                        <p class="text-gray-500 text-md">Blah blah blah blah</p>
                     </div>
                 </div>
                 {% if user.is_authenticated %}
@@ -65,30 +62,28 @@ <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Search by
                     class="px-6 rounded-xl relative w-full lg:w-3/12 w-full py-8 md:w-6/12 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105 hover:bg-gray-50 duration-200 cursor-pointer"
                     onclick="window.location.href='upload-file';"
                 >
-                    <div class="flex justify-center text-gray-700">
-                        {% component "icon" icon="document-arrow-up" icon_type="mini" icon_class="w-5 h-5" %}
+                    <div class="flex justify-center text-gray-600">
+                        {% component "icon" icon="document-arrow-up" icon_type="mini" icon_class="w-6 h-6" %}
                     </div>
                     <div class="text-center py-2">
                         <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload<br>File</h5>
-                        <p class="text-gray-500 text-md">Blah blah blah blah</p>
                     </div>
                 </div>
                 <div
                     class="px-6 rounded-xl relative w-full lg:w-3/12 w-full py-8 md:w-6/12 transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-105 hover:bg-gray-50 duration-200 cursor-pointer"
                     onclick="window.location.href='upload-manually';"
                 >
-                    <div class="flex justify-center text-gray-700">
-                        {% component "icon" icon="cloud-arrow-up" icon_type="mini" icon_class="w-5 h-5" %}
+                    <div class="flex justify-center text-gray-600">
+                        {% component "icon" icon="cloud-arrow-up" icon_type="mini" icon_class="w-6 h-6" %}
                     </div>
                     <div class="text-center py-2">
-                        <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload Manually</h5>
-                        <p class="text-gray-500 text-md">Blah blah blah blah</p>
+                        <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload<br>Manually</h5>
                     </div>
                 </div>
                 {% else %}
                 <div class="px-6 relative w-full lg:w-3/12 w-full py-8 md:w-6/12 bg-gray-100 opacity-75 cursor-not-allowed">
-                    <div class="flex justify-center text-gray-700">
-                        {% component "icon" icon="document-arrow-up" icon_type="mini" icon_class="w-5 h-5" %}
+                    <div class="flex justify-center text-gray-600">
+                        {% component "icon" icon="document-arrow-up" icon_type="mini" icon_class="w-6 h-6" %}
                     </div>
                     <div class="text-center py-2">
                         <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload<br>File</h5>
@@ -96,11 +91,11 @@ <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload<br>
                     </div>
                 </div>
                 <div class="px-6 lg:rounded-r-xl md:rounded-br-xl relative w-full lg:w-3/12 w-full py-8 md:w-6/12 bg-gray-100 opacity-75 cursor-not-allowed">
-                    <div class="flex justify-center text-gray-700">
-                        {% component "icon" icon="cloud-arrow-up" icon_type="mini" icon_class="w-5 h-5" %}
+                    <div class="flex justify-center text-gray-600">
+                        {% component "icon" icon="cloud-arrow-up" icon_type="mini" icon_class="w-6 h-6" %}
                     </div>
                     <div class="text-center py-2">
-                        <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload Manually</h5>
+                        <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload<br>Manually</h5>
                         <p class="text-gray-500 text-md">Login to upload</p>
                     </div>
                 </div>
@@ -110,15 +105,6 @@ <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload Man
     </div>
 </div>
 
-{% comment %} <div class="text-7xl" style="color: #327796; font-family: Inter, serif;">Simplify <br> studying with</div>
-<div class="">
-    <a href="/">
-        <img
-            alt="ACMAS logo"
-            class="w-96 h-auto pt-4 pl-5"
-            src="../static/img/ACMAS_Logo.svg"
-        />
-    </a> {% endcomment %}
 {% endblock content %}
 
 {% comment %} {% block content %} {% endcomment %}
@@ -146,54 +132,5 @@ <h5 class="text-xl font-semibold text-center text-gray-700 mt-2 mb-1">Upload Man
         href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
         crossorigin="anonymous"
     />
-</head>
-
-<body>
-    {% comment %} <main> {% endcomment %}
-        {% comment %} <div class="p-6">
-            <div style="display:flex;">
-                <div class="home-display-text text-blue">Simplify <br> studying with</div>
-                <div class="home-logo-title">
-                    <a href="/" >
-                        <img
-                            alt="ACMAS logo"
-                            class="home-logo"
-                            src="../static/img/ACMAS_Logo.svg"
-                        />
-                    </a>
-                </div>
-            </div>
-
-            <div class="home-buttons-container gap-4">
-                <li class="dropdown-button home-text">
-                    Search
-                    <ul class="dropdown-opts dropdown-opts-animated">
-                    <li><a href="/searchByQuestion">by Question</a></li>
-                    <li><a href="/searchByCourse">by Course</a></li>
-                    </ul>
-                </li>
-                {%if user.is_authenticated %}
-                {%block UploadOptions%}
-                <li class="dropdown-button home-text">
-                    Upload
-                    <ul class="dropdown-opts dropdown-opts-animated">
-                    <li><a href="/upload-file">With a file</a></li>
-                    <li><a href="/upload-manually">Manually</a></li>
-                    </ul>
-                </li>
-                {%endblock%}
-                {% endif %}
-                
-            </div>
-        </div>
-    </main>
-    <div class="custom-shape-divider-bottom-1669508581" id="hide-mobile">
-        <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
-            <path
-                d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" 
-                class="shape-fill">
-            </path>
-        </svg>
-    </div> {% endcomment %}
-{% comment %} {% endblock %} {% endcomment %}
+</head> {% endcomment %}
 </html>
diff --git a/ACMAS/app/ACMAS_Web/templates/pdf-reader.html b/ACMAS/app/ACMAS_Web/templates/pdf-reader.html
index a017968..1f676b6 100644
--- a/ACMAS/app/ACMAS_Web/templates/pdf-reader.html
+++ b/ACMAS/app/ACMAS_Web/templates/pdf-reader.html
@@ -15,23 +15,26 @@
 {% block facebook_url %}www.acmas.systems{% endblock %}
 
 {% block content %}
-
-<div class="flex flex-col mt-20 items-center justify-items-center">
-  <h1 class="text-5xl font-light text-gray-900 text-center pb-8" style="font-family: Inter, serif;">ACMAS Reader</h1>
-  <div class="h-96 w-2/3">
-    <div class="h-full w-full bg-white border border-black rounded-lg">
-      <embed src="{{directory}}" type="application/pdf" width="100%" height="100%" />
+<div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
+  <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
+  <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
+    <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
+      <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500 xl:h-96 lg:h-80 md:h-48">
+        <div class="h-full w-full bg-gray-100 text-gray-600 rounded-lg">
+          <embed src="{{ directory }}" type="application/pdf" width="100%" height="100%" />
+        </div>
+      </div>
     </div>
-  </div>
-
-  <span class="mt-6 flex gap-x-6">
-    <span onclick="window.location.href='searchByQuestion';">
-      {% component "button" text="Return to Homepage" component_type="primary" value="" %}
+    <span class="mt-4 flex justify-center items-center gap-x-4">
+      <form id="return-to-query" action="{% url 'returnQuery' %}">
+        {% component "button" text="Return to Query" component_type="primary" value="Return to Query" %}
+      </form>
+      <span onclick="window.location.href='/';">
+        {% component "button" text="Return to Homepage" component_type="secondary" value="" %}
+      </span>
     </span>
-    <form id="return-to-query" action="{% url 'returnQuery' %}">
-      {% component "button" text="Return to Query" component_type="primary" value="Return to Query" %}
-      {% comment %} <input type="submit" class="home-button button content" value="Return to Query"> {% endcomment %}
-    </form>
-  </span>
+  </div>
+</div>
+<div class="w-full absolute text-white bottom-0 z-3 "></div>
 </div>
 {% endblock %}
diff --git a/ACMAS/app/ACMAS_Web/templates/profile.html b/ACMAS/app/ACMAS_Web/templates/profile.html
index d22be1c..0304085 100644
--- a/ACMAS/app/ACMAS_Web/templates/profile.html
+++ b/ACMAS/app/ACMAS_Web/templates/profile.html
@@ -3,16 +3,26 @@
 {% block title %}Profile{% endblock %}
 
 {% block content %}
-<div class="flex flex-col mt-20">
-   <h1 class="text-3xl font-light text-gray-900 text-center mb-8" style="font-family: Inter, serif;">Hello {{user.username}}!</h1>
-   <div class="w-full flex items-center justify-center pt-2">
-      <br/> <br/>
-      <p class="mt-8">
-          Want to change it up?
-          <a href="{% url 'password_change' %}">
-              {% component "button" text="Change Password" component_type="secondary" value="" %}
-          </a>
-      </p>
-  </div>
+<div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
+    <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
+    <div class="container mx-auto px-4 z-3 relative lg:w-3/12">
+        <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
+            <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
+                <div class="flex-col flex space-y-4 w-full">
+                    <div class="flex justify-center text-gray-600">
+                        {% component "icon" icon="user" icon_type="mini" icon_class="w-20 h-20" %}
+                    </div>
+                    <div class="text-center py-2">
+                        <h2 class="text-4xl font-semibold text-center text-gray-700 mt-2 mb-1">{{ user.username }}</h2>
+                        <p class="text-gray-500 text-md">{{ user.email }}</p>
+                    </div>
+                    <a href="{% url 'password_change' %}">
+                        {% component "button" text="Change Password" component_type="secondary" value="" %}
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="w-full absolute text-white bottom-0 z-3 "></div>
 </div>
 {% endblock%}
diff --git a/ACMAS/app/ACMAS_Web/templates/register.html b/ACMAS/app/ACMAS_Web/templates/register.html
index c3e2a83..3fac8df 100644
--- a/ACMAS/app/ACMAS_Web/templates/register.html
+++ b/ACMAS/app/ACMAS_Web/templates/register.html
@@ -3,14 +3,28 @@
 {% block title %} Create an Account {% endblock %}
 
 {% block content %}
-<div class="flex flex-col mt-20">
-    <div class="w-full flex items-center justify-center">
+<div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
+    <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
+    <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
+      <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
+        <h1 class="text-5xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">Register</h1>
         <form method="POST" class="form-group"> {% csrf_token %}
-            {{ form }}
-            <div class="flex items-center justify-items-center justify-center mt-2">
-                {% component "button" text="Register" component_type="primary" value="submit" %}
+            <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
+                <div class="flex-col flex space-y-4 w-full">
+                    <div class="grid gap-6 md:grid-cols-2 w-full">
+                        {% component "field" component_type="text" placeholder="Enter username..." name="username" icon_name="academic-cap" %}
+                        {% component "field" component_type="text" placeholder="Enter email..." name="email" icon_name="academic-cap" %}
+                        {% component "field" component_type="password" placeholder="Enter password..." name="password" icon_name="academic-cap" %}
+                        {% component "field" component_type="password" placeholder="Confirm password..." name="password" icon_name="academic-cap" %}
+                    </div>
+                </div>
+                <div class="mx-auto">
+                    {% component "button" text="Register" component_type="primary" value="submit" %}
+                </div>
             </div>
         </form>
     </div>
 </div>
+<div class="w-full absolute text-white bottom-0 z-3 "></div>
+</div>
 {% endblock %}
diff --git a/ACMAS/app/ACMAS_Web/templates/registration/login.html b/ACMAS/app/ACMAS_Web/templates/registration/login.html
index 97dc71f..1fd016d 100644
--- a/ACMAS/app/ACMAS_Web/templates/registration/login.html
+++ b/ACMAS/app/ACMAS_Web/templates/registration/login.html
@@ -3,22 +3,28 @@
 {% block title %}Login{% endblock %}
 
 {%block content%}
-<div class="flex flex-col mt-20">
-    <div class="w-full flex items-center justify-center">
+<div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
+    <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
+    <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
+      <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
+        <h1 class="text-5xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">Login</h1>
         <form method="POST" class="form-group"> {% csrf_token %}
-            {{ form }}
-            <div class="flex items-center justify-items-center justify-center mt-2">
-                {% component "button" text="Login" component_type="primary" value="submit" %}
+            <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
+                <div class="flex-col flex space-y-4 w-full">
+                    {% component "field" component_type="text" placeholder="Enter username..." name="username" icon_name="academic-cap" %}
+                    {% component "field" component_type="password" placeholder="Enter password..." name="password" icon_name="academic-cap" %}
+                </div>
+                <div class="mx-auto">
+                    {% component "button" text="Login" component_type="primary" value="submit" %}
+                </div>
             </div>
         </form>
-    </div>
-    <div class="w-full flex items-center justify-center">
-        <p class="mt-8">
-            Don't have an account? Create one
-            <a href="/register">
-                {% component "button" text="Here" component_type="secondary" value="" %}
-            </a>
-        </p>
+        <div class="w-full flex items-center justify-center">
+            <p class="mt-8">
+                Don't have an account? Create one <a class="font-medium text-blue-600 dark:text-blue-500 hover:underline" href="/register">here</a>
+            </p>
+        </div>
     </div>
 </div>
+<div class="w-full absolute text-white bottom-0 z-3 "></div>
 {%endblock%}
diff --git a/ACMAS/app/ACMAS_Web/templates/search-by-course.html b/ACMAS/app/ACMAS_Web/templates/search-by-course.html
index cde6a89..d24eb59 100644
--- a/ACMAS/app/ACMAS_Web/templates/search-by-course.html
+++ b/ACMAS/app/ACMAS_Web/templates/search-by-course.html
@@ -14,91 +14,35 @@
 {% block facebook_url %}www.acmas.systems/searchByCourse{% endblock %}
 
 {% block content %}
-{% comment %} <div class="flex flex-col mt-20">
-  <h1 class="text-5xl font-light text-gray-900 text-center mb-8" style="font-family: Inter, serif;">Search by Course</h1>
-  <div class="pt-2 w-full flex items-center justify-center">
-    <form class="w-1/2 xs:w-2/3 justify-center" method="POST" enctype="multipart/form-data" action="{% url 'searchResults' %}"> {% csrf_token %}
-      <!-- School -->
-      <div class="mb-4">
-        {% component "field" component_type="text" placeholder="Enter University" name="school" %}
-      </div>
-      <div class="grid gap-6 mb-6 md:grid-cols-2">
-        <div>
-          {% component "field" component_type="text" placeholder="Enter Course" name="course" %}
-        </div>
-        <div>
-          <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
-            <option style="color: #D4D6D9;" value="All">Select assignment type</option>
-            <option value="All">All</option>
-            <option value="Assignment">Assignment</option>
-            <option value="Exam">Exam</option>
-            <option value="Practice">Practice</option>
-          </select>
-        </div>
-      </div>
-       <!-- Submit Button -->
-      <div class="flex items-center justify-items-center justify-center">
-        {% component "button" text="Search" component_type="primary" value="Search" %}
-      </div>
-    </form>
-  </div>
-</div> {% endcomment %}
-
-
 <div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
   <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
   <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
-      <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
-          <h1 class="text-6xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">Search by Course</h1>
-          <form method="POST" enctype="multipart/form-data" action="{% url 'searchResults' %}"> {% csrf_token %}
-            <!-- School -->
-            <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
-              <div class="flex-col flex space-y-4 w-full">
-                <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                  <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="school" placeholder="Enter university..." />
-                </div>
-                <div class="grid gap-6 mb-6 md:grid-cols-2 w-full">
-                  <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                    </svg>
-                    <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="course" placeholder="Enter course..." />
-                  </div>
-                  <div class="flex w-full">
-                    <select class="bg-gray-100 h-14 space-x-4 rounded-lg p-4 outline-none border-0 w-full ring-0 focus:ring-0" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
-                      <option style="color: #D4D6D9;" value="All">Select assignment type</option>
-                      <option value="All">All</option>
-                      <option value="Assignment">Assignment</option>
-                      <option value="Exam">Exam</option>
-                      <option value="Practice">Practice</option>
-                    </select>
-                  </div>
-                </div>
+    <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
+      <h1 class="text-6xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">Search by Course</h1>
+      <form method="POST" enctype="multipart/form-data" action="{% url 'searchResults' %}"> {% csrf_token %}
+        <!-- School -->
+        <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
+          <div class="flex-col flex space-y-4 w-full">
+            {% component "field" component_type="text" placeholder="Enter university..." name="school" icon_name="academic-cap" %}
+            <div class="grid gap-6 mb-6 md:grid-cols-2 w-full">
+              {% component "field" component_type="text" placeholder="Enter course..." name="course" icon_name="book-open" %}
+              <div class="flex w-full">
+                <select class="bg-gray-100 h-14 space-x-4 rounded-lg p-4 outline-none border-0 w-full ring-0 focus:ring-0" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
+                  <option style="color: #D4D6D9;" value="All">Select assignment type</option>
+                  <option value="All">All</option>
+                  <option value="Assignment">Assignment</option>
+                  <option value="Exam">Exam</option>
+                  <option value="Practice">Practice</option>
+                </select>
               </div>
-              <div class="mx-auto">
-                <button type="submit" class="px-5 py-3 rounded-xl text-white font-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="Search">Search</button>
-              </div>
-            </div>
-            {% comment %} <div class="mb-4">
-              {% component "field" component_type="text" placeholder="Enter University" name="school" %}
             </div>
-            <div class="grid gap-6 mb-6 md:grid-cols-2">
-              <div>
-                {% component "field" component_type="text" placeholder="Enter Course" name="course" %}
-              </div>
-              <div>
-                
-              </div>
-            </div> {% endcomment %}
-             <!-- Submit Button -->
-            {% comment %} <div class="flex items-center justify-items-center justify-center">
-              {% component "button" text="Search" component_type="primary" value="Search" %}
-            </div> {% endcomment %}
-          </form>
-      </div>
+          </div>
+          <div class="mx-auto">
+            {% component "button" text="Search" component_type="primary" value="Search" %}
+          </div>
+        </div>
+      </form>
+    </div>
   </div>
   <div class="w-full absolute text-white bottom-0 z-3 "></div>
 </div>
diff --git a/ACMAS/app/ACMAS_Web/templates/search-by-question.html b/ACMAS/app/ACMAS_Web/templates/search-by-question.html
index 55dc591..bc97632 100644
--- a/ACMAS/app/ACMAS_Web/templates/search-by-question.html
+++ b/ACMAS/app/ACMAS_Web/templates/search-by-question.html
@@ -15,44 +15,18 @@
 {% block facebook_url %}www.acmas.systems/searchByQuestion{% endblock %}
 
 {% block content %}
-<!-- Header -->
-{% comment %} <div class="flex flex-col mt-20">
-  <h1 class="text-5xl font-light text-gray-900 text-center mb-8" style="font-family: Inter, serif;">Search by Question</h1>
-  <div class="pt-2 w-full flex items-center justify-center">
-    <form class="w-1/2 xs:w-2/3 justify-center" id="manual-entry-form" method="POST" enctype="multipart/form-data" action="{% url 'searchByQuestion' %}"> {% csrf_token %}
-      <div class="mb-4">
-        {% component "field" component_type="text" placeholder="Enter your question" name="question" %}
-      </div>
-      <div class="flex items-center justify-items-center justify-center">
-        {% component "button" text="Search" component_type="primary" value="Search" %}
-      </div>
-    </form>
-  </div>
-</div> {% endcomment %}
-
 <div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
   <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
   <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
       <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
           <h1 class="text-6xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">Search by Question</h1>
           <form id="manual-entry-form" method="POST" enctype="multipart/form-data" action="{% url 'searchByQuestion' %}"> {% csrf_token %}
-            {% comment %} <div class="flex justify-center">
-              <input type="text" class="bg-white text-[#327796] border border-3 border-[#ff7575] w-96 shadow-md text-lg rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-4" placeholder="Enter question">
-            </div> {% endcomment %}
-            <div class="flex items-center p-6 space-x-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
-              <div class="flex bg-gray-100 p-4 w-72 h-14 space-x-4 rounded-lg w-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="question" placeholder="Enter question..." />
-              </div>
+            <div class="flex items-center p-6 space-x-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500 w-full">
+              {% component "field" component_type="text" placeholder="Enter question..." name="question" icon_name="magnifying-glass" %}
               <div>
-                <button type="submit" class="px-5 py-3 rounded-xl text-white font-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="Search">Search</button>
+                {% component "button" text="Search" component_type="primary" value="Search" %}
               </div>
             </div>
-            {% comment %} <div class="flex items-center justify-items-center justify-center">
-              {% component "button" text="Search" component_type="primary" value="Search" %}
-            </div> {% endcomment %}
           </form>
       </div>
   </div>
diff --git a/ACMAS/app/ACMAS_Web/templates/search-results.html b/ACMAS/app/ACMAS_Web/templates/search-results.html
index a148e00..a27ddc4 100644
--- a/ACMAS/app/ACMAS_Web/templates/search-results.html
+++ b/ACMAS/app/ACMAS_Web/templates/search-results.html
@@ -15,40 +15,45 @@
 {% block facebook_url %}www.acmas.systems{% endblock %}
 
 {% block content %}
-<div class="flex flex-col mt-20 items-center justify-items-center">
-  <h1 class="text-5xl font-light text-gray-900 text-center pb-8" style="font-family: Inter, serif;">Search Results</h1>
-  <div class="w-2/3 h-96">
-      {% if not files %}
-        <div class="flex flex-col w-full">
-          <div class="flex justify-center mb-3">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
-            </svg>
+<div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
+  <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
+  <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
+    <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
+      <h1 class="text-6xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">Search Results</h1>
+      <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
+        {% if not files %}
+          <div class="mx-auto flex flex-col items-center justify-center w-full">
+            <div class="flex justify-center mb-3">
+              {% component "icon" icon="magnifying-glass" icon_type="mini" icon_class="w-6 h-6 flex-shrink-0 text-gray-400" %}
+            </div>
+            <h2 class="text-gray-500">Sorry, we couldn't find what you're looking for.</h2>
           </div>
-          <div class="flex justify-center">
-            <h2>Sorry, we couldn't find what you're looking for.</h2>
+        {% else %}
+          <div class="flex-col flex space-y-2 w-full">
+            {% for file in files %}
+            <div class="flex w-full p-3 rounded-md bg-gray-100 border-0 text-gray-700 items-center">
+              <a class="mr-auto">{{ file.filename }}</a>
+              <form class="" method="GET" action="{% url 'pdfReader' %}">
+                <button class="px-5 py-3 rounded-xl text-gray-700 font-semibold border border-gray-300 text-lg bg-white hover:bg-gray-100 transition ease-in duration-200" name="url" value="{{file.filename}}" type="submit" aria-label="{{file.filename}}">View</button>
+              </form>
+            </div>
+            {% endfor %}
           </div>
-        </div>
+        {% endif %}
+      </div>
+      <span class="mt-4 flex justify-center items-center gap-x-4">
+      {% if manual == True %}
+        <span onclick="window.location.href='searchByQuestion';">
+          {% component "button" text="New Search" component_type="primary" value="" %}
+        </span>
+      {% else %}
+        <span onclick="window.location.href='searchByCourse';">
+          {% component "button" text="New Search" component_type="primary" value="" %}
+        </span>
       {% endif %}
-    <div class="grid grid-cols-1">
-      {% for file in files %}
-        <div class="flex w-full bg-white p-4 rounded-md border border-gray-100 items-center">
-          <a class="mr-auto">{{ file.filename }}</a>
-          <form class="" method="GET" action="{% url 'pdfReader' %}">
-            <button class="px-4 py-2 rounded-xl text-gray-700 text-semibold border border-gray-300 text-lg bg-white hover:bg-gray-100 transition ease-in duration-200" name="url" value="{{file.filename}}" type="submit" aria-label="{{file.filename}}">View</button>
-          </form>
-        </div>
-      {% endfor %}
+      </span>
     </div>
   </div>
-  {% if manual == True %}
-    <span onclick="window.location.href='searchByQuestion';">
-      {% component "button" text="New Search" component_type="primary" value="" %}
-    </span>
-  {% else %}
-    <span onclick="window.location.href='searchByCourse';">
-      {% component "button" text="New Search" component_type="primary" value="" %}
-    </span>
-  {% endif %}
+  <div class="w-full absolute text-white bottom-0 z-3 "></div>
 </div>
 {% endblock %}
diff --git a/ACMAS/app/ACMAS_Web/templates/upload-file.html b/ACMAS/app/ACMAS_Web/templates/upload-file.html
index 89c2c8e..98c6259 100644
--- a/ACMAS/app/ACMAS_Web/templates/upload-file.html
+++ b/ACMAS/app/ACMAS_Web/templates/upload-file.html
@@ -29,23 +29,13 @@ <h1 class="display-3" style="text-align: center">Anonymous ACMAS Upload</h1>
             <h5 style="text-align: center"><i>Note: Anonymous uploads need to be approved by a moderator before being published to ACMAS</i></h1>
           {%endblock%}
         {% endif %}
-        <form method="POST" enctype="multipart/form-data" action="{% url 'searchResults' %}"> {% csrf_token %}
+        <form method="POST" enctype="multipart/form-data" action="{% url 'uploadFile' %}"> {% csrf_token %}
           <!-- School -->
           <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
             <div class="flex-col flex space-y-4 w-full">
-              <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="school" placeholder="Enter university..." />
-              </div>
+              {% component "field" component_type="text" placeholder="Enter university..." name="school" icon_name="academic-cap" %}
               <div class="grid gap-6 mb-6 md:grid-cols-2 w-full">
-                <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                  <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="course" placeholder="Enter course..." />
-                </div>
+                {% component "field" component_type="text" placeholder="Enter course..." name="course" icon_name="book-open" %}
                 <div class="flex w-full">
                   <select class="bg-gray-100 h-14 space-x-4 rounded-lg p-4 outline-none border-0 w-full ring-0 focus:ring-0" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
                     <option style="color: #D4D6D9;" value="All">Select assignment type</option>
@@ -64,12 +54,12 @@ <h5 style="text-align: center"><i>Note: Anonymous uploads need to be approved by
               {% if user.is_authenticated %}
                 {% block submitNew %}
                   <!-- Submit Button-->
-                  <button type="submit" class="px-5 py-3 rounded-xl text-white font-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="Upload">Upload</button>
+                  {% component "button" text="Upload" component_type="primary" value="Upload" %}
                 {% endblock %}
               {% else %}
                 {% block submitQueue %}
                   <!--Submit to Queue-->
-                  <button type="submit" class="px-5 py-3 rounded-xl text-white font-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="Upload to Moderation Queue">Upload</button>
+                  {% component "button" text="Upload" component_type="primary" value="Upload to Moderation Queue" %}
                 {% endblock %}
               {% endif %}
             </div>
@@ -80,49 +70,3 @@ <h5 style="text-align: center"><i>Note: Anonymous uploads need to be approved by
 <div class="w-full absolute text-white bottom-0 z-3 "></div>
 </div>
 {% endblock %}
-
-{% comment %} 
-  <div class="pt-2 w-full flex items-center justify-center">
-    <form class="w-1/2 xs:w-2/3 justify-center" id="school-course-input" method="POST" enctype="multipart/form-data" action="{% url 'uploadFile' %}"> {% csrf_token %}
-      <!-- School -->
-      <div class="mb-4">
-        {% component "field" component_type="text" placeholder="Enter University" name="school" %}
-      </div>
-
-      <div class="grid gap-6 mb-4 md:grid-cols-2">
-        <div>
-          {% component "field" component_type="text" placeholder="Enter Course" name="course" %}
-        </div>
-        <div>
-          <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
-            <option style="color: #D4D6D9;" value="All">Select assignment type</option>
-            <option value="All">All</option>
-            <option value="Assignment">Assignment</option>
-            <option value="Exam">Exam</option>
-            <option value="Practice">Practice</option>
-          </select>
-        </div>
-      </div>
-      <!-- Upload Button -->
-      <div class="mb-6">
-        {% component "field" component_type="input" placeholder="Upload File" name="fileUpload" %}
-      </div>
-      {%if user.is_authenticated %}
-        {%block submitNew%}
-          <!-- Submit Button-->
-        <div class="flex items-center justify-items-center justify-center">
-          {% component "button" text="Upload" component_type="primary" value="Upload" %}
-        </div>
-        {%endblock%}
-      {% else %}
-        {%block submitQueue%}
-          <!--Submit to Queue-->
-          <div class="col-md-12 user-inpt h-100 d-flex align-items-center justify-content-center">
-            <input type="submit" class="btn btn-primary btn-lg" value="Upload to Moderation Queue"/>
-          </div>
-        {%endblock%}
-      {% endif %}
-    </form>
-  </div>
-</div>
-{% endblock %} {% endcomment %}
diff --git a/ACMAS/app/ACMAS_Web/templates/upload-manually.html b/ACMAS/app/ACMAS_Web/templates/upload-manually.html
index 0c36d17..0420f67 100644
--- a/ACMAS/app/ACMAS_Web/templates/upload-manually.html
+++ b/ACMAS/app/ACMAS_Web/templates/upload-manually.html
@@ -14,81 +14,19 @@
 {% block facebook_url %}www.acmas.systems/upload-manually{% endblock %}
 
 {% block content %}
-{% comment %} <div class="flex flex-col mt-20">
-  <!-- Header -->
-  <h1 class="text-5xl font-light text-gray-900 text-center mb-8" style="font-family: Inter, serif;">ACMAS Upload</h1>
-  <div class="pt-2 w-full flex items-center justify-center">
-    <form class="w-1/2 xs:w-2/3 justify-center justify-content-center align-items-center" id="school-course-input" method="POST" enctype="multipart/form-data" action="{% url 'uploadManually' %}"> {% csrf_token %}
-      <!-- School -->
-      <div class="mb-4">
-        {% component "field" component_type="text" placeholder="Enter University" name="school" %}
-      </div>
-      <!-- Course -->
-      <div class="mb-6">
-        {% component "field" component_type="text" placeholder="Enter Course" name="course" %}
-      </div>
-      <!-- Question -->
-      <div class="mb-4">
-        {% component "field" component_type="text" placeholder="Enter Question" name="question" %}
-      </div>
-      <!-- Answer -->
-      <div class="mb-4">
-        {% component "field" component_type="text" placeholder="Enter Answer" name="answer" %}
-      </div>
-        <!-- Assignment Dropdown -->
-      <div class="mb-4 flex justify-content-center items-center justify-center justify-items-center">
-        <div class="w-1/2">
-          <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
-            <option style="color: #D4D6D9;" value="All">Select assignment type</option>
-            <option value="All">All</option>
-            <option value="Assignment">Assignment</option>
-            <option value="Exam">Exam</option>
-            <option value="Practice">Practice</option>
-          </select>
-          {% comment %} {% component "select" placeholder="Select assignment type" name="type" options="types" %} {% endcomment %}
-        {% comment %} </div>
-      </div>
-      <!-- Submit Button-->
-      <div class="flex items-center justify-items-center justify-center">
-        {% component "button" text="Upload" component_type="primary" value="Upload" %}
-      </div>
-    </form>
-  </div>
-</div> {% endcomment %}
-
 <div class="p-0 flex items-center overflow-hidden relative" style="height: 85vh;">
   <div class="absolute w-full h-full" style="background: linear-gradient(-45deg, #f8f8f3, #f5f2d6, #dbebf3, #c6d6f7); background-size: 300% 300%; animation: gradient 65s ease infinite;"> </div>
   <div class="container mx-auto px-4 z-3 relative lg:w-6/12">
       <div class="justify-center flex flex-wrap flex-col -mx-4 text-center">
         <h1 class="text-6xl font-semibold text-white leading-tight -mt-8 mb-6" style="color: #327796">ACMAS Upload</h1>
-        <form method="POST" enctype="multipart/form-data" action="{% url 'searchResults' %}"> {% csrf_token %}
+        <form method="POST" enctype="multipart/form-data" action="{% url 'uploadManually' %}"> {% csrf_token %}
           <!-- School -->
           <div class="flex items-center space-x-6 p-6 bg-white rounded-xl shadow-lg hover:shadow-xl transition duration-500">
             <div class="flex-col flex space-y-4 w-full">
-              <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="school" placeholder="Enter university..." />
-              </div>
-              <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="course" placeholder="Enter course..." />
-              </div>
-              <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="question" placeholder="Enter question..." />
-              </div>
-              <div class="flex bg-gray-100 p-4 h-14 space-x-4 rounded-lg w-full">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 opacity-30" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                </svg>
-                <input class="bg-gray-100 outline-none border-0 w-full ring-0 focus:ring-0" type="text" name="answer" placeholder="Enter answer..." />
-              </div>
+              {% component "field" component_type="text" placeholder="Enter university..." name="school" icon_name="academic-cap" %}
+              {% component "field" component_type="text" placeholder="Enter course..." name="course" icon_name="book-open" %}
+              {% component "field" component_type="text" placeholder="Enter question..." name="question" icon_name="question-mark-circle" %}
+              {% component "field" component_type="text" placeholder="Enter answer..." name="answer" icon_name="light-bulb" %}
               <div class="flex w-full">
                 <select class="bg-gray-100 h-14 space-x-4 rounded-lg p-4 outline-none border-0 w-full ring-0 focus:ring-0" placeholder="Select assignment type" autocomplete="on" name="type" label="Search type selection">
                   <option style="color: #D4D6D9;" value="All">Select assignment type</option>
@@ -100,7 +38,7 @@ <h1 class="text-6xl font-semibold text-white leading-tight -mt-8 mb-6" style="co
               </div>
             </div>
             <div class="mx-auto">
-              <button type="submit" class="px-5 py-3 rounded-xl text-white font-semibold text-lg bg-blue-600 hover:bg-blue-700 transition ease-in duration-200" value="Upload">Upload</button>
+              {% component "button" text="Upload" component_type="primary" value="Upload" %}
           </div>
         </form>
     </div>