diff --git a/qgis-app/models/templatetags/resources_utils.py b/qgis-app/models/templatetags/resources_utils.py
index 0782f3f..68a88e0 100755
--- a/qgis-app/models/templatetags/resources_utils.py
+++ b/qgis-app/models/templatetags/resources_utils.py
@@ -95,4 +95,13 @@ def get_sustaining_members_section():
         else:
             return "Section not found"
     except requests.RequestException as e:
-        return f"Error: {e}"
\ No newline at end of file
+        return f"Error: {e}"
+
+@register.filter
+def get_string_tags(tags):
+    """
+    Get the string representation of tags
+    """
+    if not tags:
+        return ''
+    return ', '.join([tag.name for tag in tags])
\ No newline at end of file
diff --git a/qgis-app/static/js/resource_upload.js b/qgis-app/static/js/resource_upload.js
index 3872646..7ca5985 100644
--- a/qgis-app/static/js/resource_upload.js
+++ b/qgis-app/static/js/resource_upload.js
@@ -5,13 +5,13 @@
 let disableSubmit = () =>{
     $("#licenseAgreed").prop('disabled', true);
     $("#licenseAgreed").removeClass()
-    $("#licenseAgreed").addClass("btn")
+    $("#licenseAgreed").addClass("button")
 }
 
 let enableSubmit = () => {
     $("#licenseAgreed").prop('disabled', false);
     $("#licenseAgreed").removeClass()
-    $("#licenseAgreed").addClass("btn btn-primary")
+    $("#licenseAgreed").addClass("button is-success")
 }
 
 // Disable submit button
diff --git a/qgis-app/static/style/scss/style.scss b/qgis-app/static/style/scss/style.scss
index c7df222..f0e6015 100644
--- a/qgis-app/static/style/scss/style.scss
+++ b/qgis-app/static/style/scss/style.scss
@@ -328,3 +328,11 @@ a.is-active > span {
     height: 16px;
     display:block;
   }
+
+#tag-suggestions {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  max-height: 250px;
+  overflow: auto;
+}
diff --git a/qgis-app/templates/base/form_snippet.html b/qgis-app/templates/base/form_snippet.html
index 313f989..84dda0f 100644
--- a/qgis-app/templates/base/form_snippet.html
+++ b/qgis-app/templates/base/form_snippet.html
@@ -1,156 +1,217 @@
 {% load i18n resources_custom_tags resources_utils %}
-<fieldset class="box-content">
-    {% for field in form %}
-    <div class="field {{ field.css_classes }}">
-      {% if field.field.widget|klass == 'CheckboxInput' %}
+<fieldset>
+  {% for field in form %}
+  <div class="field {{ field.css_classes }}">
+    {% if field.field.widget|klass == 'CheckboxInput' %}
+    <div class="control">
+      <label for="{{ field.html_name }}" class="checkbox label{{ field.css_classes }}">
+        <input type="checkbox" id="{{ field.html_name }}" name="{{ field.html_name }}" {% if field.value %}checked="checked"{% endif %} />
+        {{ field.label }}
+      </label>
+      {% if field.errors %}
+        {% for error in field.errors %}
+          <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+        {% endfor %}
+      {% endif %}
+    </div>
+    {% elif field.field.widget|klass == 'ClearableFileInput' %}
+    <div class="file has-name">
+      <label class="file-label">
+        <input class="file-input" type="file" id="{{ field.html_name }}" name="{{ field.html_name }}" />
+        <span class="file-cta">
+          <span class="file-icon">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </span>
+          <span class="file-label">{{ field.label }}</span>
+        </span>
+        <span class="file-name" id="filename">Choose a file…</span>
+      </label>
+    </div>
+    {% if field.errors %}
+      {% for error in field.errors %}
+        <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+      {% endfor %}
+    {% endif %}
+    {% elif field.field.widget|klass == 'Textarea' %}
+    <div class="field">
+      <label class="label">{{ field.label_tag }}</label>
       <div class="control">
-        <label
-          for="{{ field.html_name }}"
-          class="checkbox label{{ field.css_classes }}"
-        >
-          <input
-            type="checkbox"
-            id="{{ field.html_name }}"
-            name="{{ field.html_name }}"
-            {%
-            if
-            field.value
-            %}checked="checked"
-            {%
-            endif
-            %}
-          />
-          {{ field.label }}
-        </label>
-          {% if field.errors %}
-            {% for error in field.errors  %}
-              <p class="help is-danger has-text-weight-medium">{{ error }}</p>
-            {% endfor %}
-          {% endif %} 
+        <textarea class="textarea" placeholder="{{ field.help_text | safe }}" id="{{ field.html_name }}" name="{{ field.html_name }}">{{ field.value|default_if_none:'' }}</textarea>
       </div>
-      {% elif field.field.widget|klass == 'ClearableFileInput' %}
-      <div class="file has-name">
-        <label class="file-label">
-          <input
-            class="file-input"
-            type="file"
-            id="{{ field.html_name }}"
-            name="{{ field.html_name }}"
-          />
-          <span class="file-cta">
-            <span class="file-icon">
-              <i class="fas fa-cloud-upload-alt"></i>
-            </span>
-            <span class="file-label"> {{ field.label }} </span>
-          </span>
-          <span class="file-name" id="filename"> Choose a file… </span>
-        </label>
+      {% if field.errors %}
+        <p class="help is-danger">{{ field.errors }}</p>
+      {% endif %}
+    </div>
+    {% elif field.field.widget|klass == 'TextInput' or field.field.widget|klass == 'URLInput' %}
+    <div class="field">
+      <label class="label">{{ field.label_tag }}</label>
+      <div class="control">
+        <input class="input" type="text" placeholder="{{ field.help_text | safe }}" id="{{ field.html_name }}" name="{{ field.html_name }}" value="{{ field.value|default_if_none:'' }}" />
       </div>
       {% if field.errors %}
-        {% for error in field.errors  %}
+        {% for error in field.errors %}
           <p class="help is-danger has-text-weight-medium">{{ error }}</p>
         {% endfor %}
-      {% endif %} 
-      {% elif field.field.widget|klass == 'Textarea' %}
-        <div class="field">
-          <label class="label">{{ field.label_tag }}</label>
-          <div class="control">
-              <textarea 
-                class="textarea" 
-                placeholder="{{ field.help_text | safe }}" 
-                id="{{ field.html_name }}"
-                name="{{ field.html_name }}"
-              >{{ field.value|default_if_none:'' }}</textarea>
-          </div>
-          {% if field.errors %}
-            <p class="help is-danger">{{ field.errors }}</p>
-          {% endif %} 
-        </div>
-      {% elif field.field.widget|klass == 'TextInput' or field.field.widget|klass == 'URLInput' %}
-        <div class="field">
-          <label class="label">{{ field.label_tag }}</label>
-          <div class="control">
-            <input class="input" type="text" 
-            placeholder="{{ field.help_text | safe }}" 
-            id="{{ field.html_name }}"
-            name="{{ field.html_name }}"
-            value="{{ field.value|default_if_none:'' }}"
-            >
-          </div>
-          {% if field.errors %}
-            {% for error in field.errors  %}
-              <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+      {% endif %}
+    </div>
+    {% elif field.field.widget|klass == 'EmailInput' %}
+    <div class="field">
+      <label class="label">{{ field.label_tag }}</label>
+      <div class="control has-icons-left">
+        <input class="input" type="email" id="{{ field.html_name }}" name="{{ field.html_name }}" value="{{ field.value|default_if_none:'' }}" />
+        <span class="icon is-small is-left">
+          <i class="fas fa-envelope"></i>
+        </span>
+      </div>
+      {% if field.errors %}
+        {% for error in field.errors %}
+          <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+        {% endfor %}
+      {% endif %}
+    </div>
+    {% elif field.field.widget|klass == 'Select' %}
+    <div class="field">
+      <label class="label">{{ field.label_tag }}</label>
+      <div class="control">
+        <div class="select">
+          <select id="{{ field.html_name }}" name="{{ field.html_name }}">
+            {% for value, label in field.field.choices %}
+              <option value="{{ value }}" {% if field.value == value %}selected{% endif %}>{{ label }}</option>
             {% endfor %}
-          {% endif %} 
+          </select>
         </div>
-      {% elif field.field.widget|klass == 'EmailInput' %}
-      <div class="field">
-        <label class="label">{{ field.label_tag }}</label>
-        <div class="control has-icons-left">
-          <input class="input" type="email" 
-          id="{{ field.html_name }}"
-          name="{{ field.html_name }}"
-          value="{{ field.value|default_if_none:'' }}"
-          >
-          <span class="icon is-small is-left">
-            <i class="fas fa-envelope"></i>
-          </span>
-        </div>
-          {% if field.errors %}
-            {% for error in field.errors  %}
-              <p class="help is-danger has-text-weight-medium">{{ error }}</p>
-            {% endfor %}
-          {% endif %} 
       </div>
-      {% elif field.field.widget|klass == 'Select' %}
-      <div class="field">
-        <label class="label">{{ field.label_tag }}</label>
-        <div class="control">
-          <div class="select">
-            <select id="{{ field.html_name }}" name="{{ field.html_name }}">
-              {% for value, label in field.field.choices %}
-                <option value="{{ value }}" {% if field.value == value %}selected{% endif %}>
-                  {{ label }}
-                </option>
-              {% endfor %}
-            </select>
-          </div>
-        </div>
-          {% if field.errors %}
-            {% for error in field.errors  %}
-              <p class="help is-danger has-text-weight-medium">{{ error }}</p>
-            {% endfor %}
-          {% endif %} 
+      {% if field.errors %}
+        {% for error in field.errors %}
+          <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+        {% endfor %}
+      {% endif %}
+    </div>
+    {% elif field.field.widget|klass == 'TagWidget' %}
+    <div class="field">
+      <label class="label">{{ field.label_tag }}</label>
+      <div class="control input is-block" style="height: fit-content;">
+        <div id="selected-tags" class="tags mb-0"></div>
+        <input type="hidden" name="{{ field.html_name }}" id="{{ field.html_name }}" value="{{ field.value|get_string_tags }}">
+        <input 
+          id="tag-input" 
+          type="text" 
+          class="input p-0" 
+          style="border: none; box-shadow: none;"
+          placeholder="Type to search for tags..." 
+          />
       </div>
-      {% else %} 
-      <div class="field">
-        <label class="label">{{ field.label_tag }}</label>
-        <div class="control">
-          {{ field }}
-        </div>
-          {% if field.errors %}
-            {% for error in field.errors  %}
-              <p class="help is-danger has-text-weight-medium">{{ error }}</p>
-            {% endfor %}
-          {% endif %} 
+      <div class="control">
+        <div id="tag-suggestions" class="dropdown-content is-hidden"></div>
+      </div>
+    </div>
+    {% else %}
+    <div class="field">
+      <label class="label">{{ field.label_tag }} {{ field.field.widget|klass }}</label>
+      <div class="control">
+        {{ field }}
       </div>
+      {% if field.errors %}
+        {% for error in field.errors %}
+          <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+        {% endfor %}
       {% endif %}
-      <div class="help has-text-grey">{{ field.help_text | safe }}</div>
     </div>
-    {% endfor %}
-  </fieldset>
-  
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-      const fileInput = document.querySelector(".file-input");
-      const fileName = document.querySelector("#filename");
-  
-      fileInput.addEventListener("change", function () {
-        if (fileInput.files.length > 0) {
-          fileName.textContent = fileInput.files[0].name;
-        } else {
-          fileName.textContent = "Choose a file…";
-        }
-      });
+    {% endif %}
+    <div class="help has-text-grey">{{ field.help_text | safe }}</div>
+  </div>
+  {% endfor %}
+</fieldset>
+
+<script>
+  $(document).ready(function () {
+    const fileInput = $(".file-input");
+    const fileName = $("#filename");
+    const hiddenInput = $('#tags');
+    const tagInput = $('#tag-input');
+    const suggestionBox = $('#tag-suggestions');
+    const selectedTags = $('#selected-tags');
+
+    // Initialize selected tags if hidden input has values
+    const initialTags = hiddenInput.val().split(',');
+    initialTags.forEach(tagName => {
+      if (tagName.trim() !== '') {
+        addTag(tagName.trim());
+      }
     });
-  </script>
+
+    fileInput.on("change", function () {
+      if (fileInput[0].files.length > 0) {
+        fileName.text(fileInput[0].files[0].name);
+      } else {
+        fileName.text("Choose a file…");
+      }
+    });
+
+    tagInput.on('input', function () {
+      const query = tagInput.val();
+
+      if (query.length > 1) {
+        $.ajax({
+          url: `/taggit_autosuggest/list/?q=${query}`,
+          method: 'GET',
+          success: function (suggestions) {
+            // Clear previous suggestions
+            suggestionBox.empty();
+
+            // Display new suggestions
+            suggestions.forEach(tag => {
+              const tagElement = $('<a class="dropdown-item"></a>').addClass('dropdown-item').text(tag.name);
+              tagElement.on('click', function () {
+                addTag(tag.name);
+              });
+              suggestionBox.append(tagElement);
+            });
+
+            // Add option to add new tag if no suggestions match
+            if (suggestions.length === 0) {
+              const addNewTagElement = $('<a class="dropdown-item"></a>').addClass('dropdown-item').text(`Add "${query}"`);
+              addNewTagElement.on('click', function () {
+                addTag(query);
+              });
+              suggestionBox.append(addNewTagElement);
+            }
+
+            suggestionBox.removeClass('is-hidden');
+          }
+        });
+      } else {
+        suggestionBox.addClass('is-hidden');
+      }
+    });
+
+    function addTag(tagName) {
+      // Check if tag already exists
+      if (selectedTags.children().toArray().some(tag => $(tag).text().trim() === tagName)) return;
+
+      // Add tag to selected tags
+      const tagEl = $('<span></span>').addClass('tag is-info m-1').text(tagName);
+
+      const deleteBtn = $('<button></button>').addClass('delete is-small');
+      deleteBtn.on('click', function () {
+        tagEl.remove();
+        updateHiddenInput();
+      });
+
+      tagEl.append(deleteBtn);
+      selectedTags.append(tagEl);
+
+      // Clear suggestions and input
+      suggestionBox.addClass('is-hidden');
+      tagInput.val('');
+
+      // Update hidden input
+      updateHiddenInput();
+    }
+
+    function updateHiddenInput() {
+      const tags = selectedTags.children().toArray().map(tag => $(tag).text().trim());
+      hiddenInput.val(tags.join(','));
+    }
+  });
+</script>
diff --git a/qgis-app/templates/base/update_form.html b/qgis-app/templates/base/update_form.html
index 8861056..ba23179 100644
--- a/qgis-app/templates/base/update_form.html
+++ b/qgis-app/templates/base/update_form.html
@@ -1,49 +1,5 @@
 {% extends "base/base.html" %}{% load i18n static%}
 
-{% block extrajs %}
-{{ block.super }}
-<script type="text/javascript">
-    // Puts the included jQuery into our own namespace
-    var django = {
-        "jQuery": jQuery.noConflict(true)
-    };
-
-    (function ($) {
-        var tags_as_string;
-        $(document).ready(function (){
-            tags_as_string = $('#id_tags').val();
-            $('#id_tags').hide();
-            $('#id_tags').before('<input type="text" id="id_tags__tagautosuggest" value="" name="tags" autocomplete="off" class="as-input vTextField"><br />');
-            $("#id_tags__tagautosuggest").val(tags_as_string);
-            $("#id_tags__tagautosuggest").autoSuggest("/taggit_autosuggest/list/", {
-                asHtmlID: "id_tags__tagautosuggest",
-                startText: "Enter Tag Here",
-                emptyText: "Not found (press TAB to add)",
-                limitText: "No More Selections Are Allowed",
-                preFill: tags_as_string,
-                queryParam: 'q',
-                retrieveLimit: 100,
-                minChars: 1,
-                neverSubmit: true
-            });
-
-            $('.as-selections').addClass('vTextField');
-            $('ul.as-selections li.as-original input').addClass('vTextField');
-
-            $('#id_tags').parents().find('form').submit(function (){
-                tags_as_string = $("#as-values-id_tags__tagautosuggest").val();
-                $("#id_tags__tagautosuggest").remove();
-                $("#id_tags").val(tags_as_string);
-            });
-
-        });
-    })(django.jQuery);
-</script>
-<script src="{% static "jquery-autosuggest/js/jquery.autoSuggest.minified.js" %}" type="text/javascript"></script>
-<script src="{% static "js/chosen.jquery.min.js" %}" type="text/javascript"></script>
-
-{% endblock %}
-
 {% block extracss %}
 <link rel="stylesheet" media="all" type="text/css" href="{% static "jquery-autosuggest/css/autoSuggest.css" %}">
 {{ block.super }}
@@ -83,11 +39,11 @@ <h2 class="title is-4">{% trans "Update" %} {{ resource_name }}: {{ object.name
     </div>
     {% endif %}
 
-    <form method="post" enctype="multipart/form-data">
+    <form method="post" enctype="multipart/form-data" class="box-content">
         {% csrf_token %}
         {% include "base/form_snippet.html" %}
-        <div class="form-actions has-text-right mt-3">
-            <button class="button is-success" type="submit">
+        <div class="form-actions has-text-centered">
+            <button class="button is-success is-medium" type="submit">
             <span class="icon is-small">
                 <i class="fas fa-check"></i>
             </span>
diff --git a/qgis-app/templates/base/upload_form.html b/qgis-app/templates/base/upload_form.html
index 2a881aa..07b3468 100644
--- a/qgis-app/templates/base/upload_form.html
+++ b/qgis-app/templates/base/upload_form.html
@@ -1,49 +1,5 @@
 {% extends "base/base.html" %}{% load i18n static %}
 
-{% block extrajs %}
-{{ block.super }}
-<script type="text/javascript">
-    // Puts the included jQuery into our own namespace
-    var django = {
-        "jQuery": jQuery.noConflict(true)
-    };
-
-    (function ($) {
-        var tags_as_string;
-        $(document).ready(function (){
-            tags_as_string = $('#id_tags').val();
-            $('#id_tags').hide();
-            $('#id_tags').before('<input type="text" id="id_tags__tagautosuggest" value="" name="tags" autocomplete="off" class="as-input vTextField"><br />');
-            $("#id_tags__tagautosuggest").val(tags_as_string);
-            $("#id_tags__tagautosuggest").autoSuggest("/taggit_autosuggest/list/", {
-                asHtmlID: "id_tags__tagautosuggest",
-                startText: "Enter Tag Here",
-                emptyText: "Not found (press TAB to add)",
-                limitText: "No More Selections Are Allowed",
-                preFill: tags_as_string,
-                queryParam: 'q',
-                retrieveLimit: 100,
-                minChars: 1,
-                neverSubmit: true
-            });
-
-            $('.as-selections').addClass('vTextField');
-            $('ul.as-selections li.as-original input').addClass('vTextField');
-
-            $('#id_tags').parents().find('form').submit(function (){
-                tags_as_string = $("#as-values-id_tags__tagautosuggest").val();
-                $("#id_tags__tagautosuggest").remove();
-                $("#id_tags").val(tags_as_string);
-            });
-
-        });
-    })(django.jQuery);
-</script>
-<script src="{% static "jquery-autosuggest/js/jquery.autoSuggest.minified.js" %}" type="text/javascript"></script>
-<script src="{% static "js/chosen.jquery.min.js" %}" type="text/javascript"></script>
-
-{% endblock %}
-
 {% block extracss %}
 <link rel="stylesheet" media="all" type="text/css" href="{% static "jquery-autosuggest/css/autoSuggest.css" %}">
 {{ block.super }}
@@ -81,12 +37,12 @@ <h2>{% trans "Upload" %} {{ resource_name }}</h2>
     </div>
     {% endif %}
 
-    <form method="post" enctype="multipart/form-data">
+    <form method="post" enctype="multipart/form-data" class="box-content">
         {% csrf_token %}
         {% include "base/form_snippet.html" %}
 
-
-        <div class="license-agreement">
+        <div class="field">
+            <div class="control">
             <label class="checkbox">
                 {% if not is_custom_license_agreement %}
                 <input type="checkbox" required> I confirm that I own these materials and have the rights to share them, including any embedded content, under the <a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC-0 license</a>.
@@ -94,9 +50,19 @@ <h2>{% trans "Upload" %} {{ resource_name }}</h2>
                 <input type="checkbox" required> I confirm that I own these materials and have the rights to share them, including any embedded content, under the license.
                 {% endif %}
             </label>
+            </div>
         </div>
 
-        <button class="btn btn-primary" id="licenseAgreed" type="submit">{% trans "Upload" %}</button>
+        <div class="field has-text-centered">
+            <div class="control">
+            <button class="button is-success is-medium" id="licenseAgreed" type="submit">
+                <span class="icon">
+                <i class="fas fa-upload"></i>
+                </span>
+                <span>{% trans "Upload" %}</span>
+            </button>
+            </div>
+        </div>
     </form>
 
     <script type="text/javascript" src="{% static 'js/resource_upload.js' %}"></script>