diff --git a/accounts/urls.py b/accounts/urls.py
index 8f3cf285c..cf43f320b 100644
--- a/accounts/urls.py
+++ b/accounts/urls.py
@@ -27,7 +27,9 @@
 import bookmarks.views as bookmarks
 import follow.views as follow
 import apiv2.views as api
-from utils.frontend_handling import redirect_if_beastwhoosh_inline
+from utils.urlpatterns import redirect_inline
+
+
 
 # By putting some URLs at the top that are the same as the ones listed in
 # django.contrib.auth.urls, we can override some configuration:
@@ -40,13 +42,13 @@
     path('cleanup/', accounts.multi_email_cleanup, name="accounts-multi-email-cleanup"),
     path('password_reset/',
         login_redirect(
-            redirect_if_beastwhoosh_inline(
+            redirect_inline(
                 auth_views.PasswordResetView.as_view(form_class=FsPasswordResetForm),
                 redirect_url_name='front-page',
                 query_string='loginProblems=1')),
         name='password_reset'),
     path('password_reset/done/',
-        redirect_if_beastwhoosh_inline(
+        redirect_inline(
             auth_views.PasswordResetDoneView.as_view(),
             redirect_url_name='front-page'),
         name='password_reset_done'),
diff --git a/accounts/views.py b/accounts/views.py
index 4344491c1..a9b050def 100644
--- a/accounts/views.py
+++ b/accounts/views.py
@@ -51,7 +51,7 @@
 from django.db.models.fields import CharField
 from django.http import HttpResponseRedirect, HttpResponse, HttpResponseBadRequest, Http404, \
     HttpResponsePermanentRedirect, HttpResponseServerError, JsonResponse
-from django.shortcuts import get_object_or_404
+from django.shortcuts import get_object_or_404, render
 from django.urls import reverse
 from django.utils.http import base36_to_int
 from django.utils.http import int_to_base36
@@ -82,7 +82,7 @@
 from utils.cache import invalidate_user_template_caches
 from utils.dbtime import DBTime
 from utils.filesystem import generate_tree, remove_directory_if_empty
-from utils.frontend_handling import render, using_beastwhoosh, redirect_if_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.images import extract_square
 from utils.logging_filters import get_client_ip
 from utils.mail import send_mail_template, send_mail_template_to_support
@@ -381,46 +381,13 @@ def send_activation(user):
     send_mail_template(settings.EMAIL_SUBJECT_ACTIVATION_LINK, 'emails/email_activation.txt', tvars, user_to=user)
 
 
-@redirect_if_beastwhoosh('front-page', query_string='loginProblems=1')
 def resend_activation(request):
-    if request.method == 'POST':
-        form = ReactivationForm(request.POST)
-        if form.is_valid():
-            username_or_email = form.cleaned_data['user']
-            try:
-                user = User.objects.get((Q(email__iexact=username_or_email)\
-                         | Q(username__iexact=username_or_email))\
-                         & Q(is_active=False))
-                send_activation(user)
-            except User.DoesNotExist:
-                pass
-            return render(request, 'accounts/resend_activation_done.html')
-    else:
-        form = ReactivationForm()
+    return HttpResponseRedirect(reverse('front-page') + '?loginProblems=1')
 
-    return render(request, 'accounts/resend_activation.html', {'form': form})
 
-
-@redirect_if_beastwhoosh('front-page', query_string='loginProblems=1')
 def username_reminder(request):
-    if request.method == 'POST':
-        form = UsernameReminderForm(request.POST)
-        if form.is_valid():
-            email = form.cleaned_data['user']
-
-            try:
-                user = User.objects.get(email__iexact=email)
-                send_mail_template(settings.EMAIL_SUBJECT_USERNAME_REMINDER, 'emails/email_username_reminder.txt',
-                                   {'user': user}, user_to=user)
-            except User.DoesNotExist:
-                pass
-
-            return render(request, 'accounts/username_reminder.html', {'form': form, 'sent': True})
-    else:
-        form = UsernameReminderForm()
-
-    return render(request, 'accounts/username_reminder.html', {'form': form, 'sent': False})
-
+    return HttpResponseRedirect(reverse('front-page') + '?loginProblems=1')
+    
 
 @login_required
 def home(request):
@@ -822,8 +789,8 @@ def process_filter_and_sort_options(request, sort_options, tab):
 
 
 @login_required
+@transaction.atomic()
 def edit_sounds(request):
-    if not using_beastwhoosh(request): raise Http404
     return edit_and_describe_sounds_helper(request)  # Note that the list of sounds to describe is stored in the session object
 
 
@@ -951,157 +918,11 @@ def describe_pack(request):
 
 
 @login_required
+@transaction.atomic()
 def describe_sounds(request):
-    if using_beastwhoosh(request):
-        return edit_and_describe_sounds_helper(request)  # Note that the list of sounds to describe is stored in the session object
-
-    forms = []
-    sounds_to_process = []
-    sounds = request.session.get('describe_sounds', False)
-    if not sounds:
-        msg = 'Please pick at least one sound.'
-        messages.add_message(request, messages.WARNING, msg)
-        return HttpResponseRedirect(reverse('accounts-describe'))
-    sounds_to_describe = sounds[0:settings.SOUNDS_PER_DESCRIBE_ROUND]
-    request.session['describe_sounds_number'] = len(request.session.get('describe_sounds'))
-    selected_license = request.session.get('describe_license', False)
-    selected_pack = request.session.get('describe_pack', False)
-
-    # If there are no files in the session redirect to the first describe page
-    if len(sounds_to_describe) <= 0:
-        msg = 'You have finished describing your sounds.'
-        messages.add_message(request, messages.WARNING, msg)
-        return HttpResponseRedirect(reverse('accounts-describe'))
-
-    tvars = {
-        'sounds_per_round': settings.SOUNDS_PER_DESCRIBE_ROUND,
-        'forms': forms,
-        'last_latlong': request.user.profile.get_last_latlong(),
-    }
-
-    if request.method == 'POST':
-        # First get all the data
-        n_sounds_already_part_of_freesound = 0
-        for i in range(len(sounds_to_describe)):
-            prefix = str(i)
-            forms.append({})
-            forms[i]['sound'] = sounds_to_describe[i]
-            forms[i]['description'] = SoundDescriptionForm(request.POST, prefix=prefix, explicit_disable=False)
-            forms[i]['geotag'] = GeotaggingForm(request.POST, prefix=prefix)
-            forms[i]['pack'] = PackForm(Pack.objects.filter(user=request.user).exclude(is_deleted=True),
-                                        request.POST,
-                                        prefix=prefix)
-            forms[i]['license'] = LicenseForm(request.POST, prefix=prefix, hide_old_license_versions=True)
-        # Validate each form
-        for i in range(len(sounds_to_describe)):
-            for f in ['license', 'geotag', 'pack', 'description']:
-                if not forms[i][f].is_valid():
-                    # If at least one form is not valid, render template with form errors
-                    return render(request, 'accounts/describe_sounds.html', tvars)
-
-        # All valid, then create sounds and moderation tickets
-        dirty_packs = []
-        for i in range(len(sounds_to_describe)):
-            sound_fields = {
-                'name': forms[i]['description'].cleaned_data['name'],
-                'dest_path': forms[i]['sound'].full_path,
-                'license': forms[i]['license'].cleaned_data['license'],
-                'description': forms[i]['description'].cleaned_data.get('description', ''),
-                'tags': forms[i]['description'].cleaned_data.get('tags', ''),
-                'is_explicit': forms[i]['description'].cleaned_data['is_explicit'],
-            }
-
-            pack = forms[i]['pack'].cleaned_data.get('pack', False)
-            new_pack = forms[i]['pack'].cleaned_data.get('new_pack', False)
-            if not pack and new_pack:
-                sound_fields['pack'] = new_pack
-            elif pack:
-                sound_fields['pack'] = pack
-
-            data = forms[i]['geotag'].cleaned_data
-            if not data.get('remove_geotag') and data.get('lat'):  # if 'lat' is in data, we assume other fields are too
-                geotag = '%s,%s,%d' % (data.get('lat'), data.get('lon'), data.get('zoom'))
-                sound_fields['geotag'] = geotag
-
-            try:
-                user = request.user
-                sound = utils.sound_upload.create_sound(user, sound_fields, process=False)
-                sounds_to_process.append(sound)
-                if user.profile.is_whitelisted:
-                    messages.add_message(request, messages.INFO,
-                        'File <a href="%s">%s</a> has been described and has been added to freesound.' % \
-                        (sound.get_absolute_url(), sound.original_filename))
-                else:
-                    messages.add_message(request, messages.INFO,
-                        'File <a href="%s">%s</a> has been described and is now awaiting processing '
-                        'and moderation.' % (sound.get_absolute_url(), sound.original_filename))
-
-                    # Invalidate affected caches in user header
-                    invalidate_user_template_caches(request.user.id)
-                    for moderator in Group.objects.get(name='moderators').user_set.all():
-                        invalidate_user_template_caches(moderator.id)
-
-            except utils.sound_upload.NoAudioException:
-                # If for some reason audio file does not exist, skip creating this sound
-                messages.add_message(request, messages.ERROR,
-                                     f"Something went wrong with accessing the file {forms[i]['description'].cleaned_data['name']}.")
-            except utils.sound_upload.AlreadyExistsException as e:
-                messages.add_message(request, messages.WARNING, str(e))
-            except utils.sound_upload.CantMoveException as e:
-                upload_logger.error(str(e))
-
-        # Remove the files we just described from the session and redirect to this page
-        request.session['describe_sounds'] = request.session['describe_sounds'][len(sounds_to_describe):]
-
-        # Process sounds and packs
-        # N.B. we do this at the end to avoid conflicts between django-web and django-workers
-        # If we're not careful django's save() functions will overwrite any processing we
-        # do on the workers.
-        # In the future if django-workers do not write to the db this might be changed
-        try:
-            for s in sounds_to_process:
-                s.process_and_analyze()
-        except Exception as e:
-            sounds_logger.error(f'Sound with id {s.id} could not be scheduled. ({str(e)})')
-        for p in dirty_packs:
-            p.process()
-
-        # Check if all sounds have been described after that round and redirect accordingly
-        if len(request.session['describe_sounds']) <= 0:
-            if len(sounds_to_describe) != n_sounds_already_part_of_freesound:
-                msg = 'You have described all the selected files and are now awaiting processing and moderation. ' \
-                      'You can check the status of your uploaded sounds in your <a href="%s">home page</a>. ' \
-                      'Once your sounds have been processed, you can also get information about the moderation ' \
-                      'status in the <a href="%s">uploaded sounds awaiting moderation' \
-                      '</a> page.' % (reverse('accounts-home'), reverse('accounts-pending'))
-                messages.add_message(request, messages.WARNING, msg)
-            clear_session_edit_and_describe_data(request)
-            return HttpResponseRedirect(reverse('accounts-describe'))
-        else:
-            return HttpResponseRedirect(reverse('accounts-describe-sounds'))
-    else:
-        for i in range(len(sounds_to_describe)):
-            prefix = str(i)
-            forms.append({})
-            forms[i]['sound'] = sounds_to_describe[i]
-            forms[i]['description'] = SoundDescriptionForm(initial={'name': forms[i]['sound'].name}, prefix=prefix)
-            forms[i]['geotag'] = GeotaggingForm(prefix=prefix)
-            if selected_pack:
-                forms[i]['pack'] = PackForm(Pack.objects.filter(user=request.user).exclude(is_deleted=True),
-                                            prefix=prefix,
-                                            initial={'pack': selected_pack.id})
-            else:
-                forms[i]['pack'] = PackForm(Pack.objects.filter(user=request.user).exclude(is_deleted=True),
-                                            prefix=prefix)
-            if selected_license:
-                forms[i]['license'] = LicenseForm(initial={'license': selected_license},
-                                                     prefix=prefix, hide_old_license_versions=True)
-            else:
-                forms[i]['license'] = LicenseForm(prefix=prefix, hide_old_license_versions=True)
-
-    return render(request, 'accounts/describe_sounds.html', tvars)
-
+    return edit_and_describe_sounds_helper(request)  # Note that the list of sounds to describe is stored in the session object
 
+    
 @login_required
 def attribution(request):
     qs_sounds = Download.objects.annotate(download_type=Value("sound", CharField()))\
@@ -1264,56 +1085,8 @@ def create_user_rank(uploaders, posters, commenters, weights=dict()):
     return user_rank, sort_list
 
 
-@redirect_if_beastwhoosh('charts')
 def accounts(request):
-    num_days = 14
-    num_active_users = 10
-    num_all_time_active_users = 10
-    last_time = DBTime.get_last_time() - datetime.timedelta(num_days)
-
-    # Most active users in last num_days, newest active users in last num_days and logged in users
-    latest_uploaders = Sound.public.filter(created__gte=last_time).values("user").annotate(Count('id'))\
-        .order_by("-id__count")
-    latest_posters = Post.objects.filter(created__gte=last_time).values("author_id").annotate(Count('id'))\
-        .order_by("-id__count")
-    latest_commenters = Comment.objects.filter(created__gte=last_time).values("user_id").annotate(Count('id'))\
-        .order_by("-id__count")
-    user_rank, sort_list = create_user_rank(latest_uploaders, latest_posters, latest_commenters)
-    most_active_users = User.objects.select_related("profile")\
-        .filter(id__in=[u[1] for u in sorted(sort_list, reverse=True)[:num_active_users]])
-    new_users = User.objects.select_related("profile").filter(date_joined__gte=last_time)\
-        .filter(id__in=list(user_rank.keys())).order_by('-date_joined')[:num_active_users+5]
-    logged_users = User.objects.select_related("profile").filter(id__in=get_online_users())
-    most_active_users_display = [[u, latest_content_type(user_rank[u.id]), user_rank[u.id]] for u in most_active_users]
-    most_active_users_display = sorted(most_active_users_display,
-                                       key=lambda usr: user_rank[usr[0].id]['score'],
-                                       reverse=True)
-    new_users_display = [[u, latest_content_type(user_rank[u.id]), user_rank[u.id]] for u in new_users]
-
-    # All time most active users (these queries are kind of slow, but page is cached)
-    all_time_uploaders = Profile.objects.extra(select={'id__count': 'num_sounds'})\
-        .order_by("-num_sounds").values("user", "id__count")[:num_all_time_active_users]
-    all_time_posters = Profile.objects.extra(select={'id__count': 'num_posts', 'author_id': 'user_id'})\
-        .order_by("-num_posts").values("author_id", "id__count")[:num_all_time_active_users]
-    # Performing a count(*) on Comment table is slow, we could add 'num_comments' to user profile
-    all_time_commenters = Comment.objects.all().values("user_id").annotate(Count('id'))\
-        .order_by("-id__count")[:num_all_time_active_users]
-    all_time_user_rank, all_time_sort_list = create_user_rank(all_time_uploaders, all_time_posters, all_time_commenters)
-    all_time_most_active_users = User.objects.select_related("profile")\
-        .filter(id__in=[u[1] for u in sorted(all_time_sort_list, reverse=True)[:num_all_time_active_users]])
-    all_time_most_active_users_display = [[u, all_time_user_rank[u.id]] for u in all_time_most_active_users]
-    all_time_most_active_users_display = sorted(all_time_most_active_users_display,
-                                                key=lambda usr: all_time_user_rank[usr[0].id]['score'],
-                                                reverse=True)
-
-    tvars = {
-        'num_days': num_days,
-        'most_active_users': most_active_users_display,
-        'all_time_most_active_users': all_time_most_active_users_display,
-        'new_users': new_users_display,
-        'logged_users': logged_users,
-    }
-    return render(request, 'accounts/accounts.html', tvars)
+    return HttpResponseRedirect(reverse('charts'))
 
 
 def compute_charts_stats():
diff --git a/apiv2/views.py b/apiv2/views.py
index bb1c59d4f..dc22f63ea 100755
--- a/apiv2/views.py
+++ b/apiv2/views.py
@@ -34,6 +34,7 @@
 from django.db import IntegrityError
 from django.db.models import Exists, OuterRef
 from django.http import HttpResponseRedirect, Http404
+from django.shortcuts import render 
 from django.urls import reverse
 from oauth2_provider.models import Grant, AccessToken
 from oauth2_provider.views import AuthorizationView as ProviderAuthorizationView
@@ -65,7 +66,7 @@
 from sounds.models import Sound, Pack, License, SoundAnalysis
 from utils.downloads import download_sounds
 from utils.filesystem import generate_tree
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.nginxsendfile import sendfile, prepare_sendfile_arguments_for_sound_download
 from utils.tags import clean_and_split_tags
 
diff --git a/bookmarks/views.py b/bookmarks/views.py
index f7ed5ec3f..8a7f3b71f 100755
--- a/bookmarks/views.py
+++ b/bookmarks/views.py
@@ -24,13 +24,13 @@
 from django.db import transaction
 from django.db.models import Count
 from django.http import Http404, HttpResponseRedirect, JsonResponse
-from django.shortcuts import get_object_or_404
+from django.shortcuts import get_object_or_404, render
 from django.urls import reverse
 
 from bookmarks.forms import BookmarkForm, BwBookmarkForm
 from bookmarks.models import Bookmark, BookmarkCategory
 from sounds.models import Sound
-from utils.frontend_handling import using_beastwhoosh, render
+from utils.frontend_handling import using_beastwhoosh
 from utils.pagination import paginate
 from utils.username import redirect_if_old_username_or_404, raise_404_if_user_is_deleted
 
diff --git a/comments/views.py b/comments/views.py
index 2f27d04d8..cd0a27090 100644
--- a/comments/views.py
+++ b/comments/views.py
@@ -29,7 +29,7 @@
 
 from comments.models import Comment
 from sounds.models import Sound
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.pagination import paginate
 from utils.username import redirect_if_old_username_or_404, raise_404_if_user_is_deleted
 
diff --git a/donations/views.py b/donations/views.py
index 5ee304bec..f0c6bd9f4 100644
--- a/donations/views.py
+++ b/donations/views.py
@@ -10,14 +10,14 @@
 from django.contrib.auth.models import User
 from django.contrib.sites.models import Site
 from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
-from django.shortcuts import redirect
+from django.shortcuts import redirect, render
 from django.urls import reverse
 from django.views.decorators.csrf import csrf_exempt
 from django.views.generic import ListView
 
 from .forms import DonateForm, BwDonateForm
 from .models import Donation, DonationCampaign
-from utils.frontend_handling import render, using_beastwhoosh, BwCompatibleTemplateResponse
+from utils.frontend_handling import using_beastwhoosh
 from utils.mail import send_mail_template
 
 web_logger = logging.getLogger('web')
@@ -256,7 +256,6 @@ def donate(request):
 
 
 class DonationsList(ListView):
-    response_class = BwCompatibleTemplateResponse
     model = Donation
     paginate_by = settings.DONATIONS_PER_PAGE
     ordering = ["-created"]
diff --git a/follow/views.py b/follow/views.py
index 6fe96ef5b..d33ae3270 100644
--- a/follow/views.py
+++ b/follow/views.py
@@ -26,14 +26,14 @@
 from django.contrib.auth.models import User
 from django.db import transaction
 from django.http import HttpResponse, HttpResponseRedirect
-from django.shortcuts import get_object_or_404
+from django.shortcuts import get_object_or_404, render
 from django.urls import reverse
 
 from follow import follow_utils
 from follow.models import FollowingQueryItem
 from follow.models import FollowingUserItem
 from utils.cache import invalidate_user_template_caches
-from utils.frontend_handling import using_beastwhoosh, render
+from utils.frontend_handling import using_beastwhoosh
 from utils.pagination import paginate
 from utils.username import redirect_if_old_username_or_404, raise_404_if_user_is_deleted
 
diff --git a/forum/views.py b/forum/views.py
index ee1890b4c..2b0f7d93b 100644
--- a/forum/views.py
+++ b/forum/views.py
@@ -37,7 +37,7 @@
 from forum.forms import PostReplyForm, BwPostReplyForm, NewThreadForm, BwNewThreadForm, PostModerationForm, BwPostModerationForm
 from forum.models import Forum, Thread, Post, Subscription
 from utils.cache import invalidate_template_cache, invalidate_all_moderators_header_cache
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.mail import send_mail_template
 from utils.pagination import paginate
 from utils.search.search_forum import add_posts_to_search_engine
diff --git a/freesound/middleware.py b/freesound/middleware.py
index 9e6a812d3..253ccb9e5 100644
--- a/freesound/middleware.py
+++ b/freesound/middleware.py
@@ -18,7 +18,6 @@
 #     See AUTHORS file.
 #
 
-import json
 import logging
 
 from admin_reorder.middleware import ModelAdminReorder
@@ -77,26 +76,6 @@ def __call__(self, request):
         return response
 
 
-class FrontendPreferenceHandler:
-    def __init__(self, get_response):
-        self.get_response = get_response
-
-    def __call__(self, request):
-        """
-        This middleware sets a session variable when the parameter 'new_frontend' is received.
-        The 'render' method will use this session variable to display the new/old frontend
-        """
-        if request.GET.get(settings.FRONTEND_CHOOSER_REQ_PARAM_NAME, None):
-            selected_ui = request.GET.get(settings.FRONTEND_CHOOSER_REQ_PARAM_NAME)
-            current_ui = request.session.get(settings.FRONTEND_SESSION_PARAM_NAME, None)
-            if selected_ui != current_ui:
-                web_logger.info('Frontend activation (%s)' % json.dumps({'name': selected_ui,
-                                                                         'username': request.user.username}))
-            request.session[settings.FRONTEND_SESSION_PARAM_NAME] = selected_ui
-        response = self.get_response(request)
-        return response
-
-
 class TosAcceptanceHandler:
     """Checks if the user has accepted the updates to the Terms
     of Service in 2022. This replaces the agreement to the original ToS (2013, 2fd543f3a).
diff --git a/freesound/settings.py b/freesound/settings.py
index 420feba3f..005069e26 100644
--- a/freesound/settings.py
+++ b/freesound/settings.py
@@ -38,7 +38,6 @@
     'freesound.middleware.UpdateEmailHandler',
     'freesound.middleware.OnlineUsersHandler',
     'corsheaders.middleware.CorsMiddleware',
-    'freesound.middleware.FrontendPreferenceHandler',
 ]
 
 INSTALLED_APPS = [
@@ -807,16 +806,11 @@
 # -------------------------------------------------------------------------------
 # Frontend handling
 
-FRONTEND_CHOOSER_REQ_PARAM_NAME = 'fend'
-FRONTEND_SESSION_PARAM_NAME = 'frontend'
-FRONTEND_NIGHTINGALE = 'ng'  # https://freesound.org/people/reinsamba/sounds/14854/
-FRONTEND_BEASTWHOOSH = 'bw'  # https://freesound.org/people/martian/sounds/403973/
-FRONTEND_DEFAULT = FRONTEND_BEASTWHOOSH
 TEMPLATES = [
     {
         'BACKEND': 'django.template.backends.django.DjangoTemplates',
         'DIRS': [
-            os.path.join(os.path.dirname(__file__), '../templates_bw'),
+            os.path.join(os.path.dirname(__file__), '../templates'),
         ],
         'APP_DIRS': True,
         'OPTIONS': {
@@ -831,29 +825,7 @@
                 'django.contrib.messages.context_processors.messages',
                 'freesound.context_processor.context_extra',
             ],
-        },
-        'NAME': FRONTEND_BEASTWHOOSH,
-    },
-    {
-        'BACKEND': 'django.template.backends.django.DjangoTemplates',
-        'DIRS': [
-            os.path.join(os.path.dirname(__file__), '../templates')
-        ],
-        'APP_DIRS': True,
-        'OPTIONS': {
-            'context_processors': [
-                'django.contrib.auth.context_processors.auth',
-                'django.template.context_processors.debug',
-                'django.template.context_processors.i18n',
-                'django.template.context_processors.media',
-                'django.template.context_processors.static',
-                'django.template.context_processors.tz',
-                'django.template.context_processors.request',
-                'django.contrib.messages.context_processors.messages',
-                'freesound.context_processor.context_extra',
-            ],
-        },
-        'NAME': FRONTEND_NIGHTINGALE,
+        }
     },
 ]
 
diff --git a/freesound/urls.py b/freesound/urls.py
index 3076395eb..90fe8616f 100644
--- a/freesound/urls.py
+++ b/freesound/urls.py
@@ -96,9 +96,6 @@
     re_path(r'^browse/geotags/(?P<tag>[\w-]+)?/?$', geotags.views.geotags, name="geotags"),
     path('browse/geotags_box/', geotags.views.geotags_box, name="geotags-box"),
 
-    path('browse/remixed/', sounds.views.remixed, name="remix-groups"),
-    path('browse/remixed/<int:group_id>/', sounds.views.remix_group, name="remix-group"),
-
     path('contact/', support.views.contact, name="contact"),
 
     path('search/', search.views.search, name='sounds-search'),
diff --git a/geotags/views.py b/geotags/views.py
index 8308de0d1..6ec2ad9e2 100644
--- a/geotags/views.py
+++ b/geotags/views.py
@@ -27,13 +27,13 @@
 from django.conf import settings
 from django.core.cache import cache
 from django.http import Http404, HttpResponse
-from django.shortcuts import get_object_or_404
+from django.shortcuts import get_object_or_404, render
 from django.urls import reverse
 from django.views.decorators.cache import cache_page
 from django.views.decorators.clickjacking import xframe_options_exempt
 
 from sounds.models import Sound, Pack
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.logging_filters import get_client_ip
 from utils.username import redirect_if_old_username_or_404, raise_404_if_user_is_deleted
 
diff --git a/messages/views.py b/messages/views.py
index 72b2f260a..e6232cb7f 100644
--- a/messages/views.py
+++ b/messages/views.py
@@ -29,12 +29,13 @@
 from django.db.models import Q
 from django.http import HttpResponse, JsonResponse
 from django.http import HttpResponseRedirect, Http404
+from django.shortcuts import render 
 from django.urls import reverse
 
 from messages.forms import MessageReplyForm, MessageReplyFormWithCaptcha, BwMessageReplyForm, BwMessageReplyFormWithCaptcha
 from messages.models import Message, MessageBody
 from utils.cache import invalidate_user_template_caches
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.mail import send_mail_template
 from utils.pagination import paginate
 
diff --git a/monitor/views.py b/monitor/views.py
index 29be25152..6c16cafd8 100644
--- a/monitor/views.py
+++ b/monitor/views.py
@@ -27,16 +27,15 @@
 from django.contrib.auth.models import User
 from django.core.cache import cache
 from django.db.models import Count
-from django.http import JsonResponse, HttpResponse
-from django.shortcuts import redirect
-from django.shortcuts import render
+from django.http import JsonResponse, HttpResponse, HttpResponseRedirect
+from django.shortcuts import redirect, render
 from django.urls import reverse
 
 import tickets
 from freesound.celery import get_queues_task_counts
 from sounds.models import Sound, SoundAnalysis
 from tickets import TICKET_STATUS_CLOSED
-from utils.frontend_handling import render, using_beastwhoosh, redirect_if_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 
 
 @login_required
@@ -215,27 +214,12 @@ def monitor_stats(request):
     return render(request, 'monitor/stats.html', tvars)
 
 
-@redirect_if_beastwhoosh('monitor-moderation')
 @login_required
 @user_passes_test(lambda u: u.is_staff, login_url='/')
 def moderators_stats(request):
-    time_span = datetime.datetime.now() - datetime.timedelta((6 * 365) // 12)
-    #Maybe we should user created and not modified
-    user_ids = tickets.models.Ticket.objects.filter(
-            status=TICKET_STATUS_CLOSED,
-            created__gt=time_span,
-            assignee__isnull=False
-    ).values_list("assignee_id", flat=True)
-
-    counter = Counter(user_ids)
-    moderators = User.objects.filter(id__in=list(counter.keys()))
-
-    moderators = [(counter.get(m.id), m) for m in moderators.all()]
-    ordered = sorted(moderators, key=lambda m: m[0], reverse=True)
-    tvars = {"moderators": ordered}
-    return render(request, 'monitor/moderators_stats.html', tvars)
-
+    return HttpResponseRedirect(reverse('monitor-moderation'))
 
+   
 def queries_stats_ajax(request):
     try:
         auth = (settings.GRAYLOG_USERNAME, settings.GRAYLOG_PASSWORD)
diff --git a/search/views.py b/search/views.py
index 5e139b7a0..52b558d1e 100644
--- a/search/views.py
+++ b/search/views.py
@@ -28,8 +28,7 @@
 from django.core.cache import cache
 from django.conf import settings
 from django.http import JsonResponse
-from django.shortcuts import get_object_or_404
-from django.shortcuts import reverse
+from django.shortcuts import get_object_or_404, reverse, render
 from ratelimit.decorators import ratelimit
 
 import forum
@@ -38,7 +37,7 @@
     NUM_TAGS_SHOWN_PER_CLUSTER_FACET
 from clustering.interface import cluster_sound_results, get_sound_ids_from_search_engine_query
 from forum.models import Post
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.logging_filters import get_client_ip
 from utils.ratelimit import key_for_ratelimiting, rate_per_ip
 from utils.search.search_sounds import perform_search_engine_query, search_prepare_parameters, \
diff --git a/sounds/views.py b/sounds/views.py
index 3f0375e1a..38aa37f54 100644
--- a/sounds/views.py
+++ b/sounds/views.py
@@ -40,7 +40,7 @@
 from django.http import HttpResponse
 from django.http import HttpResponseRedirect, Http404, \
     HttpResponsePermanentRedirect, JsonResponse
-from django.shortcuts import get_object_or_404, redirect
+from django.shortcuts import get_object_or_404, redirect, render
 from django.template import loader
 from django.urls import reverse, resolve
 from django.views.decorators.clickjacking import xframe_options_exempt
@@ -62,7 +62,7 @@
 from utils.cache import invalidate_user_template_caches
 from utils.downloads import download_sounds, should_suggest_donation
 from utils.encryption import sign_with_timestamp, unsign_with_timestamp
-from utils.frontend_handling import render, using_beastwhoosh, redirect_if_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.mail import send_mail_template, send_mail_template_to_support
 from utils.nginxsendfile import sendfile, prepare_sendfile_arguments_for_sound_download
 from utils.pagination import paginate
@@ -119,33 +119,8 @@ def get_sound_of_the_day_id():
     return random_sound
 
 
-@redirect_if_beastwhoosh('sounds-search', query_string='s=Date+added+(newest+first)&g=1')
 def sounds(request):
-    latest_sounds = Sound.objects.latest_additions(num_sounds=5, period_days=2)    
-    latest_packs = Pack.objects.select_related().filter(num_sounds__gt=0).exclude(is_deleted=True).order_by("-last_updated")[0:20]
-    last_week = get_n_weeks_back_datetime(n_weeks=1)
-    popular_sounds = Sound.public.select_related('license', 'user') \
-                                 .annotate(greatest_date=Greatest('created', 'moderation_date')) \
-                                 .filter(greatest_date__gte=last_week).order_by("-num_downloads")[0:5]
-    popular_packs = Pack.objects.select_related('user').filter(created__gte=last_week).exclude(is_deleted=True).order_by("-num_downloads")[0:5]
-    random_sound_id = get_sound_of_the_day_id()
-    if random_sound_id:
-        try:
-            random_sound = Sound.objects.bulk_query_id([random_sound_id])[0]
-        except IndexError:
-            # Clear existing cache for random sound of the day as it contains invalid sound id
-            cache.delete(settings.RANDOM_SOUND_OF_THE_DAY_CACHE_KEY)
-            random_sound = None
-    else:
-        random_sound = None
-    tvars = {
-        'latest_sounds': latest_sounds,
-        'latest_packs': latest_packs,
-        'popular_sounds': popular_sounds,
-        'popular_packs': popular_packs,
-        'random_sound': random_sound
-    }
-    return render(request, 'sounds/sounds.html', tvars)
+    return HttpResponseRedirect(reverse('sounds-search') + '?s=Date+added+(newest+first)&g=1')
 
 
 @ratelimit(key=key_for_ratelimiting, rate=rate_per_ip, group=settings.RATELIMIT_SEARCH_GROUP, block=True)
@@ -174,18 +149,8 @@ def random(request):
         reverse('sound', args=[sound_obj.user.username, sound_obj.id])))
 
 
-@redirect_if_beastwhoosh('sounds-search', query_string='s=Date+added+(newest+first)&g=1&only_p=1')
 def packs(request):
-    order = request.GET.get("order", "name")
-    if order not in ["name", "-last_updated", "-created", "-num_sounds", "-num_downloads"]:
-        order = "name"
-    qs = Pack.objects.select_related() \
-                     .filter(num_sounds__gt=0) \
-                     .exclude(is_deleted=True) \
-                     .order_by(order)
-    tvars = {'order': order}
-    tvars.update(paginate(request, qs, settings.PACKS_PER_PAGE))
-    return render(request, 'sounds/browse_packs.html', tvars)
+    return HttpResponseRedirect(reverse('sounds-search') + '?s=Date+added+(newest+first)&g=1&only_p=1')
 
 
 def front_page(request):
@@ -916,31 +881,8 @@ def pack_delete(request, username, pack_id):
 
 
 @login_required
-@redirect_if_beastwhoosh('sound-edit', kwarg_keys=['username', 'sound_id'])
-@transaction.atomic()
 def sound_edit_sources(request, username, sound_id):
-    sound = get_object_or_404(Sound, id=sound_id)
-    if sound.user.username.lower() != username.lower():
-        raise Http404
-
-    if not (request.user.is_superuser or sound.user == request.user):
-        raise PermissionDenied
-
-    current_sources = Sound.objects.ordered_ids([element['id'] for element in sound.sources.all().values('id')])
-    sources_string = ",".join(map(str, [source.id for source in current_sources]))
-    if request.method == 'POST':
-        form = RemixForm(sound, request.POST)
-        if form.is_valid():
-            form.save()
-            sound.invalidate_template_caches()
-    else:
-        form = RemixForm(sound, initial=dict(sources=sources_string))
-    tvars = {
-        'sound': sound,
-        'form': form,
-        'current_sources': current_sources
-    }
-    return render(request, 'sounds/sound_edit_sources.html', tvars)
+    return HttpResponseRedirect(reverse('sound-edit', args=[username, sound_id]))
 
 
 def add_sounds_modal_helper(request, username=None):
@@ -1020,24 +962,6 @@ def remixes(request, username, sound_id):
     else:
         tvars.update({'sound': sound})
         return render(request, 'sounds/modal_remix_group.html', tvars)
-
-
-@redirect_if_beastwhoosh('front-page')
-def remixed(request):
-    # NOTE: the page listing remix groups no longer exists in the new UI. Instead, users can filter
-    # search queries by "remixed" property
-    qs = RemixGroup.objects.all().order_by('-group_size')
-    tvars = dict()
-    tvars.update(paginate(request, qs, settings.SOUND_COMMENTS_PER_PAGE))
-    return render(request, 'sounds/remixed.html', tvars)
-
-
-@redirect_if_beastwhoosh('front-page')
-def remix_group(request, group_id):
-    # NOTE: there is no dedicated page to a remix group in the new UI, instead, users can open a modal and
-    # show the remix group of a particular sound
-    tvars = _remix_group_view_helper(request, group_id)
-    return render(request, 'sounds/remixes.html', tvars)
     
 
 @redirect_if_old_username_or_404
diff --git a/tags/views.py b/tags/views.py
index 7134d10b8..a559bd483 100644
--- a/tags/views.py
+++ b/tags/views.py
@@ -30,7 +30,7 @@
 from follow import follow_utils
 from search.views import search_view_helper
 from tags.models import Tag, FS1Tag
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.search import SearchEngineException
 from utils.search.search_sounds import perform_search_engine_query
 
diff --git a/templates/404.html b/templates/404.html
index ca6857e46..6bbd6db72 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -1,7 +1,9 @@
-{% extends "base.html" %}
+{% extends "simple_page.html" %}
 
-{% block content %}
-    <h1>Page not found</h1>
+{% block title %}Page not found{% endblock %}
+{% block page-title %}Page not found{% endblock %}
+
+{% block page-content %}
     <p>It seems that either we've pointed you in the wrong direction or misplaced something <b>-or-</b>
         that you've requested a page that doesn't exist. Either way, you've reached a dead end.
     <p>We recommend you click the browser's back button and curse at the screen for a minute. Then listen to some of Freesound's
diff --git a/templates/429.html b/templates/429.html
index 56e61b464..e959c30b9 100644
--- a/templates/429.html
+++ b/templates/429.html
@@ -1,7 +1,9 @@
-{% extends "base.html" %}
+{% extends "simple_page.html" %}
 
-{% block content %}
-    <h1>Not so fast, cowboy</h1>
+{% block title %}Not so fast, cowboy{% endblock %}
+{% block page-title %}Not so fast, cowboy{% endblock %}
+
+{% block page-content %}
     <p>It seems that either we've pointed you in the wrong direction or that you're trying to access a page
         and our server refuse to respond. Maybe you're trying to navigate Freesound too fast?</p>
     <p>Please take your time with each page, make sure you listen to all of the nice sounds before moving
diff --git a/templates/500.html b/templates/500.html
index d91f6f5be..141e7d862 100644
--- a/templates/500.html
+++ b/templates/500.html
@@ -1,183 +1,98 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-    <head>
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-        <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?" />
-        <meta name="keywords" content="free, sound" />
-        <title>Freesound - 500 Internal Server Error</title>
-
-        <style>
-        body,div,h1,p
-        {
-            margin: 0;
-            padding: 0;
-        }
-
-        body {
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB6CAIAAADxkq7cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGdJREFUeNqETwkKwDAIq5b+/6G+obpZFhCxrhA8k0YyM8oQER5j8FqL55y892YiYn+qeiJ6vge83NPziB72416Ez7NGV0cO/CD3mH05H77+vFZ+Oh/VrNLsuN2/4GXN2z3VfV/9CDAA11JjfUVHzLQAAAAASUVORK5CYII=) repeat-x top #CECECE;
-            font-family: Verdana, sans-serif;
-            font-size: 100%;
-        }
-
-        h1 {
-            font-size: 32px;
-            font-weight: bold;
-            line-height: 1em;
-            margin-bottom: 18px;
-            width: 100%;
-        }
-
-        p {
-            font-size: 12px;
-            line-height: 18px;
-            margin-bottom: 18px;
-        }
-
-        body {
-            background-color: #fff;
-        }
-
-        #header {
-            height: 115px;
-            width: 980px;
-            margin: 0 auto;
-            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAB6CAIAAADxkq7cAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAGdJREFUeNqETwkKwDAIq5b+/6G+obpZFhCxrhA8k0YyM8oQER5j8FqL55y892YiYn+qeiJ6vge83NPziB72416Ez7NGV0cO/CD3mH05H77+vFZ+Oh/VrNLsuN2/4GXN2z3VfV/9CDAA11JjfUVHzLQAAAAASUVORK5CYII=) repeat-x bottom #F8F8F8;
-            position: relative;
-            margin-top: 7px;
-        }
-
-        #logo {
-            display: block;
-            width: 239px;
-            height: 62px;
-            position: relative;
-            left: 10px;
-            top: 5px;
-        }
-
-        #wrapper {
-            background-color: #F9F9F9;
-        }
-
-        #container {
-            width: 944px;
-            margin: 0 auto;
-            border-left: solid 1px #F0EEF1;
-            border-right: solid 1px #F0EEF1;
-            background-color: #FFF;
-            padding: 18px;
-        }
-        #content_full {
-            width: 100%;
-        }
-
-        .clear {
-            clear: both;
-        }
-
-
-        </style>
-
-    </head>
-
-    <body>
-        <div id="header">
-
-            <a href="/" id="logo">
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-viewBox="0 0 490 162" style="enable-background:new 0 0 490 162;" xml:space="preserve">
-<style type="text/css">
-.st0{fill:none;}
-.st1{fill:#A81921;}
-</style>
-<g id="snijdoos">
-<rect class="st0" width="490" height="162"/>
-</g>
-<g id="FS">
-<g>
-<g>
-<path d="M200.8,73c0.1,0,0.4,0,0.9,0.1v10.5c-0.6-0.1-1.2-0.1-1.7-0.1c-0.5,0-0.9,0-1.2,0c-4.1,0-6.9,1.3-8.3,4
-c-0.8,1.5-1.2,3.8-1.2,7v18.7h-10.3V73.9h9.8v6.8c1.6-2.6,3-4.4,4.1-5.4c1.9-1.6,4.4-2.4,7.5-2.4C200.5,73,200.6,73,200.8,73z"/>
-<path d="M230.8,74.7c2.7,1.2,5,3.2,6.8,5.8c1.6,2.3,2.6,5,3.1,8.1c0.3,1.8,0.4,4.4,0.3,7.8h-28.5c0.2,3.9,1.5,6.7,4.1,8.3
-c1.6,1,3.4,1.5,5.6,1.5c2.3,0,4.2-0.6,5.7-1.8c0.8-0.6,1.5-1.5,2.1-2.7h10.4c-0.3,2.3-1.5,4.7-3.8,7.1c-3.5,3.8-8.4,5.7-14.7,5.7
-c-5.2,0-9.8-1.6-13.8-4.8c-4-3.2-6-8.4-6-15.7c0-6.8,1.8-12,5.4-15.6c3.6-3.6,8.3-5.4,14-5.4C225,72.9,228,73.5,230.8,74.7z
-M215.4,83.6c-1.4,1.5-2.4,3.5-2.7,6.1h17.6c-0.2-2.7-1.1-4.8-2.7-6.2c-1.6-1.4-3.7-2.1-6.1-2.1
-C218.9,81.3,216.9,82.1,215.4,83.6z"/>
-<path class="st1" d="M294.4,100.6c0.2,1.8,0.7,3.1,1.4,3.9c1.3,1.4,3.6,2,7.1,2c2,0,3.6-0.3,4.8-0.9c1.2-0.6,1.8-1.5,1.8-2.7
-c0-1.2-0.5-2-1.4-2.6c-1-0.6-4.5-1.6-10.7-3.1c-4.4-1.1-7.6-2.5-9.4-4.1c-1.8-1.6-2.7-4-2.7-7c0-3.6,1.4-6.7,4.3-9.3
-c2.8-2.6,6.8-3.9,12-3.9c4.9,0,8.9,1,12,2.9c3.1,2,4.9,5.3,5.3,10.1h-10.2c-0.1-1.3-0.5-2.4-1.1-3.1c-1.1-1.4-3-2.1-5.8-2.1
-c-2.2,0-3.8,0.3-4.8,1c-0.9,0.7-1.4,1.5-1.4,2.4c0,1.2,0.5,2,1.5,2.5c1,0.6,4.6,1.5,10.7,2.8c4.1,1,7.1,2.4,9.2,4.3
-c2,2,3,4.4,3,7.4c0,3.9-1.4,7-4.3,9.5c-2.9,2.5-7.4,3.7-13.4,3.7c-6.2,0-10.7-1.3-13.7-3.9c-2.9-2.6-4.4-5.9-4.4-9.9H294.4z"/>
-<path class="st1" d="M356.2,108.3c-3.3,4.1-8.3,6.1-15,6.1c-6.7,0-11.7-2-15-6.1c-3.3-4.1-5-9-5-14.7c0-5.6,1.7-10.5,5-14.7
-c3.3-4.1,8.3-6.2,15-6.2c6.7,0,11.7,2.1,15,6.2c3.3,4.1,5,9,5,14.7C361.2,99.3,359.5,104.2,356.2,108.3z M348,102.6
-c1.6-2.1,2.4-5.2,2.4-9.1c0-3.9-0.8-6.9-2.4-9.1c-1.6-2.1-3.9-3.2-6.9-3.2c-3,0-5.3,1.1-6.9,3.2c-1.6,2.1-2.4,5.1-2.4,9.1
-c0,3.9,0.8,6.9,2.4,9.1c1.6,2.1,3.9,3.2,6.9,3.2C344.1,105.8,346.4,104.7,348,102.6z"/>
-<path class="st1" d="M373.7,73.9v23.6c0,2.2,0.3,3.9,0.8,5c0.9,2,2.8,3,5.5,3c3.5,0,5.9-1.4,7.1-4.2c0.7-1.5,1-3.6,1-6.1V73.9
-h10.4v39.1h-9.9v-5.5c-0.1,0.1-0.3,0.5-0.7,1.1c-0.4,0.6-0.8,1.1-1.4,1.6c-1.6,1.4-3.1,2.4-4.6,2.9c-1.5,0.5-3.2,0.8-5.2,0.8
-c-5.8,0-9.7-2.1-11.7-6.2c-1.1-2.3-1.7-5.7-1.7-10.2V73.9H373.7z"/>
-<path class="st1" d="M433.7,76.2c2.6,2.1,3.8,5.6,3.8,10.5v26.4H427V89.3c0-2.1-0.3-3.6-0.8-4.7c-1-2-2.9-3-5.7-3
-c-3.4,0-5.8,1.5-7.1,4.4c-0.7,1.6-1,3.5-1,6v21.2h-10.2V74h9.9v5.7c1.3-2,2.6-3.5,3.7-4.3c2.1-1.6,4.8-2.4,8-2.4
-C427.8,73,431.1,74,433.7,76.2z"/>
-<path class="st1" d="M463.1,74.5c1.8,1,3.3,2.5,4.5,4.3V60.2H478v52.9H468v-5.4c-1.5,2.3-3.1,4-5,5.1c-1.9,1.1-4.2,1.6-7,1.6
-c-4.6,0-8.4-1.8-11.5-5.5c-3.1-3.7-4.7-8.4-4.7-14.2c0-6.7,1.5-11.9,4.6-15.8c3.1-3.8,7.2-5.7,12.3-5.7
-C459.1,73,461.3,73.5,463.1,74.5z M465.6,102.4c1.5-2.2,2.3-4.9,2.3-8.4c0-4.8-1.2-8.2-3.6-10.3c-1.5-1.2-3.2-1.9-5.2-1.9
-c-3,0-5.2,1.1-6.6,3.4c-1.4,2.3-2.1,5.1-2.1,8.4c0,3.6,0.7,6.5,2.1,8.7c1.4,2.2,3.6,3.2,6.5,3.2
-C461.9,105.7,464.1,104.6,465.6,102.4z"/>
-</g>
-<path d="M272.1,74.7c2.7,1.2,5,3.2,6.8,5.8c1.6,2.3,2.6,5,3.1,8.1c0.3,1.8,0.4,4.4,0.3,7.8h-28.5c0.2,3.9,1.5,6.7,4.1,8.3
-c1.6,1,3.4,1.5,5.6,1.5c2.3,0,4.2-0.6,5.7-1.8c0.8-0.6,1.5-1.5,2.1-2.7h10.5c-0.3,2.3-1.5,4.7-3.8,7.1c-3.5,3.8-8.4,5.7-14.7,5.7
-c-5.2,0-9.8-1.6-13.8-4.8c-4-3.2-6-8.4-6-15.7c0-6.8,1.8-12,5.4-15.6c3.6-3.6,8.3-5.4,14-5.4C266.3,72.9,269.4,73.5,272.1,74.7z
-M256.8,83.6c-1.4,1.5-2.4,3.5-2.7,6.1h17.6c-0.2-2.7-1.1-4.8-2.7-6.2c-1.6-1.4-3.7-2.1-6.1-2.1C260.3,81.3,258.2,82.1,256.8,83.6
-z"/>
-<path d="M170.2,74.3V71c0-0.8,0.3-1.5,0.8-2.1c0.5-0.6,1.4-0.9,2.8-0.9c1.4,0,2.3,0.1,2.9,0.2v-8.3c-0.9-0.1-1.6-0.1-2.2-0.2
-c-0.5,0-1.1-0.1-1.8-0.1c-5.7,0-9.3,1.2-10.7,3.5c-1.4,1.6-2.1,4.5-2.1,8.7v2.5h-10.8c-2.4,0-4.7,0.8-6.7,2c-2,1.2-3.7,2.9-4.8,5
-l-0.9,1.7l-2.2-9c-0.2-1-0.5-1.8-1.1-2.7c-0.3-0.4-0.6-0.9-1.2-1.4c-0.6-0.5-1.5-0.9-2.6-0.9c-1.1,0-2,0.4-2.6,0.9
-c-1.7,1.4-1.9,2.6-2.3,4.1l-3.4,13.4l-5.1-37.3c-0.1-0.9-0.3-1.7-0.5-2.5c-0.1-0.4-0.3-0.8-0.7-1.4c-0.2-0.3-0.5-0.6-1-1
-c-0.5-0.3-1.3-0.6-2.1-0.6c-0.8,0-1.6,0.3-2.1,0.6c-0.9,0.6-1.2,1.1-1.4,1.5c-0.6,1.2-0.7,2-0.9,3.2l-8.5,55.2l-3.3-45.4
-c-0.1-0.9-0.1-1.6-0.3-2.4c-0.1-0.4-0.2-0.8-0.5-1.3c-0.2-0.3-0.4-0.7-0.9-1.1c-0.5-0.4-1.4-0.9-2.4-0.9c-1,0-1.9,0.4-2.3,0.8
-c-0.8,0.7-1,1.2-1.2,1.5c-0.5,1.1-0.6,1.8-0.8,3l-3.5,22.2l-5.5-51.8c-0.1-0.9-0.2-1.6-0.4-2.3c-0.1-0.4-0.2-0.7-0.5-1.3
-c-0.2-0.3-0.4-0.6-0.9-1.1c-0.5-0.4-1.4-0.9-2.4-0.9c-1.1,0-2,0.5-2.4,0.9c-0.8,0.7-1,1.2-1.2,1.6c-0.4,1.1-0.5,1.8-0.7,3
-l-9.3,78.1l-5.2-40.2c-0.1-0.9-0.3-1.7-0.6-2.6c-0.2-0.4-0.3-0.9-0.8-1.5c-0.4-0.5-1.5-1.5-3.1-1.5c-1.5,0-2.5,0.8-2.9,1.3
-c-0.7,0.8-0.9,1.4-1.1,2c-0.2,0.6-0.4,1.2-0.5,1.9l-4.5,22l-3.2-7.7c-1-2.3-2.6-4-4.5-5.3c-1.9-1.3-4.2-2.1-6.7-2.1H15.7
-c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6h11.7c0.6,0,1.7,0.3,2.6,0.9c0.9,0.6,1.6,1.5,1.9,2.1l7.7,18.6c0.6,1.5,2.1,2.4,3.7,2.2
-c1.6-0.2,2.9-1.3,3.2-2.9l3.6-17.6l6.1,47.5c0.1,0.9,0.2,1.6,0.5,2.4c0.1,0.4,0.2,0.8,0.6,1.3c0.2,0.3,0.4,0.6,0.9,1
-c0.5,0.4,1.3,0.8,2.3,0.8c1,0,1.8-0.4,2.3-0.8c0.8-0.7,1-1.2,1.2-1.6c0.5-1.1,0.6-1.9,0.7-3.1l9-75.2l5,47.1
-c0.1,0.9,0.2,1.6,0.4,2.4c0.1,0.4,0.2,0.8,0.6,1.4c0.2,0.3,0.5,0.7,1,1c0.5,0.4,1.3,0.8,2.3,0.7c0.9,0,1.7-0.4,2.2-0.7
-c0.8-0.6,1.1-1.1,1.3-1.5c0.5-1.1,0.7-1.9,0.9-3.1l2.9-18.3l3.3,45.9c0.1,0.9,0.1,1.6,0.3,2.3c0.1,0.4,0.2,0.7,0.5,1.3
-c0.2,0.3,0.4,0.7,0.9,1.1c0.5,0.4,1.4,0.9,2.4,0.9h0c1.1,0,1.9-0.5,2.4-0.8c0.8-0.7,1-1.2,1.2-1.5c0.5-1.1,0.6-1.8,0.8-3l9.6-62.2
-l4.2,31c0.1,1,0.3,1.8,0.7,2.7c0.2,0.4,0.4,0.9,1,1.5c0.5,0.6,1.6,1.3,2.9,1.3c1.3,0,2.2-0.6,2.7-1.1c0.8-0.7,1.1-1.3,1.3-2
-c0.3-0.6,0.5-1.2,0.6-1.9l4.4-17.3l1.1,4.5c0.3,1.1,0.7,2.2,1.4,3.2c0.7,1,2.2,2,3.9,2c1.5,0,2.7-0.7,3.5-1.5
-c0.8-0.7,1.3-1.6,1.8-2.5l2.7-5.5c0.3-0.6,1.1-1.5,2.1-2.1c1-0.6,2.2-1,2.8-0.9h10.9v31.6h10.2V81.5h6.7v-7.2H170.2z"/>
-</g>
-</g>
-</svg>
-            </a>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=575, initial-scale=1">
+    <meta name="theme-color" content="#000000">
+    <title>Server Error</title>
+    <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?">
+    <meta name="keywords" content="free, sound">
+    <link id="style" rel="stylesheet" href="/static/bw-frontend/dist/index.css" data-forced-theme="yes">
+</head>
+<body>
+    <noscript>
+        You need to enable JavaScript to run this app.
+    </noscript>
+    
+    <div class="bw-page">
+        
+        <nav class="bw-nav bw-nav--expanded">
+            <div class="container bw-nav__container">
+                <form method="get" action="/search/">
+                    <div class="bw-nav__logo-search-container">
+                        <div class="bw-nav__logo-with-text">
+                            <a href="/" class="no-hover"></a>
+                        </div>
+                        <div class="input-wrapper">
+                            <input name="q" type="search" class="bw-nav__search" placeholder="Search sounds..." autocomplete="off" />
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </nav>
+        
+        <div class="container">
+            <div class="navbar-space-filler v-spacing-7 v-spacing-top-5">
+                <div class="no-paddings col-12 v-spacing-3">
+                    <h1>Server Error</h1>
+                </div>
+                <div class="col-12 no-paddings v-spacing-5">
+                    <p>Ouch.. we screwed something up! You found some part of Freesound that's broken.</p>
+                    <p>Luckily, we'll get an email about it and we'll try to fix it as soon as possible. In the
+                        meantime, try some other parts of website we haven't managed to break yet.</p>
+                        <p class="text-light-grey v-spacing-top-6 divider-light padding-top-2">Django is sad... sorry about that! (nginx 500 internal server error)</p>
+                    </div>
+                </div>
+            </div>
+            
+            <footer class="bw-footer padding-7 v-spacing-top-7">
+                <div class="center">
+                    <div class="footer-logo-container">
+                        <div class="row">
+                            <div class="col-sm-8">
+                                <a href="https://www.upf.edu/web/mtg" class="no-hover">
+                                    <img class="w-100" src="/static/bw-frontend/dist/upf_logo.png" />
+                                </a>
+                            </div>
+                            <div class="col-sm-4">
+                                <a href="https://www.upf.edu/web/phonos/" class="no-hover">
+                                    <img class="w-100" src="/static/bw-frontend/dist/phonos_logo.png" />
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row v-spacing-top-4 center">
+                    <a class="bw-link--grey h-spacing-1" href="/help/about/">About Freesound</a>
+                    <a class="bw-link--grey h-spacing-1" href="/help/tos_web/">Terms of use</a>
+                    <a class="bw-link--grey h-spacing-1" href="/help/privacy/">Privacy</a>
+                    <a class="bw-link--grey h-spacing-1" href="/help/cookies_policy/">Cookies</a>
+                    <a class="bw-link--grey h-spacing-1" href="/help/developers/">Developers</a>
+                    <a class="bw-link--grey h-spacing-1" href="/help/faq/">Help</a>
+                    <a class="bw-link--grey h-spacing-1" href="/donations/donors/">Donations</a>
+                    <a class="bw-link--grey h-spacing-1" href="https://blog.freesound.org">Blog</a>
+                    <a class="bw-link--grey h-spacing-1" href="https://labs.freesound.org">Freesound Labs</a>
+                    <a class="bw-link--grey h-spacing-1" href="/help/tshirt/">Get your t-shirt!</a>
+                </div>
+                <div class="center v-spacing-top-4">
+                    <span>© 2023</span>
+                </div>
+                <div class="center">
+                    <span>Freesound</span>
+                </div>
+                
+            </footer>
+            
+            <script>
+                const siteWidth = 580;  // Minimum expected width. If screen is smaller, scale website.
+                const scale = window.innerWidth / siteWidth;
+                if (scale < 1){
+                    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + siteWidth + ', initial-scale=' + scale);
+                }
+                const userIsAuthenticated = false;
+            </script>
+            <script src="/static/bw-frontend/dist/index.js"></script>
         </div>
-
-        <div id="wrapper">
-        <div id="container">
-
-<div id="content_full"> <!-- START of Content area -->
-
-
-    <h1>Server Error</h1>
-    <p>Ouch.. we screwed something up! You found some part of Freesound that's broken.
-
-    <p>Luckily, we'll get an email about it and we'll try to fix it as soon as possible. In the
-       meantime, try some other parts of website we haven't managed to break yet.
-
-    <p style="color:gray;border-top:thin gray solid;">Django is sad... sorry about that! (nginx 500 internal server error)</p>
-
-</div> <!-- END of Content area -->
-
-<br class="clear" />
-
-
-
-        </div>
-        </div>
-
-
-    </body>
-
-</html>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/accounts/_notab.html b/templates/accounts/_notab.html
deleted file mode 100644
index c2d683764..000000000
--- a/templates/accounts/_notab.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-
-{% block section_content %}
-{% endblock %}
-
-</div> <!-- END of Content area -->
-{% endblock %}
diff --git a/templates/accounts/_people.html b/templates/accounts/_people.html
deleted file mode 100644
index c31e579df..000000000
--- a/templates/accounts/_people.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "base.html" %}
-
-{% block tab_people_active %}active_tab{% endblock %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-
-{% block section_content %}
-{% endblock %}
-
-</div> <!-- END of Content area -->
-{% endblock %}
diff --git a/templates/accounts/_section.html b/templates/accounts/_section.html
deleted file mode 100644
index 3397a8412..000000000
--- a/templates/accounts/_section.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "base.html" %}
-
-{% block tab_home_active %}active_tab{% endblock %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-
-{% block section_content %}
-{% endblock %}
-
-</div> <!-- END of Content area -->
-{% endblock %}
diff --git a/templates/accounts/account.html b/templates/accounts/account.html
index 37bc4ffdb..b51c8f52f 100644
--- a/templates/accounts/account.html
+++ b/templates/accounts/account.html
@@ -1,392 +1,206 @@
-{% extends "accounts/_notab.html" %}
+{% extends "base.html" %}
 
 {% load display_sound %}
-{% load tags %}
+{% load display_pack %}
+{% load static %}
 {% load filter_img %}
-{% load maps_js_scripts %}
-
-{% block title %}{% if home %}home{% else %}{{user.username}}{% endif %}{% endblock %}
-
-{% block head %}
-    {{ block.super }}
-    {% maps_js_scripts %}
-{% endblock head %}
-
-{% block tab_home_active %}{% if home %}active_tab{% endif %}{% endblock %}
-{% block tab_people_active %}{% if not home %}active_tab{% endif %}{% endblock %}
-
-{% block section_content %}
-
-    <script type="text/javascript">
-
-        function follow_user() {
-            $("#follow_button").attr("disabled", "disabled");
-            $("#follow_user_error_message").hide();
-            $.ajax({
-                type: 'POST',
-                url: '{{ follow_user_url }}',
-                success: function() {
-                    $("#follow_button").removeAttr("disabled");
-                    location.reload();
-                },
-                error: function(data) {
-                    $("#follow_button").removeAttr("disabled");
-                    $("#follow_user_error_message").show();
-                    window.setTimeout(function(){
-                        $("#follow_user_error_message").fadeOut(200);
-                    }, 3000);
-                }
-            });
-        }
-
-        function unfollow_user() {
-            $("#follow_button").attr("disabled", "disabled");
-            $("#follow_user_error_message").hide();
-            $.ajax({
-                type: 'POST',
-                url: '{{ unfollow_user_url }}',
-                success: function() {
-                    $("#follow_button").removeAttr("disabled");
-                    location.reload();
-                },
-                error: function(data) {
-                    $("#follow_button").removeAttr("disabled");
-                    $("#follow_user_error_message").show();
-                    window.setTimeout(function(){
-                        $("#follow_user_error_message").fadeOut(200);
-                    }, 3000);
-                }
-            });
-        }
-
-    </script>
-
-    {% if home %}
-
-        <h1>Home</h1>
-
-        <div id="account_info_left">
-            <img src="{{user.profile.locations.avatar.L.url}}" class="account_avatar" />
-        </div>
-
-        <div class="account_information_and_home_options">
-        <ul>
-            <li><a href="{% url "account" user.username %}">View</a> your public profile</li>
-            <li><a href="{% url "accounts-edit" %}">Edit</a> your public profile</li>
-            <li><a href="{% url "accounts-describe" %}">Describe</a> your sounds</li>
-            <li><a href="{% url "accounts-attribution" %}">Attribution</a> - the sounds you downloaded</li>
-            {% if perms.tickets.can_moderate %}
-                <li><a href="{% url "tickets-moderation-home" %}">Moderate sounds</a> - {{ new_tickets_count }} new sound{{ new_tickets_count|pluralize}}</li>
-            {% endif %}
-            {% if perms.forum.can_moderate_forum %}
-                <li><a href="{% url "forums-moderate" %}">Moderate posts</a> - {{ new_posts }} new post{{ new_posts|pluralize}} </li>
-            {% endif %}
-            {% if user.profile.num_sounds %}
-                <li><a href="{% url "comments-for-user" user.username %}">All comments</a> on your sounds</li>
-            {% endif %}
-            <li>Your <a href="{% url "bookmarks-for-user" user.username %}">bookmarks</a></li>
-            <li>Activity <a href="{% url "stream" %}">stream</a></li>
-            {% if user.profile.has_sounds_with_old_cc_licenses %}<li><a href="{% url "update-old-cc-licenses" %}">Upgrade your sound licenses</a> to CC 4.0 equivalents</li>{% endif %}
-            {% comment %}<li>Your sound uploads <a href="{% url "accounts-pending" %}">pending moderation</a></li>{% endcomment %}
-        </ul>
-        </div>
-        <br style="clear: both;" />
-        <br>
-    {% else %}
-
-        <h1>{{user.username}}</h1>
-
-		{% if user.profile and not user.profile.is_anonymized_user %}
-
-            <div id="account_info_left">
+{% load bw_templatetags %}
+{% load tags %}
+{% load util %}
+{% load cache %}
 
-                <img src="{{user.profile.locations.avatar.L.url}}" class="account_avatar" />
+{% block title %}{{ user.username }}{% endblock %}
 
-                {% if request.user.is_authenticated %}
-                    {# don't allow a user to follow himself/herself #}
-                    {% if user.username != request.user.username  and not show_unfollow_button %}
-                        <a href="javascript:void(0)" id="follow_link" onclick="follow_user()"><button type="button" id="follow_button">Follow</button></a>
+{% block content %}
+    <div class="container">
+        <div class="row navbar-space-filler v-spacing-top-6 v-spacing-2 bw-profile__hero">
+            <div>
+                {% bw_user_avatar user.profile.locations.avatar.XL.url user.username 100 %}
+            </div>
+            <div class="bw-profile__username v-spacing-top-2 {% if user.profile.is_anonymized_user %}v-spacing-3{% endif %}">
+                <h1>{{ user.username }}</h1>
+            </div>
+            {% if not user.profile.is_anonymized_user %}
+            <div class="v-spacing-top-4 v-spacing-4 middle padding-left-2 padding-right-2">
+                {% if home %}
+                    {% if user.profile.num_sounds %}    
+                    <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'accounts-manage-sounds' 'published' %}">Manage sounds</a>
+                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt"  data-toggle="modal-default" data-modal-content-url="{% url "comments-for-user" user.username %}?ajax=1" data-modal-activation-param="comments" href="javascript:void(0);" title="See all comments on your sounds">Comments</a>
+                    {% else %}
+                    <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'accounts-upload' %}">Upload a sound</a>
                     {% endif %}
-
-                    {# show unfollow button instead if current page of user is being followed by logged in user already #}
+                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt" href="{% url 'accounts-edit' %}">Account settings</a>
+                {% else %}
                     {% if show_unfollow_button %}
-                        <a href="javascript:void(0)" id="follow_link" onclick="unfollow_user()"><button type="button" id="follow_button">Unfollow</button></a>
+                        <a class="no-hover text-center btn-secondary" href="{% url 'unfollow-user' user.username %}?next={{ next_path }}">Unfollow</a>
+                    {% else %}
+                        <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'follow-user' user.username %}?next={{ next_path }}">Follow</a>
                     {% endif %}
+                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt" href="{% url "messages-new" user.username %}">Message</a>
                 {% endif %}
-
-                <div id="follow_user_error_message">An error occurred,<br/> please try again.</div>
-
-            </div>
-            <div class="account_information_and_home_options">
-            <ul>
-                <li><a href="{% url "messages-new" user.username %}">Send a private message to this user</a></li>
-                {% if user.profile.home_page and user.profile.get_total_downloads > 0 %}
-                    <li>Home page: <a href="{{user.profile.home_page}}" rel="nofollow">{{user.profile.home_page}}</a></li>
-                {% endif %}
-                <li>Has been a user for {{user.date_joined|timesince}}</li>
-                {% if user.profile.num_sounds %}
-                <li>Number of sounds: {{user.profile.num_sounds}}
-                {% endif %}
-                {% if user.profile.num_posts %}
-                <li>Number of forum posts: {{user.profile.num_posts}}</li>
-                {% endif %}
-                <li><a href="{% url "user-downloaded-sounds" user.username %}">Sounds downloaded</a> ({{ user.profile.num_sound_downloads}}) by {{user.username}}</li>
-                <li><a href="{% url "user-downloaded-packs" user.username %}">Packs downloaded</a> ({{ user.profile.num_pack_downloads}}) by {{user.username}}</li>
-                {% if user.profile.num_sounds %}
-                <li><a href="{% url "comments-for-user" user.username %}">All comments</a> on {{user.username}}'s sounds</li>
-                {% endif %}
-                {% if has_bookmarks %}
-                <li><a href="{% url "bookmarks-for-user" user.username %}">Bookmarks</a> by {{user.username}}</li>
+                {% if perms.tickets.can_moderate or request.user.is_staff %}
+                    <div class="dropdown display-inline-block">
+                        <a class="no-hover dropdown-toggle" id="mod-actions-menu"
+                           data-toggle="dropdown"><button class="btn-inverse h-spacing-left-2 btn-profile-adapt">Mod actions</button></a>
+                        <ul class="dropdown-menu" aria-labelledby="mod-actions-menu">
+                            {% if user.profile.is_whitelisted %}
+                                <li class="bw-nav__action dropdown-item text-light-grey">
+                                    This user is whitelisted
+                                </li>
+                            {% else %}
+                                <li class="bw-nav__action dropdown-item text-light-grey">
+                                    <a class="bw-link--black" href="{% url 'tickets-whitelist-user' user.id %}?next={{ next_path }}">
+                                        Whitelist this user
+                                    </a>
+                                </li>
+                            {% endif %}
+                            <li class="bw-nav__action dropdown-item">
+                                <a class="bw-link--black" data-toggle="user-annotations-modal" data-modal-content-url="{% url "tickets-user-annotations" user.id %}?ajax=1" data-modal-activation-param="mod_annotations" href="javascript:void(0);">
+                                    Moderation annotations (<span class="annotation-counter-{{ user.id }}">{{ num_mod_annotations }}</span>)
+                                </a>
+                            </li>
+                            <li class="bw-nav__action dropdown-item">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "tickets-user-pending_sounds" user.username %}?ajax=1" data-modal-activation-param="pending_moderation" href="javascript:void(0);">
+                                    Sounds pending moderation ({{ num_sounds_pending }})
+                                </a>
+                            </li>
+                            {% if not user_downloads_public %}
+                            <li class="bw-nav__action dropdown-item">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);">
+                                    See downloaded sounds ({{ user.profile.num_sound_downloads }})
+                                </a>
+                            </li>
+                            <li class="bw-nav__action dropdown-item">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);">
+                                    See downloaded packs ({{ user.profile.num_pack_downloads }})
+                                </a>
+                            </li>
+                            {% endif %}
+                            <li class="bw-nav__action dropdown-item">
+                                <a class="bw-link--black" href="{% url "forums-search" %}?f=post_author:%22{{ user.username }}%22">
+                                    All forum posts ({{ user.profile.num_posts }})
+                                </a>
+                            </li>
+                            <li class="bw-nav__action dropdown-item">
+                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "comments-by-user" user.username %}?ajax=1" data-modal-activation-param="comments_by" href="javascript:void(0);" title="See all sound comments by {{ user.username }}">
+                                    All comments ({{ user.profile.num_comments }})
+                                </a>
+                            </li>
+                            {% if request.user.is_staff %}
+                                <li class="bw-nav__action dropdown-item">
+                                    <a class="bw-link--red" href="{% url "admin:auth_user_change" user.id %}">
+                                        Edit in admin
+                                    </a>
+                                </li>
+                            {% endif %}
+                        </ul>
+                    </div>
                 {% endif %}
-                {% if perms.tickets.can_moderate %}
-                    <li class="separator">Moderators only links</li>
-                    <li>Uploaded sounds <a href="{% url "tickets-user-pending_sounds" user.username %}">pending moderation ({{ num_sounds_pending }})</a></li>
-                    <li><a href="{% url "forums-search" %}?f=post_author:%22{{ user.username }}%22">All forum posts</a> by {{ user.username }}</li>
-                    <li><a href="{% url "comments-by-user" user.username %}">All comments</a> by {{ user.username }}</li>
-                    {% if user.profile.is_whitelisted %}
-                        <li>This user is whitelisted</li>
-                    {% endif %}
+            </div>
+            {% if user.profile.about or user.profile.home_page %}
+            <div class="bw-profile__description v-spacing-3">
+                {% if user.profile.about and show_about %}
+                    {{ user.profile.about|replace_img|safe|linebreaks|strip_unnecessary_br }}
                 {% endif %}
-                {% if request.user.is_staff %}
-                    <li class="separator">Admin only links</li>
-                    <li><a id="admin_link" class="icon" href="{% url "admin:auth_user_change" user.id %}">Edit user</a> or <a href="{% url "admin:accounts_profile_change" user.profile.id %}">profile</a> in the admin</a></li>
-                    <li><a href="{% url "tickets-user-pending_sounds" user.username %}">Moderation pending sounds</a> by {{ user.username }}</li>
+                {% if user.profile.home_page and user.profile.get_total_downloads > 0 %}
+                    <div class="{% if user.profile.about %}v-spacing-top-3{% endif %}">
+                        <a href="{{user.profile.home_page}}" rel="nofollow">{{user.profile.home_page}}</a>
+                    </div>
                 {% endif %}
-
-            </ul>
             </div>
-            <br style="clear: both;" />
-            {% if user.profile.about and show_about %}
-                <div class="about">
-                    {{user.profile.about|replace_img|safe|linebreaksbr }}
+            {% endif %}
+            <div class="v-spacing-2">
+                <div class="bw-profile__stats padding-left-4 padding-right-4">
+                    <div class="text-grey">Has been a user for {{user.date_joined|timesince}}</div>
+                    <div><a id="user-followers-button" data-modal-activation-param="followers" data-modal-content-url="{% url 'user-followers' user.username %}?ajax=1&page={{ followers_modal_page }}" href="javascript:void(0);">{% cache 43200 bw_user_profile_followers_count user.id %}{% with followers.count as followers_count %}{{ followers_count|bw_intcomma }} follower{{ followers_count|pluralize }}{% endwith %}{% endcache %}</a></div>
+                    <div><a id="user-following-users-button" data-modal-activation-param="following" data-modal-content-url="{% url 'user-following-users' user.username %}?ajax=1&page={{ following_modal_page }}" href="javascript:void(0);">{% cache 43200 bw_user_profile_following_count user.id %}{{ following.count }}{% endcache %} following</a></div>
+                    <div><a id="user-following-tags-button" data-modal-activation-param="followingTags" data-modal-content-url="{% url 'user-following-tags' user.username %}?ajax=1&page={{ following_tags_modal_page }}" href="javascript:void(0);">{% cache 43200 bw_user_profile_following_tags_count user.id %}{% with following_tags.count as following_tags_count %}{{ following_tags.count|bw_intcomma }} tag{{ following_tags_count|pluralize }} following{% endwith %}{% endcache %}</a></div>
                 </div>
+                {% if user_downloads_public %}
+                <div class="bw-profile__stats v-spacing-top-1 padding-left-4 padding-right-4">
+                    <div><a data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);" >{{ user.profile.num_sound_downloads }} sound{{ user.profile.num_sound_downloads|pluralize}} downloaded</a></div>
+                    <div><a data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);" >{{ user.profile.num_pack_downloads }} pack{{ user.profile.num_pack_downloads|pluralize}} downloaded</a></div>
+                </div>
+            </div>
+            {% endif %}
             {% endif %}
-            <br>
-        {% endif %}
-    {% endif %}
-
-<div id="content">
-    {% if latest_sounds %}
-        <div id="latest_sounds" class="content_box">
-            <h3>{% if home %}Your{% else %}{{ user.username }}'s{% endif %} latest sounds</h3>
-            {% for sound in latest_sounds %}
-                    {% display_sound sound %}
-            {% endfor %}
-            <p><a href="{% url "sounds-for-user" user.username %}?page={% if home %}1{% else %}2{% endif %}">more...</a></p>
         </div>
-    {% else %}
-        <div id="latest_sounds" class="content_box">
-            <h3>{% if home %}Your{% else %}{{ user.username }}'s{% endif %} latest sounds</h3>
-            <p>
-            {% if home %}You have not uploaded any sounds...
-            {% else %}{{ user.username }} has not uploaded any sounds...
-            {% endif %}</p>
+        <div class="divider-light"></div>
+        <div class="row bw-profile__taps_nav">
+            <ol>
+                <li class="active" data-toggle="tap" data-target="#sounds">Latest sounds</li>
+                <li data-toggle="tap" data-target="#packs">Latest packs</li>
+                {% comment %}<li data-toggle="tap" data-target="#tapDownloaded">Downloads</li>{% endcomment %}
+            </ol>
         </div>
-
-    {% endif %}
-    {% if home %}
-        {% if unmoderated_sounds %}
-            <br>
-            <div id="unmoderated_sounds" class="content_box">
-                <h3>Uploaded sounds awaiting moderation ({{ unmoderated_sounds_count }})</h3>
-                {% for ticket in unmoderated_sounds %}
-                    <li><span class="filename">{{sound.original_filename}}</span>, uploaded on <span class="date">{{ticket.sound_obj.created}}</span> <span class="ticket_link"><a href="{% url "tickets-ticket" ticket.key %}">Go to ticket</a></span></li>
-                {% endfor %}
-                {% if num_more_unmoderated_sounds > 0 %}
-                    <li> And {{ num_more_unmoderated_sounds }} other uploaded sound{{ num_more_unmoderated_sounds|pluralize}}
-                {% endif %}
-
-            </div><!-- #unmoderated_sounds -->
-            <p style='margin-left:20px'><a href="{% url "accounts-pending" %}">more...</a></p>
-
-        {% endif %}
-
-
-        {% if unprocessed_sounds %}
-            <br>
-            <div id="unprocessed_sounds" class="content_box">
-                <h3>Uploaded sounds that have not been processed yet ({{ unprocessed_sounds.count }})</h3>
-
-                {% comment %}
-                <p>Sounds in this list have not been processed yet and thus can't be moderated. This might be because they are still pending to process or because processing has failed.</p>
-                {% endcomment %}
-
-                {% for sound in unprocessed_sounds %}
-                    <li>
-                        <a href="{% url 'sound' sound.user.username sound.id %}">{{sound.original_filename}}</a>. Uploaded on <span class="date">{{sound.created}}</span>
-                    {% if sound.processing_state == 'PE' %}
-                        <span class="pending">Pending processing</span>
+        <div class="divider-light"></div>
+        <div class="row">
+            <div class="col-md-8 v-spacing-top-4">
+                <div class="bw-profile__tap_container bw-profile__tap_container__active" id="sounds">
+                    {% if latest_sounds %}
+                        <div class="row">
+                            {% for sound in latest_sounds %}
+                                <div class="col-6 col-lg-4">
+                                    {% display_sound_small sound %}
+                                </div>
+                            {% endfor %}
+                        </div>
+                        <div class="v-spacing-top-4 text-center">
+                            <a class="no-hover btn-primary" href="{{ user.profile.get_user_sounds_in_search_url }}">See all sounds by {{ user.username }}</a>
+                        </div>
                     {% else %}
-                        {% if sound.processing_state == 'QU' %}
-                            <span class="queued">Queued for processing</span>
-                        {% else %}
-                            {% if sound.processing_state == 'FA' %}
-                                <span class="failed">Failed processing</span>
-                            {% else %}
-                                {% if sound.processing_state == 'PR' %}
-                                    <span class="processing">Currently processing</span>
-                                {% else %}
-                                    Processing state: {{sound.processing_state}}
-                                {% endif %}
-                            {% endif %}
-                        {% endif %}
+                        <div class="text-center">
+                            <h5>No sounds... &#128543</h5>
+                            <div class="text-grey v-spacing-top-1">Looks like {{ user.username }} has not uploaded any sounds yet</div>
+                        </div>
                     {% endif %}
-                    <a href="{% url "sound-delete" sound.user.username sound.id %}" >x</a>
-                    </li>
-                {% endfor %}
-            </div><!-- #unprocessed_sounds -->
-        {% endif %}
-
-        {% if current_bulkdescribe %}
-            <br>
-            <div id="bulk_describe_processes_list" class="content_box">
-              <h3>Bulk Describe processes ({{ current_bulkdescribe|length }})</h3>
-                {% for bulk_describe in current_bulkdescribe %}
-                    {% with bulk_describe.get_description_progress_info as progress_info %}
-                    <li>
-                      <a href="{% url "accounts-bulk-describe" bulk_describe.id %}">{{ bulk_describe.original_csv_filename }}</a>. Created on <span class="gray_text">{{bulk_describe.created}}</span>
-                        Status:
-                        {% if bulk_describe.progress_type == 'F' and progress_info.n_sounds_processing %}
-                            <span class="orange_text">{{ bulk_describe.get_progress_type_display }} ({{ progress_info.n_sounds_processing }} sounds still processing)</span>
-                        {% elif bulk_describe.progress_type == 'F' and not progress_info.n_sounds_processing %}
-                            <span class="green_text">Finished</span>
-                        {% elif bulk_describe.progress_type == 'V' and bulk_describe.has_line_validation_errors %}
-                            <span class="red_text">Errors in validation</span>
-                        {% elif bulk_describe.progress_type == 'V' and bulk_describe.has_global_validation_errors %}
-                            <span class="red_text">Errors in validation</span>
-                        {% else %}
-                            <span class="orange_text">{{ bulk_describe.get_progress_type_display }}</span>
-                        {% endif %}
-                    </li>
-                    {% endwith %}
-                {% endfor %}
+                </div>
+                <div class="bw-profile__tap_container" id="packs">
+                    <div class="async-section"
+                        data-async-section-content-url="{% url 'account-latest-packs-section' user.username %}?ajax=1">
+                        <img width="12px" height="12px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}">
+                    </div>
+                </div>
+                <div class="bw-profile__tap_container" id="tapDownloaded">
+                    downloaded
+                </div>
             </div>
-        {% endif %}
-    {% endif %}
-</div><!-- #content -->
-
-<div id="sidebar">
-    {% with user.profile.get_user_tags as tags %}
-    {% if tags %}
-        <div id="user_most_used_tags" class="content_box">
-            <h3>{% if home %}Your{% else %}{{ user.username }}'s{% endif %} most used tags</h3>
-            <p class="user_tagcloud">
-            {% for tag in tags|add_sizes:"name:0.5:2.5" %}<span style="font-size:{{tag.size}}em"><a href="{% url "tags" tag.name %}">{{tag.name}}</a></span> {% endfor %}
-            </p>
-        </div><!-- #user_most_used_tags -->
-    {% endif %}
-    {% endwith %}
-
-    {% if following or followers or following_tags %}
-
-        <div id="social" class="content_box">
-
-            <h3>Following users and tags</h3>
-
-            {% if following %}
-                {% if home %}
-                    <h3>Users you are following ({{ following.count }})</h3>
-                {% else %}
-                    <h3>Users {{ user.username }} is following ({{ following.count }})</h3>
+            <aside class="col-md-4 col-extra-left-padding-middle-md bw-profile__sections">
+                <div class="divider-light v-spacing-top-6 v-spacing-5 d-md-none"></div>
+                <section class="bw-profile__section_stats v-spacing-top-4 async-section"
+                    data-async-section-content-url="{% url 'account-stats-section' user.username %}?ajax=1">
+                    <img width="12px" height="12px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}">
+                </section>
+                {% if last_geotags_serialized %}
+                <div class="divider-light"></div>
+                <section id="latest_geotags" class="v-spacing-top-4 v-spacing-4" data-map-loaded="false">
+                    <h5 class="padding-bottom-3">Latest geotags</h5>
+                    <div id="static_map_wrapper"  class="map sidebar-map w-100 middle center cursor-pointer" data-pins="{{ last_geotags_serialized }}"></div>
+                    <div id="map_canvas" class="map sidebar-map display-none w-100" data-geotags-url="{% url "geotags-for-user-latest-barray" user.username %}"></div>
+                    <div class="v-spacing-top-2 center">
+                        <a class="no-hover" href="{% url "geotags-for-user" user.username %}">See all geotags by {{ user.username }}</a>
+                    </div>
+                </section>
                 {% endif %}
-
-                <ul>
-                    {% for follow_user_item in following|slice:":21" %}
-                        <a href="{% url "account" follow_user_item.user_to.username %}" title="{{ follow_user_item.user_to.username }}"><img src="{{follow_user_item.user_to.profile.locations.avatar.M.url}}" alt="{{ follow_user_item.user_to.username }} avatar" /></a>
+                {% cache 3600 bw_user_profile_tags user.id %}
+                {% with user.profile.get_user_tags as tags %}
+                {% if tags %}
+                <div class="divider-light"></div>
+                <section class="v-spacing-top-4 v-spacing-4">
+                    <h5 class="padding-bottom-3">Most used tags</h5>
+                    {% for tag in tags|add_sizes:"count:0.1:1.0" %}
+                        {% bw_tag tag.name 1 '' tag.browse_url tag.size %}
                     {% endfor %}
-                </ul>
-                <p><a href="{% url "user-following-users" user %}">more...</a></p>
-            {% endif %}
-
-            {% if followers %}
-                {% if home %}
-                    <h3>Users that are following you ({{ followers.count }})</h3>
-                {% else %}
-                    <h3>Users that are following {{ user.username }} ({{ followers.count }})</h3>
+                </section>
                 {% endif %}
-
-                <ul>
-                    {% for follow_user_item in followers|slice:":21" %}
-                        <a href="{% url "account" follow_user_item.user_from.username %}" title="{{follow_user_item.user_from.username}}"><img src="{{follow_user_item.user_from.profile.locations.avatar.M.url}}" alt="{{follow_user_item.user_from.username}} avatar" /></a>
-                    {% endfor %}
-                </ul>
-                <p><a href="{% url "user-followers" user %}">more...</a></p>
-            {% endif %}
-
-            {% if following_tags %}
-                <div id="following_tags">
-                    {% if home %}
-                        <h3>Tags you are following ({{ following_tags.count }})</h3>
-                    {% else %}
-                        <h3>Tags {{ user.username }} is following ({{ following_tags.count }})</h3>
-                    {% endif %}
-                    <ul>
-                        {% for follow_tag_item in following_tags|slice:":5" %}
-                            <span class="tag_group" onclick="location.href='{% url "tags" follow_tag_item.get_slash_tags %}'">
-                            <ul class="tags" id="following_tags">
-                            {% for tag in follow_tag_item.get_split_tags %}
-                                {% comment %}<li><a href="{% url "tags"tag %}">{{ tag }}</a></li>{% endcomment %}
-                                <li><a>{{ tag }}</a></li>
-                                {% comment %}<li>{{ tag }}</li>{% endcomment %}
-                            {% endfor %}
-                            </ul></span>
-                        {% endfor %}
-                    </ul>
-                    <p><a href="{% url "user-following-tags" user %}">more...</a></p>
-                </div>
-            {% endif %}
-
+                {% endwith%}
+                {% endcache %}
+            </aside>
         </div>
+    </div>
+{% endblock %}
 
-    {% endif %}
-
-    {% if user.profile.has_geotags %}
-    <div id="latest_geotags" class="content_box">
-        <h3>{% if home %}Your{% else %}{{ user.username }}'s{% endif %} latest geotags</h3>
-        <p id="map_load_trigger"><a href="javascript:void(0);" onclick="triggerLoadMap()">Load map...</a></p>
-        <div id="map_loading_indicator"><img width="12px" height="12px" src="{{ media_url }}images/indicator.gif" style="display: none;"></div>
-        <div id="map_wrapper" style="display: none;">
-            <div id="map_canvas"></div>
-            <script type="text/javascript">
-                function triggerLoadMap() {
-                    $('#map_loading_indicator').show();
-                    make_sounds_map('{% url "geotags-for-user-latest-barray" user.username %}', 'map_canvas', function(){
-                        $('#map_load_trigger').hide();
-                        $('#map_wrapper').show();
-                        $('#map_loading_indicator').hide(); // Once map is ready, hide the loading indicator
-                    });
-                }
-            </script>
-            <p><a href="{% url "geotags-for-user" user.username %}">more...</a></p>
-        </div>
-    </div><!-- #latest_geotags -->
-    {% endif %}
-
-    {% if latest_packs %}
-    <div id="latest_packs" class="content_box">
-        <h3>{% if home %}Your{% else %}{{ user.username }}'s{% endif %} latest packs</h3>
-        <ul>
-        {% for pack in latest_packs %}
-            <li><a href="{% url "pack" user.username pack.id %}">{{pack.name}}</a> (<span class="pack_count">{{pack.num_sounds}}</span>)</li>
-        {% endfor %}
-        </ul>
-        <p><a href="{% url "packs-for-user" user.username %}">more...</a></p>
-    </div><!-- #latest_packs -->
-    {% endif %}
-
-    {% if home %}
-        {% if packs_without_sounds %}
-        <div id="unmoderated_packs" class="content_box">
-            <h3>Non visible packs</h3>
-            <p>This list contains packs that are empty or packs whose sounds are unmoderated or unprocessed.</p>
-            <ul>
-            {% for pack in packs_without_sounds %}
-                <li><a href="{% url "pack" user.username pack.id %}">{{pack.name}}</a>, created on <span class="date">{{pack.created}}</span></li>
-            {% endfor %}
-            <ul>
-        </div><!-- #unmoderated_packs -->
-        {% endif %}
-    {% endif %}
-</div><!-- #sidebar -->
-<br class="clear"/><!-- Need a clearing element for some reason here.. -->
+{% block extrabody %}
+    {% bw_maps_js_scripts %}
+    <script src="{% static 'bw-frontend/dist/profile.js' %}"></script>
 {% endblock %}
diff --git a/templates_bw/accounts/account_latest_packs_section.html b/templates/accounts/account_latest_packs_section.html
similarity index 100%
rename from templates_bw/accounts/account_latest_packs_section.html
rename to templates/accounts/account_latest_packs_section.html
diff --git a/templates_bw/accounts/account_settings_base.html b/templates/accounts/account_settings_base.html
similarity index 100%
rename from templates_bw/accounts/account_settings_base.html
rename to templates/accounts/account_settings_base.html
diff --git a/templates_bw/accounts/account_stats_section.html b/templates/accounts/account_stats_section.html
similarity index 100%
rename from templates_bw/accounts/account_stats_section.html
rename to templates/accounts/account_stats_section.html
diff --git a/templates/accounts/accounts.html b/templates/accounts/accounts.html
deleted file mode 100644
index a06dd7b9b..000000000
--- a/templates/accounts/accounts.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{% extends "accounts/_people.html" %}
-{% load cache %}
-{% cache 3600 accounts %}
-{% load display_sound %}
-{% load tags %}
-{% load smileys %}
-{% block title %} people {% endblock %}
-
-{% block section_content %}
-
-<h1>People</h1>
-<div id="content">
-
-    <div id="most_active_users" class="content_box">
-    <h3>Most active users in last {{num_days}} days</h3>
-     {% for user in most_active_users %}
-        {% include "accounts/active_user_and_content.html" %}
-     {% endfor %} <br class="clear" /><!-- clear #most_active_users -->
-    </div><!-- #most_active_users -->
-
-    <div id="newest_active_users" class="content_box">
-    <h3>Newest active users</h3>
-     {% for user in new_users %}
-        {% include "accounts/active_user_and_content.html" %}
-     {% endfor %}
-    </div><!-- #newest_active_users -->
-
-</div><!-- #content -->
-<div id="sidebar">
-    <div id="all_time_most_active_users" class="content_box">
-    <h3>All time most active users</h3>
-
-     {% for user in all_time_most_active_users %}
-        {% include "accounts/active_user.html" %}
-     {% endfor %} <br class="clear" />
-    </div><!-- #users_currently_online -->
-
-    <div id="users_currently_online" class="content_box">
-    <h3>Users currently online ({{logged_users|length}})</h3>
-    <div id="users_currently_online_box">
-    {% for user in logged_users %}
-
-        <div class="online_user">
-            <a href="{% url "account" user.username %}">
-                <img src="{{user.profile.locations.avatar.M.url}}" alt="avatar" class="currently_online_avatar" title="{{user.username}}" />
-            </a>
-        </div>
-
-    {% endfor %}
-    </div>
-    </div><!-- #users_currently_online -->
-</div><!-- #sidebar -->
-<br class="clear" /><!-- Clearing element -->
-{% endblock %}
-{% endcache %}
diff --git a/templates/accounts/activate.html b/templates/accounts/activate.html
index f1f94d965..fc3e59c77 100644
--- a/templates/accounts/activate.html
+++ b/templates/accounts/activate.html
@@ -1,21 +1,19 @@
-{% extends "accounts/_section.html" %}
+{% extends "simple_page.html" %}
 
+{% block title %}User activation{% endblock %}
+{% block page-title %}{% if all_ok %}Activation succeeded{% else %}User activation{% endif %}{% endblock %}
 
-{% block title %}user activation{% endblock %}
-
-{% block section_content %}
-{% if all_ok %}
-    <h1>Activation succeeded...</h1>
-    <p>You have been activated. Please <a href="{% url "login" %}">log in</a> to continue.
-{% else %}
-    <h1>Activation failed...</h1>
-    {% if user_does_not_exist %}
-    <p>We're sorry but the user you are trying to activate does not exist anymore! Please sign up again...</p>
-    {% endif %}
-
-    {% if decode_error %}
-    <p>We're sorry, but we can't find that activation key in the database. It might have expired.</p>
-    <p>Have you tried to log in? You can also try copy-pasting the link that we sent you instead of clicking it...</p>
+{% block page-content %}
+    {% if all_ok %}
+        <p class="text-grey v-spacing-3">Your account has been activated. You may go ahead and log in now.</p>
+        <button class="btn-primary" data-toggle="login-modal" data-target="#loginModal">Log in</button>
+    {% else %}
+        {% if user_does_not_exist %}
+            <p class="text-grey v-spacing-3">We're sorry but the user you are trying to activate does not exist anymore! Please register again...</p>
+            <button class="btn-secondary" data-toggle="registration-modal" data-target="#registerModal">Join</button>
+        {% endif %}
+        {% if decode_error %}
+            <p class="text-grey v-spacing-3">We're sorry but we can't find that activation key in the database. Try copy-pasting the link that we sent you instead of clicking it...</p>
+        {% endif %}
     {% endif %}
-{% endif %}
 {% endblock %}
diff --git a/templates/accounts/active_user.html b/templates/accounts/active_user.html
deleted file mode 100644
index 4d50633ac..000000000
--- a/templates/accounts/active_user.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% load cache %}
-{% cache 3600 active_user_no_content user.0.id %}
-{% load active_user_content %}
-
-<div class="active_user">
-    <div class="active_user_info">
-        <img src="{{user.0.profile.locations.avatar.M.url}}" alt="avatar" />
-
-        <div class="post_author"><a href="{% url "account" user.0.username %}">{{user.0.username}}</a></div><!-- .post_author -->
-
-        <div class="people_user_info">
-            {{user.0.profile.num_sounds}} sound{{user.0.profile.num_sounds|pluralize}},
-            {{user.0.profile.num_posts}} post{{user.0.profile.num_posts|pluralize}}<br>
-        </div><!-- .people_user_info -->
-    </div><!-- .active_user_info -->
-<br class="clear" /><!-- clear .active_user -->
-</div><!-- .active_user -->
-
-{% endcache %}
diff --git a/templates/accounts/active_user_and_content.html b/templates/accounts/active_user_and_content.html
deleted file mode 100644
index 76fccf9ad..000000000
--- a/templates/accounts/active_user_and_content.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% load cache %}
-{% cache 3600 active_user_and_content user.0.id %}
-
-{% load active_user_content %}
-
-<div class="active_user">
-    <div class="active_user_info">
-        <img src="{{user.0.profile.locations.avatar.M.url}}" alt="avatar" />
-
-        <div class="post_author"><a href="{% url "account" user.0.username %}">{{user.0.username}}</a></div><!-- .post_author -->
-
-        <div class="people_user_info">
-            {{user.0.profile.num_sounds}} sound{{user.0.profile.num_sounds|pluralize}} ,
-            {{user.0.profile.num_posts}} post{{user.0.profile.num_posts|pluralize}}<br>
-            recent activity:
-            {% if user.2.uploads %}
-            {{user.2.uploads}} sound{{user.2.uploads|pluralize}}
-            {%endif%}
-            {% if user.2.posts %}
-            {{user.2.posts}} post{{user.2.posts|pluralize}}
-            {%endif%}
-            {% if user.2.comments %}
-            {{user.2.comments}} comment{{user.2.comments|pluralize}}
-            {%endif%}
-        </div><!-- .people_user_info -->
-    </div><!-- .active_user_info -->
-    <div class="balloon_wrapper">
-        <div class="active_user_content">
-        {% active_user_content user.0 user.1 %}
-        </div><!-- .active_user_content -->
-    </div><!-- .balloon_wrapper -->
-<br class="clear" /><!-- clear .active_user -->
-</div><!-- .active_user -->
-{% endcache %}
-
diff --git a/templates/accounts/active_user_content.html b/templates/accounts/active_user_content.html
deleted file mode 100644
index 996cdfa7f..000000000
--- a/templates/accounts/active_user_content.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% load cache %}
-{% load util %}
-{% load smileys %}
-{% load filter_img %}
-
-{% cache 3600 active_user_content user.id %}
-
-    {% if content_type == 'sound' %}
-        {% with content as sound %}
-            {% include "accounts/player.html" %}
-        {% endwith %}
-    {% endif %}
-
-    {% if content_type == 'post' %}
-        <span class="people_user_info">post in <a href="{% url "forums-thread" content.thread.forum.name_slug content.thread.id %}"
-            class="topic_subject">  {{content.thread.title|safe}}</a></span>
-            {{content.body|replace_img|smileys|safe|linebreaks|truncatewords:30}}
-    {% endif %}
-
-    {% if content_type == 'comment' %}
-        <span class="people_user_info">comment in <a class="title" href="{% url "sound" content.sound.user.username content.sound.id %}">{{content.sound.original_filename|truncate_string:28}}</a></span>
-        {{content.comment.sound}}
-        {{content.comment|replace_img|smileys|safe|linebreaks}}
-
-        {% endif %}
-
-{% endcache %}
diff --git a/templates/accounts/attribution.html b/templates/accounts/attribution.html
index 04d86f7ca..1646a3118 100644
--- a/templates/accounts/attribution.html
+++ b/templates/accounts/attribution.html
@@ -1,34 +1,32 @@
-{% extends "accounts/_section.html" %}
-
-{% load paginator %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
 {% load absurl %}
 {% load util %}
 
-
 {% block title %}Attribution{% endblock %}
+{% block page-title %}Attribution{% endblock %}
 
-{% block content %}
-
-<h1>Attribution</h1>
+{% block page-content %}
 <p>
-	This is the list of files you have downloaded. When you use freesound samples (under the "attribution" or "attribution non-commercial license"), you have to <a href="{% url "wiki-page" "faq" %}#how-do-i-creditattribute">credit the original creator of the sound</a> in your work. This list makes it a little bit easier to do so. "S" means sound, "P" means pack.<br/>
-	There are 3 flavors of this list: <a href="?format=regular">regular</a>, <a href="?format=html">html</a> or <a href="?format=plaintext">plain text</a>.
-    <br/>You can also download the complete list as <a href="{% url "accounts-download-attribution" %}?dl=csv">csv</a> or <a href="{% url "accounts-download-attribution" %}?dl=txt">plain text</a>.
+	This is the list of files you have downloaded. When you use freesound samples under the Attribution or Attribution NonCommercial license, you have to <a href="{% url "wiki-page" "faq" %}#how-do-i-creditattribute">credit the original creator of the sound</a> in your work. 
+    This list makes it easy to do so. "S" means sound, "P" means pack. 
+    There are 3 flavors of this list: <a href="?format=regular">regular</a>, <a href="?format=html">html</a> or <a href="?format=plaintext">plain text</a>.
+    Alternatively, you can download the <b>complete record of your downloaded sounds</b> in <a href="{% url "accounts-download-attribution" %}?dl=csv">csv</a> or <a href="{% url "accounts-download-attribution" %}?dl=txt">plain text</a> formats.
+</p><p>
+    
 </p>
 
-<div class="attribution_objects">
-
-{% show_paginator paginator page current_page request "download" %}
+<div class="v-spacing-top-4 v-spacing-6">
 
 {% regroup page.object_list by created|date:"F jS, Y" as downloads %}
 
 {% ifequal format "regular" %}
 	{% for group in downloads %}
-		<h2>Downloaded on {{group.grouper}}</h2>
+		<h4 class="v-spacing-top-4">Downloaded on {{group.grouper}}</h4>
 		<ul>
         {% for download_item in group.list %}
             {% if download_item.download_type == 'sound' %}
-                <li>S: <a href="{% absurl 'sound' download_item.sound__user__username download_item.sound_id %}">{{download_item.sound__original_filename }}</a> by <a href="{% absurl 'account' download_item.sound__user__username  %}">{{download_item.sound__user__username }}</a> | <span style="color:gray">License: </span>{% if download_item.license__name %}{{ download_item.license__name|license_with_version:download_item.license__deed_url}}{% else %}{{ download_item.sound__license__name|license_with_version:download_item.sound__license__deed_url }}{% endif %}</li>
+                <li>S: <a href="{% absurl 'sound' download_item.sound__user__username download_item.sound_id %}">{{download_item.sound__original_filename }}</a> by <a href="{% absurl 'account' download_item.sound__user__username  %}">{{download_item.sound__user__username }}</a> | <span class="text-grey">License: </span>{% if download_item.license__name %}{{ download_item.license__name|license_with_version:download_item.license__deed_url}}{% else %}{{ download_item.sound__license__name|license_with_version:download_item.sound__license__deed_url }}{% endif %}</li>
             {% else %}
                 {% comment %}NOTE: in the line below, even though we're displaying information about a pack download, we use download_item.X where X takes the same names as in the line above when we were displaying
                 information about sound download. This is beacuse after doing the uninon of the two QuerySets (see accounts.views.attribution) the names of the columns are "unified" and taken from the main QuerySet{% endcomment %}
@@ -42,7 +40,7 @@ <h2>Downloaded on {{group.grouper}}</h2>
 {% ifequal format "html" %}
 <p>
 	{% for group in downloads %}
-		{% filter force_escape %}<h2>Downloaded on {{group.grouper}}</h2>{% endfilter %}<br />
+		{% filter force_escape %}<h4>Downloaded on {{group.grouper}}</h4>{% endfilter %}<br />
 		{% filter force_escape %}<ul>{% endfilter %}<br />
 			{% for download_item in group.list %}
 				&nbsp;&nbsp;&nbsp;&nbsp;{% filter force_escape %}
@@ -78,8 +76,8 @@ <h2>Downloaded on {{group.grouper}}</h2>
 </p>
 {% endifequal %}
 
-{% show_paginator paginator page current_page request "download" %}
-
 </div>
 
-{% endblock %}
+{% bw_paginator paginator page current_page request "download" %}
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/bulk_describe.html b/templates/accounts/bulk_describe.html
index 737be5f45..a37e78c16 100644
--- a/templates/accounts/bulk_describe.html
+++ b/templates/accounts/bulk_describe.html
@@ -1,31 +1,32 @@
-{% extends "base.html" %}
-{% load filter_img %}
-{% block title %}{{ block.super }}Describe - Bulk Describe Sounds{% endblock %}
-{% block content %}
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
 
-<h1>Bulk description of files</h1>
+{% block title %}Bulk description of sound files{% endblock %}
+{% block page-title %}Bulk description of sound files{% endblock %}
 
+{% block page-content %}
 {% if bulk.progress_type == 'N' %}
-    <h3>Validating data file "{{ bulk.original_csv_filename }}" <img width="12px" height="12px" src="{{ media_url }}images/indicator.gif"/></h3>
+    <h3 class="text-grey">Validating data file "{{ bulk.original_csv_filename }}" <img width="24px" height="24px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}"/></h3>
     <p>
         The uploaded data file has not yet been validated. If there are many sounds to be described, this process
         could take a few minutes. This page will reload automatically when data validation has finished.
     </p>
-    <script>setTimeout(function(){ window.location.reload(1); }, 3500);</script>
 
-    <form action="{% url "accounts-bulk-describe" bulk.id %}" method="POST" class="disable-on-submit">{% csrf_token %}
-        <button style="float:left;" type="submit" name="delete">Delete this data file and upload a new one</button>
-        <br style="clear:both;"/>
+    <form action="." method="POST" class="v-spacing-top-5 disable-on-submit">{% csrf_token %}
+        <div class="right">
+            <button class="btn-primary" name="delete">Delete this data file and upload a new one</button>
+        </div>
     </form>
 
 {% elif bulk.progress_type == 'V' %}
-    <h3>Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
+    <h3 class="text-grey">Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
 
     {% if global_errors %}
         <p>We have encountered some <b>major issues</b> when validating your data file:</p>
         <ul>
         {% for error in global_errors %}
-            <li>{{ error|safe }}</li>
+            <li class="text-red">{{ error|safe }}</li>
         {% endfor %}
          </ul>
         <p>Please make sure you are following <a href="{% url 'wiki-page' 'faq' %}#csv-file-instructions">these guidelines</a> to create your data file.</p>
@@ -33,7 +34,7 @@ <h3>Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
 
     {% if lines_failed_validation and not global_errors %}
         <p>
-            The following <b>{{ lines_failed_validation|length }} sound{{ lines_failed_validation|pluralize }}
+            The following <b>{{ lines_failed_validation|length|bw_intcomma }} sound{{ lines_failed_validation|pluralize }}
             ha{{ lines_failed_validation|pluralize:"s,ve" }} failed validation</b> and won't be added
             to Freesound. Move your mouse over the red cells to see the errors:
         </p>
@@ -47,39 +48,39 @@ <h3>Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
                 <tr>
                     <td {% if line.line_errors.columns %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
                         {{ line.line_no }}
-                        <span class="tooltiptext">{{ line.line_errors.columns|safe }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.columns }}</span>
                     </td>
                     <td {% if line.line_errors.audio_filename %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
                         {{ line.line_original.audio_filename }}
-                        <span class="tooltiptext">{{ line.line_errors.audio_filename|safe }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.audio_filename }}</span>
                     </td>
                     <td {% if line.line_errors.name %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
                         {{ line.line_original.name }}
-                        <span class="tooltiptext">{{ line.line_errors.name|safe }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.name }}</span>
                     </td>
                     <td {% if line.line_errors.tags %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
                         {{ line.line_original.tags }}
-                        <span class="tooltiptext">{{ line.line_errors.tags|safe  }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.tags  }}</span>
                     </td>
                     <td {% if line.line_errors.geotag %}class="csv-bulk-upload-error-cell cell_tooltip_right csv-validation-table-geotag-td"{% endif %}>
                         {{ line.line_original.geotag }}
-                        <span class="tooltiptext">{{ line.line_errors.geotag|safe  }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.geotag  }}</span>
                     </td>
                     <td {% if line.line_errors.description %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
                         {{ line.line_original.description|truncatewords:20 }}
-                        <span class="tooltiptext">{{ line.line_errors.description|safe  }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.description  }}</span>
                     </td>
                     <td {% if line.line_errors.license %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
                         {{ line.line_original.license }}
-                        <span class="tooltiptext">{{ line.line_errors.license|safe  }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.license  }}</span>
                     </td>
                     <td {% if line.line_errors.pack_name %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
                         {{ line.line_original.pack_name }}
-                        <span class="tooltiptext">{{ line.line_errors.pack_name|safe  }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.pack_name  }}</span>
                     </td>
                     <td {% if line.line_errors.is_explicit %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
                         {{ line.line_original.is_explicit }}
-                        <span class="tooltiptext">{{ line.line_errors.is_explicit|safe  }}</span>
+                        <span class="tooltiptext">{{ line.line_errors.is_explicit  }}</span>
                     </td>
                 </tr>
             {% endfor %}
@@ -89,7 +90,7 @@ <h3>Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
 
     {% if lines_validated_ok and not global_errors %}
         <p><br>
-            The following <b>{{ lines_validated_ok|length }} sound{{ lines_validated_ok|length|pluralize }}
+            The following <b>{{ lines_validated_ok|length|bw_intcomma }} sound{{ lines_validated_ok|length|pluralize }}
             ha{{ lines_validated_ok|pluralize:"s,ve" }} validated correctly</b> and will be added to
             Freesound with the following <i>cleaned</i> metadata:
         </p>
@@ -115,41 +116,41 @@ <h3>Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
         </table>
     {% endif %}
 
-    <form action="{% url "accounts-bulk-describe" bulk.id %}" method="POST" class="disable-on-submit">{% csrf_token %}
-        <button style="float:left;" type="submit" name="delete">Delete this data file and upload a new one</button>
-        <button style="float:right;" type="submit" name="start" {% if not lines_validated_ok|length %}disabled="disabled"{% endif %}>Continue and add the {{ lines_validated_ok|length }} valid sound{{ lines_validated_ok|length|pluralize }} to Freesound</button>
-        <br style="clear:both;"/>
+    <form action="." method="POST" class="v-spacing-top-5 disable-on-submit">{% csrf_token %}
+        <div class="between">
+            <button class="btn-secondary" name="delete">Delete this data file and upload a new one</button>
+            <button class="btn-primary" name="start" {% if not lines_validated_ok|length %}disabled{% endif %}>Continue and add the {{ lines_validated_ok|length|bw_intcomma }} valid sound{{ lines_validated_ok|length|pluralize }} to Freesound</button>
+        </div>
     </form>
 
 {% elif bulk.progress_type == 'S' or bulk.progress_type == 'F' or bulk.progress_type == 'C' %}
-
     {% if bulk.progress_type == 'S' or bulk.progress_type == 'F' %}
         {% if progress_info.progress_percentage < 100 %}
-            <h3>Your sounds are being described and processed <img width="12px" height="12px" src="{{ media_url }}images/indicator.gif"/></h3>
+            <h3 class="text-grey">Your sounds are being described and processed <img width="24px" height="24px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}"/></h3>
             <p>
-                Your {{ lines_validated_ok|length }} sound{{ lines_validated_ok|length|pluralize }} for this bulk
+                Your {{ lines_validated_ok|length|bw_intcomma }} sound{{ lines_validated_ok|length|pluralize }} for this bulk
                 description process {{ lines_validated_ok|pluralize:"is,are" }} being described and processed. This is
                 the current status of the process:
             </p>
             <script>setTimeout(function(){ window.location.reload(1); }, 3500);</script>
 
         {% else %}
-            <h3>The bulk description process has finished!</h3>
+            <h3 class="text-grey">The bulk description process has finished!</h3>
             <p>
-                Your {{ lines_validated_ok|length }} sound{{ lines_validated_ok|length|pluralize }} for this bulk
+                Your {{ lines_validated_ok|length|bw_intcomma }} sound{{ lines_validated_ok|length|pluralize }} for this bulk
                 description process {{ lines_validated_ok|pluralize:"has,have" }} been described and processed. Here
                 are the results of the process:
             </p>
 
         {% endif %}
     {% elif bulk.progress_type == 'C' %}
-        <h3>This bulk description process is closed</h3>
+        <h3 class="text-grey">This bulk description process is closed</h3>
         <p>
             The bulk description of sounds has been finished and the process closed. Here are the results of the
             process:
         </p>
     {% endif %}
-    <div class="csv-bulk-upload-progress-label">{{ progress_info.progress_percentage }}% completed</div>
+    <div class="csv-bulk-upload-progress-label font-weight-700 {% if progress_info.progress_percentage == 100 %}text-green{% else %}text-blue{% endif %}">{{ progress_info.progress_percentage }}% completed {% if progress_info.progress_percentage == 100 %}{% bw_icon 'check' %}{% endif %}</div>
     <ul>
         {% if progress_info.n_sounds_described_ok %}
             <li>Successfully described: {{ progress_info.n_sounds_described_ok }}</li>
@@ -169,7 +170,7 @@ <h3>This bulk description process is closed</h3>
             <ul>
             {% if progress_info.n_sounds_error %}
                 {% for line_no, error in progress_info.sound_errors %}
-                    <li>{{ error }}</li>
+                    <li class="text-red">{{ error }}</li>
                 {% endfor %}
             {% endif %}
             </ul>
@@ -182,22 +183,28 @@ <h3>This bulk description process is closed</h3>
         {% if progress_info.progress_percentage < 100 %}
             <br>
             <p><b>NOTE:</b> You can safely leave this page and come back at a later time. You'll find a link
-            to this page in your <a href="{% url 'accounts-home' %}">home page</a>.</p>
+            to this page in your <a href="{% url 'accounts-manage-sounds' 'pending_description' %}">manage sounds page</a>.</p>
         {% endif %}
     {% endif %}
     {% if bulk.progress_type != 'C' and progress_info.progress_percentage == 100 %}
         {% comment %}If the process has finished, give the option to close it{% endcomment %}
         <p>
-            Click on the button below to close this bulk description process and stop showing it in your home screen.
+            Click on the button below to <b>close this bulk description process</b> and stop listing it in your <a href="{% url 'accounts-manage-sounds' 'pending_description' %}">manage sounds page</a>.
         </p>
-        <form action="{% url "accounts-bulk-describe" bulk.id %}" method="POST">{% csrf_token %}
-            <button type="submit" name="close">Close this process</button>
+
+        <form action="." method="POST" class="v-spacing-top-5 disable-on-submit">{% csrf_token %}
+            <div class="right">
+                <button class="btn-primary" name="close">Close this process</button>
+            </div>
         </form>
     {% endif %}
 {% endif %}
 
 {% if auto_reload_page %}
-
+<div id="should-auto-reload" class="display-none"></div>
 {% endif %}
-
 {% endblock %}
+
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/bulkDescribe.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/charts.html b/templates/accounts/charts.html
similarity index 100%
rename from templates_bw/accounts/charts.html
rename to templates/accounts/charts.html
diff --git a/templates/accounts/choose_new_license.html b/templates/accounts/choose_new_license.html
index 84376bfee..4cfd37eec 100644
--- a/templates/accounts/choose_new_license.html
+++ b/templates/accounts/choose_new_license.html
@@ -1,24 +1,23 @@
-{% extends "accounts/_section.html" %}
+{% extends "simple_page.html" %}
 {% load display_license_form %}
+{% block page-title %}Bulk License Change{% endblock %}
+{% block title %}Bulk License Change{% endblock %}
 
-{% block title %}Freesound Bulk License Change{% endblock %}
+{% block page-content %}
 
-{% block content %}
-<h1>Freesound Bulk License Change</h1>
+<div>
+    <p>Hi! It looks like you have not signed up for a very long time and you have sounds with very old Creative Commons licenses. We need you to pick a new license for your uploads!
 
-<p>Hi! It looks like this is the first time you sign into Freesound 2 and we need you to pick a new license for your uploads.
+    <p>For a while our friends at <a href="https://creativecommons.org/">Creative Commons</a> have been telling us that the <a href="https://creativecommons.org/licenses/sampling+/1.0/">Sampling+ license</a> used <i>before 2011</i> in Freesound is not a good license, and especially for sounds. The reasons are all quite technical legal arguments, but we agree with the Creative Commons guys and we are helping to rid the world of this license.</p>
 
-<p>For a while our friends at <a href="https://creativecommons.org/">Creative Commons</a> have been telling us that the <a href="https://creativecommons.org/licenses/sampling+/1.0/">Sampling+ license</a> used in Freesound 1 is not a good license, and especially for sounds. The reasons are all quite technical legal arguments, but we agree with the Creative Commons guys and we are helping to rid the world of this license.</p>
+    <p>We now only support 3 licenses and would like for you to select one of these for your old uploads before you continue. This might sound dramatic, but it isn't really. The terminology used in these new licenses is much clearer and there are fewer grey areas. It's better for you, for us, and downloaders of your sounds.</p>
 
-<p>We now only support 3 licenses and would like for you to select one of these for your old uploads before you continue. This might sound dramatic, but it isn't really. The terminology used in these new licenses is much clearer and there are fewer grey areas. It's better for you, for us, and downloaders of your sounds.</p>
-
-<p><b>Please note:</b> you will be able to change the license of any of your sounds whenever you want on the individual sounds' edit pages.</p>
-<form action="." method="post" class="license-form">{% csrf_token %}
-    {% display_license_form form %}
-    <input type="submit" name="submit" value="submit" id="submit-button"/>
-</form>
-<p><b>Remember:</b> no matter what license, you are always free to give people exceptions, or license your work elsewhere under another license. If you select the strictest license, people will need to go through the motions of asking you permission to use their work for certain things, and this might be troublesome.</p>
-
-<p>If you do not agree with this change please don't pick a license right now, log out, and contact us through the contact form.</p>
-{% endblock %}
+    <p><b>Please note:</b> you will be able to change the license of any of your sounds whenever you want on the individual sounds' edit pages.</p>
+    <form action="." method="post" class="v-spacing-top-5 v-spacing-4">{% csrf_token %}
+        {% display_license_form form %}
+        <button class="btn-primary v-spacing-top-4">Update licenses and continue using Freesound</button>
+    </form>
+    <p><b>Remember:</b> no matter what license, you are always free to give people exceptions, or license your work elsewhere under another license. If you select the strictest license, people will need to go through the motions of asking you permission to use their work for certain things, and this might be troublesome.</p>
 
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/confirm_delete_undescribed_files.html b/templates/accounts/confirm_delete_undescribed_files.html
deleted file mode 100644
index 6dec18594..000000000
--- a/templates/accounts/confirm_delete_undescribed_files.html
+++ /dev/null
@@ -1,37 +0,0 @@
-{% extends "base.html" %}
-{% load filefunctions %}
-
-
-{% block title %}{{ block.super }}Delete undescribed files{% endblock %}
-
-{% block content %}
-
-<h2>Do you really want to delete the following undescribed files?</h2>
-
-<p>
-<ul>
-{% for name in filenames %}
-    <li>{{ name }}</li>
-{% endfor %}
-</ul>
-</p>
-
-<form action="." method="post" id="fileform" name="fileform">{% csrf_token %}
-    <div style="display:none">
-    {{form.as_p}}
-    </div>
-    <input type="hidden" name="delete_confirm" value="delete_confirm">
-
-    <div id="confirm_deletion">
-    <h4><a href="javascript:document.fileform.submit();">yes</a></h4>
-    <h4><a href="{% url "accounts-describe" %}">no</a></h4>
-    </div>
-    <br style="clear: both;" />
-
-</form>
-
-
-</div>
-
-
-{% endblock %}
diff --git a/templates/accounts/delete.html b/templates/accounts/delete.html
index f04370332..316a432ab 100644
--- a/templates/accounts/delete.html
+++ b/templates/accounts/delete.html
@@ -1,26 +1,24 @@
-{% extends "sounds/_section.html" %}
+{% extends "accounts/account_settings_base.html" %}
 
-{% load paginator %}
+{% block title %}Delete account{% endblock title %}
 
+{% block main_content %}
 
-{% block title %}Delete yourself{% endblock title %}
+    <h1>Delete account</h1>
 
-{% block section_content %}
-<h1>Delete yourself?</h1>
-
-<div>
-  <p><strong>WARNING:</strong> this is PERMANENT!</p>
-    <p>Before deleting your account, please check the <a href="/help/faq/#how-do-i-delete-myself-from-your-site" target="_blank">
-        deletion FAQ page</a> to make sure you understand the consequences of this action. Note that you can not
-        be "undeleted", not even by administrators...</p>
-
-    <p>If you are entirely sure you want to delete your account, please choose one of the following options and confirm
-        your user password (form valid for 10 seconds only):</p>
-    <form method="post">
-      {% csrf_token %}
-      {{delete_form.as_p}}
-    <button>Send</button>
-    </form>
-</div>
+    <div class="v-spacing-top-4 w-100 v-spacing-5">
+        <p class="font-weight-bold text-center v-spacing-4">Warning: You can not be “undeleted”, not even by administrators.</p>
+        <p class="v-spacing-2 text-grey">
+            Before deleting your account, please <a href="/help/faq/#how-do-i-delete-myself-from-your-site" target="_blank">read this page</a> to be
+            fully aware of what happens with your data. If you are entirely sure you want to delete your account, please choose one of the following options
+            and confirm your password:
+        </p>
+        <form method="post" class="bw-form w-100 disable-on-submit">{% csrf_token %}
+            <div class="bw-multiple-radio">
+                {{delete_form}}
+            </div>
+            <button class="btn-primary w-100 v-spacing-top-5">Delete account</button>
+        </form>
+    </div>
 
 {% endblock %}
diff --git a/templates/accounts/delete_confirmation.html b/templates/accounts/delete_confirmation.html
deleted file mode 100644
index dfc79cb53..000000000
--- a/templates/accounts/delete_confirmation.html
+++ /dev/null
@@ -1,61 +0,0 @@
-{% extends "admin/base_site.html" %}
-{% load i18n admin_urls static %}
-
-{% block extrahead %}
-    {{ block.super }}
-    {{ media }}
-{% endblock %}
-
-{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} delete-confirmation{% endblock %}
-
-{% block breadcrumbs %}
-    <div class="breadcrumbs">
-        <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
-    </div>
-{% endblock %}
-
-{% block content %}
-    {% for user_info in users_to_delete%}
-        <p>The user "{{user_info.profile.user.username}}" will be
-            {% if type == 'delete_preserve_sounds' %}
-                deleted but <b>the sounds will still be available</b>.
-                <br>All user related objects like comments and forum posts will be also preserved but will be displayed
-                as having been created by a "deleted user".
-            {% elif type == 'delete_include_sounds' %}
-                deleted, <b>including its sounds and packs</b>.
-                <br>All user related objects like comments and forum posts will be preserved but will be displayed
-                as having been created by a "deleted user".
-            {% elif type == 'delete_spammer' %}
-                completely deleted from the database because of being a <b>spammer</b>. All related user information
-                such as sounds, packs, forum posts, comments, etc. will be deleted as well.
-            {% elif type == 'full_delete' %}
-                completely deleted from the database, including all the related sound, packs, forum posts, comments
-                and any other related objects. This will not create a <i>DeletedUser</i> record on the DB.
-                <b>This option should only be used if you really know what you're doing...</b>
-            {% endif %}
-        </p>
-
-        {% if user_info.deleted_objects_details %}
-            <p>These are the objects that will be deleted:</p>
-            <ul>
-                {% for model_name, object_count in user_info.deleted_objects_details.model_count %}
-                    <li>{{ model_name|capfirst }}: {{ object_count }}</li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-
-    {% endfor %}
-    <form method="post">{% csrf_token %}
-        <div>
-            <input type="hidden" name="post" value="yes" />
-            {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1" />{% endif %}
-            {% if to_field %}<input type="hidden" name="{{ to_field_var }}" value="{{ to_field }}" />{% endif %}
-            <input type="hidden" name="confirmation" value="1" />
-            <input type="submit" value="{% trans "Yes, I'm sure" %}" />
-            {% for param, value in params  %}
-                <input type="hidden" value="{{value}}" name='{{param}}'/>
-            {% endfor %}
-            <a href="#" onclick="window.history.back(); return false;" class="button cancel-link">{% trans "No, take me back" %}</a>
-        </div>
-    </form>
-{% endblock %}
diff --git a/templates/accounts/describe.html b/templates/accounts/describe.html
deleted file mode 100644
index 71bbc0a3f..000000000
--- a/templates/accounts/describe.html
+++ /dev/null
@@ -1,111 +0,0 @@
-{% extends "base.html" %}
-{% load filefunctions %}
-{% block title %}{{ block.super }}Describe{% endblock %}
-{% block head %}
-{{ block.super }}
-<script type="text/javascript">
-    var checkedAll = false;
-
-    function select_ul(element)
-    {
-        checkedAll = !checkedAll;
-        $(element.parentNode).find("input").attr('checked', checkedAll);
-        $("#fileform").find("option").attr('selected', checkedAll);
-        $('#select_all').text(checkedAll ? 'deselect all' : 'select all');
-    }
-
-    function checkboxChange(checkbox)
-    {
-        var option = $("#fileform").find("option[value=" + checkbox.name + "]").get(0);
-        if (checkbox.checked)
-            option.selected = true;
-        else
-            option.selected = false;
-    }
-</script>
-{% endblock %}
-{% block content %}
-<div id="describe_page">
-    <h1>Describe</h1>
-
-    {% if describe_enabled %}
-
-        {% if not n_files %}
-            <h3>No files to describe</h3>
-            <p>
-                It looks like you have not uploaded any audio files yet or all your files have already been described.
-                <br>Please <a href="{% url 'accounts-upload' %}">upload some more files</a> before coming back here :)
-            </p>
-
-        {% else %}
-
-            {% if request.user.profile.can_do_bulk_upload %}
-            <div id="content">
-                <div class="content_box">
-                    <h3>Describe files manually</h3>
-            {% else %}
-                <h3>Pick the sounds to describe</h3>
-            {% endif %}
-                    <p>
-                        You've uploaded the files listed below, but <b>they won't appear on the website until you've described them</b>.
-                        {% if not request.user.profile.can_do_bulk_upload %}<br>{% endif %}Pick a maximum of 10 files from the list below, click on <i>Describe selected files</i>, and follow the instructions.
-                        {% if not request.user.profile.can_do_bulk_upload %}<br>{% endif %}You can also delete files by selecting them and pressing the <i>Delete selected files</i> button.
-                    </p>
-                    <p>
-                        Your uploaded files ({{ n_files }}):
-                        <ul id="root_file" class="upload">
-                            {% show_file file_structure 1 %}
-                        </ul>
-                    </p>
-
-                    <p>
-                        <form action="." method="post" id="fileform">{% csrf_token %}
-                            <div style="display:none">
-                            {{form.as_p}}
-                            </div>
-                            <input class="describe_page_action_button" type="submit" value="Describe selected files" name="describe">
-                            <br><input class="describe_page_action_button" type="submit" value="Delete selected files" name="delete">
-                        </form>
-                    </p>
-            {% if request.user.profile.can_do_bulk_upload %}
-                </div>
-            </div>
-            {% endif %}
-
-            <!-- Bulk upload part -->
-            {% if request.user.profile.can_do_bulk_upload %}
-                <div id="sidebar">
-                    <div class="content_box">
-                        <h3>Bulk description of files</h3>
-                        <p>
-                            Alternatively, you can provide descriptions for many files at once by <b>uploading a data file</b>.
-                            To create your data file use the <a href="{{ media_url }}/sample.csv" target="_blank">CSV</a>, <a href="{{ media_url }}/sample.xls" target="_blank">XLS</a>
-                            or <a href="{{ media_url }}/sample.xlsx" target="_blank">XLSX</a> template and follow
-                            <a href="{% url 'wiki-page' 'faq' %}#csv-file-instructions">these instructions</a>.
-                            Upload your data file using the form below:
-                        </p>
-                        <form method="POST" enctype="multipart/form-data" action="">
-                            {% csrf_token %}
-                            {{csv_form}}
-                            <input type="submit" name="Submit" value="Upload data file"/>
-                        </form>
-                        <ul class="messages">
-                            <li>This feature is still in <b>beta</b>. If you experience any problems using it or have any
-                                suggestions for improvements, please let us know by <a href=" {% url 'forums-thread' 'bug-reports-errors-and-feature-requests' 41081 %}">writting in the forums</a>
-                                or directly <a href="{% url 'contact' %}">contacting us</a>.</li>
-                            {% comment %}I know the link to the forum has a hardcoded forum name and thread ID. Don't even think of it. {% endcomment %}
-                        </ul>
-                    </div>
-                </div>
-            {% endif %}
-
-            <br style="clear: both;">
-        {% endif %}
-    {% else %}
-        <ul class="messages">
-            <li>We're deeply sorry but describing sounds is <b>temporarily disabled</b>.
-            We'll enable it again as soon as possible.</li>
-        </ul>
-    {% endif %}
-</div>
-{% endblock %}
diff --git a/templates/accounts/describe_license.html b/templates/accounts/describe_license.html
index 0f1e3d404..2306b4c52 100644
--- a/templates/accounts/describe_license.html
+++ b/templates/accounts/describe_license.html
@@ -1,15 +1,17 @@
-{% extends "base.html" %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
 {% load display_license_form %}
 
-{% block title %}{{ block.super }}Describe - pick license{% endblock %}
+{% block title %}Describe sound files - pick a license{% endblock %}
+{% block page-title %}Describe sound files{% endblock %}
 
-{% block content %}
-<h1>Describe</h1>
-<h3>Pick a license</h3>
-<p>This license will be applied to all the files you've selected, but don't worry, you can always change this later.
+{% block page-content %}
+<h2 class="text-grey">Pick a license</h2>
+<div class="v-spacing-5 v-spacing-top-2">This license will be applied to the {{ num_files|bw_intcomma }} sound file{{ num_files|pluralize }} you've selected for description, but don't worry, you can change individual sound licenses later.</div>
+<div class="col-lg-8 offset-lg-2">
 <form action="." method="post" class="license-form">{% csrf_token %}
-    {% display_license_form form %}
-    <br style="clear: both;" />
-    <input type="submit" name="submit" value="Submit" id="submit-button"/>
+    {% include "molecules/license_form_field.html" %}
+    <button type="submit" class="btn-primary v-spacing-top-5 w-100 center">Save and continue with description</button>
 </form>
+</div>
 {% endblock %}
diff --git a/templates/accounts/describe_pack.html b/templates/accounts/describe_pack.html
index f5020481d..c76ef71e4 100644
--- a/templates/accounts/describe_pack.html
+++ b/templates/accounts/describe_pack.html
@@ -1,17 +1,23 @@
-{% extends "base.html" %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load static %}
 
-{% block title %}{{ block.super }}Describe - choose pack{% endblock %}
+{% block title %}Describe sound files - pick a pack{% endblock %}
+{% block page-title %}Describe sound files{% endblock %}
 
-{% block content %}
-<h1>Describe</h1>
-<h3>Pick or create a pack (optional)</h3>
-<p>If you would like to add all the selected files to a pack you can do so now.
-Pick an existing pack or create a new one by specifying its name. If you don't
-want to add the sounds to any pack leave this form empty. As before, you can
-change a file's pack at any time later on.
-
-<form action="." method="post" id="license-form">{% csrf_token %}
-    {{ form.as_p }}
-    <input type="submit" name="submit" value="Submit" id="submit-button"/>
+{% block page-content %}
+<h2 class="text-grey">Pick a pack</h2>
+<div class="v-spacing-5 v-spacing-top-2">If you would like to add all {{ num_files|bw_intcomma }} selected sound file{{ num_files|pluralize }} to a pack you can do so now.
+    Pick an existing pack or create a new one by specifying its name. If you don't want to add the sounds to any pack, you can leave this form empty. 
+    You can change individual sound's pack later on.</div>
+<div class="col-lg-8 offset-lg-2">
+<form action="." method="post" class="bw-form">{% csrf_token %}
+    {% include "molecules/pack_form_field.html" %}
+    <button type="submit" class="btn-primary v-spacing-top-6 w-100 center">Save and continue with description</button>
 </form>
+</div>
 {% endblock %}
+
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/editDescribeSounds.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/describe_sounds.html b/templates/accounts/describe_sounds.html
deleted file mode 100644
index 248ab25e4..000000000
--- a/templates/accounts/describe_sounds.html
+++ /dev/null
@@ -1,362 +0,0 @@
-{% extends "base.html" %}
-{% load maps_js_scripts %}
-
-{% block head %}
-    {{ block.super }}
-    {% maps_js_scripts %}
-    <script>
-        // Maps variables
-        var maps = {};
-        window.maps = maps;
-        var centerMarkers = {};
-
-        // Tag recommendation variables
-        var typingTimer;
-        var addingTagTimer;
-        var doneAddingTagInterval = 0;  //time in ms
-        var doneTypingInterval = 500;     //time in ms
-
-        $(document).ready(function() {
-            display_errors();
-            for (var i=1; i<={{ sounds_per_round }}; i++){
-                var soundAccordion = $('#sound-accordion-sound-header-'+i);
-                if (soundAccordion.hasClass('sound-accordion-sound-alternate-header-errors') == false){
-                  $('#sound-accordion-sound-'+i).hide();
-                }
-
-                unsecureImageCheck($('#id_' + parseInt(i - 1, 10) + '-description'));
-            }
-
-            // Init tag recommendation
-            var textarea_elements = $("textarea[id$='-tags']");
-
-            // Listen to keyup events in tags textareas to display tags
-            textarea_elements.keyup(function(event) {
-
-                clearTimeout(typingTimer);
-                var textarea_id = $(this)[0].id;
-
-                // recommend tags when last character is " " or "\n"
-                if  ((event.keyCode == 32) || (event.keyCode == 13)) { // " " or "\n"
-                    get_tags(textarea_id);
-                }
-
-                typingTimer = setTimeout(function(){
-                    get_tags(textarea_id)
-                }, doneTypingInterval);
-            });
-
-            // Listen to cut, paste and focusin events to recommend tags
-            textarea_elements.bind('cut paste focusin', function() {
-                var textarea_id = $(this)[0].id;
-                get_tags(textarea_id);
-            });
-        });
-
-        function display_errors() {
-            if ($(".errorlist").length > 0) {
-                if ($("#errormessage").length == 0) {
-                    $("#describe_form").before("<div id='errormessage' class='errortag_message'>There are some errors or missing fields below. Please review files marked in red...</div>");
-                }
-            }
-        }
-
-        // Maps stuff
-        // *****************
-
-        function toggleMapVisibility(n) {
-            var wrapper = $('#gmap-wrapper-'+n);
-            if(wrapper.is(':visible')) {
-                $('#gmap-header-'+n).removeClass('.active-gmap');
-                $('#gmap-header-text-'+n).text('Add geotag');
-                wrapper.hide(500);
-            } else {
-                $('#gmap-header-'+n).addClass('.active-gmap');
-                //$('#gmap-header-text-'+n).text('Hide Geotag map');
-                $('#gmap-header-text-'+n).hide();  // To avoid confussion, we disable the option to hide the map
-                wrapper.show(500);
-                if (!maps[n]){
-                    init_map(n);
-                }
-            }
-        }
-
-        function toggleSound(n) {
-            var idx = parseInt(n,10);
-            var idx0 = idx - 1;
-            var sound_accordion_element = $('#sound-accordion-sound-'+n);
-            var sound_accordion_element_header = $('#sound-accordion-sound-header-'+n);
-            if (sound_accordion_element.is(':visible')) {
-                sound_accordion_element.hide('fast');
-                sound_accordion_element_header.removeClass('expanded');
-            } else {
-                sound_accordion_element.show('fast');
-                sound_accordion_element_header.addClass('expanded');
-                if ($("#id_" + idx0 + "-zoom").val()){
-
-                    if (!maps[n]){
-                        init_map(n);
-                    }
-                }
-            }
-        }
-
-        function setMapVisibility(n){
-            var idx = parseInt(n,10);
-            var idx0 = idx - 1;
-            var sound_has_geotag = $("#id_" + idx0 + "-zoom").val();
-            if (sound_has_geotag){
-                // Show map
-                init_map(n);
-            } else {
-                // Hide wrapper (is displayed by default) and add "Add geotag" link
-                var wrapper = $('#gmap-wrapper-'+n);
-                $('#gmap-header-'+n).removeClass('.active-gmap');
-                $('#gmap-header-text-'+n).text('Add geotag');
-                wrapper.hide();
-            }
-        }
-
-        function updateLatLonZoomFields(map_element_id, lat, lon, zoom, box_bl_lat, box_bl_lon, box_tr_lat, box_tr_lon) {
-            var idx0 = parseInt(map_element_id.split('gmap')[1], 10) - 1;  // Get map number
-            $("#id_" + idx0 + "-lon").val(lon);
-            $("#id_" + idx0 + "-lat").val(lat);
-            $("#id_" + idx0 + "-zoom").val(Math.floor(zoom));
-        }
-
-        var centerMapTimers = {};
-        var centerMapTimeout = 500; // In milliseconds
-
-        function centerMapToLatLonZoomFields(n) {
-            // To avoid too many updates of the map, only re-sync it with the contents of the lat, lon and zoom fields
-            // after centerMapTimeout has passed since the last change event
-
-            var idx = parseInt(n, 10);
-            var idx0 = idx - 1; // Get map number
-            var lon = $("#id_" + idx0 + "-lon").val();
-            var lat = $("#id_" + idx0 + "-lat").val();
-            var zoom = $("#id_" + idx0 + "-zoom").val();
-            if (!latLonZoomAreValid(lat, lon, zoom)){
-                // If not all paramters are valid and set, map can't be updated and function returns early
-                return;
-            }
-
-            var latLonClipped = clipLatLonRanges(lat, lon);
-            lat = latLonClipped[0];
-            lon = latLonClipped[1];
-
-            if (centerMapTimers[idx] !== undefined){
-                clearTimeout(centerMapTimers[idx]);
-            }
-
-            centerMapTimers[idx] = setTimeout(function (){
-                maps[idx].setZoom(parseInt(zoom, 10) - 1);
-                maps[idx].setCenter([parseFloat(lon), parseFloat(lat)]);
-            }, centerMapTimeout);
-        }
-
-        function init_map(n) {
-            console.log("initializing MAP ", n)
-            var idx = parseInt(n,10);
-            var idx0 = idx - 1;
-
-            var center_lat;
-            var center_lon;
-            var zoom;
-            {% if last_latlong %}
-                center_lat = {{last_latlong.0}};
-                center_lon = {{last_latlong.1}};
-                zoom = {{last_latlong.2}};
-            {% endif %}
-            if (($("#id_" + idx0 + "-zoom").val() !== "") && ($("#id_" + idx0 + "-lon").val() !== "") && ($("#id_" + idx0 + "-lat").val() !== "")) {
-                // If there are lat/lon/zoom already specified for that sound, load them
-                center_lat = $("#id_" + idx0 + "-lat").val();
-                center_lon = $("#id_" + idx0 + "-lon").val();
-                zoom = $("#id_" + idx0 + "-zoom").val();
-            }
-            maps[idx] = make_geotag_edit_map('gmap' + idx, '{{media_url}}/images/arrow.png', updateLatLonZoomFields, center_lat, center_lon, zoom, idx);
-        }
-
-
-        // Tag recommendation stuff
-        // ************************
-
-        function get_tags(textarea_id) {
-            var textarea_element = $("#" + textarea_id);
-            $.ajax({
-                type: 'POST',
-                url: '/tagrecommendation/recommendtags/',
-                contentType:"application/x-www-form-urlencoded",
-                data: {
-                    input_tags: textarea_element.val()
-                },
-                success: function(data) {
-                    display_recommended_tags(textarea_id, data);
-                }
-            });
-        }
-
-        function display_recommended_tags(textarea_id, data) {
-            var parsedData = JSON.parse(data);
-            var tags = parsedData[0];
-            if (tags.length > 0){
-                var html = "";
-                html += "<ul id=\"" + textarea_id + "-recommended-list\">";
-                for (var i in tags){
-
-                    var tag = tags[i]; //tags[i][0]
-                    var tag_css_class = "tag";
-
-                    html += "<li class=\"" + tag_css_class + "\" id=\"tag-" + tag + "\"><a onclick=\"add_tag(\'" + textarea_id + "\',\'" + tag + "\',\'" + i + "\')\">" + tag + "</a></li>";
-                }
-                html += "</ul>";
-                var textarea_element = $("#" + textarea_id + "-recommended");
-                textarea_element.text("");
-                textarea_element.append("<span style=\"color: #AB4646;font-size:12px;\">Suggested tags:&nbsp</span> (click on the tags to add them, <a style=\"color:gray\" onclick=\"clear_recommendations(\'" + textarea_id + "\')\">click here to clear the recommendation</a>)");
-                textarea_element.append(html);
-                textarea_element.append("<br class=\"clear\">");
-                var textarea_element_list = $("#" + textarea_id + "-recommended-list");
-                textarea_element_list.css("margin-left","-20px");
-                textarea_element_list.css("margin-top","5px");
-                textarea_element_list.css("margin-bottom","5px");
-
-            }else{
-                clear_recommendations(textarea_id);
-            }
-        }
-
-        function add_tag(textarea_id, tag, cloud_pos) {
-            clearTimeout(addingTagTimer);
-            var ask_for_more = false;
-            var textarea_element = $("#" + textarea_id);
-            var separator = " ";
-            if (!$.trim(textarea_element.val())) {
-                ask_for_more = true;
-                separator = ""
-            }
-            textarea_element.val(textarea_element.val() + separator + tag);
-            $("#tag-" + tag).remove();
-            var remaining_tags = $("#" + textarea_id + "-recommended-list").children().length;
-            if (remaining_tags < 1){
-                ask_for_more = true;
-            }
-            if (ask_for_more == true){
-                get_tags(textarea_id);
-            } else {
-                addingTagTimer = setTimeout(function(){
-                    get_tags(textarea_id)
-                }, doneAddingTagInterval);
-            }
-        }
-
-        function clear_recommendations(textarea_id){
-            $("#" + textarea_id + "-recommended").text("")
-        }
-
-    </script>
-
-{% endblock head %}
-{% block title %}{{ block.super }}Describe - describe individual sounds{% endblock %}
-{% block content %}
-    <h1>Describe</h1>
-    <h3>Describe individual sounds ({{request.session.describe_sounds_number}} left)</h3>
-    <p>This is the last step in the describe process. If you've selected
-        more than {{ sounds_per_round }} you will be asked to describe groups of {{ sounds_per_round }}
-        sounds until all are done. In the list below you'll have to at least specify tags and
-        a description for each of the uploaded sounds. <strong>Click on the sound filenames to display the
-            form for describing each sound</strong>.
-
-    <p>The license and the pack you've chosen in the previous steps will be applied to each
-        of the files here. You can however change these settings for each individual file.
-
-    <p>You are not required to specify a geolocation for each sound, but if the sound is a
-        field-recording it's probably a good idea to specify the location.
-
-    <form id="describe_form" action="." method="post" novalidate class="disable-on-submit">{% csrf_token %}
-    <div id="sound-accordion-alternate">
-    {% for form in forms %}
-        <div onclick="toggleSound({{ forloop.counter }})" class="sound-accordion-sound-alternate-header{% if form.description.errors or form.geotag.errors or form.pack.errors or form.license.errors %}-errors{% endif %}" id="sound-accordion-sound-header-{{ forloop.counter }}">
-            {{ form.sound.name }}
-        </div>
-        <div class="sound-accordion-sound-alternate" id="sound-accordion-sound-{{ forloop.counter }}">
-
-            <h3>Tags and Description</h3>
-            {{form.description.name.errors}}
-            <p>
-                Name:<br>
-                {{form.description.name}}
-            </p>
-            {{form.description.tags.errors}}
-            <p>
-                Tags:
-                {{form.description.tags.help_text|safe}}<br>
-                {{form.description.tags}}
-                <div id="id_{{ forloop.counter0 }}-tags-recommended" style="font-size: 10px;margin-top:-5px;width: 670px;"></div>
-            </p>
-            {{form.description.description.errors }}
-            <p>
-                Description:<br>
-                {{form.description.description }}
-            </p>
-            <p>
-                Explicit content:
-                {{form.description.is_explicit }}
-            </p>
-
-            <h3>Geotag</h3>
-            <p id="gmap-header-{{forloop.counter}}">
-                <a href="javascript:void(0);" onclick="toggleMapVisibility({{forloop.counter}});"><span id="gmap-header-text-{{forloop.counter}}">Add geotag</span></a>
-            </p>
-            <div class="gmap-wrapper" id="gmap-wrapper-{{forloop.counter}}">
-                <p>Drag this map to set a geotag:</p>
-                <div class="describe-gmap geotag_edit_map_size" id="gmap{{forloop.counter}}"></div>
-                <div class="describe-geotag-form">{{ form.geotag.as_p }}
-                    <script type="text/javascript">
-
-                        $("#{{form.geotag.remove_geotag.auto_id}}").change(function (event) {
-                            if (this.checked)
-                            {
-                                $("#{{form.geotag.lon.auto_id}}").attr('disabled', 'disabled');
-                                $("#{{form.geotag.lat.auto_id}}").attr('disabled', 'disabled');
-                                $("#{{form.geotag.zoom.auto_id}}").attr('disabled', 'disabled');
-                            }
-                            else
-                            {
-                                $("#{{form.geotag.lon.auto_id}}").attr('disabled', false);
-                                $("#{{form.geotag.lat.auto_id}}").attr('disabled', false);
-                                $("#{{form.geotag.zoom.auto_id}}").attr('disabled', false);
-                            }
-                        });
-                        $("#{{form.geotag.lon.auto_id}}").bind('input', function (event) {
-                            centerMapToLatLonZoomFields({{forloop.counter}});
-                        });
-                        $("#{{form.geotag.lat.auto_id}}").bind('input', function (event) {
-                            centerMapToLatLonZoomFields({{forloop.counter}});
-                        });
-                        $("#{{form.geotag.zoom.auto_id}}").bind('input', function (event) {
-                            centerMapToLatLonZoomFields({{forloop.counter}});
-                        });
-
-                        setMapVisibility({{forloop.counter}});
-
-                    </script>
-                </div><br style="clear: both" />
-            </div>
-
-            <h3>Pack</h3>
-            {{ form.pack.as_p }}
-
-            <h3>License</h3>
-            {{ form.license.as_p }}
-
-            <br style="clear: both;" />
-        </div><!-- .sound-accordion-sound -->
-
-    {% endfor %}
-    </div><!-- #sound-accordion -->
-    <input type="submit" name="submit" value="Submit and continue" id="submit-button"/>
-    </form>
-{% endblock %}
-
-
-
diff --git a/templates_bw/accounts/display_user.html b/templates/accounts/display_user.html
similarity index 100%
rename from templates_bw/accounts/display_user.html
rename to templates/accounts/display_user.html
diff --git a/templates/accounts/downloaded_packs.html b/templates/accounts/downloaded_packs.html
deleted file mode 100644
index 1341a88eb..000000000
--- a/templates/accounts/downloaded_packs.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% load display_pack %}
-{% load paginator %}
-
-
-{% block title %}Packs downloaded by {{ username }}{% endblock %}
-
-{% block content %}
-
-<h1>Packs downloaded by <a href="{% url "account" username %}">{{ username }}</a></h1>
-
-{% if paginator.count > 0 %}
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "pack" %}
-    </div>
-
-    {% for pack in packs %}
-        {% display_pack pack %}
-    {% endfor %}
-
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "pack" %}
-    </div>
-{% else %}
-    <p>{{ username }} hasn't downloaded any packs yet...</p>
-{% endif %}
-
-{% endblock %}
diff --git a/templates/accounts/downloaded_sounds.html b/templates/accounts/downloaded_sounds.html
deleted file mode 100644
index 7134f1dcb..000000000
--- a/templates/accounts/downloaded_sounds.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% load display_sound %}
-{% load paginator %}
-
-
-{% block title %}Sounds downloaded by {{ username }}{% endblock %}
-
-{% block content %}
-
-<h1>Sounds downloaded by <a href="{% url "account" username %}">{{ username }}</a></h1>
-
-{% if paginator.count > 0 %}
-
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "sound" %}
-    </div>
-
-	{% for sound in sounds %}
-        {% display_sound sound %}
-    {% endfor %}
-
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "sound" %}
-    </div>
-
-{% else %}
-    <p>{{ username }} hasn't downloaded any sounds yet...</p>
-{% endif %}
-
-{% endblock %}
diff --git a/templates/accounts/edit.html b/templates/accounts/edit.html
index 969bd459d..889769fc3 100644
--- a/templates/accounts/edit.html
+++ b/templates/accounts/edit.html
@@ -1,85 +1,53 @@
-{% extends "accounts/_section.html" %}
+{% extends "accounts/account_settings_base.html" %}
 
+{% load static %}
+{% load bw_templatetags %}
 
-{% block title %}edit account{% endblock %}
+{% block title %}Edit profile{% endblock %}
 
-{% block section_content %}
-
-<h1>Settings</h1>
-
-<div id="content">
-    <div id="edit_account" class="content_box">
-        <h3>Edit your account information</h3>
-        <form method="post" action=".">{% csrf_token %}
-            <p>You can edit your account using this form. The text introduced in the 
-                <strong>about</strong>, <strong>forum signature</strong> and <strong>sound signature</strong> fields can
-                be formatted using the following HTML tags: <code>a</code>, <code>img</code>, <code>strong</code>,
-                <code>b</code>, <code>em</code>, <code>li</code>, <code>u</code>, <code>p</code>, <code>br</code>,
-                <code>blockquote</code> and <code>code</code>.
-            </p>
-            {{profile_form.as_p}}
-            <input type="submit" value="Save account settings" />
-        </form>
-    </div><!-- #edit_account -->
-</div><!-- #content -->
-
-<div id="sidebar">
-    <div id="edit_avatar" class="content_box">
-        <h3>Edit your avatar</h3>
-        {% if uploads_enabled %}
-            <form method="post" action="." enctype="multipart/form-data">{% csrf_token %}
-                {% if profile.has_avatar %}
-                <p>Current:<br/><img src="{{profile.locations.avatar.XL.url}}" /></p>
-                {% endif %}
-                {{image_form.as_p}}
-                <input type="submit" value="Save avatar" />
-            </form>
+{% block main_content %}
+    <h1>Edit profile</h1>
+    <div class="v-spacing-top-4 center">
+        {% if profile.has_avatar %}
+            <img id="imageProfile" class="avatar" style="width:100px;height:100px;" src="{{ profile.locations.avatar.XL.url }}" />
         {% else %}
-            <ul class="messages">
-                <li>We're deeply sorry but uploading avatars is <b>temporarily disabled</b>.
-                We'll enable it again as soon as possible.</li>
-            </ul>
+            <img id="imageProfile" class="display-none avatar" style="width:100px;height:100px;" />
+            {% bw_user_avatar profile.locations.avatar.XL.url user.username 100 %}
         {% endif %}
-    </div><!-- #edit_avatar -->
-
-    {% if has_granted_permissions %}
-        <div id="app_permissions" class="content_box">
-            <h3>App permissions</h3>
-            <p>Manage your list of permissions granted to API applications <a href="{% url "access-tokens" %}">here</a>.</p>
+    </div>
+    <div class="bw-edit-profile__username v-spacing-top-2 center">
+        <h2>{{ user.username }}</h2>
+    </div>
+    {% if uploads_enabled %}
+        <div class="center">
+            <div class="v-spacing-top-3">
+                {{ image_form.errors }}
+                {% comment %}The form below is used to set an avatar and submit the form right after setting the image{% endcomment %}
+                <form id="avatarImageForm" class="display-inline-block" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
+                    <label for="id_image-file" class="btn-inverse bw-edit-profile__label_file">Change avatar</label>
+                    <input type="file" id="id_image-file" name="image-file" class="bw-edit-profile__input_file" accept=".jpg,.png,.jpeg" />
+                </form>
+                {% comment %}The form below is used to delete the avatar with a single button click{% endcomment %}
+                <form  class="display-inline-block" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
+                    <input type="hidden" name="image-remove" value="1">
+                    <button class="btn-inverse h-spacing-left-2" {% if not profile.has_avatar %}disabled{% endif %}>Delete avatar</button>
+                </form>
+            </div>
         </div>
+        {% if has_old_avatar %}
+            <div class="text-center text-grey v-spacing-top-2 center"><span class="text-red">Warning:&nbsp;</span> your avatar was uploaded with the previous version of Freesound. <br/>Please, re-upload the avatar to display it with optimal resolution.</span></div>
+        {% endif %}
+    {% else %}
+        <div class="text-center text-grey v-spacing-top-3 center"><span class="text-red">Warning:&nbsp;</span> avatar uploading is currently disabled. We'll enable it as soon as possible.</span></div>
     {% endif %}
-
-    <div id="reset_password_and_email" class="content_box">
-        <h3>Password and email addres</h3>
-        <ul>
-            <li><a href="{% url "accounts-email-reset" %}">Change your email address</a></li>
-            <li><a href="{% url "password_change" %}">Change your password</a></li>
-        </ul>
-    </div><!-- #reset_password_and_email -->
-
-    <div class="content_box">
-        <h3>Email Notifications</h3>
-        <ul>
-          <li><a href="{% url "accounts-email-settings" %}">Change email notifications settings</a></li>
-        </ul>
+    <div class="v-spacing-top-3 w-100 v-spacing-5">
+        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
+            {{profile_form.as_p}}
+            <button class="btn-primary w-100 v-spacing-top-5">Update profile</button>
+        </form>
     </div>
-
-
-    <div id="delete_account" class="content_box">
-        <h3>Delete account</h3>
-        <p>
-            To delete your account, please go <a href="{% url "accounts-delete" %}">here</a>.
-        </p>
-    </div><!-- #delete_account -->
-</div><!-- #sidebar -->
-
-<script>
-  $(function() {
-      {% for field in profile_form.get_img_check_fields %}
-          unsecureImageCheck($('#{{ field.id_for_label }}'));
-      {% endfor %}
-  })
-</script>
-
-<br class="clear" /><!-- Clearing Element -->
 {% endblock %}
+
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/editProfile.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/edit_email_settings.html b/templates/accounts/edit_email_settings.html
index 2f2d4a3ff..5e2ff40d6 100644
--- a/templates/accounts/edit_email_settings.html
+++ b/templates/accounts/edit_email_settings.html
@@ -1,38 +1,24 @@
-{% extends "accounts/_section.html" %}
-{% block head %}
-{{ block.super }}
-<style type="text/css">
-form ul {
-    padding-bottom: 0;
-}
-</style>
-{% endblock %} 
+{% extends "accounts/account_settings_base.html" %}
 
-{% block title %}edit account{% endblock %}
+{% load static %}
+{% load filter_img %}
+{% load bw_templatetags %}
+{% load util %}
 
-{% block section_content %}
+{% block title %}Email notifications{% endblock %}
 
-<h1>Email notification settings</h1>
-
-<div id="content">
-    <div id="edit_account" class="content_box">
-        <h3>Edit your account information</h3>
-        <form method="post" action=".">{% csrf_token %}
-            {{form.as_p}}
-            <input type="submit" value="Save email settings" />
-        </form>
-    </div><!-- #edit_account -->
-</div><!-- #content -->
+{% block main_content %}
 
+    <h1>Email notifications</h1>
 
-<div id="sidebar">
-    <div class="content_box">
-        <h3>Back</h3>
-        <p>
-            Go back to general <a href="{% url "accounts-edit" %}">settings</a>.
-        </p>
+    <div class="v-spacing-top-4 w-100 v-spacing-5">
+        <div class="text-grey">Send me an email when:</div>
+        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
+            <div class="bw-multiple-checkbox">
+                {{ form }}
+            </div>
+            <button class="btn-primary w-100 v-spacing-top-5">Update Email notifications</button>
+        </form>
     </div>
-</div><!-- #sidebar -->
 
-<br class="clear" /><!-- Clearing Element -->
 {% endblock %}
diff --git a/templates/accounts/email_reset_complete.html b/templates/accounts/email_reset_complete.html
index bac59b918..fba1ffcfd 100644
--- a/templates/accounts/email_reset_complete.html
+++ b/templates/accounts/email_reset_complete.html
@@ -1,11 +1,13 @@
-{% extends "accounts/_section.html" %}
+{% extends "accounts/account_settings_base.html" %}
 
 {% block title %}Email reset complete{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
-<h1>Email reset complete</h1>
+    <h1>Email reset complete</h1>
 
-<p>Your new email address has been changed from {{ old_email }} to {{ user.email }}.</p>
+    <div class="text-grey v-spacing-top-6">
+        Your new email address has been changed from <span class="text-black">{{ old_email }}</span> to <span class="text-black">{{ user.email }}</span>.
+    </div>
 
 {% endblock %}
diff --git a/templates/accounts/email_reset_done.html b/templates/accounts/email_reset_done.html
index 3f2abb65d..cddc1b877 100644
--- a/templates/accounts/email_reset_done.html
+++ b/templates/accounts/email_reset_done.html
@@ -1,13 +1,16 @@
-{% extends "accounts/_section.html" %}
+{% extends "accounts/account_settings_base.html" %}
 
 {% block title %}Email change email sent{% endblock %}
 
-{% block content %}
-<h1>Email change email sent</h1>
-<p>
-    We've emailed you instructions for activating your new email address.
-    You should be receiving them shortly.
-    Note that if the newly introduced email address is already being used by another Freesound user, you will not
-    receive any instructions.
-</p>
+{% block main_content %}
+
+    <h1>Email change email sent</h1>
+
+    <div class="text-grey v-spacing-top-6">
+        We've emailed you instructions for activating your new email address.
+        You should be receiving them shortly.
+        Note that if the newly introduced email address is already being used by another Freesound user, you will not
+        receive any instructions.
+    </div>
+
 {% endblock %}
diff --git a/templates/accounts/email_reset_form.html b/templates/accounts/email_reset_form.html
index 84efadb83..892fb767a 100644
--- a/templates/accounts/email_reset_form.html
+++ b/templates/accounts/email_reset_form.html
@@ -1,20 +1,22 @@
-{% extends "accounts/_section.html" %}
+{% extends "accounts/account_settings_base.html" %}
 
-{% block title %}Change email address{% endblock %}
+{% block title %}Change email{% endblock %}
 
-{% block content %}
+{% block main_content %}
 
-<h1>Change email address</h1>
+    <h1>Change email</h1>
 
-<p> You're currently receiving emails at {{ user.email }}.
-    Enter your new email address and your current password in the form below,
-    and we'll email instructions for the activation of the new address.</p>
+    <div class="text-grey v-spacing-top-4">
+        You're currently receiving emails at <span class="text-black">{{ user.email }}</span>.
+        Enter your new email address and your current password in the form below,
+        and we'll email instructions for the activation of the new address.
+    </div>
 
-<form action="." method="post">{% csrf_token %}
-
-{{form.as_p}}
-
-<input type="submit" value="Reset my email" />
-</form>
+    <div class="w-100 v-spacing-top-3 v-spacing-5">
+        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
+            {{form.as_p}}
+            <button class="btn-primary w-100 v-spacing-top-5">Change my email</button>
+        </form>
+    </div>
 
 {% endblock %}
diff --git a/templates/accounts/flag_user.html b/templates/accounts/flag_user.html
index 65ff365cd..c0712ccd3 100644
--- a/templates/accounts/flag_user.html
+++ b/templates/accounts/flag_user.html
@@ -1,68 +1,17 @@
-
+{% load static %}
 {% if no_show %}
     <!-- do noting -->
 {% else %}
     {% if user_sounds < 1 %}
-
-    <script type="text/javascript">
-
-        function post_flag(div_id, flag_type, object_id, url)
-        {
-            $("#" + div_id.toString() + "_info").html('<img width="12px" height="12px" src="{{ media_url }}images/indicator.gif"/>');
-
-            $.ajax({
-                type: 'POST',
-                url: url,
-                data: {
-                    flag_type: flag_type,
-                    object_id: object_id
-                },
-                success: function(data) {
-                    display_flagged_feedback(div_id,data);
-                },
-                error: function(data) {
-                    display_error_feedback(div_id,data);
-                }
-
-            });
-        }
-
-        function display_flagged_feedback(id, data){
-
-            $("#" + id.toString() + "_link").html("");
-            $("#" + id.toString() + "_info").html("<span style='color:green'>Spam/Offensive report sent!</span>");
-            setTimeout(function() {
-                $("#" + id.toString() + "_info").hide()
-                $("#" + id.toString() + "_link").html("<span style='color:#808080;'>{{ done_text }}</span>");
-            }, 2000);
-        }
-
-        function display_error_feedback(id, data){
-            $("#" + id.toString() + "_link").html("");
-            $("#" + id.toString() + "_info").html("<span style='color:red'>Some error occurred! Try again later...</span>")
-            setTimeout(function() {
-                $("#" + id.toString() + "_info").hide()
-                $("#" + id.toString() + "_link").html("<span style='color:#808080;'>Spam/Offensive reporting failed</span>");
-            }, 2000);
-        }
-
-    </script>
-
-
-    <span id="{{content_obj_id}}{{flag_type}}_link">
-
-    {% if flagged %}
-        <span style="color:#808080;">{{ done_text }}</span>
-    {% else %}
-        <a onclick="post_flag('{{content_obj_id}}{{flag_type}}','{{ flag_type }}',{{ content_obj_id }},'{% url "flag-user" username %}')" href="javascript:void(0)">{{ link_text }}</a>
-    {% endif %}
-    </span>
-
-    <span id="{{content_obj_id}}{{flag_type}}_info">
-        {% comment %}
-        {% if not flagged %}<img src="{{ media_url }}images/info.png"/>{% endif %}
-        {% endcomment %}
-    </span>
-
+        <div>
+            <span class="text-light-grey" id="{{content_obj_id}}{{flag_type}}_link">
+            {% if flagged %}
+                Marked as spam/offensive
+            {% else %}
+                <a aria-label="Report spam/offensive" class="text-grey post-flag" data-content-obj-id="{{content_obj_id}}" data-flag-type="{{ flag_type }}" data-post-flag-url="{% url "flag-user" username %}" href="javascript:void(0)">{{ link_text }}</a>
+            {% endif %}
+            </span>
+            <span class="text-light-grey" id="{{content_obj_id}}{{flag_type}}_wheel"></span>
+        </div>
     {% endif %}
 {% endif %}
diff --git a/templates/accounts/flags_cleared.html b/templates/accounts/flags_cleared.html
deleted file mode 100644
index 19c78022c..000000000
--- a/templates/accounts/flags_cleared.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}spam reports cleared{% endblock %}
-
-{% block section_content %}
-
-    <h1>Spam reports cleared</h1>
-    <p>
-        {{ num }} flag{{ num|pluralize }} for user {{ username }} have been cleared.
-    </p>
-{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/gdpr_consent.html b/templates/accounts/gdpr_consent.html
index 5d232c392..d4b1616ba 100644
--- a/templates/accounts/gdpr_consent.html
+++ b/templates/accounts/gdpr_consent.html
@@ -1,12 +1,10 @@
-{% extends "accounts/_section.html" %}
+{% extends "simple_page.html" %}
+{% block page-title %}Updates to our Privacy Policy{% endblock %}
+{% block title %}Updates to our Privacy Policy{% endblock %}
 
-{% block title %}GDPR Updates to our Privacy Policy{% endblock %}
-
-{% block content %}
-    <h1>Hey, why am I here?</h1>
-
-    <h3>Updates to our Terms of Use and Privacy Policy</h3>
+{% block page-content %}
 
+<div>
     <p>Hello dear Freesound user!</p>
 
     <p>We have recently updated our terms of service and privacy policy and we need you to give us your consent 
@@ -50,28 +48,26 @@ <h3>Updates to our Terms of Use and Privacy Policy</h3>
         of the Freesound community!!!
     </p>
 
-
-
-    <form action="" method="post" enctype="multipart/form-data">
+    <form action="" method="post" enctype="multipart/form-data" novalidate>
         {% csrf_token %}
         {% for hidden_field in form.hidden_fields %}
-          {{ hidden_field.errors }}
-          {{ hidden_field }}
+            {{ hidden_field.errors }}
+            {{ hidden_field }}
         {% endfor %}
-
         {% with form.accepted_tos as tos %}
-            {{ tos }} <label style="display: inline;font-size:12px;" for="{{ tos.id_for_label }}">{{ tos.help_text|safe }}</label>
+            {{ tos.errors }}
+            <label for="{{ tos.id_for_label }}" class="bw-checkbox-label">{{ tos }} {{ tos.help_text|safe }}</label>
         {% endwith %}
         {% if has_sounds_with_old_cc_licenses %}
         <br>
         {% with form.accepted_license_change as alc %}
-            {{ alc }} <label style="display: inline;font-size:12px;" for="{{ alc.id_for_label }}">{{ alc.help_text|safe }}</label>
+            {{ alc.errors }}
+            <label for="{{ alc.id_for_label }}" class="bw-checkbox-label">{{ alc }} {{ alc.help_text|safe }}</label>
         {% endwith %}
         {% endif %}
     <br><br>
-        <input type="submit" name="submit" value="Continue using Freesound!" id="submit">
+        <button class="btn-primary">Continue using Freesound!</button>
     </form>
-
-
-
-{% endblock %}
+</div>
+    
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/login.html b/templates/accounts/login.html
similarity index 100%
rename from templates_bw/accounts/login.html
rename to templates/accounts/login.html
diff --git a/templates_bw/accounts/manage_api_permissions.html b/templates/accounts/manage_api_permissions.html
similarity index 100%
rename from templates_bw/accounts/manage_api_permissions.html
rename to templates/accounts/manage_api_permissions.html
diff --git a/templates_bw/accounts/manage_sounds.html b/templates/accounts/manage_sounds.html
similarity index 100%
rename from templates_bw/accounts/manage_sounds.html
rename to templates/accounts/manage_sounds.html
diff --git a/templates_bw/accounts/modal_bulk_describe.html b/templates/accounts/modal_bulk_describe.html
similarity index 100%
rename from templates_bw/accounts/modal_bulk_describe.html
rename to templates/accounts/modal_bulk_describe.html
diff --git a/templates_bw/accounts/modal_comments.html b/templates/accounts/modal_comments.html
similarity index 100%
rename from templates_bw/accounts/modal_comments.html
rename to templates/accounts/modal_comments.html
diff --git a/templates_bw/accounts/modal_downloads.html b/templates/accounts/modal_downloads.html
similarity index 100%
rename from templates_bw/accounts/modal_downloads.html
rename to templates/accounts/modal_downloads.html
diff --git a/templates_bw/accounts/modal_follow.html b/templates/accounts/modal_follow.html
similarity index 100%
rename from templates_bw/accounts/modal_follow.html
rename to templates/accounts/modal_follow.html
diff --git a/templates_bw/accounts/modal_login.html b/templates/accounts/modal_login.html
similarity index 100%
rename from templates_bw/accounts/modal_login.html
rename to templates/accounts/modal_login.html
diff --git a/templates_bw/accounts/modal_login_problems.html b/templates/accounts/modal_login_problems.html
similarity index 100%
rename from templates_bw/accounts/modal_login_problems.html
rename to templates/accounts/modal_login_problems.html
diff --git a/templates_bw/accounts/modal_registration.html b/templates/accounts/modal_registration.html
similarity index 100%
rename from templates_bw/accounts/modal_registration.html
rename to templates/accounts/modal_registration.html
diff --git a/templates_bw/accounts/modal_registration_feedback.html b/templates/accounts/modal_registration_feedback.html
similarity index 100%
rename from templates_bw/accounts/modal_registration_feedback.html
rename to templates/accounts/modal_registration_feedback.html
diff --git a/templates/accounts/multi_email_cleanup.html b/templates/accounts/multi_email_cleanup.html
index 068e923f2..83247c00e 100644
--- a/templates/accounts/multi_email_cleanup.html
+++ b/templates/accounts/multi_email_cleanup.html
@@ -1,11 +1,10 @@
-{% extends "accounts/_section.html" %}
+{% extends "simple_page.html" %}
 
+{% block title %}Your email address should be updated{% endblock %}
+{% block page-title %}Your email address should be updated{% endblock %}
 
-{% block title %}edit account{% endblock %}
 
-{% block section_content %}
-
-    <h1>Your email address should be updated</h1>
+{% block page-content %}
 
     <p>Dear <b>{{ request.user.username }}</b>, we recently introduced a new policy in Freesound which does not allow
         different user accounts to share a single email address. Only a few users are affected by this change, and you
@@ -29,7 +28,8 @@ <h1>Your email address should be updated</h1>
         If you take no action, this message will be shown again the next time you log in.
     </p>
 
-    <h4><a href="{{ next }}">Do this later...</a></h4>
-
+    <div class="v-spacing-top-6">
+    <a href="{{ next }}" class="btn-primary">Do this later...</a>
+    </div>
 
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/password_change_done.html b/templates/accounts/password_change_done.html
similarity index 100%
rename from templates_bw/accounts/password_change_done.html
rename to templates/accounts/password_change_done.html
diff --git a/templates_bw/accounts/password_change_form.html b/templates/accounts/password_change_form.html
similarity index 100%
rename from templates_bw/accounts/password_change_form.html
rename to templates/accounts/password_change_form.html
diff --git a/templates_bw/accounts/password_reset_complete.html b/templates/accounts/password_reset_complete.html
similarity index 100%
rename from templates_bw/accounts/password_reset_complete.html
rename to templates/accounts/password_reset_complete.html
diff --git a/templates_bw/accounts/password_reset_confirm.html b/templates/accounts/password_reset_confirm.html
similarity index 100%
rename from templates_bw/accounts/password_reset_confirm.html
rename to templates/accounts/password_reset_confirm.html
diff --git a/templates/accounts/pending.html b/templates/accounts/pending.html
deleted file mode 100644
index 23c266a40..000000000
--- a/templates/accounts/pending.html
+++ /dev/null
@@ -1,104 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-
-{% load display_sound %}
-{% load paginator %}
-{% load util %}
-
-{% block title %}Uploaded sounds awaiting moderation{% endblock title %}
-{% block section_content %}
-
-    <h2>Uploaded sounds awaiting moderation {% if moderators_version %} by  <a class="title" href="{% url "account" user.username %}">{{user.username}}</a>{% endif %}</h2>
-
-    {% if not no_assign_button and moderators_version %}
-    <p><a href="{% url 'tickets-moderation-assign-user-pending' user.id %}">
-        <img src="{{media_url}}images/moderation_plus.png" style="position: relative; top: 5px;"/>Assign all to me</a></p>
-    {% endif %}
-
-    {% if show_pagination %}
-        {% show_paginator paginator page current_page request "moderation ticket" %}
-    {% endif %}
-
-    {% for ticket in page.object_list %}
-
-        <div id="pending-ticket" style="margin-bottom:25px">
-            <div class="sample_player_small" style="width: 700px;" id="{{ ticket.sound_obj.id }}">
-                <div class="sample_player">
-                    <div class="small_player">
-                        {% include "sounds/player_medium.html" %}
-                    </div><!-- .small_player -->
-
-                    <div class="sound_title">
-                        <div class="sound_filename">
-                            <a class="title" href="{% url "sound" ticket.sound_obj.username ticket.sound_obj.id %}" title="{{ticket.sound_obj.original_filename}}">{{ticket.sound_obj.original_filename|truncate_string:27}}</a>
-                        </div><!-- .sound_filename -->
-
-                        <div class="sound_description">
-                            <p class="description">{{ticket.sound_obj.description|striptags|safe|truncatewords:20}}</p>
-                        </div><!-- .sound_description -->
-
-                        <div class="sound_tags">
-                            <ul class="tags">
-                                {% for tag_link in ticket.sound_obj.tags_array %}
-                                    <li><a href="{% url "tags" tag_link.tag.name %}">{{tag_link.tag.name}}</a></li>
-                                {% endfor %}
-                            </ul>
-                            <br style="clear: both;"/>
-                        </div><!-- .sound_tags -->
-                    </div>
-                </div>
-                <div class="sample_information" style="width: 250px;">
-                    <span>
-                        {% if ticket.assignee %}
-                            Assigned to moderator <a href="{% url "account" ticket.assignee.username %}">{{ ticket.assignee.username }}</a>
-                        {% else %}
-                            <b>New</b>
-                        {% endif %}
-                    </span><br />
-
-                    <span class="date">{{ticket.sound_obj.created|date:"F jS, Y"}}</span><br />
-                    {% if not moderators_version %}
-                        <a href="{% url "sound-edit" ticket.sound_obj.username ticket.sound_obj.id %}" class="icon" id="edit_link" title="edit sound">Edit sound information</a><br />
-                    {% endif %}
-                    See full <a href="{% url "tickets-ticket" ticket.key %}">moderation ticket</a><br />
-                </div>
-            </div>
-        </div>
-
-        {% comment %}
-        <div class='last-ticket-comments'>
-            <p>Last comment{{ comments|length|pluralize}} on <a href="{% url "tickets-ticket" ticket.key %}">moderation ticket</a>:
-                <ul>
-                    {% for comment in comments %}
-                        <li><a href="{% url "account" comment.sender %}">{{ comment.sender }}</a> <span id="time-since">({{ comment.created|timesince}} ago)</span>: <i>{{ comment.text }}</i></li>
-                    {% endfor %}
-                </ul>
-            </p>
-        </div>
-        {% endcomment %}
-
-    {% empty %}
-        <p>Currently,
-        {% if own_page %}
-        you don't
-        {% else %}
-        {{user.username}} doesn't
-        {% endif %}
-        have any uploaded sounds awaiting moderation.</p>
-    {% endfor %}
-
-    {% if show_pagination %}
-        {% show_paginator paginator page current_page request "moderation ticket" %}
-    {% endif %}
-
-    {% if moderators_version %}
-        <script type="text/javascript">
-            $(document).ready(function (){
-                var loadUrl = '{% url "tickets-user-annotations" 0 %}'.replace('0', ''+ {{ user.id }});
-                $('#user-annotations-section').load(loadUrl);
-            });
-        </script>
-        <div id="user-annotations-section"></div>
-    {% endif %}
-
-{% endblock %}
diff --git a/templates/accounts/player.html b/templates/accounts/player.html
deleted file mode 100644
index f2d741e09..000000000
--- a/templates/accounts/player.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% load util %}
-
-<span class="people_user_info">New sound: <a href="{% url "sound" sound.user.username sound.id %}">{{sound.original_filename|truncate_string:35}}</a>
-</span>
-
-<div class="player_medium">
-    {% include "sounds/player_medium.html" %}
-</div>
diff --git a/templates/accounts/recursive_file.html b/templates/accounts/recursive_file.html
index 692c53c90..03b112055 100644
--- a/templates/accounts/recursive_file.html
+++ b/templates/accounts/recursive_file.html
@@ -1,32 +1,12 @@
 {% load filefunctions %}
-{% if not non_recursive %}
-    {% if file.is_dir %}
-    <li class="dirnode">{{file.name}} (<a id="select_all" href="#" onclick="select_ul(this)">select all</a>)
-        <ul>
-        {% for child in file.children %}
-            {% show_file child %}
-        {% endfor %}
-        </ul>
-    </li>
-    {% else %}
-    <li class="filenode">
-        <span class="filename">
-            <input class="filecheckbox" type="checkbox" id="{{file.id}}" name="{{file.id}}" onchange="checkboxChange(this);">
-            <label for="{{file.id}}"><strong>{{file.name}}</strong></label>
-        </span>
-    </li>
-    {% endif %}
-{% else %}
-    {% if file.children %}
-        <ul> <a id="select_all" href="#" onclick="select_ul(this)">select all</a>
-        {% for child in file.children %}
-            <li class="filenode">
-                <span class="filename">
-                    <input class="filecheckbox" type="checkbox" id="{{child.id}}" name="{{child.id}}" onchange="checkboxChange(this);">
-                    <label for="{{child.id}}"><strong>{{child.name}}</strong></label>
-                </span>
-            </li>
-        {% endfor %}
-        </ul>
-    {% endif %}
+{% comment %}The BW version of this template does not implement the "recursive" mode as we never use it in Freesound{% endcomment %}
+{% if file.children %}
+    <div class="row">
+    {% for child in file.children %}
+        <div class="col-sm-6">
+            <label for="{{child.id}}"><input class="bw-checkbox" type="checkbox" id="{{ child.id }}" name="{{ child.id }}">{{child.name}}</label>
+        </div>
+    {% endfor %}
+    </div>
 {% endif %}
+
diff --git a/templates/accounts/registration.html b/templates/accounts/registration.html
deleted file mode 100644
index d907581d8..000000000
--- a/templates/accounts/registration.html
+++ /dev/null
@@ -1,84 +0,0 @@
-{% extends "accounts/_section.html" %}
-{% load util %}
-{% block title %}registration{% endblock %}
-
-{% block section_content %}
-<style> label:not([for=id_accepted_tos]) {display: block} #username_check, #check_success, #spinner { display:none; color: #bd2d33; font-style: italic; } #check_success {color:green;}</style>
-<script type="text/javascript">
-    $(function () {
-        $("#id_username").focus()
-            $('#id_username').parent().append('<div id="spinner"> Checking...<img src="{{ media_url }}images/indicator.gif" /></div><div id="username_check">Sorry, this username is not valid or is already being used by someone else.</div><div id="check_success">Username is available</div>');
-            $("#id_username").focusout(function(){
-            if ($("#id_username").val()) {
-                $('#spinner').show();
-                $('#username_check').hide();
-                $('#check_success').hide();
-                $.get('{% url "check_username" %}', {'username': $("#id_username").val()}, function(data){
-                        $('#username_check').toggle(!data.result);
-                        $('#spinner').hide();
-                        $('#check_success').toggle(data.result);
-                }, "json" );
-            }
-        });
-    });
-
-    function setPasswordType() {
-        // Set type to password so that browser offers to store it
-        document.getElementById("id_{{ form.password1.name }}").type = 'password';
-        return true;
-    }
-
-    function togglePasswordInputType() {
-        var passwordInput = document.getElementById("id_{{ form.password1.name }}");
-        var eyeImg = document.getElementById("eye-img");
-        if (passwordInput.type === 'password'){
-            passwordInput.type = 'text';
-            eyeImg.src = '{{ media_url }}images/eye-closed.png';
-        } else {
-            passwordInput.type = 'password';
-            eyeImg.src = '{{ media_url }}images/eye-open.png';
-        }
-    }
-</script>
-
-<h1>Registration</h1>
-    <h3>
-        We check uploads and forum posts for spam before others can see them. Any user that posts spam will be deleted.
-    </h3>
-    <form id="registrationForm" method="post" action="." class="disable-on-submit" onsubmit="return setPasswordType()">{% csrf_token %}
-        {{ form.non_field_errors }}
-        {{ form.username.errors }}
-        <p>
-            {{ form.username.label_tag }}{{ form.username }}
-            <span class="helptext">{{ form.username.help_text }}</span>
-        </p>
-        {{ form.email1.errors }}
-        <p>
-            {{ form.email1.label_tag }}{{ form.email1 }}
-            <span class="helptext">{{ form.email1.help_text }}</span>
-        </p>
-        {{ form.email2.errors }}
-        <p>
-            {{ form.email2.label_tag }}{{ form.email2 }}
-            <span class="helptext">{{ form.email2.help_text }}</span>
-        </p>
-        {{ form.password1.errors }}
-        <p>
-            {{ form.password1.label_tag }}{{ form.password1 }}
-            <a href="javascript:void(0)" onclick="togglePasswordInputType()">
-                <img id="eye-img" src="{{ media_url }}images/eye-open.png" title="show/hide password" style="vertical-align: bottom;" />
-            </a>
-            <span class="helptext">{{ form.password1.help_text }}</span>
-        </p>
-        {{ form.accepted_tos.errors }}
-        <p>
-            {{ form.accepted_tos }} <label for="id_accepted_tos">{{ form.accepted_tos.label }}</label>
-        </p>
-        {{ form.recaptcha.errors }}
-        {{ form.recaptcha }}
-        <br><input type="submit" value="Create account!" />
-    </form>
-<br>
-{% include "accounts/reminders.html" %}
-
-{% endblock %}
diff --git a/templates/accounts/registration_done.html b/templates/accounts/registration_done.html
deleted file mode 100644
index c8b8a9e14..000000000
--- a/templates/accounts/registration_done.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}registration done{% endblock %}
-
-{% block section_content %}
-<h1>Registration done, activate your account</h1>
-<p>
-	We have sent you an email: please check your mailbox (and spam folder if you have one!) for the activation link we have sent you.
-</p>
-{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/reminders.html b/templates/accounts/reminders.html
deleted file mode 100644
index 39dfd6a76..000000000
--- a/templates/accounts/reminders.html
+++ /dev/null
@@ -1,8 +0,0 @@
-
-<h1>Already a member?</h1>
-<p>Here are some useful links for the forgetful...</p>
-<ul>
-    <li><a href="{% url "password_reset" %}">Reset your password</a></li>
-    <li><a href="{% url "accounts-resend-activation" %}">Resend activation code</a></li>
-    <li><a href="{% url "accounts-username-reminder" %}">Forgotten username?</a></li>
-</ul>
\ No newline at end of file
diff --git a/templates/accounts/resend_activation.html b/templates/accounts/resend_activation.html
deleted file mode 100644
index dad2e6fe9..000000000
--- a/templates/accounts/resend_activation.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}resend activation email{% endblock %}
-
-{% block section_content %}
-<h1>Resend activation</h1>
-<form method="post" action=".">{% csrf_token %}
-{{form.as_p}}
-<input type="submit" value="Resend activation code" />
-</form>
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/resend_activation_done.html b/templates/accounts/resend_activation_done.html
deleted file mode 100644
index a560145b5..000000000
--- a/templates/accounts/resend_activation_done.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}registration done{% endblock %}
-
-{% block section_content %}
-<h1>Activation email has been re-sent</h1>
-<p>
-	We have sent you an email: please check your mailbox (and spam folder if you have one!) for the activation link we have sent you.
-</p>
-{% endblock %}
diff --git a/templates/accounts/section.html b/templates/accounts/section.html
deleted file mode 100644
index 0392ac6f9..000000000
--- a/templates/accounts/section.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "base.html" %}
-
-			{% startblock navigation %}
-				<li class="active_tab"><a href="#" id="site_nav_home"><span class="site_nav_icon"></span>Home</a></li>
-				<li><a href="#" id="site_nav_sounds"><span class="site_nav_icon"></span>Sounds</a></li>
-				<li><a href="#" id="site_nav_forums"><span class="site_nav_icon"></span>Forums</a></li>
-				<li><a href="#" id="site_nav_help"><span class="site_nav_icon"></span>Help</a></li>
-			{% endblock %}
diff --git a/templates/accounts/upload.html b/templates/accounts/upload.html
index 690524851..dae6078bc 100644
--- a/templates/accounts/upload.html
+++ b/templates/accounts/upload.html
@@ -1,569 +1,97 @@
-{% extends "base.html" %}
+{% extends "simple_page.html" %}
+{% load static %}
 {% load absurl %}
+{% load bw_templatetags %}
+{% block page-title %}Upload Sound Files{% endblock %}
+{% block title %}Upload Sound Files{% endblock %}
 
-{% block title %}upload files{% endblock %}
+{% block page-content %}
 
-{% block head %}
-    {{ block.super }}
-    <style type="text/css">
-    #upload-progress-container
-    {
-        border: 1px solid #aaa;
-        margin-top: 20px;
-        background: #eee;
-        padding: 5px;
-        width:650px;
-    }
-
-    div.queue-container
-    {
-        padding: 1px;
-        margin-left: 4px;
-    }
-
-    div.progress-container
-    {
-        clear:both;
-        float: left;
-        border: 1px solid #aaa;
-        width: 250px;
-        margin-top:8px;
-        margin-right: 5px;
-        /*margin-bottom: 30px;*/
-    }
-    div.progress
-    {
-        height:9px;
-        width: 0%;
-        background-image: url('{{media_url}}images/progress.gif');
-        background-repeat: repeat-x;
-    }
-
-    div.progress-done
-    {
-        height:9px;
-        background-color: #fdc735;
-        background-image: none;
-        width: 100%;
-    }
-
-    div.progress-failed
-    {
-        height:9px;
-        background-color: #bd2d33;
-        background-image: none;
-        width: 100%;
-    }
-
-    span.cancel-container img
-    {
-        vertical-align:bottom;
-    }
-    span.filename
-    {
-        font-size: 12px;
-        margin-top: 2px;
-    }
-    .please_note
-    {
-        width: 200px;
-        height: 160px;
-        background-color: #fefefe;
-        padding: 0 10px 0 10px;
-        margin: 5px;
-        float: left;
-        border: 1px solid #eee;
-        border-top: 0px;
-    }
-    .please_note h3 {
-        margin-left: 5px;
-    }
-
-    #describe_button_block{
-        display:block;
-        text-align:center;
-        float:right;
-        margin-right:120px;
-        width:320px;
-        color:gray;
-    }
-    #upload_button_block{
-        display:block;
-        text-align:center;
-        float:left;
-        margin-left:120px;
-        width:320px;
-        color:gray;
-    }
-
-    #buttons_container
-    {
-        width: 100%;
-        height: 130px;
-    }
-
-    .html_upload_form{
-    	margin-left: 0px;
-		padding: 0px;
-		border-left: none;
-		background: white;
-		margin-bottom: 20px;
-		text-align:left;
-    }
-    .centered{
-    	text-align:center;
-    }
-    /*.file-list {
-      max-height: 110px;
-      overflow: auto;
-    }*/
-    .drop-area {
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      box-shadow: inset 0 0 30px #bd2d33;
-      display: none;
-    }
-    .abort-button {
-      display: none;
-    }
-
-    #drag-tip {
-        color:gray;
-        font-size:12px;
-    }
-    #describe-sounds{
-        margin-left: 30px;
-        margin-top: 39px;
-        font-size:12px;
-    }
-    </style>
-{% endblock %}
-
-{% block content %}
-
-<div id="upload_page">
-{% comment %}<h1>Upload files</h1>{% endcomment %}
-<p>
-    <em><h2>Please note before uploading..</h2></em>
-</p>
-<div>
-    <div class="please_note content_box">
-        <h3>Legality</h3>
-        <p>Only upload sounds created or recorded <strong>by you</strong>. <em><a href="{% url "wiki-page" "faq" %}#sounds-4">More details...</a></em>
-    </div>
-    <div class="please_note content_box">
-        <h3>Sounds only</h3>
-        <p>Freesound is for <strong>sounds</strong> only. Self-created <strong>music fragments/samples/loops</strong> are also ok, but not
-            complete songs or compositions.
-    </div>
-    <div class="please_note content_box">
-        <h3>Moderation</h3>
-        <p>All files are <strong>moderated</strong>. If you upload illegal files or files that don't follow the <a href="{% url "wiki-page" "faq" %}#sounds">guidelines</a> they will be removed.
+<div class="bw-upload">
+    <div class="v-spacing-3">
+        <h4 class="text-light-grey">Please note before uploading...</h4>
     </div>
-    <div class="please_note content_box">
-        <h3>Formats</h3>
-        <p>We prefer <strong>wav, aif and flac</strong>, but we support ogg, m4a and mp3 too. For very large files please use some compressed format. Uploading more than 1GB at once will fail.
-    </div>
-
-    <br style="clear: both;">
-</div>
-<br>
-<br>
-
-
-<div>
-{% if uploads_enabled %}
-    <div id="buttons_container">
-    <div id="upload_button_block">
-
-    <script type="text/javascript">
-        var queue = Array();
-        swfobject.registerObject("uploader", "10.1");
-        function removeFromQueue(fileId){
-            queue.splice(queue.indexOf(fileId),1)
-            if(queue.length==0){
-                $("#describe_img").attr("src", "{{media_url}}images/describe_sounds.png");
-                $("#describe_a").mouseover(function () {$(this).css('cursor', 'pointer')});
-                $("#describe_a").attr("href", "{% url 'accounts-describe' %}");
-            }
-        }
-        function uploadError(fileId, message)
-        {
-            if (fileId < 0)
-                alert("Upload error: " + message);
-            else
-            {
-                $('#file_' + fileId).find(".status").html("Failed: " + message);
-                $('#file_' + fileId).find(".cancel-container").hide();
-                $('#file_' + fileId).find(".progress").removeClass('progress').addClass('progress-failed').css("width", "100%");
-                removeFromQueue(fileId);
-            }
-        }
-        function uploadAdd(fileId, filename)
-        {
-            $("#upload-progress-container").show().append(
-                    '<div id="file_' + fileId + '" class="queue-container">\
-                        <div class="progress-container">\
-                            <div class="progress"></div>\
-                        </div>\
-                        <!-- <span class="cancel-container"><img src="{{media_url}}images/cancel.png" /></span> -->\
-                        <span class="filename"><strong class="status">queued</strong>: ' + filename + '</span>\
-                    </div>');
-            queue.push(fileId);
-            $("#describe_img").attr("src", "{{media_url}}images/describe_sounds_disabled.png");
-            $("#describe_a").mouseover(function () {$(this).css('cursor', 'default');});
-            $("#describe_a").attr("href", "#");
-            /*$('#file_' + fileId).select('span.cancel-container img').click(function (event) {
-                swfu.cancelUpload(file.id);
-            });*/
-        }
-        function uploadProgress(fileId, percentage)
-        {
-            $('#file_' + fileId).find(".status").html("uploading");
-            $('#file_' + fileId).find('.progress').css("width", percentage + "%");
-        }
-        function uploadDone(fileId)
-        {
-            $('#file_' + fileId).find(".status").html('done');
-            //$('#file_' + fileId).select("span.cancel-container").hide();
-            $('#file_' + fileId).find(".progress").removeClass('progress').addClass('progress-done').css("width", "100%");
-            removeFromQueue(fileId);
-        }
-    </script>
-
-    {% if no_flash %}
-        <form method="POST" enctype="multipart/form-data" class="html_upload_form" id="upload-form">{% csrf_token %}
-        {{ form.as_p }}
-        <div id="drag-tip">
-            <h1>Drag files here...</h1>
-            ...or click on 'Add files' (valid file extensions: flac, wav, aif, aiff, m4a, ogg and mp3).
+    <div class="row no-gutters v-spacing-4">
+        <div class="col-md-6 col-lg-3">
+            <div class="padding-right-2">
+                <h5>Legality</h5>
+                <p>Only upload sounds created or recorded <strong>by you</strong>. <a href="{% url "wiki-page" "faq" %}#sounds-4">More details...</a></p>
+            </div>
         </div>
-        <ul id="file-list" class="file-list"></ul>
-        <input type="button" id="add-files-btn" value="+ Add files" />
-        <input type="submit" value="Upload" id="html_upload_button" />
-        </form>
-        <div class="progress-container" id="progress-container" style="margin-bottom: 30px;"></div>
-        <input type="button" id="abort" class="abort-button" value="Abort" />
-        <div class="drop-area" id="drop-area"></div>
-        <div style="text-align: left;">
-        {% if successes %}
-          <p>
-          <b>{{ successes }} file{{ successes|pluralize }} uploaded successfully!</b>
-          </p>
-        {% endif %}
-
-        {% if errors %}
-          <p>
-          <b>There were errors uploading the files:</b>
-            <ul>{% for file in errors %}<li>{{ file }}</li>{% endfor %}</ul>
-          </p>
-        {% endif %}
+        <div class="col-md-6 col-lg-3">
+            <div class="padding-right-2">
+                <h5>Sounds only</h5>
+                <p>Freesound is for <strong>sounds</strong> only. Self-created <strong>music fragments/samples/loops</strong> are also ok, but not complete songs or compositions.</p>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="padding-right-2">
+                <h5>Moderation</h5>
+                <p>All files are <strong>moderated</strong>. If you upload illegal files or files that don't follow the <a href="{% url "wiki-page" "faq" %}#sounds">guidelines</a> they will be removed.</p>
+            </div>
+        </div>
+        <div class="col-md-6 col-lg-3">
+            <div class="padding-right-2">
+                <h5>Formats</h5>
+                <p>We prefer <strong>wav, aif and flac</strong>, but we support <strong>ogg</strong>, <strong>m4a</strong> and <strong>mp3</strong> too. For very large files please use some compressed format. Uploading more than 1GB at once might fail.</p>
+            </div>
         </div>
-    {% else %}
-        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="160" height="31" id="uploader">
-            <param name="movie" value="{{media_url}}swf/upload.swf" />
-            <param name="flashvars" value="sessionid={{request.session.session_key}}" />
-            <param name="AllowScriptAccess" value="always" />
-            <!--[if !IE]>-->
-            <object type="application/x-shockwave-flash" data="{{media_url}}swf/upload.swf" width="160" height="31">
-                <param name="flashvars" value="sessionid={{request.session.session_key}}" />
-                <param name="AllowScriptAccess" value="always" />
-                <!--<![endif]-->
-                <p>
-                    If you install <a href="https://get.adobe.com/flashplayer/">flash player 10</a> you will be able to upload multiple files in one go!<br/>
-                </p>
-                <form method="POST" enctype="multipart/form-data" action="/home/upload/file/">
-                    <input type="hidden" name="sessionid" value="{{ request.session.session_key }}" />
-                    <input type="file" name="file" /><br/>
-                    <input type="submit" value="upload" />
-                </form>
-                <!--[if !IE]>-->
-            </object>
-            <!--<![endif]-->
-    </object>
-    <p>
-    <img src="{{media_url}}/images/fugue-icons/icons/exclamation.png"> <span style="color:black">Don't leave before upload finishes!</span><br/>
-    Hint 1: you can upload multiple files at once
-    <br>Hint 2: we recommend you to upload your files using the <a href="{% url "accounts-upload" %}"> html uploader</a> ;)
-    </p>
-    {% endif %}
-
-    </div>
-
-    <div id="describe_button_block">
-    <p>Once sounds are uploaded, you'll have to describe them before they can show up in the web site.</p>
-    <p><a id="describe_a" href="{% url "accounts-describe" %}"><img id="describe_img" src="{{media_url}}images/describe_sounds.png" width="160" height="31" alt="Describe Your Sounds Link" /></a></p>
-    </div>
     </div>
-    <div id="upload-progress-container" style="display:none">
+    <div class="row no-gutters v-spacing-4">
+        {% if uploads_enabled %}
+
+        <div class="col-md-6">
+            <form method="POST" enctype="multipart/form-data" class="html_upload_form" id="upload-form" data-max-file-size="{{ max_file_size }}" data-upload-url="{% url 'accounts-upload' %}">{% csrf_token %}
+                {{ form.as_p }}
+                
+                <div id="drag-tip">
+                    <h1 class="text-light-grey">Drag files here...</h1>
+                    <p>...or click on 'Add files' (valid file extensions: flac, wav, aif, aiff, m4a, ogg and mp3).</p>
+                </div>
+                <ul id="file-list" class="file-list"></ul>
+                <div class="progress-container h-spacing-2" id="progress-container"></div>
+                <div>
+                    {% if successes %}
+                    <p>
+                        <b>{{ successes|bw_intcomma }} file{{ successes|pluralize }} uploaded successfully!</b>
+                    </p>
+                    {% endif %}
+                    {% if errors %}
+                    <p>
+                        <b>There were errors uploading the files:</b>
+                        <ul>{% for file in errors %}<li>{{ file }}</li>{% endfor %}</ul>
+                    </p>
+                    {% endif %}
+                </div>
+                <div class="v-spacing-top-1">
+                    <input class="btn-secondary cursor-pointer" type="button" id="add-files-btn" value="+ Add files" />
+                    <input class="btn-primary cursor-pointer" type="submit" value="Upload" id="html_upload_button" />
+                    <input class="btn-inverse cursor-pointer" type="button" id="abort" value="Abort" />
+                </div>
+            </form>            
+            <div class="drop-area" id="drop-area"></div>
+        </div>
+        <div class="col-md-6 middle">
+            <div class="text-center">
+                <div class="text-grey v-spacing-4 h-padding-7">
+                    Once sounds are uploaded, you'll have to describe them before they can show up in the web site.
+                </div>
+                <div>
+                    <a class="btn-blue no-hover" href="{% url 'accounts-manage-sounds' 'pending_description' %}" title="Describe Your Sounds Link">Describe sounds</a>
+                </div>
+            </div>
+        </div>
+        {% else %}
+        <div class="v-spacing-3 v-spacing-top-6 w-100 text-center">
+            <h5>Uploads disabled... &#128543</h5>
+            <p class="text-grey v-spacing-2">We're deeply sorry but uploading and describing sounds is <b>temporarily disabled</b>.
+                We'll enable it again as soon as possible.</p>
+        </div>
+        {% endif %}
     </div>
-    <br/>
-    <div style="clear:both"/>
-
-    </div><!-- #upload_page -->
-
-    {% if no_flash %}
-    <script>
-      (function() {
-        var csrftoken = (function getCookie(key) {
-          var result;
-          /*!
-           * Snippet adapted from JavaScript Cookie v2.1.1
-           * https://github.com/js-cookie/js-cookie
-           *
-           * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
-           * Released under the MIT license
-           */
-          // To prevent the for loop in the first place assign an empty array
-          // in case there are no cookies at all. Also prevents odd result when
-          // calling "get()"
-          var cookies = document.cookie ? document.cookie.split('; ') : [];
-          var rdecode = /(%[0-9A-Z]{2})+/g;
-          var i = 0;
-
-          for (; i < cookies.length; i++) {
-            var parts = cookies[i].split('=');
-            var name = parts[0].replace(rdecode, decodeURIComponent);
-            var cookie = parts.slice(1).join('=');
-
-            if (cookie.charAt(0) === '"') {
-              cookie = cookie.slice(1, -1);
-            }
-
-            try {
-              cookie = cookie.replace(rdecode, decodeURIComponent);
-
-              if (this.json) {
-                try {
-                  cookie = JSON.parse(cookie);
-                } catch (e) {}
-              }
-
-              if (key === name) {
-                result = cookie;
-                break;
-              }
-
-              if (!key) {
-                result[name] = cookie;
-              }
-            } catch (e) {}
-          }
-
-          return result;
-        })('csrftoken');
-
-        // the list of files to upload shouldn't have duplicates, use this method with reduce() to ensure it
-        var removeDuplicates = function removeDuplicates(queue, currentFile) {
-          var isSameFile = function isSameFile(file) {
-            return file.size === currentFile.size && file.name === currentFile.name;
-          };
-          var isSoundInSoundsQueue = !!queue.filter(isSameFile).length;
-          if (!isSoundInSoundsQueue) {
-            return queue.concat(currentFile);
-          } else {
-            return queue;
-          }
-        };
-
-        var trimSize = function trimSize(queue, currentFile) {
-          var total_size = queue.reduce((acc, curr) => acc + curr.size, 0);
-          if (total_size + currentFile.size < maxUploadSize) {
-            return queue.concat(currentFile);
-          } else {
-            return queue;
-          }
-        };
-
-        var setSizeBarValue = function setSizeBarValue(value) {
-          var file_size = document.getElementById('file-size');
-          file_size.style.width = value + "%";
-          if (value >= 0 && value <= 70) {
-            file_size.style.background = "green";
-          } else if (value > 70 && value <= 90) {
-            file_size.style.background = "orange";
-          } else {
-            file_size.style.background = "red";
-          }
-          file_size.style.color = "white";
-          file_size.innerText = Math.round(maxUploadSize/1024/1024 * (1 - value/100)) + " MB remaining";
-
-          var file_size_bar = document.getElementById('size-table');
-          file_size_bar.style.visibility = (value > 50 ? "visible" : "hidden" );
-        }
-
-        var addSizeBarElement = function addSizeBarElement() {
-          var form = fileList.parentNode;
-          sizeTable = document.createElement('table');
-          sizeTable.id = "size-table";
-          sizeTable.style.width = "100%";
-          sizeTable.style.visibility = "hidden";
-          sizeTable.innerHTML = '<td width=0%; id="file-size"; style="background: lightgray" /><td style="background: lightgray" />';
-          form.insertBefore(sizeTable, addFilesButton);
-          return errorList;
-        };
-
-        // add new (or 'dropped') files to the list of files to upload, avoiding duplicates
-        var onFileInputChange = function onFileInputChange(event) {
-          event.preventDefault();
-          dropArea.style.display = 'none';  // hide red borders shown while dragging
-          var receivedFiles = event.target.files || event.dataTransfer.files;
-          for (var i = 0; i < receivedFiles.length; i++) {
-            soundsQueue.push(receivedFiles[i]);
-          }
-          soundsQueue = soundsQueue.reduce(removeDuplicates, []);
-          var num = soundsQueue.length;
-          soundsQueue = soundsQueue.reduce(trimSize, []);
-          num -= soundsQueue.length;
-          showListOfSounds();
-          var percent_size = soundsQueue.reduce((acc, curr) => acc + curr.size, 0) * 100 / maxUploadSize;
-          setSizeBarValue(percent_size);
-          resetForm(num > 0 ? "Upload limit of {{ max_file_size_in_MB }} MB exceeded. " + num + " file" + (num > 1 ? "s" : "") + " discarded." : " ");
-        };
-
-        var addErrorListElement = function addErrorListElement() {
-          var form = fileList.parentNode;
-          var errorList = document.createElement('ul');
-          errorList.className = 'errorlist';
-          form.insertBefore(errorList, fileList);
-          return errorList;
-        };
-
-        var showListOfSounds = function showListOfSounds() {
-          fileList.innerHTML = '';
-          if (!!dragTip) {
-            if (!!soundsQueue.length) {
-              dragTip.style.display = 'none';
-            } else {
-              dragTip.style.display = 'block';
-            }
-          }
-          soundsQueue.forEach(function(soundFile) {
-            var node = document.createElement("li");
-            var textNode = document.createTextNode(soundFile.name);
-            node.appendChild(textNode);
-            fileList.appendChild(node);
-          });
-        };
-
-        var onDrag = function onDrag(event) {
-          event.stopPropagation();
-          event.preventDefault();
-          dropArea.style.display = 'block';
-        };
-
-        // function to reset form to its initial look (displaying an error message if necessary)
-        var resetForm = function resetForm(error) {
-          // remove progress bar
-          progressContainer.innerHTML = '';
-          progressContainer.style.display = 'none';
-          // reset buttons look
-          uploadButton.disabled = false;
-          addFilesButton.disabled = false;
-          abortButton.style.display = 'none';
-          showListOfSounds();
-          if (!!error) {
-            errorList.innerHTML = '';
-            var node = document.createElement("li");
-            var textNode = document.createTextNode(error);
-            node.appendChild(textNode);
-            errorList.appendChild(node);
-          }
-        };
-
-        var soundsQueue = [];  // the files we will upload
-        var submitForm = function submitForm(event) {
-          event.preventDefault();
-          uploadButton.disabled = true;
-          addFilesButton.disabled = true;
-          abortButton.style.display = 'block';
-          var formData = new FormData();
-          soundsQueue.forEach(function addSound(sound) {
-            formData.append('files', sound);
-          });
-          formData.append('csrfmiddlewaretoken', csrftoken);
-          var submitURL = "{% url 'accounts-upload' %}";
-          var request = new XMLHttpRequest();
-          request.open("POST", submitURL);
-          request.onload = function() {
-            if (request.status >= 200 && request.status < 400) {  // SUCCESS
-              // TODO: consider returning a JSON response to avoid using document.write
-              document.open();
-              document.write(request.response);
-              document.close();
-            } else {  // FAILURE
-              var errorMessage = 'Something went wrong';
-              resetForm(errorMessage);
-            }
-          };
-          request.onerror = function() {
-            var errorMessage = 'Something went wrong';
-            resetForm(errorMessage);
-          };
-          request.onabort = function() {
-            var errorMessage = 'Upload aborted';
-            resetForm(errorMessage);
-          };
-          // create and fill the progress bar while uploading
-          request.upload.onprogress = function updateProgress(event) {
-            // function for creating the progress bar
-            var addProgressBar = function() {
-              var progressNode = document.createElement('div');
-              progressNode.className = 'progress';
-              progressContainer.appendChild(progressNode);
-              return progressNode;
-            };
-            var progress = (event.lengthComputable) ? event.loaded / event.total : 0;
-            progressContainer.style.display = 'block';
-            // add the progress bar if not there already
-            var progressNode = progressContainer.firstElementChild || addProgressBar();
-            // change its width to show the progress update
-            progressNode.style.width = progress * 100 + '%';
-            if (progress === 1) {
-              progressNode.className = 'progress-done';
-            }
-          };
-          abortButton.onclick = function() {
-            request.abort();
-          };
-          request.send(formData);
-        };
-
-        var uploadForm = document.getElementById('upload-form');
-        uploadForm.onsubmit = submitForm;
-        var fileInput = document.getElementById('id_files');
-        var fileList = document.getElementById('file-list');
-        var addFilesButton = document.getElementById('add-files-btn');
-        var uploadButton = document.getElementById('html_upload_button');
-        var progressContainer = document.getElementById('progress-container');
-        var dragTip = document.getElementById('drag-tip');
-        var dropArea = document.getElementById('drop-area');
-        var abortButton = document.getElementById('abort');
-        var errorList = document.getElementsByClassName('errorlist')[0] || addErrorListElement();
-        var sizeBar = document.getElementsByClassName('sizebar')[0] || addSizeBarElement();
-        addFilesButton.onclick = function onclick() { fileInput.click(); };
-        fileInput.onchange = onFileInputChange;
-        fileInput.style.display = 'none';
-        progressContainer.style.display = 'none';
-        var maxUploadSize = {{ max_file_size }};
-
-        // drag and drop
-        document.addEventListener('dragenter', onDrag);
-        document.addEventListener('dragover', function(e) {e.preventDefault();});
-        document.addEventListener('dragleave', onDrag);
-        document.addEventListener('drop', onFileInputChange);
-      })();
-    </script>
-    {% endif %}
+</div>    
+{% endblock %}
 
-{% else %}
-    <ul class="messages">
-        <li>We're deeply sorry but uploading and describing sounds is <b>temporarily disabled</b>.
-        We'll enable it again as soon as possible.</li>
-    </ul>
-{% endif %}
-</div>
+{% block extrabody %}
+<script src="{% static 'bw-frontend/dist/upload.js' %}"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/accounts/username_reminder.html b/templates/accounts/username_reminder.html
deleted file mode 100644
index d056fc0b5..000000000
--- a/templates/accounts/username_reminder.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}username reminder{% endblock %}
-
-{% block section_content %}
-<h1>Username reminder</h1>
-{% if sent %}
-    <p>A username reminder was sent to your email address, please make sure you check both your <strong>inbox</strong> and <strong>spam folder</strong> for the email!</p>
-{% else %}
-    <form method="post" action=".">{% csrf_token %}
-    {{form.as_p}}
-    <input type="submit" value="Send username reminder" />
-    </form>
-{% endif %}
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/admin_custom/sound_of_the_day_changelist.html b/templates/admin_custom/sound_of_the_day_changelist.html
similarity index 100%
rename from templates_bw/admin_custom/sound_of_the_day_changelist.html
rename to templates/admin_custom/sound_of_the_day_changelist.html
diff --git a/templates/api/app_authorized.html b/templates/api/app_authorized.html
deleted file mode 100644
index b93c6a2b6..000000000
--- a/templates/api/app_authorized.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<meta name='viewport' content='width=device-width, initial-scale=0.65' />
-
-<head>
-    <title>Freesound - app authorized</title>
-    <style>
-        body {
-            font-family: Verdana, sans-serif;
-            font-size: 11px;
-            margin:0px 0px;
-            padding:0px;
-            text-align:center;
-            -webkit-text-size-adjust: 100%;
-        }
-        .container_main {
-            margin: auto;
-            padding:20px;
-            width:440px;
-        }
-        .container {
-            width:400px;
-            background-color: #f3f3f3;
-            border-radius:10px;
-            padding:20px;
-            border: solid 1px #e0e0e0;
-        }
-    </style>
-</head>
-<body>
-
-<div class="container_main">
-<div class="container">
-
-     <img src="/media/images/logo.png"/>
-     {% if app_name and code %}
-            <p>
-                Permission granted to application <strong>{{ app_name }}</strong>!.
-                <br>Your authorization code:
-                {% comment %}In order to complete the full authentication process the application will require you to introduce the following authorization code:{% endcomment %}
-            </p>
-
-            <div style="font-size:14px;font-family:'Courier';">{{ code }}</div>
-
-            {% comment %}<p>(logged in as <strong>{{ request.user }}</strong>, <a href="{% url "api-logout" %}?next={{ logout_next }}">login as another user</a>).</p>{% endcomment %}
-
-        {% else %}
-
-            <p>Access has been denied.</p>
-            {% comment %}<p>In case you clicked on "Authorize!" some errors might have occurred. You should probably start again the authorization process from the 3rd party application!</p>{% endcomment %}
-
-        {% endif %}
-
-</div>
-</div>
-
-</body>
-</html>
diff --git a/templates/api/apply_key.html b/templates/api/apply_key.html
deleted file mode 100644
index 29923def5..000000000
--- a/templates/api/apply_key.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-
-{% block title %}{{user.username}} - api keys{% endblock %}
-
-{% block section_content %}
-    <h1>Your api keys (for Api V1)</h1>
-    
-    <h3>Apply for a new key</h3>
-    
-    <form action="" method="post" enctype="multipart/form-data">
-    
-        {% csrf_token %}
-        <table>
-            {{ form.as_table }}
-        </table>
-        <input type="submit" name="submit" value="Request API key" id="submit">
-    </form>
-    
-    <h3>Your existing keys</h3>
-    
-    <table>
-    <tr><th>Key</th><th>Application</th><th>Status</th><th>Description</th></tr>
-    {% for key in user.api_keys.all %}
-        <tr><td>{{ key.key }}</td><td>{{ key.name }}</td><td>{{ key.status }}</td><td>{{ key.description }}</td></tr>
-    {% endfor %}
-    </table>
-{% endblock %}
\ No newline at end of file
diff --git a/templates/api/apply_key_apiv2.html b/templates/api/apply_key_apiv2.html
deleted file mode 100644
index 421582f7d..000000000
--- a/templates/api/apply_key_apiv2.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% extends "accounts/_section.html" %}
-{% load util %}
-
-{% block title %}{{user.username}} - Freesound API access credentials{% endblock %}
-
-{% block section_content %}
-    <h1>Your Freesound API access credentials</h1>
-
-    <h3>Existing credentials</h3>
-
-    <table>
-    <tr>
-        <th>Name</th>
-        {% comment %}<th>Api ver.</th>{% endcomment %}
-        <th>Client id</th>
-        <th>Client secret/Api key</th>
-        {% comment %}<th>Scope</th>{% endcomment %}
-        <th>Redirect url</th>
-        <th></th>
-        <th></th>
-        <th></th>
-        {% comment %}<th>Status</th>{% endcomment %}
-    </tr>
-    {% for credential in user_credentials %}
-        <tr>
-            <td>{{ credential.name|truncate_string:20 }}</td>
-            {% comment %}<td>{% if credential.version == 'V2' %}V1/{% endif %}{{ credential.version }}</td>{% endcomment %}
-            <td>{{ credential.client_id }}</td>
-            <td>{{ credential.client_secret }}</td>
-            {% comment %}<td>{{ credential.get_scope_display }}</td>{% endcomment %}
-            <td>{{ credential.redirect_uri|truncate_string:20 }}</td>
-            <td><a href="{% url "apiv2-edit-credential" credential.client_secret %}">edit</a></td>
-            <td><a href="{% url "apiv2-monitor-credential" credential.client_secret %}">monitor</a></td>
-            <td><a href="{% url "apiv2-delete-credential" credential.client_secret %}">delete</a></td>
-
-            {% comment %}<td>{{ credential.status }}</td>{% endcomment %}
-        </tr>
-    {% endfor %}
-    </table>
-
-    <h3>Get a new credential</h3>
-
-    <form action="" method="post" enctype="multipart/form-data">
-
-        {% csrf_token %}
-        <table>
-            {{ form.as_table }}
-        </table>
-        <p>
-            <input type="submit" name="submit" value="Request access credentials" id="submit">
-        </p>
-        <p style="width:700px">
-            The <b> OAuth2 callback URL</b> is only used for the authorization process when accessing resources that require OAuth2.
-            At the end of the OAuth2 authorization process, Freesound will redirect the browser to the url specified in this field.
-            In this way your application can be automatically notified when users have given the permissions to access their data.
-            If your application does not support the use of a callback url (generally non web-based applications or non server-based), you must
-            introduce the following url: <span style="font-family: 'Courier'">{{ fs_callback_url }}</span>.
-            <br>See the <a href="/docs/api" target="_blank">API docummentation</a> for more information.
-        </p>
-
-    </form>
-
-
-{% endblock %}
diff --git a/templates_bw/api/credentials.html b/templates/api/credentials.html
similarity index 100%
rename from templates_bw/api/credentials.html
rename to templates/api/credentials.html
diff --git a/templates/api/edit_api_credential.html b/templates/api/edit_api_credential.html
index 2b2b2d710..cf34c8b59 100644
--- a/templates/api/edit_api_credential.html
+++ b/templates/api/edit_api_credential.html
@@ -1,30 +1,20 @@
-{% extends "accounts/_section.html" %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
 {% load util %}
 
-{% block title %}{{user.username}} - editing API credentials for application: {{ client.name }}{% endblock %}
-
-{% block section_content %}
-    <h1>Editing API credentials for application: {{ client.name }}</h1>
-
-    <form action="" method="post" enctype="multipart/form-data">
-    
-        {% csrf_token %}
-        <table>
-            {{ form.as_table }}
-        </table>
-        <p>
-            <input type="submit" name="submit" value="Update credentials" id="submit">
-        </p>
-        <p style="width:700px">
-            The <b> OAuth2 callback URL</b> is only used for the authorization process when accessing resources that require OAuth2.
-            At the end of the OAuth2 authorization process, Freesound will redirect the browser to the url specified in this field.
-            In this way your application can be automatically notified when users have given the permissions to access their data.
-            If your application does not support the use of a callback url (generally non web-based applications or non server-based), you must
-            introduce the following url: <span style="font-family: 'Courier'">{{ fs_callback_url }}</span>.
-            <br>See the <a href="/docs/api" target="_blank">API docummentation</a> for more information.
-        </p>
-
-    </form>
-    
+{% block title %}Edit API credentials{% endblock %}
+{% block page-title %}Freesound API credentials{% endblock %}
 
+{% block page-content %}
+<div class="v-spacing-top-5">
+    <div class="offset-lg-2 col-lg-8">
+        <h5 class="v-spacing-4">Editing credentials "{{ client.name }}"</h5>
+        <div class="w-100">
+            <form action="" method="post" enctype="multipart/form-data" class="bw-form w-100 disable-on-submit" novalidate>{% csrf_token %}
+                {{ form.as_p }}
+                <button class="btn-primary v-spacing-top-5">Update credentials</button>
+            </form>
+        </div>
+    </div>
+</div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/api/manage_permissions.html b/templates/api/manage_permissions.html
deleted file mode 100644
index e29fd69c9..000000000
--- a/templates/api/manage_permissions.html
+++ /dev/null
@@ -1,68 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-
-
-{% block title %}{{user.username}} - Manage API application permissions{% endblock %}
-
-{% block section_content %}
-    <h1>Manage API application permissions</h1>
-
-     {% if tokens or grants %}
-        <p>This list shows all the API applications to which you have granted permission to access your data.
-        <br>Granting permission to access your data means that you allow the application to act on your behealf inside Freesound.</p>
-
-        <table>
-            <tr><th>Application name</th><th>Developer</th><th>Client id</th>{% if show_expiration_date %}<th>Expiration date</th>{% endif %}<th></th></tr>
-            {% for token in tokens %}
-                <tr><td>{{ token.client_name }}</td>
-                    <td><a href="{% url "account" token.developer %}">{{ token.developer }}</a></td>
-                    <td>{{ token.client_id }}</td>
-                    {% if show_expiration_date %}
-                        <td {% if token.expired %}style="background-color:#ff8a8a;{% endif %}">
-                            {{ token.expiration_date }}
-                        </td>
-                    {% endif %}
-                    <td>
-                       <a href="{% url "revoke-permission" token.client_id %}">Revoke permission</a>
-                    </td>
-                </tr>
-            {% endfor %}
-
-            {% if grants %}
-                {% for grant in grants %}
-                    <tr class="api-client-permissions-grant-row"><td>{{ grant.client_name }}</td>
-                        <td><a href="{% url "account" grant.developer %}">{{ grant.developer }}</a></td>
-                        <td>{{ grant.client_id }}</td>
-                       {% if show_expiration_date %}
-                            <td {% if grant.expired %}style="background-color:#ff8a8a;{% endif %}">
-                                {{ grant.expiration_date }}
-                            </td>
-                        {% endif %}
-                        <td>
-                           <a href="{% url "revoke-permission" grant.client_id %}">Revoke permission</a>*
-                        </td>
-                    </tr>
-                {% endfor %}
-            {% endif %}
-
-        </table>
-
-        {% if grants %}
-            <p>
-            * That permission you granted is not yet active because the application still needs to complete the activation process.
-            </p>
-        {% endif %}
-
-         <p>If you have granted permissions to API applications that do not appear in this list, the permissions will have<br>
-             probably expired or have been canceled by the API application.</p>
-
-    {% else %}
-         <p>You have not granted any permission to any API application.</p>
-         <p>If you have granted permissions to API applications that do not appear here, the permissions will have<br>
-             probably expired or have been canceled by the API application.</p>
-    {% endif %}
-
-
-
-
-{% endblock %}
diff --git a/templates/api/minimal_login.html b/templates/api/minimal_login.html
deleted file mode 100644
index c8a2ef25a..000000000
--- a/templates/api/minimal_login.html
+++ /dev/null
@@ -1,69 +0,0 @@
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-        "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-<meta name='viewport' content='width=device-width, initial-scale=0.65' />
-
-<head>
-    <title>Freesound - login</title>
-    <style>
-        body {
-            font-family: Verdana, sans-serif;
-            font-size: 11px;
-            margin:0px 0px;
-            padding:0px;
-            text-align:center;
-            -webkit-text-size-adjust: 100%;
-        }
-        .container_main {
-            margin: auto;
-            padding:20px;
-            width:440px;
-        }
-        .container {
-            width:400px;
-            background-color: #f3f3f3;
-            border-radius:10px;
-            padding:20px;
-            border: solid 1px #e0e0e0;
-        }
-        input[type=text] {
-            border: solid 1px #e0e0e0;
-            padding: 4px;
-            border-radius: 2px;
-        }
-        input[type=password] {
-            border: solid 1px #e0e0e0;
-            padding: 4px;
-            border-radius: 2px;
-        }
-        .errorlist {
-            text-align:center;
-            vertical-align:top;
-            width:300px;
-            margin-bottom:-10px;
-            list-style-type: none;
-            padding: 0 0 4px 0;
-            color: #bd2d33;
-            font-style: italic;
-            display:inline-block;
-        }
-
-    </style>
-</head>
-<body>
-
-<div class="container_main">
-<div class="container">
-    <img src="/media/images/logo.png"/>
-    <form method="post" action=".">{% csrf_token %}
-        {{form.as_p}}
-        <input type="submit" value="Login" />
-        <input type="hidden" name="next" value="{{ next }}" />
-    </form>
-    <p>Do not have a Freesound account? <a href="{% url "accounts-register" %}">Register here</a></p>
-</div>
-</div>
-
-</body>
-</html>
diff --git a/templates/api/monitor_api_credential.html b/templates/api/monitor_api_credential.html
index 338e260c6..5a3d256fa 100644
--- a/templates/api/monitor_api_credential.html
+++ b/templates/api/monitor_api_credential.html
@@ -1,101 +1,71 @@
-{% extends "accounts/_section.html" %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load static %}
+{% load util %}
 
-{% block head %}
-{{ block.super }}
-<style type="text/css">
-  .axis path,.axis line {
-    fill: none;
-    stroke: #b6b6b6;
-    shape-rendering: crispEdges;
-  }
-  g.legend { 
-    font: 10px sans-serif;
-  }
-  .legend-item{  
-    cursor: pointer;
-  }
-  .api-usage{
-    min-height: 200px;
-  }
-</style>
-{% endblock head %}
-
-{% block title %}
-    Monitor
-{% endblock title %}
+{% block title %}Monitor API credentials{% endblock %}
+{% block page-title %}Freesound API credentials{% endblock %}
 
-{% block content %}
-
-    <h1>API monitor for application: {{ client.name }}</h1>
-    <h3>Number of API requests per day</h3>
+{% block page-content %}
+<div class="v-spacing-top-5">
+    <h5 class="v-spacing-4">Number of daily API requests for credentials "{{ client.name }}"</h5>
     <p>Show data from the last:
         <select id="numDaysSelect" onchange="setNumDays();">
             {% for option, label in n_days_options %}
-                <option value="{{ option }}" {% if option == n_days %}selected="selected"{% endif %}>{{ label }}</option>
+            <option value="{{ option }}" {% if option == n_days %}selected="selected"{% endif %}>{{ label }}</option>
             {% endfor %}
         </select>
-    <br>Acummulated number of requests in selected range: {{ total_in_range }}
-    <br>Acummulated number of requests above 5000 limit in selected range: {{ total_in_range_above_5000 }}
-    <br>Acummulated number of requests above 5000 limit in the previous year ({{ last_year }}): {{ total_previous_year_above_5000 }}
+        <br>Acummulated number of requests in selected range: {{ total_in_range }}
+        <br>Acummulated number of requests above 5000 limit in selected range: {{ total_in_range_above_5000 }}
+        <br>Acummulated number of requests above 5000 limit in the previous year ({{ last_year }}): {{ total_previous_year_above_5000 }}
     </p>
     <div class='api-usage'></div>
+</div>
 
-    <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
-    <script src="https://d3js.org/d3-axis.v1.min.js"></script>
-    <script src="https://d3js.org/d3-array.v1.min.js"></script>
-    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
-    <script src="https://d3js.org/d3-color.v1.min.js"></script>
-    <script src="https://d3js.org/d3-format.v1.min.js"></script>
-    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
-    <script src="https://d3js.org/d3-time.v1.min.js"></script>
-    <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
-    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
-    <script src="https://d3js.org/d3-path.v1.min.js"></script>
-    <script src="https://d3js.org/d3-shape.v1.min.js"></script>
-    <script src="{{media_url}}js/wordcloud2.js"></script>
-    <script src="{{media_url}}js/chart.js" type="text/javascript"></script>
-    <script>
-      var dayLimit = {{ limit }};
-      var data = {{ data|safe }};
-      var n_days = {{ n_days }};
-
-      function setNumDays(){
-          var nDays = document.getElementById("numDaysSelect").value;
-          window.location.href = window.location.pathname + '?n_days=' + nDays;
-      }
+{% endblock %}
 
-      (function() {
-        var usage = [];
-        var limit = [];
-        var max_usage = 0;
+{% block extrabody %}
+<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>    
+<script src="{% static 'bw-frontend/dist/monitor.js' %}"></script>
+<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
+<script src="https://d3js.org/d3-axis.v1.min.js"></script>
+<script src="https://d3js.org/d3-array.v1.min.js"></script>
+<script src="https://d3js.org/d3-collection.v1.min.js"></script>
+<script src="https://d3js.org/d3-color.v1.min.js"></script>
+<script src="https://d3js.org/d3-format.v1.min.js"></script>
+<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
+<script src="https://d3js.org/d3-time.v1.min.js"></script>
+<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
+<script src="https://d3js.org/d3-scale.v1.min.js"></script>
+<script src="https://d3js.org/d3-path.v1.min.js"></script>
+<script src="https://d3js.org/d3-shape.v1.min.js"></script>
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.2/wordcloud2.min.js"></script>
+<script>
+    var dayLimit = {{ limit }};
+    var data = {{ data|safe }};
+    var n_days = {{ n_days }};
+    
+    function setNumDays(){
+        var nDays = document.getElementById("numDaysSelect").value;
+        window.location.href = window.location.pathname + '?n_days=' + nDays;
+    }
+</script>
 
-        for (var i in data) {
-            var date = data[i][0];
-            var count = data[i][1];
-            if (count > max_usage){
-                max_usage = count;
-            }
-            usage.push({day: date, count: count});
-            limit.push({day: date, count: dayLimit});
-        }
-        if (usage.length > 0) {
-            if (max_usage < dayLimit * 0.5){
-                var toShow = [usage];
-                var legend = [{color: 'crimson', name: 'requests/day'}]
-            } else {
-                var toShow = [usage, limit];
-                var legend = [{color: 'crimson', name: 'requests/day'}, {color: 'gray', name: 'daily limit'}]
-            }
-
-            displayCharts('.api-usage', toShow, {
-                attrX: 'day',
-                attrY: 'count',
-                timeFormat: "%a %d",
-                tickEvery: d3.timeDay.every(n_days/10),
-                legendData: legend
-            }, {});
-        }
-      })();
-    </script>
-
-{% endblock content %}
+<style type="text/css">
+    .axis path,.axis line {
+        fill: none;
+        stroke: #b6b6b6;
+        shape-rendering: crispEdges;
+    }
+    g.legend { 
+        font: 10px sans-serif;
+    }
+    .legend-item{  
+        cursor: pointer;
+    }
+    .api-usage{
+        min-height: 200px;
+    }
+</style>
+{% endblock %}
diff --git a/templates_bw/atoms/avatar.html b/templates/atoms/avatar.html
similarity index 100%
rename from templates_bw/atoms/avatar.html
rename to templates/atoms/avatar.html
diff --git a/templates_bw/atoms/icon.html b/templates/atoms/icon.html
similarity index 100%
rename from templates_bw/atoms/icon.html
rename to templates/atoms/icon.html
diff --git a/templates_bw/atoms/stars.html b/templates/atoms/stars.html
similarity index 100%
rename from templates_bw/atoms/stars.html
rename to templates/atoms/stars.html
diff --git a/templates_bw/atoms/tag.html b/templates/atoms/tag.html
similarity index 100%
rename from templates_bw/atoms/tag.html
rename to templates/atoms/tag.html
diff --git a/templates/base.html b/templates/base.html
index 81a949ef4..0dc2777e5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,168 +1,76 @@
-{% load cache %}
-{% load sound_tickets_count %}
-{% load plausible %}
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
-
-    <head>
-
-        {% block head %}
-        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-        <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?" />
-        <meta name="keywords" content="free, sound" />
-        <link rel="stylesheet" type="text/css" href="{{media_url}}css/all.css?v={{ last_restart_date }}" />
-        <!--[if IE 6]><link rel="stylesheet" type="text/css" href="{{media_url}}css/ie6.css?v={{ last_restart_date }}" /><![endif]-->
-        <link rel="icon" href="/favicon.ico" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-        <link rel="manifest" href="/site.webmanifest">
-        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-        <meta name="msapplication-TileColor" content="#00aba9">
-        <meta name="theme-color" content="#ffffff">
-        <title>Freesound - {% block title %}{% endblock %}</title>
-        <script src="{{media_url}}js/jquery-1.5.2.min.js" type="text/javascript"></script>
-        <script src="{{media_url}}js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
-        <script src="{{media_url}}js/jquery.cookie.js" type="text/javascript"></script>
-        <script src="{{media_url}}js/swfobject.js" type="text/javascript"></script>
-        <script src="{{media_url}}js/jquery.watermarkinput.js" type="text/javascript"></script>
-        <script type="text/javascript">
-            var isLoggedIn = {{request.user.is_authenticated|yesno:"true,false"}};
-            var loginUrl = "{% url 'login' %}?next={{request.path}}";
-            $(document).ready(function() {
-                 $("#search input[name=q]").Watermark("search sounds");
-            });
-            function clearWatermark(){
-			   $.Watermark.HideAll()
-			   return true
-			}
-        </script>
-        <script src="{{media_url}}js/freesound.js?v={{ last_restart_date }}" type="text/javascript"></script>
-    	<script src="{{media_url}}js/ajax_utils.js" type="text/javascript"></script>
-        <!-- next couple of lines are used for the HTML player -->
-        <link href='//fonts.googleapis.com/css?family=Inconsolata&v1' rel='stylesheet' type='text/css' />
-        <link rel="stylesheet" type="text/css" href="{{ media_url }}html_player/player.css" />
-        <script src="{{ media_url }}html_player/soundmanager2.js"></script>
-        <script type="text/javascript" src="{{ media_url }}html_player/player.js"></script>
-        {% plausible_scripts %}
-        {% endblock %}
-
-        {% if load_anniversary_content  %}
-            <link rel="stylesheet" type="text/css" href="{{media_url}}css/anniversary.css?v={{ last_restart_date }}" />
-            <script src="{{ media_url }}js/anniversary.js"></script>
-        {% endif %}
-
-    </head>
-
-    <body id="{% block page_css_id %}{% endblock %}" onload="{% block onload %}{% endblock%}" onunload="{% block onunload %}{% endblock %}">
-
-        {% comment %}
-            Below is the code for adding a global banner
-            Place it inside the comment block to hide it
-            On click, the banner will redirect to the URL defined in openSurveyPage() JS function
-
-        <div id="footerBanner" class="floating_banner">
-            <script type="text/javascript" src="{{ media_url }}js/survey_banner.js"></script>
-            <div class="floating_banner_close_button"><a href="javascript:void(0);" onclick="hideFooterBanner();setSurveyVisited(1);">&#10006;</a></div>
-            <div class="floating_banner_contents">
-                <a href="javascript:void(0);" onclick="openSurveyPage();hideFooterBanner();setSurveyVisited(30);">
-                <img src="/media/images/content/freesound-out-of-ordinary-survey-2019.png"/></a>
-            </div>
-        </div>
-        {% endcomment %}
-
-        <div id="header">
-            <div id="account_nav">
-                {% if request.user.is_authenticated %}
-                    {% cache 3600 user_header request.user.id %}
-                    <a href="{% url 'account' request.user.username %}"><div id="account_user"><img src="{{media_url}}images/user_icon.png" alt="user icon" />{{request.user.username}}</div></a>
-                    <a href="{% url 'messages' %}">Messages</a><div class="messages_count" id="message_indicator_{{ num_messages }}"><div>{{ num_messages }}</div></div>
-                    {% if new_tickets_count > -1 %}
-                        <a href="{% url 'tickets-moderation-home' %}">Mod</a> <div class="new_tickets_count" id="new_tickets_indicator_{{ new_tickets_count }}"><div>{{ new_tickets_count }}</div></div>
-                    {% endif %}
-                    {% if num_pending_sounds %}
-                        <a href="{% url 'accounts-pending' %}">Uploads</a> <div class="new_tickets_count" id="pending_indicator_{{ num_pending_sounds }}"><div>{{ num_pending_sounds }}</div></div>
-                    {% endif %}
-                    <a href="{% url 'accounts-edit' %}">Settings</a>
-                    <a href="{% url 'logout' %}?next=/">Log Out</a>
-                    {% endcache %}
-                {% else %}
-                    <a href="{% url 'accounts-register' %}">Register</a>
-                    <a href="{% url 'login' %}?next={% block next %}{{request.path}}{% endblock %}">Log In</a>
-                {% endif %}
-                <a href="{% url 'accounts-upload' %}" id="upload_button"></a>
-            </div>
-
-            <a href="/" id="logo"></a>
-
-            <div id="search">
-                <form method="get" onsubmit="return clearWatermark()" action="{% url 'sounds-search' %}">
-                    <fieldset>
-                       <input type="text" name="q" value="" size="30" />
-                       <input type="submit" value="" id="search_submit" />
-                    </fieldset>
-                </form>
-            </div>
-
-            <ul id="site_nav">
-                {% if request.user.is_authenticated %}
-                    <li class="{% block tab_home_active %}{% endblock %}"><a href="{% url 'accounts-home' %}" id="site_nav_home"><span class="site_nav_icon"></span>Home</a></li>
-                {% endif %}
-                <li class="{% block tab_sounds_active %}{% endblock %}"><a href="{% url 'sounds' %}" id="site_nav_sounds"><span class="site_nav_icon"></span>Sounds</a></li>
-                <li class="{% block tab_forums_active %}{% endblock %}"><a href="{% url 'forums-forums' %}" id="site_nav_forums"><span class="site_nav_icon"></span>Forums</a></li>
-                <li class="{% block tab_people_active %}{% endblock %}"><a href="{% url 'accounts' %}" id="site_nav_people"><span class="site_nav_icon"></span>People</a></li>
-                <li class="{% block tab_help_active %}{% endblock %}"><a href="{% url 'wiki' %}faq/" id="site_nav_help"><span class="site_nav_icon"></span>Help</a></li>
-
-            </ul>
-        </div>
-
-        <div id="wrapper">
-            <div id="container">
-
-            {% if messages %}
-            <ul class="messages">
+{% load static %}
+{% load bw_templatetags %}
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=575, initial-scale=1">
+    <meta name="theme-color" content="#000000">
+    <title>Freesound - {% block title %}{% endblock %}</title>
+    <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?">
+    <meta name="keywords" content="free, sound">
+    {% block extrahead %}
+    {% endblock %}
+    {% if request.user.profile.ui_theme_preference == 'l' %}
+    <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index.css' %}" data-forced-theme="yes">
+    {% elif request.user.profile.ui_theme_preference == 'd' %}
+    <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index-dark.css' %}" data-forced-theme="yes">
+    {% else %}
+      {% if system_prefers_dark_theme %}
+      <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index-dark.css' %}">
+      {% else %}
+      <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index.css' %}">
+      {% endif %}
+    {% endif %}
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    {% include 'accounts/modal_login.html' %}
+    {% include 'accounts/modal_login_problems.html' %}
+    {% include 'accounts/modal_registration_feedback.html' %}
+    {% include 'molecules/confirmation_modal.html' %}
+    <div id="genericModalWrapper"></div>
+    {% include 'molecules/toast.html' %}
+    <div class="notifications-wrapper"></div>
+    {% if messages %}
+        <div id="django-messages-content" class="display-none">
+            <ul>
                 {% for message in messages %}
-                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|safe }}</li>
+                    <li><span class="h-spacing-1">·</span>{{ message|safe }}</li>
                 {% endfor %}
             </ul>
-            {% endif %}
-
-            {% block content %}
-            {% endblock %}
-
-            </div>
         </div>
-
-        <div id="footer_wrapper">
-            <div id="footer">
-                <div id="cookie-bar">
-                    <div style="float:left;max-width:90%;">
-                        <p>
-                            In our website we only use our own technical cookies for allowing you to access and use the Freesound platform (necessary cookies).
-                            <br>Click <a href="/help/cookies_policy">here</a> for more information.
-                        </p>
-                    </div>
-                    <div style="float:right; margin-top:10px;margin-right:10px;">
-                        <button id="cookie-accept">Ok</button>
-                    </div>
-                    <br class="clear">
-
-                </div>
-                <div id="footer_links">
-                    <a href="/help/developers/">Developers</a>
-                    <a href="https://blog.freesound.org/">Blog</a>
-                    <a href="/help/about/">About</a>
-                    <a href="/help/tos_web/">Terms of use</a>
-                    <a href="/help/privacy/">Privacy</a>
-                    <a href="/help/cookies_policy/">Cookies</a>
-                </div>
-                <div id="footer_credits">
-                    Design by <a href="http://www.pixelshell.com">Pixelshell</a>. Code by <a href="https://www.upf.edu/web/mtg">MTG (UPF)</a>. Some Rights Reserved.
-                </div>
-            </div>
-        </div>
-
-        <div id="fsmodal" class="modal"></div>
-    </body>
-    {% block extra_headers %}
+    {% endif %}
+    <div class="bw-page" aria-hidden="false">
+    {% block navbar %}
+        {% comment %}This block can be overriden by pages that use a different navbar{% endcomment %}
+        {% include 'molecules/navbar.html' %}
+    {% endblock %}
+    {% block content %}
+    {% endblock %}
+    {% include 'molecules/footer.html' %}
+    </div>
+    {% bw_plausible_scripts %}
+    <script>
+        {% if request.user.is_authenticated %}
+        document.cookie = "preferSpectrogram={{request.user.profile.prefer_spectrograms|yesno}};path=/";
+        document.cookie = "disallowSimultaneousAudioPlayback={{request.user.profile.allow_simultaneous_playback|yesno:'no,yes'}};path=/"
+        {% else %}
+        document.cookie = "preferSpectrogram=no;path=/";
+        document.cookie = "disallowSimultaneousAudioPlayback=no;path=/"
+        {% endif %}
+        const siteWidth = 580;  // Minimum expected width. If screen is smaller, scale website.
+        const scale = window.innerWidth / siteWidth;
+        if (scale < 1){
+            document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + siteWidth + ', initial-scale=' + scale);
+        }
+        const userIsAuthenticated = {{ request.user.is_authenticated|yesno:'true,false' }};
+    </script>
+    <script src="{% static 'bw-frontend/dist/index.js' %}"></script>
+    {% block extrabody %}
     {% endblock %}
+  </body>
 </html>
diff --git a/templates/bookmarks/bookmark_form.html b/templates/bookmarks/bookmark_form.html
deleted file mode 100644
index 43ae9e8ea..000000000
--- a/templates/bookmarks/bookmark_form.html
+++ /dev/null
@@ -1,92 +0,0 @@
-{% if not request.user.is_authenticated %}
-    <p>Please, login to Freesound before bookmarking any sounds.</p>
-{% else %}
-
-<script type="text/javascript">
-    
-    function post_bookmark(id)
-    {
-        $("#id_" + id.toString() + "-name").attr('disabled','disabled')
-        $("#id_" + id.toString() + "-category").attr('disabled','disabled')
-        $("#id_" + id.toString() + "-new_category_name").attr('disabled','disabled')
-        
-        $.ajax({
-            type: 'POST',
-            url: '{{ add_bookmark_url }}' + id.toString() + '/',
-            data: {
-                name: $("#id_" + id.toString() + "-name").val(),
-                category: $("#id_" + id.toString() + "-category").val(),
-                new_category_name: $("#id_" + id.toString() + "-new_category_name").val(),
-                sound_id: $("#id_" + id.toString() + "-sound_id").val()
-            },
-                success: function(data) {
-                    display_bookmark_feedback(id,data);
-                },
-                error: function(data) {
-                    display_error_feedback(id,data);
-                },
-
-            });
-    }
-
-    function display_bookmark_feedback(id, data){
-        $("#bookmark_info_message_" + id.toString()).html("Bookmark correctly added!")
-        $("#bookmark_info_message_" + id.toString()).show()
-        setTimeout(function() {
-            $("#bookmark_info_message_" + id.toString()).fadeOut('slow')
-            show_hide_bookmark_form(id)
-        }, 2000);
-    }
-    
-    function display_error_feedback(id, data){
-        $("#bookmark_info_message_" + id.toString()).html("Bookmark could not be added, some error occurred.")
-        $("#bookmark_info_message_" + id.toString()).show()
-        setTimeout(function() {
-            $("#bookmark_info_message_" + id.toString()).fadeOut('slow')
-            show_hide_bookmark_form(id)
-        }, 2000);
-    }
-
-    function toggleVisibility(select, element) {
-        if (select.value == '0'){
-            // No category is selected, show the new category name input
-            element.show();
-        } else {
-            element.hide();
-        }
-    }
-
-    $(document).ready( function() {
-        var selectElement = $("#id_{{ sound_id }}-category");
-        var newCategoryElementParent = $("#id_{{ sound_id }}-new_category_name").parent()
-        toggleVisibility(selectElement, newCategoryElementParent)
-        selectElement.change(function (evt) {
-            toggleVisibility(evt.target, newCategoryElementParent)
-        });
-    });
-</script>
-	
-<div class = "bookmark_info_message" id="bookmark_info_message_{{sound_id}}" style="display:none"></div>
-<p>
-    {% if bookmarks %}
-    This sound is already in your bookmarks{% if not categories_aready_containing_sound %}.{% endif %}
-        {% if categories_aready_containing_sound %}
-            under the categories:
-            {% for cat in categories_aready_containing_sound %}
-                <strong>{{cat.name}}</strong>{% if forloop.last %}.{% else %}{% if forloop.revcounter == 2%} and {% else %}, {% endif %}{% endif %}
-            {% endfor %}
-        {% endif %}
-    {% endif %}
-</p>
-
-{{form.as_p}}
-
-<p>
-    <br style="clear"/>
-    <a href="javascript:void(0)"  title="Close" onclick="show_hide_bookmark_form({{sound_id}})">Close</a>
-    <input type="button" onclick="post_bookmark({{sound_id}})" style="float:right" value="Add bookmark!"/>
-    <br style="clear"/>
-</p>
-
-
-{% endif %}
\ No newline at end of file
diff --git a/templates/bookmarks/bookmarks.html b/templates/bookmarks/bookmarks.html
index a32f75d80..d6aa3a45b 100644
--- a/templates/bookmarks/bookmarks.html
+++ b/templates/bookmarks/bookmarks.html
@@ -1,89 +1,55 @@
-{% extends "accounts/_notab.html" %}
-
-
-{% load paginator %}
-{% block title %}{% if is_owner %}Your bookmarks{% else %}Bookmarks by {{user.username}}{% endif %}{% endblock %}
-
-{% block tab_home_active %}{% if is_owner %}active_tab{% endif %}{% endblock %}
-{% block tab_people_active %}{% if not is_owner %}active_tab{% endif %}{% endblock %}
-
-{% block section_content %}
-
-
-<h1>{% if is_owner %}Your bookmarks{% else %}Bookmarks by <a href="{% url "account" user.username%}">{{user.username}}</a>{% endif %}</h1>
-
-<div id="content">
-
-	<div id="latest_sounds" class="content_box">
-
-    {% if category %}
-        <h3>Bookmarks in "{{category.name}}"</h3>
-    {% else %}
-	<h3>Uncategorized bookmarks</h3>
-    {% endif %}
-
-    {% if page.object_list %}
-
-	{% show_paginator paginator page current_page request "bookmark" %}
-
-	<div class="bookmark_list_container">
-	{% for bookmark in page.object_list %}
-
-	    <div>
-		{% with bookmark.sound as sound%}
-		    <div class="bookmark_player">
-			{% include "sounds/player_small.html" %}
-		    </div>
-		{% endwith %}
-
-		<div class="bookmark_info">
-
-		    <a href="{% url "sound" bookmark.sound.user.username bookmark.sound.id %}">{{bookmark.sound_name|truncatechars:50}}</a> by <a href="{% url "account" bookmark.sound.user.username %}">{{bookmark.sound.user.username}}</a>
-
-		    {% if is_owner %}
-			<a href="{% url "delete-bookmark" bookmark.id %}?next={{request.path}}&page={{current_page}}"><img  style="vertical-align: bottom;" src="{{media_url}}images/cancel.png" width="16" height="16" alt="Delete bookmark"/></a>
-		    {% endif %}
-
-		</div>
-	    </div>
-
-	{% endfor %}
-	</div>
-	{% show_paginator paginator page current_page request "bookmark" %}
-
-    {% else %}
-	<p>
-	    There are no {% if not category %}uncategorized{% endif %} bookmarks {% if category %}in this category{% endif %}
-	</p>
-    {% endif %}
-
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
+{% load display_sound %}
+{% load util %}
+
+{% block title %}{% if is_owner %}Bookmarks{% else %}Bookmarks by {{user.username}}{% endif %}{% endblock %}
+{% block page-title %}{% if is_owner %}Bookmarks{% else %}Bookmarks by <a href="{% url 'account' user.username %}">{{user.username}}</a>{% endif %}{% endblock %}
+
+{% block page-content %}
+    <div class="v-spacing-top-5">
+        <div class="row no-gutters">
+            <div class="col-lg-3 offset-lg-1 order-lg-last v-spacing-3">
+                <h4>Bookmark categories</h4>
+                <div class="v-spacing-top-3">
+                {% if bookmark_categories %}
+                    <ul class="list-style-type-none">
+                        <li><a href="{% url "bookmarks-for-user" user.username %}" {% if not category %}style="font-weight:bold"{% endif %} aria-label="Category: Uncategorized">Uncategorized</a> <span class="text-grey"> · {{n_uncat|bw_intcomma}} bookmark{{ n_uncat|pluralize }}</span></li>
+                        {% for cat in bookmark_categories %}
+                            <li><a href="{% url "bookmarks-for-user-for-category" user.username cat.id %}" {% if category.id == cat.id %}style="font-weight:bold"{% endif %} aria-label="Category: {{cat.name}}">{{cat.name}}</a> <span class="text-grey"> · {{cat.num_bookmarks|bw_intcomma}} bookmark{{ cat.num_bookmarks|pluralize }}</span>
+                            {% if is_owner %}
+                            <a class="cursor-pointer h-spacing-left-1" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to remove this bookmark category?" data-modal-confirmation-help-text="Note that all the bookmarks inside this category will also be removed" data-modal-confirmation-url="{% url "delete-bookmark-category" cat.id %}{% if cat.id != category.id %}?next={{request.path}}&page={{current_page}}{% endif %}" title="Remove bookmark category" aria-label="Remove bookmark category">{% bw_icon 'trash' %}</a>
+                            {% endif %}</li>
+                        {% endfor %}
+                    </ul>
+                {% else %}
+                    <div class="text-grey">
+                    {% if is_owner %}You haven't created any bookmark categories yet{% else %}<a href="{% url "account" user.username%}">{{user.username}}</a> hasn't created any bookmark categories yet{% endif %}
+                    </div>
+                {% endif %}
+                </div>
+            </div>
+            <div class="col-lg-8">
+                <h4><span class="text-light-grey">Category:</span> {% if category %}{{category.name}}{% else %}Uncategorized{% endif %} </h4>
+                <div class="v-spacing-top-3">
+                {% if page.object_list %}
+                    <div class="row">
+                        {% for bookmark in page.object_list %}
+                            <div class="col-6 col-md-4">
+                                {% display_sound_small bookmark.sound %}                     
+                                {% if is_owner %}
+                                    <div class="right v-spacing-4 v-spacing-top-negative-2"><a class="cursor-pointer bw-link--grey" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to remove this bookmark from '{{bookmark.category_name_or_uncategorized}}'?" data-modal-confirmation-url="{% url "delete-bookmark" bookmark.id %}?next={{request.path}}&page={{current_page}}" title="Remove from bookmarks" aria-label="Remove from bookmarks">{% bw_icon 'trash' %} Remove bookmark</a></div>
+                                {% endif %}
+                            </div>
+                        {% endfor %}
+                    </div>
+                {% else %}
+                    <div class="text-grey">There are no {% if not category %}uncategorized{% endif %} bookmarks {% if category %}in this category{% endif %} &#128543</div>
+                {% endif %}
+                {% bw_paginator paginator page current_page request "bookmark" %}
+                </div>
+            </div>
+        </div>
     </div>
-</div><!-- #content -->
-
-<div id="sidebar">
-
-    <div id="bookmark_categories" class="content_box">
-        <h3>{% if is_owner %}My{% else %}{{user.username}}'s{% endif %} bookmark categories</h3>
-
-	{% if bookmark_categories %}
-	    <ul>
-		<li><a href="{% url "bookmarks-for-user" user.username %}" {% if not category %}style="font-weight:bold"{% endif %}>Uncategorized</a> ({{n_uncat}} bookmark{{ n_uncat|pluralize }})</li>
-
-	    {% for cat in bookmark_categories %}
-		<li><a href="{% url "bookmarks-for-user-for-category" user.username cat.id %}" {% if category.id == cat.id %}style="font-weight:bold"{% endif %}>{{cat.name}}</a> ({{cat.num_bookmarks}} bookmark{{ cat.num_bookmarks|pluralize }})
-
-		{% if is_owner %}<a href="{% url "delete-bookmark-category" cat.id %}{% if cat.id != category.id %}?next={{request.path}}&page={{current_page}}{% endif %}"><img  style="vertical-align: bottom;" src="{{media_url}}images/cancel.png" width="16" height="16" alt="Delete {{cat.name}} category"/></a>{% endif %}</li>
-
-	    {% endfor %}
-	    </ul>
-	{% else %}
-	    <p>
-		{% if is_owner %}You haven't created any bookmark categories yet{% else %}<a href="{% url "account" user.username%}">{{user.username}}</a> hasn't created any bookmark categories yet{% endif %}
-	    </p>
-	{% endif %}
-
-    </div><!-- #bookmark_categories -->
-</div><!-- #sidebar -->
-
-<br class="clear"/><!-- Need a clearing element for some reason here.. -->
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/bookmarks/modal_bookmark_sound.html b/templates/bookmarks/modal_bookmark_sound.html
similarity index 100%
rename from templates_bw/bookmarks/modal_bookmark_sound.html
rename to templates/bookmarks/modal_bookmark_sound.html
diff --git a/templates/donations/donate.html b/templates/donations/donate.html
index 5967c032b..61de6f6ba 100644
--- a/templates/donations/donate.html
+++ b/templates/donations/donate.html
@@ -1,178 +1,64 @@
-{% extends "base.html" %}
-{% load absurl %}
-{% block title %}Donate{% endblock %}
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-
-  <h1>Donations</h1>
-
-    <h3>Why should I donate to Freesound?</h3>
-    <ul>
-        <li style="margin-top: 8px"><b>We are growing and need more resources</b>.
-            Freesound was <a href="https://freesound.org/help/about/" target="_blank">started in 2005</a>
-            at the <a href="https://www.upf.edu/web/mtg" target="_blank">Music Technology Group</a>
-            and it has always been developed and maintained here.
-            We need your donations in order to be able dedicate more resources to Freesound and not only
-            maintain it but also make it better: add new features, improve existing ones, etc.
-        </li>
-        <li style="margin-top: 8px"><b>We don't like ads</b>.
-            Because of the nature of Freesound and the philosophy
-            of openness, sharing and reuse that we promote, we think that
-            the sustainability model that best fits our case
-            is one based on user donations like Wikipedia.
-        </li>
-        <li style="margin-top: 8px"><b>It doesn't take a large donation to help us</b>.
-            There are many users who <a href="https://blog.freesound.org/?p=666" target="_blank">
-            regularly download content from Freesound</a>.
-            If many of us contribute, donating just a little bit will be enough to keep Freesound in good shape.
-            Ah, and if you donate you'll appear in this glorious <a href="{% url 'donors' %}">list of Freesound donors</a> :)
-        </li>
-    </ul>
-
-    <p>
-        In case you want to donate, please use the form below.
-        If you want more information about Freesound and its sustainability, check out this <a href="/forum/freesound-project/40188/">forum
-        thread</a>.
-        <br>Thanks for supporting Freesound!
-    </p>
-
-    <!-- donations -->
-    <div id="donation_form_wrapper">
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
 
-      <div id="donation_form">
-        <form method="post" action="{% url 'donation-session-paypal' %}">
-          <ul class="errorlist nonfield"></ul>
-          <ul style="list-style-type: none;padding-left:0px;line-height: 18px;">
-          {% csrf_token %}
-
-          <p>
-            Please choose the <b>name</b> that will appear with the donation:
-          </p>
-          {% for choice in form.donation_type %}
-          <li>
-              <input type="radio"
-                     name="{{ form.donation_type.name }}"
-                     value="{{ choice.data.value }}"
-                     id="id_{{ form.donation_type.name }}_{{ forloop.counter0 }}"
-                     {% if form.donation_type.value == choice.data.value %}
-                         checked='checked'
-                     {% endif %}/>
-              {{ choice.choice_label }}
-              {% if choice.data.value == '2' %} {{form.name_option}} {% endif %}
-          </li>
-          {% endfor %}
-          </ul>
-          <p>{{form.amount.label_tag }}
-            <span class="currency">&euro;</span>
-            {{ form.amount}}
-          </p>
-          <p>
-            {{ form.recurring.label_tag }}
-            {{ form.recurring}}
-          </p>
-          <p>
-            {{ form.show_amount.label_tag }}
-            {{ form.show_amount}}
-          </p>
-          <button class="donation_button_paypal">Donate with</button>
-          <button class="donation_button_stripe">Donate with Credit Card</button>
-        </form>
-      </div>
+{% block title %}Donate{% endblock %}
+{% block page-title %}Donate{% endblock %}
+
+{% block page-content %}
+    <div class="bw-donate">
+        <h3 class="text-red">Why should I donate to Freesound?</h3>
+        <div class="row v-spacing-top-4">
+            <div class="col-md-4 v-spacing-2">
+                <b>{% bw_icon 'check' %}We are growing and need more resources</b>.
+                    Freesound was <a href="https://freesound.org/help/about/" target="_blank">started in 2005</a>
+                    at the <a href="https://www.upf.edu/web/mtg" target="_blank">Music Technology Group</a>
+                    and it has always been developed and maintained here.
+                    We need your donations in order to be able dedicate more resources to Freesound and not only
+                    maintain it but also make it better: add new features, improve existing ones, etc.
+            </div>
+            <div class="col-md-4 v-spacing-2">
+                <b>{% bw_icon 'check' %}We don't like ads</b>.
+                    Because of the nature of Freesound and the philosophy
+                    of openness, sharing and reuse that we promote, we think that
+                    the sustainability model that best fits our case
+                    is one based on user donations like Wikipedia.
+            </div>
+            <div class="col-md-4 v-spacing-2">
+                <b>{% bw_icon 'check' %}It doesn't take a large donation to help us</b>.
+                    There are many users who <a href="https://blog.freesound.org/?s=numbers" target="_blank">
+                    regularly download content from Freesound</a>.
+                    If many of us contribute, donating just a little bit will be enough to keep Freesound in good shape.
+                    Ah, and if you donate you'll appear in this glorious <a href="{% url 'donors' %}">list of Freesound donors</a>.
+            </div>
+        </div>
+        <div class="row v-spacing-top-2">
+            <div class="col-md-12">
+                In case you want to donate, please use the form below.
+                If you want more information about Freesound and its sustainability, check out this <a href="/forum/freesound-project/40188/">forum
+                thread</a>. <br>Thanks for supporting Freesound!
+            </div>
+        </div>
+        <div class="row v-spacing-top-4">
+            <div class="col-md-6 offset-md-3">
+                <form id="donation_form" class="bw-form" method="post" action="{% url 'donation-session-paypal' %}">{% csrf_token %}
+                    <ul class="errorlist v-spacing-3"></ul>
+                    {{ form }}
+                    <button id="donation_button_credit_card" class="btn-primary v-spacing-1 v-spacing-top-4 donation_button_stripe" data-stripe-key="{{ stripe_key }}" data-stripe-url="{% url 'donation-session-stripe' %}">Donate with credit card</button>
+                    <button id="donation_button_paypal" class="btn-blue v-spacing-5 donation_button_paypal">Donate with <i>PayPal</i></button>
+                </form>
+            </div>
+        </div>
+        <p>
+            <b>Note</b>: donations are managed through the <a href="https://www.upf.edu/web/phonos" target="_blank"> Phonos Foundation</a>,
+                an institution linked to the <a href="https://www.upf.edu/web/mtg" target="_blank">Music
+                Technology Group</a> for the promotion of social and cultural initiatives.
+            Currently, we only accept donations via PayPal and international credit cards.
+        </p>
     </div>
-
-    <p>
-        <b>Note</b>: donations are managed through the <a href="https://www.upf.edu/web/phonos" target="_blank"> Phonos Foundation</a>,
-            an institution linked to the <a href="https://www.upf.edu/web/mtg" target="_blank">Music
-            Technology Group</a> for the promotion of social and cultural initiatives.
-        Currently, we only accept donations via PayPal and international credit cards.
-    </p>
-
-<script src="https://js.stripe.com/v3"></script>
-    <script type="text/javascript">
-      $(document).ready(function (){
-
-        var form = $('#donation_form form');
-        $('.donation_button_paypal').click(function(e) {
-          $.ajax({
-            type: form.attr('method'),
-            url: form.attr('action'),
-            data: form.serialize(), // serializes the form's elements.
-            success: function(data)
-            {
-              if (data.errors != null) {
-                  $('.errorlist').html("");
-                $.each(data.errors['__all__'], function (index, error) {
-                  $('.errorlist').append("<li>"+error+"</li>");
-                });
-              } else {
-                paypalForm = $('<form />', {
-                  action: data.url,
-                  method: "POST",
-                  style: 'display: none;'
-                });
-                $.each(data.params,function (name, value) {
-                  $('<input />', {
-                    type: 'hidden',
-                    name: name,
-                    value: value
-                  }).appendTo(paypalForm);
-                });
-                paypalForm.appendTo('body').submit();
-              }
-            }
-          });
-          e.preventDefault(); // avoid to execute the actual submit of the form.
-        });
-      
-        var stripe = Stripe('{{stripe_key}}');
-        var amount = $('#id_amount');
-
-        $('.donation_button_stripe').click(function(e) {
-          $.ajax({
-            type: form.attr('method'),
-            url: "{% url 'donation-session-stripe' %}",
-            data: form.serialize(), // serializes the form's elements.
-            success: function(data)
-            {
-              if (data.errors != null) {
-                  $('.errorlist').html("");
-                $.each(data.errors['__all__'], function (index, error) {
-                  $('.errorlist').append("<li>"+error+"</li>");
-                });
-              } else {
-                session=data.session_id;
-                console.log(session)
-                stripe.redirectToCheckout({
-                    sessionId: session
-                  }).then(function (result) {
-                    // Error calling stripe api
-                    $('.errorlist').html("");
-                    $('.errorlist').append("<li>Error calling stripe API, please retry later.</li>");
-                });
-               }
-            }
-          });
-          e.preventDefault(); // avoid to execute the actual submit of the form.
-       });
-        $('#id_recurring').change(function(e) {
-            if ($('#id_recurring').is(':checked')){
-                // Disable credit card donation button
-                $('.donation_button_stripe').attr('disabled', true);
-            } else {
-                // Enable credit card donation button
-                $('.donation_button_stripe').attr('disabled', false);
-            }
-        });
-      });
-    </script>
-
-{% block section_content %}
-
 {% endblock %}
-</div> <!-- END of Content area -->
-
-<br class="clear" />
 
+{% block extrabody %}
+<script src="https://js.stripe.com/v3"></script>
+<script src="{% static 'bw-frontend/dist/donate.js' %}"></script>
 {% endblock %}
-
-
diff --git a/templates/donations/donation_list.html b/templates/donations/donation_list.html
index a945b7d6a..11c1b7da3 100644
--- a/templates/donations/donation_list.html
+++ b/templates/donations/donation_list.html
@@ -1,46 +1,58 @@
-{% extends "base.html" %}
-{% load paginator %}
-{% load util %}
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
+{% load display_user %}
+
 {% block title %}Donations{% endblock %}
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
+{% block page-title %}List of donations{% endblock %}
 
-  <h1>Donations</h1>
-    <div class="donations-list stream_box">
-      <h3>List of donations</h3>
-      <a class="link-to-section" href="{% url 'donate' %}">Make a donation</a>
-      {% regroup object_list by created|date:"F, Y" as donations %}
-      {% for donation_m in donations %}
-      <div class="donations-title">{{donation_m.grouper}}</div>
-      {% for donation in donation_m.list%}
-      <div class="donation-item">
-        <div class="donation-item-left"><img src="{% if donation.is_anonymous %}/media/images/40x40_avatar.png{% else %}{{ donation.user.profile.locations.avatar.M.url}}{% endif %}"></div>
-        <div class="donation-item-right">
-          <p>
-          {% if donation.is_anonymous %}
-          {{donation.display_name|truncate_string:12}}
-          {% else %}
-          {% if donation.user %}
-          <a href="{% url "account" donation.user.username %}">{{ donation.user.username|truncate_string:12 }}</a>
-          {% endif %} 
-          {% endif %} 
-          <br /> {% if donation.display_amount %}{{donation.amount}} {{donation.currency}}{% endif %}
-          </p>
+{% block page-content %}
+    <div class="bw-donate">
+        {% regroup object_list by created|date:"F, Y" as donations %}
+        {% for donation_m in donations %}
+            <h3 class="text-red v-spacing-top-4">{{donation_m.grouper}}</h3>
+            <div class="row v-spacing-top-4">
+            {% for donation in donation_m.list%}
+                <div class="col-md-4 col-lg-2 v-spacing-2">
+                    <div class="row middle">
+                        <div class="col-md-3 col-1">
+                            {% if donation.is_anonymous %}
+                                {% bw_user_avatar "_avatar.png" "anonymous"  %}
+                            {% else %}
+                                {% if donation.user %}
+                                    {% bw_user_avatar donation.user.profile.locations.avatar.XL.url donation.user.username %}
+                                {% else %}
+                                    {% bw_user_avatar "_avatar.png" donation.display_name %}
+                                {% endif %}
+                            {% endif %}
+                        </div>
+                        <div class="col-md-8 col-11 padding-left-3">
+                            {% if donation.is_anonymous %}
+                                <div class="ellipsis text-grey">
+                                    {{donation.display_name}}
+                                </div>
+                            {% else %}
+                                {% if donation.user %}
+                                    <div class="ellipsis">
+                                        <a href="{% url "account" donation.user.username %}">{{ donation.user.username }}</a>
+                                    </div>
+                                {% else %}
+                                    <div class="ellipsis">
+                                        {{donation.display_name}}
+                                    </div>
+                                {% endif %}
+                            {% endif %}
+                            {% if donation.display_amount %}
+                                <div class="ellipsis text-light-grey">{{donation.amount}} {{donation.currency|lower}}</div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+            </div>
+        {% endfor %}
+        <div class="v-spacing-top-5 v-spacing-5">
+            {% bw_paginator page_obj.paginator page_obj page_obj.number request "donations" %}
         </div>
-      </div>
-    {% endfor %}
-    {% endfor %}
-    </div>
-    <div style="clear:both;padding-top: 15px;">
-    {% show_paginator page_obj.paginator page_obj page_obj.number request "donations" %}
     </div>
-{% block section_content %}
-
-{% endblock %}
-</div> <!-- END of Content area -->
-
-<br class="clear" />
-
 {% endblock %}
-
-
diff --git a/templates_bw/donations/modal_after_download_donation_request.html b/templates/donations/modal_after_download_donation_request.html
similarity index 100%
rename from templates_bw/donations/modal_after_download_donation_request.html
rename to templates/donations/modal_after_download_donation_request.html
diff --git a/templates_bw/emails/email_activation.txt b/templates/emails/email_activation.txt
similarity index 100%
rename from templates_bw/emails/email_activation.txt
rename to templates/emails/email_activation.txt
diff --git a/templates_bw/emails/email_base.txt b/templates/emails/email_base.txt
similarity index 100%
rename from templates_bw/emails/email_base.txt
rename to templates/emails/email_base.txt
diff --git a/templates_bw/emails/email_donation.txt b/templates/emails/email_donation.txt
similarity index 100%
rename from templates_bw/emails/email_donation.txt
rename to templates/emails/email_donation.txt
diff --git a/templates_bw/emails/email_donation_reminder.txt b/templates/emails/email_donation_reminder.txt
similarity index 100%
rename from templates_bw/emails/email_donation_reminder.txt
rename to templates/emails/email_donation_reminder.txt
diff --git a/templates_bw/emails/email_donation_request.txt b/templates/emails/email_donation_request.txt
similarity index 100%
rename from templates_bw/emails/email_donation_request.txt
rename to templates/emails/email_donation_request.txt
diff --git a/templates_bw/emails/email_flag.txt b/templates/emails/email_flag.txt
similarity index 100%
rename from templates_bw/emails/email_flag.txt
rename to templates/emails/email_flag.txt
diff --git a/templates_bw/emails/email_new_comment.txt b/templates/emails/email_new_comment.txt
similarity index 100%
rename from templates_bw/emails/email_new_comment.txt
rename to templates/emails/email_new_comment.txt
diff --git a/templates_bw/emails/email_new_message.txt b/templates/emails/email_new_message.txt
similarity index 100%
rename from templates_bw/emails/email_new_message.txt
rename to templates/emails/email_new_message.txt
diff --git a/templates_bw/emails/email_new_post_notification.txt b/templates/emails/email_new_post_notification.txt
similarity index 100%
rename from templates_bw/emails/email_new_post_notification.txt
rename to templates/emails/email_new_post_notification.txt
diff --git a/templates_bw/emails/email_notification_approved.txt b/templates/emails/email_notification_approved.txt
similarity index 100%
rename from templates_bw/emails/email_notification_approved.txt
rename to templates/emails/email_notification_approved.txt
diff --git a/templates_bw/emails/email_notification_approved_but.txt b/templates/emails/email_notification_approved_but.txt
similarity index 100%
rename from templates_bw/emails/email_notification_approved_but.txt
rename to templates/emails/email_notification_approved_but.txt
diff --git a/templates_bw/emails/email_notification_deleted.txt b/templates/emails/email_notification_deleted.txt
similarity index 100%
rename from templates_bw/emails/email_notification_deleted.txt
rename to templates/emails/email_notification_deleted.txt
diff --git a/templates_bw/emails/email_notification_question.txt b/templates/emails/email_notification_question.txt
similarity index 100%
rename from templates_bw/emails/email_notification_question.txt
rename to templates/emails/email_notification_question.txt
diff --git a/templates_bw/emails/email_notification_updated.txt b/templates/emails/email_notification_updated.txt
similarity index 100%
rename from templates_bw/emails/email_notification_updated.txt
rename to templates/emails/email_notification_updated.txt
diff --git a/templates_bw/emails/email_notification_whitelisted.txt b/templates/emails/email_notification_whitelisted.txt
similarity index 100%
rename from templates_bw/emails/email_notification_whitelisted.txt
rename to templates/emails/email_notification_whitelisted.txt
diff --git a/templates_bw/emails/email_opt_out_text.txt b/templates/emails/email_opt_out_text.txt
similarity index 100%
rename from templates_bw/emails/email_opt_out_text.txt
rename to templates/emails/email_opt_out_text.txt
diff --git a/templates_bw/emails/email_random_sound.txt b/templates/emails/email_random_sound.txt
similarity index 100%
rename from templates_bw/emails/email_random_sound.txt
rename to templates/emails/email_random_sound.txt
diff --git a/templates_bw/emails/email_remix_update.txt b/templates/emails/email_remix_update.txt
similarity index 100%
rename from templates_bw/emails/email_remix_update.txt
rename to templates/emails/email_remix_update.txt
diff --git a/templates_bw/emails/email_report_blocked_spammer_admins.txt b/templates/emails/email_report_blocked_spammer_admins.txt
similarity index 100%
rename from templates_bw/emails/email_report_blocked_spammer_admins.txt
rename to templates/emails/email_report_blocked_spammer_admins.txt
diff --git a/templates_bw/emails/email_report_spammer_admins.txt b/templates/emails/email_report_spammer_admins.txt
similarity index 100%
rename from templates_bw/emails/email_report_spammer_admins.txt
rename to templates/emails/email_report_spammer_admins.txt
diff --git a/templates_bw/emails/email_reset_complete_old_address_notification.txt b/templates/emails/email_reset_complete_old_address_notification.txt
similarity index 100%
rename from templates_bw/emails/email_reset_complete_old_address_notification.txt
rename to templates/emails/email_reset_complete_old_address_notification.txt
diff --git a/templates_bw/emails/email_reset_email.txt b/templates/emails/email_reset_email.txt
similarity index 100%
rename from templates_bw/emails/email_reset_email.txt
rename to templates/emails/email_reset_email.txt
diff --git a/templates_bw/emails/email_stream.txt b/templates/emails/email_stream.txt
similarity index 100%
rename from templates_bw/emails/email_stream.txt
rename to templates/emails/email_stream.txt
diff --git a/templates_bw/emails/email_support.txt b/templates/emails/email_support.txt
similarity index 100%
rename from templates_bw/emails/email_support.txt
rename to templates/emails/email_support.txt
diff --git a/templates_bw/emails/email_username_reminder.txt b/templates/emails/email_username_reminder.txt
similarity index 100%
rename from templates_bw/emails/email_username_reminder.txt
rename to templates/emails/email_username_reminder.txt
diff --git a/templates_bw/emails/password_reset_email.html b/templates/emails/password_reset_email.html
similarity index 100%
rename from templates_bw/emails/password_reset_email.html
rename to templates/emails/password_reset_email.html
diff --git a/templates_bw/emails/password_reset_subject.txt b/templates/emails/password_reset_subject.txt
similarity index 100%
rename from templates_bw/emails/password_reset_subject.txt
rename to templates/emails/password_reset_subject.txt
diff --git a/templates_bw/embeds/geotags_box_iframe.html b/templates/embeds/geotags_box_iframe.html
similarity index 100%
rename from templates_bw/embeds/geotags_box_iframe.html
rename to templates/embeds/geotags_box_iframe.html
diff --git a/templates_bw/embeds/geotags_infowindow.html b/templates/embeds/geotags_infowindow.html
similarity index 100%
rename from templates_bw/embeds/geotags_infowindow.html
rename to templates/embeds/geotags_infowindow.html
diff --git a/templates_bw/embeds/player_small.html b/templates/embeds/player_small.html
similarity index 100%
rename from templates_bw/embeds/player_small.html
rename to templates/embeds/player_small.html
diff --git a/templates_bw/embeds/sound_iframe.html b/templates/embeds/sound_iframe.html
similarity index 100%
rename from templates_bw/embeds/sound_iframe.html
rename to templates/embeds/sound_iframe.html
diff --git a/templates_bw/embeds/sound_metadata.html b/templates/embeds/sound_metadata.html
similarity index 100%
rename from templates_bw/embeds/sound_metadata.html
rename to templates/embeds/sound_metadata.html
diff --git a/templates_bw/embeds/sound_oembed.xml b/templates/embeds/sound_oembed.xml
similarity index 100%
rename from templates_bw/embeds/sound_oembed.xml
rename to templates/embeds/sound_oembed.xml
diff --git a/templates_bw/embeds/sound_widget_license.html b/templates/embeds/sound_widget_license.html
similarity index 100%
rename from templates_bw/embeds/sound_widget_license.html
rename to templates/embeds/sound_widget_license.html
diff --git a/templates/follow/followers.html b/templates/follow/followers.html
deleted file mode 100644
index f4e5e3804..000000000
--- a/templates/follow/followers.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "accounts/_notab.html" %}
-
-{% load util %}
-
-{% block title %}{% if is_owner %}Users following you{% else %}Users following {{ user.username }}{% endif %}{% endblock %}
-
-{% block tab_home_active %}{% if is_owner %}active_tab{% endif %}{% endblock %}
-{% block tab_people_active %}{% if not is_owner %}active_tab{% endif %}{% endblock %}
-
-{% block section_content %}
-
-
-<h1>{% if is_owner %}Users following you{% else %}Users following <a href="{% url "account" user.username %}">{{ user.username }}</a>{% endif %}</h1>
-
-
-<div id="content">
-<div class="content_box">
-{% if followers %}
-	<h3>{% if is_owner %}You have{% else %}{{ user.username }} has {% endif %} {{ followers|length }} follower{{ followers|pluralize }}</h3>
-	<ul>
-        {% for follow_user_item in followers %}
-		 	    <div class="followers_page_user_info">
-			        <img src="{{follow_user_item.user_from.profile.locations.avatar.M.url}}" alt="avatar" />
-			        <div class="post_author"><a href="{% url "account" follow_user_item.user_from.username %}">{{follow_user_item.user_from.username|truncate_string:12}}</a></div>
-			        <div class="people_user_info">
-			            {{follow_user_item.user_from.profile.num_sounds}} sound{{follow_user_item.user_from.profile.num_sounds|pluralize}}<br>
-			            {{follow_user_item.user_from.profile.num_posts}} post{{follow_user_item.user_from.profile.num_posts|pluralize}}<br>
-			        </div>
-		    	</div>
-        {% endfor %}
-    </ul>
-{% else %}
-	<h3>&nbsp;</h3>
-	<p>{% if is_owner %}You have{% else %}{{ user.username }} has {% endif %} no followers yet.</p>
-{% endif %}
-</div>
-</div><!-- #content -->
-<div id="sidebar">
-<div class="content_box">
-	<h3>More...</h3>
-	<ul>
-	    <li><a href="{% url "user-following-users" user.username %}">Users that {% if is_owner %}you are{% else %}{{ user.username }} is{% endif %} following</a></li>
-	    <li><a href="{% url "user-following-tags" user.username %}">Tags that {% if is_owner %}you are{% else %}{{ user.username }} is{% endif %} following</a></li>
-	</ul>
-</div>
-</div>
-
-<br class="clear" /><!-- Clearing element -->
-
-{% endblock %}
diff --git a/templates/follow/following_tags.html b/templates/follow/following_tags.html
deleted file mode 100644
index 8645d910d..000000000
--- a/templates/follow/following_tags.html
+++ /dev/null
@@ -1,53 +0,0 @@
-{% extends "accounts/_notab.html" %}
-
-
-{% block title %}{% if is_owner %}Tags you are following{% else %}Tags followed by {{ user.username }}{% endif %}{% endblock %}
-
-{% block tab_home_active %}{% if is_owner %}active_tab{% endif %}{% endblock %}
-{% block tab_people_active %}{% if not is_owner %}active_tab{% endif %}{% endblock %}
-
-{% block section_content %}
-
-
-<h1>{% if is_owner %}Tags that you are following{% else %}Tags followed by <a href="{% url "account" user.username %}">{{ user.username }}</a>{% endif %}</h1>
-
-
-
-<div id="content">
-<div class="content_box">
-{% if following_tags %}
-	<div id="following_tags">
-	<h3>{% if is_owner %}You are{% else %}{{ user.username }} is {% endif %} following {{ following_tags|length }} tag{{ following_tags|pluralize }} (or tag group{{ following_tags|pluralize }})</h3>
-
-	<ul>
-        {% for follow_tag_item in following_tags %}
-            <span class="tag_group" onclick="location.href='{% url "tags" follow_tag_item.get_slash_tags %}'">
-            <ul class="tags" id="following_tags">
-            {% for tag in follow_tag_item.get_split_tags %}
-                <li><a>{{ tag }}</a></li>
-            {% endfor %}
-            </ul></span>
-        {% endfor %}
-
-    </ul>
-	</div>
-{% else %}
-    <h3>&nbsp;</h3>
-	<p>{% if is_owner %}You are{% else %}{{ user.username }} is {% endif %} not following any tags yet.</p>
-{% endif %}
-</div>
-</div><!-- #content -->
-<div id="sidebar">
-<div class="content_box">
-    <h3>More...</h3>
-    <ul>
-        <li><a href="{% url "user-following-users" user.username  %}">Users that {% if is_owner %}you are{% else %}{{ user.username }} is{% endif %} following</a></li>
-        <li><a href="{% url "user-followers" user.username  %}">Users following {% if is_owner %}you{% else %}{{ user.username }}{% endif %}</a></li>
-    </ul>
-</div>
-</div>
-
-
-<br class="clear" /><!-- Clearing element -->
-
-{% endblock %}
diff --git a/templates/follow/following_users.html b/templates/follow/following_users.html
deleted file mode 100644
index eded4f33b..000000000
--- a/templates/follow/following_users.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "accounts/_notab.html" %}
-
-{% load util %}
-
-{% block title %}{% if is_owner %}Users you are following{% else %}Users followed by {{ user.username }}{% endif %}{% endblock %}
-
-{% block tab_home_active %}{% if is_owner %}active_tab{% endif %}{% endblock %}
-{% block tab_people_active %}{% if not is_owner %}active_tab{% endif %}{% endblock %}
-
-{% block section_content %}
-
-
-<h1>{% if is_owner %}Users that you are following{% else %}Users followed by <a href="{% url "account" user.username%}">{{ user.username }}</a>{% endif %}</h1>
-
-<div id="content">
-<div class="content_box">
-
-{% if following %}
-	<h3>{% if is_owner %}You are{% else %}{{ user.username }} is {% endif %} following {{ following|length }} user{{ following|pluralize }}</h3>
-	<ul>
-        {% for follow_user_item in following %}
-		 	    <div class="followers_page_user_info">
-			        <img src="{{follow_user_item.user_to.profile.locations.avatar.M.url}}" alt="avatar" />
-			        <div class="post_author"><a href="{% url "account" follow_user_item.user_to.username %}">{{follow_user_item.user_to.username|truncate_string:12}}</a></div>
-			        <div class="people_user_info">
-			            {{follow_user_item.user_to.profile.num_sounds}} sound{{follow_user_item.user_to.profile.num_sounds|pluralize}}<br>
-			            {{follow_user_item.user_to.profile.num_posts}} post{{follow_user_item.user_to.profile.num_posts|pluralize}}<br>
-			        </div>
-		    	</div>
-        {% endfor %}
-    </ul>
-{% else %}
-	<h3>&nbsp;</h3>
-	<p>{% if is_owner %}You are{% else %}{{ user.username }} is {% endif %} not following any users yet.</p>
-{% endif %}
-</div>
-</div><!-- #content -->
-<div id="sidebar">
-<div class="content_box">
-	<h3>More...</h3>
-	<ul>
-	    <li><a href="{% url "user-followers" user.username %}">Users following {% if is_owner %}you{% else %}{{ user.username }}{% endif %}</a></li>
-	    <li><a href="{% url "user-following-tags" user.username %}">Tags that {% if is_owner %}you are{% else %}{{ user.username }} is{% endif %} following</a></li>
-	</ul>
-</div>
-</div>
-
-<br class="clear" /><!-- Clearing element -->
-
-{% endblock %}
diff --git a/templates/follow/stream.html b/templates/follow/stream.html
index 55bec5f38..6de1d097a 100644
--- a/templates/follow/stream.html
+++ b/templates/follow/stream.html
@@ -1,175 +1,118 @@
-{% extends "base.html" %}
-
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
 {% load display_sound %}
-{% block title %}Activity stream{% endblock title %}
-{% block tab_home_active %}active_tab{% endblock %}
-{% block content %}
-
-    <script type="text/javascript">
-        $(function () {
-
-            $('select option[value="{{ select_value }}"]').attr("selected", true);
-
-            $("#date_to").val('{{ date_to }}');
-            $("#date_from").val('{{ date_from }}');
-
-            if ('{{ select_value }}' != "specific_dates") {
-                $("#date_pickers").hide();
-                $("#date_submit").css("margin-left", "0");
-            }
-
-            $("#time_lapse").change(function() {
-                select_value = $("#time_lapse option:selected").val();
-                if (select_value == "specific_dates") {
-                    $("#date_pickers").show();
-                }
-                else {
-                    $("#date_pickers").hide();
-                }
-            });
+{% load util %}
+{% block page-title %}Sound stream{% endblock %}
+{% block title %}Sound stream{% endblock %}
 
-            $("#date_from").datepicker({
-                showOn: "button",
-                buttonImage: "/media/images/calendar.gif",
-                buttonImageOnly: true,
-                dateFormat: "yy-mm-dd",
-                changeYear: true,
-                minDate: new Date(2005, 1 - 1, 1),
-                maxDate: 0, // for today
-                // changeMonth: true,
-                onClose: function(selectedDate) {
-                    $("#date_to").datepicker("option", "minDate", selectedDate);
-                }
-            });
+{% block page-content %}
+<div>
 
-            $("#date_to").datepicker({
-                showOn: "button",
-                buttonImage: "/media/images/calendar.gif",
-                buttonImageOnly: true,
-                dateFormat: "yy-mm-dd",
-                changeYear: true,
-                minDate: new Date(2005, 1 - 1, 1),
-                maxDate: 0, // for today
-                onClose: function(selectedDate) {
-                    $("#date_from").datepicker("option", "maxDate", selectedDate);
-                }
-            });
-
-        });
-    </script>
-
-    <h1>Activity stream</h1>
     <p>In this page you'll see new sounds uploaded by <a href="{% url "user-following-users" request.user %}">users you follow</a> and new sounds tagged with the <a href="{% url "user-following-tags" request.user %}">tags you follow</a>.<br>
-       You can configure email notifications for updates in your activity stream through your <a href="{% url "accounts-edit" %}">settings</a> page.</p>
-
-    <form action="." method="post">
-        {% csrf_token %}
-        <span id="stream_period">Select time period:</span>
-        <select id="time_lapse" name="time_lapse">
-            {% for key, value in SELECT_OPTIONS.items %}
-                <option value="{{ key}}">{{ value }}</option>
-            {% endfor %}
-
-        </select>
-
-        <div id="date_pickers">
-            <label id="lbl_date_from" for="date_from">From:</label>
-            <input id="date_from" name="date_from" type="text"/>
-            <label id="lbl_date_to" for="date_to">To:</label>
-            <input id="date_to" name="date_to" type="text"/>
-        </div>
-
-        <input type="submit" id="date_submit" value="Go!"/>
-    </form>
+    You can configure email notifications for updates in your sound stream through your <a href="{% url "accounts-email-settings" %}">email settings</a> page.</p>
+
+    <div class="v-spacing-top-4">
+        <form id="stream_form" class="form-activity-stream" action="." method="post">
+            {% csrf_token %}
+            <div>
+                <label id="stream_period">Select time period:</label>
+                <select id="time_lapse" name="time_lapse">
+                    {% for key, value in SELECT_OPTIONS.items %}
+                        <option value="{{ key}}" {% if select_value == key %}selected="selected"{% endif %} >{{ value }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <div>
+                <label id="lbl_date_from" for="date_from">From:</label>
+                <input id="date_from" name="date_from" type="text" placeholder="YYYY-MM-DD" {% if date_from %}value="{{ date_from }}"{% endif %}/>
+            </div>
+            <div>
+                <label id="lbl_date_to" for="date_to">To:</label>
+                <input id="date_to" name="date_to" type="text" placeholder="YYYY-MM-DD" {% if date_to %}value="{{ date_to }}"{% endif %}/>
+            </div>
+            <button class="btn-primary">Update stream</button>
+        </form>
+    </div>
 
     {% if not errors_getting_data %}
-
-        <div class="stream_box">
-
-            <a id="new_sounds_users"></a>
-
-            <h3>New sounds by users you follow</h3>
-            {% if users_sounds %}
-                <a class="link-to-section" href="#new_sounds_tags">Go to sounds by tags you follow</a>
-            {% endif %}
-
-            {% if not users_sounds %}
-
-                <div class="stream-left">
-                    <p>No updates...</p>
-                </div>
-
-            {% else %}
-
-                {% for user, sound_objs, more_url_params, more_count, new_count in users_sounds %}
-
-                    <div class="stream-left">
+    <div class="divider-light v-spacing-top-3 v-spacing-4"></div>
+    <div>
+        <a id="new_sounds_users"></a>
+        <h3>Sounds by users you follow</h3>
+        {% if not users_sounds %}
+            <div class="v-spacing-7 v-spacing-top-5">
+                <p class="text-grey v-spacing-2">Looks like there are no new sounds from users you follow in that time period... &#128543</p>
+            </div>
+        {% else %}
+            <div class="v-spacing-top-2">
+            {% for user, sound_objs, more_url_params, more_count, new_count in users_sounds %}
+                <h5 class="text-grey v-spacing-top-3 v-spacing-2">From user "{{ user.0.username }}"</h5>
+                <a id="{{ user.0 }}" ></a>
+                <div>    
+                {% if sound_objs %}
+                    <div class="row no-margin">
                         {% for sound_obj in sound_objs %}
-                            {% display_sound sound_obj %}
+                            <div class="col-lg-3 col-6">
+                                {% display_sound_small sound_obj %}
+                            </div>
                         {% endfor %}
-                        {% if more_count > 0 %}
-                           <p><img src="{{media_url}}images/plus.png" alt="">&nbsp;<a href='{% url "sounds-search" %}?f={{ more_url_params.0 }}&s={{ more_url_params.1 }}'>See all results ({{ more_count }} more)</a></p>
-                        {% endif %}
-                    </div>
-
-                    <div class="stream-right">
-                        <a id="{{ user.0 }}" ></a>
-                        {% include "accounts/active_user.html" %}
-                        {% comment %}<a href="#" class="link-top">Go to Top</a>{% endcomment %}
                     </div>
-
-                {% endfor %}
-            {% endif %}
-            <br class="clear"/>
-        </div>
-
-        <div class="stream_box">
-            <a id="new_sounds_tags"></a>
-            <h3>New sounds with tags you follow</h3>
-
-            {% if users_sounds %}
-                <a class="link-to-section" href="#new_sounds_users">Go to sounds by users you follow</a>
-            {% endif %}
-
-            {% if not tags_sounds %}
-
-                <div class="stream-left">
-                    <p>No updates...</p>
+                {% endif %}
                 </div>
-
-            {% else %}
-
-                {% for tags, sound_objs, more_url_params, more_count, new_count in tags_sounds %}
-
-                    <div class="stream-left">
-                        {% for sound_obj in sound_objs %}
-                            {% display_sound sound_obj %}
-                        {% endfor %}
-                        {% if more_count > 0 %}
-                           <p><img src="{{media_url}}images/plus.png" alt="">&nbsp;<a href='{% url "sounds-search" %}?f={{ more_url_params.0 }}&s={{ more_url_params.1 }}'>See all results ({{ more_count }} more)</a></p>
-                        {% endif %}
-                    </div>
-
-                    <div class="stream-right" id="following_tags">
-                        <a id="{{ tags|join:"/" }}"></a>
-                        <div class="tag_group" onclick="location.href='{% url "tags" tags|join:"/" %}'">
-                            <ul class="tags" id="following_tags">
-                                {% for tag in tags %}
-                                    <li><a>{{ tag }}</a></li>
-                                {% endfor %}
-                            </ul>
+                {% if more_count > 0 %}
+                <div class="center v-spacing-4">
+                    <a class="btn-inverse no-hover" href="{% url "sounds-search" %}?f={{ more_url_params.0 }}&s={{ more_url_params.1 }}">See all {{ new_count }} sounds</a>
+                </div>
+                {% endif %}
+            {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+    <div class="divider-light v-spacing-top-3 v-spacing-4"></div>
+    <div>
+        <a id="new_sounds_tags"></a>
+        <h3>Sounds with tags you follow</h3>
+        {% if not tags_sounds %}
+            <div class="v-spacing-7 v-spacing-top-5">
+                <p class="text-grey v-spacing-2">Looks like there are no new sounds from tags you follow in that time period... &#128543</p>
+            </div>
+        {% else %}
+            <div class="v-spacing-top-2">
+            {% for tags, sound_objs, more_url_params, more_count, new_count in tags_sounds %}
+                <h5 class="text-grey v-spacing-top-3 v-spacing-2">From tag{{ tags|pluralize }} "{{ tags|join:", " }}"</h5>
+                <a id="{{ tags|join:"/" }}"></a>
+                <div>
+                {% if sound_objs %}
+                <div class="row no-margin">
+                    {% for sound_obj in sound_objs %}
+                        <div class="col-lg-3 col-6">
+                            {% display_sound_small sound_obj %}
                         </div>
-
-                    </div>
-
-                {% endfor %}
-
-            {% endif %}
-            <br class="clear"/>
-        </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+                {% if more_count > 0 %}
+                <div class="center v-spacing-4">
+                    <a class="btn-inverse no-hover" href="{% url "sounds-search" %}?f={{ more_url_params.0 }}&s={{ more_url_params.1 }}">See all {{ new_count }} sounds</a>
+                </div>
+                {% endif %}
+                </div>
+            {% endfor %}
+            </div>
+        {% endif %}
+    </div>
 
     {% else %}
-        <p>An error occurred while getting the requested data. Please try again later.</p>
+    <div class="v-spacing-6 v-spacing-top-4">
+        <p class="v-spacing-4 text-grey">An error occurred while requesting the data, please try again later...</p>
+        <p><button onclick="window.history.back();" class="btn-primary">Go back</button></p>
+    </div>
     {% endif %}
-
+</div>
+    
 {% endblock %}
+
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/stream.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/forum/_section.html b/templates/forum/_section.html
deleted file mode 100644
index fa0b0278f..000000000
--- a/templates/forum/_section.html
+++ /dev/null
@@ -1,152 +0,0 @@
-{% extends "base.html" %}
-
-{% block head %}
-    {{ block.super }}
-
-        <script type="text/javascript">
-            $(document).ready(function(){
-                if ($("#forum_search").length) {
-                    $("#show_search").show();
-                }
-                $("#show_search").click(function(event) {
-                    event.preventDefault();
-                    $("#forum_search").toggle("medium");
-                });
-                $("#show_advanced_search").click(function(event) {
-                    event.preventDefault();
-                    showAdvancedForumSearch();
-                });
-                $("#hide_advanced_search").click(function(event) {
-                    event.preventDefault();
-                    hideAdvancedForumSearch();
-                });
-            });
-
-            function showAdvancedForumSearch() {
-                $("#advanced_search").val(1);
-                $("#enableShowButton").hide();
-                $("#advanced_forum_search").show('blind', {}, 500, function() {});
-            }
-            function hideAdvancedForumSearch() {
-                $("#advanced_search").val(0);
-                $("#advanced_forum_search").hide('blind', {}, 500, function() {});
-                $("#enableShowButton").show();
-            }
-
-            $(function(){
-                $("#date_from_forum_search").datepicker({
-                                                        dateFormat: 'dd-mm-yy',
-                                                        altField: "#dt_from",
-                                                        altFormat: "yy-mm-dd"
-                                                        });
-                $("#date_to_forum_search").datepicker({
-                                                      dateFormat: 'dd-mm-yy',
-                                                      altField: "#dt_to",
-                                                      altFormat: "yy-mm-dd"
-                                                      });
-
-                $("#forum_search input[name=q]").Watermark("search in {% if current_forum %}forum '{{current_forum.name}}'{% else %}{% if forum %}forum '{{forum.name|escapejs}}'{%else%}all forums{% endif %}{% endif %}");
-
-            });
-
-            function checkEmptyDates()
-        	{
-        		if ( $("#date_from_forum_search").val() == "" ){
-        			$("#dt_from").val("");
-        		}
-
-        		if ( $("#date_to_forum_search").val() == "" ){
-        			$("#dt_to").val("");
-        		}
-        	}
-
-        	function clearDate(date)
-        	{
-        		if (date === 0){
-        			$("#date_from_forum_search").val("Choose a Date");
-        			$("#dt_from").val("");
-        		}
-        		else if (date === 1){
-        			$("#date_to_forum_search").val("Choose a Date");
-        			$("#dt_to").val("");
-        		}
-        	}
-        </script>
-{% endblock head %}
-
-{% block tab_forums_active %}active_tab{% endblock %}
-
-{% block content %}
-<h1>Forums</h1>
-
-<div id="content_full"> <!-- START of Content area -->
-
-<div id="breadcrumb_outer">
-    <div id="breadcrumb_inner">
-        <a href="{% url "forums-forums" %}">Freesound Forums</a> {% block breadcrumb %}{% endblock %}
-    </div>
-    <a id="show_search" style="display:none;"><span class="forum_search_button">search in the forum</span></a>
-    <br style="clear: both;" />
-
-</div>
-
-{% block forum_search %}
-<div {% if forum or forums or hide_search %}style="display:none"{% endif %} id="forum_search" class="advanced_forum_search_options">
-    <form method="get" action="{% url "forums-search" %}" onsubmit="checkEmptyDates()">
-    <input type="hidden" name="forum" value="{% if forum %}{{forum.name_slug}}{% else %}{{current_forum.name_slug}}{% endif %}"/>
-
-        <input type="hidden"
-               name="advanced_search"
-               id="advanced_search"
-               value="{% if advanced_search == '1' %}1{% else %}0{% endif %}"/>
-
-        <fieldset>
-
-            <input type="text"
-            	   id="forum_search_box"
-                   name="q"
-                   value="{{search_query}}"
-                   size="60" />
-
-            <input type="submit" value="search!" id="search_submit" />
-
-            <div id="advanced_forum_search"{% if advanced_search != "1" %} style="display:none"{% endif %}>
-
-
-                <label for="date_from_forum_search">From Date:</label>
-                <input class="input_date_field" type="text" value="{{ date_from_display }}" id="date_from_forum_search" />
-                <input type="hidden" value="{{ date_from }}" name="dt_from" id="dt_from" />
-				<a onclick='clearDate(0);' style="cursor:pointer">clear</a>
-
-                <label for="date_to_forum_search">To Date:</label>
-                <input class="input_date_field" type="text" value="{{ date_to_display }}" id="date_to_forum_search" />
-                <input type="hidden" value="{{ date_to }}" name="dt_to" id="dt_to" />
-				<a onclick='clearDate(1);' style="cursor:pointer">clear</a>
-                <br>
-                <span class="advanced_search_options_button"><a id="hide_advanced_search" href="">hide advanced search options</a></span>
-            </div>
-
-
-            <span id="enableShowButton"
-                  class="advanced_search_options_button"
-                  {% if advanced_search == "1" %}style="display:none"{% endif%}>
-
-                <div style="margin-top:4px;"></div>
-                <a id="show_advanced_search" href="">show advanced search options</a>
-            </span>
-
-        </fieldset>
-    </form>
-</div>
-{% endblock %}
-
-<div id="advanced_forum_search" {% if forum or forums %}style="display:none"{% endif %} >
-
-</div>
-
-
-{% block section_content %}
-{% endblock %}
-
-</div> <!-- END of Content area -->
-{% endblock %}
diff --git a/templates/forum/confirm_deletion.html b/templates/forum/confirm_deletion.html
deleted file mode 100644
index 65feda794..000000000
--- a/templates/forum/confirm_deletion.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "forum/_section.html" %}
-
-{% load smileys %}
-{% load filter_img %}
-
-{% block title %}forum - delete post{% endblock %}
-
-{% block forum_search %}{% endblock %}
-
-{% block section_content %}
-
-<h2>Do you really want to delete your post?</h2>
-
-<div id="confirm_deletion">
-<h4><a href="{% url "forums-post" post.thread.forum.name_slug post.thread.id post.id %}">No</a></h4>
-    <form method="post" action="{% url "forums-post-delete-confirm" post.id %}" style="margin: 0; padding: 0">
-        {% csrf_token %}
-        <button type="submit">Yes</button>
-    </form>
-</div>
-<br style="clear: both;" />
-<br><br>
-<div id="posts">
-    <div class="post">{{post.body|replace_img|smileys|safe|linebreaks}}</div>
-</div>
-
-{% endblock %}
diff --git a/templates_bw/forum/display_forum.html b/templates/forum/display_forum.html
similarity index 100%
rename from templates_bw/forum/display_forum.html
rename to templates/forum/display_forum.html
diff --git a/templates/forum/display_forum_result.html b/templates/forum/display_forum_result.html
deleted file mode 100644
index 085d4e0fb..000000000
--- a/templates/forum/display_forum_result.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{% load util %}
-{% autoescape off %}
-{% for result in results %}
-	<div class="forum_search_result">
-	<div class="thread_name">
-    	<a class="thread_title" href="/forum/{{result.forum_name_slug}}/{{result.thread_id}}/">
-    		{{result.thread_title|truncate_string:50}}
-    	</a>
-    	<div class="thread_info" >
-			{{ result.thread_info }}
-		</div>
-	</div><!-- .thread_name -->
-	<div class="post_result">
-		<div>
-			{% for p in result.posts %}
-				<div class="multipost">
-					{{ p.post_body|truncatewords_html:70 }} <br />
-					<span style="font-size: 85%; color: #A3A3A3;">
-						{{ p.post_info }} | 
-						<a href="/forum/{{result.forum_name_slug}}/{{result.thread_id}}/{{p.post_id}}">read full post...</a>
-					</span>
-				</div>
-			{% endfor %}
-		</div>
-	</div>
-</div>
-{% endfor %}
-{% endautoescape %}
\ No newline at end of file
diff --git a/templates_bw/forum/display_post.html b/templates/forum/display_post.html
similarity index 100%
rename from templates_bw/forum/display_post.html
rename to templates/forum/display_post.html
diff --git a/templates_bw/forum/display_thread.html b/templates/forum/display_thread.html
similarity index 100%
rename from templates_bw/forum/display_thread.html
rename to templates/forum/display_thread.html
diff --git a/templates_bw/forum/hot_threads.html b/templates/forum/hot_threads.html
similarity index 100%
rename from templates_bw/forum/hot_threads.html
rename to templates/forum/hot_threads.html
diff --git a/templates/forum/html_explanation.html b/templates/forum/html_explanation.html
deleted file mode 100644
index 7d5e98f65..000000000
--- a/templates/forum/html_explanation.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% comment %}
-<p style="color:red">As a temporary measure to avoid spam, <strong>new registered</strong>
-users are not able to create new threads or post replies until a week has
-passed since their registration date. If that is your case, your post or thread won't be published
-when clicking to the "create thread" or "reply" button.</p>
-{% endcomment %}
-
-
-<p>To format your text you can use the following HTML tags: a, img, strong, b, em, li, u, p, br, blockquote, code.<br>
-    Anything between '< >' except for the tags above will be removed.
-
diff --git a/templates/forum/index.html b/templates/forum/index.html
index a9c3777d2..60f15a681 100644
--- a/templates/forum/index.html
+++ b/templates/forum/index.html
@@ -1,32 +1,18 @@
-{% extends "forum/_section.html" %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load display_forum_objects %}
 
-{% load util %}
+{% block title %}Forums{% endblock %}
+{% block page-title %}Freesound Forums{% endblock %}
 
-{% block title %}forums{% endblock %}
-
-{% block section_content %}
-<ul id="forums">
-{% for forum in forums %}
-	<li>
-		<div class="latest_post">
-			{% if forum.last_post %}
-			<a href="{% url "forums-post" forum.name_slug forum.last_post.thread.id forum.last_post.id %}">Latest post</a> by <a href="{% url "account" forum.last_post.author.username %}">{{forum.last_post.author.username}}</a><br />
-			{{forum.last_post.created|timesince}} ago
-			{% endif %}
-		</div>
-
-		{% if forum.last_post.created > request.last_action_time and forum.last_post.author != request.user %}
-			<img src="{{media_url}}images/forum_new.png" width="20" height="20" alt="new posts" />
-		{% else %}
-			<img src="{{media_url}}images/forum_nonew.png" width="20" height="20" alt="no new posts" />
-		{% endif %}
-
-		<a href="{{forum.get_absolute_url}}" class="forum_name">{{forum.name}}</a><br />
-		{{forum.num_threads}} thread{{forum.num_threads|pluralize}}, {{forum.num_posts}} post{{forum.num_posts|pluralize}}
-	</li>
-{% endfor %}
-<li>
-    <a href="{% url "forums-latest-posts" %}" class="forum_name">Latest posts</a>
-</li>
-</ul>
-{% endblock %}
+{% block page-content %}
+    {% include 'forum/main_forums_navbar.html' %}
+    <div class="v-spacing-top-4">
+        {% for forum in forums %}
+            {% display_forum forum %}
+            {% if not forloop.last %}
+                <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/forum/latest_posts.html b/templates/forum/latest_posts.html
deleted file mode 100644
index 31be48d33..000000000
--- a/templates/forum/latest_posts.html
+++ /dev/null
@@ -1,42 +0,0 @@
-{% extends "forum/_section.html" %}
-
-
-{% load paginator %}
-{% load filter_img %}
-{% load smileys %}
-
-{% block title %}Latest forum posts{% endblock %}
-
-{% block breadcrumb %}&#187; Latest forum posts{% endblock %}
-
-{% block section_content %}
-
-<div class="forum_pagination">
-    {% show_paginator paginator page current_page request "post" %}
-</div>
-
-<ul id="posts">
-{% for post in page.object_list %}
-    <li class="post">
-        <a name="post{{post.id}}"></a>
-        <a href="{% url "account" post.author.username %}"><img src="{{post.author.profile.locations.avatar.S.url}}" width="32" height="32" alt="avatar" class="avatar" /></a>
-        <div class="post_author"><a href="{% url "account" post.author.username %}">{{post.author.username}}</a></div>
-        <div class="post_details">
-            {{post.author.profile.num_sounds}} sound{{post.author.profile.num_sounds|pluralize}}<br/>
-            {{post.author.profile.num_posts}} post{{post.author.profile.num_posts|pluralize}}<br>
-            <!-- Joined: {{post.author.date_joined|date:"d M Y"}}<br/> -->
-            <div class="post_date">{{post.created|timesince}} ago</div>
-        </div>
-        <div class="subject">
-            <a href="{% url "forums-post" post.thread.forum.name_slug post.thread.id post.id %}" class="topic_subject">{{post.thread.title|safe}}</a><br />
-        </div>
-        <br>
-        {{post.body|replace_img|smileys|safe|linebreaks}}
-    </li>
-{% endfor %}
-</ul>
-
-<div class="forum_pagination">
-    {% show_paginator paginator page current_page request "post" %}
-</div>
-{% endblock %}
diff --git a/templates_bw/forum/main_forums_navbar.html b/templates/forum/main_forums_navbar.html
similarity index 100%
rename from templates_bw/forum/main_forums_navbar.html
rename to templates/forum/main_forums_navbar.html
diff --git a/templates/forum/moderate.html b/templates/forum/moderate.html
index f6082d52c..a8ba17542 100644
--- a/templates/forum/moderate.html
+++ b/templates/forum/moderate.html
@@ -1,42 +1,35 @@
-{% extends "forum/_section.html" %}
-
-{% load smileys %}
+{% extends "simple_page.html" %}
+{% load static %}
+{% load util %}
 {% load filter_img %}
+{% load smileys %}
+{% load display_forum_objects %}
+{% load bw_templatetags %}
+{% block title %}Moderate forum posts{% endblock %}
+{% block page-title %}Moderate forum posts ({{ post_list|length }}){% endblock %}
 
-{% block title %}Unmoderated forum posts{% endblock %}
-
-{% block section_content %}
-<br/>
-<h3> Unmoderated posts:</h3>
-
-    <ul id="posts">
-        {% for post in post_list %}
-            <li class="post">
-                <a name="post{{post.post.id}}"></a>
-                <a href="{% url "account" post.post.author.username %}"><img src="{{post.post.author.profile.locations.avatar.S.url}}" width="32" height="32" alt="avatar" class="avatar" /></a>
-                <div class="post_author"><a href="{% url "account" post.post.author.username %}">{{post.post.author.username}}</a></div>
-                <div class="post_details">
-                    {{post.post.author.profile.num_sounds}} sound{{post.post.author.profile.num_sounds|pluralize}}<br/>
-                    {{post.post.author.profile.num_posts}} post{{post.post.author.profile.num_posts|pluralize}}<br>
-                    <!-- Joined: {{post.post.author.date_joined|date:"d M Y"}}<br/> -->
-                    <div class="post_date">{{post.post.created|timesince}} ago</div>
-                </div>
-                <div class="subject">
-                    <a href="{% url "forums-post" post.post.thread.forum.name_slug post.post.thread.id post.post.id %}" class="topic_subject">{{post.post.thread.title|safe}}</a><br />
-                </div>
-                <br>
-                {{post.post.body|replace_img|smileys|safe|linebreaks}}
-
-                {% if post.post.author.profile.signature %}
-                    <div class="signature">{{post.post.author.profile.signature|replace_img|smileys|safe}}</div>
-                {% endif %}
+{% block page-content %}
+<div>Below is a list of forum posts that require moderation. You can either approve or reject them individually. Also you have the option to
+    delete the whole corresponding user object if it is believed to be a spammer.
+</div>
+<div class="v-spacing-top-6">
+    {% for post in post_list %}
+        <div class="row">
+            <div class="col-9">
+                {% display_post post.post 0 0 False False False %}
+            </div>
+            <div class="col-3">
+                <form action="." method="post" class="bw-form bw-multiple-radio">{% csrf_token %}
+                    {{ post.form }}
+                    <button type="submit" class="btn-primary v-spacing-top-4 w-100 center">Send</button>
+                </form>
+            </div>
+        </div>
+        {% if not forloop.last %}
+            <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
+        {% endif %}  
+    {% endfor %}
+</div>
+{% endblock %}
 
-            </li>
-            <form action="." method="post">{% csrf_token %}
-                {{ post.form.as_p }}
-                <input type="submit" value="send" />
-            </form>
-        {% endfor %}
-    </ul>
 
-{% endblock %}
diff --git a/templates/forum/new_thread.html b/templates/forum/new_thread.html
index 7f4419bcb..ed88f2070 100644
--- a/templates/forum/new_thread.html
+++ b/templates/forum/new_thread.html
@@ -1,42 +1,51 @@
-{% extends "forum/_section.html" %}
-
-
-{% block title %}forum - new thread{% endblock %}
-
-{% block breadcrumb %}&#187; <a href="{% url "forums-new-thread" forum.name_slug %}">New thread</a>{% endblock %}
-
-{% block forum_search %}{% endblock %}
-
-{% block section_content %}
-
-<form method="post" action="." class="disable-on-submit">{% csrf_token %}
-
-{% include 'forum/html_explanation.html' %}
-
-<div>
-    {{ form.non_field_errors }}
-    {{ form.title.errors }}
-<p>
-    <label for="{{ form.title.id_for_label }}">Thread title:</label><br>
-    {{ form.title }}
-</p>
-    {{ form.body.errors }}
-<p>
-    <label for="{{ form.body.id_for_label }}">Message:</label><br>
-    {{ form.body }}
-</p>
-<p>
-    {{ form.subscribe }} <label for="{{ form.subscribe.id_for_label }}">{{ form.subscribe.help_text }}</label><br>
-</p>
-</div>
-<input type="submit" value="create thread" />
-</form>
-
-<script>
-  $(function() {
-    unsecureImageCheck($('#{{ form.body.id_for_label }}'));
-  })
-</script>
-
-
-{% endblock %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load static %}
+
+{% block title %}Forums - {{forum.name}} - New Thread{% endblock %}
+{% block page-title-custom %}{% endblock %}
+
+{% block page-content %}
+    <div class="row middle">
+        <div class="col-12">
+            <ul class="navbar-forums-hot navbar-breadcrumb">
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link nav-link" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
+                </li>
+                <li class="nav-item text-16">
+                    New thread
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="divider-light v-spacing-top-1 v-spacing-5"></div>
+    <div class="v-spacing-top-5">
+        <form method="post" action="." class="bw-new-thread__form w-100 disable-on-submit">{% csrf_token %}
+            <div class="row">
+                <div class="col-lg-3 v-spacing-top-2">
+                    <div class="row middle">
+                        <div class="col-2 col-lg-4">
+                            {% bw_user_avatar request.user.profile.locations.avatar.L.url request.user.username 75 %}
+                        </div>
+                        <div class="col-8">
+                            <h6 class="text-16 no-margins"><a href="{% url 'account' request.user.username %}">{{ request.user.username }}</a></h6>
+                            <p class="text-grey no-margins">{{ request.user.profile.num_sounds|bw_intcomma }} sound{{ request.user.profile.num_sounds|pluralize }}</p>
+                            <p class="text-grey no-margins">{{ request.user.profile.num_posts|bw_intcomma }} post{{ request.user.profile.num_posts|pluralize }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-7">
+                    {{form.as_p}}
+                </div>
+            </div>
+            <div class="row v-spacing-top-5">
+                <div class="col-lg-7 offset-lg-3">
+                    <button class="btn-primary w-100">Create thread</button>
+                </div>
+            </div>
+        </form>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/forum/quote_style.html b/templates/forum/quote_style.html
index 92a61fe41..fd34c870d 100644
--- a/templates/forum/quote_style.html
+++ b/templates/forum/quote_style.html
@@ -1,3 +1,3 @@
 <blockquote><em>{{post.author}}</em> wrote:
 {{post.body|safe}}
-</blockquote>
+</blockquote>
\ No newline at end of file
diff --git a/templates/forum/reply.html b/templates/forum/reply.html
index eb2e8eba5..7799adf19 100644
--- a/templates/forum/reply.html
+++ b/templates/forum/reply.html
@@ -1,45 +1,77 @@
-{% extends "forum/_section.html" %}
-
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load static %}
+{% load util %}
 {% load filter_img %}
 
-{% block title %}forum - {% if editing %}edit post{% else %}reply{% endif %}{% endblock %}
-
-{% block breadcrumb %} &#187; <a href="{% url "forums-reply" forum.name_slug thread.id %}">{% if editing %}Edit post{% else %}Post Reply{% endif %}</a>{% endblock %}
-
-{% block forum_search %}{% endblock %}
+{% block title %}Forums - {{forum.name}} - {{ thread.title }} - {% if editing %}Edit post{% else %}Post reply{% endif %}{% endblock %}
+{% block page-title-custom %}{% endblock %}
 
-{% block section_content %}
-
-<form method="post" action="." class="disable-on-submit">{% csrf_token %}
-{% include 'forum/html_explanation.html' %}
-<div>
-    {{ form.non_field_errors }}
-    {{ form.body.errors }}
-<p>
-    <label for="{{ form.body.id_for_label }}">Message:</label><br>
-    {{ form.body }}
-</p>
-<p>
-    {{ form.subscribe }} <label for="{{ form.subscribe.id_for_label }}">{{ form.subscribe.help_text }}</label><br>
-</p>
-</div>
-<input type="submit" value="reply" />
-</form>
-{% if latest_posts %}
-    <h2>Latest posts in thread:</h2>
-    <div style="height:400px; overflow: auto; margin: 10px;">
-    {% for post in latest_posts %}
-        <p>
-        <a href="{% url "account" post.author.username %}">{{post.author.username}}</a>, {{post.created|timesince}} ago:</br>
-        {{post.body|replace_img|safe|linebreaks}}
-        </p>
-    {% endfor %}
+{% block page-content %}
+    <div class="row middle">
+        <div class="col-12">
+            <ul class="navbar-forums-hot navbar-breadcrumb">
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url "forums-thread" forum.name_slug thread.id %}">{{ thread.title }}</a>
+                </li>
+                <li class="nav-item text-16">
+                    {% if editing %}Edit post{% else %}Post reply{% endif %}
+                </li>
+            </ul>
+        </div>
     </div>
-{% endif %}
-<script>
-  $(function() {
-    unsecureImageCheck($('#{{ form.body.id_for_label }}'));
-  })
-</script>
-
-{% endblock %}
+    <div class="divider-light v-spacing-top-1 v-spacing-5"></div>
+    <div class="v-spacing-top-5">
+        <form method="post" action="." class="bw-new-thread__form w-100 disable-on-submit">{% csrf_token %}
+            <div class="row">
+                <div class="col-lg-3 v-spacing-top-2">
+                    <div class="row middle">
+                        <div class="col-2 col-lg-4">
+                            {% bw_user_avatar request.user.profile.locations.avatar.L.url request.user.username 75 %}
+                        </div>
+                        <div class="col-8">
+                            <h6 class="text-16 no-margins"><a href="{% url 'account' request.user.username %}">{{ request.user.username }}</a></h6>
+                            <p class="text-grey no-margins">{{ request.user.profile.num_sounds|bw_intcomma }} sound{{ request.user.profile.num_sounds|pluralize }}</p>
+                            <p class="text-grey no-margins">{{ request.user.profile.num_posts|bw_intcomma }} post{{ request.user.profile.num_posts|pluralize }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-7 ">
+                    {{form.as_p}}
+                </div>
+            </div>
+            <div class="row v-spacing-top-5">
+                <div class="col-lg-7 offset-lg-3">
+                    <button class="btn-primary w-100">{% if editing %}Save post{% else %}Post reply{% endif %}</button>
+                </div>
+            </div>
+            {% if latest_posts %}
+                <div class="row v-spacing-top-5">
+                    <div class="col-lg-7 offset-lg-3">
+                            <span class="text-16 font-weight-bold">Previous posts in this thread:</span>
+                            <div class="latest-posts-in-thread v-spacing-top-2">
+                                {% for post in latest_posts %}
+                                    <div class="v-spacing-2">
+                                        <a href="{% url "account" post.author.username %}">{{post.author.username}}</a><span class="text-grey">, {{post.created|timesince}} ago:</span>
+                                        <p>
+                                            {{ post.body|replace_img|safe|linebreaks|strip_unnecessary_br }}
+                                        </p>
+                                    </div>
+                                    {% if not forloop.last %}
+                                        <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        </form>
+    </div>
+{% endblock %}q
\ No newline at end of file
diff --git a/templates/forum/thread.html b/templates/forum/thread.html
index 053d4613a..4993bd441 100644
--- a/templates/forum/thread.html
+++ b/templates/forum/thread.html
@@ -1,84 +1,59 @@
-{% extends "forum/_section.html" %}
-
-
-{% load paginator %}
-{% load smileys %}
-{% load flag_user %}
-{% load filter_img %}
-
-{% block title %}forums - {{forum.name}} - {{thread.title}}{% endblock %}
-
-{% block breadcrumb %}&#187; <a href="{{forum.get_absolute_url}}">{{forum.name}}</a> &#187; <a href="{% url "forums-thread" forum.name_slug thread.id %}">{{thread.title}}</a>{% endblock %}
-
-{% block section_content %}
-
-<div class="forum_pagination">
-    <div class="forum_button"><a href="{% url "forums-reply" forum.name_slug thread.id %}">Post Reply</a></div>
-    {% if user.is_authenticated %}
-        <div class="forum_button" style="right: 100px">
-          {% if has_subscription %}
-              <a href="{% url "forums-thread-unsubscribe" forum.name_slug thread.id %}">Unsubscribe</a>
-          {% else %}
-              <a title="Subscribe to receive email notifications" href="{% url "forums-thread-subscribe" forum.name_slug thread.id %}">Subscribe</a>
-          {% endif %}
-        </div>
-    {% endif %}
-    {% show_paginator paginator page current_page request "post" %}
-</div>
-
-<ul id="posts">
-{% for post in page.object_list %}
-    <li class="post">
-        <a name="post{{post.id}}"></a>
-        <a href="{% url "account" post.author.username %}"><img src="{{post.author.profile.locations.avatar.S.url}}" width="32" height="32" alt="avatar" class="avatar" /></a>
-        <div class="post_author"><a href="{% url "account" post.author.username %}">{{post.author.username}}</a></div>
-        <div class="post_details">
-            {{post.author.profile.num_sounds}} sound{{post.author.profile.num_sounds|pluralize}}<br/>
-            {{post.author.profile.num_posts}} post{{post.author.profile.num_posts|pluralize}}<br>
-            <div class="post_date">{{post.created|timesince}} ago</div>
-        </div>
-
-        {% if request.user.is_staff %}
-            <div class="post-admin-links">Admin:
-                <a href="{% url "admin:forum_post_change" post.id %}">post</a> |
-                <a href="{% url "admin:forum_thread_change" thread.id %}">thread</a>
-            </div>
-        {% endif %}
-
-        <div class="post_buttons">
-          <a href="{% url "forums-reply-quote" forum.name_slug thread.id post.id %}" class="post_quote post_button" title="quote and reply"></a>
-          {% if post.author == request.user or perms.forums.change_post %}
-              <a href="{% url "forums-post-edit" post.id %}" class="post_edit post_button" title="edit post"></a>
-          {% endif %}
-          {% if post.author == request.user or perms.forums.delete_post %}
-              <a href="{% url "forums-post-delete" post.id %}" class="post_delete post_button" title="delete post"></a>
-          {% endif %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load display_forum_objects %}
+
+{% block title %}Forums - {{forum.name}} - {{thread.title}}{% endblock %}
+{% block page-title %}Freesound Forums{% endblock %}
+
+{% block page-content %}
+
+    <div class="divider-light v-spacing-top-4 v-spacing-2"></div>
+    <div class="row middle">
+        <div class="col-12">
+            <ul class="navbar-forums-hot navbar-breadcrumb v-spacing-2">
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link nav-link-black" href="{% url "forums-thread" forum.name_slug thread.id %}">{{ thread.title }}</a>
+                </li>
+            </ul>
         </div>
-
-        {% if forloop.first and not page.has_previous %}
-        <div class="subject">
-            {{thread.title}}
+    </div>
+    <div class="divider-light v-spacing-top-2"></div>
+   
+    <div class="row between middle v-spacing-top-3">
+        <div class="col-lg-8">
+            <h3>{{ thread.title }}</h3>
         </div>
-        {% endif %}
-        <br><br>
-
-        {{post.body|replace_img|smileys|safe|linebreaks}}
-
-        {% if post.author.profile.signature %}
-        <div class="signature">{{post.author.profile.signature|replace_img|smileys|safe}}</div>
-        {% endif %}
-
-        <div style="float:right; text-align: right; font-size: 10px; margin-right:-30px">
-            {% flag_user "FP" post.author.username post.id "" post.author.profile.num_sounds %}
+        <div class="col-lg-4 text-lg-right v-spacing-2 v-spacing-top-4">
+            {% if has_subscription %}
+                <a title="Unsubscribe to stop receiving email notifications" class="no-hover btn-secondary" href="{% url "forums-thread-unsubscribe" forum.name_slug thread.id %}">Unsubscribe</a>
+            {% else %}
+                <a title="Subscribe to receive email notifications" class="no-hover btn-inverse btn-profile-adapt" href="{% url "forums-thread-subscribe" forum.name_slug thread.id %}">Subscribe</a>
+            {% endif %}
+            {% comment %}<a title="Post a reply" class="btn-primary" href="{% url "forums-reply" forum.name_slug thread.id %}"><i class="text-16 padding-right-1 bw-icon-reply" ></i>Post reply</a>{% endcomment %}
         </div>
-
-    </li>
-
-{% endfor %}
-</ul>
-
-<div class="forum_pagination">
-    <div class="forum_button"><a href="{% url "forums-reply" forum.name_slug thread.id %}">Post Reply</a></div>
-    {% show_paginator paginator page current_page request "post" %}
-</div>
-{% endblock %}
+    </div>
+    {% if thread.last_post.id %}
+        <p class="text-grey v-spacing-7">Started {{ thread.first_post.created|date:"F jS, Y" }}  ·  {{thread.num_posts|bw_intcomma}} repl{{thread.num_posts|pluralize:"y,ies"}}  ·  <a href="{% url "forums-post" forum.name_slug thread.id thread.last_post.id %}">Latest reply</a> by <a href="{% url "account" thread.last_post.author.username %}">{{ thread.last_post.author.username }}</a> {{ thread.last_post.created|timesince }} ago</p>
+    {% endif %}
+    <div class="v-spacing-top-4">
+        {% for post in page.object_list %}
+            <a name="post{{ post.id }}"></a>
+            {% display_post post forloop.counter post_counter_offset False True True %}
+            {% if not forloop.last %}
+                <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
+            {% endif %}
+        {% endfor %}
+    </div>
+    <div class="v-spacing-top-7 text-center">
+        <a class="btn-primary no-hover" href="{% url "forums-reply" forum.name_slug thread.id %}"><i class="text-16 padding-right-1 bw-icon-reply" ></i>Post reply</a>
+    </div>
+    <div class="v-spacing-top-4">
+        {% bw_paginator paginator page current_page request "thread" %}
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/forum/threads.html b/templates/forum/threads.html
index d0c9792f5..f4aaaa8ef 100644
--- a/templates/forum/threads.html
+++ b/templates/forum/threads.html
@@ -1,45 +1,54 @@
-{% extends "forum/_section.html" %}
-
-{% load paginator %}
-{% load util %}
-
-{% block title %}forums - {{forum.name}}{% endblock %}
-
-{% block breadcrumb %}
-&#187; <a href="{{forum.get_absolute_url}}">{{forum.name}}</a>
-{% endblock %}
-
-{% block section_content %}
-<div class="forum_pagination">
-	<div class="forum_button"><a href="{% url "forums-new-thread" forum.name_slug %}">New Topic</a></div>
-	{% show_paginator paginator page current_page request "thread"%}
-</div>
-
-<ul id="topics">
-{% for thread in page.object_list %}
-	<li{% if thread.status == 2 %} class="highlighted"{% endif %}>
-		<div class="latest_post">
-			{% if thread.last_post.id %}
-			<a href="{% url "forums-post" forum.name_slug thread.id thread.last_post.id %}">Latest post</a> by <a href="{% url "account" thread.last_post.author.username %}">{{thread.last_post.author.username}}</a><br />
-			{{thread.last_post.created|timesince}} ago
-			{% endif %}
-		</div>
-
-		{% if thread.last_post.created > request.last_action_time and forum.last_post.author != request.user %}
-			<img src="{{media_url}}images/forum_new.png" width="20" height="20" alt="new posts">
-		{% else %}
-			<img src="{{media_url}}images/forum_nonew.png" width="20" height="20" alt="no new posts">
-		{% endif %}
-
-		{% comment %}use url tag here because get_absolute_url does more queries!{% endcomment %}
-		<a href="{% url "forums-thread" forum.name_slug thread.id %}" class="topic_subject">{{thread.title|safe}}</a><br />
-		{{thread.num_posts}} post{{thread.num_posts|pluralize}}
-	</li>
-{% endfor %}
-</ul>
-
-<div class="forum_pagination">
-	<div class="forum_button"><a href="{% url "forums-new-thread" forum.name_slug %}">New Topic</a></div>
-	{% show_paginator paginator page current_page request "thread" %}
-</div>
-{% endblock %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load display_forum_objects %}
+{% load cache %}
+
+{% block title %}Forums - {{forum.name}}{% endblock %}
+{% block page-title %}Freesound Forums{% endblock %}
+
+{% block page-content %}
+    <div class="divider-light v-spacing-top-4 v-spacing-2"></div>
+    <div class="row middle">
+        <div class="col-md-6">
+            <ul class="navbar-forums-hot navbar-breadcrumb">
+                <li class="nav-item">
+                      <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link nav-link-black" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-md-6 v-spacing-1 v-spacing-top-1 between middle">
+            <form method="get" action="{% url "forums-search" %}" class="w-50">
+                <input type="hidden" name="advanced_search"  value="0"/>
+                <input type="hidden" name="forum" value="{% if forum %}{{forum.name_slug}}{% else %}{{current_forum.name_slug}}{% endif %}"/>
+                <div class="input-wrapper w-100">
+                    <i class="bw-icon-search input-icon"></i><input name="q" type="search" placeholder="Search in this forum..." autocomplete="off">
+                </div>
+            </form>
+            <div>
+                <a class="btn-primary no-hover" href="{% url "forums-new-thread" forum.name_slug %}"><span class="padding-right-1">+</span>New thread</a>
+            </div>
+        </div>
+    </div>
+    <div class="divider-light v-spacing-top-2"></div>
+
+    <div class="v-spacing-top-4">
+        {% for thread in page.object_list %}
+            {% display_thread thread %}
+            {% if not forloop.last %}
+                <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
+            {% endif %}
+        {% empty %}
+            <div class="bw-threads">
+                <div class="row">
+                    This forum has no threads
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+    <div class="v-spacing-top-7">
+        {% bw_paginator paginator page current_page request "thread" %}
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/front.html b/templates/front.html
index 3788e154e..40eb42e69 100644
--- a/templates/front.html
+++ b/templates/front.html
@@ -1,101 +1,208 @@
 {% extends "base.html" %}
 
+{% load static %}
 {% load cache %}
 {% load display_sound %}
+{% load display_pack %}
+{% load display_user %}
+{% load util %}
+{% load bw_templatetags %}
+{% load filter_img %}
+{% load ratings %}
 
-{% block page_css_id %}home{% endblock %}
+{% block title %}Freesound{% endblock %}
 
-{% block title %}Freesound{% endblock title %}
+{% block navbar %}{% include 'molecules/navbar_front_page.html' %}{% endblock %}
 
 {% block content %}
-<div id="content">
-    <!-- featured sound -->
-    <div id="featured_sound" class="content_box">
-        <h3>Random sound of the day</h3>
-            {% if random_sound %}
-                {% display_sound random_sound %}
-            {% endif %}
-    </div>
-    <!-- news -->
-    <div id="latest_news" class="content_box">
-        <h3>Freesound Blog</h3>
-        {% if rss_cache %}
-            {{ rss_cache }}
-        {% endif %}
-    </div>
-
-    {% include "sounds/latest_sounds.html" %}
-
-</div>
-
-<div id="sidebar">
-
-    <!-- about and t-shirts -->
-    <div class="continuous_sidebar_box">
-        <div id="about">
-            <div id="post_it">
-            <h2>Welcome to Freesound</h2>
-            <p>Freesound is a collaborative database of Creative Commons Licensed sounds. Browse, download and share sounds.</p>
+    <div class="container">
+        <div class="bw-front__hero-container">
+            <header>
+                <h1>Find any sound you like</h1>
+                <p class="bw-front__subheader">In a collaborative collection of {{ total_num_sounds|bw_intcomma }} <a class="bw-link--grey" href="/help/faq/#licenses">free sounds</a></p>
+            </header>
+            <div class="bw-front__hero-container--search">
+                <form method="get" action="/search/">
+                    <div class="typeahead-wrapper">
+                        <div class="input-wrapper">
+                            <input name="q" type="search" class="bw-nav__search bw-front__hero-search" placeholder="Search sounds..." id="search-sounds" {% if enable_query_suggestions %}data-typeahead="true" data-typeahead-suggestions-url="{% url 'query-suggestions' %}" autocomplete="off"{% endif %} />
+                        </div>
+                    </div>
+                </form>
             </div>
         </div>
-        <div id="support">
-            <img src="{{media_url}}images/content/tshirt.png" alt="" width="166" height="167" />
-            <h3>Support Us. Get your Freesound T-Shirt!</h3>
-            <p>Select your store:</p>
+        <div class="row bw-front__content">
+            <main class="col-lg-9 col-extra-right-padding-middle-lg">
+                {% if latest_sounds %}
+                    {% cache 300 bw_front_page_latest_additions %}
+                    <section class="v-spacing-3">
+                        <h3 class="v-spacing-4">Latest additions</h3>
+                        {% sound_carousel latest_sounds %}
+                    </section>
+                    {% endcache %}
+                {% endif %}
 
-            <a href="https://shop.spreadshirt.net/freesound/" class="external_link">Europe</a>
-            <a href="https://shop.spreadshirt.com/freesound/" class="external_link">US Canada and Asia</a>
-        </div>
-    </div>
+                {% if rss_cache %}
+                    {{ rss_cache }}
+                {% else %}
+                    <hr>
+                {% endif %}
 
-    {% if show_link_to_new_ui %}
-    <div class="sidebar_box">
-        <h3>New Freesound user interface</h3>
-        <p>We are working on a new user interface which will replace the current one later this year. You can <b>try it today</b> and <a href="https://freesound.org/forum/beast_whoosh_beta_ui_feedback/">provide feedback</a> by clicking on the button below.
-        </p>
-        <a class="donation_button" style="padding-left:8px;float:initial;margin-top:-10px;margin-left:98px;margin-bottom:15px;" href="{% url 'front-page' %}?fend=bw">Try the new UI</a>
-        <div style="clear:both"></div>
-        <img src="{{media_url}}images/mini_screenshot.png" width="315px" alt="New UI screenshot" />
-        <div style="margin-bottom:15px">&nbsp;</div>
-    </div>
-    {% endif %}
+                {% if trending_new_sound_ids %}
+                    {% cache 300 bw_front_page_trending_new_sounds %}
+                    <section class="v-spacing-3">
+                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded sounds created in the last week">Trending new sounds</h3>
+                        {% sound_carousel trending_new_sound_ids %}
+                    </section>
+                    <hr />
+                    {% endcache %}
+                {% endif %}
 
-    <!-- donations -->
-    <div id="donation_box">
-        <p><strong>Love Freesound?</strong></p>
-        <a class="donation_button" href="{% url 'donate' %}">Donate Now</a>
-    </div>
+                {% if trending_new_pack_ids %}
+                    {% cache 300 bw_front_page_trending_new_packs %}
+                    <section class="v-spacing-3">
+                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded pack created in the last week">Trending new packs</h3>
+                        {% pack_carousel trending_new_pack_ids %}
+                    </section>
+                    <hr />
+                    {% endcache %}
+                {% endif %}
 
-    <!-- latest forum posts -->
-    {% cache 300 latest_posts %}
-    <div id="latest_forum_posts" class="sidebar_box">
-        <h3>Active Forum Threads</h3>
-        <ul>
-            {% for forum in current_forum_threads %}
-            <li class="{% cycle 'odd' 'even' %}">
-                <a class="post_title" href="{{forum.last_post.get_absolute_url}}">{{forum.title}}</a><br />
-                in <a href="{{forum.forum.get_absolute_url}}">{{forum.forum}}</a><br />
-                by <a href="{% url 'account' forum.last_post.author.username %}">{{forum.last_post.author.username}}</a>, {{forum.last_post.created|timesince}} ago
-            </li>
-            {% endfor %}
-        </ul>
-        <a class="more_posts_button" href="{% url 'forums-forums' %}"><img src="{{media_url}}images/arrow_down.png" alt="arrow" />More Posts</a>
-    </div>
-    {% endcache %}
+                {% if trending_sound_ids %}
+                    {% cache 300 bw_front_page_trending_sounds %}
+                    <section class="v-spacing-3">
+                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded sounds during the last week">Trending sounds</h3>
+                        {% sound_carousel trending_sound_ids %}
+                    </section>
+                    <hr />
+                    {% endcache %}
+                {% endif %}
 
-    <!-- subprojects -->
-    <div class="sidebar_box">
-        <h3>Freesound Projects</h3>
-        <div id="freesound_projects">
-            <a href="https://labs.freesound.org/" target="_blank"><img src="{{media_url}}images/freesoundlabs_logo.png" width="200px" alt="Freesound Labs" /></a>
-            <a href="https://annotator.freesound.org/" target="_blank"><img src="{{media_url}}images/freesound_annotator_logo.png" width="250px" alt="Freesound Annotator" /></a>
+                {% if recent_random_sound_ids %}
+                {% cache 300 bw_front_page_recent_sounds_of_the_day %}
+                    <section class="v-spacing-3">
+                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded sounds created in the last week">Recent random sounds of the day</h3>
+                        {% sound_carousel recent_random_sound_ids %}
+                    </section>
+                    {% endcache %}
+                {% endif %}
+
+                {% if popular_searches and enable_popular_searches %}
+                    <hr />
+                    <section class="v-spacing-3">
+                        <h3 class="v-spacing-4 v-spacing-top-3">Popular searches</h3>
+                        <div class="bw-carousel-container">
+                            <div class="bw-carousel-wrapper">
+                                <div class="bw-carousel with-dots">
+                                    {% for popular_searches_slice in popular_searches|chunks:4 %}
+                                        <div>
+                                            <div class="row">
+                                                {% for search_term, url in popular_searches_slice %}
+                                                    <div class="col v-spacing-1">
+                                                        {% bw_tag search_term 4 'w-100 h-75 display-inline-block' url 1.0 %}
+                                                    </div>
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                    <hr />
+                {% endif %}
+            </main>
+            <aside class="col-lg-3">
+                <hr class="d-lg-none v-spacing-3"/>
+                {% cache 300 bw_front_page_random_sound %}
+                {% if random_sound %}  
+                <section id="random-sound-section" class="v-spacing-4">
+                    <h4 class="v-spacing-1 display-none d-xl-block">Random sound of the day</h4>
+                    <h4 class="v-spacing-1 display-none d-lg-block d-xl-none">Sound of the day</h4>
+                    <h4 class="v-spacing-1 d-lg-none">Random sound of the day</h4>
+                    <p class="text-grey v-spacing-2">Can you guess the random sound of the day?</p>
+                    {% with random_sound as sound %}
+                        <div class="display-none d-lg-block">{% display_sound_small_no_info random_sound %}</div>
+                        <div class="d-lg-none">{% display_sound_big_no_info_no_bookmark random_sound %}</div>
+                        <div id="collapsable-random-sound" class="collapsable-block collapsable-block-close bw-sound-page__information v-spacing-top-1 overflow-hidden">
+                            <div class="between line-height-percentage-150 v-spacing-top-1">
+                                <h5 class="ellipsis">
+                                    <a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}">{{ sound.original_filename }}</a>
+                                </h5>
+                                {% if sound.original_filename|length <= 22 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
+                            </div>
+                            <div class="between">
+                                <div>
+                                    <a href="{% url 'account' sound.username %}" title="Username: {{ sound.username }}">{{ sound.username|truncate_string:15 }}</a>
+                                </div>
+                                {% if sound.original_filename|length > 22 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
+                            </div>
+                            <div>
+                                <span class="text-grey">{{ sound.created|timesince }} ago</span>
+                            </div>
+                            <div class="v-spacing-top-1 overflow-hidden">
+                                {{ sound.description|striptags|safe|truncatechars_html:350 }}
+                            </div>
+                        </div>
+                        <div class="text-center v-spacing-top-2">
+                            <span data-target="collapsable-random-sound" data-show-text="Reveal sound details" data-hide-text="Hide sound details" class="collapsable-toggle"></span>
+                        </div>
+                    {% endwith %}
+                </section>
+                <hr class="v-spacing-3" />
+                {% endif %}
+                {% endcache %}
+                <section class="v-spacing-3">
+                    <h4 class="v-spacing-1">Enjoying Freesound?</h4>
+                    <p class="text-grey v-spacing-2">Please consider donating some money. It doesn't take a large donation to help us!</p>
+                    <div class="no-paddings offset-3 col-6 offset-lg-2 col-lg-8 offset-xl-0 col-xl-12">
+                        <div class="between v-spacing-2 wrap">
+                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=5">5€</a>
+                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=10">10€</a>
+                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=50">50€</a>
+                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=0">Other</a>
+                        </div>
+                    </div>
+                    {% if top_donor_user_id %}
+                        {% cache 300 bw_front_page_top_donor %}
+                            <div class="text-center">
+                                <div class="v-spacing-1 h-spacing-2">Top donor this week:</div>
+                                {% display_user_top_donor top_donor_user_id top_donor_donation_amount %}
+                            </div>
+                        {% endcache %}
+                    {% endif %}
+                </section>
+                <hr class="v-spacing-3" />
+                {% cache 300 bw_forum_threads %}
+                    <section class="v-spacing-top-2 v-spacing-4">
+                        <h4 class="v-spacing-1">Hot forum threads</h4>
+                        {% for forum in current_forum_threads %}
+                            <article class="v-padding-2">
+                                <div class="v-spacing-1">
+                                    <a class="bw-link--black" href="{{forum.last_post.get_absolute_url}}">{{ forum.title }}</a>
+                                </div>
+                                <div class="text-grey">
+                                    in <a class="bw-link--grey" href="{{forum.forum.get_absolute_url}}">{{forum.forum}}</a>,
+                                    by <a href="{% url 'account' forum.last_post.author.username %}">{{ forum.last_post.author.username }}</a>
+                                    <br>{{forum.last_post.created|timesince}} ago
+                                </div>
+                            </article>
+                        {% endfor %}
+                        <div class="center v-spacing-top-4">
+                            <a class="no-hover" href="{% url 'forums-hot-threads' %}"><button class="btn-inverse">More threads here</button></a>
+                        </div>
+                    </section>
+                    <hr class="v-spacing-3" />
+                {% endcache %}
+                <section class="v-spacing-top-2">
+                    <div class="bw-front__freesound_labs_logo v-spacing-3"></div>
+                    <p class="text-grey v-spacing-2">Freesound Labs is a directory of apps, hacks, projects, and research using Freesound. <a class="bw-link--grey" href="https://labs.freesound.org" target="_blank">Click here to learn more!</a></p>
+                </section>
+            </aside>
         </div>
     </div>
-</div>
-
-<!-- credits -->
-<div id="credits">
-    An initiative of&nbsp;&nbsp;&nbsp;<a href="https://www.upf.edu/web/mtg" id="mtg_link"><img src="{{media_url}}images/credits/mtg_nou.png" alt="Music Technology Group" /><a href="https://www.upf.edu/web/phonos/" id="mtg_link"><img src="{{media_url}}images/credits/phonos.png" alt="Phonos" /></a>
-</div>
+{% endblock %}
 
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/front.js' %}"></script>
 {% endblock %}
diff --git a/templates/geotags/geotag_picker_help_tool.html b/templates/geotags/geotag_picker_help_tool.html
deleted file mode 100644
index dbedb59ac..000000000
--- a/templates/geotags/geotag_picker_help_tool.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% load maps_js_scripts %}
-{% maps_js_scripts %}
-<script type="text/javascript">
-
-    function showGeotagPickerHelpTool(refElementID){
-        if ($("#geotag_picker_map").length === 0){
-            // If Geotag picker tool has not already been displayed, display it
-            $('#' + refElementID).append(
-                '<div style="margin-top: 35px;margin-bottom: 25px;">' +
-                '<div id="geotag_picker_map" class="geotag_edit_map_size" style="margin-left:172px; margin-bottom: 12px;"></div>' +
-                '<div style="text-align:center;"><i>latitude, longitude, zoom</i>: <input id="geotag_picker_out" size="24" type="text"></input> <a href="javascript:void(0);" onclick="copyValue();">copy to clipboard</a></div>' +
-                '</div>'
-            );
-            window.map = make_geotag_edit_map('geotag_picker_map', '{{media_url}}/images/arrow.png', showLatLonZoomFields);
-        }
-    }
-
-    function showLatLonZoomFields(map_element_id, lat, lon, zoom, box_bl_lat, box_bl_lon, box_tr_lat, box_tr_lon) {
-        $("#geotag_picker_out").val(lat.toFixed(6) + ', ' + lon.toFixed(6) + ', ' + zoom.toFixed(0));
-    }
-
-    function copyValue(){
-        $("#geotag_picker_out").select()
-        document.execCommand("copy");
-    }
-
-</script>
diff --git a/templates/geotags/geotags.html b/templates/geotags/geotags.html
index fc6dc85ac..4b0d9d8a8 100644
--- a/templates/geotags/geotags.html
+++ b/templates/geotags/geotags.html
@@ -1,143 +1,106 @@
-{% extends "sounds/_section.html" %}
-
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
 {% load absurl %}
-{% load maps_js_scripts %}
-
-{% block title %}geotags{% endblock title %}
-
-{% block head %}
-{{ block.super }}
-
-{% maps_js_scripts %}
-
-<script type="text/javascript">
-    function hideLoadingIndicator(){
-        $("#indicator").hide();
-    }
-
-    function toggleEmbed(){
-        if (!$("#embed_controls").is(':visible')){
-            $("#embed_controls").show(100);
-            $("#embed_label").text("Hide embed options");
-        }else{
-            $("#embed_controls").hide(100);
-            $("#embed_label").text("Embed this map");
-        }
-    }
-
-</script>
-
-{% endblock head %}
-
-{% block section_content %}
-
-{% if username %}
-    <h1>Geotags for <a href="{% url "account" username %}">{{ username }}</a></h1>
-{% else %}
-    {% if tag %}
-        <h1>Geotags tagged with <a href="{% url "tags" tag %}">{{tag}}</a></h1>
-    {% else %}
-        <h1>Geotags</h1>
-    {% endif %}
-{% endif %}
-
-<div id="map_canvas" style="width: 942px; height: 600px; border: 1px solid black;"></div>
-
-<div id="indicator"><img width="12px" height="12px" src="{{ media_url }}images/indicator.gif" style="float:right;margin-top:3px;"></div>
-{% if username or tag %}
-    <p>You can also view <a href="{% url "geotags" %}">all geotags</a></p>
-{% endif %}
-
-<p style="margin-top:20px;">
-    <a id="embed_label" href="javascript:void(0);" onclick="toggleEmbed();">Embed this map</a>
-</p>
-<div id="embed_controls" style="display:none;">
-    <p>
-        Embed width: <input type="number" min="100" step="1" value="900" id="embed_width" onchange="changeEmbedWidthHeightCluster();" style="width: 50px;"/>&nbsp;&nbsp;
-        Embed height: <input type="number" min="100" step="1" value="600" id="embed_height" onchange="changeEmbedWidthHeightCluster();" style="width: 50px;"/>&nbsp;&nbsp;
-        Show clusters in embed: <input type="checkbox" checked id="embed_cluster" onchange="changeEmbedWidthHeightCluster();" />
-    </p>
-    <p>
-        <textarea id="embed_code" rows="4" cols="40" readonly style="width:100%;height:45px;"></textarea>
-    </p>
-</div>
-
-<script type="text/javascript">
-    var url;
-    var center_lat;
-    var center_lon;
-    var zoom;
+{% load static %}
 
+{% block title %}
     {% if username %}
-        url = '{% url "geotags-for-user-barray" username %}';
+        Map of sounds for user {{ username }}
+    {% elif tag %}
+        Map of sounds with tag {{ tag }}
+    {% elif pack %}
+        Map of sounds for pack {{ pack.name }}
+    {% elif sound %}
+        Map for sound {{ sound.original_filename }}
     {% else %}
-        {% if tag %}
-            url = '{% url "geotags-barray" tag %}';
-        {% else %}
-            url = '{% url "geotags-barray" %}';
-            center_lat = 24;
-            center_lon = 20;
-            zoom = 2;
-            var box = document.location.hash.slice(5,document.location.hash.length);
-            if (box !== ''){
-                // If box is given, get the geotags only from that box
-                 url = '{% url "geotags-box-barray" %}?box=' + box;
-            }
-        {% endif %}
+        Map of sounds
     {% endif %}
+{% endblock %}
+{% block page-title-custom %}
+    <div class="col-11 no-paddings">
+        <h1 class="line-height-percentage-140 ellipsis">
+            {% if username %}
+                Map of sounds for user <a href="{% url "account" username %}">{{ username }}</a>
+            {% elif tag %}
+                Map of sounds with tag <a href="{% url "tags" tag %}">{{tag}}</a>
+            {% elif pack %}
+                Map of sounds for pack <a href="{% url "pack" pack.user.username pack.id %}">{{ pack.name }}</a>
+            {% elif sound %}
+                Map for sound <a href="{% url "sound" sound.user.username sound.id %}">{{ sound.original_filename }}</a>
+            {% else %}
+                Map of sounds
+            {% endif %}
+        </h1>
+    </div>
+    <div class="col-12 no-paddings v-spacing-top-negative-4 text-right text-grey d-none d-md-block">
+        <span id="indicator">Loading sounds... <img width="12px" height="12px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}"></span>
+    </div>
+{% endblock %}
 
-    {% if center_lat and center_lon and zoom %}
-        center_lat = {{ center_lat }};
-        center_lon = {{ center_lon }};
-        zoom = {{ zoom }};
+{% block page-content %}
+    <div class="col-12 v-spacing-top-3 no-paddings {% if sound or username %}v-spacing-2{% endif %}">
+        <div id="mapCanvas" class="map main-map"
+             data-map-center-lat="{{ center_lat }}"
+             data-map-center-lon="{{ center_lon }}"
+             data-map-zoom="{{ zoom }}"
+             data-map-show-search="{% if sound %}false{% else %}true{% endif %}"
+             data-map-username="{{ username }}"
+             data-map-pack-id="{{ pack.id }}"
+             data-map-tag="{{ tag }}"
+             data-geotags-url="{{ url }}"
+             data-geotags-url-box="{% url "geotags-box-barray" %}"
+             data-geotags-embed-base-url="{% absurl 'embed-geotags-box-iframe' %}">
+        </div>
+    </div>
+
+    <div class="row middle">
+        <div class="col-md-10 v-spacing-top-3 v-spacing-2">
+            {% if username or sound or pack %}
+                <a class="no-hover btn-secondary btn-inverse" href="{% url "geotags" %}">View all geotags</a>
+            {% else %}
+                <div class="start">
+                    <div class="input-wrapper">
+                        <input data-base-url="{% url "geotags" %}" id="tagFilter" type="search" name="t" class="bw-forums__input-search" placeholder="Filter by tag..." value="{% if tag %}{{ tag }}{% endif %}" />
+                    </div>
+                    <a class="no-hover" href="{% url "geotags" %}"><button class="btn-secondary btn-inverse h-spacing-left-1">Clear filter</button></a>
+                </div>
+            {% endif %}
+        </div>
+        <div class="col-md-2 v-spacing-top-2 v-spacing-2">
+            {% if not sound %}
+            <div><a id="embedControlsLabel" href="javascript:void(0);">Embed this map</a></div>
+            {% endif %}
+        </div>
+    </div>
+
+    {% if not sound %}
+    <div class="row">
+        <div class="col-md-12 v-spacing-top-4">
+            <div id="embedControls" class="display-none w-100">
+                <form class="bw-form">
+                    <div class="w-50">
+                        <div class="row">
+                            <div class="col-md-6">
+                                <label for="embedWidthInput">Embed width</label> <input type="number" min="100" step="1" value="900" id="embedWidthInput" style="margin-bottom:0px;"/>&nbsp;&nbsp;
+                            </div>
+                            <div class="col-md-6">
+                                <label for="embedHeightInput">Embed height</label> <input type="number" min="100" step="1" value="600" id="embedHeightInput" style="margin-bottom:0px;"/>&nbsp
+                            </div>
+                        </div>
+                    </div>
+                    <label for="embedClusterCheck">Show clusters in embed</label> <input class="bw-checkbox" type="checkbox" checked id="embedClusterCheck" />
+                    <p>
+                        <textarea id="embedCode" readonly style="width:100%;height:60px;"></textarea>
+                    </p>
+                </form>
+                
+            </div>
+        </div>
+    </div>
     {% endif %}
-
-    var show_search = true;
-    var show_style_selector = true;
-    make_sounds_map(url, 'map_canvas', hideLoadingIndicator, updateEmbedCode, center_lat, center_lon, zoom, show_search, show_style_selector);
-
-    var current_lat;
-    var current_lon;
-    var current_zoom;
-    var current_box_bl_la;
-    var current_box_bl_lon;
-    var current_box_tr_lat;
-    var current_box_tr_lon;
-
-    function updateEmbedCode(_, lat, lon, zoom, box_bl_lat, box_bl_lon, box_tr_lat, box_tr_lon){
-        // Store lat, lon and zoom globally so we can use them later to call updateEmbedCode without accessing map
-        current_lat = lat;
-        current_lon = lon;
-        current_zoom = zoom;
-        current_box_bl_la = box_bl_lat;
-        current_box_bl_lon = box_bl_lon;
-        current_box_tr_lat = box_tr_lat;
-        current_box_tr_lon = box_tr_lon;
-
-        // Generate embed code
-        var box = "#box=" + box_bl_lat + "," + box_bl_lon+"," + box_tr_lat+"," + box_tr_lon;
-        var width = parseInt($("#embed_width").val(), 10);
-        var height = parseInt($("#embed_height").val(), 10);
-        var cluster = 'on';
-        if (!$('#embed_cluster').is(':checked')) {
-            cluster = 'off';
-        }
-        var embed_code = "<iframe frameborder=\"0\" scrolling=\"no\" src=\"{% absurl 'embed-geotags-box-iframe' %}?c_lat=" + lat + "&c_lon=" + lon + "&z=" + zoom + "&c=" + cluster + "&w=" + width + "&h=" + height {% if username %}+ "&username={{ username }}"{% endif %}{% if tag %}+ "&tag={{ tag }}"{% endif %} + box + "\" width=\"" + width + "\" height=\"" + height + "\"></iframe>";
-        var embed_code_element = $("#embed_code");
-        embed_code_element.text(embed_code);
-
-        // Update page URL so it can directly be used to share the map
-        var new_url = window.location.href;
-        new_url = updateQueryStringParameter(new_url, 'c_lat', lat);
-        new_url = updateQueryStringParameter(new_url, 'c_lon', lon);
-        new_url = updateQueryStringParameter(new_url, 'z', zoom);
-        window.history.replaceState( {} , document.title, new_url );
-	}
-
-	function changeEmbedWidthHeightCluster(){
-        updateEmbedCode(undefined, current_lat, current_lon, current_zoom, current_box_bl_la, current_box_bl_lon, current_box_tr_lat, current_box_tr_lon);
-    }
-
-</script>
-
 {% endblock %}
+
+{% block extrabody %}
+    {% bw_maps_js_scripts %}
+    <script src="{% static 'bw-frontend/dist/map.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/geotags/infowindow.html b/templates/geotags/infowindow.html
index 172c9126d..7da30a7b5 100644
--- a/templates/geotags/infowindow.html
+++ b/templates/geotags/infowindow.html
@@ -1,11 +1,25 @@
-<div class="infowindow_player" style="display: inline; float: left; margin-right: 5px; height: 50px;">
-    {% include "sounds/player_small.html" %}
-</div>
+{% load display_sound %}
+{% load bw_templatetags %}
 
-<p style="width: 190px; margin-bottom: 0;"><a class="title" target="_blank" href="{% url "sound" sound.user.username sound.id %}">
-    {{sound.original_filename}}</a>
-    by <a target="_blank" class="user" href="{% url "account" sound.user.username %}">
-    {{sound.user.username}}</a>
-    (<a href="javascript:setMaxZoomCenter({{sound.geotag.lat}}, {{sound.geotag.lon}}, {{sound.geotag.zoom}})">zoom in</a>)
-</p>
-<br class="clear" />
+<div>
+    <div id="infoWindowPlayerWrapper-{{ sound.id }}" class="padding-top-2">
+        {% if minimal %}
+            {% display_sound_minimal sound %}
+        {% else %}
+            {% display_sound_small sound %}
+        {% endif %}
+    </div>
+    {% if minimal %}
+        <div class="overflow-hidden">
+            <a href="#"></a>{% comment %}Placing an empty anchor here is a workaround to prevent mapbox infowindows to focus first anchor found{% endcomment %}
+            <a target="_blank" href="{% url "sound" sound.user.username sound.id %}">
+            {{sound.original_filename}}</a>
+            by <a target="_blank" class="user" href="{% url "account" sound.user.username %}">
+            {{sound.user.username}}</a> | <a class="cursor-pointer" id="infoWindowZoomLink-{{ sound.id }}" data-lat="{{ sound.geotag.lat }}" data-lon="{{ sound.geotag.lon }}" data-zoom="{{ sound.geotag.zoom }}">{% bw_icon 'search' %}</a>
+        </div>
+    {% else %}
+        <div class="text-right">
+            <a class="cursor-pointer" id="infoWindowZoomLink-{{ sound.id }}" data-lat="{{ sound.geotag.lat }}" data-lon="{{ sound.geotag.lon }}" data-zoom="{{ sound.geotag.zoom }}">{% bw_icon 'search' %} Zoom in</a>
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/templates/messages/_section.html b/templates/messages/_section.html
deleted file mode 100644
index b083f65c7..000000000
--- a/templates/messages/_section.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{% extends "base.html" %}
-
-
-{% block tab_home_active %}active_tab{% endblock %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-
-<div id="messages_header">
-	<h2>Messages</h2>
-
-	<div class="messages_pagination">
-		{% block message_pagination %}{% endblock message_pagination %}
-
-		<ul id="message_tabs">
-			<li class="{% block tab_messages_inbox_active %}{% endblock %}"><a href="{% url "messages" %}">Inbox</a></li>
-			<li class="{% block tab_messages_sent_active %}{% endblock %}"><a href="{% url "messages-sent" %}">Sent messages</a></li>
-			<li class="{% block tab_messages_archived_active %}{% endblock %}"><a href="{% url "messages-archived" %}">Archived messages</a></li>
-			<li class="{% block tab_messages_new_active %}{% endblock %}"><a href="{% url "messages-new" %}">New message</a></li>
-		</ul>
-	</div>
-</div>
-
-{% block section_content %}
-{% endblock %}
-
-</div> <!-- END of Content area -->
-{% endblock %}
diff --git a/templates/messages/archived.html b/templates/messages/archived.html
index be22c607a..67d0263c6 100644
--- a/templates/messages/archived.html
+++ b/templates/messages/archived.html
@@ -1,12 +1,2 @@
-{% extends "messages/message_list.html" %}
-
-{% block tab_messages_archived_active %}active{% endblock %}
-
-{% block title %}messages - archived{% endblock %}
-
-{% block message_section_name %}Archived messages{% endblock %}
-
-{% block options %}
-	<option value="d">delete</option>
-	<option value="r">mark as read</option>
-{% endblock %}
\ No newline at end of file
+{% extends "messages/messages_list.html" %}
+{% block title %}Messages - Archived{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/messages/display_message.html b/templates/messages/display_message.html
similarity index 100%
rename from templates_bw/messages/display_message.html
rename to templates/messages/display_message.html
diff --git a/templates/messages/inbox.html b/templates/messages/inbox.html
index 956d1837c..61d97a5ba 100644
--- a/templates/messages/inbox.html
+++ b/templates/messages/inbox.html
@@ -1,13 +1,2 @@
-{% extends "messages/message_list.html" %}
-
-{% block tab_messages_inbox_active %}active{% endblock %}
-
-{% block title %}messages - inbox{% endblock %}
-
-{% block message_section_name %}Inbox{% endblock %}
-
-{% block options %}
-	<option value="a">archive</option>
-	<option value="d">delete</option>
-	<option value="r">mark as read</option>
-{% endblock %}
\ No newline at end of file
+{% extends "messages/messages_list.html" %}
+{% block title %}Messages - Inbox{% endblock %}
\ No newline at end of file
diff --git a/templates/messages/message.html b/templates/messages/message.html
index 347ac333e..4ac0bef8a 100644
--- a/templates/messages/message.html
+++ b/templates/messages/message.html
@@ -1,30 +1,56 @@
-{% extends "messages/_section.html" %}
-
-
-{% load util %}
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
 {% load smileys %}
 {% load flag_user %}
-
-{% block title %}messages - {{message.subject}} - {{message.user_from.username}}{% endblock %}
-
-{% block section_content %}
-
-<div class="message_container">
-
-	<dl class="message_header">
-		<dt>From: </dt> <dd><a href="{% url "account" message.user_from.username %}">{{message.user_from.username}}</a></dd>
-		<dt>To: </dt> <dd><a href="{% url "account" message.user_to.username %}">{{message.user_to.username}}</a></dd>
-		<dt>Date: </dt> <dd>{{message.created|date:"F jS, Y"}}</dd>
-		<dt>Subject:</dt> <dd>{{message.subject}}</dd>
-        <dt>&nbsp</dt> <dd></dd>
-	</dl>
-
-	<div class="message-body">
-		{{message.body.body|smileys|safe|linebreaks}}
-	</div>
-	<span class="reply_button"><a href="{% url "message-reply" message.id %}">Reply</a></span>
-    <div style="font-size: 11px;font-weight: normal;margin-left: 5px">{% flag_user "PM" message.user_from.username message.id "" message.user_from.profile.num_sounds %}</div>
-</div>
-
-{% endblock %}
-
+{% load util %}
+{% block title %}Messages - {{message.subject}} - {{message.user_from.username}}{% endblock %}
+{% block page-title %}Messages{% endblock %}
+
+{% block page-content %}
+    {% include 'messages/messages_navbar.html' %}
+    <div class="v-spacing-top-4">
+        <div class="row bw-message__message_page">
+            <div class="col-lg-3">
+                {% if request.user != message.user_from %}
+                    <div class="text-light-grey font-weight-normal text-20 v-spacing-3">Message from:</div>
+                    <div class="row middle">
+                        <div class="col-3 col-lg-4">
+                            {% bw_user_avatar message.user_from.profile.locations.avatar.L.url message.user_from.username 70 %}
+                        </div>
+                        <div class="col-8">
+                            <h6><a href="{% url "account" message.user_from.username %}">{{ message.user_from.username }}</a></h6>
+                            <p class="text-grey no-margins">{{ message.user_from.profile.num_sounds|bw_intcomma }} sound{{ message.user_from.profile.num_sounds|pluralize }}</p>
+                            <p class="text-grey no-margins">{{ message.user_from.profile.num_posts|bw_intcomma }} post{{ message.user_from.profile.num_posts|pluralize }}</p>
+                        </div>
+                    </div>
+                {% else %}
+                    <div class="text-light-grey font-weight-normal text-20 v-spacing-3">Message to:</div>
+                    <div class="row middle">
+                        <div class="col-3 col-lg-4">
+                            {% bw_user_avatar message.user_to.profile.locations.avatar.L.url message.user_to.username 70 %}
+                        </div>
+                        <div class="col-8">
+                            <h6><a href="{% url "account" message.user_to.username %}">{{ message.user_to.username }}</a></h6>
+                            <p class="text-grey no-margins">{{ message.user_to.profile.num_sounds|bw_intcomma }} sound{{ message.user_to.profile.num_sounds|pluralize }}</p>
+                            <p class="text-grey no-margins">{{ message.user_to.profile.num_posts|bw_intcomma }} post{{ message.user_to.profile.num_posts|pluralize }}</p>
+                        </div>
+                    </div>
+                {% endif %}
+                <div class="text-light-grey v-spacing-top-2 v-spacing-4">Sent {{message.created|timesince}} ago</div>
+            </div>
+            <div class="col-lg-9">
+                <h5>{{ message.subject }}</h5>
+                <div>
+                    {{ message.body.body|smileys|safe|linebreaks|strip_unnecessary_br }}
+                </div>
+                <div class="right">{% flag_user "PM" message.user_from.username message.id "" message.user_from.profile.num_sounds %}</div> 
+            </div>
+        </div>            
+        <div class="col-12">
+            <div class="v-spacing-top-5 text-center">
+                <a class="btn-primary no-hover" href="{% url "message-reply" message.id %}"><i class="text-16 padding-right-1 bw-icon-reply" ></i>Reply</a>
+            </div>
+        </div> 
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/messages/message_list.html b/templates/messages/message_list.html
deleted file mode 100644
index 755b82d01..000000000
--- a/templates/messages/message_list.html
+++ /dev/null
@@ -1,57 +0,0 @@
-{% extends "messages/_section.html" %}
-
-
-{% load paginator %}
-
-{% comment %}
-{% block message_pagination %}
-	{% show_paginator paginator page current_page request "message" %}
-{% endblock message_pagination %}
-{% endcomment %}
-
-{% block section_content %}
-
-<form method="post" action="{% url "messages-change-state" %}" class="messages_form">{% csrf_token %}
-	<table class="messages_table">
-		<tr>
-			<th id="messages_table_header_checkbox"><input id="select_all" type="checkbox" /></th>
-			<th id="messages_table_header_subject">Subject</th>
-			<th id="messages_table_header_from">From</th>
-			<th id="messages_table_header_to">To</th>
-			<th id="messages_table_header_date">Date</th>
-		</tr>
-		{% for message in page.object_list %}
-		<tr {% if not message.is_read %} class="unread"{% endif %}>
-			<td><input name="cb_{{message.id}}" type="checkbox" class="message_checkbox" /></td>
-			<td><a href="{% url "message" message.id %}">{{message.subject}}</a></td>
-			<td><a href="{% url "account" message.user_from.username %}">{{message.user_from.username}}</a></td>
-			<td><a href="{% url "account" message.user_to.username %}">{{message.user_to.username}}</a></td>
-			<td>{{message.created|date:"F jS, Y"}}</td>
-		</tr>
-		{% endfor %}
-	</table>
-
-	<div class="messages_actions_box">
-		<select name="choice" id="id_choice">
-			{% block options %}
-			{% endblock %}
-		</select>
-		<input type="hidden" name="next" value="{{request.path}}" />
-		<input type="submit" name="submit" value="go!" />
-	</div>
-	<div class="messages_pagination_box">
-		{% show_paginator paginator page current_page request "message" %}
-	</div>
-
-</form>
-
-<script type="text/javascript">
-	$('#select_all').click(function(event) {
-		var selectionOn = this.checked;
-		$('.message_checkbox').each( function (index, element) {
-			element.checked = selectionOn;
-		});
-	})
-</script>
-
-{% endblock %}
diff --git a/templates_bw/messages/messages_list.html b/templates/messages/messages_list.html
similarity index 100%
rename from templates_bw/messages/messages_list.html
rename to templates/messages/messages_list.html
diff --git a/templates_bw/messages/messages_navbar.html b/templates/messages/messages_navbar.html
similarity index 100%
rename from templates_bw/messages/messages_navbar.html
rename to templates/messages/messages_navbar.html
diff --git a/templates/messages/new.html b/templates/messages/new.html
index b4bd46765..c4327bdbe 100644
--- a/templates/messages/new.html
+++ b/templates/messages/new.html
@@ -1,46 +1,30 @@
-{% extends "messages/_section.html" %}
-
-
-{% block tab_messages_new_active %}active{% endblock %}
-
-{% block title %}messages - new message{% endblock %}
-
-{% block section_content %}
-
-<style> #username_check, #check_success, #spinner { display:none; color: #bd2d33; font-style: italic; } #check_success {color:green;}</style>
-<script type="text/javascript" src="{{media_url}}js/jquery.autocomplete.min.js"></script>
-<script>
-    $(function() {
-      unsecureImageCheck($('#{{ form.body.id_for_label }}'));
-
-      $.get('{% url "messages-username_lookup" %}', function(data){
-        $('#id_to').autocomplete(data);
-      });
-      $("#id_to").focus();
-
-      $('#id_to').parent().append('<div id="spinner"> Checking...<img src="{{ media_url }}images/indicator.gif" /></div><div id="username_check">Sorry, this username is not correct.</div><div id="check_success">Username is correct</div>');
-
-      // When the user enters a username we check if it's available
-      $("#id_to").focusout(function(){
-        $('#username_check').hide();
-        $('#check_success').hide();
-        if ($("#id_to").val()) {
-          $('#spinner').show();
-          $.get('{% url "check_username" %}',
-              {'username': $("#id_to").val()},
-              function(data){
-                $('#username_check').toggle(data.result);
-                $('#spinner').hide();
-                $('#check_success').toggle(!data.result);
-              }, "json" );
-        }
-      });
-    });
-</script>
-
-<form method="post" action=".">{% csrf_token %}
-    {{form.as_p}}
-<input type="submit" value="send" />
-</form>
+{% extends "simple_page.html" %}
+{% load static %}
+{% load bw_templatetags %}
+{% load smileys %}
+{% load flag_user %}
+{% block title %}Messages - New message{% endblock %}
+{% block page-title %}Messages{% endblock %}
+
+{% block page-content %}
+    {% include 'messages/messages_navbar.html' %}
+    <div class="v-spacing-top-4">
+        <form method="post" action="." class="bw-new-thread__form w-100 disable-on-submit">{% csrf_token %}
+            <div class="row">
+                <div class=" offset-lg-2 col-lg-8 ">
+                    <h5 class="v-spacing-4">{% if form.initial %}Reply to message{% else %}New message{% endif %}</h5>
+                    {{form.as_p}}
+                </div>
+            </div>
+            <div class="row v-spacing-top-5 v-spacing-3">
+                <div class="col-lg-8 offset-lg-2">
+                    <button class="btn-primary w-100">Send message</button>
+                </div>
+            </div>
+        </form>
+    </div>
+{% endblock %}
 
+{% block extrabody %}
+<script src="{% static 'bw-frontend/dist/messages.js' %}"></script>
 {% endblock %}
diff --git a/templates/messages/sent.html b/templates/messages/sent.html
index 0357e45df..faca18e7b 100644
--- a/templates/messages/sent.html
+++ b/templates/messages/sent.html
@@ -1,12 +1,2 @@
-{% extends "messages/message_list.html" %}
-
-{% block tab_messages_sent_active %}active{% endblock %}
-
-{% block title %}messages - sent messages{% endblock %}
-
-{% block message_section_name %}Sent messages{% endblock %}
-
-{% block options %}
-	<option value="d">delete</option>
-	<option value="r">mark as read</option>
-{% endblock %}
\ No newline at end of file
+{% extends "messages/messages_list.html" %}
+{% block title %}Messages - Sent{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/moderation/assign_sounds.html b/templates/moderation/assign_sounds.html
similarity index 100%
rename from templates_bw/moderation/assign_sounds.html
rename to templates/moderation/assign_sounds.html
diff --git a/templates_bw/moderation/assigned.html b/templates/moderation/assigned.html
similarity index 100%
rename from templates_bw/moderation/assigned.html
rename to templates/moderation/assigned.html
diff --git a/templates_bw/moderation/display_ticket.html b/templates/moderation/display_ticket.html
similarity index 100%
rename from templates_bw/moderation/display_ticket.html
rename to templates/moderation/display_ticket.html
diff --git a/templates_bw/moderation/guide.html b/templates/moderation/guide.html
similarity index 100%
rename from templates_bw/moderation/guide.html
rename to templates/moderation/guide.html
diff --git a/templates_bw/moderation/modal_annotations.html b/templates/moderation/modal_annotations.html
similarity index 100%
rename from templates_bw/moderation/modal_annotations.html
rename to templates/moderation/modal_annotations.html
diff --git a/templates_bw/moderation/modal_pending.html b/templates/moderation/modal_pending.html
similarity index 100%
rename from templates_bw/moderation/modal_pending.html
rename to templates/moderation/modal_pending.html
diff --git a/templates_bw/moderation/modal_tardy.html b/templates/moderation/modal_tardy.html
similarity index 100%
rename from templates_bw/moderation/modal_tardy.html
rename to templates/moderation/modal_tardy.html
diff --git a/templates_bw/moderation/moderation_navbar.html b/templates/moderation/moderation_navbar.html
similarity index 100%
rename from templates_bw/moderation/moderation_navbar.html
rename to templates/moderation/moderation_navbar.html
diff --git a/templates_bw/moderation/ticket.html b/templates/moderation/ticket.html
similarity index 100%
rename from templates_bw/moderation/ticket.html
rename to templates/moderation/ticket.html
diff --git a/templates_bw/molecules/bw_follow_tags_widget.html b/templates/molecules/bw_follow_tags_widget.html
similarity index 100%
rename from templates_bw/molecules/bw_follow_tags_widget.html
rename to templates/molecules/bw_follow_tags_widget.html
diff --git a/templates_bw/molecules/carousel.html b/templates/molecules/carousel.html
similarity index 100%
rename from templates_bw/molecules/carousel.html
rename to templates/molecules/carousel.html
diff --git a/templates_bw/molecules/confirmation_modal.html b/templates/molecules/confirmation_modal.html
similarity index 100%
rename from templates_bw/molecules/confirmation_modal.html
rename to templates/molecules/confirmation_modal.html
diff --git a/templates_bw/molecules/footer.html b/templates/molecules/footer.html
similarity index 100%
rename from templates_bw/molecules/footer.html
rename to templates/molecules/footer.html
diff --git a/templates_bw/molecules/geotag_form_field.html b/templates/molecules/geotag_form_field.html
similarity index 100%
rename from templates_bw/molecules/geotag_form_field.html
rename to templates/molecules/geotag_form_field.html
diff --git a/templates_bw/molecules/license_form_field.html b/templates/molecules/license_form_field.html
similarity index 100%
rename from templates_bw/molecules/license_form_field.html
rename to templates/molecules/license_form_field.html
diff --git a/templates_bw/molecules/maps_js_scripts.html b/templates/molecules/maps_js_scripts.html
similarity index 100%
rename from templates_bw/molecules/maps_js_scripts.html
rename to templates/molecules/maps_js_scripts.html
diff --git a/templates_bw/molecules/modal_base.html b/templates/molecules/modal_base.html
similarity index 100%
rename from templates_bw/molecules/modal_base.html
rename to templates/molecules/modal_base.html
diff --git a/templates_bw/molecules/navbar.html b/templates/molecules/navbar.html
similarity index 100%
rename from templates_bw/molecules/navbar.html
rename to templates/molecules/navbar.html
diff --git a/templates_bw/molecules/navbar_common_actions.html b/templates/molecules/navbar_common_actions.html
similarity index 94%
rename from templates_bw/molecules/navbar_common_actions.html
rename to templates/molecules/navbar_common_actions.html
index fcb662a3d..a7e7e8491 100644
--- a/templates_bw/molecules/navbar_common_actions.html
+++ b/templates/molecules/navbar_common_actions.html
@@ -44,9 +44,6 @@
         <li class="bw-nav__action dropdown-item">
             <a class="bw-link--grey" href="{% url 'wiki' %}faq/">Help</a>
         </li>
-        <li class="bw-nav__action dropdown-item">
-            <a class="bw-link--grey" href="{{ next_path }}?&fend=ng">Switch to old UI</a>
-        </li>
         {% comment %}
         <li class="bw-nav__action dropdown-item">
             <a class="bw-link--black" href="{% url 'wiki' %}developers/">Developers</a>
diff --git a/templates_bw/molecules/navbar_front_page.html b/templates/molecules/navbar_front_page.html
similarity index 100%
rename from templates_bw/molecules/navbar_front_page.html
rename to templates/molecules/navbar_front_page.html
diff --git a/templates_bw/molecules/navbar_search_page.html b/templates/molecules/navbar_search_page.html
similarity index 100%
rename from templates_bw/molecules/navbar_search_page.html
rename to templates/molecules/navbar_search_page.html
diff --git a/templates_bw/molecules/navbar_user_section.html b/templates/molecules/navbar_user_section.html
similarity index 100%
rename from templates_bw/molecules/navbar_user_section.html
rename to templates/molecules/navbar_user_section.html
diff --git a/templates_bw/molecules/news_cache.html b/templates/molecules/news_cache.html
similarity index 100%
rename from templates_bw/molecules/news_cache.html
rename to templates/molecules/news_cache.html
diff --git a/templates_bw/molecules/object_selector.html b/templates/molecules/object_selector.html
similarity index 100%
rename from templates_bw/molecules/object_selector.html
rename to templates/molecules/object_selector.html
diff --git a/templates_bw/molecules/pack_form_field.html b/templates/molecules/pack_form_field.html
similarity index 100%
rename from templates_bw/molecules/pack_form_field.html
rename to templates/molecules/pack_form_field.html
diff --git a/templates_bw/molecules/paginator.html b/templates/molecules/paginator.html
similarity index 100%
rename from templates_bw/molecules/paginator.html
rename to templates/molecules/paginator.html
diff --git a/templates_bw/molecules/plausible_scripts.html b/templates/molecules/plausible_scripts.html
similarity index 100%
rename from templates_bw/molecules/plausible_scripts.html
rename to templates/molecules/plausible_scripts.html
diff --git a/templates_bw/molecules/sources_form_field.html b/templates/molecules/sources_form_field.html
similarity index 100%
rename from templates_bw/molecules/sources_form_field.html
rename to templates/molecules/sources_form_field.html
diff --git a/templates_bw/molecules/tags_form_field.html b/templates/molecules/tags_form_field.html
similarity index 100%
rename from templates_bw/molecules/tags_form_field.html
rename to templates/molecules/tags_form_field.html
diff --git a/templates_bw/molecules/toast.html b/templates/molecules/toast.html
similarity index 100%
rename from templates_bw/molecules/toast.html
rename to templates/molecules/toast.html
diff --git a/templates_bw/monitor/analysis.html b/templates/monitor/analysis.html
similarity index 100%
rename from templates_bw/monitor/analysis.html
rename to templates/monitor/analysis.html
diff --git a/templates_bw/monitor/base.html b/templates/monitor/base.html
similarity index 100%
rename from templates_bw/monitor/base.html
rename to templates/monitor/base.html
diff --git a/templates_bw/monitor/moderation.html b/templates/monitor/moderation.html
similarity index 100%
rename from templates_bw/monitor/moderation.html
rename to templates/monitor/moderation.html
diff --git a/templates/monitor/moderators_stats.html b/templates/monitor/moderators_stats.html
deleted file mode 100644
index d653224a0..000000000
--- a/templates/monitor/moderators_stats.html
+++ /dev/null
@@ -1,137 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}
-    Moderator's activity stats
-{% endblock title %}
-
-{% block head %}
-{{ block.super }}
-<style>
-.moderator{ 
-  margin: 10px auto;
-  width: 360px;
-  height: 170px;
-  border: 1px solid #d1d5da;
-  border-radius: 3px;
-}
-.moderators-container{
-  display:flex;
-  flex-wrap: wrap;
-}
-.area {
-    fill: steelblue;
-    clip-path: url(#clip);
-}
-
-</style>
-{% endblock head %}
-
-{% block content %}
-
-    <h2>Moderator's activity stats (last 6 months)</h2>
-    <div class="moderators-container">
-      {% for numb_mod, moderator in moderators%}
-      <div data-moderator="{{moderator.id}}" class="moderator" > 
-        <div class="active_user" style="height: 33px; margin-left: 5px;">
-          <span style="float:right;">#{{forloop.counter}} </span>
-          <div class="active_user_info">
-           <img src="{{moderator.profile.locations.avatar.M.url}}" alt="avatar" />
-          <div class="post_author">
-            <a href="{% url "account" moderator.username %}">{{moderator.username}}</a>
-          </div><!-- .post_author -->
-
-            <div class="people_user_info">
-             Moderations: {{numb_mod}}
-            </div>         
-          </div><!-- .active_user_info -->
-        </div>
-          <div style="background-color: #f6f8fa; height: 122px;">
-          <svg width="355" height="130"></svg>
-          </div>
-
-      </div>
-      {% endfor %}
-    </div>
-
-<script src="https://d3js.org/d3.v4.min.js"></script>
-<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
-<script>
-$( document ).ready(function() {
-    var numbMonths = 6;
-    $(".moderator").each(function(){
-      var that = $(this);
-      $.get('{% url "monitor-moderator-stats-ajax" %}', 
-          {user_id: that.data("moderator")}, 
-          function(data){
-            data.sort(function(a, b) { return d3.ascending(new Date(a["day"]), new Date(b["day"]));});
-            var svg = d3.select(that.find('svg').get(0)),
-            margin = {top: 20, right: 20, bottom: 30, left: 60},
-            width = +svg.attr("width") - margin.left - margin.right,
-            height = +svg.attr("height") - margin.top - margin.bottom;
-            var x = d3.scaleTime().rangeRound([0, width]);
-            var formatDate = d3.timeFormat("%d %m");
-
-            var y = d3.scaleLinear()
-            .rangeRound([height, 0]);
-
-            var xAxis = d3.axisBottom(x),
-            yAxis = d3.axisLeft(y).ticks(5);
-
-            svg.append("defs").append("clipPath")
-            .attr("id", "clip")
-            .append("rect")
-            .attr("width", width)
-            .attr("height", height);
-
-            var g = svg.append("g")
-            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-            var concat = [].concat.apply([], data);
-
-            var maxDay = new Date(); 
-            var minDay = new Date(); 
-            minDay.setDate(maxDay.getDate()-numbMonths*365/12); 
-            x.domain([minDay, maxDay]);
-            y.domain([0, d3.max(concat, function(d) { return parseInt(d['id__count'])})]);
-
-            var area = d3.area()
-            .curve(d3.curveMonotoneX)
-            .x(function(d) { return x(d.day); })
-            .y0(height)
-            .y1(function(d) { return y(parseInt(d.id__count)); });
-            var domain = x.domain(); 
-            var buckets = d3.timeDays(domain[0], domain[1]); 
-            var newData = [];
-            for (var i=0;i<buckets.length;i++) { 
-              newData[i] = {};
-              newData[i]['day'] = buckets[i];
-              newData[i]['id__count'] = 0;
-
-              for (var z=0;z<data.length;z++) { 
-                var date1 = newData[i]['day'];
-                var date2 = new Date(data[z]['day']);
-                if (formatDate(date1) == formatDate(date2)) {
-                  newData[i]['id__count'] = parseInt(data[z]['id__count']);
-                }
-              }
-            }
-
-            g.append("path")
-              .datum(newData)
-              .attr("class", "area")
-              .attr("d", area);
-
-            g.append("g")
-              .attr("class", "axis axis--x")
-              .attr("transform", "translate(0," + height + ")")
-              .call(xAxis);
-
-            g.append("g")
-              .attr("class", "axis axis--y")
-              .call(yAxis);
-
-      });
-    });
-});
-</script>
-{% endblock content %}
diff --git a/templates/monitor/monitor.html b/templates/monitor/monitor.html
deleted file mode 100644
index 4abbd06bb..000000000
--- a/templates/monitor/monitor.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}
-    Monitor
-{% endblock title %}
-
-{% block content %}
-
-    <h2>Monitor</h2>
-    <!-- include permission checks here -->
-    <h3>Sound moderation status</h3>
-    <ul>
-        <li>{{new_upload_count}} new sound{{ new_upload_count|pluralize }}</li>
-        <li>{{tardy_moderator_sounds_count}} tardy moderator{{ tardy_moderator_sounds_count|pluralize }} sound{{ tardy_moderator_sounds_count|pluralize }}</li>
-        <li>{{tardy_user_sounds_count}} tardy user{{ tardy_moderator_sounds_count|pluralize }} sound{{ tardy_user_sounds_count|pluralize }}</li>
-        <li>See <a href="{% url 'monitor-moderators-stats' %}">moderator's activity stats</a></li>
-    </ul>
-
-    <h3>Processing system status</h3>
-    <ul>
-        <li>{{ sounds_pending_count }} sound{{ sounds_pending_count|pluralize }} pending to process - <a href="{% url "monitor-processing-process" %}?prs=PE">send to process</a></li>
-        <li>{{ sounds_queued_count }} sound{{ sounds_queued_count|pluralize }} are queued for processing - <a href="{% url "monitor-processing-process" %}?pros=QU">send to process</a></li>
-        <li>{{ sounds_processing_count }} sound{{ sounds_processing_count|pluralize }} currently processing - <a href="{% url "monitor-processing-process" %}?pros=PR">send to process</a></li>
-        <li>{{ sounds_failed_count }} sound{{ sounds_failed_count|pluralize }} failed processing - <a href="{% url "monitor-processing-process" %}?prs=FA">send to process</a></li>
-        <li>{{ sounds_ok_count }} sound{{ sounds_ok_count|pluralize }} processed ok</li>
-    </ul>
-
-    <h3>Analysis system status</h3>
-    <table style="min-width:500px;">
-    {% for analyzer_name, analyzer_data in analyzers_data %}
-        {% if forloop.counter0 == 0 %}
-            <tr><td><b>analyzer</b></td><td><b>% done</b></td><td><b>missing</b></td><td><b>queued</b></td><td><b>ok</b></td><td><b>skipped</b></td><td><b>failed</b></td></tr>
-        {% endif %}
-        <tr><td>{{ analyzer_name }}</td><td>{{ analyzer_data.Percentage }}</td><td>{{ analyzer_data.Missing }}</td><td>{{ analyzer_data.QU }}</td><td>{{ analyzer_data.OK }}</td><td>{{ analyzer_data.SK }}</td><td>{{ analyzer_data.FA }}</td></tr>
-    {% endfor %} 
-    </table>
-
-    {%  if request.user.is_staff %}
-    <script>
-        setInterval(function(){
-            $.get("{{ queues_stats_url }}", function(data){
-                console.log(data)
-                $('#queuesStatus').html(data);
-              });
-            }, 1000);
-    </script>
-    <div id="queuesStatus"></div>
-    {% endif %}
-
-{% endblock content %}
diff --git a/templates_bw/monitor/processing.html b/templates/monitor/processing.html
similarity index 100%
rename from templates_bw/monitor/processing.html
rename to templates/monitor/processing.html
diff --git a/templates/monitor/queues_status.html b/templates/monitor/queues_status.html
index 04d0b69ea..867a8d17f 100644
--- a/templates/monitor/queues_status.html
+++ b/templates/monitor/queues_status.html
@@ -1,12 +1,10 @@
-<h3>rabbitmq queues</h3>
 <table style="min-width:500px;">
 {% for item in celery_task_counts %}
     {% if forloop.counter0 == 0 %}
         <tr><td><b>queue</b></td><td><b>messages ready<br>(queued)</b></td><td><b>messages unacked<br> (running soon or running)</b></td><td><b>consumers</b></td><td><b>rate</b></td></tr>
     {% endif %}
-    <tr><td>{{ item.0 }}</td><td>{{ item.1 }}</td><td>{{ item.2 }}</td><td>{{ item.3 }}</td><td>{{ item.4 }}/s</td></tr>
+    <tr><td><a href="/rabbitmq-admin/#/queues/%2F/{{ item.0 }}" target="_blank">{{ item.0 }}</a></td><td>{{ item.1 }}</td><td>{{ item.2 }}</td><td>{{ item.3 }}</td><td>{{ item.4 }}/s</td></tr>
 {% empty %}
     <p>No information available...</p>
 {% endfor %}
 </table>
-
diff --git a/templates/monitor/stats.html b/templates/monitor/stats.html
index 3de05fc9b..c877edac2 100644
--- a/templates/monitor/stats.html
+++ b/templates/monitor/stats.html
@@ -1,184 +1,124 @@
-{% extends "base.html" %}
+{% extends "monitor/base.html" %}
 
-{% block head %}
-{{ block.super }}
-<style type="text/css">
-  .tags{
-    font-family: Arial, sans-serif;
-    font-size:10px;
-  }
-  .axis path,.axis line {
-    fill: none;
-    stroke: #b6b6b6;
-    shape-rendering: crispEdges;
-  }
-  g.journal.active{
-    cursor: pointer;
-  }
-  text.label{
-    font-size: 12px;
-    font-weight: bold;
-    cursor: pointer;
-  }
-  text.value{
-    font-size: 12px;
-    font-weight: bold;
-  }
-  g.legend { 
-    font: 10px sans-serif;
-  }
-  .legend-item{  
-    cursor: pointer;
-  }
-  .bar rect {
-    fill: #AB4646;
-  }
-  .toolTip {
-    position: absolute;
-    text-align: center;
-    min-width: 60px;
-    height: auto;
-    padding: 2px;
-    font: 12px sans-serif;
-    background: rgb(46,46,46);
-    color: #fff;
-    border: 0px;
-    border-radius: 2px;
-    pointer-events: none;
-  }
-</style>
-{% endblock head %}
-
-{% block title %}
-    Monitor
-{% endblock title %}
-
-{% block content %}
-
-    <h2 id="global-stats">Global numbers
-      <a class="headerlink" href="#global-stats" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>total number of registered elements</h3>
-    <div>
+{% load static %}
+{% load bw_templatetags %}
+
+{% block title %}Monitor - Stats{% endblock %}
+
+{% block main_content %}
+
+<h1>Stats</h1>
+
+<h2 id="global-stats" class="v-spacing-top-5 v-spacing-2">Global numbers
+    <a class="headerlink" href="#global-stats" title="Permalink to this headline">¶</a>
+</h2>
+<div>
     <table>
-      <tr>
-        <td><b>Active Users:</b></td><td id="total-users"></td>
-        <td><b>Comments:</b> </td><td id="total-comments"></td>
-        <td><b>Avg tags per sound:</b> </td><td id="avg-tags"></td>
-      </tr>
-      <tr>
-        <td><b>Uploaders:</b></td><td id="users-with-sounds"></td>
-        <td><b>Avg comments per sound:</b> </td><td id="avg-comments"></td>
-        <td><b>Posts:</b> </td><td id="total-posts"></td>
-      </tr>
-      <tr>
-        <td><b>Sounds:</b> </td><td id="total-sounds"></td>
-        <td><b>Ratings:</b> </td><td id="total-ratings"></td>
-        <td><b>Threads:</b> </td><td id="total-threads"></td>
-      </tr>
-      <tr>
-        <td><b>Packs:</b> </td><td id="total-packs"></td>
-        <td><b>Avg ratings per sound:</b> </td><td id="avg-ratings"></td>
-        <td><b>Donations:</b> </td><td id="total-donations"></td>
-      </tr>
-      <tr>
-        <td><b>Downloads:</b> </td><td id="total-downloads"></td>
-        <td><b>Unique tags:</b> </td><td id="total-tags"></td>
-        <td><b>Donations by year (estimated with last 30 days data):</b></td><td id="proj-donations"></td>
-      </tr>
-      <tr>
-        <td><b>Avg downloads per sound:</b> </td><td id="avg-downloads"></td>
-        <td><b>Tags applications:</b> </td><td id="total-used-tags"></td>
-        <td></td><td></td>
-      </tr>
+        <tr>
+            <td><b>Active Users:</b></td><td id="total-users"></td>
+            <td><b>Comments:</b> </td><td id="total-comments"></td>
+            <td><b>Avg tags per sound:</b> </td><td id="avg-tags"></td>
+        </tr>
+        <tr>
+            <td><b>Uploaders:</b></td><td id="users-with-sounds"></td>
+            <td><b>Avg comments per sound:</b> </td><td id="avg-comments"></td>
+            <td><b>Posts:</b> </td><td id="total-posts"></td>
+        </tr>
+        <tr>
+            <td><b>Sounds:</b> </td><td id="total-sounds"></td>
+            <td><b>Ratings:</b> </td><td id="total-ratings"></td>
+            <td><b>Threads:</b> </td><td id="total-threads"></td>
+        </tr>
+        <tr>
+            <td><b>Packs:</b> </td><td id="total-packs"></td>
+            <td><b>Avg ratings per sound:</b> </td><td id="avg-ratings"></td>
+            <td><b>Donations:</b> </td><td id="total-donations"></td>
+        </tr>
+        <tr>
+            <td><b>Downloads:</b> </td><td id="total-downloads"></td>
+            <td><b>Unique tags:</b> </td><td id="total-tags"></td>
+            <td><b>Donations by year (estimated with last 30 days data):</b></td><td id="proj-donations"></td>
+        </tr>
+        <tr>
+            <td><b>Avg downloads per sound:</b> </td><td id="avg-downloads"></td>
+            <td><b>Tags applications:</b> </td><td id="total-used-tags"></td>
+            <td></td><td></td>
+        </tr>
     </table>
+    
+    
+</div>
 
+<h2 id="users-stats" class="v-spacing-top-5">Users
+    <a class="headerlink" href="#users-stats" title="Permalink to this headline">¶</a>
+</h2>
+<h3>Registered users in last two weeks</h3>
+<div class='users'>
+</div>
 
-    </div>
- 
-    <h2 id="users-stats">Users
-      <a class="headerlink" href="#users-stats" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>Registered users in last two weeks</h3>
-    <div class='users'>
-    </div>
-    
-    <h3>Active users by activity per week</h3>
-    <div class='active-users'>
-    </div>
+<h3>Active users by activity per week</h3>
+<div class='active-users'>
+</div>
 
-    <h2 id="sounds-stats">Sounds
-      <a class="headerlink" href="#sounds-stats" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>Sounds created in last two weeks</h3>
-    <div class='uploads'>
-    </div>
-    
-    <h2 id="downloads-stats">Downloads
-      <a class="headerlink" href="#downloads-stats" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>Downloads in last two weeks</h3>
-    <div class='downloads'>
-    </div>
+<h2 id="sounds-stats" class="v-spacing-top-5">Sounds
+    <a class="headerlink" href="#sounds-stats" title="Permalink to this headline">¶</a>
+</h2>
+<h3>Sounds created in last two weeks</h3>
+<div class='uploads'>
+</div>
 
-    <h2 id="year-donations">Donations
-      <a class="headerlink" href="#year-donations" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>Donations in the last 12 months</h3>
-    <div class='donations'>
-    </div>
+<h2 id="downloads-stats" class="v-spacing-top-5">Downloads
+    <a class="headerlink" href="#downloads-stats" title="Permalink to this headline">¶</a>
+</h2>
+<h3>Downloads in last two weeks</h3>
+<div class='downloads'>
+</div>
+
+<h2 id="year-donations" class="v-spacing-top-5">Donations
+    <a class="headerlink" href="#year-donations" title="Permalink to this headline">¶</a>
+</h2>
+<h3>Donations in the last 12 months</h3>
+<div class='donations'>
+</div>
 
-    <div style="display:inline-block">
-    <h2 id="tags-stats">Tags
-      <a class="headerlink" href="#tags-stats" title="Permalink to this headline">¶</a>
+<div style="display:inline-block">
+    <h2 id="tags-stats" class="v-spacing-top-5">Tags
+        <a class="headerlink" href="#tags-stats" title="Permalink to this headline">¶</a>
     </h2>
     <h3>Most used tags in last two weeks</h3>
     <canvas id='tags-cloud-week' width=450 height=450>
     </canvas>
-    </div>
-    
-    <div style="display:inline-block">
+</div>
+
+<div style="display:inline-block">
     <h3>Tag cloud with most downlaoded tags in last two weeks</h3>
     <canvas id='down-tags-cloud' width=450 height=450>
     </canvas>
-    </div>
-    
-    <h3>Tag cloud with most used tags</h3>
-    <canvas id='tags-cloud' width=600 height=600>
-    </canvas>
-    
+</div>
 
-    <h2 id="user-queries-stats">User Queries
-      <a class="headerlink" href="#user-queries-stats" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>Most common queries in last two weeks</h3>
-    <canvas id='queries-wordcloud' width=600 height=600>
-    </canvas>
+<h3>Tag cloud with most used tags</h3>
+<canvas id='tags-cloud' width=600 height=600>
+</canvas>
 
-    <script>
-      var totalsDataUrl = '{% url 'monitor-totals-stats-ajax' %}';
-      var queriesDataUrl = '{% url 'monitor-queries-stats-ajax' %}';
-      var tagsDataUrl = '{% url 'monitor-tags-stats-ajax' %}';
-      var downloadsDataUrl = '{% url 'monitor-downloads-stats-ajax' %}';
-      var donationsDataUrl = '{% url 'monitor-donations-stats-ajax' %}';
-      var soundsDataUrl = '{% url 'monitor-sounds-stats-ajax' %}';
-      var usersDataUrl = '{% url 'monitor-users-stats-ajax' %}';
-      var activeUsersDataUrl = '{% url 'monitor-active-users-stats-ajax' %}';
-    </script>
-    <script src="https://code.highcharts.com/highcharts.js"></script>
-    <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
-    <script src="https://d3js.org/d3-axis.v1.min.js"></script>
-    <script src="https://d3js.org/d3-array.v1.min.js"></script>
-    <script src="https://d3js.org/d3-collection.v1.min.js"></script>
-    <script src="https://d3js.org/d3-color.v1.min.js"></script>
-    <script src="https://d3js.org/d3-format.v1.min.js"></script>
-    <script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
-    <script src="https://d3js.org/d3-time.v1.min.js"></script>
-    <script src="https://d3js.org/d3-time-format.v2.min.js"></script>
-    <script src="https://d3js.org/d3-scale.v1.min.js"></script>
-    <script src="https://d3js.org/d3-path.v1.min.js"></script>
-    <script src="https://d3js.org/d3-shape.v1.min.js"></script>
-    <script src="{{media_url}}js/wordcloud2.js"></script>
-    <script src="{{media_url}}js/chart.js" type="text/javascript"></script>
-    <script src="{{media_url}}js/stats.js" type="text/javascript"></script>
-{% endblock content %}
+<h2 id="user-queries-stats" class="v-spacing-top-5">User Queries
+    <a class="headerlink" href="#user-queries-stats" title="Permalink to this headline">¶</a>
+</h2>
+<h3>Most common queries in last two weeks</h3>
+<canvas id='queries-wordcloud' width=600 height=600>
+</canvas>
+
+{% endblock %}
+
+{% block extrabody %}
+{{ block.super }}
+<script>
+    var totalsDataUrl = '{% url 'monitor-totals-stats-ajax' %}';
+    var queriesDataUrl = '{% url 'monitor-queries-stats-ajax' %}';
+    var tagsDataUrl = '{% url 'monitor-tags-stats-ajax' %}';
+    var downloadsDataUrl = '{% url 'monitor-downloads-stats-ajax' %}';
+    var donationsDataUrl = '{% url 'monitor-donations-stats-ajax' %}';
+    var soundsDataUrl = '{% url 'monitor-sounds-stats-ajax' %}';
+    var usersDataUrl = '{% url 'monitor-users-stats-ajax' %}';
+    var activeUsersDataUrl = '{% url 'monitor-active-users-stats-ajax' %}';
+</script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/oauth2_provider/app_authorized.html b/templates/oauth2_provider/app_authorized.html
similarity index 100%
rename from templates_bw/oauth2_provider/app_authorized.html
rename to templates/oauth2_provider/app_authorized.html
diff --git a/templates_bw/oauth2_provider/authorize.html b/templates/oauth2_provider/authorize.html
similarity index 100%
rename from templates_bw/oauth2_provider/authorize.html
rename to templates/oauth2_provider/authorize.html
diff --git a/templates_bw/oauth2_provider/oauth_login.html b/templates/oauth2_provider/oauth_login.html
similarity index 100%
rename from templates_bw/oauth2_provider/oauth_login.html
rename to templates/oauth2_provider/oauth_login.html
diff --git a/templates/registration/login.html b/templates/registration/login.html
deleted file mode 100644
index c74e21464..000000000
--- a/templates/registration/login.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-
-{% block title %}login{% endblock %}
-
-{% block section_content %}
-<script type="text/javascript">
-    $(function () {
-    	$("#id_username").focus()
-    });
-</script>
-
-<h1>Login...</h1>
-<form method="post" action=".">{% csrf_token %}
-{{form.as_p}}
-<input type="submit" value="login" />
-<input type="hidden" name="next" value="{{ next }}" />
-</form>
-<p>Don't have an account yet? Why not <a href="{% url "accounts-register" %}">register</a>?</p>
-
-{% include "accounts/reminders.html" %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/registration/logout.html b/templates/registration/logout.html
deleted file mode 100644
index f337a2dd2..000000000
--- a/templates/registration/logout.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}logout{% endblock %}
-
-{% block section_content %}
-<h1>Logout...</h1>
-<p>
-	You have been logged out!
-</p>
-{% endblock %}
\ No newline at end of file
diff --git a/templates/registration/password_change_done.html b/templates/registration/password_change_done.html
deleted file mode 100644
index cebd845a0..000000000
--- a/templates/registration/password_change_done.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}password reset email sent{% endblock %}
-
-{% block content %}
-<h1>Password changed</h1>
-<p>Your password was changed.</p>
-{% endblock %}
diff --git a/templates/registration/password_change_form.html b/templates/registration/password_change_form.html
deleted file mode 100644
index a41db8f1d..000000000
--- a/templates/registration/password_change_form.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}Change password{% endblock %}
-
-{% block content %}
-
-<h1>Change password</h1>
-
-
-<form action="." method="post">{% csrf_token %}
-{{form.as_p}}
-<input type="submit" value="Change my password" />
-</form>
-
-{% endblock %}
diff --git a/templates/registration/password_reset_complete.html b/templates/registration/password_reset_complete.html
deleted file mode 100644
index e057ebf95..000000000
--- a/templates/registration/password_reset_complete.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}Password reset complete{% endblock %}
-
-{% block content %}
-
-<h1>Password reset complete</h1>
-
-<p>Your password has been set. You may go ahead and log in now.</p>
-
-<p><a href="{{ login_url }}">Log in</a></p>
-
-{% endblock %}
diff --git a/templates/registration/password_reset_confirm.html b/templates/registration/password_reset_confirm.html
deleted file mode 100644
index daf67ea19..000000000
--- a/templates/registration/password_reset_confirm.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}password reset{% endblock %}
-
-{% block content %}
-
-{% if validlink %}
-    <h1>Enter new password</h1>
-    
-    <p>Please enter your new password twice so we can verify you typed it in correctly.</p>
-    
-    <form action="." method="post">{% csrf_token %}
-    {{ form.as_p }}
-    <input type="submit" value=" Change my password " />
-    </form>
-{% else %}
-    <h1>Password reset unsuccessful</h1>
-    <p>The password reset link was invalid, possibly because it has already been used.  Please request a new password reset.
-{% endif %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/registration/password_reset_done.html b/templates/registration/password_reset_done.html
deleted file mode 100644
index 9bd4fcb9d..000000000
--- a/templates/registration/password_reset_done.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}password reset email sent{% endblock %}
-
-{% block content %}
-<h1>Password reset email sent</h1>
-<p>If the address you've entered is correct, then you should receive an email with instructions for resetting your password.</p>
-<p>If you don't receive it within several minutes, check your spam folder. Try again making sure the address is typed correctly. If you still have issues then feel free to <a href="{% url 'contact' %}">contact us</a></p>
-{% endblock %}
diff --git a/templates/registration/password_reset_form.html b/templates/registration/password_reset_form.html
deleted file mode 100644
index c797cce5f..000000000
--- a/templates/registration/password_reset_form.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-{% block title %}Password reset{% endblock %}
-
-{% block content %}
-
-<h1>Password reset</h1>
-
-<p>Forgotten your password? Enter your email address or username below, and we'll email instructions for setting a new one.
-</p>
-
-<form action="." method="post">{% csrf_token %}
-{{form.as_p}}
-<input type="submit" value="Reset my password" />
-</form>
-
-{% endblock %}
diff --git a/templates_bw/rest_framework/api.html b/templates/rest_framework/api.html
similarity index 100%
rename from templates_bw/rest_framework/api.html
rename to templates/rest_framework/api.html
diff --git a/templates/rss_cache.html b/templates/rss_cache.html
deleted file mode 100644
index a02e2fd68..000000000
--- a/templates/rss_cache.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% load rss %}
-{% load util %}
-{% get_rss rss_url as rss %}
-{% for entry in rss.entries|slice:":5" %}
-    <div class="blog_post">
-    <h2><a href="{{entry.link}}">{{entry.title|truncatewords:10}}</a></h2>
-    <span class="post_date">{{entry.published_parsed|tuple_to_time|date:"F jS, Y"}}</span> <span class="post_author">{{entry.author}}</span>
-    <p>
-        {{entry.summary|safe|striptags|truncatewords:100}} <a href="{{entry.link}}">Read Full Entry</a>
-    </p>
-    </div>
-{% endfor %}
\ No newline at end of file
diff --git a/templates/search/advanced_search_form.html b/templates/search/advanced_search_form.html
deleted file mode 100644
index 803eb98a0..000000000
--- a/templates/search/advanced_search_form.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<script type="text/javascript">
-
-    function showAdvancedSearchOptions()
-    {
-        $("#advanced_search_hidden").val(1);
-        $("#enableShowButton").hide();
-        $("#advanced_search_options").show('blind', {}, 500, function() {});
-
-    }
-
-    function hideAdvancedSearchOptions()
-    {
-        $("#advanced_search_hidden").val(0);
-        $("#advanced_search_options").hide('blind', {}, 500, function() {});
-        $("#enableShowButton").show();
-    }
-
-    function set_hidden_grouping_value(){
-        if ($("#grouping_geotagged").is(':checked')){
-            $("#grouping_geotagged_hidden").val("1")
-        }else{
-            $("#grouping_geotagged_hidden").val("")
-        }
-    }
-
-</script>
-
-
-<div id="advanced_search_options" class="advanced_search_options" {% if not advanced == "1" %}style="display:none"{% endif %}>
-<input id="advanced_search_hidden" type="hidden" name="advanced" value="{% if advanced == "1" %}1{% else %}0{% endif %}" />
-
-<div style="margin-top:8px;"></div>Search in:&nbsp
-<label><input type="checkbox" name="a_tag" value="1" {% if a_tag %}checked{% endif %}/> Tags</label>&nbsp&nbsp
-<label><input type="checkbox" name="a_filename" value="1" {% if a_filename %}checked{% endif %}/> File names</label>&nbsp&nbsp
-<label><input type="checkbox" name="a_description" value="1" {% if a_description %}checked{% endif %}/> Descriptions</label>&nbsp&nbsp
-<label><input type="checkbox" name="a_packname" value="1" {% if a_packname %}checked{% endif %}/> Pack names</label>&nbsp&nbsp
-<label><input type="checkbox" name="a_soundid" value="1" {% if a_soundid %}checked{% endif %}/> Sound Ids</label>&nbsp&nbsp
-<label><input type="checkbox" name="a_username" value="1" {% if a_username %}checked{% endif %}/> User names</label>
-<span class="advanced_search_indication">(if none is selected, all will be used)</span>
-<br>
-
-Duration between <input class="inputtext" id="filter_duration_min" value="0" size="6" /> <label for="filter_duration_min">(min)</label>
-and <input class="inputtext" id="filter_duration_max" value="*" size="6" /> <label for="filter_duration_max">(max)</label> seconds<br>
-<input id="filter_is_geotagged" type="checkbox" value="1" /> <label for="filter_is_geotagged">Only geotagged sounds</label><br>
-<input id="grouping_geotagged" type="checkbox" onchange="set_hidden_grouping_value()" {% if group_by_pack_in_request == "1" %}checked{% endif %}/> <label for="grouping_geotagged">Group sounds by pack</label>
-<input id="grouping_geotagged_hidden" type="hidden" name="g" {% ifequal group_by_pack_in_request "1" %}value="1"{% else %}value=""{% endifequal %} />
-
-<br>
-<span class="advanced_search_options_button"><a style="cursor:pointer;" onclick='hideAdvancedSearchOptions();'>Hide advanced search options</a></span>
-</div>
-
-<span id="enableShowButton" class="advanced_search_options_button" {% if advanced == "1" %}style="display:none"{% endif %}>
-    <div style="margin-top:4px;"></div>
-    <a style="cursor:pointer;" onclick='showAdvancedSearchOptions();'>Show advanced search options</a>
-</span>
diff --git a/templates/search/clustering_facet.html b/templates/search/clustering_facet.html
deleted file mode 100644
index f18ce4871..000000000
--- a/templates/search/clustering_facet.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<ul>
-    {% for cluster_id, num_results, tags, sound_examples in cluster_id_num_results_tags_sound_examples %}
-        <li class="facet_item clustering-facet" cluster-id={{cluster_id}}>
-            {% for sound_id, sound_url in sound_examples %}
-                <span class="dummy-span-cluster-examples" id="c{{cluster_id}}-{{forloop.counter0}}" 
-                    sound-id="{{sound_id}}" sound-url="{{sound_url}}"></span>
-            {% endfor %}
-            <a href="{% url 'sounds-search' %}?{{url_query_params_string}}&cluster_id={{cluster_id|add:1}}">Cluster #{{cluster_id|add:1}}
-            </a> ({{num_results}}) 
-            <span>
-            &nbsp;<img class="cluster-audio-examples" src="{{media_url}}images/fugue-icons/icons/headphone.png" width="16" height="16" alt="listen" title="click to skip" />
-            &nbsp;<img class="cluster-link-button" cluster-id="{{cluster_id}}" 
-                src="{{media_url}}images/fugue-icons/icons/external.png" width="16" height="16" alt="listen" title=""
-            /></span>
-            <div>{{tags}}</div>
-        </li>
-    {% endfor %}
-</ul>
diff --git a/templates/search/facet.html b/templates/search/facet.html
index a50f99f0a..e1e8adc82 100644
--- a/templates/search/facet.html
+++ b/templates/search/facet.html
@@ -1,10 +1,50 @@
-{% ifequal type "list" %}
- <ul>
-     {% for f in facet %}<li class="facet_item"><a href="{{ f.add_filter_url }}">{{f.display_name}}</a> ({{f.count}})</li>{% endfor %}
-</ul>
-{% endifequal %}
-{% ifequal type "cloud" %}
-<p class="search-tagcloud">
-    {% for f in facet %}<span class="facet_item" style="font-size:{{f.size}}em"><a href="{{ f.add_filter_url }}">{{f.display_name}}</a></span> {% endfor %}
-</p>
-{% endifequal %}
+{% load bw_templatetags %}
+
+<div class="bw-search__filter-section">
+    <div class="bw-search__filter-section-name caps text-light-grey between">
+        <span>{{ title }}</span>
+        {% comment %}
+        <span class="bw-search__filter-section-collapse">
+            <button class="btn-neutral" title="Collapse section">{% bw_icon 'bar' %}</button>
+        </span>
+        {% endcomment %}
+    </div>
+    {% ifequal type "checkbox" %} {% comment %}This type of facet is no used so far{% endcomment %}
+        <ul class="bw-search__filter-value-list">
+            {% for f in facet %}
+                <li class="bw-search__filter-value v-padding-1">
+                    <label for="{{ f.id }}" class="between w-100">
+                        <div class="bw-search__filter-checkbox">
+                            <input type="checkbox" class="bw-checkbox" id="{{ f.id }}" onchange="">
+                        </div>
+                        <div class="bw-search__filter-name">
+                            {{ f.display_name }}
+                            <div class="bw-search__filter-count">({{ f.count|bw_intcomma }})</div>
+                        </div>
+                    </label>
+                </li>
+            {% endfor %}
+        </ul>
+    {% endifequal %}
+    {% ifequal type "list" %}
+        <ul class="bw-search__filter-value-list">
+            {% for f in facet %}
+                <li class="bw-search__filter-value v-padding-1">
+                    <div class="bw-search__filter-name">
+                        <a href="{{ f.add_filter_url }}" class="bw-link--black">{% if f.icon %}{% bw_icon f.icon %}{% endif %}{{ f.display_name }}</a>
+                        <div class="bw-search__filter-count padding-left-1">({{ f.count|bw_intcomma }})</div>
+                    </div>
+                </li>
+            {% endfor %}
+        </ul>
+    {% endifequal %}
+    {% ifequal type "cloud" %}
+        <div class="bw-search__filter-tags-list">
+            {% for f in facet %}
+                {% bw_tag f.display_name 1 '' f.add_filter_url f.weight %}
+            {% endfor %}
+        </div>
+    {% endifequal %}
+    <div class="divider-light"></div>
+</div>
+
diff --git a/templates/search/search.html b/templates/search/search.html
index ea76c1ecf..018b734cb 100644
--- a/templates/search/search.html
+++ b/templates/search/search.html
@@ -1,467 +1,362 @@
-{% extends "sounds/_section.html" %}
+{% extends "base.html" %}
 
-{% load display_sound %}
-{% load paginator %}
-{% load search %}
-{% load util %}
 {% load static %}
+{% load util %}
+{% load search %}
+{% load bw_templatetags %}
+{% load display_sound %}
+{% load display_pack %}
+{% load tags %}
 
-{% if clustering_on %}
-    {% block extra_headers %}
-        <link rel="stylesheet" type="text/css" href="{{media_url}}css/graph-clustering.css"/>
-        <script src="//unpkg.com/force-graph"></script>
-        <script src="//unpkg.com/d3-quadtree"></script>
-        <script src="//unpkg.com/d3-force"></script>
-        <script src="{{media_url}}js/d3-graph-clustering.js" type="text/javascript"></script>
-    {% endblock %}
-{% endif %}
-
-{% block title %}sound search{% endblock title %}
-
-{% block section_content %}
-
-<form id="search_form" method="get" onsubmit="return addAdvancedSearchOptionsFilters()"  action="{% url "sounds-search" %}">
-    <fieldset>
-
-       <input id="query_input" type="text" name="q" value="{{search_query}}" size="30" />
-       <input id="filter_query" type="hidden" name="f" value="{{filter_query}}" size="30" />
-       <input id="weights" type="hidden" name="w" value="{{weights}}" />
-       {% comment %}
-       <span class="advanced_search_options">Sort results by </span>
-       {% endcomment %}
-       <select name="s">
-            {% for option in sort_options %}
-            <option value="{{option.1}}"{% ifequal option.1 sort %}selected="selected"{% endifequal %}>{{option.0}}</option>
-            {% endfor %}
-       </select>
-
-       <input type="submit" value="search" id="search_submit"/>
-
-       {% include "search/advanced_search_form.html" %}
-
-        <br/>
-
-    </fieldset>
-</form>
-
-
-<p id="filter_query_display">
+{% block title %}Search{% endblock %}
 
-{% for filter in filter_query_split %}
-    <a href=".?g={{group_by_pack_in_request}}&q={{search_query}}&f={{ filter.remove_url }}&s={{ sort }}&cluster_id={{ filter.cluster_id }}&w={{ weights }}" title="remove this filter">{{ filter.name }}</a>
-{% endfor %}
+{% block navbar %}{% if not tags_mode %}{% include 'molecules/navbar_search_page.html' %}{% else %}{% include 'molecules/navbar.html' %}{% endif %}{% endblock %}
 
-</p>
+{% block content %}
 
-<div id="clustering-graph-modal" class="modal" style="display: none;">
-    <div id="clustering-graph" class="modal-content">
-        <div class="modal-header">
-            Clustering Visualisation
-            <span id="close-modal-button" class="close-modal">×</span>
-        </div>
-        <div id="chart-container" class="modal-body">
-            <div id="h1">Selected sounds (ctrl + click)</div>
-            <div id="h2"></div>
-            <div id="cluster-labels"></div>
-            <div id="graph"></div>
-            <div id="graph-loader" class="clustering-loader"></div>
+<div class="container">
+    {% if error_text %}
+    <div class="navbar-space-filler v-spacing-3 v-spacing-top-2">
+        <div class="v-spacing-6 v-spacing-top-4">
+            <p class="v-spacing-4">{{ error_text }}</p>
+            <p><button onclick="window.history.back();" class="btn-primary">Go back</button></p>
         </div>
     </div>
-</div>
-
-<script type="text/javascript">
-
-    $(document).ready(function(){
-
-        // Fill advanced search fields that were passen on the f parameter
-        // Duration
-
-        if (getFilterValue("duration","min") == "")
-            $("#filter_duration_min").val("0");
-        else
-            $("#filter_duration_min").val(getFilterValue("duration","min"));
-
-        if (getFilterValue("duration","max") == "")
-            $("#filter_duration_max").val("*");
-        else
-            $("#filter_duration_max").val(getFilterValue("duration","max"));
-
-        // Geotagged
-        if (getFilterValue("is_geotagged")==1)
-               $("#filter_is_geotagged").attr('checked','checked')
-
-        // Extract terms from the query search box and highlight any of their occurrences in the descriptions
-        terms = document.getElementById("query_input").value.split(" ");
-
-        for(var i=0;i<terms.length;i++)
-        {
-        	term = terms[i];
-        	re = RegExp(term,"i"); // i for case-insensative
-
-        	descriptions = document.getElementsByClassName("description");
-        	for (var j=0;j<descriptions.length;j++)
-        	{
-        		descriptions[j].innerHTML = descriptions[j].innerHTML.replace(re,"<b>"+term+"</b>");
-        	}
-        }
-
-        {% if clustering_on %}
-        // Ajax request clustering
-        request_clustering();
-        graph = undefined;
-        graphLoaded = false;
-        showCluster = undefined;
-
-        $('#show-clustering-graph-button').click(function () {
-            showGraph();
-        });
-        {% endif %}
-    });
-
-    function addAdvancedSearchOptionsFilters()
-    {
-
-        // Remove existing previously existing advanced options filters (will be replaced by current ones)
-        existing_duration_filter = "duration:[" + getFilterValue("duration","min") + " TO " + getFilterValue("duration","max") + "]"
-        removeFilter(existing_duration_filter)
-        removeFilter("is_geotagged:1")
-
-        // if advanced options is activated add all updated filters
-        if ($("#advanced_search_hidden").val() == 1)
-        {
-
-            // Create and add new filter with all the advanced options
-            filter = ""
-
-            // Duration filter
-            duration_min = parseFloat($("#filter_duration_min").val())
-            duration_max = parseFloat($("#filter_duration_max").val())
-
-            if ((duration_min >= 0.0) || (duration_max >= 0.0))
-            {
-                duration_filter = ""
-
-                if ((duration_min >= 0.0) && (duration_max >= 0.0)) // Both min and max have been set
-                {
-                    if (duration_max < duration_min)
-                    {
-                        // interchange values if duration_min > duration_max
-                        duration_aux = duration_min
-                        duration_min = duration_max
-                        duration_max = duration_aux
-                    }
-
-                    duration_filter = "duration:[" + duration_min + " TO " + duration_max + "]"
-
-                }
-                else if (duration_min >= 0.0) // Only minimum has been set
-                {
-                    duration_filter = "duration:[" + duration_min + " TO *]"
-                }
-                else if (duration_max >= 0.0) // Only maximum has been set
-                {
-                    duration_filter = "duration:[* TO " + duration_max + "]"
-                }
-
-                filter = filter + duration_filter
-            }
-
-            // Is geotagged filter
-            if ($("#filter_is_geotagged").attr('checked')){
-                if (filter != "")
-                    filter = filter + " "
-                filter = filter + "is_geotagged:1"
-            }
-
-               // Update general filter with the advanced options filter
-            value = $("#filter_query").val();
-            if (value != "")
-                $("#filter_query").val(value + " " + filter);
-            else
-                $("#filter_query").val(filter);
-
-        }
-
-        return true
-    }
-
-    // Return the value of a filter given its name
-    // If filter has a range, optional "range" parameter must be set to "min or "max"
-    function getFilterValue(name, range)
-    {
-        if (!range) { range = "min"};
-
-        var value = $("#filter_query").val();
-        position_name = value.search(name)
-        position_value = value.search(name) + (name + ":").length
-        if (value.search((name + ":")) != -1)
-        {
-            if (value[position_value] == "[") // Is range (with spaces)
-            {
-                aux_value = value.substring(position_value + 1)
-                position_end = position_value + aux_value.search("]") + 2
-
-                range_string = value.substring(position_value + 1, position_end -1) // Without [ ]
-                parts = range_string.split(" ")
-                if (range == "min")
-                    return parts[0]
-                else if (range == "max")
-                    return parts[2]
-            }
-            else if (value[position_value] == "\"") // Is string (with spaces)
-            {
-                aux_value = value.substring(position_value + 1)
-                position_end = position_value + aux_value.search("\"") + 2
-                return value.substring(position_value, position_end)
-
-            }
-            else // Is number or normal text (without spaces)
-            {
-                aux_value = value.substring(position_value + 1)
-                if (aux_value.search(" ") != -1)
-                    position_end = position_value + aux_value.search(" ") + 1
-                else
-                    position_end = value.length
-
-                return value.substring(position_value, position_end)
-            }
-        }
-        else
-        {
-            return ""
-        }
-    }
-
-    // Remove a filter given the full tag ex: type:aiff, pack:"pack name"
-    function removeFilter(tag)
-    {
-        var value = $("#filter_query").val();
-        var cleaned = $.trim(value.replace(tag + " ", "").replace(tag, ""));
-        $("#filter_query").val(cleaned);
-    }
-
-    {% if clustering_on %}
-    // toggle and show graph
-    function updateShowGraphButton() {
-        var buttonText = $("#clustering-graph").is(":visible")? "hide" : "show";
-        $("#show-clustering-graph-button").html(buttonText);
-    }
-
-    function showGraph() {
-        $("#clustering-graph-modal").show();
-        if (graph !== undefined && graphLoaded === false) {
-            activateGraph(graph);
-            graphLoaded = true;
-        }
-    }
-
-    function closeGraphModal() {
-        $("#clustering-graph-modal").hide();
-    }
-
-    // play cluster examples on mouseover & click
-    mouse_on_cluster_facet_preview = false;
-    function enableAudioClusterExamples() {
-        function playAudio(el, index) {
-            var dummySpanClusterExamples = el.children('.dummy-span-cluster-examples');
-            var cluster_idx = $('.clustering-facet').index($(el));
-            var index = (typeof index == 'number') ? index: parseInt(Math.random()*dummySpanClusterExamples.length);
-            var selectedExample = dummySpanClusterExamples.eq(index);
-            var soundId = selectedExample.attr("sound-id");
-            var soundUrl = selectedExample.attr("sound-url");
-            play_sound_from_url(soundId, soundUrl, function () {
-                index = (index + 1) % dummySpanClusterExamples.length;
-                // this condition ensures that we don't trigger more plays when not previewing the right cluster.
-                // otherwise it could happen that stopAllAudio() would not stop the recursive loop.
-                if (mouse_on_cluster_facet_preview == cluster_idx) {
-                    playAudio(el, index)
-                }
-            });
-        };
-
-        function stopAllAudio() {
-            $('audio').each(function (i, el) {el.pause();});
-        };
-        
-        $(".cluster-audio-examples")
-            .mouseenter(function() {
-                var cluster_idx = $('.clustering-facet').index($(this).parents('.clustering-facet'));
-                mouse_on_cluster_facet_preview = cluster_idx;
-                stopSound();
-                playAudio($(this).parent().parent(), false);
-            })
-            .mouseleave(function() {
-                mouse_on_cluster_facet_preview = false;
-                stopSound();
-            })
-            .click(function() {
-                stopSound();
-                playAudio($(this).parent().parent(), false);
-            });
-    }
-
-    var clustering_trial_number = 0;
-    // function for requesting clustering
-    function request_clustering()
-    {
-        $.get({% url 'clustering-facet' %} + '?{{ url_query_params_string }}', 
-                {}, 
-                function( data ) {
-                    clustering_trial_number += 1;
-                    if (data.status === 'pending') {
-                        if (clustering_trial_number < 1000) {
-                            setTimeout(() => {
-                                request_clustering();
-                            }, 500);
-                        } else {
-                            $('#facet-loader').hide();
-                            $('#cluster-fail-icon').show();
-                        }
-                    } else if (data.status === 'failed') {
-                        // clustering failed
-                        $('#facet-loader').hide();
-                        $('#cluster-fail-icon').show();
-                    } else {
-                        $('#facet-loader').hide();
-                        $('#show-clustering-graph-button').show();
-                        $('#cluster-labels').html(data);
-                        $('#clusters-div').replaceWith(data);
-                        // add cluster colors
-                        var num_clusters = Math.max(
-                            ...Array.from($('.clustering-facet').map(
-                                (e, l)=>parseInt($(l).attr('cluster-id')))
-                            )
-                        ) + 1;
-                        $('#cluster-labels').find('.clustering-facet').each((i, l) => {
-                            $(l).find('a').css("color", cluster2color($(l).attr('cluster-id'), num_clusters));
-                            $(l).find('a').css('font-weight', 'bold');
-                        });
-                        enableAudioClusterExamples();
-
-                        $('.cluster-link-button').click(function () {
-                            $("#clustering-graph-modal").show();
-                            var clusterId = $(this).attr('cluster-id');
-                            showCluster = clusterId;
-                            if (graph !== undefined && graphLoaded === false) {
-                                activateGraph(graph, clusterId);
-                                graphLoaded = true;
-                            }
-                        });
-
-                        $('#close-modal-button').click(function () {
-                            closeGraphModal();
-                        })
-
-                        // request clustered graph
-                        // set graph as a global variable
-                        $.get("{% url 'clustered-graph-json' %}"+"?{{url_query_params_string}}", {
-                            }).then(res => JSON.parse(res)).then(data => {
-                                graph = data;
-                                if ($("#clustering-graph-modal").is(":visible")) {
-                                    if (showCluster !== undefined) {
-                                        activateGraph(graph, showCluster);
-                                        graphLoaded = true;
-                                    } else {
-                                        activateGraph(graph);
-                                        graphLoaded = true;
-                                    }
-                                }
-                            });
-                    }
-        });
-    }
-    {% endif %}
-
-</script>
-
-{% if error_text %}
-    <p>{{ error_text }}</p>
-{% else %}
-    {% if facets %}
-    <div id="sidebar" style="float:right">
-
-        {% if clustering_on %}
-            <h3>clusters 
-                <div id="facet-loader" class="clustering-loader"></div>
-                <img style="display: none;" id="cluster-fail-icon" src="{{media_url}}images/fugue-icons/icons/cross.png" alt=""/>
-                <button style="display: none;" id="show-clustering-graph-button">
-                    show
-                </button>
-            </h3>
-            <div id='clusters-div'>
-                <br>
+    {% else %}
+    <div class="navbar-space-filler v-spacing-3 v-spacing-top-2">
+        {% if initial_tagcloud %}
+        <section id="tags-mode-input-section" class="v-spacing-5">
+            <h3 class="v-spacing-5 text-light-grey center">Choose a tag to start browsing</h3>
+            {% for tag in initial_tagcloud|add_sizes:"count:0.1:1.0" %}
+            {% bw_tag tag.name 1 '' tag.browse_url tag.size %}
+            {% endfor %}
+        </section>
+        {% else %}
+        <form method="get" id="search_form" action="{% if not tags_mode %}{% url 'sounds-search' %}{% else %}{% url 'tags' %}{% endif %}">
+            
+            <div class="v-spacing-5 {% if tags_mode %}display-none{% endif %}">
+                <div class="middle center">
+                    <div class="bw-search__input_wrapper"><i class="bw-icon-search input-icon text-light-grey"></i><input id="search-input-browse" name="q" type="text" value="{{ search_query }}" placeholder="Search {% if not only_sounds_with_pack %}sounds{% else %}packs{% endif %}..." class="bw-search__input" autocomplete="off"/></div>
+                    <input id="filter_query" type="hidden" name="f" value="{{filter_query}}" />
+                    <input id="weights" type="hidden" name="w" value="{{weights}}" />
+                    <input id="tags-mode" type="hidden" name="tm" value="{% if tags_mode %}1{% else %}0{% endif %}" />  {% comment %}This is used so that we can know from JS whether we are in tags mode or not{% endcomment %}
+                    <span class="bw-search_remove-query" id="remove-content-search">{% bw_icon 'close' %}</span>
+                </div>
             </div>
+            
+            {% if tags_mode %}
+            <div id="tags-mode-input-section" class="v-spacing-5">
+                <div class="between middle">
+                    <h3>
+                        <span class="text-light-grey h-spacing-1">Sounds tagged as</span>
+                        {% for tag in tags_in_filter %}
+                        {{ tag }}{% if not forloop.last %}<span class="h-spacing-left-1 h-spacing-1 text-light-grey">·</span>{% endif %}
+                        {% endfor %}
+                    </h3>
+                    {% bw_follow_tags_widget %}
+                </div>
+            </div>
+            {% endif %}
+            
+            <div>
+                <div class="divider-light"></div>
+                <div class="padding-3 v-padding-2 between font-weight-bold middle">
+                    {% if not only_sounds_with_pack %}
+                    <div class="col-4">{% if non_grouped_number_of_results > 0 %}{{ non_grouped_number_of_results|bw_intcomma }}{% else %}{{ paginator.count|bw_intcomma }}{% endif %} sound{{ non_grouped_number_of_results|pluralize }}</div>
+                    {% else %}
+                    <div class="col-4">{{ paginator.count|bw_intcomma }} pack{{ paginator.count|pluralize }}</div>
+                    {% endif %}
+                    {% comment %}
+                    <div class="bw_search-tab">Sounds</div>
+                    {% endcomment %}
+                    {% comment %}
+                    This section of the UI show allow to choose between different search modes:
+                    sounds and packs. However, this is currently not implemented in the backend so we don't
+                    enable this feature. Instead, we add here the element to toggle advanced search options.
+                    In the future we might need to redesign that.
+                    {% endcomment %}
+                    <div class="col-4 middle">
+                        <a href="#" class="bw-link--grey-light" id="toggle_advanced_search_options"></a>
+                        {% if has_advanced_search_settings_set %}<span class="text-red h-spacing-left-1 text-44 line-height-14 padding-bottom-1" title="There are active filters in the advanced search options">·</span>{% endif %}
+                    </div>
+                    <div class="browse__search-overview-sorter">
+                        <span class="font-weight-normal text-light-grey d-none d-md-inline">Sort by:</span>
+                        <select name="s" id="sort-by">
+                            {% for option in sort_options %}
+                            <option value="{{option.1}}"{% ifequal option.1 sort %}selected="selected"{% endifequal %}>{{option.0}}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+                <div class="divider-light"></div>
+                <div id="advanced-search-options" class="{% if not advanced == "1" or advanced_search_closed_on_load %}display-none{% endif %}">
+                    <div class="v-padding-2 between">
+                        <input id="advanced_search_hidden" type="hidden" name="advanced" value="{% if advanced == "1" and not advanced_search_closed_on_load %}1{% else %}0{% endif %}" />
+                        
+                        <div class="col-md-4 bw-search__advanced-search-filter-section">
+                            <div class="bw-search__filter-section-name caps text-light-grey between">
+                                <span>Search in</span>
+                            </div>
+                            <div class="row no-gutters v-spacing-top-2 {% if tags_mode %}opacity-020{% endif %}">
+                                <div class="col-md-5">
+                                    <ul class="bw-search__filter-value-list no-margins">
+                                        <li class="bw-search__filter-value v-padding-1">
+                                            <label class="between w-100">
+                                                <div class="bw-search__filter-checkbox">
+                                                    <input type="checkbox" class="bw-checkbox" on name="a_tag" {% if a_tag %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
+                                                </div>
+                                                <div class="bw-search__filter-name">Tags</div>
+                                            </label>
+                                        </li>
+                                        <li class="bw-search__filter-value v-padding-1">
+                                            <label class="between w-100">
+                                                <div class="bw-search__filter-checkbox">
+                                                    <input type="checkbox" class="bw-checkbox" name="a_filename" {% if a_filename %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
+                                                </div>
+                                                <div class="bw-search__filter-name">Sound name</div>
+                                            </label>
+                                        </li>
+                                        <li class="bw-search__filter-value v-padding-1">
+                                            <label class="between w-100">
+                                                <div class="bw-search__filter-checkbox">
+                                                    <input type="checkbox" class="bw-checkbox" name="a_description" {% if a_description %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
+                                                </div>
+                                                <div class="bw-search__filter-name">Description</div>
+                                            </label>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="col-md-5">
+                                    <ul class="bw-search__filter-value-list no-margins">
+                                        <li class="bw-search__filter-value v-padding-1">
+                                            <label class="between w-100">
+                                                <div class="bw-search__filter-checkbox">
+                                                    <input type="checkbox" class="bw-checkbox" name="a_packname" {% if a_packname %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
+                                                </div>
+                                                <div class="bw-search__filter-name">Pack name</div>
+                                            </label>
+                                        </li>
+                                        <li class="bw-search__filter-value v-padding-1">
+                                            <label class="between w-100">
+                                                <div class="bw-search__filter-checkbox">
+                                                    <input type="checkbox" class="bw-checkbox" name="a_soundid" {% if a_soundid %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
+                                                </div>
+                                                <div class="bw-search__filter-name">Sound ID</div>
+                                            </label>
+                                        </li>
+                                        <li class="bw-search__filter-value v-padding-1">
+                                            <label class="between w-100">
+                                                <div class="bw-search__filter-checkbox">
+                                                    <input type="checkbox" class="bw-checkbox" name="a_username" {% if a_username %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
+                                                </div>
+                                                <div class="bw-search__filter-name">Username</div>
+                                            </label>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="col-md-4 bw-search__advanced-search-filter-section">
+                            <div class="bw-search__filter-section-name caps text-light-grey between">
+                                <span>Duration</span>
+                            </div>
+                            <div class="bw-search__filter-tags-list bw-search__filter-duration">
+                                <input id="filter_duration_min" class="bw-search_input-duration v-spacing-1" type="text" value="0" /> - <input id="filter_duration_max" class="bw-search_input-duration" type="text" value="*" /> <span>seconds</span>
+                            </div>
+                        </div>
+                        
+                        <div class="col-md-4 bw-search__advanced-search-filter-section">
+                            <div class="bw-search__filter-section-name caps text-light-grey between">
+                                <span>Other</span>
+                            </div>
+                            <ul class="bw-search__filter-value-list">
+                                <li class="bw-search__filter-value v-padding-1">
+                                    <label class="between w-100" title="Only find sounds that have geolocation information">
+                                        <div class="bw-search__filter-checkbox">
+                                            <input id="filter_is_geotagged" type="checkbox" class="bw-checkbox"/>
+                                        </div>
+                                        <div class="bw-search__filter-name">Only geotagged sounds</div>
+                                    </label>
+                                </li>
+                                <li class="bw-search__filter-value v-padding-1">
+                                    <label class="between w-100" title="Only find sounds that are a remix of other sounds or have been remixed">
+                                        <div class="bw-search__filter-checkbox">
+                                            <input id="filter_in_remix_group" type="checkbox" class="bw-checkbox"/>
+                                        </div>
+                                        <div class="bw-search__filter-name">Only remix sounds</div>
+                                    </label>
+                                </li>
+                                <li class="bw-search__filter-value v-padding-1">
+                                    <label class="between w-100 {% if disable_group_by_pack_option %}opacity-020{% endif %}" title="Group search results so that multiple sounds of the same pack only represent one item">
+                                        <div class="bw-search__filter-checkbox">
+                                            <input id="group_by_pack" type="checkbox" class="bw-checkbox" {% if group_by_pack_in_request == "1" %}checked{% endif %} {% if disable_group_by_pack_option %}disabled="disabled"{% endif %}/>
+                                            <input id="group_by_pack_hidden" type="hidden" name="g" {% ifequal group_by_pack_in_request "1" %}value="1"{% else %}value=""{% endifequal %} />
+                                        </div>
+                                        <div class="bw-search__filter-name">Group sounds by pack</div>
+                                    </label>
+                                </li>
+                                <li class="bw-search__filter-value v-padding-1">
+                                    <label class="between w-100 {% if disable_only_sounds_by_pack_option %}opacity-020{% endif %}" title="Display search results as packs rather than individual sounds">
+                                        <div class="bw-search__filter-checkbox">
+                                            <input id="only_sounds_with_pack" type="checkbox" class="bw-checkbox" {% if only_sounds_with_pack_in_request == "1" %}checked{% endif %} {% if disable_only_sounds_by_pack_option %}disabled="disabled"{% endif %}/>
+                                            <input id="only_sounds_with_pack_hidden" type="hidden" name="only_p" {% ifequal only_sounds_with_pack_in_request "1" %}value="1"{% else %}value=""{% endifequal %} />
+                                        </div>
+                                        <div class="bw-search__filter-name">Display results as packs</div>
+                                    </label>
+                                </li>
+                                <li class="bw-search__filter-value v-padding-1">
+                                    <label class="between w-100" title="Dipslay search results in a grid so that more sounds are visible per search results page">
+                                        <div class="bw-search__filter-checkbox">
+                                            <input id="use_compact_mode" type="checkbox" class="bw-checkbox" {% if use_compact_mode %}checked{% endif %}/>
+                                            <input id="use_compact_mode_hidden" type="hidden" name="cm" value="{{ use_compact_mode|yesno:"1,0" }}"/>
+                                        </div>
+                                        <div class="bw-search__filter-name">Display results in grid</div>
+                                    </label>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="v-spacing-4 center">
+                        <button id="avanced-search-apply-button" class="btn-primary" disabled>Apply advanced search filters</button>
+                    </div>
+                    <div class="divider-light"></div>
+                </div>
+            </div>
+        </form>
         {% endif %}
-
-        {% if facets.license and facets.license|length > 1 %}
-            <h3>licenses</h3>
-            {% display_facet "license" facets.license "list" %}
-        {% endif %}
-
-        {% if facets.tag and facets.tag|length > 1 %}
-            <h3>tags</h3>
-            {% display_facet "tag" facets.tag "cloud" %}
-        {% endif %}
-
-        {% if facets.type and facets.type|length > 1 %}
-            <h3>type</h3>
-            {% display_facet "type" facets.type "list" %}
-        {% endif %}
-
-        {% if facets.samplerate and facets.samplerate|length > 1 %}
-            <h3>samplerate</h3>
-            {% display_facet "samplerate" facets.samplerate "list" %}
-        {% endif %}
-
-        {% if facets.bitdepth and facets.bitdepth|length > 1 %}
-            <h3>bitdepth</h3>
-            {% display_facet "bitdepth" facets.bitdepth "list" %}
-        {% endif %}
-
-        {% if facets.bitrate and facets.bitrate|length > 1 %}
-            <h3>bitrate</h3>
-            {% display_facet "bitrate" facets.bitrate "list" %}
-        {% endif %}
-
-
-        {% if facets.channels and facets.channels|length > 1 %}
-            <h3>channels</h3>
-            {% display_facet "channels" facets.channels "list" %}
-        {% endif %}
-
-        {% if facets.grouping_pack and facets.grouping_pack|length > 1 %}
-            <h3>packs</h3>
-            {% display_facet "grouping_pack" facets.grouping_pack "list" %}
-        {% endif %}
-
-        {% if facets.username and facets.username|length > 1 %}
-            <h3>users</h3>
-            {% display_facet "username" facets.username "cloud" %}
-        {% endif %}
-
     </div>
-
-        {% if paginator.count > 0 %}
-            <div class="search_paginator">
-                {% show_paginator paginator page current_page request "sound" non_grouped_number_of_results %}
+    {% if not initial_tagcloud %}
+    <div class="row">
+        <div class="col-12 center v-spacing-top-negative-2 d-md-none">
+            <div data-target="collapsable-filters" data-show-text="Show filters" data-hide-text="Hide filters" data-hide-on-load class="collapsable-toggle v-spacing-top-2 font-weight-bold text-light-grey"></div>
+        </div>
+        
+        <aside class="col-md-4 col-lg-3 collapsable-block md-max-h-100" id="collapsable-filters">
+            {% if tags_mode %}
+            {% if facets.tag and facets.tag|length > 1 %}
+            {% display_facet "tag" facets.tag "cloud" "Add Related Tags" %}
+            {% endif %}
+            {% endif %}
+            
+            {% if facets.license and facets.license|length > 1 %}
+            {% display_facet "license" facets.license "list" "Licenses" %}
+            {% endif %}
+            
+            {% if not tags_mode %}
+            {% if facets.tag and facets.tag|length > 1 %}
+            {% display_facet "tag" facets.tag "cloud" "Related Tags" %}
+            {% endif %}
+            {% endif %}
+            
+            {% if facets.type and facets.type|length > 1 %}
+            {% display_facet "type" facets.type "list" "Type" %}
+            {% endif %}
+            
+            {% if facets.samplerate and facets.samplerate|length > 1 %}
+            {% display_facet "samplerate" facets.samplerate "list" "Samplerate" %}
+            {% endif %}
+            
+            {% if facets.bitdepth and facets.bitdepth|length > 1 %}
+            {% display_facet "bitdepth" facets.bitdepth "list" "Bitdepth" %}
+            {% endif %}
+            
+            {% if facets.bitrate and facets.bitrate|length > 1 %}
+            {% display_facet "bitrate" facets.bitrate "list" "Bitrate" %}
+            {% endif %}
+            
+            {% if facets.channels and facets.channels|length > 1 %}
+            {% display_facet "channels" facets.channels "list" "Channels" %}
+            {% endif %}
+            
+            {% if not only_sounds_with_pack %}
+            {% if facets.grouping_pack and facets.grouping_pack|length > 1 %}
+            {% display_facet "grouping_pack" facets.grouping_pack "list" "Packs"%}
+            {% endif %}
+            {% endif %}
+            
+            {% if facets.username and facets.username|length > 1 %}
+            {% display_facet "username" facets.username "cloud" "Related users" %}
+            {% endif %}
+        </aside>
+        
+        <div class="col-12 divider-light d-md-none v-spacing-top-3 v-spacing-3"></div>
+        
+        <main class="col-12 col-md-8 col-lg-9 col-extra-left-padding-large-md">
+            {% if filter_query_split %}
+            <div class="v-spacing-3 v-spacing-top-2 line-height-33">
+                {% for filter in filter_query_split %}
+                <a class="no-hover btn-inverse bw-search__active-filters-button" href="/search/?advanced={{ advanced }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&s={{ sort }}&cluster_id={{ filter.cluster_id }}&w={{ weights }}&q={{search_query}}&f={{ filter.remove_url }}" title="Remove this filter">
+                    {{ filter.name }}<span class="h-spacing-left-1">{% bw_icon 'close' %} </span>
+                </a>
+                {% endfor %}
             </div>
-
-            {% for result in docs %}
-                {% display_sound result.sound %}
-                {% if result.n_more_in_group %}
-                    <div class="sample_more_search_results"><img src="{{media_url}}images/plus.png" alt="" /> <a href='{% url "sounds-search"  %}?q={{ search_query }}&f=grouping_pack:"{{ result.sound.pack_id }}_{{ result.sound.pack_name }}"+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>{{result.n_more_in_group}} more result{{ result.n_more_in_group|pluralize  }}</a> in the same pack "{{ result.sound.pack_name|truncate_string:35 }}"</div>
+            {% endif %}
+            <div class="v-spacing-6 v-spacing-top-2">
+                {% if paginator.count > 0 %}
+                {% if use_compact_mode %}
+                <div class="row">
+                    {% for result in docs %}
+                    <div class="col-6 col-lg-4">
+                        {% if not only_sounds_with_pack %}
+                        {% display_sound_small result.sound %}
+                        {% if result.n_more_in_group and result.sound.pack_id is not None %}
+                        <p class="text-grey text-right v-spacing-top-negative-2">
+                            {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:"{{ result.sound.pack_id }}_{{ result.sound.pack_name|urlencode }}"+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from pack:</a> <a class="bw-link--grey" href="{% url 'pack' result.sound.username result.sound.pack_id %}">{{ result.sound.pack_name|truncate_string:35 }}</a>
+                        </p>
+                        {% endif %}
+                        {% else %}
+                        {% display_pack result.pack %}
+                        <p class="text-grey text-right v-spacing-top-negative-2">
+                            {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:{{ result.pack.pack_filter_value }}+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from pack</a>
+                        </p>
+                        {% endif %}
+                    </div>
+                    {% endfor %}      
+                </div>
+                {% else %}
+                {% for result in docs %}
+                <div class="bw-search__result">
+                    {% if not only_sounds_with_pack %}
+                    {% display_sound_middle result.sound %}
+                    {% if result.n_more_in_group and result.sound.pack_id is not None %}
+                    <div class="text-grey text-right v-spacing-top-negative-1 v-spacing-2">
+                        {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:"{{ result.sound.pack_id }}_{{ result.sound.pack_name|urlencode }}"+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from same pack</a>
+                    </div>
+                    {% endif %}
+                    {% else %}
+                    {% display_pack_big result.pack %}
+                    <div class="text-grey text-right v-spacing-top-negative-1 v-spacing-2 padding-right-1">
+                        {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:{{ result.pack.pack_filter_value }}+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from this pack</a>
+                    </div>
+                    {% endif %}
+                    {% if not forloop.last %}
+                    <div class="divider-light v-spacing-2"></div>
+                    {% endif %}
+                </div>
+                {% endfor %}
+                {% endif %}
+                {% else %}
+                <div class="v-spacing-7 v-spacing-top-6 w-100">
+                    <h5>No results... &#128543</h5>
+                    <p class="text-grey v-spacing-2">Please try another query or change the filters</p>
+                </div>
                 {% endif %}
-            {% endfor %}
-
-            <div class="search_paginator">
-                {% show_paginator paginator page current_page request "sound" non_grouped_number_of_results %}
             </div>
-        {% else %}
-            <p>Search returned no results...</p>
-        {% endif %}
-
-
+            <div class="v-spacing-6">
+                {% bw_paginator paginator page current_page request "sound" non_grouped_number_of_results %}
+            </div>
+        </main>
+    </div>
     {% endif %}
-{% endif %}
-
+    {% endif %}
+</div>
 {% endblock %}
+
+{% block extrabody %}
+{% if not error_text and not initial_tagcloud %}
+{% comment %}If there were errors reaching the search server, don't even load the
+JS bits because we only display the error message{% endcomment %}
+<script src="{% static 'bw-frontend/dist/search.js' %}"></script>
+{% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates/search/search_ajax.html b/templates/search/search_ajax.html
deleted file mode 100644
index c7ee6ee01..000000000
--- a/templates/search/search_ajax.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% load display_sound %}
-
-{% block section_content %}
-
-{% if docs %}
-    {% if error %}
-    <div>
-        Search failed
-    </div>
-    {% else %}
-        {% for result in docs %}
-            {% display_sound result.id %}
-        {% endfor %}
-    {% endif %}
-{% else %}
-    <div>
-        No results
-    </div>
-{% endif %}
-
-{% endblock %}
diff --git a/templates/search/search_forum.html b/templates/search/search_forum.html
index b248fdf89..a5b10054d 100644
--- a/templates/search/search_forum.html
+++ b/templates/search/search_forum.html
@@ -1,40 +1,73 @@
-{% extends "forum/_section.html" %}
+{% extends "simple_page.html" %}
+{% load bw_templatetags %}
+{% load display_forum_objects %}
 
+{% block title %}Forums search{% endblock %}
+{% block page-title %}Freesound Forums Search{% endblock %}
 
-{% load display_forum_search_results %}
-{% load paginator %}
-{% load search %}
-
-{% block title %}Forum Search{% endblock title %}
-
-{% block breadcrumb %}
-    {% if current_forum %}
-        {% url "forums-forum" current_forum.name_slug as forum_url %}
-        &#187; <a href="{{forum_url}}">{{current_forum.name}}</a>
-    {% endif %}
-{%  endblock %}
-
-{% block section_content %}
-
-<br style="padding-top:10px">
-{% if error %}
-    <p>{{ error_text }}</p>
-{% else %}
-    {% if paginator.count > 0 %}
-        <div class="search_paginator" style="height:30px">
-        {% show_paginator paginator page current_page request "thread" %}
+{% block page-content %}
+    <div class="divider-light v-spacing-top-4 v-spacing-2"></div>
+    <div class="row middle">
+        <div class="col-md-6">
+            <ul class="navbar-forums-hot navbar-breadcrumb">
+                <li class="nav-item">
+                      <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
+                </li>
+                {% if current_forum %}
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{current_forum.get_absolute_url}}">{{ current_forum.name }}</a>
+                    </li>
+                {% endif %}
+                <li class="nav-item text-16">
+                    Search {% if username_filter %} <a class="h-spacing-left-4 no-hover btn-inverse bw-search__active-filters-button" href="{{ remove_username_filter_url }}" title="Remove this filter" aria-label="Remove this filter">
+                        user:{{ username_filter }}<span class="h-spacing-left-1">{% bw_icon 'close' %} </span>
+                    </a> {% endif %}
+                </li>
+            </ul>
         </div>
+        <div class="col-md-6 v-spacing-1 v-spacing-top-1 between middle">
+            <form method="get" action="{% url "forums-search" %}" class="w-75">
+                <input type="hidden" name="advanced_search"  value="0"/>
+                <input type="hidden" name="forum" value="{% if current_forum %}{{current_forum.name_slug}}{% else %}{% endif %}"/>
+                <div class="input-wrapper w-100">
+                    <i class="bw-icon-search input-icon"></i><input name="q" type="search" placeholder="{% if current_forum %}Search in this forum...{% else %}Search in all forums...{% endif %}" autocomplete="off" value="{{ search_query }}">
+                </div>
+            </form>
+            <div class="text-grey">
+                {% if paginator %}
+                    {{ paginator.count|bw_intcomma }} post{{ paginator.count|pluralize }}
+                {% else %}
+                    0 posts
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    <div class="divider-light v-spacing-top-2"></div>
 
-        {% display_forum_search_results results.docs results.highlighting %}
-
-        <br style="padding-top:10px">
-        <div class="search_paginator">
-        {% show_paginator paginator page current_page request "thread" %}
+    {% if error_text %}
+        <div class="v-spacing-3 v-spacing-top-4">
+            <div class="v-spacing-6 v-spacing-top-4">
+                <p class="v-spacing-4">{{ error_text }}</p>
+                <p><button onclick="window.history.back();" class="btn-primary">Go back</button></p>
+            </div>
         </div>
     {% else %}
-        <p>Search returned no results...</p>
+        <div class="v-spacing-top-4">
+            {% for post in posts  %}
+                {% display_post post 0 0 True False False results.highlighting %}
+                {% if not forloop.last %}
+                    <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
+                {% endif %}
+            {% empty %}
+                <div class="v-spacing-7 v-spacing-top-6 w-100 text-center">
+                    <h5>No results... &#128543</h5>
+                    <p class="text-grey v-spacing-2">Please try another query</p>
+                </div>
+            {% endfor %}
+        </div>
+        <div class="v-spacing-top-5">
+            {% bw_paginator paginator page current_page request "" -1 %}
+        </div>
     {% endif %}
 
-{% endif %}
-
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/simple_page.html b/templates/simple_page.html
similarity index 100%
rename from templates_bw/simple_page.html
rename to templates/simple_page.html
diff --git a/templates/sounds/_section.html b/templates/sounds/_section.html
deleted file mode 100644
index ca2568648..000000000
--- a/templates/sounds/_section.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends "base.html" %}
-
-{% block tab_sounds_active %}active_tab{% endblock %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-{% block section_content %}
-
-{% endblock %}
-</div> <!-- END of Content area -->
-
-<br class="clear" />
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/sounds/after_download_modal_donation.html b/templates/sounds/after_download_modal_donation.html
deleted file mode 100644
index 4a8b9e74c..000000000
--- a/templates/sounds/after_download_modal_donation.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="modal-content">
-    <div class="modal-header"><span class="close-modal">&times;</span>
-        Support Freesound
-    </div>
-    <div class="modal-body">
-        <p>Thanks for downloading <b>{{ sound_name }}</b>!</p>
-        <p>It looks like you have downloaded a significant number of sounds recently.
-        If Freesound is useful to you, please consider supporting us by
-        <a href="{% url 'donate' %}">making a donation</a>.
-        Help us to keep Freesound open and free :)
-        </p>
-    </div>
-
-    <div style="display: flex; justify-content: center;">
-        <a class="donate-button" href="{% url 'donate' %}">Donate Now</a>
-    </div>
-</div>
\ No newline at end of file
diff --git a/templates/sounds/browse_packs.html b/templates/sounds/browse_packs.html
deleted file mode 100644
index 7c4e456ae..000000000
--- a/templates/sounds/browse_packs.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{% extends "sounds/_section.html" %}
-{% load cache %}
-{% load paginator %}
-{% load display_pack %}
-
-{% block title %}Packs{% endblock title %}
-
-{% block section_content %}
-
-<h1>Packs</h1>
-<h3>Sort by</h3>
-<ul class="list_order" id="filter_query_display">
-<li><a href="?order=name" {% ifequal order "name" %}class="selected"{% endifequal %}>name</a></li>
-<li><a href="?order=-created" {% ifequal order "-created" %}class="selected"{% endifequal %}>creation date</a></li>
-<li><a href="?order=-last_updated" {% ifequal order "-last_updated" %}class="selected"{% endifequal %}>last update</a></li>
-<li><a href="?order=-num_sounds" {% ifequal order "-num_sounds" %}class="selected"{% endifequal %}>number of sounds</a></li>
-<li><a href="?order=-num_downloads" {% ifequal order "-num_downloads" %}class="selected"{% endifequal %}>number of downloads</a></li>
-</ul>
-{% cache 3600 browse_packs order current_page %}
-<p>{% show_paginator paginator page current_page request "pack" %}</p>
-
-{% for pack in page.object_list %}
-	{% display_pack pack %}	
-{% endfor %}
-
-{% show_paginator paginator page current_page request "pack" %}
-
-{% endcache %}
-{% endblock %}
diff --git a/templates/sounds/comments.html b/templates/sounds/comments.html
deleted file mode 100644
index 6ac997f27..000000000
--- a/templates/sounds/comments.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load util %}
-{% load cache %}
-{% load paginator %}
-{% load display_sound %}
-{% load flag_user %}
-{% load filter_img %}
-
-{% block title %}
-    {% if mode == "by_user" %}
-        Comments by {{ user.username }}
-    {% elif mode == "for_user" %}
-        Comments for sounds by {{ user.username }}
-    {% elif mode == "latest" %}
-        Latest comments
-    {% endif %}
-{% endblock title %}
-
-{% block section_content %}
-
-{% if mode == "by_user" %}
-    <h1>Comments by <a href="{% url "account" user.username %}">{{user.username}}</a></h1>
-{% elif mode == "for_user" %}
-    <h1>Comments for sounds by <a href="{% url "account" user.username %}">{{user.username}}</a></h1>
-{% elif mode == "latest" %}
-    <h1>Latest comments</h1>
-{% endif %}
-
-{% show_paginator paginator page current_page request "comment" %}
-<ul id="comments" style="margin-top:-20px;">
-    {% for comment in comments %}
-    <li>
-        <div style="float:right; text-align: right; font-size: 10px">
-            {%  flag_user "SC" comment.user.username comment.id "" comment.user.profile.num_sounds %}
-        </div>
-        <img src="{{comment.user.profile.locations.avatar.S.url}}" alt="avatar" class="comment_avatar" />
-        <div class="comment_info">
-            <span class="comment_author"><a href="{% url "account" comment.user.username %}">{{comment.user.username}}</a></span>
-            <span class="comment_date">{{comment.created|timesince}} ago</span>
-        </div>
-        {{comment.comment|replace_img|safe|linebreaks}}
-        <div style="margin-top:10px;">
-            On sound:  <a class="title" href="{% url "sound" comment.sound.user.username comment.sound.id %}" title="{{comment.sound.original_filename}}">{{comment.sound.original_filename|truncate_string:27}}</a> by <a href="{% url "account" comment.sound.user.username %}">{{comment.sound.user.username}}</a>
-        </div>
-    </li>
-    {% endfor %}
-</ul><p></p>
-{% show_paginator paginator page current_page request "comment" %}
-{% endblock %}
diff --git a/templates/sounds/delete.html b/templates/sounds/delete.html
deleted file mode 100644
index 755aa17cf..000000000
--- a/templates/sounds/delete.html
+++ /dev/null
@@ -1,32 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-
-{% load paginator %}
-
-{% block title %}Delete {{sound.original_filename}}{% endblock title %}
-
-{% block section_content %}
-<h1>Delete <a href="{% url "sound" sound.user.username sound.id %}">{{sound.original_filename}}</a></h1>
-
-<p>
-    WARNING: files can not be undeleted, not even by administrators!<br/>
-
-    If you are entirely sure you want to delete your sound: {{sound.original_filename}}, please click the following button
-    (form valid for 10 seconds only):</p>
-    <form method="post">
-        {% if error_message %}
-        <ul class="errorlist nonfield">
-            <li>{{ error_message }}</li>
-        </ul>
-        {% endif %}
-      {% csrf_token %}
-      {{delete_form.encrypted_link}}
-      {{delete_form.delete_sounds}}
-
-    <button>Delete sound</button>
-    </form>
-
-
-</p>
-
-{% endblock %}
diff --git a/templates/sounds/display_pack.html b/templates/sounds/display_pack.html
index 6d7dd448c..80ba001be 100644
--- a/templates/sounds/display_pack.html
+++ b/templates/sounds/display_pack.html
@@ -1,43 +1,131 @@
 {% load cache %}
+{% load util %}
+{% load display_sound %}
+{% load bw_templatetags %}
 
-{% if pack %}
-{% cache 3600 display_pack pack.id %}
-
-<div class="pack_display" id="{{pack.id}}" tabindex="0">
-<div class="pack_description">
-
-<h4><a href="{% url "pack" pack.user.username pack.id %}">{{pack.name}}</a> <span style="font-weight:normal;">({{ pack.num_sounds }} sound{{ pack.num_sounds|pluralize }}) </span></h4>
-<p class="text">by <a href="{% url "account" pack.user.username %}">{{pack.user.username}}</a>.
-<a href="{% url "pack-downloaders" pack.user.username pack.id %}">Downloaded {{pack.num_downloads}} times.</a>
-<br>Tags of sounds inside the pack:
-{% with pack.get_pack_tags as tags %}
-    {% if tags %}
-        {% for tag in tags.tags %}
-            <a href="{% url "tags" tag %}" class="tags" >{{ tag }}</a>
-        {% endfor %}
-        {% if tags.num_tags == 20 %}
-            <span class="dots">...</span>
+{% if size == 'small' %}
+    <div class="bw-display-pack v-spacing-3 overfow-hidden">
+        <div class="bw-carousel-container">
+            <div class="bw-carousel-wrapper">
+                <div class="bw-carousel with-dots dots-distance-02">
+                    {% for sound_data in pack.selected_sounds_data %}
+                        <div>
+                            {% if show_bookmark_similarity_buttons %}
+                            {% display_sound_small_no_sound_object sound_data %}
+                            {% else %}
+                            {% display_sound_small_no_sound_object_no_bookmark sound_data %}
+                            {% endif %}
+                        </div>
+                    {% empty %}
+                        <div class="bw-player-small-thumbnail-empty-space"></div>
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+        <div class="between line-height-percentage-150 v-spacing-top-1">
+            <h5 class="ellipsis">
+                <span class="bw-icon-stack h-spacing-1 text-light-grey"></span><a class="bw-link--black" href="{% url "pack" pack.user.username pack.id %}">{{ pack.name }}</a>
+            </h5>
+            {% if pack.name|length <= 30 %}{% include 'sounds/display_pack_small_icons.html' %}{% endif %}
+        </div>
+        <div class="between">
+            <div>
+                <a href="{% url "account" pack.user.username %}" title="Username: {{ pack.user.username }}">{{ pack.user.username|truncate_string:15 }}</a><span class="text-grey h-spacing-left-1 h-spacing-1">·</span><a href="{{ pack.get_pack_sounds_in_search_url }}" class="bw-link--grey">{{ pack.num_sounds|formatnumber }} sound{{ pack.num_sounds|pluralize }}</a>
+            </div>
+            {% if pack.name|length > 30 %}{% include 'sounds/display_pack_small_icons.html' %}{% endif %}
+        </div>
+        <div>
+            <span class="text-grey">{{ pack.created|timesince }} ago</span>
+        </div>
+        <div class="v-spacing-top-1 overflow-hidden" style="max-height:54px;">
+            {% if pack.description %}
+                {{ pack.description|striptags|safe|truncatechars_html:55 }}
+            {% else %}
+                This pack has no description.
+            {% endif %}
+        </div>
+    </div>
+    {% if pack.show_unpublished_sounds_warning %}
+    {% with pack.num_sounds_unpublished as num_sounds_unpublished %}
+        {% if num_sounds_unpublished > 0 %}
+            <div class="v-spacing-3 v-spacing-top-negative-2 text-blue">
+                {% bw_icon "notification" %}Has {{ num_sounds_unpublished}} unpublished sound{{ num_sounds_unpublished|pluralize }}
+            </div>
         {% endif %}
-    {% else %}
-        Tag information is not available right now.
+    {% endwith %}
     {% endif %}
-{% endwith %}
-</p>
-</div>
-
-
-<div class="sounds_in_pack">
-{% with pack.get_random_sounds_from_pack as sounds %}
-    <span class="text">Some random samples from the pack:</span><br>
-    {% for sound in sounds %}
-        <div class="sound">
-        {% include "sounds/player_medium.html" %}
-        </div>
-    {% endfor %}
-{% endwith %}
-</div>
-</div>
-
-{% endcache %}
+{% elif size == 'big' %}
+    <div class="bw-display-pack">
+        {% if pack.selected_sounds_data %}
+        <div class="row no-margins" style="margin-left: -15px">
+            {% for sound_data in pack.selected_sounds_data %}
+                <div class="col-4">
+                    {% if show_bookmark_similarity_buttons %}
+                    {% display_sound_small_no_sound_object sound_data %}
+                    {% else %}
+                    {% display_sound_small_no_sound_object_no_bookmark sound_data %}
+                    {% endif %}
+                </div>
+            {% endfor %}
+        </div>
+        {% else %}
+            <div class="bw-player-small-thumbnail-empty-space"></div>
+        {% endif %}
+        <div class="between v-spacing-top-1">
+            <div>
+                <h5><span class="bw-icon-stack h-spacing-1 text-light-grey"></span><a class="bw-link--black ellipsis" href="{% url "pack" pack.user.username pack.id %}" >{{ pack.name }}</a></h5>
+            </div>
+            <div class="text-grey text-right between padding-right-1">
+                <div style="min-width:130px;" class="top right">{% bw_generic_stars pack.avg_rating %}<span class="text-grey h-spacing-left-1">{% if pack.num_ratings %}({{ pack.num_ratings|formatnumber }}){% endif %}</span></div>
+            </div>
+        </div>
+        <div class="between">
+            <div class="text-black v-spacing-top-1 padding-right-2 v-spacing-1">
+                {% if pack.description %}{{ pack.description|striptags|safe|truncatewords_html:20 }}
+                {% else %}This pack has no description.{% endif %}
+            </div>
+            {% with pack.get_pack_tags_bw as tags %}
+                {% if tags %}
+                    <div class="right wrap">
+                    {% for tag in tags|slice:":5" %}
+                        {% bw_tag tag.name 1 '' tag.browse_url %}
+                    {% endfor %}
+                    </div>
+                {% endif %}
+            {% endwith %}
+        </div>
+        <div class="between middle v-spacing-2">
+            <div class="">
+                <div class="middle text-grey h-spacing-1">
+                    <div class="h-spacing-1">
+                        {% bw_user_avatar pack.user_profile_locations.avatar.S.url pack.user.username 32 %}
+                    </div>
+                    <a href="{% url 'account' pack.user %}">{{ pack.user | truncate_string:15 }}</a>
+                    <span class="h-spacing-left-1 text-light-grey">{{ pack.created|date:"F jS, Y" }}</span>
+                </div>
+            </div>
+            <div class="text-light-grey right padding-right-1">
+                <div title="{{ pack.num_sounds|bw_intcomma }} sound{{ pack.num_sounds|pluralize }}">
+                    <a href="{{ pack.get_pack_sounds_in_search_url }}" class="bw-link--grey-light">
+                        <span class="bw-icon-wave"></span> {{ pack.num_sounds|formatnumber }}
+                    </a>
+                </div>
+                {% if pack.has_geotags %}
+                    <div class="h-spacing-left-2" title="Pack has geotags">
+                        <a href="{% url 'pack-geotags' pack.user.username pack.id %}" class="bw-link--grey-light">
+                            <span class="bw-icon-pin"></span>
+                        </a>
+                    </div>
+                {% endif %}
+                <div class="h-spacing-left-2" title="{{ pack.num_downloads|bw_intcomma }} download{{ pack.num_downloads|pluralize }}">
+                    <a href="{% url 'pack-downloaders' pack.user.username pack.id %}" class="bw-link--grey-light">
+                        <span class="bw-icon-download"></span> {{ pack.num_downloads|formatnumber }}
+                    </a>
+                </div>
+                <div class="h-spacing-left-2" title="License: {{ pack.license_summary_name_and_id.0 }}">
+                    <span class="bw-icon-{{ pack.license_bw_icon_name }}"></span>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endif %}
-
diff --git a/templates_bw/sounds/display_pack_selectable.html b/templates/sounds/display_pack_selectable.html
similarity index 100%
rename from templates_bw/sounds/display_pack_selectable.html
rename to templates/sounds/display_pack_selectable.html
diff --git a/templates_bw/sounds/display_pack_small_icons.html b/templates/sounds/display_pack_small_icons.html
similarity index 100%
rename from templates_bw/sounds/display_pack_small_icons.html
rename to templates/sounds/display_pack_small_icons.html
diff --git a/templates/sounds/display_remix.html b/templates/sounds/display_remix.html
deleted file mode 100644
index 71063d2ba..000000000
--- a/templates/sounds/display_remix.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div id="center">
-	<div id="fig">
-    	<script type="text/javascript+protovis">
-// Graph DATA
-var data = {{ data|safe }};
-
-/* ======== PROTOVIS STUFF-START ======== */
-var vis = new pv.Panel()
-				.def("i", -1)
-    			.width(205)
-    			.height(data.length * 160)
-				.bottom(0)
-				.top(0)
-				.right(15);
-
-var arc = vis.add(pv.Layout.Arc)
-    .nodes(data.nodes)
-    .links(data.links)
-	.orient("right");
-
-arc.link.add(pv.Line)
-   		.strokeStyle(function(d, p)  connections(d,p))
-		.eccentricity(data.eccentricity);
-
-arc.node.add(pv.Dot)
-    .size(function(d) d.linkDegree + 4)
-	.fillStyle(function(d) vis.i() == this.index ? "#F1D9FF" : "#DBDBDB")
-    .strokeStyle(function() this.fillStyle().darker())
-    .radius(function() vis.i() == this.index ? 10 : 5)
-    .event("mouseover", function(d) (d.active = true, arc, vis.i(this.index)))
-    .event("mouseout", function(d) (clearBackgrounds(), d.active = false, arc, vis.i(-1)))
-	.event("click", function(d) goToSound(d.id,d.username));
-
-vis.render();
-/* ======== PROTOVIS STUFF-END ======== */
-
-/* ======== helper functions ========= */
-function connections(d, p) {
-	if (p.sourceNode.active == true) {
-		$("#"+p.targetNode.id+"").animate({backgroundColor: "#DBDBDB"});
-		$("#"+p.sourceNode.id+"").animate({backgroundColor: "#F1D9FF"});
-		return "orange";
-	} else if (p.targetNode.active == true) {	
-		$("#"+p.targetNode.id+"").animate({backgroundColor: "#F1D9FF"});
-		$("#"+p.sourceNode.id+"").animate({backgroundColor: "#DBDBDB"});
-		return "orange";
-	} else
-		return "#c7c7c7";
-}
-function goToSound(soundId, username) {
-	window.location.href = "/people/"+username+"/sounds/"+soundId+"/remixes";
-}
-function clearBackgrounds() {
-	for (var i=0; i<data.nodes.length; i++) {
-		$("#"+data.nodes[i].id+"").animate({backgroundColor: "#ffffff"});
-	}
-}
-    	</script>
-  	</div>
-</div>  	
-
-  
\ No newline at end of file
diff --git a/templates/sounds/display_sound.html b/templates/sounds/display_sound.html
index 7862bd06b..6f0dc43e2 100644
--- a/templates/sounds/display_sound.html
+++ b/templates/sounds/display_sound.html
@@ -1,145 +1,206 @@
 {% load cache %}
 {% load util %}
-{% load ratings %}
-{% if sound %}
-
-{% comment %}
-    If you change this cache index, be sure to change the invalidation in
-    ratings/views.py as well
-{% endcomment %}
-{% cache 43200 display_sound sound.id is_authenticated is_explicit %}
-
-<div class="sample_player_small" id="{{ sound.id }}" tabindex="0">
-
-    {% if is_explicit %}
-    <div class="explicit_content_text">
-        <span>Warning: this sound may be inappropriate for some users <a href="javascript:void(0);" onclick="remove_explicit_content_warning(this);">Dismiss</a></span>
-    </div>
-    {% endif %}
-
-    <div class="sample_player {% if is_explicit %}blur{% endif %}">
-        <div class="small_player">
-            {% include "sounds/player_medium.html" %}
-        </div><!-- .small_player -->
-
-        <div class="sound_title">
-            <div class="sound_filename">
-               <a class="title" href="{% url "sound" sound.username sound.id %}" title="{{sound.original_filename}}">{{sound.original_filename|truncate_string:27}}</a>
-            </div><!-- .sound_filename -->
-            <div class="sound_stars">
-               {% sound_ratings %}
-            </div><!-- .sound_stars -->
-
-            <div class="sound_description">
-                <p class="description">{{sound.description|striptags|safe|truncatewords:20}}</p>
-            </div><!-- .sound_description -->
-
-            <div class="sound_tags">
-
-                <ul class="tags">
-                    {% for tag in sound.tag_array %}
-                        <li><a href="{% url "tags" tag %}">{{tag}}</a></li>
-                    {% endfor %}
-                </ul>
-                <br style="clear: both;"/>
-
-            </div><!-- .sound_tags -->
-
-            <div id="bookmark_form_{{sound.id}}" class="bookmark_form"></div> <!-- to be filled dynamically with ajax -->
+{% load bw_templatetags %}
 
-            {% if sound.moderation_state != 'OK' or sound.processing_state != 'OK' %}
-                <p style="font-size:10px; color:gray">
-                {% if sound.processing_state != 'OK' %}
-                    Processing state:
-                    {% if sound.processing_state == 'PE' %}
-                        Pending
-                    {% else %}
-                        {% if sound.processing_state == 'QU' %}
-                            Queued
-                        {% else %}
-                            {% if sound.processing_state == 'FA' %}
-                                Failed
-                            {% else %}
-                                {% if sound.processing_state == 'PR' %}
-                                    Processing
-                                {% else %}
-                                    {{sound.processing_state}}
-                                {% endif %}
-                            {% endif %}
+{% if sound %}
+    {% if player_size == 'small' %}
+        {% comment %}This is the default size which includes the basic player with sound metadatata{% endcomment %}
+        {% if is_explicit %}
+            <div class="explicit-sound-blocker blocker-small">
+                <p><b>Warning</b>: this sound may be inappropriate for some users</p>
+                <button class="btn-primary">Show anyway</button>
+            </div>
+        {% endif %}
+        <div class="v-spacing-3 overfow-hidden {% if is_explicit %}blur{% endif %}" aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
+            {% include "sounds/player.html" %}
+            {% cache 43200 bw_display_sound sound.id player_size is_authenticated %}
+            {% if show_rate_widget %}<div class="display-none bw-player__rate__widget">{% bw_sound_stars sound %}</div>{% endif %}
+            <div class="between line-height-percentage-150 v-spacing-top-1">
+                <h5 class="ellipsis">
+                    <a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}">{{ sound.original_filename }}</a>
+                </h5>
+                {% if sound.original_filename|length <= 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
+            </div>
+            <div class="between">
+                <div>
+                    <a href="{% url 'account' sound.username %}" title="Username: {{ sound.username }}">{{ sound.username|truncate_string:15 }}</a>
+                </div>
+                {% if sound.original_filename|length > 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
+            </div>
+            <div>
+                <span class="text-grey">{{ sound.created|timesince }} ago</span>
+            </div>
+            <div class="v-spacing-top-1 overflow-hidden" style="max-height:54px;">
+                {{ sound.description|striptags|safe|truncatechars_html:55 }}
+            </div>
+            {% endcache %}
+        </div>
+        {% if sound.show_moderation_ticket and sound.ticket_key %}
+        <div class="v-spacing-3 v-spacing-top-negative-2">
+            <a class="bw-link--black" href="{% url 'tickets-ticket' sound.ticket_key %}">{% bw_icon "file-text" %} See moderation ticket</a>
+        </div>
+        {% endif %}
+        {% if sound.show_processing_status %}
+        <div class="v-spacing-3 v-spacing-top-negative-2">
+            {% include 'sounds/sound_state_processing_indicator.html' %}
+        </div>
+        {% endif %}
+        {% if sound.show_moderation_status %}
+        <div class="v-spacing-3 v-spacing-top-negative-2">
+            {% include 'sounds/sound_state_moderation_indicator.html' %}
+        </div>
+        {% endif %}
+
+    {% elif player_size == 'middle' %}
+        {% comment %}This is the default player shown in search results and in places where the sound takes
+        "full" width {% endcomment %}
+        {% if is_explicit %}
+            <div class="explicit-sound-blocker blocker-small blocker-force-almost-full-width">
+                <p><b>Warning</b>: this sound may be inappropriate for some users</p>
+                <button class="btn-primary">Show anyway</button>
+            </div>
+        {% endif %}
+        <div class="{% if is_explicit %}blur{% endif %}" aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
+            <div class="row no-gutters no-wrap">
+                <div class="col-4 col-lg-3">
+                    {% include "sounds/player.html" %}
+                </div>
+                {% cache 43200 bw_display_sound sound.id player_size is_authenticated %}
+                <div class="col-8 col-lg-9">
+                    <div class="padding-left-3">
+                        <div class="between">
+                            <div>
+                                <h5 class="v-spacing-1"><a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}" title="{{ sound.original_filename }}">{{ sound.original_filename|truncate_string:52 }}</a></h5>
+                            </div>
+                            <div class="text-grey text-right between stars-margin-top-middle-player">
+                                <div style="min-width:130px;" class="top right">{% bw_sound_stars sound %}<span class="bw-rating__count text-grey h-spacing-left-1">{{ sound.get_ratings_count_text_short }}</span></div>
+                            </div>
+                        </div>
+                        <div class="max-h-60px-md-50px text-black overflow-hidden v-spacing-1">{{ sound.description|striptags|safe|truncatewords_html:28 }}</div>
+                        {% for tag in sound.tag_array|slice:":5" %}
+                            {% bw_tag tag %}
+                        {% endfor %}
+                        {% if sound.moderation_state != 'OK' %}
+                        <div class="right">
+                            {% include 'sounds/sound_state_moderation_indicator.html' %}
+                        </div>
                         {% endif %}
-
+                    </div>
+                </div>
+            </div>
+            <div class="between v-spacing-top-1 v-spacing-2">
+                <div class="middle text-grey h-spacing-1">
+                    <div class="row no-gutters">
+                        <div class="col-12 col-lg-12 middle">
+                            <div class="h-spacing-1">
+                                {% bw_user_avatar user_profile_locations.avatar.S.url sound.username 32 %}
+                            </div>
+                            <a href="{% url 'account' sound.username %}">{{ sound.username | truncate_string:15 }}</a>
+                            <div class="text-light-grey h-spacing-left-1 d-none d-lg-block no-text-wrap">{{ sound.created|date:"F jS, Y" }}</div>
+                        </div>
+                        <div class="col-lg-4 d-lg-none text-light-grey">
+                            {{ sound.created|date:"F jS, Y" }}
+                        </div>
+                    </div>
+                </div>
+                <div class="middle text-light-grey bw_sound-info-extended right">
+                    {% if sound.pack_id %}
+                    <div class="h-spacing-left-2" title="Pack: {{ sound.pack_name }}">
+                        <a href="{% url 'pack' sound.username sound.pack_id %}" class="bw-link--grey-light">
+                            <span class="bw-icon-stack"></span> {{ sound.pack_name|truncatechars:20 }}
+                        </a>
+                    </div>
                     {% endif %}
-                 <br>
-                {% endif %}
-
-                {% if sound.moderation_state != 'OK' %}
-                    Moderation state:
-                    {% if sound.moderation_state == 'PE' %}
-                        Pending
-                    {% elif sound.moderation_state == 'DE' %}
-                        Deferred
-                    {% else %}
-                        {{sound.moderation_state}}
+                    {% if sound.geotag_id %}
+                    <div class="h-spacing-left-2" title="Geotag: {{ sound.get_geotag_name }}">
+                        <a href="{% url 'sound-geotag' sound.username sound.id %}" class="bw-link--grey-light">
+                            <span class="bw-icon-pin"></span> {{ sound.get_geotag_name|truncatechars:20 }}
+                        </a>
+                    </div>
                     {% endif %}
-                {% endif %}
-            {% endif %}
-
-          </div><!-- .sound_title -->
-    </div><!-- .sample_player -->
-
-    <div class="sample_information {% if is_explicit %}blur{% endif %}">
-        <a class="user" href="{% url "account" sound.username %}">{{sound.username}}</a><br />
-        <span class="date">{{sound.created|date:"F jS, Y"}}</span><br />
-        <span class="download_count"><a href="{% url "sound-downloaders" sound.username sound.id %}">{{sound.num_downloads}} download{{sound.num_downloads|pluralize}}</a></span><br />
-        <a class="comments" href="{% url "sound" sound.username sound.id %}#comments">{{sound.num_comments}} comment{{sound.num_comments|pluralize}}</a>
-
-        <div class="sound_attributes">
+                    <div class="h-spacing-left-2" title="{{ sound.num_downloads }} downloads">
+                        <a href="javascript:void(0)" data-toggle="modal-default" data-modal-content-url="{% url 'sound-downloaders' sound.username sound.id %}?ajax=1" class="bw-link--grey-light">
+                            <span class="bw-icon-download"></span> {{ sound.num_downloads|formatnumber }}
+                        </a>
+                    </div>
+                    <div class="h-spacing-left-2" title="{{ sound.num_comments }} comments">
+                        <a href="{% url 'sound' sound.username sound.id %}#comments" class="bw-link--grey-light">
+                            <span class="bw-icon-comments"></span> {{ sound.num_comments|formatnumber }}
+                        </a>
+                    </div>
+                    <div class="h-spacing-left-2" title="License: {{ sound.license_name }}">
+                        <span class="bw-icon-{{ sound.license_bw_icon_name }}"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endcache %}
+
+    {% elif player_size == 'moderation' %}
+        <div class="overfow-hidden" aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
+            {% include "sounds/player.html" %}
+            <div class="between line-height-percentage-150 v-spacing-top-1">
+                <h5 class="ellipsis">
+                    <a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}">{{ sound.original_filename }}</a>
+                </h5>
+                {% if sound.original_filename|length <= 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
+            </div>
+            <div class="between">
+                <div>
+                    <a href="{% url 'account' sound.username %}" title="Username: {{ sound.username }}">{{ sound.username|truncate_string:15 }}</a>
+                </div>
+                {% if sound.original_filename|length > 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
+            </div>
+            <div>
+                <span class="text-grey">{{ sound.created|timesince }} ago</span>
+            </div>
+        </div>
+        <div id="collapsable-sound-info-{{ sound.id }}-{{ random_number }}" class="v-spacing-top-1 collapsable-block">
+            {% comment %}When showing information for moderation pages we put the full description and also the tags in a collapsable element{% endcomment %}
+            {% for tag in sound.tag_array%}
+                {% bw_tag tag %}
+            {% endfor %}
+            <div class="v-spacing-top-1">
+                {{ sound.description|safe|linebreaks }}
+            </div>
+        </div>
+        <div class="text-center v-spacing-top-1 v-spacing-2">
+            <span data-target="collapsable-sound-info-{{ sound.id }}-{{ random_number }}" data-show-text="Show more info" data-hide-text="Show less info" data-max-height-when-closed="150" data-hide-on-load class="collapsable-toggle"></span>
+        </div>
+        {% if is_explicit %}
+        <div class="v-spacing-top-1">
+            <div class="text-grey">
+                {% bw_icon "notification" %} Marked as explicit
+            </div>
+        </div>
+        {% endif %}
+        <div class="v-spacing-top-1">
+            {% include 'sounds/sound_state_processing_indicator.html' %}
+        </div>
+        <div class="v-spacing-top-1">
+            {% include 'sounds/sound_state_moderation_indicator.html' %}
+        </div>
+    {% elif player_size == 'big_no_info' %}
+        {% comment %}This size includes a placeholder for the controls of the big player but shows no sound
+        metadata{% endcomment %}
+        <div aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
+        {% include "sounds/player.html" %}
+        <div class="bw-player-big__controls"></div>
+        </div>
+
+    {% elif player_size == 'small_no_info' %}
+        {% comment %}This size will be used inside a pack carousel. For this size we only include the basic
+        player and show no sound metadata{% endcomment %}
+        <div aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
+        {% include "sounds/player.html" %}
+        {% if show_rate_widget %}<div class="display-none bw-player__rate__widget">{% bw_sound_stars sound %}</div>{% endif %}
+        </div>
+
+    {% elif player_size == 'minimal' %}
+        {% comment %}This size is used in map info windows and only includes a play/stop and loop button{% endcomment %}
+        <div aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
+        {% include "sounds/player.html" %}
+        </div>
 
-            {% if request.user.is_authenticated %}
-            <a class="bookmark" href="javascript:void(0)" onclick="show_hide_bookmark_form({{sound.id}})">
-                <img src="{{media_url}}images/fugue-icons/icons/address-book-blue.png" width="16" height="16" alt="Bookmark" title="Bookmark this sound" />
-            </a>
-            {% endif %}
-
-            {% if sound.similarity_state == 'OK' %}
-            <a class="similar" rel="nofollow" href="{% url "sound-similar" sound.username sound.id %}">
-                <img src="{{media_url}}images/fugue-icons/icons/headphone--plus.png" width="16" height="16" alt="Similar" title="Similar Sounds" />
-            </a>
-            {% endif %}
-            {% if sound.pack_id %}
-            <a class="pack" href="{% url "pack" sound.username sound.pack_id %}">
-                <img src="{{media_url}}images/fugue-icons/icons/folder-open-document-music.png" width="16" height="16" alt="Pack" title="This sound belongs to the pack: {{ sound.pack_name }}" />
-            </a>
-            {% endif %}
-            {% if sound.remixgroup_id %}
-             <a class="remixes" href="{% url "sound-remixes" sound.username sound.id %}?ajax=1">
-                <img src="{{media_url}}images/remixes.png" width="16" height="16" alt="Remixes" title="This sound has remixes" />
-            </a>
-            {% endif %}
-            {% if sound.geotag_id %}
-            <a class="geotag" href="{% url "sound-geotag" sound.username sound.id %}">
-                <img src="{{media_url}}images/geotag.png" width="16" height="16" alt="Geotagged" title="This sound has a geotag" />
-            </a>
-            {% endif %}
-            <!-- license icons -->
-            {% if sound.license_name == 'Sampling+' %}
-                <img class="cc_license" src="{{media_url}}images/licenses/sampling.png" width="16" height="16" alt="Sampling+ license" title="This sound is licensed under the sampling+ license." />
-            {% endif %}
-            {% if sound.license_name == 'Creative Commons 0' %}
-                <img class="cc_license" src="{{media_url}}images/licenses/nolaw.png" width="16" height="16" alt="Public Domain license" title="This sound is public domain." />
-            {% endif %}
-            {% if sound.license_name == 'Attribution' %}
-                <img class="cc_license" src="{{media_url}}images/licenses/by.png" width="16" height="16" alt="Creative Commons Attribution license" title="This sound is licensed under the Creative Commons Attribution license." />
-            {% endif %}
-            {% if sound.license_name == 'Attribution NonCommercial' %}
-                <img class="cc_license" src="{{media_url}}images/licenses/bync.png" height="16" alt="Creative Commons Attribution Non-Commercial license" title="This sound is licensed under the Creative Commons Attribution Non-Commercial license." />
-            {% endif %}
-            <!-- /license icons -->
-
-        </div><!-- .sound_attributes -->
-    </div><!-- .sample_information -->
-</div><!-- .sample_player_small -->
-
-{% endcache %}
-
-{% endif %}
+    {% endif %}
+{% endif %}
\ No newline at end of file
diff --git a/templates_bw/sounds/display_sound_selectable.html b/templates/sounds/display_sound_selectable.html
similarity index 100%
rename from templates_bw/sounds/display_sound_selectable.html
rename to templates/sounds/display_sound_selectable.html
diff --git a/templates_bw/sounds/display_sound_small_icons.html b/templates/sounds/display_sound_small_icons.html
similarity index 100%
rename from templates_bw/sounds/display_sound_small_icons.html
rename to templates/sounds/display_sound_small_icons.html
diff --git a/templates/sounds/downloaders.html b/templates/sounds/downloaders.html
deleted file mode 100644
index 72f24e68d..000000000
--- a/templates/sounds/downloaders.html
+++ /dev/null
@@ -1,49 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-
-{% load paginator %}
-
-{% block title %}Users that downloaded {{ sound.original_filename }}{% endblock %}
-
-{% block content %}
-
-<h1>Users that downloaded <a href="{% url "sound" username sound.id %}">{{ sound.original_filename }}</a></h1>
-
-{% if paginator.count > 0 %}
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "user" %}
-    </div>
-    {% regroup download_list by created|date:"F jS, Y" as downloaders %}
-    {% for group in downloaders %}
-        <h3>Downloaded on {{group.grouper}}</h3>
-        {% for i in group.list %}
-        {% with i.user as user %}
-		        <div class="user_downloaders_page">
-		        <div class="active_user">
-		    		<div class="active_user_info">
-		        		<img src="{{user.profile.locations.avatar.M.url}}" alt="avatar" />
-		        		<div class="post_author"><a href="{% url "account" user.username %}">{{user.username}}</a></div><!-- .post_author -->
-		        			<div class="people_user_info">
-					            {{user.profile.num_sounds}} sound{{user.profile.num_sounds|pluralize}} ,
-					            {{user.profile.num_posts}} post{{user.profile.num_posts|pluralize}}<br>
-
-		        			</div><!-- .people_user_info -->
-		    			</div><!-- .active_user_info -->
-					<br class="clear" /><!-- clear .active_user -->
-				</div><!-- .active_user -->
-				</div>
-            {% endwith %}
-		    {% endfor %}
-			<br class="clear" /><!-- clear .active_user -->
-
-	{% endfor %}
-	<br class="clear" /><!-- clear .active_user -->
-
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "user" %}
-    </div>
-{% else %}
-    <p>This sound has not been downloaded by anyone yet...</p>
-{% endif %}
-
-{% endblock %}
diff --git a/templates_bw/sounds/edit_and_describe.html b/templates/sounds/edit_and_describe.html
similarity index 100%
rename from templates_bw/sounds/edit_and_describe.html
rename to templates/sounds/edit_and_describe.html
diff --git a/templates/sounds/for_user.html b/templates/sounds/for_user.html
deleted file mode 100644
index 60c63181f..000000000
--- a/templates/sounds/for_user.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-
-{% load display_sound %}
-{% load paginator %}
-
-{% block title %}Sound by {{sound_user.username}}{% endblock title %}
-
-{% block section_content %}
-<h1>Sounds by <a href="{% url "account" sound_user.username %}">{{sound_user.username}}</a></h1>
-
-{% show_paginator paginator page current_page request "sound" %}
-
-{% for sound in user_sounds %}
-    {% display_sound sound %}
-{% endfor %}
-
-{% show_paginator paginator page current_page request "sound" %}
-
-{% endblock %}
diff --git a/templates/sounds/geotag.html b/templates/sounds/geotag.html
deleted file mode 100644
index b94110e0e..000000000
--- a/templates/sounds/geotag.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% extends "sounds/_section.html" %}
-{% load maps_js_scripts %}
-
-{% block title %}&quot;{{sound.original_filename}}&quot; by {{sound.user.username}} - geotag{% endblock title %}
-
-{% block head %}
-{{ block.super }}
-{% maps_js_scripts %}
-{% endblock head %}
-
-{% block section_content %}
-<h1>Geotag</h1>
-<p>
-    This map displays the geotag of the sound <a href="{% url "sound" sound.user.username sound.id %}">{{sound.original_filename}}</a> by <a href="{% url "account" sound.user.username %}">{{sound.user.username}}</a>.<br />
-    For the full map of all geotags see our <a href="{% url "geotags" %}">global geotag map</a>
-</p>
-<div id="map_canvas" style="width: 800px; height: 600px; border: 1px solid black;"></div>
-<script type="text/javascript">
-    var show_search = false;
-    var show_style_selector = true;
-    make_sounds_map('{% url "geotags-for-sound-barray" sound.id %}', 'map_canvas', undefined, undefined, {{sound.geotag.lat}}, {{sound.geotag.lon}}, {{sound.geotag.zoom}}, show_search, show_style_selector);
-</script>
-{% endblock %}
diff --git a/templates/sounds/latest_sounds.html b/templates/sounds/latest_sounds.html
deleted file mode 100644
index a866b9e76..000000000
--- a/templates/sounds/latest_sounds.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% load cache %}
-{% load display_sound %}
-
-<!-- recent additions -->
-{% cache 600 latest_sounds %}
-<div id="recent_additions" class="content_box">
-    <h3>Recent Additions</h3>
-    {% for sound in latest_sounds %}
-        {% display_sound sound.id %}
-        {% if sound.n_other_sounds %}
-        <div class="sample_more"><img src="{{media_url}}images/plus.png" alt="" />
-            {{sound.n_other_sounds}} more sound{{sound.n_other_sounds|pluralize}} from
-            <a href="{% url 'account' sound.user.username %}">{{sound.user.username}}</a> in the last 48 hours</div>
-        {% endif %}
-    {% empty %}
-      <p>No sounds in the database!
-    {% endfor %}
-    <p class="more_button" ><a href="{% url 'sounds-search' %}?q=&f=&s=Date+added+(newest+first)">more...</a></p>
-</div>
-{% endcache %}
diff --git a/templates/sounds/license_form.html b/templates/sounds/license_form.html
deleted file mode 100644
index db5256cef..000000000
--- a/templates/sounds/license_form.html
+++ /dev/null
@@ -1,50 +0,0 @@
-    <div id="license-form-wrapper">
-        {{ form.errors }}
-        <div id="license-left">
-            <div id="license-left-top">Very free :)</div>
-            <div id="license-left-bottom">Less free :(</div>
-        </div>
-
-        <div id="license-arrow">
-            <img src="{{media_url}}images/license_arrow.png"/>
-        </div>
-
-        <div id="license-right">
-
-            <div id="license-middle-top" class="license-description">
-                <input type="radio" id="id_{% if form.prefix %}{{form.prefix}}-{% endif %}license-license_0" value="{{ cc0_license_id }}" name="{% if form.prefix %}{{form.prefix}}-{% endif %}license" title="Creative Commons 0" {% if form.data.license.name == 'Creative Commons 0' %}checked{% endif %}>
-                 <h3>Creative Commons Zero</h3>
-                 <div class="license-explanation">
-                      <a href = "https://creativecommons.org/publicdomain/zero/1.0/" target=_blank>
-                     <img style="float: left; margin-right: 10px;" src="https://licensebuttons.net/p/zero/1.0/88x31.png"/></a>
-                     <p>You let people use your sounds and they can do whatever they want. They don't even need to credit you.
-                     <a href = "https://creativecommons.org/publicdomain/zero/1.0/" target=_blank>Read more..</a>
-                 </div>
-            </div>
-
-            <div id="license-middle-middle" class="license-description">
-                <input type="radio" id="id_{% if form.prefix %}{{form.prefix}}-{% endif %}license-license_1" value="{{ cc_by_license_id }}" name="{% if form.prefix %}{{form.prefix}}-{% endif %}license" title="Creative Commons Attribution"  {% if form.data.license.name == 'Attribution' %}checked{% endif %}>
-                <h3>Creative Commons Attribution</h3>
-                <div class="license-explanation">
-                    <a href = "https://creativecommons.org/licenses/by/4.0/" target=_blank>
-                    <img style="float: left; margin-right: 10px;" src="https://licensebuttons.net/l/by/4.0/88x31.png"/></a>
-                    <p>You let people use your sounds, for commercial purposes, but they always need to credit you.
-                    <a href = "https://creativecommons.org/licenses/by/4.0/" target=_blank>Read more..</a>
-                </div>
-            </div>
-
-
-            <div id="license-middle-bottom" class="license-description">
-                <input type="radio" id="id_{% if form.prefix %}{{form.prefix}}-{% endif %}license-license_2" value="{{ cc_by_nc_license_id }}" name="{% if form.prefix %}{{form.prefix}}-{% endif %}license" title="Creative Commons Attribution Non-Commercial" {% if form.data.license.name == 'Attribution NonCommercial' %}checked{% endif %}>
-                <h3>Creative Commons Attribution Non-Commercial</h3>
-                <div class="license-explanation">
-                    <a href = "https://creativecommons.org/licenses/by-nc/4.0/" target=_blank>
-                    <img style="float: left; margin-right: 10px;" src="https://licensebuttons.net/l/by-nc/4.0/88x31.png"/></a>
-                    <p>You let people use your sounds, but not for commercial purposes. They also always need to credit you.
-                    <a href = "https://creativecommons.org/licenses/by-nc/4.0/" target=_blank>Read more..</a>
-                </div>
-            </div>
-
-        </div>
-    </div>
-
diff --git a/templates/sounds/metadata.html b/templates/sounds/metadata.html
deleted file mode 100644
index 55e0f9034..000000000
--- a/templates/sounds/metadata.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<a class="mp3_file" href="{{sound.locations.preview.LQ.mp3.url}}" title="mp3 file">{{sound.original_filename}} - mp3 version</a>
-<a class="ogg_file" href="{{sound.locations.preview.LQ.ogg.url}}" title="ogg file">{{sound.original_filename}} - ogg version</a>
-<a class="waveform" href="{% if size == 'L' %}{{sound.locations.display.wave.L.url}}{% else %}{{sound.locations.display.wave.M.url}}{% endif %}"
-   title="waveform file">{{sound.original_filename}} - waveform</a>
-<a class="spectrum" href="{% if size == 'L' %}{{sound.locations.display.spectral.L.url}}{% else %}{{sound.locations.display.spectral.M.url}}{% endif %}"
-   title="spectrogram file">{{sound.original_filename}} - spectrogram</a>
-<span class="duration" title="duration in seconds">{{sound.duration_ms}}</span>
diff --git a/templates_bw/sounds/modal_add_sounds.html b/templates/sounds/modal_add_sounds.html
similarity index 100%
rename from templates_bw/sounds/modal_add_sounds.html
rename to templates/sounds/modal_add_sounds.html
diff --git a/templates_bw/sounds/modal_downloaders.html b/templates/sounds/modal_downloaders.html
similarity index 100%
rename from templates_bw/sounds/modal_downloaders.html
rename to templates/sounds/modal_downloaders.html
diff --git a/templates_bw/sounds/modal_flag_sound.html b/templates/sounds/modal_flag_sound.html
similarity index 100%
rename from templates_bw/sounds/modal_flag_sound.html
rename to templates/sounds/modal_flag_sound.html
diff --git a/templates_bw/sounds/modal_remix_group.html b/templates/sounds/modal_remix_group.html
similarity index 100%
rename from templates_bw/sounds/modal_remix_group.html
rename to templates/sounds/modal_remix_group.html
diff --git a/templates_bw/sounds/modal_similar_sounds.html b/templates/sounds/modal_similar_sounds.html
similarity index 100%
rename from templates_bw/sounds/modal_similar_sounds.html
rename to templates/sounds/modal_similar_sounds.html
diff --git a/templates/sounds/pack.html b/templates/sounds/pack.html
index 2eb3dcd33..30bb360f5 100644
--- a/templates/sounds/pack.html
+++ b/templates/sounds/pack.html
@@ -1,98 +1,150 @@
-{% extends "sounds/_section.html" %}
+{% extends "base.html" %}
 
-{% load display_sound %}
-{% load paginator %}
+{% load static %}
+{% load tags %}
+{% load bw_templatetags %}
+{% load util %}
 {% load filter_img %}
-{% load maps_js_scripts %}
-
-{% block title %}pack: {{pack.name}} by {{pack.user.username}}{% endblock title %}
-
-{% block head %}
-    {{ block.super }}
-    {% maps_js_scripts %}
-{% endblock head %}
-
-{% block section_content %}
-
-<h1>Pack: {{pack.name}} by <a href="{% url 'account' pack.user.username %}">{{pack.user.username}}</a></h1>
-
-<div id="content">
-    <div id="pack_info" class="content_box">
-    <h3>Pack info</h3>
-    <div class="sound_list_normal">
-    <p>{{pack.description|replace_img|safe|linebreaksbr}}</p>
-    <ul>
-        <li>Pack created on: <b>{{ pack.created }}</b></li>
-        <li>Number of sounds: <b>{{ pack.num_sounds }}</b></li>
-        <li>Number of downloads: <b>{{ pack.num_downloads }}</b></li>
-    </ul>
-    {% if perms.pack.can_edit or pack.user == request.user %}
-            <p>
-                <a href="{% url 'pack-edit' pack.user.username pack.id %}" class="icon" id="edit_link" title="edit pack">
-                    Edit pack information
-                </a>
-                <br/>
-                <a href="{% url 'pack-delete' pack.user.username pack.id %}"
-                    class="icon" id="delete_link" title="edit pack">
-                    Delete this pack
-                </a>
-            </p>
-    {% endif %}
-    </div>
-</div><!-- #pack_info -->
-
-<p>
-    See <a href="{% url 'packs-for-user' pack.user.username %}">more packs</a> by <a href="{% url 'account' pack.user.username %}">{{pack.user.username}}</a>
-</p>
-
-
-{% if pack.num_sounds > 0 %}
-	{% show_paginator paginator page current_page request "sound" %}
-	{% for sound in pack_sounds %}
-    	{% display_sound sound %}
-	{% endfor %}
-	{% show_paginator paginator page current_page request "sound" %}
-{% else %}
-	<p>This pack does not contain any sounds.</p>
-{% endif %}
-</div> <!-- end CONTENT -->
+{% load display_sound %}
+{% load absurl %}
+{% load cache %}
 
-<div id="sidebar">
+{% block title %}{{pack.name}} by {{pack.user.username}}{% endblock title %}
 
-    {% if pack.has_geotags %}
-    <div id="latest_geotags" class="content_box">
-        <h3>Geotags in this pack</h3>
-        <p id="map_load_trigger"><a href="javascript:void(0);" onclick="triggerLoadMap()">Load map...</a></p>
-        <div id="map_loading_indicator"><img width="12px" height="12px" src="{{ media_url }}images/indicator.gif" style="display: none;"></div>
-        <div id="map_wrapper" style="display: none;">
-            <div id="map_canvas"></div>
-            <script type="text/javascript">
-                function triggerLoadMap() {
-                    $('#map_loading_indicator').show();
-                    make_sounds_map('{% url "geotags-for-pack-barray" pack.id %}', 'map_canvas', function(){
-                        $('#map_load_trigger').hide();
-                        $('#map_wrapper').show();
-                        $('#map_loading_indicator').hide(); // Once map is ready, hide the loading indicator
-                    });
-                }
-            </script>
-        </div>
-    </div><!-- #latest_geotags -->
-    {% endif %}
+{% block content %}
+    <div class="container">
+        <div class="navbar-space-filler v-spacing-7 padding-bottom-7 v-spacing-top-5">
+            <div class="row no-gutters">
+                <div class="col-md-8">
+                    <div class="bw-sound-page__information">
+                        <div class="row middle">
+                            <div class="col-10">
+                                <h1><span class="text-light-grey">Pack: </span>{{ pack.name }} </h1>
+                            </div>
+                        </div>
+                        <div class="middle v-spacing-top-2">{% bw_generic_stars pack.avg_rating %}<span class="text-grey h-spacing-left-1">{% if pack.num_ratings %}Pack sound's overall rating ({{ pack.num_ratings|formatnumber }}){% else %}Not enough ratings{% endif %}</span></div>
+                        <div class="middle bw-sound-page__user v-spacing-top-5">
+                            <div class="h-spacing-1">
+                                {% bw_user_avatar pack.user.profile.locations.avatar.M.url pack.user.username 40 %}
+                            </div>
+                            <div class="h-spacing-left-1">
+                                <a href="{% url 'account' pack.user.username %}">{{ pack.user.username | truncate_string:15 }}</a>
+                                <p class="text-grey">{{ pack.created|date:"F jS, Y" }}</p>
+                            </div>
+                            {% if pack.user != request.user  %}
+                                <div class="h-spacing-left-3">
+                                    {% if is_following %}
+                                        <a class="no-hover btn-secondary" href="{% url 'unfollow-user' pack.user.username %}?next={{ next_path }}">Unfollow</a>
+                                    {% else %}
+                                        <a class="no-hover btn-inverse" href="{% url 'follow-user' pack.user.username %}?next={{ next_path }}">Follow</a>
+                                    {% endif %}
+                                </div>
+                            {% endif %}
+                        </div>
+                        <div class="v-spacing-top-3" >
+                            {% if pack.description %}
+                                <div>
+                                    {{ pack.description|replace_img|safe|linebreaks|strip_unnecessary_br }}
+                                </div>
+                            {% endif %}
+                            <div class="v-spacing-top-3">
+                                {% for tag in pack.get_pack_tags_bw|add_sizes:"count:0.1:1.0" %}
+                                    {% bw_tag tag.name 1 '' tag.browse_url tag.size %}
+                                {% endfor %}
+                            </div>
+                        </div>
+                        <div class="v-spacing-top-5">
+                            <div class="text-center text-18 text-light-grey v-spacing-3">Latest sounds in this pack</div>
+                            {% if pack_sounds %}
+                                <div class="row">
+                                    {% for sound in pack_sounds %}
+                                        <div class="col-6 col-sm-4">
+                                            {% display_sound_small sound %}
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                                <div class="v-spacing-top-4 text-center">
+                                    <a class="no-hover" href="{% url "sounds-search" %}?f=grouping_pack:{{ pack.pack_filter_value }}&s=Date+added+(newest+first)&g=1"><button class="btn-primary">See all sounds in this pack</button></a>
+                                </div>
+                            {% else %}
+                                <div class="text-center v-spacing-top-4">
+                                    <h5>No sounds... &#128543</h5>
+                                    <div class="text-grey v-spacing-top-1">Looks like {{ pack.name }} has no sounds yet</div>
+                                </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-4 col-extra-left-padding-large-md">
+                    <div class="divider-light v-spacing-top-6 v-spacing-5 d-md-none"></div>
+                    <div class="bw-sound__sidebar">
+                        {% cache 3600 bw_pack_stats pack.id %}
+                        <div>
+                            <ol>
+                                <li class="v-spacing-3">
+                                    {% bw_icon 'wave' 'text-light-grey' %} <a class="text-19 bw-link--black" title="This pack has {{ pack.num_sounds|bw_intcomma }} sound{{ pack.num_sounds|pluralize }}"  href="{% url "sounds-search" %}?f=grouping_pack:{{ pack.pack_filter_value }}&s=Date+added+(newest+first)&g=1" >{{ pack.num_sounds|formatnumber }} sound{{ pack.num_sounds|pluralize }}</a>
+                                </li>
+                                <li class="v-spacing-3">
+                                    {% with pack.get_total_pack_sounds_length as total_pack_sounds_length %}{% bw_icon 'clock' 'text-light-grey' %} <span class="text-19" title="The sounds of this pack together account for {{ total_pack_sounds_length|duration_hours }} hours of audio">{{ total_pack_sounds_length|duration_hours }} hours of audio</span>{% endwith %}
+                                </li>
+                                <li class="v-spacing-3">
+                                    {% bw_icon 'download' 'text-light-grey' %}<a class="text-19 bw-link--black" title="This pack has been downloaded {{ pack.num_downloads|bw_intcomma }} time{{ pack.num_downloads|pluralize }}"  href="javascript:void(0);" data-toggle="modal-default" data-modal-content-url="{% url 'pack-downloaders' pack.user.username pack.id %}?ajax=1" data-modal-activation-param="downloaders">{{ pack.num_downloads|formatnumber }} download{{ pack.num_downloads|pluralize }}</a>
+                                </li>
+                            </ol>
+                        </div>
+                        <div class="v-spacing-top-5 ellipsis middle">
+                            {% bw_icon pack.license_bw_icon_name 'text-light-grey text-30' %} <span class="text-20 h-spacing-left-2">{{ pack.license_summary_name_and_id.0 }}</span>
+                        </div>
+                        <div class="text-grey v-spacing-top-1">
+                            {{ pack.license_summary_text|safe }} {% if pack.license_summary_deed_url %}<a href="{{ pack.license_summary_deed_url }}" target="_blank" class="bw-link--black">More...</a>{% endif %}
+                        </div>
+                        {% endcache %}
+                        {% if pack.num_sounds_unpublished %}
+                            <div class="v-spacing-top-6 text-red">
+                                {% bw_icon "notification" %}This pack has {{ pack.num_sounds_unpublished}} unpublished sounds
+                            </div>
+                        {% endif %}
+                        {% if pack.num_sounds %}
+                        <div class="v-spacing-top-6">
+                            {% if request.user.is_authenticated %}
+                                <a class="no-hover btn-primary display-inline-block w-100 text-center" href="{% url 'pack-download' pack.user.username pack.id %}{{ pack.friendly_filename }}" title="Download pack">Download pack</a>
+                            {% else %}
+                                <a class="no-hover btn-primary display-inline-block w-100 text-center" href="{% url 'pack-download' pack.user.username pack.id %}{{ pack.friendly_filename }}" title="Login to download">Login to download</a>
+                            {% endif %}
+                        </div>
+                        {% endif %}
+                        {% if perms.pack.can_edit or pack.user == request.user %}
+                            <a class="no-hover btn-secondary display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'pack-edit' pack.user.username pack.id %}" title="Edit pack">Edit pack</a>
+                        {% endif %}
+                        <div class="v-spacing-top-7">
+                            <ol class="center">
+                                <li><a class="no-hover" href="https://www.facebook.com/sharer/sharer.php?u={% absurl 'short-pack-link' pack.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'facebook' 'text-30' %}</div></a></li>
+                                <li class="h-spacing-left-2"><a class="no-hover" href="https://twitter.com/share?url={% absurl 'short-pack-link' pack.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'twitter' 'text-30' %}</div></a></li>
+                                <li class="h-spacing-left-2"><a id="toggle-share-link" class="cursor-pointer no-hover"><div class="cleanIcon">{% bw_icon 'share2' 'bw-icon__inside_circle' %}</div></a></li>
+                            </ol>
+                        </div>
 
-    {% if not pack.is_dirty %}
-        {% if num_sounds_ok > 0 %}
-            <div id="download">
-                {% if request.user.is_authenticated %}
-                    <a href="{% url 'pack-download' pack.user.username pack.id %}{{ pack.friendly_filename }}" id="download_button" title="download pack"></a>
-                    <div id="download_text"><a href="{% url 'pack-downloaders' pack.user.username pack.id %}">Downloaded<br /><b>{{pack.num_downloads}}</b> times</a></div>
-                {% else %}
-                    <a href="{% url 'pack-download' pack.user.username pack.id %}{{ pack.friendly_filename }}" id="download_login_button" title="download pack"></a>
-                    <div id="download_text"><a href="{% url 'pack-downloaders' pack.user.username pack.id %}">Downloaded<br /><b>{{pack.num_downloads}}</b> times</a></div>
-                {% endif %}
+                        <div id="share-link" class="v-spacing-top-5">
+                             <span class="text-grey">Share url: </span><br><input class="w-100" type="text" readonly value="{% absurl 'short-pack-link' pack.id %}" />
+                        </div>
+                        {% if geotags_in_pack_serialized %}
+                            <div id="pack_geotags" class="v-spacing-top-6" data-map-loaded="false">
+                                <h5 class="padding-bottom-3">Geotags in this pack</h5>
+                                <div id="static_map_wrapper"  class="map sidebar-map w-100 middle center cursor-pointer" data-pins="{{ geotags_in_pack_serialized }}"></div>
+                                <div id="map_canvas" class="map sidebar-map display-none w-100" data-geotags-url="{% url "geotags-for-pack-barray" pack.id %}"></div>
+                                <div class="v-spacing-top-2 center">
+                                    <a class="no-hover" href="{% url "pack-geotags" pack.user.username pack.id %}">See all geotags from this pack</a>
+                                </div>
+                            </div>
+                        {% endif %}
+                    </div>
+                </div>
             </div>
-        {% endif %}
-    {% endif %}
-</div>
-
+        </div>
+    </div>
 {% endblock %}
+
+{% block extrabody %}
+    {% bw_maps_js_scripts %}
+    <script src="{% static 'bw-frontend/dist/pack.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/sounds/pack_attribution.txt b/templates/sounds/pack_attribution.txt
similarity index 100%
rename from templates_bw/sounds/pack_attribution.txt
rename to templates/sounds/pack_attribution.txt
diff --git a/templates/sounds/pack_delete.html b/templates/sounds/pack_delete.html
deleted file mode 100644
index 169fab59b..000000000
--- a/templates/sounds/pack_delete.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load paginator %}
-{% block title %}Delete {{pack.name}}{% endblock title %}
-{% block section_content %}
-
-<h1>Delete <a href="{% url "pack" pack.user.username pack.id %}">{{pack.name}}</a></h1>
-
-<p>
-    {% if waited_too_long %}
-    Sorry, you waited too long, ... try again?<br/><br/>
-    {% endif %}
-    {% if pack.sounds.count %}
-        NOTE: The sounds currently assigned to this pack won't be deleted.
-    <br/><br/>
-    {% endif %}
-    If you are entirely sure you want to delete this pack, click <a href="?pack={{encrypted_link}}">here</a> (link valid for 10 seconds only)
-</p>
-
-{% endblock %}
diff --git a/templates/sounds/pack_deleted.html b/templates/sounds/pack_deleted.html
index f9e00fb32..b4a80d79e 100644
--- a/templates/sounds/pack_deleted.html
+++ b/templates/sounds/pack_deleted.html
@@ -1,10 +1,8 @@
-{% extends "sounds/_section.html" %}
+{% extends "simple_page.html" %}
 
-{% block title %}Deleted Pack{% endblock title %}
+{% block title %}Deleted pack{% endblock %}
+{% block page-title %}Deleted pack{% endblock %}
 
-{% block section_content %}
-<h2>Deleted pack...</h2>
-<p>
-    This pack has been deleted.
-</p>
-{% endblock section_content %}
+{% block page-content %}
+    <p class="text-grey">This pack has been deleted.</p>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/sounds/pack_downloaders.html b/templates/sounds/pack_downloaders.html
deleted file mode 100644
index 1d327e17d..000000000
--- a/templates/sounds/pack_downloaders.html
+++ /dev/null
@@ -1,51 +0,0 @@
-{% extends "accounts/_section.html" %}
-
-
-{% load paginator %}
-
-{% block title %}Users that downloaded pack {{ pack.name }}{% endblock %}
-
-{% block content %}
-
-<h1>Users that downloaded pack <a href="{% url "pack" username pack.id %}">{{ pack.name }}</a></h1>
-
-{% if paginator.count > 0 %}
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "user" %}
-    </div>
-
-	{% regroup page.object_list by created|date:"F jS, Y" as downloaders %}
-	{% for group in downloaders %}
-
-			<h3>Downloaded on {{group.grouper}}</h3>
-			{% for download_item in group.list %}
-				{% with download_item.user as user %}
-
-		        <div class="user_downloaders_page">
-		        <div class="active_user">
-		    		<div class="active_user_info">
-		        		<img src="{{user.profile.locations.avatar.M.url}}" alt="avatar" />
-		        		<div class="post_author"><a href="{% url "account" user.username %}">{{user.username}}</a></div><!-- .post_author -->
-		        			<div class="people_user_info">
-					            {{user.profile.num_sounds}} sound{{user.profile.num_sounds|pluralize}} ,
-					            {{user.profile.num_posts}} post{{user.profile.num_posts|pluralize}}<br>
-
-		        			</div><!-- .people_user_info -->
-		    			</div><!-- .active_user_info -->
-					<br class="clear" /><!-- clear .active_user -->
-				</div><!-- .active_user -->
-				</div>
-		        {% endwith %}
-		    {% endfor %}
-			<br class="clear" /><!-- clear .active_user -->
-	{% endfor %}
-
-	<br class="clear" /><!-- clear .active_user -->
-    <div class="search_paginator">
-        {% show_paginator paginator page current_page request "user" %}
-    </div>
-{% else %}
-    <p>This pack has not still been downloaded by any user...</p>
-{% endif %}
-
-{% endblock %}
diff --git a/templates/sounds/pack_edit.html b/templates/sounds/pack_edit.html
index 84d6c87d8..3f87de523 100644
--- a/templates/sounds/pack_edit.html
+++ b/templates/sounds/pack_edit.html
@@ -1,160 +1,48 @@
-{% extends "sounds/_section.html" %}
+{% extends "simple_page.html" %}
+{% load static %}
+{% load util %}
+{% load bw_templatetags %}
+{% load sounds_selector %}
 
-{% load display_sound %}
-{% load paginator %}
+{% block title %}Edit pack - {{ pack.name }}{% endblock %}
+{% block page-title %}Edit pack{% endblock %}
 
-{% block title %}pack: {{pack.name}} by {{pack.user.username}}{% endblock title %}
+{% block page-content %}
+<div class="v-spacing-5 v-spacing-top-2">
+    <p>You can specify a <b>name</b> for the pack, a <b>description</b>, and the <b>sounds</b> that are part of the pack. You can only add <b>sounds uploaded by you</b>. Also, take into account that sounds can <b>only belong to one pack</b>. If adding sounds that already belog to other packs, these will be removed from the previous packs.
 
-{% block head %}
-    {{ block.super }}
-
-<script type="text/javascript">
-    var sounds = [];
-
-    function collectSounds()
-    {
-        $("#save-button").attr("disabled", "disabled");
-        $("#sound_ids").val(sources.join(","))
-    }
-
-    function addSound(element, soundId)
-    {
-        if ($.inArray(soundId, sounds) == -1)
-        {
-            sounds.push(soundId);
-            
-            var el = $(element).clone().appendTo("#current_pack_sounds");
-            addRemoveLink(el,soundId);
-            $($(el[0]).children()).children(".add_sound").remove();
-            $("#pack_sounds").val(sounds.join(","));
-        }
-    }
-    function addRemoveLink(element, soundId){
-        var title = $($(element).children(".sample_player")[0]).children(".sound_title"); 
-        var msg = "<br/><a class=\"remove_sound\" onclick=\"removeSound(this, "+soundId+")\">remove </a>"
-        title.after(msg);
-    }
-
-    function removeSound(element, soundId)
-    {
-        var index = $.inArray(soundId, sounds);
-        if (index != -1)
-        {
-            sounds.splice(index, 1);
-            $(element).parent().parent().remove();
-            $("#pack_sounds").val(sounds.join(","));
-        }
-    }
-
-    function removePackSounds(){
-        $('#search-results .sample_player_small').each( function () {
-            var element = $(this);
-            var snd_id = parseInt(element[0].id);
-            var index = $.inArray(snd_id, sounds);
-            if (index != -1)element.remove();
-        });
-    }
-
-    function appendLinks(){
-        $('#search-results .sample_player_small').each( function () {
-            var element = $(this);
-            var snd_pack = element.children(".sample_information").find(".pack");
-            var snd_id = element[0].id;
-            var link_id = "a"+snd_id;
-            var title = $($(this).children(".sample_player")[0]).children(".sound_title");            
-            var msg = "<br/><a id=\""+link_id+"\" class=\"add_sound\" >add";
-            if(snd_pack.length>0){
-                var pack_msg = snd_pack[0].children[0].title;
-                var pack_name = pack_msg.split(":")[1];
-                msg = msg + "<span style=\"font-size:11px\"> (remove from pack:"+pack_name+")</span>";
-            };
-            msg = msg+"</a>";
-            
-            var result = $(title).after(msg);
-            $("#"+link_id).click(function(){
-                addSound(element, parseInt(snd_id));
-                return false;
-            });
-        });
-    }
-
-    function searchSounds(){
-        $("#search-results").load("{% url 'sounds-search' %}",
-         $.param({
-            "q": $("#search-q").val(),
-            "f":"username:\"{{user.username}}\"",
-            "s":"Date+added+(newest+first)",
-            "ajax": 1}),
-            function(){makePlayer('.player');removePackSounds();appendLinks();}
-        );
-    }
-
-    $(function()
-    {
-        var ids = $("#pack_sounds").val().split(",");
-        if(ids)sounds = $.map(ids, function (soundId) { return parseInt(soundId) });
-        $("#save-button").click(function () {
-            collectSounds();
-            return false;
-        });
-
-        $("#search-button").click(function () {
-            searchSounds();
-            return false;
-        });
-        $('#current_pack_sounds .sample_player_small').each( function () {
-            var snd_id = $(this)[0].id;
-            addRemoveLink($(this), snd_id);
-
-        });
-        searchSounds();
-    });
-
-
-    $(function() {
-        unsecureImageCheck($('#id_description'));
-    })
-
-</script>
-
-{% endblock head %}
-
-{% block section_content %}
-<h1>Edit Pack</h1>
-<p>You can edit the name, description and sounds of this pack. Click on the "submit" button to save all your changes.</p>
-<form method="post" action="#pack_edit">{% csrf_token %}
-
-    <div id ="pack_edit_form">
-    {{form.name.errors}}
-    <p>
-       Name:<br/>{{form.name}}
-    </p>
-
-    {{form.description.errors }}
-    <p>
-        Description:<br/>{{form.description }}
     </p>
-  {{form.pack_sounds}}
-    </div>
-    <input type="submit" value="Submit"/>
-</form>
-<div style="display:flex;min-height: 200px;">
-    <div id="current_pack_sounds" class="sound_list_minimal">
-        <h4> Current sounds</h4>
-        {% for sound in current_sounds %}
-                {% display_sound sound %}
-        {% endfor %}
-    </div>
-
-    <div id="pack_edit_search" class="sound_list_minimal" >
-        <h4> Other sounds</h4>
-        <p> Use the list and search box below to add some of your sounds<br /> to the pack. Remember that sounds can only be in one pack!
-        <p>
-            <input type="text" name="q" id="search-q" size="25" /> 
-            <input type="button" name="submit" value="search" id="search-button"/>
-        </p>  
-        <div id="search-results" class="sound_list_minimal"></div>      
+</div>
+<div class="row no-gutters">
+    <div class="col-lg-8 offset-lg-2">
+        <h2 class="v-spacing-3">{{ pack.name }}</h2>
+        <form class="bw-form disable-on-submit" method="post" novalidate>{% csrf_token %}
+            {{ form.non_field_errors }}
+            {{ form.name.errors }}
+            {{ form.name.label_tag }}
+            {{ form.name }}
+            {{ form.description.errors }}
+            {{ form.description.label_tag }}
+            {{ form.description }}
+            <span class="helptext">{{ form.description.help_text|safe }}</span>
+            <div class="select-sounds-field v-spacing-5">
+                {{ form.pack_sounds }}
+                <label>Sounds in pack ({{ form.pack_sound_objects|length }})</label>
+                {% if not form.pack_sounds.value %}
+                <div class="v-spacing-4 v-spacing-top-2">No sounds have been added to this pack yet</div>
+                {% endif %}
+                {% sounds_selector form.pack_sound_objects %}
+                <div class="between v-spacing-top-2">
+                    <button class="btn-inverse" data-toggle="add-sounds-modal" data-selected-sounds-hidden-input-id="{{ form.pack_sounds.id_for_label }}" data-modal-url="{% url 'add-sounds-modal-pack' pack.id %}">{% bw_icon 'plus' %}Add sounds</button>
+                    <button class="btn-inverse">{% bw_icon 'trash' %}Remove selected sounds from pack</button>
+                </div>
+            </div>
+            <button class="btn-primary w-100">Save pack</button>
+        </form>
     </div>
-    <div style="clear:both"></div>
 </div>
-{% endblock section_content %}
+{% endblock %}
+
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/packEdit.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/sounds/packs.html b/templates/sounds/packs.html
deleted file mode 100644
index d64a749b6..000000000
--- a/templates/sounds/packs.html
+++ /dev/null
@@ -1,28 +0,0 @@
-{% extends "sounds/_section.html" %}
-{% load cache %}
-{% load paginator %}
-{% load display_pack %}
-
-{% block title %}Packs by {{user.username}}{% endblock title %}
-
-{% block section_content %}
-
-<h1>Packs by <a href="{% url "account" user.username %}">{{user.username}}</a></h1>
-<h3>Sort by</h3>
-<ul class="list_order" id="filter_query_display">
-<li><a href="?order=name" {% ifequal order "name" %}class="selected"{% endifequal %}>name</a></li>
-<li><a href="?order=-last_updated" {% ifequal order "-last_updated" %}class="selected"{% endifequal %}>last update</a></li>
-<li><a href="?order=-num_sounds" {% ifequal order "-num_sounds" %}class="selected"{% endifequal %}>number of sounds</a></li>
-<li><a href="?order=-num_downloads" {% ifequal order "-num_downloads" %}class="selected"{% endifequal %}>number of downloads</a></li>
-</ul>
-{% cache 3600 packs user.id order current_page %}
-<p>{% show_paginator paginator page current_page request "pack" %}</p>
-
-{% for pack in page.object_list %}
-	{% display_pack pack %}	
-{% endfor %}
-
-{% show_paginator paginator page current_page request "pack" %}
-
-{% endcache %}
-{% endblock %}
diff --git a/templates_bw/sounds/player.html b/templates/sounds/player.html
similarity index 100%
rename from templates_bw/sounds/player.html
rename to templates/sounds/player.html
diff --git a/templates/sounds/player_medium.html b/templates/sounds/player_medium.html
deleted file mode 100644
index bce2e46af..000000000
--- a/templates/sounds/player_medium.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="player small">
-    <div class="metadata">
-        {% include 'sounds/metadata.html' %}
-    </div>
-</div>
diff --git a/templates/sounds/player_small.html b/templates/sounds/player_small.html
deleted file mode 100644
index 0efe92b57..000000000
--- a/templates/sounds/player_small.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="player mini">
-    <div class="metadata">
-        {% include 'sounds/metadata.html' %}
-   </div>
-</div>
diff --git a/templates/sounds/remixed.html b/templates/sounds/remixed.html
deleted file mode 100644
index 6fc1e38f6..000000000
--- a/templates/sounds/remixed.html
+++ /dev/null
@@ -1,196 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load display_sound %}
-{% load paginator %}
-
-{% block head %}
-
-    {{ block.super }}
-    <script type="text/javascript" src="{{media_url}}js/protovis-r3.2.js"></script>
-    <script type="text/javascript" src="{{media_url}}js/jquery-ui-1.8.11.custom.min.js"></script>
-    <script type="text/javascript" src="{{media_url}}js/jquery.jplayer.min.js"></script>
-
-    <style type="text/css">
-        .fig {
-          height: 320px;
-          margin-bottom: 10px;
-        }
-    </style>
-    <script type="text/javascript">
-     $(document).ready(function(){
-          $("#jquery_jplayer_1").jPlayer({
-            ready: function() {
-
-            },
-            swfPath: "{{media_url}}swf",
-            supplied: "mp3, ogg"
-          });
-        });
-
-
-    /* ======== helper functions ========= */
-    function connections(d, p) {
-        if (p.sourceNode.active == true) {
-            $("#"+p.targetNode.id+"").animate({backgroundColor: "#DBDBDB"});
-            $("#"+p.sourceNode.id+"").animate({backgroundColor: "#F1D9FF"});
-            return "orange";
-        } else if (p.targetNode.active == true) {
-            $("#"+p.targetNode.id+"").animate({backgroundColor: "#F1D9FF"});
-            $("#"+p.sourceNode.id+"").animate({backgroundColor: "#DBDBDB"});
-            return "orange";
-        } else
-            return "#c7c7c7";
-    }
-    function goToSound(soundId, username) {
-        window.location.href = "/people/"+username+"/sounds/"+soundId;
-    }
-    function clearBackgrounds(dataset) {
-        for (var i=0; i<dataset.nodes.length; i++) {
-            $("#"+dataset.nodes[i].id+"").animate({backgroundColor: "#ffffff"});
-        }
-    }
-    function calculateEccentricity(length, height) {
-        var eccentricity = 0.15;
-        // for length < 3 use fixed eccentricity
-        if (length > 3) {
-            var a = 600 - (552 / length);
-            // console.debug(a)
-            var b = height;
-            eccentricity = (1 - b/a) * (1 - b/a);
-        }
-        // console.debug(eccentricity);
-        return eccentricity;
-    }
-    function playPreview(d) {
-         $("#jquery_jplayer_1").jPlayer("setMedia", {
-                mp3: d.sound_url_mp3,
-                oga: d.sound_url_ogg
-         }).jPlayer("play");
-    }
-    function stopPreview(d) {
-        $("#jquery_jplayer_1").jPlayer("stop");
-    }
-    // N.B. Not used at the moment since there is some error
-    //		offsetting the y progressively higher...
-    /*
-    function findArrowPos(src_x, trg_x, ecc) {
-        var a = (trg_x - src_x) / 2;
-        var x = a - 1.5;
-        var b = a - a*Math.sqrt(ecc);
-        var y = Math.sqrt( Math.abs( (b*b) - ( (x*x)*(b*b) / (a*a)) ) );
-
-        console.debug(a);
-        console.debug(b);
-        console.debug(x);
-        console.debug(y);
-
-        return y/2;
-    }
-    function findAngle(xArrow, yArrow, xTarget, yTarget) {
-        // console.debug("xArrow: " + xArrow + "    xTarget: " + xTarget);
-        var angle = Math.atan2( (yTarget - yArrow), (xTarget - xArrow) ) - Math.PI/2;
-        // console.debug(angle);
-        return angle;
-    }
-    */
-    </script>
-{% endblock head %}
-
-{% block title %}Remixes browse{% endblock title %}
-
-{% block section_content %}
-<h1>Remix-groups</h1>
-<div id="jquery_jplayer_1" style="height: 0px; width: 0px;"></div>
-
-<div id="remix_group_info" class="content_box">
-    <h3>Remix group info</h3>
-    <div class="sound_list_normal">
-        <ul>
-            <li>Files are presented in chronological order. So the first sound is a source to subsequent sounds as indicated by the links.</li>
-            <li>Hover over a sound to listen to it.</li>
-            <li>Hover "out" to stop the playback.</li>
-            <li>Click on the sound to go to the sounds page.</li>
-        </ul>
-    </div>
-</div><!-- #remix_group_info -->
-
-<br>
-{% show_paginator paginator page current_page request "remix group" %}
-
-<ul style="list-style: none;">
-{% for remix_group in page.object_list %}
-    <li>
-    <div class="fig">
-        <script type="text/javascript+protovis">
-// Graph DATA
-var data{{ forloop.counter }} = {{ remix_group.protovis_data|safe }};
-
-var eccentricity{{ forloop.counter }} = calculateEccentricity(data{{ forloop.counter }}.length, 300);
-
-/* ======== PROTOVIS STUFF-START ======== */
-var vis{{ forloop.counter }} = new pv.Panel()
-                .def("i", -1)
-                .width(600)
-                .height(270)
-                .bottom(60)
-                .top(0)
-                .left(100)
-                .right(10);
-
-var arc = vis{{ forloop.counter }}.add(pv.Layout.Arc)
-    .nodes(data{{ forloop.counter }}.nodes)
-    .links(data{{ forloop.counter }}.links);
-
-arc.link.add(pv.Line)
-           .strokeStyle(function(d, p)  connections(d,p))
-        .eccentricity(eccentricity{{ forloop.counter }})
-        .add(pv.Dot)
-        .shape("triangle")
-        .data(function(l) [{
-                               x: l.targetNode.x - 1.5,
-                               y: l.targetNode.y - 2
-                          }])
-        .angle(function(d,p) Math.atan2(2, 1.5) - Math.PI/2)
-        .shape("triangle")
-        .fillStyle(function(d, p)  connections(d,p))
-        .size(6);
-
-arc.node.add(pv.Image)
-    .url(function(d) d.waveform_url)
-    .imageHeight(function(d) 50)
-    .imageWidth(function(d) 552 / data{{ forloop.counter }}.length)
-    .width(function(d) 552 / data{{ forloop.counter }}.length)
-    .height(50)
-    .left(function(d) d.x - ( (552 / data{{ forloop.counter }}.length) / 2) )
-    .fillStyle(null)
-    .strokeStyle(null)
-    .event("mouseover", function(d) ($("#message{{ forloop.counter }}").append("Click to go to sound page"), playPreview(d), d.active = true, arc, vis{{ forloop.counter }}.i(this.index)))
-    .event("mouseout", function(d) ($("#message{{ forloop.counter }}").empty(), stopPreview(), clearBackgrounds(data{{ forloop.counter }}), d.active = false, arc, vis{{ forloop.counter }}.i(-1)))
-    .event("click", function(d) goToSound(d.id,d.username));
-
-arc.label.add(pv.Label)
-    .text(function(d) {
-                        if(d.nodeName.length > 25) { return d.nodeName.substring(0,25) + "..."; }
-                        else { return d.nodeName; }
-                      })
-    .textAngle(0.959931089)	// 55 degrees
-    .textBaseline("bottom")
-    .textAlign("right");
-
-
-vis{{ forloop.counter }}.render();
-/* ======== PROTOVIS STUFF-END ======== */
-        </script>
-    </div>
-    </li>
-    <div id="remix_group_link" style="float: right; margin-right: 270px;">
-        <a href="/browse/remixed/{{ remix_group.id|safe }}">Go to this remix-group page.</a>
-    </div>
-    <div id="message{{ forloop.counter }}" style="height: 1em;"></div>
-
-{% endfor %}
-</ul>
-
-{% show_paginator paginator page current_page request "remix group" %}
-
-{% endblock %}
diff --git a/templates/sounds/remixes.html b/templates/sounds/remixes.html
deleted file mode 100644
index ef46c0ba8..000000000
--- a/templates/sounds/remixes.html
+++ /dev/null
@@ -1,144 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% block head %}
-    {{ block.super }}
-    <script type="text/javascript" src="{{media_url}}js/protovis-r3.2.js"></script>
-    <script type="text/javascript" src="{{media_url}}js/jquery-ui-1.8.11.custom.min.js"></script>
-    <style type="text/css">
-        #fig {
-          overflow: auto;
-          position: relative;
-          float: left;
-          width: 220px;
-          margin-right: 10px;
-        }
-        .details {
-            position: relative;
-            float: left;
-            width: 540px;
-            margin-top: 30px;
-        }
-        .center {
-            overflow: auto;
-            position: relative;
-            float: left;
-            width: 220px;
-        }
-    </style>
-    <script type="text/javascript">
-	function calculateEccentricity(length, height) {
-		var eccentricity = 0.15;
-	    if (length > 3) {
-	    	var a = (length-2) * 80;
-	        var b = height;
-	        eccentricity = (1 - b/a) * (1 - b/a);
-	    }
-	    return eccentricity;
-	}
-    </script>
-{% endblock head %}
-{% load display_sound %}
-{% block title %}Remix Group {{ group_sound.original_filename }}{% endblock title %}
-{% block section_content %}
-
-<h1>Remix Group <em>{{ group_sound.original_filename }}</em></h1>
-
-<div id="remix_group_info" class="stream_box">
-	<h3>Remix group info</h3>
-	<div class="sound_list_normal">
-		<ul>
-			<li>Original sound by: <a href="/people/{{ sounds.0.user.username }}">{{ sounds.0.user.username }}</a></li>
-			<li>Original sound created on: <b>{{ sounds.0.created }}</b></li>
-			<li>Last remix done on: <b>{{ last_sound.created }}</b></li>
-			<li>Number of sounds in group: <b>{{ sounds|length }}</b></li>
-		</ul>
-	</div>
-</div><!-- #remix_group_info -->
-
-<div class="remixes">
-<div id="center">
-    <div id="fig">
-        <script type="text/javascript+protovis">
-// Graph DATA
-var data = {{ data|safe }};
-
-var eccentricity{{ forloop.counter }} = calculateEccentricity(data{{ forloop.counter }}.length, 190);
-
-/* ======== PROTOVIS STUFF-START ======== */
-var vis = new pv.Panel()
-                .def("i", -1)
-                .width(190)
-                .height($('.details').height())
-                .bottom(0)
-                .top(25)
-                .right(30);
-
-var arc = vis.add(pv.Layout.Arc)
-    .nodes(data.nodes)
-    .links(data.links)
-    .orient("right");
-
-arc.link.add(pv.Line)
-        .strokeStyle(function(d, p)  connections(d,p))
-        .eccentricity(eccentricity)
-		.add(pv.Dot)
-		.shape("triangle")
-		.data(function(l) [{
-	   						x: l.targetNode.x - 1.5,
-	   						y: l.targetNode.y - 2
-		          		}])
-		.angle(function(d,p) Math.atan2(2, 1.5))
-        .shape("triangle")
-        .fillStyle(function(d, p)  connections(d,p))
-        .size(6);
-
-arc.node.add(pv.Dot)
-    //.shape("diamond")
-    //.angle(0.523598776)
-    .size(function(d) d.linkDegree + 4)
-	.left(function (d) d.x + 10)
-    .fillStyle(function(d) vis.i() == this.index ? "#F1D9FF" : "#DBDBDB")
-    .strokeStyle(function() this.fillStyle().darker())
-    .radius(function(d) vis.i() == this.index ? 10 : 5)
-    .event("mouseover", function(d) (d.active = true, arc, vis.i(this.index)))
-    .event("mouseout", function(d) (clearBackgrounds(), d.active = false, arc, vis.i(-1)));
-
-vis.render();
-/* ======== PROTOVIS STUFF-END ======== */
-
-/* ======== helper functions ========= */
-function connections(d, p) {
-    if (p.sourceNode.active == true) {
-		$("#"+p.targetNode.id+"").stop();
-		$("#"+p.sourceNode.id+"").stop();
-        $("#"+p.targetNode.id+"").animate({backgroundColor: "#DBDBDB"});
-      	$("#"+p.sourceNode.id+"").animate({backgroundColor: "#F1D9FF"});
-        return "orange";
-    } else if (p.targetNode.active == true) {
-		$("#"+p.targetNode.id+"").stop();
-		$("#"+p.sourceNode.id+"").stop();
-        $("#"+p.targetNode.id+"").animate({backgroundColor: "#F1D9FF"});
-        $("#"+p.sourceNode.id+"").animate({backgroundColor: "#DBDBDB"});
-        return "orange";
-    } else
-        return "#c7c7c7";
-}
-function clearBackgrounds() {
-    for (var i=0; i<data.nodes.length; i++) {
-		$("#"+data.nodes[i].id+"").stop(true,true);
-        $("#"+data.nodes[i].id+"").animate({backgroundColor: "#ffffff"});
-    }
-}
-        </script>
-      </div>
-</div>
-
-
-<div class="details">
-{% for sound in sounds %}
-    {% display_sound sound %}
-{% endfor %}
-</div>
-</div>
-
-{% endblock %}
diff --git a/templates/sounds/similar.html b/templates/sounds/similar.html
deleted file mode 100644
index cbe55ee2f..000000000
--- a/templates/sounds/similar.html
+++ /dev/null
@@ -1,27 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load display_sound %}
-{% load paginator %}
-
-{% block title %}Sounds browse{% endblock title %}
-
-{% block section_content %}
-
-{% for sound in similar_sounds %}
-    {% if forloop.counter == 1 %}
-        <h1>Query sound</h1>
-    {% endif %}
-    {% display_sound sound %}
-    {% if forloop.counter == 1 %}
-        <h1>Similar sounds</h1>
-    {% endif %}
-
-{% empty %}
-    <h1>Similar sounds</h1>
-    <p>Hmm.. We can't seem to find any similar sounds yet. It's probable this is because
-       the query sound has been uploaded recently and we haven't updated our similarity
-       database yet. Try again later!
-{% endfor %}
-
-{% endblock %}
-
diff --git a/templates/sounds/sound.html b/templates/sounds/sound.html
index fe6746140..9c70292ab 100644
--- a/templates/sounds/sound.html
+++ b/templates/sounds/sound.html
@@ -1,21 +1,22 @@
-{% extends "sounds/_section.html" %}
+{% extends "base.html" %}
 
+{% load static %}
+{% load cache %}
 {% load filter_img %}
 {% load paginator %}
 {% load util %}
 {% load ratings %}
-{% load cache %}
 {% load absurl %}
 {% load flag_user %}
 {% load sound_signature%}
+{% load display_sound %}
+{% load display_user %}
+{% load bw_templatetags %}
 
-{% block title %}&quot;{{sound.original_filename}}&quot; by {{sound.user.username}}{% endblock title %}
+{% block title %}{{sound.original_filename}} by {{sound.user.username}}{% endblock title %}
 
 {% block head %}
-{{ block.super }}
-    <script type="text/javascript">
-        swfobject.registerObject("player_{{sound.id}}", "10");
-    </script>
+    {{ block.super }}
     <meta property="og:title" content="{{ sound.original_filename }} by {{ sound.user.username }}" />
     <meta property="og:type" content="song" />
     <meta property="og:audio" content="https://{{ request.get_host }}{{ sound.locations.preview.LQ.mp3.url }}" />
@@ -23,10 +24,8 @@
     <meta property="og:audio:title" content="{{ sound.original_filename }}" />
     <meta property="og:url" content="{% absurl 'sound' sound.user.username sound.id %}" />
     <meta property="og:audio:type" content="application/mp3" />
-<!--     <meta property="og:image" content="http://{{ request.get_host }}{{sound.locations.display.wave.M.url}}" /> -->
     <meta property="og:site_name" content="Freesound" />
     <meta property="fb:admins" content="100002130282170" />
-
     <meta name="twitter:card" content="player" />
     <meta name="twitter:site" content="@freesound_dev" />
     <meta name="twitter:title" content="{{ sound.original_filename }}" />
@@ -39,355 +38,322 @@
     <meta name="twitter:player:stream:content_type" content="audio/mp4" />
 {% endblock head %}
 
-{% block section_content %}
-
-{% cache 3600 sound_header sound.id is_explicit %}  {# cache both blurred and normal version for explicit sounds #}
-<div id="single_sample_header" class="{% if is_explicit %}blur{% endif %}">
-    {% if sound.pack %}<a href="{% url 'pack' username sound.pack.id %}">{{sound.pack.name}}</a>  &#187; {% endif %}<a href="#">{{sound.original_filename}}</a>
-</div>
-
-<div id="single_sample_player">
-
-    {% if is_explicit %}
-        <div class="explicit-sound-blocker">
-          <div class="message-img">
-            <img src='{{media_url}}images/warning.png' width="100" />
-          </div>
-          <div class="message">
-              <span>Content warning</span>
-              <p>This sound may be inappropriate for some users
-              <br>You can turn these warnings off in your <a href="{% url 'accounts-edit' %}">user settings</a> page</p>
-              <p><a id="remove_warning_link" href="javascript:void(0);" onclick="remove_explicit_content_warning(this);">Dismiss</a></p>
-          </div>
-        </div>
-        <script type="text/javascript">
-        $('#remove_warning_link').click(function(e){
-          $('.blur').removeClass('blur');
-          $('.explicit-sound-blocker').remove();
-          e.preventDefault()
-        });
-        </script>
-    {% endif %}
-
-    <div class="player large{% if is_explicit %} blur{% endif %}">
-        <div class="metadata">
-            {% with 'L' as size %}
-                {% include 'sounds/metadata.html' %}
-            {% endwith %}
-        </div>
-    </div>
-</div>
-
-<div id="single_sample_content" class="{% if is_explicit %}blur{% endif %}">
-    <img src="{{sound.user.profile.locations.avatar.M.url}}" alt="avatar" id="sound_author_avatar" />
-
-    <div id="sound_author_box">
-        <div id="sound_author"><a href="{% url 'account' sound.user.username %}">{{sound.user.username}}</a></div>
-        <div id="sound_date">{{sound.created|date:"F jS, Y"}}</div>
-    </div>
-    <div id="sound_description">
-        {{sound.description|replace_img|safe|linebreaks}}
-        {% if sound.user.profile.sound_signature %}
-        <div class="sound_signature">
-            <p>{{sound.user.profile.sound_signature|sound_signature_replace:sound|replace_img|safe|linebreaks}}</p>
-        </div>
-        {% endif %}
-    </div>
-
-    <ul class="tags">
-        {% for tag_link in sound.tags.all%}
-            <li><a href="{% url 'tags' tag_link.tag.name %}">{{tag_link.tag.name}}</a></li>
-        {% endfor %}
-    </ul>
-{% endcache %}
+{% block content %}
+    <div class="container">
+        <div class="navbar-space-filler v-spacing-7 padding-bottom-7 v-spacing-top-5">
+            {% if is_explicit %}
+                <div class="explicit-sound-blocker">
+                    <h4>Content warning</h4>
+                    <p>This sound may be inappropriate for some users
+                        <br>You can turn these warnings off in your <a href="{% url 'accounts-edit' %}">user settings</a> page
+                    </p>
+                    <button class="btn-primary">Show anyway</button>
+                </div>
+            {% endif %}
+            <div class="row no-gutters {% if is_explicit %}blur{% endif %}">
+                <div class="col-md-8">
+                    {% display_sound_big_no_info_no_bookmark sound %}
+                    <div class="bw-sound-page__information v-spacing-top-5">
+                        {% cache 3600 bw_sound_page sound.id %}
+                        <div class="row middle">
+                            <div class="col-10 overflow-hidden">
+                                <h1><a class="bw-link--black" href="{% url 'sound' sound.user.username sound.id %}">{{sound.original_filename}}</a></h1>
+                            </div>
+                            <div class="col-2 text-right">
+                                <div class="text-grey">
+                                    {% if sound.remix_group.all.count %}
+                                    <button title="See sound's remix group" aria-label="See sound's remix group" class="btn-neutral" data-toggle="remix-group-modal" data-modal-activation-param="remix_group" data-modal-content-url="{% url 'sound-remixes' sound.user.username sound.id %}?ajax=1">
+                                        {% bw_icon 'remix' %}
+                                    </button>
+                                    {% endif %}
+                                    {% if sound.similarity_state == 'OK' %}
+                                    <span class="h-spacing-left-1"></span>
+                                    <button title="Find similar sounds" aria-label="Find similar sounds" class="btn-neutral" data-toggle="modal-default" data-modal-activation-param="similar" data-modal-content-url="{% url 'sound-similar' sound.user.username sound.id %}?ajax=1">
+                                        {% bw_icon 'similar' %}
+                                    </button>
+                                    {% endif %}
+                                    {% if request.user.is_authenticated %}
+                                    <span class="h-spacing-left-1"></span>
+                                    <button title="Bookmark this sound" aria-label="Bookmark this sound" class="btn-neutral" data-toggle="bookmark-modal" data-modal-url="{% url 'bookmarks-add-form-for-sound' sound.id %}" data-add-bookmark-url="{% url 'add-bookmark' sound.id %}">
+                                        {% bw_icon 'bookmark' %}
+                                    </button>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="middle v-spacing-top-2">{% bw_sound_stars sound False %}<span class="bw-rating__count text-grey h-spacing-left-1">{{ sound.get_ratings_count_text }}</span></div>
+
+                        <div class="middle bw-sound-page__user v-spacing-top-5">
+                            <div class="h-spacing-1">
+                                {% bw_user_avatar sound.user.profile.locations.avatar.M.url sound.user.username 40 %}
+                            </div>
+                            <div class="h-spacing-left-1">
+                                <a href="{% url 'account' sound.user.username %}">{{ sound.user.username | truncate_string:15 }}</a>
+                                <p class="text-grey">{{ sound.created|date:"F jS, Y" }}</p>
+                            </div>
+                            {% if sound.user != request.user  %}
+                                <div class="h-spacing-left-3">
+                                    {% if is_following %}
+                                        <a class="no-hover btn-secondary" href="{% url 'unfollow-user' sound.user.username %}?next={{ next_path }}">Unfollow</a>
+                                    {% else %}
+                                        <a class="no-hover btn-inverse" href="{% url 'follow-user' sound.user.username %}?next={{ next_path }}">Follow</a>
+                                    {% endif %}
+                                </div>
+                            {% endif %}
+                        </div>
+                        <div class="middle v-spacing-top-3">
+                            {% if sound.geotag_id %}
+                                <div>
+                                    <a href="{% url 'sound-geotag' sound.user.username sound.id %}">
+                                        {% bw_icon 'pin' %} {{ sound.get_geotag_name }}
+                                    </a>
+                                </div>
+                                {% if sound.pack_id %}
+                                    <div class="text-grey h-spacing-left-2 h-spacing-2">·</div>
+                                {% endif %}
+                            {% endif %}
+                            {% if sound.pack_id %}
+                                <div class="text-grey">
+                                   This sound is part of the pack <a href="{% url 'pack' username sound.pack.id %}">{{ sound.pack.name}}</a>
+                                </div>
+                                
+                            {% endif %}
+                        </div>
+                        <div class="v-spacing-top-1">
+                            <div id="soundDescriptionSection">
+                                {{ sound.description|replace_img|safe|linebreaks|strip_unnecessary_br }}
+                            </div>
+                            {% if sound.user.profile.sound_signature %}
+                                <div class="v-spacing-top-3 text-grey">
+                                    <p>{{ sound.user.profile.sound_signature|sound_signature_replace:sound|replace_img|safe|linebreaks|strip_unnecessary_br }}</p>
+                                </div>
+                            {% endif %}
+                            <div class="v-spacing-top-3">
+                                <a href="javascript:void(0);" title="Flag this sound as ilegal, offensive or other..." class="text-light-grey" data-toggle="flag-sound-modal" data-modal-activation-param="flag" data-modal-content-url="{% url 'sound-flag' sound.user.username sound.id %}?ajax=1">
+                                    {% bw_icon 'flag' %} Sound illegal or offensive? Flag it!
+                                </a>
+                            </div>
+                            <div class="v-spacing-top-3">
+                                {% for tag in sound.tags.all %}
+                                    {% bw_tag tag.tag.name 1 "h-spacing-1" %}
+                                {% endfor %}
+                            </div>
+                            <div class="divider-light v-spacing-top-4"></div>
+                            <div class="v-spacing-top-4 row">
+                                <div class="col-2 text-center text-17">
+                                    <p class="text-grey no-margins">Type</p>
+                                    <p class="no-margins">{{sound.get_type_display}} (.{{sound.type}})</p>
+                                </div>
+                                <div class="col-2 text-center text-17">
+                                    <p class="text-grey no-margins">Duration</p>
+                                    <p class="no-margins">{{sound.duration|duration}}</p>
+                                </div>
+                                <div class="col-2 text-center text-17">
+                                    <p class="text-grey no-margins">File size</p>
+                                    <p class="no-margins">{{sound.filesize|filesizeformat}}</p>
+                                </div>
+                                    <div class="col-2 text-center text-17">
+                                        <p class="text-grey no-margins">Sample rate</p>
+                                        <p class="no-margins">{{sound.samplerate}} Hz</p>
+                                    </div>
+                                {% if sound.bitdepth %}
+                                    <div class="col-2 text-center text-17">
+                                        <p class="text-grey no-margins">Bit depth</p>
+                                        <p class="no-margins">{{sound.bitdepth}} bit</p>
+                                    </div>
+                                {% else %}
+                                    <div class="col-2 text-center text-17">
+                                        <p class="text-grey no-margins">Bitrate</p>
+                                        <p class="no-margins">{{sound.bitrate}} kbps</p>
+                                    </div>
+                                {% endif %}
+                                <div class="col-2 text-center text-17">
+                                    <p class="text-grey no-margins">Channels</p>
+                                    <p class="no-margins">{{sound.get_channels_display}}</p>
+                                </div>
+                            </div>
+                        </div>
+                        {% endcache %}
+                    </div>                    
+                </div>
+
+                <div class="col-md-4 col-extra-left-padding-large-md">
+                    <div class="divider-light v-spacing-top-4 v-spacing-4 d-md-none"></div>
+                    <div class="bw-sound__sidebar">
+                        {% if display_random_link %}
+                            <a class="no-hover btn-blue display-inline-block w-100 text-center v-spacing-4" href="{% url 'sounds-random' %}">Get another random sound!</a>
+                        {% endif %}
+                        {% cache 3600 bw_sound_page_sidebar sound.id %}
+                        <div>
+                            <ol>
+                                <li class="v-spacing-3"> {% bw_icon 'download' 'text-light-grey' %}
+                                    <a class="text-19 bw-link--black" title="This sound has been downloaded {{ sound.num_downloads|bw_intcomma }} time{{ sound.num_downloads|pluralize }}" href="javascript:void(0);" data-toggle="modal-default" data-modal-content-url="{% url 'sound-downloaders' sound.user.username sound.id %}?ajax=1" data-modal-activation-param="downloaders">{{ sound.num_downloads|formatnumber }} download{{ sound.num_downloads|pluralize }}</a>
+                                </li>
+                                <li class="v-spacing-3">{% bw_icon 'comments' 'text-light-grey' %}
+                                    <a class="text-19 bw-link--black" title="This sound has received {{ sound.num_comments|bw_intcomma }} comment{{ sound.num_comments|pluralize }}" href="#comments">{{ sound.num_comments|formatnumber }} comment{{ sound.num_comments|pluralize }}</a>
+                                </li>
+                            </ol>
+                        </div>
+                        <div class="v-spacing-top-5 middle">
+                            {% bw_icon sound.license_bw_icon_name 'text-light-grey text-30' %} <span class="text-20 h-spacing-left-2 padding-right-4">{{ sound.license.name_with_version }}</span>
+                        </div>
+                        <div class="text-grey {% if sound.user == request.user %}v-spacing-4{% endif %} v-spacing-top-1">
+                            {{ sound.license.get_short_summary|safe }} <a href="{{ sound.license.deed_url }}" target="_blank" class="bw-link--black">More...</a>
+                        </div>
+                        {% endcache %}
+
+                        {% if request.user.is_authenticated and sound.user != request.user %}
+                            <div class="v-spacing-top-5">
+                                <p class="text-center text-26 font-weight-bold">Your rating:</p>
+                                <div class="center text-20">
+                                    {% bw_sound_stars sound True True True %}
+                                </div>
+                            </div>
+                        {% endif %}
 
-    <div id="comments_container">
-        <h4 id="comments_heading">Comments</h4>
-        <a name="comments"></a>
-        {% if page.object_list %}
-            <ul id="comments">
-                {% for comment in page.object_list %}
-                <li>
-                    <img src="{{comment.user.profile.locations.avatar.S.url}}" alt="avatar" class="comment_avatar" />
-                    <div class="comment_info">
-                        <span class="comment_author"><a href="{% url 'account' comment.user.username %}">{{comment.user.username}}</a></span>
-                        <span class="comment_date">{{comment.created|timesince}} ago</span>
+                        <div class="v-spacing-top-5 v-padding-bottom-5 {% if sound.user == request.user %}v-spacing-top-5{% endif %}">
+                            {% if sound.moderation_state == 'OK' and sound.processing_state == 'OK' %}
+                                {% if request.user.is_authenticated %}
+                                    <a class="no-hover btn-primary display-inline-block w-100 text-center sound-download-button" href="{% url 'sound-download' sound.user.username sound.id %}{{ sound.friendly_filename }}" data-show-after-download-modal-url="{% url "after-download-modal" %}">Download sound</a>
+                                {% else %}
+                                    <a class="no-hover btn-primary display-inline-block w-100 text-center" href="{% url 'sound-download' sound.user.username sound.id %}{{ sound.friendly_filename }}">Login to download</a>
+                                {% endif %}
+                            {% else %}
+                                <div class="v-spacing-top-3 text-center">Download unavailable, sound not yet processed or moderated</div>
+                            {% endif %}
+
+                            {% if perms.sound.can_edit or sound.user == request.user %}
+                                {% if sound.processing_state == 'OK' %}
+                                    <a class="no-hover btn-secondary display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'sound-edit' sound.user.username sound.id %}">Edit sound description</a>
+                                {% else %}
+                                    <div class="v-spacing-top-3 text-grey text-center">{% include 'sounds/sound_state_processing_indicator.html' %} (cannot edit)</div>
+                                {% endif %}
+                            {% endif %}
+
+                            {% if request.user.is_staff or perms.tickets.can_moderate or sound.user == request.user %}
+                                <div class="divider-light v-spacing-top-4 padding-bottom-1"></div>
+                            {% endif %}
+
+                            {% if request.user.is_staff %}
+                                <a class="no-hover btn-inverse display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'admin:sounds_sound_change' sound.id %}">Edit in the admin</a>
+                            {% endif %}
+
+                            {% if perms.tickets.can_moderate or sound.user == request.user %}
+                                {% if sound.ticket %}
+                                    <a class="no-hover btn-inverse display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'tickets-ticket' sound.ticket.key %}">Go to moderation ticket</a>
+                                {% else %}
+                                    <div class="v-spacing-top-3 text-grey text-center">No moderation ticket for this sound</div>
+                                {% endif %}
+                            {% endif %}
+
+                        </div>
+                        <div>
+                            <ol class="center">
+                                <li><a class="no-hover" href="https://www.facebook.com/sharer/sharer.php?u={% absurl 'short-sound-link' sound.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'facebook' 'text-30' %}</div></a></li>
+                                <li class="h-spacing-left-2"><a class="no-hover" href="https://twitter.com/share?url={% absurl 'short-sound-link' sound.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'twitter' 'text-30' %}</div></a></li>
+                                <li class="h-spacing-left-2"><a id="toggle-share-link" class="cursor-pointer no-hover"><div class="cleanIcon">{% bw_icon 'share2' 'bw-icon__inside_circle' %}</div></a></li>
+                                <li class="h-spacing-left-2"><a id="toggle-embed-code" class="cursor-pointer no-hover"><div class="cleanIcon">{% bw_icon 'embed-stroke' 'text-30' %}</div></a></li>
+                            </ol>
+                        </div>
+
+                        <div id="share-link" class="v-spacing-top-5">
+                             <span class="text-grey">Share url: </span><br><input class="w-100" type="text" readonly value="{% absurl 'short-sound-link' sound.id %}" />
+                        </div>
+
+                        <div id="embed-links" class="v-spacing-top-5 bw-form">
+                            <div class="v-spacing-1">
+                                <div>920 x 245</div>
+                                <img id="large-embed-image" class="cursor-pointer" src="{{ media_url }}images/widgets/embed_large_scaled_active_color.png" alt="Embed example, large size"/>
+                            </div>
+                            <div class="v-spacing-1">
+                                <div>481 x 86</div>
+                                <img id="medium-embed-image" class="cursor-pointer" src="{{ media_url }}images/widgets/embed_medium_scaled_active_color.png" alt="Embed example, medium size"/>
+                            </div>
+                            <div class="v-spacing-1">
+                                <div>375 x 30</div>
+                                <img id="small-embed-image" class="cursor-pointer" src="{{ media_url }}images/widgets/embed_small_scaled_active_color.png" alt="Embed example, small size"/>
+                            </div>
+                            <textarea
+                                    id="embed-code"
+                                    data-size-large="{{sizes.large.0}},{{sizes.large.1}}"
+                                    data-size-medium="{{sizes.medium.0}},{{sizes.medium.1}}"
+                                    data-size-small="{{sizes.small.0}},{{sizes.small.1}}"
+                                    data-iframe-url-template="{% absurl 'embed-simple-sound-iframe' sound.id 'SIZE' %}"
+                                    style="min-height: 130px;"
+                                    placeholder="The embed code will appear here"
+                                    class="w-100 v-spacing-top-2">
+                            </textarea>
+
+                        </div>
 
-                        {% if perms.comments.delete_comment or sound.user == request.user or comment.user == request.user %}
-                        <span class="comment_delete"><a href="{% url 'comment-delete' comment.id %}?next={{request.path}}&page={{current_page}}" id="delete_button" title="delete comment">delete comment</a>
-                        {% endif %}
                     </div>
-                    {{comment.comment|replace_img|safe|linebreaks}}
-
-                    <div style="text-align: right; font-size: 10px; margin-bottom: -8px">
-                        {%  flag_user "SC" comment.user.username comment.id "" comment.user.profile.num_sounds %}
+                </div>
+
+                <div class="col-md-8">
+                    <div class="v-spacing-top-6">
+                        <div>
+                            <h6 class="text-26 no-margins ">Comments</h6>
+                            <a name="comments"></a>
+                            {% if request.user.is_authenticated %}
+                                <form method="POST" action=".#comments" class="bw-form disable-on-submit">{% csrf_token %}
+                                    <div class="row">
+                                        <div class="col-md-9">
+                                            {{form.as_p}}
+                                        </div>
+                                        <div class="col-md-3">
+                                            <button id="sound_comment_submit" class="v-spacing-top-5 btn-inverse text-14">Post comment</button>
+                                        </div>
+                                    </div>
+                                </form>
+                            {% else %}
+                                {% if not request.user.is_authenticated and page.object_list %}
+                                    <div class="v-spacing-top-4">
+                                        Please <a href="{% url 'login' %}?next={% url 'sound' sound.user.username sound.id %}">log in</a> to comment
+                                    </div>
+                                {% endif %}
+                            {% endif %}
+                            <div id="soundCommentsSection" class="v-spacing-top-5">
+                                {% if page.object_list %}
+                                    {% for comment in page.object_list %}
+                                        <div>
+                                            <div style="display: flex; justify-content: space-between;">
+                                                {% display_user_comment comment.user comment.created %}
+                                                <div class="text-right v-spacing-top-1">
+                                                    {%  flag_user "SC" comment.user.username comment.id "" comment.user.profile.num_sounds %}
+                                                    {% if perms.comments.delete_comment or sound.user == request.user or comment.user == request.user %}
+                                                        <a class="cursor-pointer" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to delete this comment?" data-modal-confirmation-url="{% url 'comment-delete' comment.id %}?next={{request.path}}&page={{current_page}}" title="Delete comment">{% bw_icon 'trash' %} Delete</a>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                            <p class="v-spacing-top-1">{{ comment.comment|replace_img|safe|linebreaks|strip_unnecessary_br }}</p>
+                                            {% if not forloop.last %}
+                                                <div class="divider-light v-spacing-top-3 v-spacing-2"></div>
+                                            {% endif %}
+                                        </div>
+                                    {% endfor %}
+
+                                    <div>
+                                        {% bw_paginator paginator page current_page request "comments" %}
+                                    </div>
+
+                                {% else %}
+                                    <div class="text-grey">This sound has not been commented on yet, be the first to comment!</div>
+                                    {% if not request.user.is_authenticated %}
+                                        <div class="v-spacing-top-1">
+                                            Please <a href="{% url 'login' %}?next={% url 'sound' sound.user.username sound.id %}">log in</a> to comment
+                                        </div>
+                                    {% endif %}
+                                {% endif %}
+                            </div>
+                        </div>
                     </div>
-
-                </li>
-                {% endfor %}
-            </ul>
-
-            <div id="comments_pagination">
-                {% show_paginator paginator page current_page request "comment" %}
-            </div>
-        {%  else %}
-            <p><br>This sound has not been commented on yet, be the first to comment!</p>
-        {% endif %}
-    </div> <!-- comments_container -->
-
-    {% if request.user.is_authenticated %}
-    <form method="POST" action=".#comments" id="sound_comment_form" class="disable-on-submit">{% csrf_token %}
-        <fieldset>
-            <h4 id="leave_a_comment">Leave a comment:</h4>
-            {{form.as_p}}
-            <input id="sound_comment_submit" type="submit" value="Post comment" />
-        </fieldset>
-    </form>
-    {% else %}
-    <center><p>Please <a href="{% url 'login' %}?next={% url 'sound' sound.user.username sound.id %}">log in</a> to comment</center>
-    {% endif %}
-</div> <!-- single_sample_content -->
-
-<div id="single_sample_sidebar" class="{% if is_explicit %}blur{% endif %}">
-     <div id="single_sample_ratings">
-         <div class="stars">
-            {% sound_ratings %}
-            <span class="numratings">({{sound.num_ratings}})</span>
-        </div>
-     </div>
-
-    <div id="download">
-    {% if sound.moderation_state == 'OK' and sound.processing_state == 'OK' %}
-        {% if request.user.is_authenticated %}
-        <a href="{% url 'sound-download' sound.user.username sound.id %}{{ sound.friendly_filename }}" onclick="afterDownloadModal('{% url "after-download-modal" %}','{{ sound.original_filename }}');" id="download_button" title="download sound"></a>
-        {% else %}
-            <a href="{% url 'sound-download' sound.user.username sound.id %}{{ sound.friendly_filename }}" id="download_login_button" title="login to download"></a>
-        {% endif %}
-    {% else %}
-        <p id="not_yet_downloadable">Download unavailable, sound not yet processed or moderated.</p>
-    {% endif %}
-        <div id="download_text"><a href="{% url 'sound-downloaders' sound.user.username sound.id %}">Downloaded<br /><b>{{sound.num_downloads}}</b> times</a></div>
-        <br style="clear: both;">
-    </div>
-
-    {% cache 3600 sound_footer_top sound.id display_random_link %}
-
-	<div id="sound_license">
-        <img src="{{media_url}}images/creative_commons.png" with="95" height="23" alt="Creative Commons" />
-        <a href="{{sound.license.deed_url}}">This work is licensed under the {{sound.license.name_with_version}} License.</a>
-    </div>
-
-    <dl id="sound_information_box">
-        <dt><a href="{% url 'wiki-page' "soundinfo/type" %}#{{sound.type}}"><img src="{{media_url}}images/info{% if sound.type_warning %}_red{% endif %}.png" width="12" height="12" /></a>Type</dt><dd>{{sound.get_type_display}} (.{{sound.type}})</dd>
-        <dt><a href="{% url 'wiki-page' "soundinfo/duration" %}"><img src="{{media_url}}images/info{% if sound.duration_warning %}_red{% endif %}.png" width="12" height="12" /></a>Duration</dt><dd>{{sound.duration|duration}}</dd>
-        <dt><a href="{% url 'wiki-page' "soundinfo/filesize" %}"><img src="{{media_url}}images/info{% if sound.filesize_warning %}_red{% endif %}.png" width="12" height="12" /></a>Filesize</dt><dd>{{sound.filesize|filesizeformat}}</dd>
-
-        {% if sound.bitdepth %}
-        <dt><a href="{% url 'wiki-page' "soundinfo/samplerate" %}"><img src="{{media_url}}images/info{% if sound.samplerate_warning %}_red{% endif %}.png" width="12" height="12" /></a>Samplerate</dt><dd>{{sound.samplerate}} Hz</dd>
-        <dt><a href="{% url 'wiki-page' "soundinfo/bitdepth" %}"><img src="{{media_url}}images/info{% if sound.bitdepth_warning %}_red{% endif %}.png" width="12" height="12" /></a>Bitdepth</dt><dd>{{sound.bitdepth}} bit</dd>
-        {% else %}
-        <dt><a href="{% url 'wiki-page' "soundinfo/bitrate" %}"><img src="{{media_url}}images/info{% if sound.bitrate_warning %}_red{% endif %}.png" width="12" height="12" /></a>Bitrate</dt><dd>{{sound.bitrate}} kbps</dd>
-        {% endif %}
-        <dt><a href="{% url 'wiki-page' "soundinfo/channels" %}"><img src="{{media_url}}images/info{% if sound.channels_warning %}_red{% endif %}.png" width="12" height="12" /></a>Channels</dt><dd>{{sound.get_channels_display}}</dd>
-    </dl>
-
-    <ul id="sound_links" style="padding-left: 23px">
-        {% if display_random_link %}
-        <li><a class="icon" id ="random_sound_button" href="{% url 'sounds-random' %}">Give me another random sound!</a></li>
-        {% endif %}
-        {% if sound.pack %}
-        <li><a id="pack_link" class="icon" href="{% url 'pack' sound.user.username sound.pack.id %}">Pack: {{ sound.pack.name }}</a></li>
-        {% endif %}
-        {% if sound.geotag %}
-        <li><a id="geotag_link" class="icon" href="{% url 'sound-geotag' sound.user.username sound.id %}">Geotag</a></li>
-        {% endif %}
-        {% if sound.remix_group.all.count %}
-        <li><a id="remixes_link" class="icon" href="{% url 'sound-remixes' sound.user.username sound.id %}?ajax=1">Remixes and Sources</a></li>
-        {% endif %}
-        {% if sound.similarity_state == 'OK' %}
-        <li><a id="similar_sounds_link" rel="nofollow" class="icon" href="{% url 'sound-similar' sound.user.username sound.id %}">Similar sounds</a></li>
-        {% endif %}
-
-    {% endcache %}
-
-        {% if perms.sound.can_edit or sound.user == request.user %}
-            {% if sound.processing_state == 'OK' %}
-                <li><a href="{% url 'sound-edit' sound.user.username sound.id %}" class="icon" id="edit_link" title="edit sound">Edit sound information</a></li>
-            {% else %}
-                <li><em>Sound is processing, cannot edit.</em></li>
-            {% endif %}
-        {% endif %}
-
-        {% if request.user.is_authenticated %}
-            <li><a id="bookmark_link" onclick="show_hide_bookmark_form({{sound.id}})" class="icon">Bookmark this sound</a></li>
-            {% if request.user != sound.user %}
-                <li>
-                {% if is_following %}
-                    <a id="follow_link_sound" class="icon">Unfollow this user</a><span id="follow_error"><br/>An error occurred. Please try again.</span></li>
-                {% else %}
-                    <a id="follow_link_sound" class="icon">Follow this user</a><span id="follow_error"><br/>An error occurred. Please try again.</span></li>
-                {% endif %}
-            {% endif %}
-            <div id="bookmark_form_{{sound.id}}" class="bookmark_form"></div> <!-- to be filled dynamically with ajax -->
-        {% endif %}
-
-        {% if request.user.is_staff %}
-            <li><a id="admin_link" class="icon" href="{% url 'admin:sounds_sound_change' sound.id %}">Edit sound in the admin</a></li>
-        {% endif %}
-
-        {% if perms.tickets.can_moderate or sound.user == request.user %}
-            {% if sound.ticket %}
-                <li><a id="ticket_link" class="icon" href="{% url 'tickets-ticket' sound.ticket.key %}">Go to sound moderation ticket</a></li>
-            {% endif %}
-        {% endif %}
-
-    {% cache 3600 sound_footer_bottom sound.id %}
-
-    </ul>
-
-    <div id="flag_sound">
-        Sound illegal or offensive? <a href="{% url 'sound-flag' sound.user.username sound.id %}" title="flag this sound as ilegal, offensive or other...">Flag it!</a>
-    </div>
-
-    <div id="share_links">
-        <p>
-            <span style="color:#999">Share url: </span><input style="padding: 3px;width: 192px;" type="text" readonly value="{% absurl 'short-sound-link' sound.id %}" />
-        </p>
-        <div id="social_links">
-            <div class="social_link">
-                <div id="fb-root" style="float: left;"></div>
-                <script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
-                <fb:like href="{% absurl 'short-sound-link' sound.id %}" send="false" layout="button_count" width="55" show_faces="false" font="arial"></fb:like>
+                </div>
             </div>
-            <a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
-            <span id="tumblr_button_abc123" class="social_link"></span>
-            <div class="social_link">
-                <span id="show_embed_button" onclick="$('#embed_links').toggle(500);">Embed</span>
-            </div>
-            <br style="clear: both;" />
-        </div>
-        <div id="embed_links">
-            <div id="embed_large" class="embed_link">
-                <p>920 x 245</p>
-                <div class="embed_example embed_large" onclick="selectEmbedSize('large');"></div>
-            </div>
-            <div id="embed_medium" class="embed_link">
-                <p>481 x 86</p>
-                <div class="embed_example embed_medium" onclick="selectEmbedSize('medium');"></div>
-            </div>
-            <div id="embed_small" class="embed_link">
-                <p>375 x 30</p>
-                <div class="embed_example embed_small" onclick="selectEmbedSize('small');"></div>
-            </div>
-
-             <textarea id="embed_code" rows="4"></textarea>
-
-             <script type="text/javascript">
-
-                var tumblr_link_url = "{% absurl 'sound' sound.user.username sound.id %}";
-                var tumblr_link_name = "{{ sound.user.username }} - {{ sound.original_filename }}";
-                var tumblr_link_description = "https://freesound.org";
-
-                function selectEmbedSize(size) {
-                    $('.embed_example').removeClass('embed_active');
-                    $('.embed_example.embed_'+size).addClass('embed_active');
-                    var sizes;
-                    if(size == 'large') sizes = [{{sizes.large.0}}, {{sizes.large.1}}];
-                    if(size == 'medium') sizes = [{{sizes.medium.0}}, {{sizes.medium.1}}];
-                    if(size == 'small') sizes = [{{sizes.small.0}}, {{sizes.small.1}}];
-                    var embed_text = '<iframe frameborder="0" scrolling="no" src="{% absurl 'embed-simple-sound-iframe' sound.id 'SIZE' %}" width="WIDTH" height="HEIGHT"></iframe>';
-                    embed_text = embed_text.replace('SIZE', size);
-                    embed_text = embed_text.replace('WIDTH', sizes[0]);
-                    embed_text = embed_text.replace('HEIGHT', sizes[1]);
-                    $('#embed_code').text(embed_text);
-                }
-             </script>
         </div>
-        <!--
-
-        <div id="share_content" style="display: none;">
-            <p>bla
-        </div> -->
     </div>
+{% endblock %}
 
-    {% endcache %}
-
-</div> <!-- single_sample_sidebar -->
-
-<script type="text/javascript">
-    var tumblr_button = document.createElement("a");
-    tumblr_button.setAttribute("href", "https://www.tumblr.com/share/link?url=" + encodeURIComponent(tumblr_link_url) + "&name=" + encodeURIComponent(tumblr_link_name) + "&description=" + encodeURIComponent(tumblr_link_description));
-    tumblr_button.setAttribute("title", "Share on Tumblr");
-    tumblr_button.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:61px; height:20px; background:url('https://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent;");
-    tumblr_button.innerHTML = "Share on Tumblr";
-    document.getElementById("tumblr_button_abc123").appendChild(tumblr_button);
-
-    $(function() {
-        unsecureImageCheck($('#{{ form.comment.id_for_label }}'));
-
-        var is_following;
-        if ("{{ is_following }}" == "True") is_following = true;
-        else is_following = false;
-        $("#follow_link_sound").click(function() {
-            follow_unfollow_user(is_following);
-        });
-
-        if (navigator.userAgent.indexOf('Safari') !== -1 && navigator.userAgent.indexOf('Chrome') === -1) {
-            // Only run this line when safari is the browser (code from http://stackoverflow.com/questions/5899783/detect-safari-using-jquery)
-            // See https://github.com/MTG/freesound/issues/836 about this code
-            var download_button = $('#download_button');
-            download_button.attr('onclick', '');
-            download_button.click(function(){
-                setTimeout(function(){
-                        afterDownloadModal('{% url "after-download-modal" %}','{{ sound.original_filename }}');
-                    }, 100)
-                }
-            );
-        }
-    });
-
-    function follow_unfollow_user(is_following) {
-
-        $("#follow_link_sound").unbind("click");
-
-        var url;
-        if (is_following) {
-            url = '{% url 'unfollow-user' sound.user.username %}';
-        }
-        else {
-            url = '{% url 'follow-user' sound.user.username %}';
-        }
-
-        $.ajax({
-
-            type: 'POST',
-            url: url,
-
-        success: function () {
-
-                is_following = !is_following;
-                $("#follow_error").hide();
-
-                if (is_following)
-                    $("#follow_link_sound").text("Unfollow this user");
-                else
-                    $("#follow_link_sound").text("Follow this user");
-
-                $("#follow_link_sound").click(function() {
-                    follow_unfollow_user(is_following);
-                });
-            },
-
-            error: function (data) {
-                $("#follow_error").show();
-                window.setTimeout(function(){
-                    $("#follow_error").fadeOut(200);
-                }, 3000);
-            }
-
-        });
-    }
-
-</script>
-
-{% endblock section_content %}
+{% block extrabody %}
+    <script src="{% static 'bw-frontend/dist/sound.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/sounds/sound_deleted.html b/templates/sounds/sound_deleted.html
index b934a3dea..2ad6371b3 100644
--- a/templates/sounds/sound_deleted.html
+++ b/templates/sounds/sound_deleted.html
@@ -1,15 +1,8 @@
-{% extends "sounds/_section.html" %}
+{% extends "simple_page.html" %}
 
-{% load paginator %}
-{% load util %}
-{% load ratings %}
-{% load cache %}
+{% block title %}Deleted sound{% endblock %}
+{% block page-title %}Deleted sound{% endblock %}
 
-{% block title %}Deleted Sound{% endblock title %}
-
-{% block section_content %}
-<h2>Deleted sound...</h2>
-<p>
-    This sound was deleted by the user, please update your bookmarks.
-</p>
-{% endblock section_content %}
+{% block page-content %}
+    <p class="text-grey">This sound has been deleted.</p>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/sounds/sound_edit.html b/templates/sounds/sound_edit.html
deleted file mode 100644
index 22d110d29..000000000
--- a/templates/sounds/sound_edit.html
+++ /dev/null
@@ -1,324 +0,0 @@
-{% extends "sounds/_section.html" %}
-{% load maps_js_scripts %}
-
-{% block title %}&quot;editing {{sound.original_filename}}{% endblock title %}
-
-{% block head %}
-{{ block.super }}
-
-{% maps_js_scripts %}
-<script type="text/javascript">
-
-    var doLogTagRecommendation = false;
-    var typingTimer;
-    var addingTagTimer;
-    var doneAddingTagInterval = 0;  //time in ms
-    var doneTypingInterval = 500;     //time in ms
-    var randomDescriptionSessionId = Math.floor(Math.random()*99999).toString(10);
-    var doRecommend = true;
-
-    $(document).ready(function() {
-
-        // Tag recommendation
-        // ******************
-
-        var textarea_elements = $("textarea[id$='-tags']");
-
-        // Listen to keyup events in tags textareas to display tags
-        textarea_elements.keyup(function(event) {
-
-            clearTimeout(typingTimer);
-            var textarea_id = $(this)[0].id;
-
-            // recommend tags when last character is " " or "\n"
-            if  ((event.keyCode == 32) || (event.keyCode == 13)) { // " " or "\n"
-                get_tags(textarea_id);
-            }
-
-            typingTimer = setTimeout(function(){
-                get_tags(textarea_id)
-            }, doneTypingInterval);
-        });
-
-        // Listen to cut, paste and focusin events to recommend tags
-        textarea_elements.bind('cut paste focusin', function() {
-            var textarea_id = $(this)[0].id;
-            get_tags(textarea_id);
-        });
-
-
-        if (doRecommend == true){
-            log("UsingRecommendation:Yes", "-");
-        } else {
-            log("UsingRecommendation:No", "-");
-        }
-
-        unsecureImageCheck($('#{{ description_form.description.id_for_label }}'));
-    });
-
-
-    // Logging functions (for tag recommendation)
-    // ******************************************
-
-    function log(activity,textarea_id){
-        var timestamp = new Date().getTime();
-        var logline = timestamp + "#editing#" + randomDescriptionSessionId + "#" + "{{ sound.user.id }},{{ sound.id }}" + "#" + textarea_id + "#" + activity;
-        if (doLogTagRecommendation) {
-            console.log(logline);
-        }
-    }
-
-
-    // Tag recommendation
-    // ******************
-
-    function get_tags(textarea_id){
-        if (doRecommend==true){
-            var textarea_element = $("#" + textarea_id);
-            log("GettingTagsForInputTags:" + textarea_element.val(), textarea_id);
-
-            $.ajax({
-                type: 'POST',
-                url: '/tagrecommendation/recommendtags/',
-                contentType:"application/x-www-form-urlencoded",
-                data: {
-                    input_tags: textarea_element.val()
-                },
-                success: function(data) {
-                    display_recommended_tags(textarea_id, data);
-                }
-            });
-        }
-    }
-
-    function display_recommended_tags(textarea_id, data){
-
-        var parsedData = JSON.parse(data);
-        var tags = parsedData[0];
-        var community = parsedData[1];
-
-        var logline = "RecommendationResults:Tags:";
-        for (var i in tags){
-            logline += tags[i].toString() + " ";
-        }
-        logline += ":DetectedCommunity:" + community;
-        log(logline, textarea_id);
-
-        if (tags.length > 0){
-            var html = "";
-            html += "<ul id=\"" + textarea_id + "-recommended-list\">";
-            for (var i in tags){
-
-                var tag = tags[i]; //tags[i][0]
-                var tag_css_class = "tag";
-
-                html += "<li class=\"" + tag_css_class + "\" id=\"tag-" + tag + "\"><a onclick=\"add_tag(\'" + textarea_id + "\',\'" + tag + "\',\'" + i + "\')\">" + tag + "</a></li>";
-            }
-            html += "</ul>";
-            var textarea_element = $("#" + textarea_id + "-recommended");
-            textarea_element.text("");
-            textarea_element.append("<span style=\"color: #AB4646;font-size:12px;\">Suggested tags:&nbsp</span> (click on the tags to add them, <a style=\"color:gray\" onclick=\"clear_recommendations(\'" + textarea_id + "\')\">click here to clear the recommendation</a>)");
-            textarea_element.append(html);
-            textarea_element.append("<br class=\"clear\">");
-
-            var textarea_element_list = $("#" + textarea_id + "-recommended-list");
-            textarea_element_list.css("margin-left","-20px");
-            textarea_element_list.css("margin-top","5px");
-            textarea_element_list.css("margin-bottom","5px");
-
-        }else{
-            clear_recommendations(textarea_id);
-        }
-    }
-
-    function add_tag(textarea_id, tag, cloud_pos){
-
-        clearTimeout(addingTagTimer);
-        log("AddingTag:" + tag + ":InCloudPos:" + cloud_pos, textarea_id);
-
-        var ask_for_more = false;
-        var textarea_element = $("#" + textarea_id);
-        var separator = " ";
-        if (!$.trim(textarea_element.val())) {
-            ask_for_more = true;
-            separator = ""
-        }
-
-        textarea_element.val(textarea_element.val() + separator + tag);
-        $("#tag-" + tag).remove();
-
-        var remaining_tags = $("#" + textarea_id + "-recommended-list").children().length;
-        if (remaining_tags < 1){
-            ask_for_more = true;
-        }
-
-        if (ask_for_more == true){
-            get_tags(textarea_id);
-        } else {
-            addingTagTimer = setTimeout(function(){
-                get_tags(textarea_id)
-            }, doneAddingTagInterval);
-        }
-    }
-
-    function clear_recommendations(textarea_id){
-        $("#" + textarea_id + "-recommended").text("")
-    }
-
-</script>
-
-{% endblock head %}
-
-{% block section_content %}
-<h1>Edit Sound</h1>
-
-<h3>Sound description</h3>
-
-<a id="description"></a>
-<form method="post" action="#description">{% csrf_token %}
-    {{description_form.name.errors}}
-    <p>
-       Name:<br>
-        {{description_form.name}}
-    </p>
-
-    {{description_form.tags.errors}}
-    <p>
-        Tags:
-        {{description_form.tags.help_text|safe}}<br>
-        {{description_form.tags}}
-        <div id="id_description-tags-recommended" style="font-size: 10px;margin-top:-5px;width: 670px;"></div>
-    </p>
-
-    {{description_form.description.errors }}
-    <p>
-        Description:<br>
-        {{description_form.description }}
-    </p>
-    <p>
-        The sound contains explicit content:
-        {{description_form.is_explicit }} {% if sound.is_explicit %}(to remove this flag, please send a <a href="{% url 'contact' %}">support request</a>){% endif %}
-    </p>
-
-    <input type="submit" name="submit" value="submit" />
-</form>
-
-<h3>Sound sources</h3>
-<a id="edit_sources"></a>
-<p>
-    If you used other Freesound sounds in the process of creating
-    this one you can mark the source sounds on the next page. If you do, other people
-    can click through the remix graph and browse Freesound like this.
-</p>
-<p>
-    <a href="{% url "sound-edit-sources" sound.user.username sound.id %}">Edit sound sources</a>
-</p>
-
-<h3>Sound license</h3>
-
-<a id="license"></a>
-<form method="post" action="#license">{% csrf_token %}
-    {{ license_form.as_p }}
-    <input type="submit" name="submit" value="submit" />
-</form>
-<br style="clear: both;" />
-
-<h3>Pack</h3>
-
-<a id="pack"></a>
-<form method="post" action="#pack">{% csrf_token %}
-    {{pack_form.as_p}}
-    <input type="submit" name="submit" value="submit" />
-</form>
-
-<h3>Geotag</h3>
-
-<a id="geotag"></a>
-<form method="post" action="#geotag">{% csrf_token %}
- <p>Drag this map to set the geotag:</p>
-    	<div id="map_canvas" class="geotag_edit_map_size" style="margin-bottom: 1em; float:left"></div>
-    	<div style="float:left;margin-left:20px;">{{geotag_form.as_p}}</div>
-        <br style="clear: both;" />
-    <input type="submit" name="submit" value="submit" />
-</form>
-
-<h3>Delete</h3>
-<a id="delete"></a>
-<p>
-    <a href="{% url "sound-delete" sound.user.username sound.id %}">Delete this sound</a>
-</p>
-
-<script type="text/javascript">
-
-    var center_lat;
-    var center_lon;
-    var zoom;
-    {% if sound.geotag %}
-        center_lat = {{sound.geotag.lat}};
-        center_lon = {{sound.geotag.lon}};
-        zoom = {{sound.geotag.zoom}};
-    {% endif %}
-
-    window.map = make_geotag_edit_map('map_canvas', '{{media_url}}/images/arrow.png', updateLatLonZoomFields, center_lat, center_lon, zoom);
-
-    var centerMapTimer = undefined;
-    var centerMapTimeout = 500;  // In milliseconds
-
-    function updateLatLonZoomFields(map_element_id, lat, lon, zoom, box_bl_lat, box_bl_lon, box_tr_lat, box_tr_lon) {
-        $("#{{geotag_form.lon.auto_id}}").val(lon.toFixed(5));
-        $("#{{geotag_form.lat.auto_id}}").val(lat.toFixed(5));
-        $("#{{geotag_form.zoom.auto_id}}").val(Math.floor(zoom));
-    }
-
-    function centerMapToLatLonZoomFields() {
-        // To avoid too many updates of the map, only re-sync it with the contents of the lat, lon and zoom fields
-        // after centerMapTimeout has passed since the last change event
-
-        if (centerMapTimer !== undefined){
-            clearTimeout(centerMapTimer);
-        }
-
-        var lon = $("#{{geotag_form.lon.auto_id}}").val();
-        var lat = $("#{{geotag_form.lat.auto_id}}").val();
-        var zoom = $("#{{geotag_form.zoom.auto_id}}").val();
-        if (!latLonZoomAreValid(lon, lat, zoom)){
-            // If not all paramters are valid and set, map can't be updated and function returns early
-            return;
-        }
-
-        var latLonClipped = clipLatLonRanges(lat, lon);
-        lat = latLonClipped[0];
-        lon = latLonClipped[1];
-
-        centerMapTimer = setTimeout(function (){
-            window.map.setZoom(parseInt(zoom, 10) - 1);
-            window.map.setCenter([parseFloat(lon), parseFloat(lat)]);
-        }, centerMapTimeout);
-    }
-
-    $("#{{geotag_form.remove_geotag.auto_id}}").change(function (event) {
-        if (this.checked)
-        {
-            $("#{{geotag_form.lon.auto_id}}").attr('disabled', 'disabled');
-            $("#{{geotag_form.lat.auto_id}}").attr('disabled', 'disabled');
-            $("#{{geotag_form.zoom.auto_id}}").attr('disabled', 'disabled');
-        }
-        else
-        {
-            $("#{{geotag_form.lon.auto_id}}").attr('disabled', false);
-            $("#{{geotag_form.lat.auto_id}}").attr('disabled', false);
-            $("#{{geotag_form.zoom.auto_id}}").attr('disabled', false);
-        }
-    });
-    $("#{{geotag_form.lon.auto_id}}").bind('input', function (event) {
-        centerMapToLatLonZoomFields();
-    });
-    $("#{{geotag_form.lat.auto_id}}").bind('input', function (event) {
-        centerMapToLatLonZoomFields();
-    });
-    $("#{{geotag_form.zoom.auto_id}}").bind('input', function (event) {
-        centerMapToLatLonZoomFields();
-    });
-
-</script>
-{% endblock section_content %}
diff --git a/templates/sounds/sound_edit_sources.html b/templates/sounds/sound_edit_sources.html
deleted file mode 100644
index 59b1a2692..000000000
--- a/templates/sounds/sound_edit_sources.html
+++ /dev/null
@@ -1,128 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load display_sound %}
-{% block head %}
-{{ block.super }}
-
-<script type="text/javascript">
-    var sources = [];
-
-    function saveSources()
-    {
-        $("#save-button").attr("disabled", "disabled");
-        $("#id_sources").val(sources.join(","))
-        $.post("{% url 'sound-edit-sources' sound.user.username sound.id %}", $("#save-form").serialize(), function ()
-        {
-            $("#save-button").removeAttr("disabled");
-        });
-    }
-
-    function addSound(element, soundId)
-    {
-        if ($.inArray(soundId, sources) == -1)
-        {
-            sources.push(soundId);
-            var el = $(element).clone().appendTo("#current-sources");
-            addRemoveLink(el,soundId);
-            $($(el[0]).children()).children(".add_sound").remove();
-            $("#id_sources").val(sources.join(","));
-        }
-    }
-
-    function addRemoveLink(element, soundId){
-        var title = $($(element).children(".sample_player")[0]).children(".sound_title");
-        var msg = "<br/><a class=\"remove_sound\" onclick=\"removeSound(this, "+soundId+")\">remove </a>"
-        title.after(msg);
-    }
-
-    function removeSound(element, soundId)
-    {
-        var index = $.inArray(soundId, sources);
-        if (index != -1)
-        {
-            sources.splice(index, 1);
-            $(element).parent().parent().remove();
-            $("#id_sources").val(sources.join(","));
-        }
-    }
-
-    function appendLinks(){
-        $('#search-results .sample_player_small').each( function () {
-            var element = $(this);
-            var snd_id = element[0].id;
-            var link_id = "a"+snd_id;
-            var title = $($(this).children(".sample_player")[0]).children(".sound_title");
-            var msg = "<br/><a id=\""+link_id+"\" class=\"add_sound\" >add";
-            msg = msg+"</a>";
-            $(title).after(msg);
-            $("#"+link_id).click(function(){
-                addSound(element, parseInt(snd_id));
-                return false;
-            });
-        });
-    }
-
-    $(function()
-    {
-        sources = $.map($("#id_sources").val().split(","), function (soundId) { return parseInt(soundId) });
-        $("#save-button").click(function ()
-        {
-            saveSources();
-            return false;
-        });
-
-        $("#search-button").click(function ()
-        {
-            $("#search-results").load("{% url 'sounds-search' %}", $.param({"q": $("#search-q").val(), "ajax": 1}),
-                    function(){makePlayer('.player');appendLinks();}
-                );
-            return false;
-        });
-        $('#current-sources .sample_player_small').each( function () {
-            var snd_id = $(this)[0].id;
-            addRemoveLink($(this), snd_id);
-        });
-    });
-</script>
-
-{% endblock head %}
-{% block title %}Editing remixes of {{sound.original_filename}}{% endblock title %}
-{% block section_content %}
-
-<h2>Editing sources of <a href="{% url "sound" sound.user.username sound.id %}">{{sound.original_filename}}</a></h2>
-<p>
-</p>
-
-<form id="save-form">{% csrf_token %}
-    {{form.as_p}}
-    <p><input type="text" name="q" id="search-q" size="45" /> <input type="submit" name="submit" value="search sources" id="search-button"/></p>
-    <p>Hint: if you know the id of the file you are looking for, search for the id. The id of sounds can be found as the first part of the sound filename.
-    <br>When you are ready click the "save..." button to save your sources and then go back to the sound edit page.
-    </p>
-
-	<div id="submit_button_for_edit_sources" >
-		<p><input type="submit" name="save" value="save..." id="save-button"/></p>
-    	<p><a href="{% url "sound-edit" sound.user.username sound.id %}">Go back to edit page</a></p>
-	</div>
-
-	<div id="search-results-title" class="sound_list_minimal">
-	    <h3>Search results:</h3>
-		<div id="search-results" class="sound_list_minimal">
-		</div>
-	    
-	</div>
-	
-	<div id="current-sources" class="sound_list_minimal">
-	    <h3>Current sources:</h3>
-	    {% for source in current_sources %}
-	            {% display_sound source %}
-	    <!--/div-->
-	    {% endfor %}
-	</div>
-
-	<br style="clear:both;"/>
-
-    </div>
-</form>
-
-{% endblock section_content %}
diff --git a/templates/sounds/sound_flag.html b/templates/sounds/sound_flag.html
deleted file mode 100644
index 1a34f6d4c..000000000
--- a/templates/sounds/sound_flag.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% block title %}&quot;flag {{sound.original_filename}}{% endblock title %}
-
-{% block section_content %}
-
-<h2>Flagging <a href="{% url 'sound' sound.user.username sound.id %}">{{sound.original_filename}}</a> by <a href="{% url 'account' sound.user.username %}">{{sound.user.username}}</a></h2>
-
-<form method="post" action=".">{% csrf_token %}
-    {{flag_form.as_p}}
-    <input type="submit" name="submit" value="submit" />
-</form>
-
-{% endblock section_content %}
diff --git a/templates_bw/sounds/sound_state_moderation_indicator.html b/templates/sounds/sound_state_moderation_indicator.html
similarity index 100%
rename from templates_bw/sounds/sound_state_moderation_indicator.html
rename to templates/sounds/sound_state_moderation_indicator.html
diff --git a/templates_bw/sounds/sound_state_processing_indicator.html b/templates/sounds/sound_state_processing_indicator.html
similarity index 100%
rename from templates_bw/sounds/sound_state_processing_indicator.html
rename to templates/sounds/sound_state_processing_indicator.html
diff --git a/templates/sounds/sounds.html b/templates/sounds/sounds.html
deleted file mode 100644
index 22d0f24cd..000000000
--- a/templates/sounds/sounds.html
+++ /dev/null
@@ -1,85 +0,0 @@
-{% extends "sounds/_section.html" %}
-{% load cache %}
-{% load display_sound %}
-{% load paginator %}
-
-
-{% block title %}Sounds browse{% endblock title %}
-
-{% block section_content %}
-<h1>Sounds</h1>
-
-<div id="content">
-    <div id="sound_of_the_day" class="content_box">
-        <h3>Random sound of the day</h3>
-            {% if random_sound %}
-                {% display_sound random_sound %}
-            {% else %}
-                <p>We're still choosing a random sound... check back soon!
-            {% endif %}
-    </div><!-- #sound_of_the_day -->
-
-{% include "sounds/latest_sounds.html" %}
-
-{% cache 3600 most_downloaded_sounds  %}
-    <div id="most_downloaded_sounds" class="content_box">
-        <h3>Most downloaded sounds (uploaded in the last week)</h3>
-        {% for sound in popular_sounds %}
-            {% display_sound sound %}
-        {% empty %}
-            <p>No sounds in the database!
-        {% endfor %}
-        <p class="more_button"><a href="{% url "sounds-search" %}?q=&f=created:[NOW-7DAY%20TO%20NOW]&s=num_downloads+desc&g=0">more...</a></p>
-
-    </div><!-- #most_downloaded_sounds -->
-{% endcache %}
-</div><!-- #content -->
-
-<div id="sidebar">
-
-    <div id="other_sounds" class="content_box">
-        <h3>More Sounds</h3>
-        <ul style="margin-left: 0; padding-left: 0; list-style: none;">
-            <li><b><a class="icon" id ="comments_link" href="{% url "comments" %}">Browse latest comments</a></b></li>
-            <li><b><a class="icon" id ="tag_button" href="{% url "tags" %}">Browse tags</a></b></li>
-            <li><b><a class="icon" id ="geotag_link" href="{% url "geotags" %}">Browse geotags</a></b></li>
-            <li><b><a class="icon" id ="pack_link" href="{% url "packs" %}">Browse packs</a></b></li>
-            <li><b><a class="icon" id ="remixes_link" href="{% url "remix-groups" %}">Browse remix-groups</a></b></li>
-            <li><b><a class="icon" id ="random_sound_button" href="{% url "sounds-random" %}">Give me a random sound!</a></b></li>
-        </ul>
-    </div><!-- #other_sounds -->
-{% cache 3600 latest_changed_packs  %}
-    <div id="latest_changed_packs" class="content_box">
-        <h3>Latest changed packs</h3>
-        <ul>
-        {% for pack in latest_packs %}
-            <li><a href="{% url "pack" pack.user.username pack.id %}">{{pack.name}}</a> by <a href="{% url "account" pack.user.username %}">{{pack.user.username}}</a> (<span class="pack_count">{{pack.num_sounds}}</span>)</li>
-        {% empty %}
-                <div class="sample_player_small">
-                  No packs in the database!
-                </div>
-        {% endfor %}
-        </ul>
-        <p class="more_button" ><a href="{% url "packs" %}?order=-last_updated">more...</a></p>
-    </div><!-- #latest_changed_packs -->
-{% endcache %}
-{% cache 3600 most_downloaded_packs  %}
-    <div id="most_downloaded_packs" class="content_box">
-        <h3>Most downloaded packs (created in the last week)</h3>
-        <ul>
-        {% for pack in popular_packs %}
-            <li><a href="{% url "pack" pack.user.username pack.id %}">{{pack.name}}</a>
-                by <a href="{% url "account" pack.user.username %}">{{pack.user.username}}</a>
-                (<span class="pack_count">{{pack.num_downloads}}</span> downloads)
-            </li>
-        {% empty %}
-            <p>No packs in the database!
-        {% endfor %}
-        </ul>
-        <p class="more_button"><a href="{% url "packs" %}?order=-num_downloads">more...</a></p>
-
-    </div><!-- #most_downloaded_packs -->
-{% endcache %}
-</div><!-- #sidebar -->
-
-{% endblock %}
diff --git a/templates/sounds/sources.html b/templates/sounds/sources.html
deleted file mode 100644
index d41cf7f1c..000000000
--- a/templates/sounds/sources.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load display_sound %}
-{% load paginator %}
-
-{% block title %}Sources for {{sound.original_filename}}{% endblock title %}
-
-{% block section_content %}
-<h1>Sources for <a href="{% url 'sound' sound.user.username sound.id %}">{{sound.original_filename}}</a> by <a href="{% url 'account' sound.user.username %}">{{sound.user.username}}</a></h1>
-
-{% show_paginator paginator page current_page request "source" %}
-
-{% for sound in page.object_list %}
-    {% display_sound sound %}
-{% endfor %}
-
-{% show_paginator paginator page current_page request "source" %}
-
-{% endblock %}
diff --git a/templates/sounds/tags.html b/templates/sounds/tags.html
deleted file mode 100644
index e91d5b818..000000000
--- a/templates/sounds/tags.html
+++ /dev/null
@@ -1,146 +0,0 @@
-{% extends "sounds/_section.html" %}
-
-{% load display_sound %}
-{% load paginator %}
-{% load tags %}
-{% load util %}
-
-{% block title %}tags{% endblock title %}
-
-{% block section_content %}
-
-    <script type="text/javascript">
-        function follow_tags() {
-            $("#follow_tags_button").attr("disabled", "disabled");
-            $.ajax({
-                type: 'POST',
-                url: '{{ follow_tags_url }}',
-                success: function() {
-                    $("#follow_tags_button").removeAttr("disabled");
-                    $("#now_following_tags_div").show();
-                    $("#follow_tags_link").removeAttr("onclick");
-                    $("#follow_tags_button").text("Unfollow tag{{ multiple_tags|pluralize }}");
-                    $("#follow_tags_link").unbind("click").click(unfollow_tags);
-                },
-                error: function(data) {
-                    $("#follow_tags_button").removeAttr("disabled");
-                    $("#follow_tags_error_message").show();
-                    window.setTimeout(function(){
-                        $("#follow_tags_error_message").fadeOut(200);
-                    }, 3000);
-                }
-            });
-        }
-
-        function unfollow_tags() {
-            $("#follow_tags_button").attr("disabled", "disabled");
-            $.ajax({
-                type: 'POST',
-                url: '{{ unfollow_tags_url }}',
-                success: function() {
-                    $("#follow_tags_button").removeAttr("disabled");
-                    $("#follow_tags_link").removeAttr("onclick");
-                    $("#follow_tags_button").text("Follow tag{{ multiple_tags|pluralize }}");
-                    $("#follow_tags_link").unbind("click").click(follow_tags);
-                    $("#now_following_tags_div").hide();
-                },
-                error: function(data) {
-                    $("#follow_tags_button").removeAttr("disabled");
-                    $("#follow_tags_error_message").show();
-                    window.setTimeout(function(){
-                        $("#follow_tags_error_message").fadeOut(200);
-                    }, 3000);
-                }
-            });
-        }
-
-    </script>
-
-    {% if page.object_list %}
-        <h1>Tags</h1>
-    {% endif %}
-
-    {% if error %}
-
-        The search server could not be reached, please try again later.
-
-    {% else %}
-
-        {% if page.object_list %}
-
-            <div class="tagcloud">
-                {% for tag in tags|add_sizes:"name:0.7:1.8" %}
-                    <span style="font-size:{{tag.size}}em;">
-                        {% if tag.name|in_list:multiple_tags %}
-                            {% if multiple_tags|join_tags_exclude:tag.name %}
-                            {{tag.name}}<span class="tag_addremove"><a href="{% url 'tags' multiple_tags|join_tags_exclude:tag.name %}">-</a></span>
-                            {% else %}
-                            {{tag.name}}<span class="tag_addremove"><a href="{% url 'tags' %}">-</a></span>
-                            {% endif %}
-                        {% else %}
-                            <a href="{% url 'tags' tag.name %}">{{tag.name}}</a><span class="tag_addremove"><a href="{% url 'tags' multiple_tags|join_tags_include:tag.name %}">+</a></span>
-                        {% endif %}
-                    </span>
-                {% endfor %}
-            </div>
-
-        {% endif %}
-
-        {% if page.object_list and slash_tag %}
-            <div id="follow_browse_tags">
-
-                <div class="tag_group">
-                    <ul class="tags">
-                    {% for tag in multiple_tags %}
-                        <li><a>{{ tag }}</a></li>
-                    {% endfor %}
-                    </ul>
-                </div>
-
-                <div style="clear: both"></div>
-
-                {% if request.user.is_authenticated %}
-                <div id="follow_tags_button_div">
-                    {% if show_unfollow_button %}
-                        <a href="javascript:void(0)" id="follow_tags_link" onclick="unfollow_tags()"><button id="follow_tags_button">Unfollow tag{{ multiple_tags|pluralize }}</button></a>
-                    {% else %}
-                        <a href="javascript:void(0)" id="follow_tags_link" onclick="follow_tags()"><button id="follow_tags_button">Follow tag{{ multiple_tags|pluralize }}</button></a>
-                    {% endif %}
-                </div>
-                {% endif %}
-
-                <div style="clear: both"></div>
-
-                <div id="follow_tags_error_message">An error occurred, please try again</div>
-
-            <div style="clear: both"></div>
-
-            </div>
-
-        {% endif %}
-
-        {% if multiple_tags %}
-            <h1>Sounds with {{ multiple_tags|length|pluralize:"this,these" }} tag{{ multiple_tags|length|pluralize }}</h1>
-            {% if non_grouped_number_of_results > 0 %}
-                <div class="search_paginator">
-                    {% show_paginator paginator page current_page request "sound" non_grouped_number_of_results %}
-                </div>
-                {% for result in docs %}
-                    {% display_sound result.sound %}
-                    {% if result.n_more_in_group %}
-                            <div class="sample_more_search_results"><img src="{{media_url}}images/plus.png" alt="" /> <a href='{% url "sounds-search"  %}?q={{ search_query }}&f=grouping_pack:"{{ result.sound.pack_id }}_{{ result.sound.pack_name }}"+{{filter_query_link_more_when_grouping_packs }}&s="{{ sort.0 }}"&g={{ group_by_pack_in_request }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>{{result.n_more_in_group}} more result{{ result.n_more_in_group|pluralize  }}</a> in the same pack "{{ result.sound.pack_name|truncate_string:35 }}"</div>
-                    {% endif %}
-                {% endfor %}
-                <div class="search_paginator">
-                    {% show_paginator paginator page current_page request "sound" non_grouped_number_of_results %}
-                </div>
-            {% else %}
-                <p>Sorry. Currently there are no sounds with these tags.</p>
-            {% endif %}
-
-        {% endif %}
-
-
-    {% endif %}
-
-{% endblock %}
diff --git a/templates/sounds/widget_license.html b/templates/sounds/widget_license.html
deleted file mode 100644
index e46bc2f2c..000000000
--- a/templates/sounds/widget_license.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% if sound.license_name == 'Sampling+' %}
-    <img class="cc_license" src="{{media_url}}images/widgets/sampling.png" width="16" height="16" alt="Sampling+ license" title="This sound is licensed under the sampling+ license." />
-{% endif %}
-{% if sound.license_name == 'Creative Commons 0' %}
-    <img class="cc_license" src="{{media_url}}images/widgets/nolaw.png" width="16" height="16" alt="Public Domain license" title="This sound is public domain." />
-{% endif %}
-{% if sound.license_name == 'Attribution' %}
-    <img class="cc_license" src="{{media_url}}images/widgets/by.png" width="16" height="16" alt="Creative Commons Attribution license" title="This sound is licensed under the Creative Commons Attribution license." />
-{% endif %}
-{% if sound.license_name == 'Attribution NonCommercial' %}
-    <img class="cc_license" src="{{media_url}}images/widgets/bync.png" height="16" alt="Creative Commons Attribution Non-Commercial license" title="This sound is licensed under the Creative Commons Attribution Non-Commercial license." />
-{% endif %}
diff --git a/templates/support/_section.html b/templates/support/_section.html
deleted file mode 100644
index 43224b1b4..000000000
--- a/templates/support/_section.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% extends "base.html" %}
-
-{% comment %}
-{% block tab_home_active %}active_tab{% endblock %}
-{% endcomment %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-
-{% block section_content %}
-{% endblock %}
-
-</div> <!-- END of Content area -->
-{% endblock %}
\ No newline at end of file
diff --git a/templates/support/contact.html b/templates/support/contact.html
index 5185e2535..5a3132fa6 100644
--- a/templates/support/contact.html
+++ b/templates/support/contact.html
@@ -1,21 +1,18 @@
-{% extends "support/_section.html" %}
+{% extends "simple_page.html" %}
 
+{% block title %}Contact support{% endblock %}
+{% block page-title %}Contact support{% endblock %}
 
-{% block title %}email support{% endblock %}
-
-{% block section_content %}
-{% if request_sent %}
-<h1>Thank you...</h1>
-<p>Thank you for contacting support, we will reply as soon as possible.</p>
-{% else %}
-<h1>Contact us...</h1>
-<div style="text-align: left; margin-bottom:30px; margin-top:20px;">
-    <h3>Please read the <a href="{% url "wiki" %}faq">Frequently Asked Questions</a> page before you send an email</h3>
-</div>
-    <form method="post" action=".">{% csrf_token %}
-        {{form.as_p}}
-        <input type="submit" value="send" />
+{% block page-content %}
+<div class="v-spacing-top-4 v-spacing-4">
+    {% if request_sent %}
+    <p>Thank you for contacting support, we will reply as soon as possible.</p>
+    {% else %}
+    <p>Use the form below to submit a support request. Please read the <a href="{% url "wiki" %}faq">Frequently Asked Questions</a> page before you send a support request.</p>
+    <form method="post" action="." class="bw-form">{% csrf_token %}
+        {{form}}
+        <button class="btn-primary w-100 v-spacing-top-5">Send</button>
     </form>
+    {% endif %}
 </div>
-{% endif %}
 {% endblock %}
diff --git a/templates/templatetags/maps_js_scripts.html b/templates/templatetags/maps_js_scripts.html
deleted file mode 100644
index ac568e23e..000000000
--- a/templates/templatetags/maps_js_scripts.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
-<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css' type='text/css' />
-<script type="text/javascript" src="{{ media_url }}/js/maps-mapbox.js?v={{ last_restart_date }}"></script>
-<script type="text/javascript">
-    mapboxgl.accessToken = '{{ mapbox_access_token }}';
-</script>
diff --git a/templates/templatetags/paginator.html b/templates/templatetags/paginator.html
deleted file mode 100644
index c83bee818..000000000
--- a/templates/templatetags/paginator.html
+++ /dev/null
@@ -1,68 +0,0 @@
-{% spaceless %}
-<ul class="pagination">
-	
-	{% if page.has_other_pages %}
-	
-		{% if page.has_previous %}
-			<li class="previous-page"><a href="{{ url_prev_page }}{% if anchor %}#{{anchor}}{% endif %}" title="Previous Page">previous</a></li>
-		{% else %}
-			<li class="disabled-previous-next">previous</li>
-		{% endif %}
-		
-		{% if page.has_next %}
-			<li class="next-page"><a href="{{ url_next_page }}{% if anchor %}#{{anchor}}{% endif %}" title="Next Page">next</a></li>
-		{% else %}
-			<li class="disabled-previous-next"><span style="color:#888">next</span></li>
-		{% endif %}
-		
-		
-		{% if show_first %}
-			<li class="first-page"><a href="{{ url_first_page }}{% if anchor %}#{{anchor}}{% endif %}" title="First Page">1</a></li>
-			<li class="dots">...</li>
-		{% endif %}
-		
-		{% for num in page_numbers %}
-		  {% ifequal num current_page %}
-		    <li class="current-page">{{ num }}</li> 
-		  {% else %}
-		    <li class="other-page"><a href="{{ url }}{{ num }}{% if anchor %}#{{anchor}}{% endif %}" title="Page {{ num }}">{{ num }}</a></li>
-		  {% endifequal %}
-		{% endfor %}
-		
-		{% if show_last %}
-			<li class="dots">...</li>
-			<li class="last-page"><a href="{{ url_last_page }}{% if anchor %}#{{anchor}}{% endif %}" title="Last Page">{{paginator.num_pages}}</a></li>
-		{% endif %}
-
-
-		<p class="number_of_results">
-            {% if non_grouped_number_of_results > 0 %}
-                &nbsp|&nbsp {{non_grouped_number_of_results}} {{ anchor }}s
-            {% else %}
-                &nbsp|&nbsp {{ paginator.count }} {{ anchor }}s
-            {% endif %}
-        </p>
-
-
-	
-	{% else %}
-	
-		<p class="number_of_results">
-            {% comment %}
-			{% if paginator.count > 0 %}
-				{{ paginator.count }} {{ anchor }}{{ paginator.count|pluralize }}
-			{% endif %}
-			{% endcomment %}
-
-            {% if non_grouped_number_of_results > 0 %}
-                {{non_grouped_number_of_results}} {{ anchor }}{{ non_grouped_number_of_results|pluralize }}
-            {% else %}
-                {{ paginator.count }} {{ anchor }}{{ paginator.count|pluralize }}
-            {% endif %}
-		</p>
-	
-	{% endif %}
-	
-</ul>
-{% endspaceless %}
-
diff --git a/templates/templatetags/plausible_scripts.html b/templates/templatetags/plausible_scripts.html
deleted file mode 100644
index de00bef0a..000000000
--- a/templates/templatetags/plausible_scripts.html
+++ /dev/null
@@ -1,14 +0,0 @@
-{% if aggregate_pageviews %}
-        <script defer data-domain="freesound.org" src="https://analytics.freesound.org/js/plausible.manual.js"></script>
-        <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
-        <script>
-          let redactedUrl = window.location.href.replace(/\/\d+\//g, "/_ID_/"); // Replace numberic IDs
-          redactedUrl = redactedUrl.replace(/people\/(\w+)\//ig, "people/_ID_/");  // Replace usernames
-          redactedUrl = redactedUrl.replace(/browse\/geotags\/(\w+)\//ig, "browse/geotags/_TAG_/");  // Replace tag frm geotags
-          redactedUrl = redactedUrl.replace(/browse\/tags\/.*/ig, "browse/tags/_TAGS_/");  // Replace multiple tags form tags
-          {% if separate_frontends %}redactedUrl = redactedUrl.replace('freesound.org/', 'freesound.org/NG/'); // Alter path to indicate NG front end{% endif %}
-          plausible('pageview', { u: redactedUrl });
-        </script>
-{% else %}
-        <script async defer data-domain="freesound.org" src="https://analytics.freesound.org/js/plausible.js"></script>
-{% endif %}
\ No newline at end of file
diff --git a/templates/templatetags/sound_ratings.html b/templates/templatetags/sound_ratings.html
deleted file mode 100644
index a67b19431..000000000
--- a/templates/templatetags/sound_ratings.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<ul class="star-rating">
-    <li class="current-rating" style="width:{{sound.rating_percent}}%;">Currently {{sound.avg_rating|stringformat:"%.1f"}}/5 Stars.</li>
-    {% if is_authenticated and request_user != sound_user %}
-    <li><a href="{% url "sound-rating-add" sound_user sound.id 1 %}" title="pretty bad :-(" class="one-star">1</a></li>
-    <li><a href="{% url "sound-rating-add" sound_user sound.id 2 %}" title="quite good" class="two-stars">2</a></li>
-    <li><a href="{% url "sound-rating-add" sound_user sound.id 3 %}" title="good :-)" class="three-stars">3</a></li>
-    <li><a href="{% url "sound-rating-add" sound_user sound.id 4 %}" title="very good" class="four-stars">4</a></li>
-    <li><a href="{% url "sound-rating-add" sound_user sound.id 5 %}" title="amazing :-o" class="five-stars">5</a></li>
-    {% endif %}
-</ul>
\ No newline at end of file
diff --git a/templates/tickets/_section.html b/templates/tickets/_section.html
deleted file mode 100644
index 3ddd57669..000000000
--- a/templates/tickets/_section.html
+++ /dev/null
@@ -1,21 +0,0 @@
-{% extends "base.html" %}
-
-{% block tab_home_active %}active_tab{% endblock %}
-
-{% block content %}
-
-<h1>Moderation</h1>
-
-{% if perms.tickets.can_moderate %}
-<div id="ticket_menu">
-  <ul>
-    <li><a class="button {%if selected == "assigned"%}selected{%endif%}" href="{% url "tickets-moderation-home" %}">Assign Sounds</a></li>
-        <li><a class="button {%if selected == "queue"%}selected{%endif%}" href="{% url "tickets-moderation-assigned" request.user.id %}">Your sound queue {% if moderator_tickets_count > -1 %} ({{moderator_tickets_count}}){% endif %}</a></li>
-        <li><a class="button" href="{% url "wiki" %}moderators/">Moderation guide</a></li>
-    </ul>
-</div>
-{% endif %}
-
-{% block section_content %}
-{% endblock %}
-{% endblock %}
diff --git a/templates/tickets/message_list.html b/templates/tickets/message_list.html
deleted file mode 100644
index 841cbca74..000000000
--- a/templates/tickets/message_list.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-{% for message in ticket.messages.all reversed %}
-    {% if not message.moderator_only or can_view_moderator_only_messages %}
-    <div class="message-list-message-header">
-        <div class="message-list-message-sender"><p>{% if message.sender %} <a href="{% url "account" message.sender.username %}">{{ message.sender.username }}</a> {% else %} Anonymous {% endif %} </div>
-        <div class="message-list-message-date">({{ message.created }})</div>
-        <br style="clear: both;">
-    </div>
-    <p class="message-list-message message-list-message{% if message.moderator_only %}-mod{% else %}-nomod{%endif%}">{{ message.text|safe|linebreaksbr }}</p>
-    <br>
-    {% endif %}
-{% endfor %}
diff --git a/templates/tickets/moderation_assigned.html b/templates/tickets/moderation_assigned.html
deleted file mode 100644
index b9a6950c8..000000000
--- a/templates/tickets/moderation_assigned.html
+++ /dev/null
@@ -1,339 +0,0 @@
-{% extends "tickets/_section.html" %}
-
-{% load util %}
-{% load paginator %}
-{% block head %}
-{{ block.super }}
-<style type="text/css" media="all">
-
-</style>
-<script type="text/javascript">
-    function moderate(ticket_ids) {
-        $("#sounds_info").html('');
-        for (var i in ticket_ids){
-            var ticket_id = ticket_ids[i];
-            var row = $("#row_" + ticket_id);
-            var sound_url = row.data('sound-url');
-            var sound_id = row.data('sound-id');
-            var messages_url = row.data('messages-url');
-            $("#sounds_info").append(
-                '<div class="sample_player_small sound_list_moderation" id="sound_' + sound_id + '"></div>' +
-                '<div id="moderation-ticket-messages-' + sound_id + '"></div>' +
-                '<div class="ticket_link" id="moderation-ticket-link-' + sound_id + '"></div>'
-            );
-            $("#sound_" + sound_id).load(sound_url, function() { makePlayer('.player') });
-            $("#moderation-ticket-messages-" + sound_id).load(messages_url+'messages/');
-            $("#moderation-ticket-link-" + sound_id).get(0).innerHTML =
-                    '<p><a href="'+messages_url+'" target="_blank">open full ticket...</a><p>';
-            var N = {{ max_selected_tickets_in_right_panel }};
-            if (i == N - 1){
-                var n_remaining = ticket_ids.length - N;
-                $("#sounds_info").append('<br><p>' + n_remaining + ' more selected sounds...</p>');
-                break;
-            }
-        }
-    }
-
-    function highlight_row_only(row_id) {
-        $('.mod-selected-row').removeClass('mod-selected-row');
-        $('#' + row_id).addClass('mod-selected-row');
-    }
-
-    var set_uploader_id = function(uploader_id) {
-        loadUrl = '{% url "tickets-user-annotations" 0 %}'.replace('0', ''+uploader_id);
-        $('#user-annotations-section').load(loadUrl);
-    };
-
-    // Function to play the sound corresponding to a selected ticket
-    var soundPlayerLoadedCheck;
-    function playSoundFromTicketList(soundID){
-        // Because when this function is called the sound player is still not loaded in the HTML, we use a setInterval
-        // function that will keep onchecking if the sound player has been loaded. Once player is loaded, this
-        // function will clear the interval and play the sound.
-        soundPlayerLoadedCheck = setInterval(function(){
-            var playerPlayButton = $("#sound_" + soundID + " a.toggle.play");
-            if (playerPlayButton.length){
-                clearInterval(soundPlayerLoadedCheck);
-                playerPlayButton[0].click();
-            }
-        }, 100);
-    }
- 
-    var selectAllOnClick = true;
-    $(document).ready(function() {
-
-        {% if moderator_tickets_count %}
-
-            // Bind submit form event to add autoplay and  include deferred options as query strings
-            var moderationFormElement = $("#moderation-form").find('form')[0];
-            $(moderationFormElement).submit(function(){
-                var includeDeferred = document.getElementById("select_deferred_option").checked;
-                var shouldAutoplay = document.getElementById("select_autoplay_option").checked;
-                var queryParams = {}
-                queryParams['include_d'] = includeDeferred ? 'on': 'off';
-                queryParams['autoplay'] = shouldAutoplay ? 'on': 'off';
-                moderationFormElement.action = '?' + $.param( queryParams );
-                return true;
-            })
-
-            // Bind select all button function
-            $("#select-all").click(function(){
-                if (selectAllOnClick){
-                    $("#select-all").html("Select none");
-                } else {
-                    $("#select-all").html("Select all");
-                }
-
-                var includeDeferred = document.getElementById("select_deferred_option").checked;
-                var table = document.getElementById("assigned-tickets-table");
-                for (var i = 0; i < table.rows.length; i++) {
-                    var row = table.rows[i];
-                    if (includeDeferred){
-                        // Act on all checkboxes
-                        row.getElementsByTagName('input')[0].checked = selectAllOnClick;
-                    } else {
-                        // Only act on the checkboxes of tickets which are not deferred
-                        if (row.getAttribute("data-ticket-status") !== "deferred"){
-                            row.getElementsByTagName('input')[0].checked = selectAllOnClick
-                        }
-                    }
-                }
-
-                selectAllOnClick = !selectAllOnClick;
-                updateSelectedTickets();
-            });
-
-            // Bind select sounds form same user button function
-            $("#select-all-same-user").click(function(){
-                var selectedUserIds = {};
-                $('.ticket-check:checked').each(function () {
-                    var ticket_id = $(this).data('id');
-                    var user_id = $("#row_" + ticket_id).data('sender-id');
-                    selectedUserIds[user_id] = true;
-                });
-                if (Object.keys(selectedUserIds).length === 1){
-                    var target_user_id = Object.keys(selectedUserIds)[0];
-                    var includeDeferred = document.getElementById("select_deferred_option").checked;
-                    var table = document.getElementById("assigned-tickets-table");
-                    for (var i = 0; i < table.rows.length; i++) {
-                        var row = table.rows[i];
-                        var user_id = row.getAttribute("data-sender-id");
-                        if (user_id === target_user_id) {
-                            if (includeDeferred){
-                                // Act on all checkboxes
-                                row.getElementsByTagName('input')[0].checked = true;
-                            } else {
-                                // Only act on the checkboxes of tickets which are not deferred
-                                if (row.getAttribute("data-ticket-status") !== "deferred"){
-                                    row.getElementsByTagName('input')[0].checked = true
-                                }
-                            }
-                        }
-                    }
-                }
-                updateSelectedTickets();
-            });
-
-            // Bind click on the checkbox of the ticket list
-            $(".ticket-check").change(function(evt){
-                stopAll(); // stop all sounds, defined in player.js
-                clearInterval(soundPlayerLoadedCheck); // In case it was active, to avoid having two running
-                var shouldAutoplay = document.getElementById("select_autoplay_option").checked;
-                if (shouldAutoplay && $(this).is(":checked")){
-                    var selectedSoundID = $(this).data('sound-id');
-                    playSoundFromTicketList(selectedSoundID);  // play the sound that was selected
-                }
-                updateSelectedTickets();
-                return false;
-            });
-
-            // Bind click on the ticket name of the ticket list
-            $(".ticket-select").click(function(){
-                stopAll(); // stop all sounds, defined in player.js
-                clearInterval(soundPlayerLoadedCheck); // In case it was active, to avoid having two running
-                var selectedSoundID = $(this).data('sound-id');
-                var selectedTicketID = $(this).data('id');
-                var shouldAutoplay = document.getElementById("select_autoplay_option").checked;
-                if (shouldAutoplay){
-                    playSoundFromTicketList(selectedSoundID);  // play the sound that was selected
-                }
-                $('.ticket-check').attr('checked', false);
-                var checked = $('#row_'+ selectedTicketID).find('.ticket-check');
-                checked.attr('checked', true);
-                updateSelectedTickets();
-                return false;
-            });
-
-            //Load initial selected values when page is loading
-            var selected = $('#id_ticket').get(0).value;
-            var selectedTickets = [];
-            if (selected == '') {
-              selectedTickets = ["{{page.object_list.0.id}}"];
-            }else{
-              selectedTickets = $('#id_ticket').get(0).value.split('|');
-            }
-            for (t in selectedTickets){
-              $('#row_'+ selectedTickets[t]).find('.ticket-check').attr("checked", true);
-            }
-            updateSelectedTickets();
-
-        {% endif %}
-
-        unsecureImageCheck($('#{{ msg_form.message.id_for_label }}'));
-    });
-
-    function updateSelectedTickets() {
-        var selectedTickets = [];
-        var selectedSoundUrls = [];
-        var selectedUserIds = {};
-        $('.mod-selected-row').removeClass('mod-selected-row');
-        $('.ticket-check:checked').each(function () {
-            var ticket_id = $(this).data('id');
-            selectedTickets.push(ticket_id);
-            selectedSoundUrls.push($("#row_" + ticket_id).data('sound-url'));
-            var user_id = $("#row_" + ticket_id).data('sender-id');
-            selectedUserIds[user_id] = true;
-            $('#row_' + ticket_id).addClass('mod-selected-row');
-        });
-
-        $('#moderation-form-wrapper').show();
-        if (selectedTickets.length == 0) {
-            $('#moderation-form-wrapper').hide();
-            $('#select-all-same-user-wrapper').hide();
-        } else if (selectedTickets.length == 1) {
-            var ticketElem = $("#row_"+selectedTickets[0]);
-            moderate(selectedTickets);
-            highlight_row_only('row_'+selectedTickets[0]);
-            set_uploader_id(ticketElem.data('sender-id'));
-            $('#moderate-form-title-label').html('Moderate sound ' + ticketElem.data('sound-id'));
-            $('#select-all-same-user-wrapper').show();
-        } else {
-            moderate(selectedTickets);
-            //$('#current_sound').html('<p>'+selectedTickets.length+' Sounds Selected</p>');
-            $('#moderation-ticket-messages').html('<p>'+selectedTickets.length+' Sounds Selected</p>');
-            $('#moderation-ticket-link').html('');
-            $('#moderate-form-title-label').html('Moderate sounds (' + selectedTickets.length + ') selected');
-
-            if (Object.keys(selectedUserIds).length == 1){
-                // All selected sound belong to the same user
-                set_uploader_id(Object.keys(selectedUserIds)[0]);
-                $('#select-all-same-user-wrapper').show();
-            } else {
-                $('#user-annotations-section').html('');
-                $('#select-all-same-user-wrapper').hide();
-            }
-        }
-        $('#id_ticket').get(0).value=selectedTickets.join('|');
-    }
-    
-    // Implementation of CSRF for ajax post requests
-    $.ajaxSetup({
-        beforeSend: function(xhr, settings) {
-            function getCookie(name) {
-                var cookieValue = null;
-                if (document.cookie && document.cookie != '') {
-                    var cookies = document.cookie.split(';');
-                    for (var i = 0; i < cookies.length; i++) {
-                        var cookie = jQuery.trim(cookies[i]);
-                        // Does this cookie string begin with the name we want?
-                    if (cookie.substring(0, name.length + 1) == (name + '=')) {
-                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                        break;
-                    }
-                }
-            }
-            return cookieValue;
-            }
-            if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
-                // Only send the token to relative URLs i.e. locally.
-                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
-            }
-        }
-    });
-</script>
-{% endblock head %}
-
-
-{% block title %}
-    Moderation
-{% endblock title %}
-
-{% block section_content %}
-
-    <!-- include permission checks here -->
-
-    <div id="moderation-queue">
-
-        <div id="moderation-queue-left">
-          {% comment %} <h4>Assigned tickets {% if moderator_tickets_count > 0 %} ({{moderator_tickets_count}}) {% endif %}</h4>
-            <br>{% endcomment %}
-            {% if not moderator_tickets_count %}
-                <p>You've finished all the sounds in your queue.
-                <p>Back to <a href="{% url "tickets-moderation-home" %}">moderation home</a>
-            {% else %}
-                <p style="margin-bottom:8px">
-                    <a id="select-all">Select all</a>
-                    <span id="select-all-same-user-wrapper">| <a id="select-all-same-user">Select other sounds from same user</a></span>
-                    <br>
-                    <label for="select_deferred_option" ><input type="checkbox" id="select_deferred_option" {% if default_include_deferred %}checked="checked"{% endif %}> Include deferred sounds when selecting</label>
-                    <br>
-                    <label for="select_autoplay_option" ><input type="checkbox" id="select_autoplay_option" {% if default_autoplay %}checked="checked"{% endif %}> Autoplay sounds when selecting</label> | <a href="javascript:void(0);" onclick="stopAll();">stop all sounds</a>
-                </p>
-            {% endif %}
-            <div id="assigned-tickets-table-wrapper">
-                <table id="assigned-tickets-table">
-                {% for ticket in page.object_list %}
-                    {% if ticket.sound %}
-                        <tr id="row_{{ ticket.id }}" class="alternate-row-{% cycle 'odd' 'even' %} {% if ticket.status == "deferred" %}ticket-row-highlighted{% endif %}"
-                            data-sound-id="{{ ticket.sound.id }}"
-                            data-sound-url="{% url "sound-display" ticket.sound.user.username ticket.sound.id %}"
-                            data-messages-url="{% url "tickets-ticket" ticket.key %}"
-                            data-sender-id="{{ticket.sender.id}}"
-                            data-ticket-status="{{ticket.status}}">
-                          <td><input type="checkbox" class="ticket-check" data-id="{{ticket.id}}"  data-sound-id="{{ ticket.sound.id }}"/> </td>
-                          <td><a href="#" class="ticket-select" data-id="{{ticket.id}}" data-sound-id="{{ ticket.sound.id }}">{{ticket.sound.original_filename|truncate_string:20}}</a></td>
-                            <td>{{ticket.sender.username | truncatechars:12}}</td>
-                            <td>{{ticket.created|date:"d/m/Y" }}</td>
-                            <td>{{ticket.status|capfirst}}</td>
-                        </tr>
-                    {% endif %}
-                {% endfor %}
-                </table>
-
-            </div>
-            {% if show_pagination %}
-                {% show_paginator paginator page current_page request "ticket" %}
-            {% endif %}
-
-            <div id="user-annotations-section"></div>
-
-        </div><!-- /#moderation-queue-left -->
-
-        <div id="moderation-queue-right">
-
-            <div id="moderation-form-wrapper">
-                <h4 id="moderate-form-title-label"></h4>
-                <br>
-                <div id="moderation-form">
-                    <form action="." method="post" class="disable-on-submit">{% csrf_token %}
-                        <div id="moderation-decision-form">{{ mod_sound_form.as_p }}</div>
-                        <div style="clear:both;">
-                        {% include 'tickets/moderation_options.html' %}
-                        <p>{{ msg_form.as_p }}</p>
-                        <br style="clear: both;">
-                        <input type="submit" value="send" id="submit-moderation"/>
-                    </form>
-                </div>  
-
-                <div id="sounds_info"></div>
-
-            </div>
-
-            <div style="clear:both;"></div>
-
-        </div><!-- /#moderation-queue-left -->
-    </div><!-- /#moderation-queue -->
-    <br style="clear: both;">
-
-
-{% endblock section_content %}
diff --git a/templates/tickets/moderation_home.html b/templates/tickets/moderation_home.html
deleted file mode 100644
index 65cebc1ad..000000000
--- a/templates/tickets/moderation_home.html
+++ /dev/null
@@ -1,88 +0,0 @@
-{% extends "tickets/_section.html" %}
-
-{% block title %}
-    Sound Moderation
-{% endblock title %}
-
-{% block section_content %}
-
-    <h2>Assign Sounds</h2>
-    
-    {% if new_sounds_users %}
-        <h3>Users with new sounds</h3>
-        <p>
-            <ul class="moderation-user-list-order">Order by:
-            <li><a href="?order=" {% ifequal order "" %}class="selected"{% endifequal %}>days in queue</a></li>
-            <li><a href="?order=username" {% ifequal order "username" %}class="selected"{% endifequal %}>username</a></li>
-            <li><a href="?order=new_count" {% ifequal order "new_count" %}class="selected"{% endifequal %}>number of sounds</a></li>
-            </ul>
-        </p>
-
-        <p><div class="moderation-user-list">
-            {% for item in new_sounds_users %}
-                <div class="moderation-user-list-user">
-                    <div class="moderation-user-list-user-left">
-                    <img src="{{item.user.profile.locations.avatar.L.url}}"/>
-                    </div>
-                    <div class="moderation-user-list-user-right">
-                        <p>
-                            <a href="{% url "account" item.username %}">{{ item.username }}</a>
-                            <br><a href="{% url "tickets-user-pending_sounds" item.username %}">{{ item.new_count }} new sound{{ item.new_count|pluralize }}</a>, {{ item.time }} day{{ item.time|pluralize }} in queue
-                            <br><a href="{% url 'tickets-moderation-assign-user-new' item.user.id %}">
-                            <img src="{{media_url}}images/moderation_plus.png"/>Assign to me</a>
-                        </p>
-                    </div>
-                </div>
-            {% endfor %}
-            <div style="clear: both;"></div>
-            <br>
-            <p>
-                <a href="{% url 'tickets-moderation-assign-all-new' %}" style="color:red;"><img src="{{media_url}}images/moderation_plus.png"/>Assign ALL new sounds to me</a>
-            </p>
-        </div>
-        <br>
-    {% else %}
-       <h3>No new sounds</h3>
-       <p>There are currently no new sounds to be moderated.
-    {% endif %}
-
-    {% if tardy_moderator_tickets %}
-        <h3>Sounds by tardy moderators {% if tardy_moderator_tickets_count > 5 %} (only showing first 5, {{tardy_moderator_tickets_count}} in total, <a href="{% url "tickets-moderation-tardy-moderators" %}">see all</a>) {% endif %}</h3>
-        <p>Sounds in this list have already been assigned to a moderator but have still not been moderated. Feel free to moderate any of these sounds.</p>
-        {% for ticket in tardy_moderator_tickets|slice:"0:5" %}
-            <div style="height:90px;">
-            {% include 'tickets/ticket_sound.html' %}
-            </div>
-            <div style="margin-top:-20px;height:30px;width:100px;margin-bottom:18px">
-            {% if ticket.assignee.id != request.user.id %}
-                <p>
-                    <a href="{% url 'tickets-moderation-assign-single-ticket' ticket.id %}">
-                        <img style="position: relative; top: 5px;" src="{{media_url}}images/moderation_plus.png" />Assign to me
-                    </a>
-                </p>
-            {% endif %}
-            </div>
-        {% endfor %}
-        <br>
-    {% endif %}
-
-    {% if tardy_user_tickets %}
-        <h3>Sounds by tardy users {% if tardy_user_tickets_count > 5 %} (only showing first 5, {{tardy_user_tickets_count}} in total, <a href="{% url "tickets-moderation-tardy-users" %}">see all</a>) {% endif %}</h3>
-        <p>Sounds in this list belong to users that are not responding to moderators requests.</p>
-        {% for ticket in tardy_user_tickets|slice:"0:5" %}
-            <div style="height:90px;">
-            {% include 'tickets/ticket_sound.html' %}
-            </div>
-            <div style="margin-top:-20px;height:30px;width:100px;margin-bottom:18px">
-            {% if ticket.assignee.id != request.user.id %}
-                <p>
-                    <a href="{% url 'tickets-moderation-assign-single-ticket' ticket.id %}">
-                        <img style="position: relative; top: 5px;" src="{{media_url}}images/moderation_plus.png" />Assign to me
-                    </a>
-                </p>
-            {% endif %}
-            </div>
-        {% endfor %}
-    {% endif %}
-
-{% endblock section_content %}
diff --git a/templates/tickets/moderation_options.html b/templates/tickets/moderation_options.html
deleted file mode 100644
index 544495ded..000000000
--- a/templates/tickets/moderation_options.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="moderation_text_wrapper" id="moderation_options_{{key}}">
-	{% for label, text in moderation_texts %}
-		<input type="button" 
-			   class="moderation_text" 
-			   value="{{ label }}" 
-			   onclick="$('#id_message').get(0).value = '{{text|escapejs}}\n';"/>
-	{% endfor %}
-</div>
diff --git a/templates/tickets/moderation_panel.html b/templates/tickets/moderation_panel.html
deleted file mode 100644
index a5d07c2a5..000000000
--- a/templates/tickets/moderation_panel.html
+++ /dev/null
@@ -1,79 +0,0 @@
-{% extends "tickets/_section.html" %}
-
-{% block head %}
-{{ block.super }}
-<script type="text/javascript">
-
-
-var switch_visibility = function(del_or_defer) {
-    if(del_or_defer == 'defer') {
-        var del_form = "hidden";
-        var def_form = "visible";
-    } else {
-        var del_form = "visible";
-        var def_form = "hidden";
-    }
-    return function() {
-            $("#moderation-defer-form").get(0).style.visibility = def_form;
-            $("#moderation-delete-form").get(0).style.visibility = del_form;
-
-        }
-}
-
-var attach = function(elem, func) {
-    if(window.addEventListener){
-           elem.addEventListener('click', func, false);
-    } else if (window.attachEvent){
-           elem.attachEvent('onclick', func);
-    } else {
-           elem.onclick = func;
-    }
-}
-
-$(document).ready(function() {
-    attach($("#moderation-decision-form input").filter( "[value='Approve']" ).get(0),
-               switch_visibility('defer'));
-       attach($("#moderation-decision-form input").filter( "[value='Defer']" ).get(0),
-               switch_visibility('defer'));
-    attach($("#moderation-decision-form input").filter( "[value='Delete']" ).get(0),
-               switch_visibility('delete'));
-});
-
-</script>
-{% endblock %}
-
-
-{% block title %}
-    Moderation
-{% endblock title %}
-
-{% block content %}
-    <h1>Moderation panel test</h1>
-
-    <form action="." method="post">{% csrf_token %}
-
-        <div id="moderation-decision-form">
-            <h4>Moderation action</h4>
-            {{ mod_sound_form.as_p }}
-        </div>
-
-        <div id="moderation-message-form-wrapper">
-
-            <div style="visibility: hidden;" id="moderation-delete-form">
-                <h4>Delete messages</h4>
-                <br>
-                {{ delete_msg_form.as_p }}
-            </div>
-
-            <div style="visibility: visible;" id="moderation-defer-form">
-                <h4>Defer messages</h4>
-                <br>
-                {{ defer_msg_form.as_p }}
-            </div>
-
-        </div>
-
-        <input type="submit" value="send" />
-
-    </form>
-{% endblock content %}
diff --git a/templates/tickets/moderation_sound_display.html b/templates/tickets/moderation_sound_display.html
deleted file mode 100644
index 88b6ea43a..000000000
--- a/templates/tickets/moderation_sound_display.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{% load display_sound %}
-{% display_sound params.sound_id "sound_list_moderation" %}
diff --git a/templates/tickets/moderation_tardy_moderators.html b/templates/tickets/moderation_tardy_moderators.html
deleted file mode 100644
index 5534bf063..000000000
--- a/templates/tickets/moderation_tardy_moderators.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% extends "tickets/_section.html" %}
-{% load paginator %}
-{% block title %}
-    Sound Moderation
-{% endblock title %}
-
-{% block section_content %}
-
-    <h2>Sounds by tardy moderators</h2>
-
-    {% if tardy_moderators_tickets %}
-        {% show_paginator paginator page current_page request "sound" %}
-
-        {% for ticket in page.object_list %}
-            <div style="height:90px;">
-                {% include 'tickets/ticket_sound.html' %}<br>
-            </div>
-
-            <div style="margin-top:-20px;height:30px;width:100px;margin-bottom:18px">
-            {% if ticket.assignee.id != request.user.id %}
-                <p>
-                    <a href="{% url 'tickets-moderation-assign-single-ticket' ticket.id %}?next=tardy_moderators&p={{ current_page }}">
-                        <img style="position: relative; top: 5px;" src="{{media_url}}images/moderation_plus.png" />Assign to me
-                    </a>
-                </p>
-            {% endif %}
-            </div>
-
-        {% endfor %}
-
-        {% show_paginator paginator page current_page request "sound" %}
-    {% endif %}
-
-
-{% endblock section_content %}
diff --git a/templates/tickets/moderation_tardy_users.html b/templates/tickets/moderation_tardy_users.html
deleted file mode 100644
index fe19131e9..000000000
--- a/templates/tickets/moderation_tardy_users.html
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends "tickets/_section.html" %}
-
-{% load paginator %}
-{% block title %}
-    Sound Moderation
-{% endblock title %}
-
-{% block section_content %}
-
-    <h2>Sounds by tardy users</h2>
-
-    {% if tardy_user_tickets %}
-        {% show_paginator paginator page current_page request "sound" %}
-
-        {% for ticket in page.object_list %}
-            <div style="height:90px;">
-                {% include 'tickets/ticket_sound.html' %}<br>
-            </div>
-
-            <div style="margin-top:-20px;height:30px;width:100px;margin-bottom:18px">
-            {% if ticket.assignee.id != request.user.id %}
-                <p>
-                    <a href="{% url 'tickets-moderation-assign-single-ticket' ticket.id %}?next=tardy_users&p={{ current_page }}">
-                        <img style="position: relative; top: 5px;" src="{{media_url}}images/moderation_plus.png" />Assign to me
-                    </a>
-                </p>
-            {% endif %}
-            </div>
-
-        {% endfor %}
-
-        {% show_paginator paginator page current_page request "sound" %}
-    {% endif %}
-
-
-{% endblock section_content %}
diff --git a/templates/tickets/ticket.html b/templates/tickets/ticket.html
deleted file mode 100644
index 0f0c9178a..000000000
--- a/templates/tickets/ticket.html
+++ /dev/null
@@ -1,108 +0,0 @@
-{% extends "base.html" %}
-
-{% load display_sound %}
-
-{% block title %}
-    Ticket {{ ticket.key }}
-{% endblock title %}
-
-{% block content %}
-    <h2>Ticket #{{ ticket.id }} - {{ ticket.title }}</h2>
-
-    <h3>Ticket details</h3>
-    <div id="ticket-details">
-        <ul id="ticket-details-left">
-            <li><em>created by</em>
-                 {% if ticket.sender %}
-                        <a href="{% url "account" ticket.sender.username %}">{{ ticket.sender.username }}</a>
-                        (<a href="{% url "tickets-user-pending_sounds" ticket.sender.username %}">{{ num_sounds_pending }} pending</a>)
-                 {% else %}
-                     anonymous
-                 {% endif %}</li>
-            <li><em>assigned to</em>
-                 {% if ticket.assignee %}
-                     <a href="{% url "account" ticket.assignee.username %}">{{ ticket.assignee.username }}</a>
-                 {% else %}
-                     no one
-                 {% endif %}
-
-                 {# Show 'assign to me' link if the assigned moderator is not you #}
-                 {% if perms.tickets.can_moderate and ticket.assignee.id != user.id %}
-                 (<a href="{% url 'tickets-moderation-assign-single-ticket' ticket.id %}?next=ticket">assign to me</a>)
-                 {% endif %}
-            </li>
-            <li><em>status is</em> {{ ticket.status|capfirst }}</li>
-            <li><em>queue is</em> {{ ticket.queue.name }}</li>
-        </ul>
-        <ul id="ticket-details-right">
-            <li><em>created on</em> {{ ticket.created }}</li>
-            <li><em>last modified on</em> {{ ticket.modified }}</li>
-            {% if ticket.sound %}
-                <li><em>related to</em> Sound {{ ticket.sound.id }}  </li>
-            {% endif %}
-        </ul>
-        <br style="clear: both;">
-    </div>
-
-    <div id="ticket-wrapper">
-        <div id="ticket-left">
-
-            <h3>Messages</h3>
-
-            {% include 'tickets/message_list.html' %}
-			{% if request.user.is_authenticated %}
-            <h3>Add new message to the ticket</h3>
-            <div id="ticket-page-form">
-                <form method="post" action=".">
-                    {% csrf_token %}
-                    {{tc_form.as_p}}
-                    <input type="submit" value="send" />
-                </form>
-            </div>
-            {% else %}
-            <p>Please <a href="{% url "login" %}?next={% url "tickets-ticket" ticket.key %}">log in</a> to add messages</center>
-            {% endif %}
-
-        </div> <!-- /#ticket-left -->
-
-        <div id="ticket-right">
-            {% if perms.tickets.can_moderate and ticket.sound %}
-            <h3>Ticket controls</h3>
-            <form action="." method="post">{% csrf_token %}
-                {{ sound_form.as_p }}
-                <input type="submit" value="send" />
-            </form>
-            {% endif %}
-            
-            <h3>Ticket sound</h3>
-            {% if ticket.sound %}
-                  <div class="sound_list_moderation">
-                      {% display_sound ticket.sound %}
-                      {% if perms.sound.can_edit or ticket.sound.user == request.user %}
-                          {% if ticket.sound.processing_state == 'OK' %}
-                              <ul id="sound_links" style="background: none; padding: 0 0 20px;"><li><a href="{% url "sound-edit" ticket.sender.username ticket.sound.id %}" class="icon" id="edit_link" title="edit sound">Edit sound information</a></li></ul>
-                          {% else %}
-                              <ul id="sound_links" style="background: none; padding: 0 0 20px;"><li><em>Sound is processing, cannot edit.</em></li></ul>
-                          {% endif %}
-                      {% endif %}
-                  </div>
-                  <p>Sound's moderation state is set to <b>{% if ticket.sound.moderation_state == 'PE' %}
-                                                              Pending {% else %} OK {% endif %}</b>
-                  <br>Sound's processing state is set to <b>{% if ticket.sound.processing_state == 'PE' %}
-                                                              Pending {% else %} OK {% endif %}</b>
-                  </p>
-            {% else %}
-                <p>This ticket has no assigned sound or the sound assigned to this ticket was deleted.</p>
-            {% endif %}
-
-        </div> <!-- /#ticket-right -->
-        <br style="clear: both;">
-    </div> <!-- /#ticket-wrapper -->
-
-<script>
-  $(function() {
-    unsecureImageCheck($('#{{ tc_form.message.id_for_label }}'));
-  })
-</script>
-
-{% endblock content %}
diff --git a/templates/tickets/ticket_sound.html b/templates/tickets/ticket_sound.html
deleted file mode 100644
index 92e97101b..000000000
--- a/templates/tickets/ticket_sound.html
+++ /dev/null
@@ -1,15 +0,0 @@
-{% with sound=ticket.sound num_messages=ticket.messages.all|length last_message=ticket.messages.all.0 %}
-<div class="moderation-unsure-ticket">
-    <div class="moderation-unsure-ticket-player small_player">
-        {% include "sounds/player_medium.html" %}
-     </div>
-    <div class="moderation-unsure-ticket-info">
-        <a href="{% url 'tickets-ticket' ticket.key %}">{{ ticket.title }}</a> <em>by</em> {{ ticket.sound.user.username }}
-        <br>assigned to {% if ticket.assignee %}{{ticket.assignee}}{% else %}no one{% endif %} | {{ num_messages }} message{{ num_messages|pluralize }} | last by {% if last_message.sender %}{{last_message.sender.username}}{% else %}anonymous{% endif %}
-        <div class="moderation-unsure-ticket-last">
-            <em>"{{ last_message.text | truncatechars:200 }}"</em>
-        </div>
-    </div>
-</div>
-<br style="clear: both;" />
-{% endwith %}
diff --git a/templates/tickets/tickets.html b/templates/tickets/tickets.html
deleted file mode 100644
index 2afe9e6eb..000000000
--- a/templates/tickets/tickets.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends "tickets/_section.html" %}
-
-{% block title %}
-    Tickets
-{% endblock title %}
-
-{% block section_content %}
-    <h2>All tickets</h2>
-    {% for ticket in tickets %}
-        {{ticket.id}} - {{ticket.title}}<br>
-    {% endfor %}
-{% endblock section_content %}
diff --git a/templates/tickets/user_annotations.html b/templates/tickets/user_annotations.html
deleted file mode 100644
index 48371c2e9..000000000
--- a/templates/tickets/user_annotations.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<div class="user-annotations-wrapper">
-    <br>
-    <h4>User information</h4>
-    <br>
-    <div class="user-annotations-info">
-        <img src="{{ user.profile.locations.avatar.L.url }}"/>
-        <p><a href="{% url 'account' user.username %}">{{ user.username }}</a>
-        <br>{{ num_sounds_ok }} sounds ok, <a href="{% url "tickets-user-pending_sounds" user.username %}">{{ num_sounds_pending }} pending</a>
-        {% if user.profile.home_page %}
-            <br>home page: <a href="{{user.profile.home_page}}" rel="nofollow">{{user.profile.home_page}}</a>
-        {% endif %}
-        <br>Has a been a user for {{user.date_joined|timesince}}
-        <br>Number of forum posts: {{user.profile.num_posts}}
-    </div>
-    <br style="clear: both;">
-    <br>
-    <h4>User annotations</h4>
-    <br>
-    {% for annotation in annotations %}
-        <div class="user-annotation">
-            <p><a href="{% url 'account' annotation.sender.username %}">{{ annotation.sender }}</a> wrote:
-            <p class="message-list-message">{{ annotation.text|linebreaksbr|safe }}
-        </div>
-    {% endfor %}
-    <form>
-    {{ form.as_p }}
-    <input type="button"
-           value="submit"
-           onClick="
-               var text = $('#id_text').get(0).value;
-               console.debug(text);
-            $.post('{% url "tickets-user-annotations" user.id %}',
-                   { text: text },
-                   function(data) { $('#user-annotations-section').html(data); });">
-    </form>
-</div>
-
-<script>
-  $(function() {
-    unsecureImageCheck($('#{{ form.text.id_for_label }}'));
-  })
-</script>
diff --git a/templates/wiki/_section.html b/templates/wiki/_section.html
deleted file mode 100644
index e426ccd1a..000000000
--- a/templates/wiki/_section.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{% extends "base.html" %}
-
-{% block tab_help_active %}active_tab{% endblock %}
-
-{% block content %}
-<div id="content_full"> <!-- START of Content area -->
-{% block section_content %}
-{% endblock %}
-</div> <!-- END of Content area -->
-{% endblock %}
\ No newline at end of file
diff --git a/templates/wiki/edit.html b/templates/wiki/edit.html
index a9d5e14d2..13f31a36a 100644
--- a/templates/wiki/edit.html
+++ b/templates/wiki/edit.html
@@ -1,26 +1,26 @@
-{% extends "wiki/_section.html" %}
+{% extends "simple_page.html" %}
 
+{% block title %}Editing - {{content.title}}{% endblock %}
+{% block page-title %}Editing - {{ name }}{% endblock %}
 
-{% block title %}help - {{name}}{% endblock %}
-
-{% block section_content %}
-
-<h1>Editing {{name}}</h1>
-{% if content %}
-<ul>
-    <li><strong>version</strong>: {{content.id}} - <a href="{% url "wiki-page-history" name %}">history and comparison</a></li>
-	<li><strong>previous edit date</strong>: {{content.created}}</li>
-	{% if content.author %}
-	<li><strong>previous author</strong>: {{content.author.username}}</li>
-	{% else %}
-	<li><strong>no previous author</strong></li>
-	{% endif %}
-</ul>
-{% endif %}
-
-<form method="post" action=".">{% csrf_token %}
-{{form.as_p}}
-<input type="submit" value="save" />
-</form>
-
+{% block page-content %}
+    <div class="bw-wiki">
+        {% if content %}
+        <ul class="v-spacing-4">
+            <li><strong>version</strong>: {{content.id}} - <a href="{% url "wiki-page-history" name %}">history and comparison</a></li>
+            <li><strong>previous edit date</strong>: {{content.created}}</li>
+            {% if content.author %}
+            <li><strong>previous author</strong>: {{content.author.username}}</li>
+            {% else %}
+            <li><strong>no previous author</strong></li>
+            {% endif %}
+        </ul>
+        {% endif %}
+        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
+        {{ form }}
+        <div class="text-right">
+            <button class="btn-primary v-spacing-top-1">Save</button>
+        </div>
+        </form>
+    </div>
 {% endblock %}
diff --git a/templates/wiki/history.html b/templates/wiki/history.html
index b1bbd784d..a6edcecf2 100644
--- a/templates/wiki/history.html
+++ b/templates/wiki/history.html
@@ -1,41 +1,30 @@
-{% extends "wiki/_section.html" %}
+{% extends "simple_page.html" %}
 
+{% block title %}History - {{ page.name }}{% endblock %}
+{% block page-title %}History of page - {{page.name}}{% endblock %}
 
-{% block title %}{{page.name}} - History{% endblock %}
-
-{% block head %}
-    {{ block.super }}
-    <style type="text/css">
-        table.diff {font-family:Courier; border:medium;}
-        .diff_header {background-color:#e0e0e0}
-        td.diff_header {text-align:right}
-        .diff_next {background-color:#c0c0c0}
-        .diff_add {background-color:#aaffaa}
-        .diff_chg {background-color:#ffff77}
-        .diff_sub {background-color:#ffaaaa}
-    </style>
-{% endblock %}
-
-{% block section_content %}
-
-<h1>Versions of page: {{page.name}}</h1>
-<form method="get" action=".">
-    <ul>
-    {% for version in versions %}
-        <li>
-            <input type="radio" name="version1" value="{{version.id}}"{%if version1.id == version.id %} checked="checked"{%endif%}>
-            <input type="radio" name="version2" value="{{version.id}}"{%if version2.id == version.id %} checked="checked"{%endif%}>
-            {% if version.author %}
-            by {{version.author}}
+{% block page-content %}
+    <div class="bw-wiki">
+        <form method="get" action=".">
+            <ul>
+            {% for version in versions %}
+                <li>
+                    <input type="radio" name="version1" value="{{version.id}}"{% if version1.id == version.id %} checked="checked"{% endif %}>
+                    <input type="radio" name="version2" value="{{version.id}}"{% if version2.id == version.id %} checked="checked"{% endif %}>
+                    {% if version.author %}
+                    by {{version.author}}
+                    {% endif %}
+                    <a href="{% url "wiki-page" page.name %}?version={{version.id}}">version {{version.id}}</a> ({{version.created|timesince}} ago)</li>
+            {% endfor %}
+            </ul>
+            <div class="text-left">
+                <button class="btn-primary v-spacing-top-1">Compare</button>
+            </div>
+        </form>
+        <div class="v-spacing-top-5">
+            {% if diff %}
+                {{diff|safe}}
             {% endif %}
-            <a href="{% url "wiki-page" page.name %}?version={{version.id}}">version {{version.id}}</a> ({{version.created|timesince}} ago)</li>
-    {% endfor %}
-    </ul>
-    <input type="submit" value="Compare" />
-</form>
-
-{% if diff %}
-{{diff|safe}}
-{% endif %}
-
+        </div>
+    </div>
 {% endblock %}
diff --git a/templates/wiki/page.html b/templates/wiki/page.html
index 6e71d6ba5..46f1990c2 100644
--- a/templates/wiki/page.html
+++ b/templates/wiki/page.html
@@ -1,22 +1,23 @@
-{% extends "wiki/_section.html" %}
-
+{% extends "simple_page.html" %}
 {% load markup_freesound %}
+{% load bw_templatetags %}
 
-{% block title %}help - {{content.title}}{% endblock %}
-
-{% block head %}
-{{ block.super }}
-		<link rel="stylesheet" type="text/css" href="{{media_url}}css/code.css" />
-{% endblock %}
-
-{% block section_content %}
-    {% if content.title == "Frequently Asked Questions" %}
-        {% comment %}When showing the "Frequently Asked Questions", we load the geotag picker help tool code
-        so that it is corresctly displayed when showGeotagPickerHelpTool() is run. We can't place this code in the
-        wiki page content as script tag would be stripped.{% endcomment %}
-        {% include 'geotags/geotag_picker_help_tool.html' %}
-    {% endif %}
-    {{content.body|markdown:"wikilinks,codehilite,markdown.extensions.toc"}}
-    {% if perms.wiki.change_page %}<div id="wiki-edit"><a href="{% url "wiki-page-edit" name %}"><p>edit this page</p></a><br></div>{% endif %}
+{% block title %}Help - {{content.title}}{% endblock %}
+{% block page-title-custom %}{% endblock %}{% comment %}No page title in wiki pages as is part of page content{% endcomment %}
 
+{% block page-content %}
+    <div class="bw-wiki">
+        {% if content.title == "Frequently Asked Questions" %}
+            {% comment %}When showing the "Frequently Asked Questions", we load the geotag picker help tool code
+            so that it is corresctly displayed when showGeotagPickerHelpTool() is run. We can't place this code in the
+            wiki page content as script tag would be stripped.{% endcomment %}
+            {% bw_maps_js_scripts %}
+        {% endif %}
+        {{ content.body|markdown_wiki }}
+        {% if perms.wiki.change_page %}
+        <div class="v-spacing-top-5 text-right">
+            <a class="btn-primary no-hover" href="{% url "wiki-page-edit" name %}">Edit this page</a>
+        </div>
+        {% endif %}
+    </div>
 {% endblock %}
diff --git a/templates_bw/404.html b/templates_bw/404.html
deleted file mode 100644
index 6bbd6db72..000000000
--- a/templates_bw/404.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}Page not found{% endblock %}
-{% block page-title %}Page not found{% endblock %}
-
-{% block page-content %}
-    <p>It seems that either we've pointed you in the wrong direction or misplaced something <b>-or-</b>
-        that you've requested a page that doesn't exist. Either way, you've reached a dead end.
-    <p>We recommend you click the browser's back button and curse at the screen for a minute. Then listen to some of Freesound's
-        soothing soundscapes. That'll make you feel better.
-{% endblock %}
diff --git a/templates_bw/429.html b/templates_bw/429.html
deleted file mode 100644
index e959c30b9..000000000
--- a/templates_bw/429.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}Not so fast, cowboy{% endblock %}
-{% block page-title %}Not so fast, cowboy{% endblock %}
-
-{% block page-content %}
-    <p>It seems that either we've pointed you in the wrong direction or that you're trying to access a page
-        and our server refuse to respond. Maybe you're trying to navigate Freesound too fast?</p>
-    <p>Please take your time with each page, make sure you listen to all of the nice sounds before moving
-        to the next :)</p>
-{% endblock %}
diff --git a/templates_bw/500.html b/templates_bw/500.html
deleted file mode 100644
index 141e7d862..000000000
--- a/templates_bw/500.html
+++ /dev/null
@@ -1,98 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=575, initial-scale=1">
-    <meta name="theme-color" content="#000000">
-    <title>Server Error</title>
-    <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?">
-    <meta name="keywords" content="free, sound">
-    <link id="style" rel="stylesheet" href="/static/bw-frontend/dist/index.css" data-forced-theme="yes">
-</head>
-<body>
-    <noscript>
-        You need to enable JavaScript to run this app.
-    </noscript>
-    
-    <div class="bw-page">
-        
-        <nav class="bw-nav bw-nav--expanded">
-            <div class="container bw-nav__container">
-                <form method="get" action="/search/">
-                    <div class="bw-nav__logo-search-container">
-                        <div class="bw-nav__logo-with-text">
-                            <a href="/" class="no-hover"></a>
-                        </div>
-                        <div class="input-wrapper">
-                            <input name="q" type="search" class="bw-nav__search" placeholder="Search sounds..." autocomplete="off" />
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </nav>
-        
-        <div class="container">
-            <div class="navbar-space-filler v-spacing-7 v-spacing-top-5">
-                <div class="no-paddings col-12 v-spacing-3">
-                    <h1>Server Error</h1>
-                </div>
-                <div class="col-12 no-paddings v-spacing-5">
-                    <p>Ouch.. we screwed something up! You found some part of Freesound that's broken.</p>
-                    <p>Luckily, we'll get an email about it and we'll try to fix it as soon as possible. In the
-                        meantime, try some other parts of website we haven't managed to break yet.</p>
-                        <p class="text-light-grey v-spacing-top-6 divider-light padding-top-2">Django is sad... sorry about that! (nginx 500 internal server error)</p>
-                    </div>
-                </div>
-            </div>
-            
-            <footer class="bw-footer padding-7 v-spacing-top-7">
-                <div class="center">
-                    <div class="footer-logo-container">
-                        <div class="row">
-                            <div class="col-sm-8">
-                                <a href="https://www.upf.edu/web/mtg" class="no-hover">
-                                    <img class="w-100" src="/static/bw-frontend/dist/upf_logo.png" />
-                                </a>
-                            </div>
-                            <div class="col-sm-4">
-                                <a href="https://www.upf.edu/web/phonos/" class="no-hover">
-                                    <img class="w-100" src="/static/bw-frontend/dist/phonos_logo.png" />
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="row v-spacing-top-4 center">
-                    <a class="bw-link--grey h-spacing-1" href="/help/about/">About Freesound</a>
-                    <a class="bw-link--grey h-spacing-1" href="/help/tos_web/">Terms of use</a>
-                    <a class="bw-link--grey h-spacing-1" href="/help/privacy/">Privacy</a>
-                    <a class="bw-link--grey h-spacing-1" href="/help/cookies_policy/">Cookies</a>
-                    <a class="bw-link--grey h-spacing-1" href="/help/developers/">Developers</a>
-                    <a class="bw-link--grey h-spacing-1" href="/help/faq/">Help</a>
-                    <a class="bw-link--grey h-spacing-1" href="/donations/donors/">Donations</a>
-                    <a class="bw-link--grey h-spacing-1" href="https://blog.freesound.org">Blog</a>
-                    <a class="bw-link--grey h-spacing-1" href="https://labs.freesound.org">Freesound Labs</a>
-                    <a class="bw-link--grey h-spacing-1" href="/help/tshirt/">Get your t-shirt!</a>
-                </div>
-                <div class="center v-spacing-top-4">
-                    <span>© 2023</span>
-                </div>
-                <div class="center">
-                    <span>Freesound</span>
-                </div>
-                
-            </footer>
-            
-            <script>
-                const siteWidth = 580;  // Minimum expected width. If screen is smaller, scale website.
-                const scale = window.innerWidth / siteWidth;
-                if (scale < 1){
-                    document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + siteWidth + ', initial-scale=' + scale);
-                }
-                const userIsAuthenticated = false;
-            </script>
-            <script src="/static/bw-frontend/dist/index.js"></script>
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/templates_bw/accounts/account.html b/templates_bw/accounts/account.html
deleted file mode 100644
index b51c8f52f..000000000
--- a/templates_bw/accounts/account.html
+++ /dev/null
@@ -1,206 +0,0 @@
-{% extends "base.html" %}
-
-{% load display_sound %}
-{% load display_pack %}
-{% load static %}
-{% load filter_img %}
-{% load bw_templatetags %}
-{% load tags %}
-{% load util %}
-{% load cache %}
-
-{% block title %}{{ user.username }}{% endblock %}
-
-{% block content %}
-    <div class="container">
-        <div class="row navbar-space-filler v-spacing-top-6 v-spacing-2 bw-profile__hero">
-            <div>
-                {% bw_user_avatar user.profile.locations.avatar.XL.url user.username 100 %}
-            </div>
-            <div class="bw-profile__username v-spacing-top-2 {% if user.profile.is_anonymized_user %}v-spacing-3{% endif %}">
-                <h1>{{ user.username }}</h1>
-            </div>
-            {% if not user.profile.is_anonymized_user %}
-            <div class="v-spacing-top-4 v-spacing-4 middle padding-left-2 padding-right-2">
-                {% if home %}
-                    {% if user.profile.num_sounds %}    
-                    <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'accounts-manage-sounds' 'published' %}">Manage sounds</a>
-                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt"  data-toggle="modal-default" data-modal-content-url="{% url "comments-for-user" user.username %}?ajax=1" data-modal-activation-param="comments" href="javascript:void(0);" title="See all comments on your sounds">Comments</a>
-                    {% else %}
-                    <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'accounts-upload' %}">Upload a sound</a>
-                    {% endif %}
-                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt" href="{% url 'accounts-edit' %}">Account settings</a>
-                {% else %}
-                    {% if show_unfollow_button %}
-                        <a class="no-hover text-center btn-secondary" href="{% url 'unfollow-user' user.username %}?next={{ next_path }}">Unfollow</a>
-                    {% else %}
-                        <a class="no-hover text-center btn-inverse btn-profile-adapt" href="{% url 'follow-user' user.username %}?next={{ next_path }}">Follow</a>
-                    {% endif %}
-                    <a class="no-hover text-center btn-inverse h-spacing-left-2 btn-profile-adapt" href="{% url "messages-new" user.username %}">Message</a>
-                {% endif %}
-                {% if perms.tickets.can_moderate or request.user.is_staff %}
-                    <div class="dropdown display-inline-block">
-                        <a class="no-hover dropdown-toggle" id="mod-actions-menu"
-                           data-toggle="dropdown"><button class="btn-inverse h-spacing-left-2 btn-profile-adapt">Mod actions</button></a>
-                        <ul class="dropdown-menu" aria-labelledby="mod-actions-menu">
-                            {% if user.profile.is_whitelisted %}
-                                <li class="bw-nav__action dropdown-item text-light-grey">
-                                    This user is whitelisted
-                                </li>
-                            {% else %}
-                                <li class="bw-nav__action dropdown-item text-light-grey">
-                                    <a class="bw-link--black" href="{% url 'tickets-whitelist-user' user.id %}?next={{ next_path }}">
-                                        Whitelist this user
-                                    </a>
-                                </li>
-                            {% endif %}
-                            <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="user-annotations-modal" data-modal-content-url="{% url "tickets-user-annotations" user.id %}?ajax=1" data-modal-activation-param="mod_annotations" href="javascript:void(0);">
-                                    Moderation annotations (<span class="annotation-counter-{{ user.id }}">{{ num_mod_annotations }}</span>)
-                                </a>
-                            </li>
-                            <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "tickets-user-pending_sounds" user.username %}?ajax=1" data-modal-activation-param="pending_moderation" href="javascript:void(0);">
-                                    Sounds pending moderation ({{ num_sounds_pending }})
-                                </a>
-                            </li>
-                            {% if not user_downloads_public %}
-                            <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);">
-                                    See downloaded sounds ({{ user.profile.num_sound_downloads }})
-                                </a>
-                            </li>
-                            <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);">
-                                    See downloaded packs ({{ user.profile.num_pack_downloads }})
-                                </a>
-                            </li>
-                            {% endif %}
-                            <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" href="{% url "forums-search" %}?f=post_author:%22{{ user.username }}%22">
-                                    All forum posts ({{ user.profile.num_posts }})
-                                </a>
-                            </li>
-                            <li class="bw-nav__action dropdown-item">
-                                <a class="bw-link--black" data-toggle="modal-default" data-modal-content-url="{% url "comments-by-user" user.username %}?ajax=1" data-modal-activation-param="comments_by" href="javascript:void(0);" title="See all sound comments by {{ user.username }}">
-                                    All comments ({{ user.profile.num_comments }})
-                                </a>
-                            </li>
-                            {% if request.user.is_staff %}
-                                <li class="bw-nav__action dropdown-item">
-                                    <a class="bw-link--red" href="{% url "admin:auth_user_change" user.id %}">
-                                        Edit in admin
-                                    </a>
-                                </li>
-                            {% endif %}
-                        </ul>
-                    </div>
-                {% endif %}
-            </div>
-            {% if user.profile.about or user.profile.home_page %}
-            <div class="bw-profile__description v-spacing-3">
-                {% if user.profile.about and show_about %}
-                    {{ user.profile.about|replace_img|safe|linebreaks|strip_unnecessary_br }}
-                {% endif %}
-                {% if user.profile.home_page and user.profile.get_total_downloads > 0 %}
-                    <div class="{% if user.profile.about %}v-spacing-top-3{% endif %}">
-                        <a href="{{user.profile.home_page}}" rel="nofollow">{{user.profile.home_page}}</a>
-                    </div>
-                {% endif %}
-            </div>
-            {% endif %}
-            <div class="v-spacing-2">
-                <div class="bw-profile__stats padding-left-4 padding-right-4">
-                    <div class="text-grey">Has been a user for {{user.date_joined|timesince}}</div>
-                    <div><a id="user-followers-button" data-modal-activation-param="followers" data-modal-content-url="{% url 'user-followers' user.username %}?ajax=1&page={{ followers_modal_page }}" href="javascript:void(0);">{% cache 43200 bw_user_profile_followers_count user.id %}{% with followers.count as followers_count %}{{ followers_count|bw_intcomma }} follower{{ followers_count|pluralize }}{% endwith %}{% endcache %}</a></div>
-                    <div><a id="user-following-users-button" data-modal-activation-param="following" data-modal-content-url="{% url 'user-following-users' user.username %}?ajax=1&page={{ following_modal_page }}" href="javascript:void(0);">{% cache 43200 bw_user_profile_following_count user.id %}{{ following.count }}{% endcache %} following</a></div>
-                    <div><a id="user-following-tags-button" data-modal-activation-param="followingTags" data-modal-content-url="{% url 'user-following-tags' user.username %}?ajax=1&page={{ following_tags_modal_page }}" href="javascript:void(0);">{% cache 43200 bw_user_profile_following_tags_count user.id %}{% with following_tags.count as following_tags_count %}{{ following_tags.count|bw_intcomma }} tag{{ following_tags_count|pluralize }} following{% endwith %}{% endcache %}</a></div>
-                </div>
-                {% if user_downloads_public %}
-                <div class="bw-profile__stats v-spacing-top-1 padding-left-4 padding-right-4">
-                    <div><a data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-sounds" user.username %}?ajax=1" data-modal-activation-param="downloaded_sounds" href="javascript:void(0);" >{{ user.profile.num_sound_downloads }} sound{{ user.profile.num_sound_downloads|pluralize}} downloaded</a></div>
-                    <div><a data-toggle="modal-default" data-modal-content-url="{% url "user-downloaded-packs" user.username %}?ajax=1" data-modal-activation-param="downloaded_packs" href="javascript:void(0);" >{{ user.profile.num_pack_downloads }} pack{{ user.profile.num_pack_downloads|pluralize}} downloaded</a></div>
-                </div>
-            </div>
-            {% endif %}
-            {% endif %}
-        </div>
-        <div class="divider-light"></div>
-        <div class="row bw-profile__taps_nav">
-            <ol>
-                <li class="active" data-toggle="tap" data-target="#sounds">Latest sounds</li>
-                <li data-toggle="tap" data-target="#packs">Latest packs</li>
-                {% comment %}<li data-toggle="tap" data-target="#tapDownloaded">Downloads</li>{% endcomment %}
-            </ol>
-        </div>
-        <div class="divider-light"></div>
-        <div class="row">
-            <div class="col-md-8 v-spacing-top-4">
-                <div class="bw-profile__tap_container bw-profile__tap_container__active" id="sounds">
-                    {% if latest_sounds %}
-                        <div class="row">
-                            {% for sound in latest_sounds %}
-                                <div class="col-6 col-lg-4">
-                                    {% display_sound_small sound %}
-                                </div>
-                            {% endfor %}
-                        </div>
-                        <div class="v-spacing-top-4 text-center">
-                            <a class="no-hover btn-primary" href="{{ user.profile.get_user_sounds_in_search_url }}">See all sounds by {{ user.username }}</a>
-                        </div>
-                    {% else %}
-                        <div class="text-center">
-                            <h5>No sounds... &#128543</h5>
-                            <div class="text-grey v-spacing-top-1">Looks like {{ user.username }} has not uploaded any sounds yet</div>
-                        </div>
-                    {% endif %}
-                </div>
-                <div class="bw-profile__tap_container" id="packs">
-                    <div class="async-section"
-                        data-async-section-content-url="{% url 'account-latest-packs-section' user.username %}?ajax=1">
-                        <img width="12px" height="12px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}">
-                    </div>
-                </div>
-                <div class="bw-profile__tap_container" id="tapDownloaded">
-                    downloaded
-                </div>
-            </div>
-            <aside class="col-md-4 col-extra-left-padding-middle-md bw-profile__sections">
-                <div class="divider-light v-spacing-top-6 v-spacing-5 d-md-none"></div>
-                <section class="bw-profile__section_stats v-spacing-top-4 async-section"
-                    data-async-section-content-url="{% url 'account-stats-section' user.username %}?ajax=1">
-                    <img width="12px" height="12px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}">
-                </section>
-                {% if last_geotags_serialized %}
-                <div class="divider-light"></div>
-                <section id="latest_geotags" class="v-spacing-top-4 v-spacing-4" data-map-loaded="false">
-                    <h5 class="padding-bottom-3">Latest geotags</h5>
-                    <div id="static_map_wrapper"  class="map sidebar-map w-100 middle center cursor-pointer" data-pins="{{ last_geotags_serialized }}"></div>
-                    <div id="map_canvas" class="map sidebar-map display-none w-100" data-geotags-url="{% url "geotags-for-user-latest-barray" user.username %}"></div>
-                    <div class="v-spacing-top-2 center">
-                        <a class="no-hover" href="{% url "geotags-for-user" user.username %}">See all geotags by {{ user.username }}</a>
-                    </div>
-                </section>
-                {% endif %}
-                {% cache 3600 bw_user_profile_tags user.id %}
-                {% with user.profile.get_user_tags as tags %}
-                {% if tags %}
-                <div class="divider-light"></div>
-                <section class="v-spacing-top-4 v-spacing-4">
-                    <h5 class="padding-bottom-3">Most used tags</h5>
-                    {% for tag in tags|add_sizes:"count:0.1:1.0" %}
-                        {% bw_tag tag.name 1 '' tag.browse_url tag.size %}
-                    {% endfor %}
-                </section>
-                {% endif %}
-                {% endwith%}
-                {% endcache %}
-            </aside>
-        </div>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-    {% bw_maps_js_scripts %}
-    <script src="{% static 'bw-frontend/dist/profile.js' %}"></script>
-{% endblock %}
diff --git a/templates_bw/accounts/activate.html b/templates_bw/accounts/activate.html
deleted file mode 100644
index fc3e59c77..000000000
--- a/templates_bw/accounts/activate.html
+++ /dev/null
@@ -1,19 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}User activation{% endblock %}
-{% block page-title %}{% if all_ok %}Activation succeeded{% else %}User activation{% endif %}{% endblock %}
-
-{% block page-content %}
-    {% if all_ok %}
-        <p class="text-grey v-spacing-3">Your account has been activated. You may go ahead and log in now.</p>
-        <button class="btn-primary" data-toggle="login-modal" data-target="#loginModal">Log in</button>
-    {% else %}
-        {% if user_does_not_exist %}
-            <p class="text-grey v-spacing-3">We're sorry but the user you are trying to activate does not exist anymore! Please register again...</p>
-            <button class="btn-secondary" data-toggle="registration-modal" data-target="#registerModal">Join</button>
-        {% endif %}
-        {% if decode_error %}
-            <p class="text-grey v-spacing-3">We're sorry but we can't find that activation key in the database. Try copy-pasting the link that we sent you instead of clicking it...</p>
-        {% endif %}
-    {% endif %}
-{% endblock %}
diff --git a/templates_bw/accounts/attribution.html b/templates_bw/accounts/attribution.html
deleted file mode 100644
index 1646a3118..000000000
--- a/templates_bw/accounts/attribution.html
+++ /dev/null
@@ -1,83 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load absurl %}
-{% load util %}
-
-{% block title %}Attribution{% endblock %}
-{% block page-title %}Attribution{% endblock %}
-
-{% block page-content %}
-<p>
-	This is the list of files you have downloaded. When you use freesound samples under the Attribution or Attribution NonCommercial license, you have to <a href="{% url "wiki-page" "faq" %}#how-do-i-creditattribute">credit the original creator of the sound</a> in your work. 
-    This list makes it easy to do so. "S" means sound, "P" means pack. 
-    There are 3 flavors of this list: <a href="?format=regular">regular</a>, <a href="?format=html">html</a> or <a href="?format=plaintext">plain text</a>.
-    Alternatively, you can download the <b>complete record of your downloaded sounds</b> in <a href="{% url "accounts-download-attribution" %}?dl=csv">csv</a> or <a href="{% url "accounts-download-attribution" %}?dl=txt">plain text</a> formats.
-</p><p>
-    
-</p>
-
-<div class="v-spacing-top-4 v-spacing-6">
-
-{% regroup page.object_list by created|date:"F jS, Y" as downloads %}
-
-{% ifequal format "regular" %}
-	{% for group in downloads %}
-		<h4 class="v-spacing-top-4">Downloaded on {{group.grouper}}</h4>
-		<ul>
-        {% for download_item in group.list %}
-            {% if download_item.download_type == 'sound' %}
-                <li>S: <a href="{% absurl 'sound' download_item.sound__user__username download_item.sound_id %}">{{download_item.sound__original_filename }}</a> by <a href="{% absurl 'account' download_item.sound__user__username  %}">{{download_item.sound__user__username }}</a> | <span class="text-grey">License: </span>{% if download_item.license__name %}{{ download_item.license__name|license_with_version:download_item.license__deed_url}}{% else %}{{ download_item.sound__license__name|license_with_version:download_item.sound__license__deed_url }}{% endif %}</li>
-            {% else %}
-                {% comment %}NOTE: in the line below, even though we're displaying information about a pack download, we use download_item.X where X takes the same names as in the line above when we were displaying
-                information about sound download. This is beacuse after doing the uninon of the two QuerySets (see accounts.views.attribution) the names of the columns are "unified" and taken from the main QuerySet{% endcomment %}
-                <li>P: <a href="{% absurl 'pack' download_item.sound__user__username download_item.sound_id %}">{{download_item.sound__original_filename}}</a> by <a href="{% absurl 'account' download_item.sound__user__username  %}">{{download_item.sound__user__username}}</a></li>
-            {% endif %}
-        {% endfor %}
-		</ul>
-	{% endfor %}
-{% endifequal %}
-
-{% ifequal format "html" %}
-<p>
-	{% for group in downloads %}
-		{% filter force_escape %}<h4>Downloaded on {{group.grouper}}</h4>{% endfilter %}<br />
-		{% filter force_escape %}<ul>{% endfilter %}<br />
-			{% for download_item in group.list %}
-				&nbsp;&nbsp;&nbsp;&nbsp;{% filter force_escape %}
-				{% if download_item.download_type == 'sound' %}
-                    <li>S: <a href="{% absurl 'sound' download_item.sound__user__username download_item.sound_id %}">{{download_item.sound__original_filename }}</a> by <a href="{% absurl 'account' download_item.sound__user__username  %}">{{download_item.sound__user__username }}</a> | License: {% if download_item.license__name %}{{ download_item.license__name|license_with_version:download_item.license__deed_url}}{% else %}{{ download_item.sound__license__name|license_with_version:download_item.sound__license__deed_url }}{% endif %}</li>
-				{% else %}
-                    {% comment %}NOTE: in the line below, even though we're displaying information about a pack download, we use download_item.X where X takes the same names as in the line above when we were displaying
-                    information about sound download. This is beacuse after doing the uninon of the two QuerySets (see accounts.views.attribution) the names of the columns are "unified" and taken from the main QuerySet{% endcomment %}
-                    <li>P: <a href="{% absurl 'pack' download_item.sound__user__username download_item.sound_id %}">{{download_item.sound__name}}</a> by <a href="{% absurl 'account' download_item.sound__user__username  %}">{{download_item.sound__user__username}}</a></li>
-				{% endif %}
-				{% endfilter %}<br />
-			{% endfor %}
-		{% filter force_escape %}</ul>{% endfilter %}<br />
-	{% endfor %}
-</p>
-{% endifequal %}
-
-{% ifequal format "plaintext" %}
-<p>
-	{% for group in downloads %}
-    Downloaded on {{group.grouper}}<br />
-    {% for download_item in group.list %}
-        &nbsp;&nbsp;&nbsp;&nbsp;
-        {% if download_item.download_type == 'sound' %}
-            S: {{download_item.sound__original_filename}} by {{download_item.sound__user__username}} -- {% absurl 'short-sound-link' download_item.sound_id %} -- License: {% if download_item.license__name %}{{ download_item.license__name|license_with_version:download_item.license__deed_url}}{% else %}{{ download_item.sound__license__name|license_with_version:download_item.sound__license__deed_url }}{% endif %}<br />
-        {% else %}
-            {% comment %}NOTE: in the line below, even though we're displaying information about a pack download, we use download_item.X where X takes the same names as in the line above when we were displaying
-            information about sound download. This is beacuse after doing the uninon of the two QuerySets (see accounts.views.attribution) the names of the columns are "unified" and taken from the main QuerySet{% endcomment %}
-            P: {{download_item.sound__name}} by {{download_item.sound__user__username}} -- {% absurl 'pack' download_item.sound__user__username download_item.sound_id %}<br/>
-        {% endif %}
-    {% endfor %}
-	{% endfor %}
-</p>
-{% endifequal %}
-
-</div>
-
-{% bw_paginator paginator page current_page request "download" %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/bulk_describe.html b/templates_bw/accounts/bulk_describe.html
deleted file mode 100644
index a37e78c16..000000000
--- a/templates_bw/accounts/bulk_describe.html
+++ /dev/null
@@ -1,210 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-
-{% block title %}Bulk description of sound files{% endblock %}
-{% block page-title %}Bulk description of sound files{% endblock %}
-
-{% block page-content %}
-{% if bulk.progress_type == 'N' %}
-    <h3 class="text-grey">Validating data file "{{ bulk.original_csv_filename }}" <img width="24px" height="24px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}"/></h3>
-    <p>
-        The uploaded data file has not yet been validated. If there are many sounds to be described, this process
-        could take a few minutes. This page will reload automatically when data validation has finished.
-    </p>
-
-    <form action="." method="POST" class="v-spacing-top-5 disable-on-submit">{% csrf_token %}
-        <div class="right">
-            <button class="btn-primary" name="delete">Delete this data file and upload a new one</button>
-        </div>
-    </form>
-
-{% elif bulk.progress_type == 'V' %}
-    <h3 class="text-grey">Validation results of the data file "{{ bulk.original_csv_filename }}"</h3>
-
-    {% if global_errors %}
-        <p>We have encountered some <b>major issues</b> when validating your data file:</p>
-        <ul>
-        {% for error in global_errors %}
-            <li class="text-red">{{ error|safe }}</li>
-        {% endfor %}
-         </ul>
-        <p>Please make sure you are following <a href="{% url 'wiki-page' 'faq' %}#csv-file-instructions">these guidelines</a> to create your data file.</p>
-    {% endif %}
-
-    {% if lines_failed_validation and not global_errors %}
-        <p>
-            The following <b>{{ lines_failed_validation|length|bw_intcomma }} sound{{ lines_failed_validation|pluralize }}
-            ha{{ lines_failed_validation|pluralize:"s,ve" }} failed validation</b> and won't be added
-            to Freesound. Move your mouse over the red cells to see the errors:
-        </p>
-        <table class="csv-validation-table">
-        <thead>
-            <tr><th>Line</th><th>Filename</th><th>Name</th><th>Tags</th><th>Geotag</th><th>Description</th><th>License</th><th>Pack</th><th>Explicit</th></tr>
-        </thead>
-        <tbody>
-            {% for line in lines_failed_validation %}
-
-                <tr>
-                    <td {% if line.line_errors.columns %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
-                        {{ line.line_no }}
-                        <span class="tooltiptext">{{ line.line_errors.columns }}</span>
-                    </td>
-                    <td {% if line.line_errors.audio_filename %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
-                        {{ line.line_original.audio_filename }}
-                        <span class="tooltiptext">{{ line.line_errors.audio_filename }}</span>
-                    </td>
-                    <td {% if line.line_errors.name %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
-                        {{ line.line_original.name }}
-                        <span class="tooltiptext">{{ line.line_errors.name }}</span>
-                    </td>
-                    <td {% if line.line_errors.tags %}class="csv-bulk-upload-error-cell cell_tooltip_right"{% endif %}>
-                        {{ line.line_original.tags }}
-                        <span class="tooltiptext">{{ line.line_errors.tags  }}</span>
-                    </td>
-                    <td {% if line.line_errors.geotag %}class="csv-bulk-upload-error-cell cell_tooltip_right csv-validation-table-geotag-td"{% endif %}>
-                        {{ line.line_original.geotag }}
-                        <span class="tooltiptext">{{ line.line_errors.geotag  }}</span>
-                    </td>
-                    <td {% if line.line_errors.description %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
-                        {{ line.line_original.description|truncatewords:20 }}
-                        <span class="tooltiptext">{{ line.line_errors.description  }}</span>
-                    </td>
-                    <td {% if line.line_errors.license %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
-                        {{ line.line_original.license }}
-                        <span class="tooltiptext">{{ line.line_errors.license  }}</span>
-                    </td>
-                    <td {% if line.line_errors.pack_name %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
-                        {{ line.line_original.pack_name }}
-                        <span class="tooltiptext">{{ line.line_errors.pack_name  }}</span>
-                    </td>
-                    <td {% if line.line_errors.is_explicit %}class="csv-bulk-upload-error-cell cell_tooltip_left"{% endif %}>
-                        {{ line.line_original.is_explicit }}
-                        <span class="tooltiptext">{{ line.line_errors.is_explicit  }}</span>
-                    </td>
-                </tr>
-            {% endfor %}
-        </tbody>
-        </table>
-    {% endif %}
-
-    {% if lines_validated_ok and not global_errors %}
-        <p><br>
-            The following <b>{{ lines_validated_ok|length|bw_intcomma }} sound{{ lines_validated_ok|length|pluralize }}
-            ha{{ lines_validated_ok|pluralize:"s,ve" }} validated correctly</b> and will be added to
-            Freesound with the following <i>cleaned</i> metadata:
-        </p>
-        <table class="csv-validation-table">
-        <thead>
-            <tr><th>Line</th><th>Filename</th><th>Name</th><th>Tags</th><th>Geotag</th><th>Description</th><th>License</th><th>Pack</th><th>Explicit</th></tr>
-        </thead>
-        <tbody>
-            {% for line in lines_validated_ok %}
-                <tr>
-                    <td>{{ line.line_no }}</td>
-                    <td>{{ line.line_cleaned.audio_filename }}</td>
-                    <td>{{ line.line_cleaned.name }}</td>
-                    <td>{{ line.line_cleaned.tags|join:" " }}</td>
-                    <td class="csv-validation-table-geotag-td">{% if line.line_cleaned.zoom %}{{ line.line_cleaned.lat }}, {{ line.line_cleaned.lon }}, {{ line.line_cleaned.zoom }}{% endif %}</td>
-                    <td>{{ line.line_cleaned.description|striptags|safe|truncatewords:20 }}</td>
-                    <td>{{ line.line_cleaned.license }}</td>
-                    <td>{{ line.line_cleaned.pack_name }}</td>
-                    <td>{{ line.line_cleaned.is_explicit|yesno:"Yes,No" }}</td>
-                </tr>
-            {% endfor %}
-        </tbody>
-        </table>
-    {% endif %}
-
-    <form action="." method="POST" class="v-spacing-top-5 disable-on-submit">{% csrf_token %}
-        <div class="between">
-            <button class="btn-secondary" name="delete">Delete this data file and upload a new one</button>
-            <button class="btn-primary" name="start" {% if not lines_validated_ok|length %}disabled{% endif %}>Continue and add the {{ lines_validated_ok|length|bw_intcomma }} valid sound{{ lines_validated_ok|length|pluralize }} to Freesound</button>
-        </div>
-    </form>
-
-{% elif bulk.progress_type == 'S' or bulk.progress_type == 'F' or bulk.progress_type == 'C' %}
-    {% if bulk.progress_type == 'S' or bulk.progress_type == 'F' %}
-        {% if progress_info.progress_percentage < 100 %}
-            <h3 class="text-grey">Your sounds are being described and processed <img width="24px" height="24px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}"/></h3>
-            <p>
-                Your {{ lines_validated_ok|length|bw_intcomma }} sound{{ lines_validated_ok|length|pluralize }} for this bulk
-                description process {{ lines_validated_ok|pluralize:"is,are" }} being described and processed. This is
-                the current status of the process:
-            </p>
-            <script>setTimeout(function(){ window.location.reload(1); }, 3500);</script>
-
-        {% else %}
-            <h3 class="text-grey">The bulk description process has finished!</h3>
-            <p>
-                Your {{ lines_validated_ok|length|bw_intcomma }} sound{{ lines_validated_ok|length|pluralize }} for this bulk
-                description process {{ lines_validated_ok|pluralize:"has,have" }} been described and processed. Here
-                are the results of the process:
-            </p>
-
-        {% endif %}
-    {% elif bulk.progress_type == 'C' %}
-        <h3 class="text-grey">This bulk description process is closed</h3>
-        <p>
-            The bulk description of sounds has been finished and the process closed. Here are the results of the
-            process:
-        </p>
-    {% endif %}
-    <div class="csv-bulk-upload-progress-label font-weight-700 {% if progress_info.progress_percentage == 100 %}text-green{% else %}text-blue{% endif %}">{{ progress_info.progress_percentage }}% completed {% if progress_info.progress_percentage == 100 %}{% bw_icon 'check' %}{% endif %}</div>
-    <ul>
-        {% if progress_info.n_sounds_described_ok %}
-            <li>Successfully described: {{ progress_info.n_sounds_described_ok }}</li>
-            <ul>
-            {% if progress_info.n_sounds_described_ok %}
-                {% if progress_info.n_sounds_published %}<li>Published: {{ progress_info.n_sounds_published }}</li>{% endif %}
-                {% if progress_info.n_sounds_moderation %}<li>In moderation: {{ progress_info.n_sounds_moderation }}</li>{% endif %}
-                {% if progress_info.n_sounds_currently_processing %}<li>Currently processing: {{ progress_info.n_sounds_currently_processing }}</li>{% endif %}
-                {% if progress_info.n_sounds_pending_processing %} <li>Pending processing: {{ progress_info.n_sounds_pending_processing }}</li>{% endif %}
-                {% if progress_info.n_sounds_failed_processing %}<li>Failed processing: {{ progress_info.n_sounds_failed_processing }}</li>{% endif %}
-                {% if progress_info.n_sounds_unknown %}<li>Deleted sounds: {{ progress_info.n_sounds_unknown }}</li>{% endif %}
-            {% endif %}
-            </ul>
-        {% endif %}
-        {% if progress_info.n_sounds_error %}
-            <li>Failed description: {{ progress_info.n_sounds_error }}</li>
-            <ul>
-            {% if progress_info.n_sounds_error %}
-                {% for line_no, error in progress_info.sound_errors %}
-                    <li class="text-red">{{ error }}</li>
-                {% endfor %}
-            {% endif %}
-            </ul>
-        {% endif %}
-        {% if progress_info.n_sounds_remaining_to_describe %}
-            <li>Remaining to be described: {{ progress_info.n_sounds_remaining_to_describe }}</li>
-        {% endif %}
-    </ul>
-    {% if bulk.progress_type == 'S' or bulk.progress_type == 'F' %}
-        {% if progress_info.progress_percentage < 100 %}
-            <br>
-            <p><b>NOTE:</b> You can safely leave this page and come back at a later time. You'll find a link
-            to this page in your <a href="{% url 'accounts-manage-sounds' 'pending_description' %}">manage sounds page</a>.</p>
-        {% endif %}
-    {% endif %}
-    {% if bulk.progress_type != 'C' and progress_info.progress_percentage == 100 %}
-        {% comment %}If the process has finished, give the option to close it{% endcomment %}
-        <p>
-            Click on the button below to <b>close this bulk description process</b> and stop listing it in your <a href="{% url 'accounts-manage-sounds' 'pending_description' %}">manage sounds page</a>.
-        </p>
-
-        <form action="." method="POST" class="v-spacing-top-5 disable-on-submit">{% csrf_token %}
-            <div class="right">
-                <button class="btn-primary" name="close">Close this process</button>
-            </div>
-        </form>
-    {% endif %}
-{% endif %}
-
-{% if auto_reload_page %}
-<div id="should-auto-reload" class="display-none"></div>
-{% endif %}
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/bulkDescribe.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/choose_new_license.html b/templates_bw/accounts/choose_new_license.html
deleted file mode 100644
index 4cfd37eec..000000000
--- a/templates_bw/accounts/choose_new_license.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% extends "simple_page.html" %}
-{% load display_license_form %}
-{% block page-title %}Bulk License Change{% endblock %}
-{% block title %}Bulk License Change{% endblock %}
-
-{% block page-content %}
-
-<div>
-    <p>Hi! It looks like you have not signed up for a very long time and you have sounds with very old Creative Commons licenses. We need you to pick a new license for your uploads!
-
-    <p>For a while our friends at <a href="https://creativecommons.org/">Creative Commons</a> have been telling us that the <a href="https://creativecommons.org/licenses/sampling+/1.0/">Sampling+ license</a> used <i>before 2011</i> in Freesound is not a good license, and especially for sounds. The reasons are all quite technical legal arguments, but we agree with the Creative Commons guys and we are helping to rid the world of this license.</p>
-
-    <p>We now only support 3 licenses and would like for you to select one of these for your old uploads before you continue. This might sound dramatic, but it isn't really. The terminology used in these new licenses is much clearer and there are fewer grey areas. It's better for you, for us, and downloaders of your sounds.</p>
-
-    <p><b>Please note:</b> you will be able to change the license of any of your sounds whenever you want on the individual sounds' edit pages.</p>
-    <form action="." method="post" class="v-spacing-top-5 v-spacing-4">{% csrf_token %}
-        {% display_license_form form %}
-        <button class="btn-primary v-spacing-top-4">Update licenses and continue using Freesound</button>
-    </form>
-    <p><b>Remember:</b> no matter what license, you are always free to give people exceptions, or license your work elsewhere under another license. If you select the strictest license, people will need to go through the motions of asking you permission to use their work for certain things, and this might be troublesome.</p>
-
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/delete.html b/templates_bw/accounts/delete.html
deleted file mode 100644
index 316a432ab..000000000
--- a/templates_bw/accounts/delete.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{% extends "accounts/account_settings_base.html" %}
-
-{% block title %}Delete account{% endblock title %}
-
-{% block main_content %}
-
-    <h1>Delete account</h1>
-
-    <div class="v-spacing-top-4 w-100 v-spacing-5">
-        <p class="font-weight-bold text-center v-spacing-4">Warning: You can not be “undeleted”, not even by administrators.</p>
-        <p class="v-spacing-2 text-grey">
-            Before deleting your account, please <a href="/help/faq/#how-do-i-delete-myself-from-your-site" target="_blank">read this page</a> to be
-            fully aware of what happens with your data. If you are entirely sure you want to delete your account, please choose one of the following options
-            and confirm your password:
-        </p>
-        <form method="post" class="bw-form w-100 disable-on-submit">{% csrf_token %}
-            <div class="bw-multiple-radio">
-                {{delete_form}}
-            </div>
-            <button class="btn-primary w-100 v-spacing-top-5">Delete account</button>
-        </form>
-    </div>
-
-{% endblock %}
diff --git a/templates_bw/accounts/describe_license.html b/templates_bw/accounts/describe_license.html
deleted file mode 100644
index 2306b4c52..000000000
--- a/templates_bw/accounts/describe_license.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load display_license_form %}
-
-{% block title %}Describe sound files - pick a license{% endblock %}
-{% block page-title %}Describe sound files{% endblock %}
-
-{% block page-content %}
-<h2 class="text-grey">Pick a license</h2>
-<div class="v-spacing-5 v-spacing-top-2">This license will be applied to the {{ num_files|bw_intcomma }} sound file{{ num_files|pluralize }} you've selected for description, but don't worry, you can change individual sound licenses later.</div>
-<div class="col-lg-8 offset-lg-2">
-<form action="." method="post" class="license-form">{% csrf_token %}
-    {% include "molecules/license_form_field.html" %}
-    <button type="submit" class="btn-primary v-spacing-top-5 w-100 center">Save and continue with description</button>
-</form>
-</div>
-{% endblock %}
diff --git a/templates_bw/accounts/describe_pack.html b/templates_bw/accounts/describe_pack.html
deleted file mode 100644
index c76ef71e4..000000000
--- a/templates_bw/accounts/describe_pack.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load static %}
-
-{% block title %}Describe sound files - pick a pack{% endblock %}
-{% block page-title %}Describe sound files{% endblock %}
-
-{% block page-content %}
-<h2 class="text-grey">Pick a pack</h2>
-<div class="v-spacing-5 v-spacing-top-2">If you would like to add all {{ num_files|bw_intcomma }} selected sound file{{ num_files|pluralize }} to a pack you can do so now.
-    Pick an existing pack or create a new one by specifying its name. If you don't want to add the sounds to any pack, you can leave this form empty. 
-    You can change individual sound's pack later on.</div>
-<div class="col-lg-8 offset-lg-2">
-<form action="." method="post" class="bw-form">{% csrf_token %}
-    {% include "molecules/pack_form_field.html" %}
-    <button type="submit" class="btn-primary v-spacing-top-6 w-100 center">Save and continue with description</button>
-</form>
-</div>
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/editDescribeSounds.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/edit.html b/templates_bw/accounts/edit.html
deleted file mode 100644
index 889769fc3..000000000
--- a/templates_bw/accounts/edit.html
+++ /dev/null
@@ -1,53 +0,0 @@
-{% extends "accounts/account_settings_base.html" %}
-
-{% load static %}
-{% load bw_templatetags %}
-
-{% block title %}Edit profile{% endblock %}
-
-{% block main_content %}
-    <h1>Edit profile</h1>
-    <div class="v-spacing-top-4 center">
-        {% if profile.has_avatar %}
-            <img id="imageProfile" class="avatar" style="width:100px;height:100px;" src="{{ profile.locations.avatar.XL.url }}" />
-        {% else %}
-            <img id="imageProfile" class="display-none avatar" style="width:100px;height:100px;" />
-            {% bw_user_avatar profile.locations.avatar.XL.url user.username 100 %}
-        {% endif %}
-    </div>
-    <div class="bw-edit-profile__username v-spacing-top-2 center">
-        <h2>{{ user.username }}</h2>
-    </div>
-    {% if uploads_enabled %}
-        <div class="center">
-            <div class="v-spacing-top-3">
-                {{ image_form.errors }}
-                {% comment %}The form below is used to set an avatar and submit the form right after setting the image{% endcomment %}
-                <form id="avatarImageForm" class="display-inline-block" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
-                    <label for="id_image-file" class="btn-inverse bw-edit-profile__label_file">Change avatar</label>
-                    <input type="file" id="id_image-file" name="image-file" class="bw-edit-profile__input_file" accept=".jpg,.png,.jpeg" />
-                </form>
-                {% comment %}The form below is used to delete the avatar with a single button click{% endcomment %}
-                <form  class="display-inline-block" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
-                    <input type="hidden" name="image-remove" value="1">
-                    <button class="btn-inverse h-spacing-left-2" {% if not profile.has_avatar %}disabled{% endif %}>Delete avatar</button>
-                </form>
-            </div>
-        </div>
-        {% if has_old_avatar %}
-            <div class="text-center text-grey v-spacing-top-2 center"><span class="text-red">Warning:&nbsp;</span> your avatar was uploaded with the previous version of Freesound. <br/>Please, re-upload the avatar to display it with optimal resolution.</span></div>
-        {% endif %}
-    {% else %}
-        <div class="text-center text-grey v-spacing-top-3 center"><span class="text-red">Warning:&nbsp;</span> avatar uploading is currently disabled. We'll enable it as soon as possible.</span></div>
-    {% endif %}
-    <div class="v-spacing-top-3 w-100 v-spacing-5">
-        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
-            {{profile_form.as_p}}
-            <button class="btn-primary w-100 v-spacing-top-5">Update profile</button>
-        </form>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/editProfile.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/edit_email_settings.html b/templates_bw/accounts/edit_email_settings.html
deleted file mode 100644
index 5e2ff40d6..000000000
--- a/templates_bw/accounts/edit_email_settings.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{% extends "accounts/account_settings_base.html" %}
-
-{% load static %}
-{% load filter_img %}
-{% load bw_templatetags %}
-{% load util %}
-
-{% block title %}Email notifications{% endblock %}
-
-{% block main_content %}
-
-    <h1>Email notifications</h1>
-
-    <div class="v-spacing-top-4 w-100 v-spacing-5">
-        <div class="text-grey">Send me an email when:</div>
-        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
-            <div class="bw-multiple-checkbox">
-                {{ form }}
-            </div>
-            <button class="btn-primary w-100 v-spacing-top-5">Update Email notifications</button>
-        </form>
-    </div>
-
-{% endblock %}
diff --git a/templates_bw/accounts/email_reset_complete.html b/templates_bw/accounts/email_reset_complete.html
deleted file mode 100644
index fba1ffcfd..000000000
--- a/templates_bw/accounts/email_reset_complete.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{% extends "accounts/account_settings_base.html" %}
-
-{% block title %}Email reset complete{% endblock %}
-
-{% block main_content %}
-
-    <h1>Email reset complete</h1>
-
-    <div class="text-grey v-spacing-top-6">
-        Your new email address has been changed from <span class="text-black">{{ old_email }}</span> to <span class="text-black">{{ user.email }}</span>.
-    </div>
-
-{% endblock %}
diff --git a/templates_bw/accounts/email_reset_done.html b/templates_bw/accounts/email_reset_done.html
deleted file mode 100644
index cddc1b877..000000000
--- a/templates_bw/accounts/email_reset_done.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% extends "accounts/account_settings_base.html" %}
-
-{% block title %}Email change email sent{% endblock %}
-
-{% block main_content %}
-
-    <h1>Email change email sent</h1>
-
-    <div class="text-grey v-spacing-top-6">
-        We've emailed you instructions for activating your new email address.
-        You should be receiving them shortly.
-        Note that if the newly introduced email address is already being used by another Freesound user, you will not
-        receive any instructions.
-    </div>
-
-{% endblock %}
diff --git a/templates_bw/accounts/email_reset_form.html b/templates_bw/accounts/email_reset_form.html
deleted file mode 100644
index 892fb767a..000000000
--- a/templates_bw/accounts/email_reset_form.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{% extends "accounts/account_settings_base.html" %}
-
-{% block title %}Change email{% endblock %}
-
-{% block main_content %}
-
-    <h1>Change email</h1>
-
-    <div class="text-grey v-spacing-top-4">
-        You're currently receiving emails at <span class="text-black">{{ user.email }}</span>.
-        Enter your new email address and your current password in the form below,
-        and we'll email instructions for the activation of the new address.
-    </div>
-
-    <div class="w-100 v-spacing-top-3 v-spacing-5">
-        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
-            {{form.as_p}}
-            <button class="btn-primary w-100 v-spacing-top-5">Change my email</button>
-        </form>
-    </div>
-
-{% endblock %}
diff --git a/templates_bw/accounts/flag_user.html b/templates_bw/accounts/flag_user.html
deleted file mode 100644
index c0712ccd3..000000000
--- a/templates_bw/accounts/flag_user.html
+++ /dev/null
@@ -1,17 +0,0 @@
-{% load static %}
-{% if no_show %}
-    <!-- do noting -->
-{% else %}
-    {% if user_sounds < 1 %}
-        <div>
-            <span class="text-light-grey" id="{{content_obj_id}}{{flag_type}}_link">
-            {% if flagged %}
-                Marked as spam/offensive
-            {% else %}
-                <a aria-label="Report spam/offensive" class="text-grey post-flag" data-content-obj-id="{{content_obj_id}}" data-flag-type="{{ flag_type }}" data-post-flag-url="{% url "flag-user" username %}" href="javascript:void(0)">{{ link_text }}</a>
-            {% endif %}
-            </span>
-            <span class="text-light-grey" id="{{content_obj_id}}{{flag_type}}_wheel"></span>
-        </div>
-    {% endif %}
-{% endif %}
diff --git a/templates_bw/accounts/gdpr_consent.html b/templates_bw/accounts/gdpr_consent.html
deleted file mode 100644
index d4b1616ba..000000000
--- a/templates_bw/accounts/gdpr_consent.html
+++ /dev/null
@@ -1,73 +0,0 @@
-{% extends "simple_page.html" %}
-{% block page-title %}Updates to our Privacy Policy{% endblock %}
-{% block title %}Updates to our Privacy Policy{% endblock %}
-
-{% block page-content %}
-
-<div>
-    <p>Hello dear Freesound user!</p>
-
-    <p>We have recently updated our terms of service and privacy policy and we need you to give us your consent 
-        before you can continue using Freesound. The updated terms of service and privacy policy are intented to <strong>
-        clarify your rights as users, the ways in which we process your data</strong> and, in general, to protect you and us against 
-        incorrect uses of the site. <strong>This update does not alter the Freesound philosophy in any way</strong>, 
-        it is just a necessary step that we need to make in order to better comply with regulations such as the GDPR.
-    </p>
-    <p>
-        Please, take some time to read our <a href="/help/tos_web/" target="_blank">terms of use</a> and
-        the <a href="/help/privacy/" target="_blank">privacy policy</a>. 
-        We prepared a brief summary of them which we include here:
-    </p>
-
-    <ul>
-        <li>Uploaded sounds are released under one of the CC licenses you choose.
-        Other content (metadata, tags, comments, etc...) is provided as CC-Zero.</li>
-        <li>Your activity in Freesound is public and can be seen by all users (except your private messages).</li>
-        <li>You are responsible for your posted content.</li>
-        <li>We (Freesound) keep your data confidential and apply security measures to keep this confidentiality.</li>
-        <li>We (Freesound) don’t warrant that all the data on the site is correct.
-            We are not liable for information not posted by us on this site.</li>
-        <li>We (Freesound) may remove accounts of users that do not comply with the terms of use or who do not
-            behave correctly (spam, offensive comments...).</li>
-        <li>We can use anonymized data collected from Freesound (sounds, statistics about sounds, tags, comments, downloads...)
-            for research purposes.</li>
-        <li>You agree to receive email notifications in accordance with your email preferences.</li>
-    </ul>
-
-    <p>
-        In addition to the update of terms of service and privacy policy, we also want to take this opportunity to <strong>upgrade current 
-        Creative Commons licenses from 3.0 to 4.0</strong>. The main difference between these two is that Creative Commons licenses 4.0 are
-        more user-friendly and more internationally robust, but the general terms are the same. More information can be found 
-        <a href="https://creativecommons.org/version4/" target="_blank">here</a>. The option to upgrade licenses is only offered to users
-        who have uploaded sounds with any of the affected licenses.
-    </p>
-    
-    <p>
-        Below you'll find a box that you have to check in order to accept the updated terms and license change, and be able to continue using
-        Freesound as usual. Thank you for your patience and understanding, we really appreciate the commitment
-        of the Freesound community!!!
-    </p>
-
-    <form action="" method="post" enctype="multipart/form-data" novalidate>
-        {% csrf_token %}
-        {% for hidden_field in form.hidden_fields %}
-            {{ hidden_field.errors }}
-            {{ hidden_field }}
-        {% endfor %}
-        {% with form.accepted_tos as tos %}
-            {{ tos.errors }}
-            <label for="{{ tos.id_for_label }}" class="bw-checkbox-label">{{ tos }} {{ tos.help_text|safe }}</label>
-        {% endwith %}
-        {% if has_sounds_with_old_cc_licenses %}
-        <br>
-        {% with form.accepted_license_change as alc %}
-            {{ alc.errors }}
-            <label for="{{ alc.id_for_label }}" class="bw-checkbox-label">{{ alc }} {{ alc.help_text|safe }}</label>
-        {% endwith %}
-        {% endif %}
-    <br><br>
-        <button class="btn-primary">Continue using Freesound!</button>
-    </form>
-</div>
-    
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/multi_email_cleanup.html b/templates_bw/accounts/multi_email_cleanup.html
deleted file mode 100644
index 83247c00e..000000000
--- a/templates_bw/accounts/multi_email_cleanup.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}Your email address should be updated{% endblock %}
-{% block page-title %}Your email address should be updated{% endblock %}
-
-
-{% block page-content %}
-
-    <p>Dear <b>{{ request.user.username }}</b>, we recently introduced a new policy in Freesound which does not allow
-        different user accounts to share a single email address. Only a few users are affected by this change, and you
-        happen to be one of them. But don't worry, the fix is easy ;)</p>
-
-    <p>Your email address is <b>{{ same_user.orig_email }}</b>, and is used in the following accounts:<p>
-    <ul>
-        <li><a href="{% url 'account' same_user.main_user.username %}">{{ same_user.main_user }}</a>{% if request.user == same_user.main_user %} (you're currently logged in as this user){% endif %}</li>
-        <li><a href="{% url 'account' same_user.secondary_user.username %}">{{ same_user.secondary_user }}</a>{% if request.user == same_user.secondary_user %}{% endif %} (you're currently logged in as this user)</li>
-    </ul>
-
-    <p>To fix this issue, you should do ONE of the following:</p>
-    <ul>
-        <li>Change the email address of <b>{{ request.user.username }}</b>. You can use the <a href="{% url 'accounts-email-reset' %}">reset email form</a>.</li>
-        <li>Change the email address of <b>{% if request.user == same_user.main_user %}{{ same_user.secondary_user.username }}{% else %}{{ same_user.main_user.username }}{% endif %}</b>. To do that, log in as that user and then use the email reset reset form.</li>
-        <li>You can also send a <a href="{% url 'contact' %}">support request</a> telling us which email addresses you want to set for each account.</li>
-        <li>If you would prefer to delete one of the two accounts or merge them, please send us a <a href="{% url 'contact' %}">support request</a>.</li>
-    </ul>
-
-    <p>
-        If you take no action, this message will be shown again the next time you log in.
-    </p>
-
-    <div class="v-spacing-top-6">
-    <a href="{{ next }}" class="btn-primary">Do this later...</a>
-    </div>
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/accounts/recursive_file.html b/templates_bw/accounts/recursive_file.html
deleted file mode 100644
index 03b112055..000000000
--- a/templates_bw/accounts/recursive_file.html
+++ /dev/null
@@ -1,12 +0,0 @@
-{% load filefunctions %}
-{% comment %}The BW version of this template does not implement the "recursive" mode as we never use it in Freesound{% endcomment %}
-{% if file.children %}
-    <div class="row">
-    {% for child in file.children %}
-        <div class="col-sm-6">
-            <label for="{{child.id}}"><input class="bw-checkbox" type="checkbox" id="{{ child.id }}" name="{{ child.id }}">{{child.name}}</label>
-        </div>
-    {% endfor %}
-    </div>
-{% endif %}
-
diff --git a/templates_bw/accounts/upload.html b/templates_bw/accounts/upload.html
deleted file mode 100644
index dae6078bc..000000000
--- a/templates_bw/accounts/upload.html
+++ /dev/null
@@ -1,97 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load absurl %}
-{% load bw_templatetags %}
-{% block page-title %}Upload Sound Files{% endblock %}
-{% block title %}Upload Sound Files{% endblock %}
-
-{% block page-content %}
-
-<div class="bw-upload">
-    <div class="v-spacing-3">
-        <h4 class="text-light-grey">Please note before uploading...</h4>
-    </div>
-    <div class="row no-gutters v-spacing-4">
-        <div class="col-md-6 col-lg-3">
-            <div class="padding-right-2">
-                <h5>Legality</h5>
-                <p>Only upload sounds created or recorded <strong>by you</strong>. <a href="{% url "wiki-page" "faq" %}#sounds-4">More details...</a></p>
-            </div>
-        </div>
-        <div class="col-md-6 col-lg-3">
-            <div class="padding-right-2">
-                <h5>Sounds only</h5>
-                <p>Freesound is for <strong>sounds</strong> only. Self-created <strong>music fragments/samples/loops</strong> are also ok, but not complete songs or compositions.</p>
-            </div>
-        </div>
-        <div class="col-md-6 col-lg-3">
-            <div class="padding-right-2">
-                <h5>Moderation</h5>
-                <p>All files are <strong>moderated</strong>. If you upload illegal files or files that don't follow the <a href="{% url "wiki-page" "faq" %}#sounds">guidelines</a> they will be removed.</p>
-            </div>
-        </div>
-        <div class="col-md-6 col-lg-3">
-            <div class="padding-right-2">
-                <h5>Formats</h5>
-                <p>We prefer <strong>wav, aif and flac</strong>, but we support <strong>ogg</strong>, <strong>m4a</strong> and <strong>mp3</strong> too. For very large files please use some compressed format. Uploading more than 1GB at once might fail.</p>
-            </div>
-        </div>
-    </div>
-    <div class="row no-gutters v-spacing-4">
-        {% if uploads_enabled %}
-
-        <div class="col-md-6">
-            <form method="POST" enctype="multipart/form-data" class="html_upload_form" id="upload-form" data-max-file-size="{{ max_file_size }}" data-upload-url="{% url 'accounts-upload' %}">{% csrf_token %}
-                {{ form.as_p }}
-                
-                <div id="drag-tip">
-                    <h1 class="text-light-grey">Drag files here...</h1>
-                    <p>...or click on 'Add files' (valid file extensions: flac, wav, aif, aiff, m4a, ogg and mp3).</p>
-                </div>
-                <ul id="file-list" class="file-list"></ul>
-                <div class="progress-container h-spacing-2" id="progress-container"></div>
-                <div>
-                    {% if successes %}
-                    <p>
-                        <b>{{ successes|bw_intcomma }} file{{ successes|pluralize }} uploaded successfully!</b>
-                    </p>
-                    {% endif %}
-                    {% if errors %}
-                    <p>
-                        <b>There were errors uploading the files:</b>
-                        <ul>{% for file in errors %}<li>{{ file }}</li>{% endfor %}</ul>
-                    </p>
-                    {% endif %}
-                </div>
-                <div class="v-spacing-top-1">
-                    <input class="btn-secondary cursor-pointer" type="button" id="add-files-btn" value="+ Add files" />
-                    <input class="btn-primary cursor-pointer" type="submit" value="Upload" id="html_upload_button" />
-                    <input class="btn-inverse cursor-pointer" type="button" id="abort" value="Abort" />
-                </div>
-            </form>            
-            <div class="drop-area" id="drop-area"></div>
-        </div>
-        <div class="col-md-6 middle">
-            <div class="text-center">
-                <div class="text-grey v-spacing-4 h-padding-7">
-                    Once sounds are uploaded, you'll have to describe them before they can show up in the web site.
-                </div>
-                <div>
-                    <a class="btn-blue no-hover" href="{% url 'accounts-manage-sounds' 'pending_description' %}" title="Describe Your Sounds Link">Describe sounds</a>
-                </div>
-            </div>
-        </div>
-        {% else %}
-        <div class="v-spacing-3 v-spacing-top-6 w-100 text-center">
-            <h5>Uploads disabled... &#128543</h5>
-            <p class="text-grey v-spacing-2">We're deeply sorry but uploading and describing sounds is <b>temporarily disabled</b>.
-                We'll enable it again as soon as possible.</p>
-        </div>
-        {% endif %}
-    </div>
-</div>    
-{% endblock %}
-
-{% block extrabody %}
-<script src="{% static 'bw-frontend/dist/upload.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/api/edit_api_credential.html b/templates_bw/api/edit_api_credential.html
deleted file mode 100644
index cf34c8b59..000000000
--- a/templates_bw/api/edit_api_credential.html
+++ /dev/null
@@ -1,20 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load util %}
-
-{% block title %}Edit API credentials{% endblock %}
-{% block page-title %}Freesound API credentials{% endblock %}
-
-{% block page-content %}
-<div class="v-spacing-top-5">
-    <div class="offset-lg-2 col-lg-8">
-        <h5 class="v-spacing-4">Editing credentials "{{ client.name }}"</h5>
-        <div class="w-100">
-            <form action="" method="post" enctype="multipart/form-data" class="bw-form w-100 disable-on-submit" novalidate>{% csrf_token %}
-                {{ form.as_p }}
-                <button class="btn-primary v-spacing-top-5">Update credentials</button>
-            </form>
-        </div>
-    </div>
-</div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/api/monitor_api_credential.html b/templates_bw/api/monitor_api_credential.html
deleted file mode 100644
index 5a3d256fa..000000000
--- a/templates_bw/api/monitor_api_credential.html
+++ /dev/null
@@ -1,71 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load static %}
-{% load util %}
-
-{% block title %}Monitor API credentials{% endblock %}
-{% block page-title %}Freesound API credentials{% endblock %}
-
-{% block page-content %}
-<div class="v-spacing-top-5">
-    <h5 class="v-spacing-4">Number of daily API requests for credentials "{{ client.name }}"</h5>
-    <p>Show data from the last:
-        <select id="numDaysSelect" onchange="setNumDays();">
-            {% for option, label in n_days_options %}
-            <option value="{{ option }}" {% if option == n_days %}selected="selected"{% endif %}>{{ label }}</option>
-            {% endfor %}
-        </select>
-        <br>Acummulated number of requests in selected range: {{ total_in_range }}
-        <br>Acummulated number of requests above 5000 limit in selected range: {{ total_in_range_above_5000 }}
-        <br>Acummulated number of requests above 5000 limit in the previous year ({{ last_year }}): {{ total_previous_year_above_5000 }}
-    </p>
-    <div class='api-usage'></div>
-</div>
-
-{% endblock %}
-
-{% block extrabody %}
-<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>    
-<script src="{% static 'bw-frontend/dist/monitor.js' %}"></script>
-<script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script>
-<script src="https://d3js.org/d3-axis.v1.min.js"></script>
-<script src="https://d3js.org/d3-array.v1.min.js"></script>
-<script src="https://d3js.org/d3-collection.v1.min.js"></script>
-<script src="https://d3js.org/d3-color.v1.min.js"></script>
-<script src="https://d3js.org/d3-format.v1.min.js"></script>
-<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
-<script src="https://d3js.org/d3-time.v1.min.js"></script>
-<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
-<script src="https://d3js.org/d3-scale.v1.min.js"></script>
-<script src="https://d3js.org/d3-path.v1.min.js"></script>
-<script src="https://d3js.org/d3-shape.v1.min.js"></script>
-<script src="https://code.highcharts.com/highcharts.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/wordcloud2.js/1.0.2/wordcloud2.min.js"></script>
-<script>
-    var dayLimit = {{ limit }};
-    var data = {{ data|safe }};
-    var n_days = {{ n_days }};
-    
-    function setNumDays(){
-        var nDays = document.getElementById("numDaysSelect").value;
-        window.location.href = window.location.pathname + '?n_days=' + nDays;
-    }
-</script>
-
-<style type="text/css">
-    .axis path,.axis line {
-        fill: none;
-        stroke: #b6b6b6;
-        shape-rendering: crispEdges;
-    }
-    g.legend { 
-        font: 10px sans-serif;
-    }
-    .legend-item{  
-        cursor: pointer;
-    }
-    .api-usage{
-        min-height: 200px;
-    }
-</style>
-{% endblock %}
diff --git a/templates_bw/base.html b/templates_bw/base.html
deleted file mode 100644
index 0dc2777e5..000000000
--- a/templates_bw/base.html
+++ /dev/null
@@ -1,76 +0,0 @@
-{% load static %}
-{% load bw_templatetags %}
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=575, initial-scale=1">
-    <meta name="theme-color" content="#000000">
-    <title>Freesound - {% block title %}{% endblock %}</title>
-    <meta name="description" content="Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?">
-    <meta name="keywords" content="free, sound">
-    {% block extrahead %}
-    {% endblock %}
-    {% if request.user.profile.ui_theme_preference == 'l' %}
-    <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index.css' %}" data-forced-theme="yes">
-    {% elif request.user.profile.ui_theme_preference == 'd' %}
-    <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index-dark.css' %}" data-forced-theme="yes">
-    {% else %}
-      {% if system_prefers_dark_theme %}
-      <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index-dark.css' %}">
-      {% else %}
-      <link id="style" rel="stylesheet" href="{% static 'bw-frontend/dist/index.css' %}">
-      {% endif %}
-    {% endif %}
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    {% include 'accounts/modal_login.html' %}
-    {% include 'accounts/modal_login_problems.html' %}
-    {% include 'accounts/modal_registration_feedback.html' %}
-    {% include 'molecules/confirmation_modal.html' %}
-    <div id="genericModalWrapper"></div>
-    {% include 'molecules/toast.html' %}
-    <div class="notifications-wrapper"></div>
-    {% if messages %}
-        <div id="django-messages-content" class="display-none">
-            <ul>
-                {% for message in messages %}
-                    <li><span class="h-spacing-1">·</span>{{ message|safe }}</li>
-                {% endfor %}
-            </ul>
-        </div>
-    {% endif %}
-    <div class="bw-page" aria-hidden="false">
-    {% block navbar %}
-        {% comment %}This block can be overriden by pages that use a different navbar{% endcomment %}
-        {% include 'molecules/navbar.html' %}
-    {% endblock %}
-    {% block content %}
-    {% endblock %}
-    {% include 'molecules/footer.html' %}
-    </div>
-    {% bw_plausible_scripts %}
-    <script>
-        {% if request.user.is_authenticated %}
-        document.cookie = "preferSpectrogram={{request.user.profile.prefer_spectrograms|yesno}};path=/";
-        document.cookie = "disallowSimultaneousAudioPlayback={{request.user.profile.allow_simultaneous_playback|yesno:'no,yes'}};path=/"
-        {% else %}
-        document.cookie = "preferSpectrogram=no;path=/";
-        document.cookie = "disallowSimultaneousAudioPlayback=no;path=/"
-        {% endif %}
-        const siteWidth = 580;  // Minimum expected width. If screen is smaller, scale website.
-        const scale = window.innerWidth / siteWidth;
-        if (scale < 1){
-            document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=' + siteWidth + ', initial-scale=' + scale);
-        }
-        const userIsAuthenticated = {{ request.user.is_authenticated|yesno:'true,false' }};
-    </script>
-    <script src="{% static 'bw-frontend/dist/index.js' %}"></script>
-    {% block extrabody %}
-    {% endblock %}
-  </body>
-</html>
diff --git a/templates_bw/bookmarks/bookmarks.html b/templates_bw/bookmarks/bookmarks.html
deleted file mode 100644
index d6aa3a45b..000000000
--- a/templates_bw/bookmarks/bookmarks.html
+++ /dev/null
@@ -1,55 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-{% load display_sound %}
-{% load util %}
-
-{% block title %}{% if is_owner %}Bookmarks{% else %}Bookmarks by {{user.username}}{% endif %}{% endblock %}
-{% block page-title %}{% if is_owner %}Bookmarks{% else %}Bookmarks by <a href="{% url 'account' user.username %}">{{user.username}}</a>{% endif %}{% endblock %}
-
-{% block page-content %}
-    <div class="v-spacing-top-5">
-        <div class="row no-gutters">
-            <div class="col-lg-3 offset-lg-1 order-lg-last v-spacing-3">
-                <h4>Bookmark categories</h4>
-                <div class="v-spacing-top-3">
-                {% if bookmark_categories %}
-                    <ul class="list-style-type-none">
-                        <li><a href="{% url "bookmarks-for-user" user.username %}" {% if not category %}style="font-weight:bold"{% endif %} aria-label="Category: Uncategorized">Uncategorized</a> <span class="text-grey"> · {{n_uncat|bw_intcomma}} bookmark{{ n_uncat|pluralize }}</span></li>
-                        {% for cat in bookmark_categories %}
-                            <li><a href="{% url "bookmarks-for-user-for-category" user.username cat.id %}" {% if category.id == cat.id %}style="font-weight:bold"{% endif %} aria-label="Category: {{cat.name}}">{{cat.name}}</a> <span class="text-grey"> · {{cat.num_bookmarks|bw_intcomma}} bookmark{{ cat.num_bookmarks|pluralize }}</span>
-                            {% if is_owner %}
-                            <a class="cursor-pointer h-spacing-left-1" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to remove this bookmark category?" data-modal-confirmation-help-text="Note that all the bookmarks inside this category will also be removed" data-modal-confirmation-url="{% url "delete-bookmark-category" cat.id %}{% if cat.id != category.id %}?next={{request.path}}&page={{current_page}}{% endif %}" title="Remove bookmark category" aria-label="Remove bookmark category">{% bw_icon 'trash' %}</a>
-                            {% endif %}</li>
-                        {% endfor %}
-                    </ul>
-                {% else %}
-                    <div class="text-grey">
-                    {% if is_owner %}You haven't created any bookmark categories yet{% else %}<a href="{% url "account" user.username%}">{{user.username}}</a> hasn't created any bookmark categories yet{% endif %}
-                    </div>
-                {% endif %}
-                </div>
-            </div>
-            <div class="col-lg-8">
-                <h4><span class="text-light-grey">Category:</span> {% if category %}{{category.name}}{% else %}Uncategorized{% endif %} </h4>
-                <div class="v-spacing-top-3">
-                {% if page.object_list %}
-                    <div class="row">
-                        {% for bookmark in page.object_list %}
-                            <div class="col-6 col-md-4">
-                                {% display_sound_small bookmark.sound %}                     
-                                {% if is_owner %}
-                                    <div class="right v-spacing-4 v-spacing-top-negative-2"><a class="cursor-pointer bw-link--grey" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to remove this bookmark from '{{bookmark.category_name_or_uncategorized}}'?" data-modal-confirmation-url="{% url "delete-bookmark" bookmark.id %}?next={{request.path}}&page={{current_page}}" title="Remove from bookmarks" aria-label="Remove from bookmarks">{% bw_icon 'trash' %} Remove bookmark</a></div>
-                                {% endif %}
-                            </div>
-                        {% endfor %}
-                    </div>
-                {% else %}
-                    <div class="text-grey">There are no {% if not category %}uncategorized{% endif %} bookmarks {% if category %}in this category{% endif %} &#128543</div>
-                {% endif %}
-                {% bw_paginator paginator page current_page request "bookmark" %}
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/donations/donate.html b/templates_bw/donations/donate.html
deleted file mode 100644
index 61de6f6ba..000000000
--- a/templates_bw/donations/donate.html
+++ /dev/null
@@ -1,64 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-
-{% block title %}Donate{% endblock %}
-{% block page-title %}Donate{% endblock %}
-
-{% block page-content %}
-    <div class="bw-donate">
-        <h3 class="text-red">Why should I donate to Freesound?</h3>
-        <div class="row v-spacing-top-4">
-            <div class="col-md-4 v-spacing-2">
-                <b>{% bw_icon 'check' %}We are growing and need more resources</b>.
-                    Freesound was <a href="https://freesound.org/help/about/" target="_blank">started in 2005</a>
-                    at the <a href="https://www.upf.edu/web/mtg" target="_blank">Music Technology Group</a>
-                    and it has always been developed and maintained here.
-                    We need your donations in order to be able dedicate more resources to Freesound and not only
-                    maintain it but also make it better: add new features, improve existing ones, etc.
-            </div>
-            <div class="col-md-4 v-spacing-2">
-                <b>{% bw_icon 'check' %}We don't like ads</b>.
-                    Because of the nature of Freesound and the philosophy
-                    of openness, sharing and reuse that we promote, we think that
-                    the sustainability model that best fits our case
-                    is one based on user donations like Wikipedia.
-            </div>
-            <div class="col-md-4 v-spacing-2">
-                <b>{% bw_icon 'check' %}It doesn't take a large donation to help us</b>.
-                    There are many users who <a href="https://blog.freesound.org/?s=numbers" target="_blank">
-                    regularly download content from Freesound</a>.
-                    If many of us contribute, donating just a little bit will be enough to keep Freesound in good shape.
-                    Ah, and if you donate you'll appear in this glorious <a href="{% url 'donors' %}">list of Freesound donors</a>.
-            </div>
-        </div>
-        <div class="row v-spacing-top-2">
-            <div class="col-md-12">
-                In case you want to donate, please use the form below.
-                If you want more information about Freesound and its sustainability, check out this <a href="/forum/freesound-project/40188/">forum
-                thread</a>. <br>Thanks for supporting Freesound!
-            </div>
-        </div>
-        <div class="row v-spacing-top-4">
-            <div class="col-md-6 offset-md-3">
-                <form id="donation_form" class="bw-form" method="post" action="{% url 'donation-session-paypal' %}">{% csrf_token %}
-                    <ul class="errorlist v-spacing-3"></ul>
-                    {{ form }}
-                    <button id="donation_button_credit_card" class="btn-primary v-spacing-1 v-spacing-top-4 donation_button_stripe" data-stripe-key="{{ stripe_key }}" data-stripe-url="{% url 'donation-session-stripe' %}">Donate with credit card</button>
-                    <button id="donation_button_paypal" class="btn-blue v-spacing-5 donation_button_paypal">Donate with <i>PayPal</i></button>
-                </form>
-            </div>
-        </div>
-        <p>
-            <b>Note</b>: donations are managed through the <a href="https://www.upf.edu/web/phonos" target="_blank"> Phonos Foundation</a>,
-                an institution linked to the <a href="https://www.upf.edu/web/mtg" target="_blank">Music
-                Technology Group</a> for the promotion of social and cultural initiatives.
-            Currently, we only accept donations via PayPal and international credit cards.
-        </p>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-<script src="https://js.stripe.com/v3"></script>
-<script src="{% static 'bw-frontend/dist/donate.js' %}"></script>
-{% endblock %}
diff --git a/templates_bw/donations/donation_list.html b/templates_bw/donations/donation_list.html
deleted file mode 100644
index 11c1b7da3..000000000
--- a/templates_bw/donations/donation_list.html
+++ /dev/null
@@ -1,58 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-{% load display_user %}
-
-{% block title %}Donations{% endblock %}
-{% block page-title %}List of donations{% endblock %}
-
-{% block page-content %}
-    <div class="bw-donate">
-        {% regroup object_list by created|date:"F, Y" as donations %}
-        {% for donation_m in donations %}
-            <h3 class="text-red v-spacing-top-4">{{donation_m.grouper}}</h3>
-            <div class="row v-spacing-top-4">
-            {% for donation in donation_m.list%}
-                <div class="col-md-4 col-lg-2 v-spacing-2">
-                    <div class="row middle">
-                        <div class="col-md-3 col-1">
-                            {% if donation.is_anonymous %}
-                                {% bw_user_avatar "_avatar.png" "anonymous"  %}
-                            {% else %}
-                                {% if donation.user %}
-                                    {% bw_user_avatar donation.user.profile.locations.avatar.XL.url donation.user.username %}
-                                {% else %}
-                                    {% bw_user_avatar "_avatar.png" donation.display_name %}
-                                {% endif %}
-                            {% endif %}
-                        </div>
-                        <div class="col-md-8 col-11 padding-left-3">
-                            {% if donation.is_anonymous %}
-                                <div class="ellipsis text-grey">
-                                    {{donation.display_name}}
-                                </div>
-                            {% else %}
-                                {% if donation.user %}
-                                    <div class="ellipsis">
-                                        <a href="{% url "account" donation.user.username %}">{{ donation.user.username }}</a>
-                                    </div>
-                                {% else %}
-                                    <div class="ellipsis">
-                                        {{donation.display_name}}
-                                    </div>
-                                {% endif %}
-                            {% endif %}
-                            {% if donation.display_amount %}
-                                <div class="ellipsis text-light-grey">{{donation.amount}} {{donation.currency|lower}}</div>
-                            {% endif %}
-                        </div>
-                    </div>
-                </div>
-            {% endfor %}
-            </div>
-        {% endfor %}
-        <div class="v-spacing-top-5 v-spacing-5">
-            {% bw_paginator page_obj.paginator page_obj page_obj.number request "donations" %}
-        </div>
-    </div>
-{% endblock %}
diff --git a/templates_bw/follow/stream.html b/templates_bw/follow/stream.html
deleted file mode 100644
index 6de1d097a..000000000
--- a/templates_bw/follow/stream.html
+++ /dev/null
@@ -1,118 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-{% load display_sound %}
-{% load util %}
-{% block page-title %}Sound stream{% endblock %}
-{% block title %}Sound stream{% endblock %}
-
-{% block page-content %}
-<div>
-
-    <p>In this page you'll see new sounds uploaded by <a href="{% url "user-following-users" request.user %}">users you follow</a> and new sounds tagged with the <a href="{% url "user-following-tags" request.user %}">tags you follow</a>.<br>
-    You can configure email notifications for updates in your sound stream through your <a href="{% url "accounts-email-settings" %}">email settings</a> page.</p>
-
-    <div class="v-spacing-top-4">
-        <form id="stream_form" class="form-activity-stream" action="." method="post">
-            {% csrf_token %}
-            <div>
-                <label id="stream_period">Select time period:</label>
-                <select id="time_lapse" name="time_lapse">
-                    {% for key, value in SELECT_OPTIONS.items %}
-                        <option value="{{ key}}" {% if select_value == key %}selected="selected"{% endif %} >{{ value }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div>
-                <label id="lbl_date_from" for="date_from">From:</label>
-                <input id="date_from" name="date_from" type="text" placeholder="YYYY-MM-DD" {% if date_from %}value="{{ date_from }}"{% endif %}/>
-            </div>
-            <div>
-                <label id="lbl_date_to" for="date_to">To:</label>
-                <input id="date_to" name="date_to" type="text" placeholder="YYYY-MM-DD" {% if date_to %}value="{{ date_to }}"{% endif %}/>
-            </div>
-            <button class="btn-primary">Update stream</button>
-        </form>
-    </div>
-
-    {% if not errors_getting_data %}
-    <div class="divider-light v-spacing-top-3 v-spacing-4"></div>
-    <div>
-        <a id="new_sounds_users"></a>
-        <h3>Sounds by users you follow</h3>
-        {% if not users_sounds %}
-            <div class="v-spacing-7 v-spacing-top-5">
-                <p class="text-grey v-spacing-2">Looks like there are no new sounds from users you follow in that time period... &#128543</p>
-            </div>
-        {% else %}
-            <div class="v-spacing-top-2">
-            {% for user, sound_objs, more_url_params, more_count, new_count in users_sounds %}
-                <h5 class="text-grey v-spacing-top-3 v-spacing-2">From user "{{ user.0.username }}"</h5>
-                <a id="{{ user.0 }}" ></a>
-                <div>    
-                {% if sound_objs %}
-                    <div class="row no-margin">
-                        {% for sound_obj in sound_objs %}
-                            <div class="col-lg-3 col-6">
-                                {% display_sound_small sound_obj %}
-                            </div>
-                        {% endfor %}
-                    </div>
-                {% endif %}
-                </div>
-                {% if more_count > 0 %}
-                <div class="center v-spacing-4">
-                    <a class="btn-inverse no-hover" href="{% url "sounds-search" %}?f={{ more_url_params.0 }}&s={{ more_url_params.1 }}">See all {{ new_count }} sounds</a>
-                </div>
-                {% endif %}
-            {% endfor %}
-            </div>
-        {% endif %}
-    </div>
-    <div class="divider-light v-spacing-top-3 v-spacing-4"></div>
-    <div>
-        <a id="new_sounds_tags"></a>
-        <h3>Sounds with tags you follow</h3>
-        {% if not tags_sounds %}
-            <div class="v-spacing-7 v-spacing-top-5">
-                <p class="text-grey v-spacing-2">Looks like there are no new sounds from tags you follow in that time period... &#128543</p>
-            </div>
-        {% else %}
-            <div class="v-spacing-top-2">
-            {% for tags, sound_objs, more_url_params, more_count, new_count in tags_sounds %}
-                <h5 class="text-grey v-spacing-top-3 v-spacing-2">From tag{{ tags|pluralize }} "{{ tags|join:", " }}"</h5>
-                <a id="{{ tags|join:"/" }}"></a>
-                <div>
-                {% if sound_objs %}
-                <div class="row no-margin">
-                    {% for sound_obj in sound_objs %}
-                        <div class="col-lg-3 col-6">
-                            {% display_sound_small sound_obj %}
-                        </div>
-                    {% endfor %}
-                </div>
-                {% endif %}
-                {% if more_count > 0 %}
-                <div class="center v-spacing-4">
-                    <a class="btn-inverse no-hover" href="{% url "sounds-search" %}?f={{ more_url_params.0 }}&s={{ more_url_params.1 }}">See all {{ new_count }} sounds</a>
-                </div>
-                {% endif %}
-                </div>
-            {% endfor %}
-            </div>
-        {% endif %}
-    </div>
-
-    {% else %}
-    <div class="v-spacing-6 v-spacing-top-4">
-        <p class="v-spacing-4 text-grey">An error occurred while requesting the data, please try again later...</p>
-        <p><button onclick="window.history.back();" class="btn-primary">Go back</button></p>
-    </div>
-    {% endif %}
-</div>
-    
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/stream.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/forum/index.html b/templates_bw/forum/index.html
deleted file mode 100644
index 60f15a681..000000000
--- a/templates_bw/forum/index.html
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load display_forum_objects %}
-
-{% block title %}Forums{% endblock %}
-{% block page-title %}Freesound Forums{% endblock %}
-
-{% block page-content %}
-    {% include 'forum/main_forums_navbar.html' %}
-    <div class="v-spacing-top-4">
-        {% for forum in forums %}
-            {% display_forum forum %}
-            {% if not forloop.last %}
-                <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
-            {% endif %}
-        {% endfor %}
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/forum/moderate.html b/templates_bw/forum/moderate.html
deleted file mode 100644
index a8ba17542..000000000
--- a/templates_bw/forum/moderate.html
+++ /dev/null
@@ -1,35 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load util %}
-{% load filter_img %}
-{% load smileys %}
-{% load display_forum_objects %}
-{% load bw_templatetags %}
-{% block title %}Moderate forum posts{% endblock %}
-{% block page-title %}Moderate forum posts ({{ post_list|length }}){% endblock %}
-
-{% block page-content %}
-<div>Below is a list of forum posts that require moderation. You can either approve or reject them individually. Also you have the option to
-    delete the whole corresponding user object if it is believed to be a spammer.
-</div>
-<div class="v-spacing-top-6">
-    {% for post in post_list %}
-        <div class="row">
-            <div class="col-9">
-                {% display_post post.post 0 0 False False False %}
-            </div>
-            <div class="col-3">
-                <form action="." method="post" class="bw-form bw-multiple-radio">{% csrf_token %}
-                    {{ post.form }}
-                    <button type="submit" class="btn-primary v-spacing-top-4 w-100 center">Send</button>
-                </form>
-            </div>
-        </div>
-        {% if not forloop.last %}
-            <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
-        {% endif %}  
-    {% endfor %}
-</div>
-{% endblock %}
-
-
diff --git a/templates_bw/forum/new_thread.html b/templates_bw/forum/new_thread.html
deleted file mode 100644
index ed88f2070..000000000
--- a/templates_bw/forum/new_thread.html
+++ /dev/null
@@ -1,51 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load static %}
-
-{% block title %}Forums - {{forum.name}} - New Thread{% endblock %}
-{% block page-title-custom %}{% endblock %}
-
-{% block page-content %}
-    <div class="row middle">
-        <div class="col-12">
-            <ul class="navbar-forums-hot navbar-breadcrumb">
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link nav-link" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
-                </li>
-                <li class="nav-item text-16">
-                    New thread
-                </li>
-            </ul>
-        </div>
-    </div>
-    <div class="divider-light v-spacing-top-1 v-spacing-5"></div>
-    <div class="v-spacing-top-5">
-        <form method="post" action="." class="bw-new-thread__form w-100 disable-on-submit">{% csrf_token %}
-            <div class="row">
-                <div class="col-lg-3 v-spacing-top-2">
-                    <div class="row middle">
-                        <div class="col-2 col-lg-4">
-                            {% bw_user_avatar request.user.profile.locations.avatar.L.url request.user.username 75 %}
-                        </div>
-                        <div class="col-8">
-                            <h6 class="text-16 no-margins"><a href="{% url 'account' request.user.username %}">{{ request.user.username }}</a></h6>
-                            <p class="text-grey no-margins">{{ request.user.profile.num_sounds|bw_intcomma }} sound{{ request.user.profile.num_sounds|pluralize }}</p>
-                            <p class="text-grey no-margins">{{ request.user.profile.num_posts|bw_intcomma }} post{{ request.user.profile.num_posts|pluralize }}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-7">
-                    {{form.as_p}}
-                </div>
-            </div>
-            <div class="row v-spacing-top-5">
-                <div class="col-lg-7 offset-lg-3">
-                    <button class="btn-primary w-100">Create thread</button>
-                </div>
-            </div>
-        </form>
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/forum/reply.html b/templates_bw/forum/reply.html
deleted file mode 100644
index 7799adf19..000000000
--- a/templates_bw/forum/reply.html
+++ /dev/null
@@ -1,77 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load static %}
-{% load util %}
-{% load filter_img %}
-
-{% block title %}Forums - {{forum.name}} - {{ thread.title }} - {% if editing %}Edit post{% else %}Post reply{% endif %}{% endblock %}
-{% block page-title-custom %}{% endblock %}
-
-{% block page-content %}
-    <div class="row middle">
-        <div class="col-12">
-            <ul class="navbar-forums-hot navbar-breadcrumb">
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url "forums-thread" forum.name_slug thread.id %}">{{ thread.title }}</a>
-                </li>
-                <li class="nav-item text-16">
-                    {% if editing %}Edit post{% else %}Post reply{% endif %}
-                </li>
-            </ul>
-        </div>
-    </div>
-    <div class="divider-light v-spacing-top-1 v-spacing-5"></div>
-    <div class="v-spacing-top-5">
-        <form method="post" action="." class="bw-new-thread__form w-100 disable-on-submit">{% csrf_token %}
-            <div class="row">
-                <div class="col-lg-3 v-spacing-top-2">
-                    <div class="row middle">
-                        <div class="col-2 col-lg-4">
-                            {% bw_user_avatar request.user.profile.locations.avatar.L.url request.user.username 75 %}
-                        </div>
-                        <div class="col-8">
-                            <h6 class="text-16 no-margins"><a href="{% url 'account' request.user.username %}">{{ request.user.username }}</a></h6>
-                            <p class="text-grey no-margins">{{ request.user.profile.num_sounds|bw_intcomma }} sound{{ request.user.profile.num_sounds|pluralize }}</p>
-                            <p class="text-grey no-margins">{{ request.user.profile.num_posts|bw_intcomma }} post{{ request.user.profile.num_posts|pluralize }}</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-7 ">
-                    {{form.as_p}}
-                </div>
-            </div>
-            <div class="row v-spacing-top-5">
-                <div class="col-lg-7 offset-lg-3">
-                    <button class="btn-primary w-100">{% if editing %}Save post{% else %}Post reply{% endif %}</button>
-                </div>
-            </div>
-            {% if latest_posts %}
-                <div class="row v-spacing-top-5">
-                    <div class="col-lg-7 offset-lg-3">
-                            <span class="text-16 font-weight-bold">Previous posts in this thread:</span>
-                            <div class="latest-posts-in-thread v-spacing-top-2">
-                                {% for post in latest_posts %}
-                                    <div class="v-spacing-2">
-                                        <a href="{% url "account" post.author.username %}">{{post.author.username}}</a><span class="text-grey">, {{post.created|timesince}} ago:</span>
-                                        <p>
-                                            {{ post.body|replace_img|safe|linebreaks|strip_unnecessary_br }}
-                                        </p>
-                                    </div>
-                                    {% if not forloop.last %}
-                                        <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
-                                    {% endif %}
-                                {% endfor %}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            {% endif %}
-        </form>
-    </div>
-{% endblock %}q
\ No newline at end of file
diff --git a/templates_bw/forum/thread.html b/templates_bw/forum/thread.html
deleted file mode 100644
index 4993bd441..000000000
--- a/templates_bw/forum/thread.html
+++ /dev/null
@@ -1,59 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load display_forum_objects %}
-
-{% block title %}Forums - {{forum.name}} - {{thread.title}}{% endblock %}
-{% block page-title %}Freesound Forums{% endblock %}
-
-{% block page-content %}
-
-    <div class="divider-light v-spacing-top-4 v-spacing-2"></div>
-    <div class="row middle">
-        <div class="col-12">
-            <ul class="navbar-forums-hot navbar-breadcrumb v-spacing-2">
-                <li class="nav-item">
-                    <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link nav-link-black" href="{% url "forums-thread" forum.name_slug thread.id %}">{{ thread.title }}</a>
-                </li>
-            </ul>
-        </div>
-    </div>
-    <div class="divider-light v-spacing-top-2"></div>
-   
-    <div class="row between middle v-spacing-top-3">
-        <div class="col-lg-8">
-            <h3>{{ thread.title }}</h3>
-        </div>
-        <div class="col-lg-4 text-lg-right v-spacing-2 v-spacing-top-4">
-            {% if has_subscription %}
-                <a title="Unsubscribe to stop receiving email notifications" class="no-hover btn-secondary" href="{% url "forums-thread-unsubscribe" forum.name_slug thread.id %}">Unsubscribe</a>
-            {% else %}
-                <a title="Subscribe to receive email notifications" class="no-hover btn-inverse btn-profile-adapt" href="{% url "forums-thread-subscribe" forum.name_slug thread.id %}">Subscribe</a>
-            {% endif %}
-            {% comment %}<a title="Post a reply" class="btn-primary" href="{% url "forums-reply" forum.name_slug thread.id %}"><i class="text-16 padding-right-1 bw-icon-reply" ></i>Post reply</a>{% endcomment %}
-        </div>
-    </div>
-    {% if thread.last_post.id %}
-        <p class="text-grey v-spacing-7">Started {{ thread.first_post.created|date:"F jS, Y" }}  ·  {{thread.num_posts|bw_intcomma}} repl{{thread.num_posts|pluralize:"y,ies"}}  ·  <a href="{% url "forums-post" forum.name_slug thread.id thread.last_post.id %}">Latest reply</a> by <a href="{% url "account" thread.last_post.author.username %}">{{ thread.last_post.author.username }}</a> {{ thread.last_post.created|timesince }} ago</p>
-    {% endif %}
-    <div class="v-spacing-top-4">
-        {% for post in page.object_list %}
-            <a name="post{{ post.id }}"></a>
-            {% display_post post forloop.counter post_counter_offset False True True %}
-            {% if not forloop.last %}
-                <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
-            {% endif %}
-        {% endfor %}
-    </div>
-    <div class="v-spacing-top-7 text-center">
-        <a class="btn-primary no-hover" href="{% url "forums-reply" forum.name_slug thread.id %}"><i class="text-16 padding-right-1 bw-icon-reply" ></i>Post reply</a>
-    </div>
-    <div class="v-spacing-top-4">
-        {% bw_paginator paginator page current_page request "thread" %}
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/forum/threads.html b/templates_bw/forum/threads.html
deleted file mode 100644
index f4aaaa8ef..000000000
--- a/templates_bw/forum/threads.html
+++ /dev/null
@@ -1,54 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load display_forum_objects %}
-{% load cache %}
-
-{% block title %}Forums - {{forum.name}}{% endblock %}
-{% block page-title %}Freesound Forums{% endblock %}
-
-{% block page-content %}
-    <div class="divider-light v-spacing-top-4 v-spacing-2"></div>
-    <div class="row middle">
-        <div class="col-md-6">
-            <ul class="navbar-forums-hot navbar-breadcrumb">
-                <li class="nav-item">
-                      <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link nav-link-black" href="{{forum.get_absolute_url}}">{{ forum.name }}</a>
-                </li>
-            </ul>
-        </div>
-        <div class="col-md-6 v-spacing-1 v-spacing-top-1 between middle">
-            <form method="get" action="{% url "forums-search" %}" class="w-50">
-                <input type="hidden" name="advanced_search"  value="0"/>
-                <input type="hidden" name="forum" value="{% if forum %}{{forum.name_slug}}{% else %}{{current_forum.name_slug}}{% endif %}"/>
-                <div class="input-wrapper w-100">
-                    <i class="bw-icon-search input-icon"></i><input name="q" type="search" placeholder="Search in this forum..." autocomplete="off">
-                </div>
-            </form>
-            <div>
-                <a class="btn-primary no-hover" href="{% url "forums-new-thread" forum.name_slug %}"><span class="padding-right-1">+</span>New thread</a>
-            </div>
-        </div>
-    </div>
-    <div class="divider-light v-spacing-top-2"></div>
-
-    <div class="v-spacing-top-4">
-        {% for thread in page.object_list %}
-            {% display_thread thread %}
-            {% if not forloop.last %}
-                <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
-            {% endif %}
-        {% empty %}
-            <div class="bw-threads">
-                <div class="row">
-                    This forum has no threads
-                </div>
-            </div>
-        {% endfor %}
-    </div>
-    <div class="v-spacing-top-7">
-        {% bw_paginator paginator page current_page request "thread" %}
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/front.html b/templates_bw/front.html
deleted file mode 100644
index 40eb42e69..000000000
--- a/templates_bw/front.html
+++ /dev/null
@@ -1,208 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-{% load cache %}
-{% load display_sound %}
-{% load display_pack %}
-{% load display_user %}
-{% load util %}
-{% load bw_templatetags %}
-{% load filter_img %}
-{% load ratings %}
-
-{% block title %}Freesound{% endblock %}
-
-{% block navbar %}{% include 'molecules/navbar_front_page.html' %}{% endblock %}
-
-{% block content %}
-    <div class="container">
-        <div class="bw-front__hero-container">
-            <header>
-                <h1>Find any sound you like</h1>
-                <p class="bw-front__subheader">In a collaborative collection of {{ total_num_sounds|bw_intcomma }} <a class="bw-link--grey" href="/help/faq/#licenses">free sounds</a></p>
-            </header>
-            <div class="bw-front__hero-container--search">
-                <form method="get" action="/search/">
-                    <div class="typeahead-wrapper">
-                        <div class="input-wrapper">
-                            <input name="q" type="search" class="bw-nav__search bw-front__hero-search" placeholder="Search sounds..." id="search-sounds" {% if enable_query_suggestions %}data-typeahead="true" data-typeahead-suggestions-url="{% url 'query-suggestions' %}" autocomplete="off"{% endif %} />
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <div class="row bw-front__content">
-            <main class="col-lg-9 col-extra-right-padding-middle-lg">
-                {% if latest_sounds %}
-                    {% cache 300 bw_front_page_latest_additions %}
-                    <section class="v-spacing-3">
-                        <h3 class="v-spacing-4">Latest additions</h3>
-                        {% sound_carousel latest_sounds %}
-                    </section>
-                    {% endcache %}
-                {% endif %}
-
-                {% if rss_cache %}
-                    {{ rss_cache }}
-                {% else %}
-                    <hr>
-                {% endif %}
-
-                {% if trending_new_sound_ids %}
-                    {% cache 300 bw_front_page_trending_new_sounds %}
-                    <section class="v-spacing-3">
-                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded sounds created in the last week">Trending new sounds</h3>
-                        {% sound_carousel trending_new_sound_ids %}
-                    </section>
-                    <hr />
-                    {% endcache %}
-                {% endif %}
-
-                {% if trending_new_pack_ids %}
-                    {% cache 300 bw_front_page_trending_new_packs %}
-                    <section class="v-spacing-3">
-                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded pack created in the last week">Trending new packs</h3>
-                        {% pack_carousel trending_new_pack_ids %}
-                    </section>
-                    <hr />
-                    {% endcache %}
-                {% endif %}
-
-                {% if trending_sound_ids %}
-                    {% cache 300 bw_front_page_trending_sounds %}
-                    <section class="v-spacing-3">
-                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded sounds during the last week">Trending sounds</h3>
-                        {% sound_carousel trending_sound_ids %}
-                    </section>
-                    <hr />
-                    {% endcache %}
-                {% endif %}
-
-                {% if recent_random_sound_ids %}
-                {% cache 300 bw_front_page_recent_sounds_of_the_day %}
-                    <section class="v-spacing-3">
-                        <h3 class="v-spacing-4 v-spacing-top-3" title="Most downloaded sounds created in the last week">Recent random sounds of the day</h3>
-                        {% sound_carousel recent_random_sound_ids %}
-                    </section>
-                    {% endcache %}
-                {% endif %}
-
-                {% if popular_searches and enable_popular_searches %}
-                    <hr />
-                    <section class="v-spacing-3">
-                        <h3 class="v-spacing-4 v-spacing-top-3">Popular searches</h3>
-                        <div class="bw-carousel-container">
-                            <div class="bw-carousel-wrapper">
-                                <div class="bw-carousel with-dots">
-                                    {% for popular_searches_slice in popular_searches|chunks:4 %}
-                                        <div>
-                                            <div class="row">
-                                                {% for search_term, url in popular_searches_slice %}
-                                                    <div class="col v-spacing-1">
-                                                        {% bw_tag search_term 4 'w-100 h-75 display-inline-block' url 1.0 %}
-                                                    </div>
-                                                {% endfor %}
-                                            </div>
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </div>
-                    </section>
-                    <hr />
-                {% endif %}
-            </main>
-            <aside class="col-lg-3">
-                <hr class="d-lg-none v-spacing-3"/>
-                {% cache 300 bw_front_page_random_sound %}
-                {% if random_sound %}  
-                <section id="random-sound-section" class="v-spacing-4">
-                    <h4 class="v-spacing-1 display-none d-xl-block">Random sound of the day</h4>
-                    <h4 class="v-spacing-1 display-none d-lg-block d-xl-none">Sound of the day</h4>
-                    <h4 class="v-spacing-1 d-lg-none">Random sound of the day</h4>
-                    <p class="text-grey v-spacing-2">Can you guess the random sound of the day?</p>
-                    {% with random_sound as sound %}
-                        <div class="display-none d-lg-block">{% display_sound_small_no_info random_sound %}</div>
-                        <div class="d-lg-none">{% display_sound_big_no_info_no_bookmark random_sound %}</div>
-                        <div id="collapsable-random-sound" class="collapsable-block collapsable-block-close bw-sound-page__information v-spacing-top-1 overflow-hidden">
-                            <div class="between line-height-percentage-150 v-spacing-top-1">
-                                <h5 class="ellipsis">
-                                    <a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}">{{ sound.original_filename }}</a>
-                                </h5>
-                                {% if sound.original_filename|length <= 22 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
-                            </div>
-                            <div class="between">
-                                <div>
-                                    <a href="{% url 'account' sound.username %}" title="Username: {{ sound.username }}">{{ sound.username|truncate_string:15 }}</a>
-                                </div>
-                                {% if sound.original_filename|length > 22 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
-                            </div>
-                            <div>
-                                <span class="text-grey">{{ sound.created|timesince }} ago</span>
-                            </div>
-                            <div class="v-spacing-top-1 overflow-hidden">
-                                {{ sound.description|striptags|safe|truncatechars_html:350 }}
-                            </div>
-                        </div>
-                        <div class="text-center v-spacing-top-2">
-                            <span data-target="collapsable-random-sound" data-show-text="Reveal sound details" data-hide-text="Hide sound details" class="collapsable-toggle"></span>
-                        </div>
-                    {% endwith %}
-                </section>
-                <hr class="v-spacing-3" />
-                {% endif %}
-                {% endcache %}
-                <section class="v-spacing-3">
-                    <h4 class="v-spacing-1">Enjoying Freesound?</h4>
-                    <p class="text-grey v-spacing-2">Please consider donating some money. It doesn't take a large donation to help us!</p>
-                    <div class="no-paddings offset-3 col-6 offset-lg-2 col-lg-8 offset-xl-0 col-xl-12">
-                        <div class="between v-spacing-2 wrap">
-                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=5">5€</a>
-                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=10">10€</a>
-                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=50">50€</a>
-                            <a class="no-hover btn-inverse bw-front__donate-amount-button v-spacing-1" href="{% url 'donate' %}?{{ donation_amount_request_param }}=0">Other</a>
-                        </div>
-                    </div>
-                    {% if top_donor_user_id %}
-                        {% cache 300 bw_front_page_top_donor %}
-                            <div class="text-center">
-                                <div class="v-spacing-1 h-spacing-2">Top donor this week:</div>
-                                {% display_user_top_donor top_donor_user_id top_donor_donation_amount %}
-                            </div>
-                        {% endcache %}
-                    {% endif %}
-                </section>
-                <hr class="v-spacing-3" />
-                {% cache 300 bw_forum_threads %}
-                    <section class="v-spacing-top-2 v-spacing-4">
-                        <h4 class="v-spacing-1">Hot forum threads</h4>
-                        {% for forum in current_forum_threads %}
-                            <article class="v-padding-2">
-                                <div class="v-spacing-1">
-                                    <a class="bw-link--black" href="{{forum.last_post.get_absolute_url}}">{{ forum.title }}</a>
-                                </div>
-                                <div class="text-grey">
-                                    in <a class="bw-link--grey" href="{{forum.forum.get_absolute_url}}">{{forum.forum}}</a>,
-                                    by <a href="{% url 'account' forum.last_post.author.username %}">{{ forum.last_post.author.username }}</a>
-                                    <br>{{forum.last_post.created|timesince}} ago
-                                </div>
-                            </article>
-                        {% endfor %}
-                        <div class="center v-spacing-top-4">
-                            <a class="no-hover" href="{% url 'forums-hot-threads' %}"><button class="btn-inverse">More threads here</button></a>
-                        </div>
-                    </section>
-                    <hr class="v-spacing-3" />
-                {% endcache %}
-                <section class="v-spacing-top-2">
-                    <div class="bw-front__freesound_labs_logo v-spacing-3"></div>
-                    <p class="text-grey v-spacing-2">Freesound Labs is a directory of apps, hacks, projects, and research using Freesound. <a class="bw-link--grey" href="https://labs.freesound.org" target="_blank">Click here to learn more!</a></p>
-                </section>
-            </aside>
-        </div>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/front.js' %}"></script>
-{% endblock %}
diff --git a/templates_bw/geotags/geotags.html b/templates_bw/geotags/geotags.html
deleted file mode 100644
index 4b0d9d8a8..000000000
--- a/templates_bw/geotags/geotags.html
+++ /dev/null
@@ -1,106 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load absurl %}
-{% load static %}
-
-{% block title %}
-    {% if username %}
-        Map of sounds for user {{ username }}
-    {% elif tag %}
-        Map of sounds with tag {{ tag }}
-    {% elif pack %}
-        Map of sounds for pack {{ pack.name }}
-    {% elif sound %}
-        Map for sound {{ sound.original_filename }}
-    {% else %}
-        Map of sounds
-    {% endif %}
-{% endblock %}
-{% block page-title-custom %}
-    <div class="col-11 no-paddings">
-        <h1 class="line-height-percentage-140 ellipsis">
-            {% if username %}
-                Map of sounds for user <a href="{% url "account" username %}">{{ username }}</a>
-            {% elif tag %}
-                Map of sounds with tag <a href="{% url "tags" tag %}">{{tag}}</a>
-            {% elif pack %}
-                Map of sounds for pack <a href="{% url "pack" pack.user.username pack.id %}">{{ pack.name }}</a>
-            {% elif sound %}
-                Map for sound <a href="{% url "sound" sound.user.username sound.id %}">{{ sound.original_filename }}</a>
-            {% else %}
-                Map of sounds
-            {% endif %}
-        </h1>
-    </div>
-    <div class="col-12 no-paddings v-spacing-top-negative-4 text-right text-grey d-none d-md-block">
-        <span id="indicator">Loading sounds... <img width="12px" height="12px" src="{% static 'bw-frontend/public/bw_indicator.gif' %}"></span>
-    </div>
-{% endblock %}
-
-{% block page-content %}
-    <div class="col-12 v-spacing-top-3 no-paddings {% if sound or username %}v-spacing-2{% endif %}">
-        <div id="mapCanvas" class="map main-map"
-             data-map-center-lat="{{ center_lat }}"
-             data-map-center-lon="{{ center_lon }}"
-             data-map-zoom="{{ zoom }}"
-             data-map-show-search="{% if sound %}false{% else %}true{% endif %}"
-             data-map-username="{{ username }}"
-             data-map-pack-id="{{ pack.id }}"
-             data-map-tag="{{ tag }}"
-             data-geotags-url="{{ url }}"
-             data-geotags-url-box="{% url "geotags-box-barray" %}"
-             data-geotags-embed-base-url="{% absurl 'embed-geotags-box-iframe' %}">
-        </div>
-    </div>
-
-    <div class="row middle">
-        <div class="col-md-10 v-spacing-top-3 v-spacing-2">
-            {% if username or sound or pack %}
-                <a class="no-hover btn-secondary btn-inverse" href="{% url "geotags" %}">View all geotags</a>
-            {% else %}
-                <div class="start">
-                    <div class="input-wrapper">
-                        <input data-base-url="{% url "geotags" %}" id="tagFilter" type="search" name="t" class="bw-forums__input-search" placeholder="Filter by tag..." value="{% if tag %}{{ tag }}{% endif %}" />
-                    </div>
-                    <a class="no-hover" href="{% url "geotags" %}"><button class="btn-secondary btn-inverse h-spacing-left-1">Clear filter</button></a>
-                </div>
-            {% endif %}
-        </div>
-        <div class="col-md-2 v-spacing-top-2 v-spacing-2">
-            {% if not sound %}
-            <div><a id="embedControlsLabel" href="javascript:void(0);">Embed this map</a></div>
-            {% endif %}
-        </div>
-    </div>
-
-    {% if not sound %}
-    <div class="row">
-        <div class="col-md-12 v-spacing-top-4">
-            <div id="embedControls" class="display-none w-100">
-                <form class="bw-form">
-                    <div class="w-50">
-                        <div class="row">
-                            <div class="col-md-6">
-                                <label for="embedWidthInput">Embed width</label> <input type="number" min="100" step="1" value="900" id="embedWidthInput" style="margin-bottom:0px;"/>&nbsp;&nbsp;
-                            </div>
-                            <div class="col-md-6">
-                                <label for="embedHeightInput">Embed height</label> <input type="number" min="100" step="1" value="600" id="embedHeightInput" style="margin-bottom:0px;"/>&nbsp
-                            </div>
-                        </div>
-                    </div>
-                    <label for="embedClusterCheck">Show clusters in embed</label> <input class="bw-checkbox" type="checkbox" checked id="embedClusterCheck" />
-                    <p>
-                        <textarea id="embedCode" readonly style="width:100%;height:60px;"></textarea>
-                    </p>
-                </form>
-                
-            </div>
-        </div>
-    </div>
-    {% endif %}
-{% endblock %}
-
-{% block extrabody %}
-    {% bw_maps_js_scripts %}
-    <script src="{% static 'bw-frontend/dist/map.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/geotags/infowindow.html b/templates_bw/geotags/infowindow.html
deleted file mode 100644
index 7da30a7b5..000000000
--- a/templates_bw/geotags/infowindow.html
+++ /dev/null
@@ -1,25 +0,0 @@
-{% load display_sound %}
-{% load bw_templatetags %}
-
-<div>
-    <div id="infoWindowPlayerWrapper-{{ sound.id }}" class="padding-top-2">
-        {% if minimal %}
-            {% display_sound_minimal sound %}
-        {% else %}
-            {% display_sound_small sound %}
-        {% endif %}
-    </div>
-    {% if minimal %}
-        <div class="overflow-hidden">
-            <a href="#"></a>{% comment %}Placing an empty anchor here is a workaround to prevent mapbox infowindows to focus first anchor found{% endcomment %}
-            <a target="_blank" href="{% url "sound" sound.user.username sound.id %}">
-            {{sound.original_filename}}</a>
-            by <a target="_blank" class="user" href="{% url "account" sound.user.username %}">
-            {{sound.user.username}}</a> | <a class="cursor-pointer" id="infoWindowZoomLink-{{ sound.id }}" data-lat="{{ sound.geotag.lat }}" data-lon="{{ sound.geotag.lon }}" data-zoom="{{ sound.geotag.zoom }}">{% bw_icon 'search' %}</a>
-        </div>
-    {% else %}
-        <div class="text-right">
-            <a class="cursor-pointer" id="infoWindowZoomLink-{{ sound.id }}" data-lat="{{ sound.geotag.lat }}" data-lon="{{ sound.geotag.lon }}" data-zoom="{{ sound.geotag.zoom }}">{% bw_icon 'search' %} Zoom in</a>
-        </div>
-    {% endif %}
-</div>
\ No newline at end of file
diff --git a/templates_bw/messages/archived.html b/templates_bw/messages/archived.html
deleted file mode 100644
index 67d0263c6..000000000
--- a/templates_bw/messages/archived.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{% extends "messages/messages_list.html" %}
-{% block title %}Messages - Archived{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/messages/inbox.html b/templates_bw/messages/inbox.html
deleted file mode 100644
index 61d97a5ba..000000000
--- a/templates_bw/messages/inbox.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{% extends "messages/messages_list.html" %}
-{% block title %}Messages - Inbox{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/messages/message.html b/templates_bw/messages/message.html
deleted file mode 100644
index 4ac0bef8a..000000000
--- a/templates_bw/messages/message.html
+++ /dev/null
@@ -1,56 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-{% load smileys %}
-{% load flag_user %}
-{% load util %}
-{% block title %}Messages - {{message.subject}} - {{message.user_from.username}}{% endblock %}
-{% block page-title %}Messages{% endblock %}
-
-{% block page-content %}
-    {% include 'messages/messages_navbar.html' %}
-    <div class="v-spacing-top-4">
-        <div class="row bw-message__message_page">
-            <div class="col-lg-3">
-                {% if request.user != message.user_from %}
-                    <div class="text-light-grey font-weight-normal text-20 v-spacing-3">Message from:</div>
-                    <div class="row middle">
-                        <div class="col-3 col-lg-4">
-                            {% bw_user_avatar message.user_from.profile.locations.avatar.L.url message.user_from.username 70 %}
-                        </div>
-                        <div class="col-8">
-                            <h6><a href="{% url "account" message.user_from.username %}">{{ message.user_from.username }}</a></h6>
-                            <p class="text-grey no-margins">{{ message.user_from.profile.num_sounds|bw_intcomma }} sound{{ message.user_from.profile.num_sounds|pluralize }}</p>
-                            <p class="text-grey no-margins">{{ message.user_from.profile.num_posts|bw_intcomma }} post{{ message.user_from.profile.num_posts|pluralize }}</p>
-                        </div>
-                    </div>
-                {% else %}
-                    <div class="text-light-grey font-weight-normal text-20 v-spacing-3">Message to:</div>
-                    <div class="row middle">
-                        <div class="col-3 col-lg-4">
-                            {% bw_user_avatar message.user_to.profile.locations.avatar.L.url message.user_to.username 70 %}
-                        </div>
-                        <div class="col-8">
-                            <h6><a href="{% url "account" message.user_to.username %}">{{ message.user_to.username }}</a></h6>
-                            <p class="text-grey no-margins">{{ message.user_to.profile.num_sounds|bw_intcomma }} sound{{ message.user_to.profile.num_sounds|pluralize }}</p>
-                            <p class="text-grey no-margins">{{ message.user_to.profile.num_posts|bw_intcomma }} post{{ message.user_to.profile.num_posts|pluralize }}</p>
-                        </div>
-                    </div>
-                {% endif %}
-                <div class="text-light-grey v-spacing-top-2 v-spacing-4">Sent {{message.created|timesince}} ago</div>
-            </div>
-            <div class="col-lg-9">
-                <h5>{{ message.subject }}</h5>
-                <div>
-                    {{ message.body.body|smileys|safe|linebreaks|strip_unnecessary_br }}
-                </div>
-                <div class="right">{% flag_user "PM" message.user_from.username message.id "" message.user_from.profile.num_sounds %}</div> 
-            </div>
-        </div>            
-        <div class="col-12">
-            <div class="v-spacing-top-5 text-center">
-                <a class="btn-primary no-hover" href="{% url "message-reply" message.id %}"><i class="text-16 padding-right-1 bw-icon-reply" ></i>Reply</a>
-            </div>
-        </div> 
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/messages/new.html b/templates_bw/messages/new.html
deleted file mode 100644
index c4327bdbe..000000000
--- a/templates_bw/messages/new.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load bw_templatetags %}
-{% load smileys %}
-{% load flag_user %}
-{% block title %}Messages - New message{% endblock %}
-{% block page-title %}Messages{% endblock %}
-
-{% block page-content %}
-    {% include 'messages/messages_navbar.html' %}
-    <div class="v-spacing-top-4">
-        <form method="post" action="." class="bw-new-thread__form w-100 disable-on-submit">{% csrf_token %}
-            <div class="row">
-                <div class=" offset-lg-2 col-lg-8 ">
-                    <h5 class="v-spacing-4">{% if form.initial %}Reply to message{% else %}New message{% endif %}</h5>
-                    {{form.as_p}}
-                </div>
-            </div>
-            <div class="row v-spacing-top-5 v-spacing-3">
-                <div class="col-lg-8 offset-lg-2">
-                    <button class="btn-primary w-100">Send message</button>
-                </div>
-            </div>
-        </form>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-<script src="{% static 'bw-frontend/dist/messages.js' %}"></script>
-{% endblock %}
diff --git a/templates_bw/messages/sent.html b/templates_bw/messages/sent.html
deleted file mode 100644
index faca18e7b..000000000
--- a/templates_bw/messages/sent.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{% extends "messages/messages_list.html" %}
-{% block title %}Messages - Sent{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/monitor/queues_status.html b/templates_bw/monitor/queues_status.html
deleted file mode 100644
index 867a8d17f..000000000
--- a/templates_bw/monitor/queues_status.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<table style="min-width:500px;">
-{% for item in celery_task_counts %}
-    {% if forloop.counter0 == 0 %}
-        <tr><td><b>queue</b></td><td><b>messages ready<br>(queued)</b></td><td><b>messages unacked<br> (running soon or running)</b></td><td><b>consumers</b></td><td><b>rate</b></td></tr>
-    {% endif %}
-    <tr><td><a href="/rabbitmq-admin/#/queues/%2F/{{ item.0 }}" target="_blank">{{ item.0 }}</a></td><td>{{ item.1 }}</td><td>{{ item.2 }}</td><td>{{ item.3 }}</td><td>{{ item.4 }}/s</td></tr>
-{% empty %}
-    <p>No information available...</p>
-{% endfor %}
-</table>
diff --git a/templates_bw/monitor/stats.html b/templates_bw/monitor/stats.html
deleted file mode 100644
index c877edac2..000000000
--- a/templates_bw/monitor/stats.html
+++ /dev/null
@@ -1,124 +0,0 @@
-{% extends "monitor/base.html" %}
-
-{% load static %}
-{% load bw_templatetags %}
-
-{% block title %}Monitor - Stats{% endblock %}
-
-{% block main_content %}
-
-<h1>Stats</h1>
-
-<h2 id="global-stats" class="v-spacing-top-5 v-spacing-2">Global numbers
-    <a class="headerlink" href="#global-stats" title="Permalink to this headline">¶</a>
-</h2>
-<div>
-    <table>
-        <tr>
-            <td><b>Active Users:</b></td><td id="total-users"></td>
-            <td><b>Comments:</b> </td><td id="total-comments"></td>
-            <td><b>Avg tags per sound:</b> </td><td id="avg-tags"></td>
-        </tr>
-        <tr>
-            <td><b>Uploaders:</b></td><td id="users-with-sounds"></td>
-            <td><b>Avg comments per sound:</b> </td><td id="avg-comments"></td>
-            <td><b>Posts:</b> </td><td id="total-posts"></td>
-        </tr>
-        <tr>
-            <td><b>Sounds:</b> </td><td id="total-sounds"></td>
-            <td><b>Ratings:</b> </td><td id="total-ratings"></td>
-            <td><b>Threads:</b> </td><td id="total-threads"></td>
-        </tr>
-        <tr>
-            <td><b>Packs:</b> </td><td id="total-packs"></td>
-            <td><b>Avg ratings per sound:</b> </td><td id="avg-ratings"></td>
-            <td><b>Donations:</b> </td><td id="total-donations"></td>
-        </tr>
-        <tr>
-            <td><b>Downloads:</b> </td><td id="total-downloads"></td>
-            <td><b>Unique tags:</b> </td><td id="total-tags"></td>
-            <td><b>Donations by year (estimated with last 30 days data):</b></td><td id="proj-donations"></td>
-        </tr>
-        <tr>
-            <td><b>Avg downloads per sound:</b> </td><td id="avg-downloads"></td>
-            <td><b>Tags applications:</b> </td><td id="total-used-tags"></td>
-            <td></td><td></td>
-        </tr>
-    </table>
-    
-    
-</div>
-
-<h2 id="users-stats" class="v-spacing-top-5">Users
-    <a class="headerlink" href="#users-stats" title="Permalink to this headline">¶</a>
-</h2>
-<h3>Registered users in last two weeks</h3>
-<div class='users'>
-</div>
-
-<h3>Active users by activity per week</h3>
-<div class='active-users'>
-</div>
-
-<h2 id="sounds-stats" class="v-spacing-top-5">Sounds
-    <a class="headerlink" href="#sounds-stats" title="Permalink to this headline">¶</a>
-</h2>
-<h3>Sounds created in last two weeks</h3>
-<div class='uploads'>
-</div>
-
-<h2 id="downloads-stats" class="v-spacing-top-5">Downloads
-    <a class="headerlink" href="#downloads-stats" title="Permalink to this headline">¶</a>
-</h2>
-<h3>Downloads in last two weeks</h3>
-<div class='downloads'>
-</div>
-
-<h2 id="year-donations" class="v-spacing-top-5">Donations
-    <a class="headerlink" href="#year-donations" title="Permalink to this headline">¶</a>
-</h2>
-<h3>Donations in the last 12 months</h3>
-<div class='donations'>
-</div>
-
-<div style="display:inline-block">
-    <h2 id="tags-stats" class="v-spacing-top-5">Tags
-        <a class="headerlink" href="#tags-stats" title="Permalink to this headline">¶</a>
-    </h2>
-    <h3>Most used tags in last two weeks</h3>
-    <canvas id='tags-cloud-week' width=450 height=450>
-    </canvas>
-</div>
-
-<div style="display:inline-block">
-    <h3>Tag cloud with most downlaoded tags in last two weeks</h3>
-    <canvas id='down-tags-cloud' width=450 height=450>
-    </canvas>
-</div>
-
-<h3>Tag cloud with most used tags</h3>
-<canvas id='tags-cloud' width=600 height=600>
-</canvas>
-
-<h2 id="user-queries-stats" class="v-spacing-top-5">User Queries
-    <a class="headerlink" href="#user-queries-stats" title="Permalink to this headline">¶</a>
-</h2>
-<h3>Most common queries in last two weeks</h3>
-<canvas id='queries-wordcloud' width=600 height=600>
-</canvas>
-
-{% endblock %}
-
-{% block extrabody %}
-{{ block.super }}
-<script>
-    var totalsDataUrl = '{% url 'monitor-totals-stats-ajax' %}';
-    var queriesDataUrl = '{% url 'monitor-queries-stats-ajax' %}';
-    var tagsDataUrl = '{% url 'monitor-tags-stats-ajax' %}';
-    var downloadsDataUrl = '{% url 'monitor-downloads-stats-ajax' %}';
-    var donationsDataUrl = '{% url 'monitor-donations-stats-ajax' %}';
-    var soundsDataUrl = '{% url 'monitor-sounds-stats-ajax' %}';
-    var usersDataUrl = '{% url 'monitor-users-stats-ajax' %}';
-    var activeUsersDataUrl = '{% url 'monitor-active-users-stats-ajax' %}';
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/search/facet.html b/templates_bw/search/facet.html
deleted file mode 100644
index e1e8adc82..000000000
--- a/templates_bw/search/facet.html
+++ /dev/null
@@ -1,50 +0,0 @@
-{% load bw_templatetags %}
-
-<div class="bw-search__filter-section">
-    <div class="bw-search__filter-section-name caps text-light-grey between">
-        <span>{{ title }}</span>
-        {% comment %}
-        <span class="bw-search__filter-section-collapse">
-            <button class="btn-neutral" title="Collapse section">{% bw_icon 'bar' %}</button>
-        </span>
-        {% endcomment %}
-    </div>
-    {% ifequal type "checkbox" %} {% comment %}This type of facet is no used so far{% endcomment %}
-        <ul class="bw-search__filter-value-list">
-            {% for f in facet %}
-                <li class="bw-search__filter-value v-padding-1">
-                    <label for="{{ f.id }}" class="between w-100">
-                        <div class="bw-search__filter-checkbox">
-                            <input type="checkbox" class="bw-checkbox" id="{{ f.id }}" onchange="">
-                        </div>
-                        <div class="bw-search__filter-name">
-                            {{ f.display_name }}
-                            <div class="bw-search__filter-count">({{ f.count|bw_intcomma }})</div>
-                        </div>
-                    </label>
-                </li>
-            {% endfor %}
-        </ul>
-    {% endifequal %}
-    {% ifequal type "list" %}
-        <ul class="bw-search__filter-value-list">
-            {% for f in facet %}
-                <li class="bw-search__filter-value v-padding-1">
-                    <div class="bw-search__filter-name">
-                        <a href="{{ f.add_filter_url }}" class="bw-link--black">{% if f.icon %}{% bw_icon f.icon %}{% endif %}{{ f.display_name }}</a>
-                        <div class="bw-search__filter-count padding-left-1">({{ f.count|bw_intcomma }})</div>
-                    </div>
-                </li>
-            {% endfor %}
-        </ul>
-    {% endifequal %}
-    {% ifequal type "cloud" %}
-        <div class="bw-search__filter-tags-list">
-            {% for f in facet %}
-                {% bw_tag f.display_name 1 '' f.add_filter_url f.weight %}
-            {% endfor %}
-        </div>
-    {% endifequal %}
-    <div class="divider-light"></div>
-</div>
-
diff --git a/templates_bw/search/search.html b/templates_bw/search/search.html
deleted file mode 100644
index 018b734cb..000000000
--- a/templates_bw/search/search.html
+++ /dev/null
@@ -1,362 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-{% load util %}
-{% load search %}
-{% load bw_templatetags %}
-{% load display_sound %}
-{% load display_pack %}
-{% load tags %}
-
-{% block title %}Search{% endblock %}
-
-{% block navbar %}{% if not tags_mode %}{% include 'molecules/navbar_search_page.html' %}{% else %}{% include 'molecules/navbar.html' %}{% endif %}{% endblock %}
-
-{% block content %}
-
-<div class="container">
-    {% if error_text %}
-    <div class="navbar-space-filler v-spacing-3 v-spacing-top-2">
-        <div class="v-spacing-6 v-spacing-top-4">
-            <p class="v-spacing-4">{{ error_text }}</p>
-            <p><button onclick="window.history.back();" class="btn-primary">Go back</button></p>
-        </div>
-    </div>
-    {% else %}
-    <div class="navbar-space-filler v-spacing-3 v-spacing-top-2">
-        {% if initial_tagcloud %}
-        <section id="tags-mode-input-section" class="v-spacing-5">
-            <h3 class="v-spacing-5 text-light-grey center">Choose a tag to start browsing</h3>
-            {% for tag in initial_tagcloud|add_sizes:"count:0.1:1.0" %}
-            {% bw_tag tag.name 1 '' tag.browse_url tag.size %}
-            {% endfor %}
-        </section>
-        {% else %}
-        <form method="get" id="search_form" action="{% if not tags_mode %}{% url 'sounds-search' %}{% else %}{% url 'tags' %}{% endif %}">
-            
-            <div class="v-spacing-5 {% if tags_mode %}display-none{% endif %}">
-                <div class="middle center">
-                    <div class="bw-search__input_wrapper"><i class="bw-icon-search input-icon text-light-grey"></i><input id="search-input-browse" name="q" type="text" value="{{ search_query }}" placeholder="Search {% if not only_sounds_with_pack %}sounds{% else %}packs{% endif %}..." class="bw-search__input" autocomplete="off"/></div>
-                    <input id="filter_query" type="hidden" name="f" value="{{filter_query}}" />
-                    <input id="weights" type="hidden" name="w" value="{{weights}}" />
-                    <input id="tags-mode" type="hidden" name="tm" value="{% if tags_mode %}1{% else %}0{% endif %}" />  {% comment %}This is used so that we can know from JS whether we are in tags mode or not{% endcomment %}
-                    <span class="bw-search_remove-query" id="remove-content-search">{% bw_icon 'close' %}</span>
-                </div>
-            </div>
-            
-            {% if tags_mode %}
-            <div id="tags-mode-input-section" class="v-spacing-5">
-                <div class="between middle">
-                    <h3>
-                        <span class="text-light-grey h-spacing-1">Sounds tagged as</span>
-                        {% for tag in tags_in_filter %}
-                        {{ tag }}{% if not forloop.last %}<span class="h-spacing-left-1 h-spacing-1 text-light-grey">·</span>{% endif %}
-                        {% endfor %}
-                    </h3>
-                    {% bw_follow_tags_widget %}
-                </div>
-            </div>
-            {% endif %}
-            
-            <div>
-                <div class="divider-light"></div>
-                <div class="padding-3 v-padding-2 between font-weight-bold middle">
-                    {% if not only_sounds_with_pack %}
-                    <div class="col-4">{% if non_grouped_number_of_results > 0 %}{{ non_grouped_number_of_results|bw_intcomma }}{% else %}{{ paginator.count|bw_intcomma }}{% endif %} sound{{ non_grouped_number_of_results|pluralize }}</div>
-                    {% else %}
-                    <div class="col-4">{{ paginator.count|bw_intcomma }} pack{{ paginator.count|pluralize }}</div>
-                    {% endif %}
-                    {% comment %}
-                    <div class="bw_search-tab">Sounds</div>
-                    {% endcomment %}
-                    {% comment %}
-                    This section of the UI show allow to choose between different search modes:
-                    sounds and packs. However, this is currently not implemented in the backend so we don't
-                    enable this feature. Instead, we add here the element to toggle advanced search options.
-                    In the future we might need to redesign that.
-                    {% endcomment %}
-                    <div class="col-4 middle">
-                        <a href="#" class="bw-link--grey-light" id="toggle_advanced_search_options"></a>
-                        {% if has_advanced_search_settings_set %}<span class="text-red h-spacing-left-1 text-44 line-height-14 padding-bottom-1" title="There are active filters in the advanced search options">·</span>{% endif %}
-                    </div>
-                    <div class="browse__search-overview-sorter">
-                        <span class="font-weight-normal text-light-grey d-none d-md-inline">Sort by:</span>
-                        <select name="s" id="sort-by">
-                            {% for option in sort_options %}
-                            <option value="{{option.1}}"{% ifequal option.1 sort %}selected="selected"{% endifequal %}>{{option.0}}</option>
-                            {% endfor %}
-                        </select>
-                    </div>
-                </div>
-                <div class="divider-light"></div>
-                <div id="advanced-search-options" class="{% if not advanced == "1" or advanced_search_closed_on_load %}display-none{% endif %}">
-                    <div class="v-padding-2 between">
-                        <input id="advanced_search_hidden" type="hidden" name="advanced" value="{% if advanced == "1" and not advanced_search_closed_on_load %}1{% else %}0{% endif %}" />
-                        
-                        <div class="col-md-4 bw-search__advanced-search-filter-section">
-                            <div class="bw-search__filter-section-name caps text-light-grey between">
-                                <span>Search in</span>
-                            </div>
-                            <div class="row no-gutters v-spacing-top-2 {% if tags_mode %}opacity-020{% endif %}">
-                                <div class="col-md-5">
-                                    <ul class="bw-search__filter-value-list no-margins">
-                                        <li class="bw-search__filter-value v-padding-1">
-                                            <label class="between w-100">
-                                                <div class="bw-search__filter-checkbox">
-                                                    <input type="checkbox" class="bw-checkbox" on name="a_tag" {% if a_tag %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
-                                                </div>
-                                                <div class="bw-search__filter-name">Tags</div>
-                                            </label>
-                                        </li>
-                                        <li class="bw-search__filter-value v-padding-1">
-                                            <label class="between w-100">
-                                                <div class="bw-search__filter-checkbox">
-                                                    <input type="checkbox" class="bw-checkbox" name="a_filename" {% if a_filename %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
-                                                </div>
-                                                <div class="bw-search__filter-name">Sound name</div>
-                                            </label>
-                                        </li>
-                                        <li class="bw-search__filter-value v-padding-1">
-                                            <label class="between w-100">
-                                                <div class="bw-search__filter-checkbox">
-                                                    <input type="checkbox" class="bw-checkbox" name="a_description" {% if a_description %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
-                                                </div>
-                                                <div class="bw-search__filter-name">Description</div>
-                                            </label>
-                                        </li>
-                                    </ul>
-                                </div>
-                                <div class="col-md-5">
-                                    <ul class="bw-search__filter-value-list no-margins">
-                                        <li class="bw-search__filter-value v-padding-1">
-                                            <label class="between w-100">
-                                                <div class="bw-search__filter-checkbox">
-                                                    <input type="checkbox" class="bw-checkbox" name="a_packname" {% if a_packname %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
-                                                </div>
-                                                <div class="bw-search__filter-name">Pack name</div>
-                                            </label>
-                                        </li>
-                                        <li class="bw-search__filter-value v-padding-1">
-                                            <label class="between w-100">
-                                                <div class="bw-search__filter-checkbox">
-                                                    <input type="checkbox" class="bw-checkbox" name="a_soundid" {% if a_soundid %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
-                                                </div>
-                                                <div class="bw-search__filter-name">Sound ID</div>
-                                            </label>
-                                        </li>
-                                        <li class="bw-search__filter-value v-padding-1">
-                                            <label class="between w-100">
-                                                <div class="bw-search__filter-checkbox">
-                                                    <input type="checkbox" class="bw-checkbox" name="a_username" {% if a_username %}checked{% endif %} {% if tags_mode %}disabled{% endif %}/>
-                                                </div>
-                                                <div class="bw-search__filter-name">Username</div>
-                                            </label>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-4 bw-search__advanced-search-filter-section">
-                            <div class="bw-search__filter-section-name caps text-light-grey between">
-                                <span>Duration</span>
-                            </div>
-                            <div class="bw-search__filter-tags-list bw-search__filter-duration">
-                                <input id="filter_duration_min" class="bw-search_input-duration v-spacing-1" type="text" value="0" /> - <input id="filter_duration_max" class="bw-search_input-duration" type="text" value="*" /> <span>seconds</span>
-                            </div>
-                        </div>
-                        
-                        <div class="col-md-4 bw-search__advanced-search-filter-section">
-                            <div class="bw-search__filter-section-name caps text-light-grey between">
-                                <span>Other</span>
-                            </div>
-                            <ul class="bw-search__filter-value-list">
-                                <li class="bw-search__filter-value v-padding-1">
-                                    <label class="between w-100" title="Only find sounds that have geolocation information">
-                                        <div class="bw-search__filter-checkbox">
-                                            <input id="filter_is_geotagged" type="checkbox" class="bw-checkbox"/>
-                                        </div>
-                                        <div class="bw-search__filter-name">Only geotagged sounds</div>
-                                    </label>
-                                </li>
-                                <li class="bw-search__filter-value v-padding-1">
-                                    <label class="between w-100" title="Only find sounds that are a remix of other sounds or have been remixed">
-                                        <div class="bw-search__filter-checkbox">
-                                            <input id="filter_in_remix_group" type="checkbox" class="bw-checkbox"/>
-                                        </div>
-                                        <div class="bw-search__filter-name">Only remix sounds</div>
-                                    </label>
-                                </li>
-                                <li class="bw-search__filter-value v-padding-1">
-                                    <label class="between w-100 {% if disable_group_by_pack_option %}opacity-020{% endif %}" title="Group search results so that multiple sounds of the same pack only represent one item">
-                                        <div class="bw-search__filter-checkbox">
-                                            <input id="group_by_pack" type="checkbox" class="bw-checkbox" {% if group_by_pack_in_request == "1" %}checked{% endif %} {% if disable_group_by_pack_option %}disabled="disabled"{% endif %}/>
-                                            <input id="group_by_pack_hidden" type="hidden" name="g" {% ifequal group_by_pack_in_request "1" %}value="1"{% else %}value=""{% endifequal %} />
-                                        </div>
-                                        <div class="bw-search__filter-name">Group sounds by pack</div>
-                                    </label>
-                                </li>
-                                <li class="bw-search__filter-value v-padding-1">
-                                    <label class="between w-100 {% if disable_only_sounds_by_pack_option %}opacity-020{% endif %}" title="Display search results as packs rather than individual sounds">
-                                        <div class="bw-search__filter-checkbox">
-                                            <input id="only_sounds_with_pack" type="checkbox" class="bw-checkbox" {% if only_sounds_with_pack_in_request == "1" %}checked{% endif %} {% if disable_only_sounds_by_pack_option %}disabled="disabled"{% endif %}/>
-                                            <input id="only_sounds_with_pack_hidden" type="hidden" name="only_p" {% ifequal only_sounds_with_pack_in_request "1" %}value="1"{% else %}value=""{% endifequal %} />
-                                        </div>
-                                        <div class="bw-search__filter-name">Display results as packs</div>
-                                    </label>
-                                </li>
-                                <li class="bw-search__filter-value v-padding-1">
-                                    <label class="between w-100" title="Dipslay search results in a grid so that more sounds are visible per search results page">
-                                        <div class="bw-search__filter-checkbox">
-                                            <input id="use_compact_mode" type="checkbox" class="bw-checkbox" {% if use_compact_mode %}checked{% endif %}/>
-                                            <input id="use_compact_mode_hidden" type="hidden" name="cm" value="{{ use_compact_mode|yesno:"1,0" }}"/>
-                                        </div>
-                                        <div class="bw-search__filter-name">Display results in grid</div>
-                                    </label>
-                                </li>
-                            </ul>
-                        </div>
-                    </div>
-                    <div class="v-spacing-4 center">
-                        <button id="avanced-search-apply-button" class="btn-primary" disabled>Apply advanced search filters</button>
-                    </div>
-                    <div class="divider-light"></div>
-                </div>
-            </div>
-        </form>
-        {% endif %}
-    </div>
-    {% if not initial_tagcloud %}
-    <div class="row">
-        <div class="col-12 center v-spacing-top-negative-2 d-md-none">
-            <div data-target="collapsable-filters" data-show-text="Show filters" data-hide-text="Hide filters" data-hide-on-load class="collapsable-toggle v-spacing-top-2 font-weight-bold text-light-grey"></div>
-        </div>
-        
-        <aside class="col-md-4 col-lg-3 collapsable-block md-max-h-100" id="collapsable-filters">
-            {% if tags_mode %}
-            {% if facets.tag and facets.tag|length > 1 %}
-            {% display_facet "tag" facets.tag "cloud" "Add Related Tags" %}
-            {% endif %}
-            {% endif %}
-            
-            {% if facets.license and facets.license|length > 1 %}
-            {% display_facet "license" facets.license "list" "Licenses" %}
-            {% endif %}
-            
-            {% if not tags_mode %}
-            {% if facets.tag and facets.tag|length > 1 %}
-            {% display_facet "tag" facets.tag "cloud" "Related Tags" %}
-            {% endif %}
-            {% endif %}
-            
-            {% if facets.type and facets.type|length > 1 %}
-            {% display_facet "type" facets.type "list" "Type" %}
-            {% endif %}
-            
-            {% if facets.samplerate and facets.samplerate|length > 1 %}
-            {% display_facet "samplerate" facets.samplerate "list" "Samplerate" %}
-            {% endif %}
-            
-            {% if facets.bitdepth and facets.bitdepth|length > 1 %}
-            {% display_facet "bitdepth" facets.bitdepth "list" "Bitdepth" %}
-            {% endif %}
-            
-            {% if facets.bitrate and facets.bitrate|length > 1 %}
-            {% display_facet "bitrate" facets.bitrate "list" "Bitrate" %}
-            {% endif %}
-            
-            {% if facets.channels and facets.channels|length > 1 %}
-            {% display_facet "channels" facets.channels "list" "Channels" %}
-            {% endif %}
-            
-            {% if not only_sounds_with_pack %}
-            {% if facets.grouping_pack and facets.grouping_pack|length > 1 %}
-            {% display_facet "grouping_pack" facets.grouping_pack "list" "Packs"%}
-            {% endif %}
-            {% endif %}
-            
-            {% if facets.username and facets.username|length > 1 %}
-            {% display_facet "username" facets.username "cloud" "Related users" %}
-            {% endif %}
-        </aside>
-        
-        <div class="col-12 divider-light d-md-none v-spacing-top-3 v-spacing-3"></div>
-        
-        <main class="col-12 col-md-8 col-lg-9 col-extra-left-padding-large-md">
-            {% if filter_query_split %}
-            <div class="v-spacing-3 v-spacing-top-2 line-height-33">
-                {% for filter in filter_query_split %}
-                <a class="no-hover btn-inverse bw-search__active-filters-button" href="/search/?advanced={{ advanced }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&s={{ sort }}&cluster_id={{ filter.cluster_id }}&w={{ weights }}&q={{search_query}}&f={{ filter.remove_url }}" title="Remove this filter">
-                    {{ filter.name }}<span class="h-spacing-left-1">{% bw_icon 'close' %} </span>
-                </a>
-                {% endfor %}
-            </div>
-            {% endif %}
-            <div class="v-spacing-6 v-spacing-top-2">
-                {% if paginator.count > 0 %}
-                {% if use_compact_mode %}
-                <div class="row">
-                    {% for result in docs %}
-                    <div class="col-6 col-lg-4">
-                        {% if not only_sounds_with_pack %}
-                        {% display_sound_small result.sound %}
-                        {% if result.n_more_in_group and result.sound.pack_id is not None %}
-                        <p class="text-grey text-right v-spacing-top-negative-2">
-                            {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:"{{ result.sound.pack_id }}_{{ result.sound.pack_name|urlencode }}"+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from pack:</a> <a class="bw-link--grey" href="{% url 'pack' result.sound.username result.sound.pack_id %}">{{ result.sound.pack_name|truncate_string:35 }}</a>
-                        </p>
-                        {% endif %}
-                        {% else %}
-                        {% display_pack result.pack %}
-                        <p class="text-grey text-right v-spacing-top-negative-2">
-                            {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:{{ result.pack.pack_filter_value }}+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from pack</a>
-                        </p>
-                        {% endif %}
-                    </div>
-                    {% endfor %}      
-                </div>
-                {% else %}
-                {% for result in docs %}
-                <div class="bw-search__result">
-                    {% if not only_sounds_with_pack %}
-                    {% display_sound_middle result.sound %}
-                    {% if result.n_more_in_group and result.sound.pack_id is not None %}
-                    <div class="text-grey text-right v-spacing-top-negative-1 v-spacing-2">
-                        {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:"{{ result.sound.pack_id }}_{{ result.sound.pack_name|urlencode }}"+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from same pack</a>
-                    </div>
-                    {% endif %}
-                    {% else %}
-                    {% display_pack_big result.pack %}
-                    <div class="text-grey text-right v-spacing-top-negative-1 v-spacing-2 padding-right-1">
-                        {% bw_icon 'plus' %} <a href='/search/?q={{ search_query }}&f=grouping_pack:{{ result.pack.pack_filter_value }}+{{filter_query_link_more_when_grouping_packs }}&s={{ sort }}&g={{ group_by_pack_in_request }}&only_p={{ only_sounds_with_pack_in_request }}&w={{ weights }}&advanced={{ advanced }}&a_tag={{ a_tag }}&a_filename={{ a_filename }}&a_description={{ a_description }}&a_packname={{ a_packname }}&a_soundid={{ a_soundid }}&a_username={{ a_username }}'>See {{result.n_more_in_group|add:1|bw_intcomma}} result{{ result.n_more_in_group|add:1|pluralize }} from this pack</a>
-                    </div>
-                    {% endif %}
-                    {% if not forloop.last %}
-                    <div class="divider-light v-spacing-2"></div>
-                    {% endif %}
-                </div>
-                {% endfor %}
-                {% endif %}
-                {% else %}
-                <div class="v-spacing-7 v-spacing-top-6 w-100">
-                    <h5>No results... &#128543</h5>
-                    <p class="text-grey v-spacing-2">Please try another query or change the filters</p>
-                </div>
-                {% endif %}
-            </div>
-            <div class="v-spacing-6">
-                {% bw_paginator paginator page current_page request "sound" non_grouped_number_of_results %}
-            </div>
-        </main>
-    </div>
-    {% endif %}
-    {% endif %}
-</div>
-{% endblock %}
-
-{% block extrabody %}
-{% if not error_text and not initial_tagcloud %}
-{% comment %}If there were errors reaching the search server, don't even load the
-JS bits because we only display the error message{% endcomment %}
-<script src="{% static 'bw-frontend/dist/search.js' %}"></script>
-{% endif %}
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/search/search_forum.html b/templates_bw/search/search_forum.html
deleted file mode 100644
index a5b10054d..000000000
--- a/templates_bw/search/search_forum.html
+++ /dev/null
@@ -1,73 +0,0 @@
-{% extends "simple_page.html" %}
-{% load bw_templatetags %}
-{% load display_forum_objects %}
-
-{% block title %}Forums search{% endblock %}
-{% block page-title %}Freesound Forums Search{% endblock %}
-
-{% block page-content %}
-    <div class="divider-light v-spacing-top-4 v-spacing-2"></div>
-    <div class="row middle">
-        <div class="col-md-6">
-            <ul class="navbar-forums-hot navbar-breadcrumb">
-                <li class="nav-item">
-                      <a class="nav-link" href="{% url "forums-forums" %}">Freesound Forums</a>
-                </li>
-                {% if current_forum %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="{{current_forum.get_absolute_url}}">{{ current_forum.name }}</a>
-                    </li>
-                {% endif %}
-                <li class="nav-item text-16">
-                    Search {% if username_filter %} <a class="h-spacing-left-4 no-hover btn-inverse bw-search__active-filters-button" href="{{ remove_username_filter_url }}" title="Remove this filter" aria-label="Remove this filter">
-                        user:{{ username_filter }}<span class="h-spacing-left-1">{% bw_icon 'close' %} </span>
-                    </a> {% endif %}
-                </li>
-            </ul>
-        </div>
-        <div class="col-md-6 v-spacing-1 v-spacing-top-1 between middle">
-            <form method="get" action="{% url "forums-search" %}" class="w-75">
-                <input type="hidden" name="advanced_search"  value="0"/>
-                <input type="hidden" name="forum" value="{% if current_forum %}{{current_forum.name_slug}}{% else %}{% endif %}"/>
-                <div class="input-wrapper w-100">
-                    <i class="bw-icon-search input-icon"></i><input name="q" type="search" placeholder="{% if current_forum %}Search in this forum...{% else %}Search in all forums...{% endif %}" autocomplete="off" value="{{ search_query }}">
-                </div>
-            </form>
-            <div class="text-grey">
-                {% if paginator %}
-                    {{ paginator.count|bw_intcomma }} post{{ paginator.count|pluralize }}
-                {% else %}
-                    0 posts
-                {% endif %}
-            </div>
-        </div>
-    </div>
-    <div class="divider-light v-spacing-top-2"></div>
-
-    {% if error_text %}
-        <div class="v-spacing-3 v-spacing-top-4">
-            <div class="v-spacing-6 v-spacing-top-4">
-                <p class="v-spacing-4">{{ error_text }}</p>
-                <p><button onclick="window.history.back();" class="btn-primary">Go back</button></p>
-            </div>
-        </div>
-    {% else %}
-        <div class="v-spacing-top-4">
-            {% for post in posts  %}
-                {% display_post post 0 0 True False False results.highlighting %}
-                {% if not forloop.last %}
-                    <div class="divider-light v-spacing-top-3 v-spacing-3"></div>
-                {% endif %}
-            {% empty %}
-                <div class="v-spacing-7 v-spacing-top-6 w-100 text-center">
-                    <h5>No results... &#128543</h5>
-                    <p class="text-grey v-spacing-2">Please try another query</p>
-                </div>
-            {% endfor %}
-        </div>
-        <div class="v-spacing-top-5">
-            {% bw_paginator paginator page current_page request "" -1 %}
-        </div>
-    {% endif %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/sounds/display_pack.html b/templates_bw/sounds/display_pack.html
deleted file mode 100644
index 80ba001be..000000000
--- a/templates_bw/sounds/display_pack.html
+++ /dev/null
@@ -1,131 +0,0 @@
-{% load cache %}
-{% load util %}
-{% load display_sound %}
-{% load bw_templatetags %}
-
-{% if size == 'small' %}
-    <div class="bw-display-pack v-spacing-3 overfow-hidden">
-        <div class="bw-carousel-container">
-            <div class="bw-carousel-wrapper">
-                <div class="bw-carousel with-dots dots-distance-02">
-                    {% for sound_data in pack.selected_sounds_data %}
-                        <div>
-                            {% if show_bookmark_similarity_buttons %}
-                            {% display_sound_small_no_sound_object sound_data %}
-                            {% else %}
-                            {% display_sound_small_no_sound_object_no_bookmark sound_data %}
-                            {% endif %}
-                        </div>
-                    {% empty %}
-                        <div class="bw-player-small-thumbnail-empty-space"></div>
-                    {% endfor %}
-                </div>
-            </div>
-        </div>
-        <div class="between line-height-percentage-150 v-spacing-top-1">
-            <h5 class="ellipsis">
-                <span class="bw-icon-stack h-spacing-1 text-light-grey"></span><a class="bw-link--black" href="{% url "pack" pack.user.username pack.id %}">{{ pack.name }}</a>
-            </h5>
-            {% if pack.name|length <= 30 %}{% include 'sounds/display_pack_small_icons.html' %}{% endif %}
-        </div>
-        <div class="between">
-            <div>
-                <a href="{% url "account" pack.user.username %}" title="Username: {{ pack.user.username }}">{{ pack.user.username|truncate_string:15 }}</a><span class="text-grey h-spacing-left-1 h-spacing-1">·</span><a href="{{ pack.get_pack_sounds_in_search_url }}" class="bw-link--grey">{{ pack.num_sounds|formatnumber }} sound{{ pack.num_sounds|pluralize }}</a>
-            </div>
-            {% if pack.name|length > 30 %}{% include 'sounds/display_pack_small_icons.html' %}{% endif %}
-        </div>
-        <div>
-            <span class="text-grey">{{ pack.created|timesince }} ago</span>
-        </div>
-        <div class="v-spacing-top-1 overflow-hidden" style="max-height:54px;">
-            {% if pack.description %}
-                {{ pack.description|striptags|safe|truncatechars_html:55 }}
-            {% else %}
-                This pack has no description.
-            {% endif %}
-        </div>
-    </div>
-    {% if pack.show_unpublished_sounds_warning %}
-    {% with pack.num_sounds_unpublished as num_sounds_unpublished %}
-        {% if num_sounds_unpublished > 0 %}
-            <div class="v-spacing-3 v-spacing-top-negative-2 text-blue">
-                {% bw_icon "notification" %}Has {{ num_sounds_unpublished}} unpublished sound{{ num_sounds_unpublished|pluralize }}
-            </div>
-        {% endif %}
-    {% endwith %}
-    {% endif %}
-{% elif size == 'big' %}
-    <div class="bw-display-pack">
-        {% if pack.selected_sounds_data %}
-        <div class="row no-margins" style="margin-left: -15px">
-            {% for sound_data in pack.selected_sounds_data %}
-                <div class="col-4">
-                    {% if show_bookmark_similarity_buttons %}
-                    {% display_sound_small_no_sound_object sound_data %}
-                    {% else %}
-                    {% display_sound_small_no_sound_object_no_bookmark sound_data %}
-                    {% endif %}
-                </div>
-            {% endfor %}
-        </div>
-        {% else %}
-            <div class="bw-player-small-thumbnail-empty-space"></div>
-        {% endif %}
-        <div class="between v-spacing-top-1">
-            <div>
-                <h5><span class="bw-icon-stack h-spacing-1 text-light-grey"></span><a class="bw-link--black ellipsis" href="{% url "pack" pack.user.username pack.id %}" >{{ pack.name }}</a></h5>
-            </div>
-            <div class="text-grey text-right between padding-right-1">
-                <div style="min-width:130px;" class="top right">{% bw_generic_stars pack.avg_rating %}<span class="text-grey h-spacing-left-1">{% if pack.num_ratings %}({{ pack.num_ratings|formatnumber }}){% endif %}</span></div>
-            </div>
-        </div>
-        <div class="between">
-            <div class="text-black v-spacing-top-1 padding-right-2 v-spacing-1">
-                {% if pack.description %}{{ pack.description|striptags|safe|truncatewords_html:20 }}
-                {% else %}This pack has no description.{% endif %}
-            </div>
-            {% with pack.get_pack_tags_bw as tags %}
-                {% if tags %}
-                    <div class="right wrap">
-                    {% for tag in tags|slice:":5" %}
-                        {% bw_tag tag.name 1 '' tag.browse_url %}
-                    {% endfor %}
-                    </div>
-                {% endif %}
-            {% endwith %}
-        </div>
-        <div class="between middle v-spacing-2">
-            <div class="">
-                <div class="middle text-grey h-spacing-1">
-                    <div class="h-spacing-1">
-                        {% bw_user_avatar pack.user_profile_locations.avatar.S.url pack.user.username 32 %}
-                    </div>
-                    <a href="{% url 'account' pack.user %}">{{ pack.user | truncate_string:15 }}</a>
-                    <span class="h-spacing-left-1 text-light-grey">{{ pack.created|date:"F jS, Y" }}</span>
-                </div>
-            </div>
-            <div class="text-light-grey right padding-right-1">
-                <div title="{{ pack.num_sounds|bw_intcomma }} sound{{ pack.num_sounds|pluralize }}">
-                    <a href="{{ pack.get_pack_sounds_in_search_url }}" class="bw-link--grey-light">
-                        <span class="bw-icon-wave"></span> {{ pack.num_sounds|formatnumber }}
-                    </a>
-                </div>
-                {% if pack.has_geotags %}
-                    <div class="h-spacing-left-2" title="Pack has geotags">
-                        <a href="{% url 'pack-geotags' pack.user.username pack.id %}" class="bw-link--grey-light">
-                            <span class="bw-icon-pin"></span>
-                        </a>
-                    </div>
-                {% endif %}
-                <div class="h-spacing-left-2" title="{{ pack.num_downloads|bw_intcomma }} download{{ pack.num_downloads|pluralize }}">
-                    <a href="{% url 'pack-downloaders' pack.user.username pack.id %}" class="bw-link--grey-light">
-                        <span class="bw-icon-download"></span> {{ pack.num_downloads|formatnumber }}
-                    </a>
-                </div>
-                <div class="h-spacing-left-2" title="License: {{ pack.license_summary_name_and_id.0 }}">
-                    <span class="bw-icon-{{ pack.license_bw_icon_name }}"></span>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endif %}
diff --git a/templates_bw/sounds/display_sound.html b/templates_bw/sounds/display_sound.html
deleted file mode 100644
index 6f0dc43e2..000000000
--- a/templates_bw/sounds/display_sound.html
+++ /dev/null
@@ -1,206 +0,0 @@
-{% load cache %}
-{% load util %}
-{% load bw_templatetags %}
-
-{% if sound %}
-    {% if player_size == 'small' %}
-        {% comment %}This is the default size which includes the basic player with sound metadatata{% endcomment %}
-        {% if is_explicit %}
-            <div class="explicit-sound-blocker blocker-small">
-                <p><b>Warning</b>: this sound may be inappropriate for some users</p>
-                <button class="btn-primary">Show anyway</button>
-            </div>
-        {% endif %}
-        <div class="v-spacing-3 overfow-hidden {% if is_explicit %}blur{% endif %}" aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
-            {% include "sounds/player.html" %}
-            {% cache 43200 bw_display_sound sound.id player_size is_authenticated %}
-            {% if show_rate_widget %}<div class="display-none bw-player__rate__widget">{% bw_sound_stars sound %}</div>{% endif %}
-            <div class="between line-height-percentage-150 v-spacing-top-1">
-                <h5 class="ellipsis">
-                    <a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}">{{ sound.original_filename }}</a>
-                </h5>
-                {% if sound.original_filename|length <= 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
-            </div>
-            <div class="between">
-                <div>
-                    <a href="{% url 'account' sound.username %}" title="Username: {{ sound.username }}">{{ sound.username|truncate_string:15 }}</a>
-                </div>
-                {% if sound.original_filename|length > 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
-            </div>
-            <div>
-                <span class="text-grey">{{ sound.created|timesince }} ago</span>
-            </div>
-            <div class="v-spacing-top-1 overflow-hidden" style="max-height:54px;">
-                {{ sound.description|striptags|safe|truncatechars_html:55 }}
-            </div>
-            {% endcache %}
-        </div>
-        {% if sound.show_moderation_ticket and sound.ticket_key %}
-        <div class="v-spacing-3 v-spacing-top-negative-2">
-            <a class="bw-link--black" href="{% url 'tickets-ticket' sound.ticket_key %}">{% bw_icon "file-text" %} See moderation ticket</a>
-        </div>
-        {% endif %}
-        {% if sound.show_processing_status %}
-        <div class="v-spacing-3 v-spacing-top-negative-2">
-            {% include 'sounds/sound_state_processing_indicator.html' %}
-        </div>
-        {% endif %}
-        {% if sound.show_moderation_status %}
-        <div class="v-spacing-3 v-spacing-top-negative-2">
-            {% include 'sounds/sound_state_moderation_indicator.html' %}
-        </div>
-        {% endif %}
-
-    {% elif player_size == 'middle' %}
-        {% comment %}This is the default player shown in search results and in places where the sound takes
-        "full" width {% endcomment %}
-        {% if is_explicit %}
-            <div class="explicit-sound-blocker blocker-small blocker-force-almost-full-width">
-                <p><b>Warning</b>: this sound may be inappropriate for some users</p>
-                <button class="btn-primary">Show anyway</button>
-            </div>
-        {% endif %}
-        <div class="{% if is_explicit %}blur{% endif %}" aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
-            <div class="row no-gutters no-wrap">
-                <div class="col-4 col-lg-3">
-                    {% include "sounds/player.html" %}
-                </div>
-                {% cache 43200 bw_display_sound sound.id player_size is_authenticated %}
-                <div class="col-8 col-lg-9">
-                    <div class="padding-left-3">
-                        <div class="between">
-                            <div>
-                                <h5 class="v-spacing-1"><a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}" title="{{ sound.original_filename }}">{{ sound.original_filename|truncate_string:52 }}</a></h5>
-                            </div>
-                            <div class="text-grey text-right between stars-margin-top-middle-player">
-                                <div style="min-width:130px;" class="top right">{% bw_sound_stars sound %}<span class="bw-rating__count text-grey h-spacing-left-1">{{ sound.get_ratings_count_text_short }}</span></div>
-                            </div>
-                        </div>
-                        <div class="max-h-60px-md-50px text-black overflow-hidden v-spacing-1">{{ sound.description|striptags|safe|truncatewords_html:28 }}</div>
-                        {% for tag in sound.tag_array|slice:":5" %}
-                            {% bw_tag tag %}
-                        {% endfor %}
-                        {% if sound.moderation_state != 'OK' %}
-                        <div class="right">
-                            {% include 'sounds/sound_state_moderation_indicator.html' %}
-                        </div>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-            <div class="between v-spacing-top-1 v-spacing-2">
-                <div class="middle text-grey h-spacing-1">
-                    <div class="row no-gutters">
-                        <div class="col-12 col-lg-12 middle">
-                            <div class="h-spacing-1">
-                                {% bw_user_avatar user_profile_locations.avatar.S.url sound.username 32 %}
-                            </div>
-                            <a href="{% url 'account' sound.username %}">{{ sound.username | truncate_string:15 }}</a>
-                            <div class="text-light-grey h-spacing-left-1 d-none d-lg-block no-text-wrap">{{ sound.created|date:"F jS, Y" }}</div>
-                        </div>
-                        <div class="col-lg-4 d-lg-none text-light-grey">
-                            {{ sound.created|date:"F jS, Y" }}
-                        </div>
-                    </div>
-                </div>
-                <div class="middle text-light-grey bw_sound-info-extended right">
-                    {% if sound.pack_id %}
-                    <div class="h-spacing-left-2" title="Pack: {{ sound.pack_name }}">
-                        <a href="{% url 'pack' sound.username sound.pack_id %}" class="bw-link--grey-light">
-                            <span class="bw-icon-stack"></span> {{ sound.pack_name|truncatechars:20 }}
-                        </a>
-                    </div>
-                    {% endif %}
-                    {% if sound.geotag_id %}
-                    <div class="h-spacing-left-2" title="Geotag: {{ sound.get_geotag_name }}">
-                        <a href="{% url 'sound-geotag' sound.username sound.id %}" class="bw-link--grey-light">
-                            <span class="bw-icon-pin"></span> {{ sound.get_geotag_name|truncatechars:20 }}
-                        </a>
-                    </div>
-                    {% endif %}
-                    <div class="h-spacing-left-2" title="{{ sound.num_downloads }} downloads">
-                        <a href="javascript:void(0)" data-toggle="modal-default" data-modal-content-url="{% url 'sound-downloaders' sound.username sound.id %}?ajax=1" class="bw-link--grey-light">
-                            <span class="bw-icon-download"></span> {{ sound.num_downloads|formatnumber }}
-                        </a>
-                    </div>
-                    <div class="h-spacing-left-2" title="{{ sound.num_comments }} comments">
-                        <a href="{% url 'sound' sound.username sound.id %}#comments" class="bw-link--grey-light">
-                            <span class="bw-icon-comments"></span> {{ sound.num_comments|formatnumber }}
-                        </a>
-                    </div>
-                    <div class="h-spacing-left-2" title="License: {{ sound.license_name }}">
-                        <span class="bw-icon-{{ sound.license_bw_icon_name }}"></span>
-                    </div>
-                </div>
-            </div>
-        </div>
-        {% endcache %}
-
-    {% elif player_size == 'moderation' %}
-        <div class="overfow-hidden" aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
-            {% include "sounds/player.html" %}
-            <div class="between line-height-percentage-150 v-spacing-top-1">
-                <h5 class="ellipsis">
-                    <a class="bw-link--black" href="{% url 'sound' sound.username sound.id %}">{{ sound.original_filename }}</a>
-                </h5>
-                {% if sound.original_filename|length <= 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
-            </div>
-            <div class="between">
-                <div>
-                    <a href="{% url 'account' sound.username %}" title="Username: {{ sound.username }}">{{ sound.username|truncate_string:15 }}</a>
-                </div>
-                {% if sound.original_filename|length > 30 %}{% include 'sounds/display_sound_small_icons.html' %}{% endif %}
-            </div>
-            <div>
-                <span class="text-grey">{{ sound.created|timesince }} ago</span>
-            </div>
-        </div>
-        <div id="collapsable-sound-info-{{ sound.id }}-{{ random_number }}" class="v-spacing-top-1 collapsable-block">
-            {% comment %}When showing information for moderation pages we put the full description and also the tags in a collapsable element{% endcomment %}
-            {% for tag in sound.tag_array%}
-                {% bw_tag tag %}
-            {% endfor %}
-            <div class="v-spacing-top-1">
-                {{ sound.description|safe|linebreaks }}
-            </div>
-        </div>
-        <div class="text-center v-spacing-top-1 v-spacing-2">
-            <span data-target="collapsable-sound-info-{{ sound.id }}-{{ random_number }}" data-show-text="Show more info" data-hide-text="Show less info" data-max-height-when-closed="150" data-hide-on-load class="collapsable-toggle"></span>
-        </div>
-        {% if is_explicit %}
-        <div class="v-spacing-top-1">
-            <div class="text-grey">
-                {% bw_icon "notification" %} Marked as explicit
-            </div>
-        </div>
-        {% endif %}
-        <div class="v-spacing-top-1">
-            {% include 'sounds/sound_state_processing_indicator.html' %}
-        </div>
-        <div class="v-spacing-top-1">
-            {% include 'sounds/sound_state_moderation_indicator.html' %}
-        </div>
-    {% elif player_size == 'big_no_info' %}
-        {% comment %}This size includes a placeholder for the controls of the big player but shows no sound
-        metadata{% endcomment %}
-        <div aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
-        {% include "sounds/player.html" %}
-        <div class="bw-player-big__controls"></div>
-        </div>
-
-    {% elif player_size == 'small_no_info' %}
-        {% comment %}This size will be used inside a pack carousel. For this size we only include the basic
-        player and show no sound metadata{% endcomment %}
-        <div aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
-        {% include "sounds/player.html" %}
-        {% if show_rate_widget %}<div class="display-none bw-player__rate__widget">{% bw_sound_stars sound %}</div>{% endif %}
-        </div>
-
-    {% elif player_size == 'minimal' %}
-        {% comment %}This size is used in map info windows and only includes a play/stop and loop button{% endcomment %}
-        <div aria-label="Sound {{ sound.original_filename }} by {{ sound.username }}">
-        {% include "sounds/player.html" %}
-        </div>
-
-    {% endif %}
-{% endif %}
\ No newline at end of file
diff --git a/templates_bw/sounds/pack.html b/templates_bw/sounds/pack.html
deleted file mode 100644
index 30bb360f5..000000000
--- a/templates_bw/sounds/pack.html
+++ /dev/null
@@ -1,150 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-{% load tags %}
-{% load bw_templatetags %}
-{% load util %}
-{% load filter_img %}
-{% load display_sound %}
-{% load absurl %}
-{% load cache %}
-
-{% block title %}{{pack.name}} by {{pack.user.username}}{% endblock title %}
-
-{% block content %}
-    <div class="container">
-        <div class="navbar-space-filler v-spacing-7 padding-bottom-7 v-spacing-top-5">
-            <div class="row no-gutters">
-                <div class="col-md-8">
-                    <div class="bw-sound-page__information">
-                        <div class="row middle">
-                            <div class="col-10">
-                                <h1><span class="text-light-grey">Pack: </span>{{ pack.name }} </h1>
-                            </div>
-                        </div>
-                        <div class="middle v-spacing-top-2">{% bw_generic_stars pack.avg_rating %}<span class="text-grey h-spacing-left-1">{% if pack.num_ratings %}Pack sound's overall rating ({{ pack.num_ratings|formatnumber }}){% else %}Not enough ratings{% endif %}</span></div>
-                        <div class="middle bw-sound-page__user v-spacing-top-5">
-                            <div class="h-spacing-1">
-                                {% bw_user_avatar pack.user.profile.locations.avatar.M.url pack.user.username 40 %}
-                            </div>
-                            <div class="h-spacing-left-1">
-                                <a href="{% url 'account' pack.user.username %}">{{ pack.user.username | truncate_string:15 }}</a>
-                                <p class="text-grey">{{ pack.created|date:"F jS, Y" }}</p>
-                            </div>
-                            {% if pack.user != request.user  %}
-                                <div class="h-spacing-left-3">
-                                    {% if is_following %}
-                                        <a class="no-hover btn-secondary" href="{% url 'unfollow-user' pack.user.username %}?next={{ next_path }}">Unfollow</a>
-                                    {% else %}
-                                        <a class="no-hover btn-inverse" href="{% url 'follow-user' pack.user.username %}?next={{ next_path }}">Follow</a>
-                                    {% endif %}
-                                </div>
-                            {% endif %}
-                        </div>
-                        <div class="v-spacing-top-3" >
-                            {% if pack.description %}
-                                <div>
-                                    {{ pack.description|replace_img|safe|linebreaks|strip_unnecessary_br }}
-                                </div>
-                            {% endif %}
-                            <div class="v-spacing-top-3">
-                                {% for tag in pack.get_pack_tags_bw|add_sizes:"count:0.1:1.0" %}
-                                    {% bw_tag tag.name 1 '' tag.browse_url tag.size %}
-                                {% endfor %}
-                            </div>
-                        </div>
-                        <div class="v-spacing-top-5">
-                            <div class="text-center text-18 text-light-grey v-spacing-3">Latest sounds in this pack</div>
-                            {% if pack_sounds %}
-                                <div class="row">
-                                    {% for sound in pack_sounds %}
-                                        <div class="col-6 col-sm-4">
-                                            {% display_sound_small sound %}
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                                <div class="v-spacing-top-4 text-center">
-                                    <a class="no-hover" href="{% url "sounds-search" %}?f=grouping_pack:{{ pack.pack_filter_value }}&s=Date+added+(newest+first)&g=1"><button class="btn-primary">See all sounds in this pack</button></a>
-                                </div>
-                            {% else %}
-                                <div class="text-center v-spacing-top-4">
-                                    <h5>No sounds... &#128543</h5>
-                                    <div class="text-grey v-spacing-top-1">Looks like {{ pack.name }} has no sounds yet</div>
-                                </div>
-                            {% endif %}
-                        </div>
-                    </div>
-                </div>
-                <div class="col-md-4 col-extra-left-padding-large-md">
-                    <div class="divider-light v-spacing-top-6 v-spacing-5 d-md-none"></div>
-                    <div class="bw-sound__sidebar">
-                        {% cache 3600 bw_pack_stats pack.id %}
-                        <div>
-                            <ol>
-                                <li class="v-spacing-3">
-                                    {% bw_icon 'wave' 'text-light-grey' %} <a class="text-19 bw-link--black" title="This pack has {{ pack.num_sounds|bw_intcomma }} sound{{ pack.num_sounds|pluralize }}"  href="{% url "sounds-search" %}?f=grouping_pack:{{ pack.pack_filter_value }}&s=Date+added+(newest+first)&g=1" >{{ pack.num_sounds|formatnumber }} sound{{ pack.num_sounds|pluralize }}</a>
-                                </li>
-                                <li class="v-spacing-3">
-                                    {% with pack.get_total_pack_sounds_length as total_pack_sounds_length %}{% bw_icon 'clock' 'text-light-grey' %} <span class="text-19" title="The sounds of this pack together account for {{ total_pack_sounds_length|duration_hours }} hours of audio">{{ total_pack_sounds_length|duration_hours }} hours of audio</span>{% endwith %}
-                                </li>
-                                <li class="v-spacing-3">
-                                    {% bw_icon 'download' 'text-light-grey' %}<a class="text-19 bw-link--black" title="This pack has been downloaded {{ pack.num_downloads|bw_intcomma }} time{{ pack.num_downloads|pluralize }}"  href="javascript:void(0);" data-toggle="modal-default" data-modal-content-url="{% url 'pack-downloaders' pack.user.username pack.id %}?ajax=1" data-modal-activation-param="downloaders">{{ pack.num_downloads|formatnumber }} download{{ pack.num_downloads|pluralize }}</a>
-                                </li>
-                            </ol>
-                        </div>
-                        <div class="v-spacing-top-5 ellipsis middle">
-                            {% bw_icon pack.license_bw_icon_name 'text-light-grey text-30' %} <span class="text-20 h-spacing-left-2">{{ pack.license_summary_name_and_id.0 }}</span>
-                        </div>
-                        <div class="text-grey v-spacing-top-1">
-                            {{ pack.license_summary_text|safe }} {% if pack.license_summary_deed_url %}<a href="{{ pack.license_summary_deed_url }}" target="_blank" class="bw-link--black">More...</a>{% endif %}
-                        </div>
-                        {% endcache %}
-                        {% if pack.num_sounds_unpublished %}
-                            <div class="v-spacing-top-6 text-red">
-                                {% bw_icon "notification" %}This pack has {{ pack.num_sounds_unpublished}} unpublished sounds
-                            </div>
-                        {% endif %}
-                        {% if pack.num_sounds %}
-                        <div class="v-spacing-top-6">
-                            {% if request.user.is_authenticated %}
-                                <a class="no-hover btn-primary display-inline-block w-100 text-center" href="{% url 'pack-download' pack.user.username pack.id %}{{ pack.friendly_filename }}" title="Download pack">Download pack</a>
-                            {% else %}
-                                <a class="no-hover btn-primary display-inline-block w-100 text-center" href="{% url 'pack-download' pack.user.username pack.id %}{{ pack.friendly_filename }}" title="Login to download">Login to download</a>
-                            {% endif %}
-                        </div>
-                        {% endif %}
-                        {% if perms.pack.can_edit or pack.user == request.user %}
-                            <a class="no-hover btn-secondary display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'pack-edit' pack.user.username pack.id %}" title="Edit pack">Edit pack</a>
-                        {% endif %}
-                        <div class="v-spacing-top-7">
-                            <ol class="center">
-                                <li><a class="no-hover" href="https://www.facebook.com/sharer/sharer.php?u={% absurl 'short-pack-link' pack.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'facebook' 'text-30' %}</div></a></li>
-                                <li class="h-spacing-left-2"><a class="no-hover" href="https://twitter.com/share?url={% absurl 'short-pack-link' pack.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'twitter' 'text-30' %}</div></a></li>
-                                <li class="h-spacing-left-2"><a id="toggle-share-link" class="cursor-pointer no-hover"><div class="cleanIcon">{% bw_icon 'share2' 'bw-icon__inside_circle' %}</div></a></li>
-                            </ol>
-                        </div>
-
-                        <div id="share-link" class="v-spacing-top-5">
-                             <span class="text-grey">Share url: </span><br><input class="w-100" type="text" readonly value="{% absurl 'short-pack-link' pack.id %}" />
-                        </div>
-                        {% if geotags_in_pack_serialized %}
-                            <div id="pack_geotags" class="v-spacing-top-6" data-map-loaded="false">
-                                <h5 class="padding-bottom-3">Geotags in this pack</h5>
-                                <div id="static_map_wrapper"  class="map sidebar-map w-100 middle center cursor-pointer" data-pins="{{ geotags_in_pack_serialized }}"></div>
-                                <div id="map_canvas" class="map sidebar-map display-none w-100" data-geotags-url="{% url "geotags-for-pack-barray" pack.id %}"></div>
-                                <div class="v-spacing-top-2 center">
-                                    <a class="no-hover" href="{% url "pack-geotags" pack.user.username pack.id %}">See all geotags from this pack</a>
-                                </div>
-                            </div>
-                        {% endif %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-    {% bw_maps_js_scripts %}
-    <script src="{% static 'bw-frontend/dist/pack.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/sounds/pack_deleted.html b/templates_bw/sounds/pack_deleted.html
deleted file mode 100644
index b4a80d79e..000000000
--- a/templates_bw/sounds/pack_deleted.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}Deleted pack{% endblock %}
-{% block page-title %}Deleted pack{% endblock %}
-
-{% block page-content %}
-    <p class="text-grey">This pack has been deleted.</p>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/sounds/pack_edit.html b/templates_bw/sounds/pack_edit.html
deleted file mode 100644
index 3f87de523..000000000
--- a/templates_bw/sounds/pack_edit.html
+++ /dev/null
@@ -1,48 +0,0 @@
-{% extends "simple_page.html" %}
-{% load static %}
-{% load util %}
-{% load bw_templatetags %}
-{% load sounds_selector %}
-
-{% block title %}Edit pack - {{ pack.name }}{% endblock %}
-{% block page-title %}Edit pack{% endblock %}
-
-{% block page-content %}
-<div class="v-spacing-5 v-spacing-top-2">
-    <p>You can specify a <b>name</b> for the pack, a <b>description</b>, and the <b>sounds</b> that are part of the pack. You can only add <b>sounds uploaded by you</b>. Also, take into account that sounds can <b>only belong to one pack</b>. If adding sounds that already belog to other packs, these will be removed from the previous packs.
-
-    </p>
-</div>
-<div class="row no-gutters">
-    <div class="col-lg-8 offset-lg-2">
-        <h2 class="v-spacing-3">{{ pack.name }}</h2>
-        <form class="bw-form disable-on-submit" method="post" novalidate>{% csrf_token %}
-            {{ form.non_field_errors }}
-            {{ form.name.errors }}
-            {{ form.name.label_tag }}
-            {{ form.name }}
-            {{ form.description.errors }}
-            {{ form.description.label_tag }}
-            {{ form.description }}
-            <span class="helptext">{{ form.description.help_text|safe }}</span>
-            <div class="select-sounds-field v-spacing-5">
-                {{ form.pack_sounds }}
-                <label>Sounds in pack ({{ form.pack_sound_objects|length }})</label>
-                {% if not form.pack_sounds.value %}
-                <div class="v-spacing-4 v-spacing-top-2">No sounds have been added to this pack yet</div>
-                {% endif %}
-                {% sounds_selector form.pack_sound_objects %}
-                <div class="between v-spacing-top-2">
-                    <button class="btn-inverse" data-toggle="add-sounds-modal" data-selected-sounds-hidden-input-id="{{ form.pack_sounds.id_for_label }}" data-modal-url="{% url 'add-sounds-modal-pack' pack.id %}">{% bw_icon 'plus' %}Add sounds</button>
-                    <button class="btn-inverse">{% bw_icon 'trash' %}Remove selected sounds from pack</button>
-                </div>
-            </div>
-            <button class="btn-primary w-100">Save pack</button>
-        </form>
-    </div>
-</div>
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/packEdit.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/sounds/sound.html b/templates_bw/sounds/sound.html
deleted file mode 100644
index 9c70292ab..000000000
--- a/templates_bw/sounds/sound.html
+++ /dev/null
@@ -1,359 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-{% load cache %}
-{% load filter_img %}
-{% load paginator %}
-{% load util %}
-{% load ratings %}
-{% load absurl %}
-{% load flag_user %}
-{% load sound_signature%}
-{% load display_sound %}
-{% load display_user %}
-{% load bw_templatetags %}
-
-{% block title %}{{sound.original_filename}} by {{sound.user.username}}{% endblock title %}
-
-{% block head %}
-    {{ block.super }}
-    <meta property="og:title" content="{{ sound.original_filename }} by {{ sound.user.username }}" />
-    <meta property="og:type" content="song" />
-    <meta property="og:audio" content="https://{{ request.get_host }}{{ sound.locations.preview.LQ.mp3.url }}" />
-    <meta property="og:audio:artist" content="{{ sound.user.username }}" />
-    <meta property="og:audio:title" content="{{ sound.original_filename }}" />
-    <meta property="og:url" content="{% absurl 'sound' sound.user.username sound.id %}" />
-    <meta property="og:audio:type" content="application/mp3" />
-    <meta property="og:site_name" content="Freesound" />
-    <meta property="fb:admins" content="100002130282170" />
-    <meta name="twitter:card" content="player" />
-    <meta name="twitter:site" content="@freesound_dev" />
-    <meta name="twitter:title" content="{{ sound.original_filename }}" />
-    <meta name="twitter:description" content="{{sound.description}}" />
-    <meta name="twitter:image" content="{{sound.get_large_thumbnail_abs_url}}" />
-    <meta name="twitter:player" content="{% absurl 'embed-simple-sound-iframe' sound.id "full_size" %}" />
-    <meta name="twitter:player:width" content="{{ sizes.twitter_card.0 }}" />
-    <meta name="twitter:player:height" content="{{ sizes.twitter_card.1 }}" />
-    <meta name="twitter:player:stream" content="{{ sound.get_preview_abs_url }}" />
-    <meta name="twitter:player:stream:content_type" content="audio/mp4" />
-{% endblock head %}
-
-{% block content %}
-    <div class="container">
-        <div class="navbar-space-filler v-spacing-7 padding-bottom-7 v-spacing-top-5">
-            {% if is_explicit %}
-                <div class="explicit-sound-blocker">
-                    <h4>Content warning</h4>
-                    <p>This sound may be inappropriate for some users
-                        <br>You can turn these warnings off in your <a href="{% url 'accounts-edit' %}">user settings</a> page
-                    </p>
-                    <button class="btn-primary">Show anyway</button>
-                </div>
-            {% endif %}
-            <div class="row no-gutters {% if is_explicit %}blur{% endif %}">
-                <div class="col-md-8">
-                    {% display_sound_big_no_info_no_bookmark sound %}
-                    <div class="bw-sound-page__information v-spacing-top-5">
-                        {% cache 3600 bw_sound_page sound.id %}
-                        <div class="row middle">
-                            <div class="col-10 overflow-hidden">
-                                <h1><a class="bw-link--black" href="{% url 'sound' sound.user.username sound.id %}">{{sound.original_filename}}</a></h1>
-                            </div>
-                            <div class="col-2 text-right">
-                                <div class="text-grey">
-                                    {% if sound.remix_group.all.count %}
-                                    <button title="See sound's remix group" aria-label="See sound's remix group" class="btn-neutral" data-toggle="remix-group-modal" data-modal-activation-param="remix_group" data-modal-content-url="{% url 'sound-remixes' sound.user.username sound.id %}?ajax=1">
-                                        {% bw_icon 'remix' %}
-                                    </button>
-                                    {% endif %}
-                                    {% if sound.similarity_state == 'OK' %}
-                                    <span class="h-spacing-left-1"></span>
-                                    <button title="Find similar sounds" aria-label="Find similar sounds" class="btn-neutral" data-toggle="modal-default" data-modal-activation-param="similar" data-modal-content-url="{% url 'sound-similar' sound.user.username sound.id %}?ajax=1">
-                                        {% bw_icon 'similar' %}
-                                    </button>
-                                    {% endif %}
-                                    {% if request.user.is_authenticated %}
-                                    <span class="h-spacing-left-1"></span>
-                                    <button title="Bookmark this sound" aria-label="Bookmark this sound" class="btn-neutral" data-toggle="bookmark-modal" data-modal-url="{% url 'bookmarks-add-form-for-sound' sound.id %}" data-add-bookmark-url="{% url 'add-bookmark' sound.id %}">
-                                        {% bw_icon 'bookmark' %}
-                                    </button>
-                                    {% endif %}
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="middle v-spacing-top-2">{% bw_sound_stars sound False %}<span class="bw-rating__count text-grey h-spacing-left-1">{{ sound.get_ratings_count_text }}</span></div>
-
-                        <div class="middle bw-sound-page__user v-spacing-top-5">
-                            <div class="h-spacing-1">
-                                {% bw_user_avatar sound.user.profile.locations.avatar.M.url sound.user.username 40 %}
-                            </div>
-                            <div class="h-spacing-left-1">
-                                <a href="{% url 'account' sound.user.username %}">{{ sound.user.username | truncate_string:15 }}</a>
-                                <p class="text-grey">{{ sound.created|date:"F jS, Y" }}</p>
-                            </div>
-                            {% if sound.user != request.user  %}
-                                <div class="h-spacing-left-3">
-                                    {% if is_following %}
-                                        <a class="no-hover btn-secondary" href="{% url 'unfollow-user' sound.user.username %}?next={{ next_path }}">Unfollow</a>
-                                    {% else %}
-                                        <a class="no-hover btn-inverse" href="{% url 'follow-user' sound.user.username %}?next={{ next_path }}">Follow</a>
-                                    {% endif %}
-                                </div>
-                            {% endif %}
-                        </div>
-                        <div class="middle v-spacing-top-3">
-                            {% if sound.geotag_id %}
-                                <div>
-                                    <a href="{% url 'sound-geotag' sound.user.username sound.id %}">
-                                        {% bw_icon 'pin' %} {{ sound.get_geotag_name }}
-                                    </a>
-                                </div>
-                                {% if sound.pack_id %}
-                                    <div class="text-grey h-spacing-left-2 h-spacing-2">·</div>
-                                {% endif %}
-                            {% endif %}
-                            {% if sound.pack_id %}
-                                <div class="text-grey">
-                                   This sound is part of the pack <a href="{% url 'pack' username sound.pack.id %}">{{ sound.pack.name}}</a>
-                                </div>
-                                
-                            {% endif %}
-                        </div>
-                        <div class="v-spacing-top-1">
-                            <div id="soundDescriptionSection">
-                                {{ sound.description|replace_img|safe|linebreaks|strip_unnecessary_br }}
-                            </div>
-                            {% if sound.user.profile.sound_signature %}
-                                <div class="v-spacing-top-3 text-grey">
-                                    <p>{{ sound.user.profile.sound_signature|sound_signature_replace:sound|replace_img|safe|linebreaks|strip_unnecessary_br }}</p>
-                                </div>
-                            {% endif %}
-                            <div class="v-spacing-top-3">
-                                <a href="javascript:void(0);" title="Flag this sound as ilegal, offensive or other..." class="text-light-grey" data-toggle="flag-sound-modal" data-modal-activation-param="flag" data-modal-content-url="{% url 'sound-flag' sound.user.username sound.id %}?ajax=1">
-                                    {% bw_icon 'flag' %} Sound illegal or offensive? Flag it!
-                                </a>
-                            </div>
-                            <div class="v-spacing-top-3">
-                                {% for tag in sound.tags.all %}
-                                    {% bw_tag tag.tag.name 1 "h-spacing-1" %}
-                                {% endfor %}
-                            </div>
-                            <div class="divider-light v-spacing-top-4"></div>
-                            <div class="v-spacing-top-4 row">
-                                <div class="col-2 text-center text-17">
-                                    <p class="text-grey no-margins">Type</p>
-                                    <p class="no-margins">{{sound.get_type_display}} (.{{sound.type}})</p>
-                                </div>
-                                <div class="col-2 text-center text-17">
-                                    <p class="text-grey no-margins">Duration</p>
-                                    <p class="no-margins">{{sound.duration|duration}}</p>
-                                </div>
-                                <div class="col-2 text-center text-17">
-                                    <p class="text-grey no-margins">File size</p>
-                                    <p class="no-margins">{{sound.filesize|filesizeformat}}</p>
-                                </div>
-                                    <div class="col-2 text-center text-17">
-                                        <p class="text-grey no-margins">Sample rate</p>
-                                        <p class="no-margins">{{sound.samplerate}} Hz</p>
-                                    </div>
-                                {% if sound.bitdepth %}
-                                    <div class="col-2 text-center text-17">
-                                        <p class="text-grey no-margins">Bit depth</p>
-                                        <p class="no-margins">{{sound.bitdepth}} bit</p>
-                                    </div>
-                                {% else %}
-                                    <div class="col-2 text-center text-17">
-                                        <p class="text-grey no-margins">Bitrate</p>
-                                        <p class="no-margins">{{sound.bitrate}} kbps</p>
-                                    </div>
-                                {% endif %}
-                                <div class="col-2 text-center text-17">
-                                    <p class="text-grey no-margins">Channels</p>
-                                    <p class="no-margins">{{sound.get_channels_display}}</p>
-                                </div>
-                            </div>
-                        </div>
-                        {% endcache %}
-                    </div>                    
-                </div>
-
-                <div class="col-md-4 col-extra-left-padding-large-md">
-                    <div class="divider-light v-spacing-top-4 v-spacing-4 d-md-none"></div>
-                    <div class="bw-sound__sidebar">
-                        {% if display_random_link %}
-                            <a class="no-hover btn-blue display-inline-block w-100 text-center v-spacing-4" href="{% url 'sounds-random' %}">Get another random sound!</a>
-                        {% endif %}
-                        {% cache 3600 bw_sound_page_sidebar sound.id %}
-                        <div>
-                            <ol>
-                                <li class="v-spacing-3"> {% bw_icon 'download' 'text-light-grey' %}
-                                    <a class="text-19 bw-link--black" title="This sound has been downloaded {{ sound.num_downloads|bw_intcomma }} time{{ sound.num_downloads|pluralize }}" href="javascript:void(0);" data-toggle="modal-default" data-modal-content-url="{% url 'sound-downloaders' sound.user.username sound.id %}?ajax=1" data-modal-activation-param="downloaders">{{ sound.num_downloads|formatnumber }} download{{ sound.num_downloads|pluralize }}</a>
-                                </li>
-                                <li class="v-spacing-3">{% bw_icon 'comments' 'text-light-grey' %}
-                                    <a class="text-19 bw-link--black" title="This sound has received {{ sound.num_comments|bw_intcomma }} comment{{ sound.num_comments|pluralize }}" href="#comments">{{ sound.num_comments|formatnumber }} comment{{ sound.num_comments|pluralize }}</a>
-                                </li>
-                            </ol>
-                        </div>
-                        <div class="v-spacing-top-5 middle">
-                            {% bw_icon sound.license_bw_icon_name 'text-light-grey text-30' %} <span class="text-20 h-spacing-left-2 padding-right-4">{{ sound.license.name_with_version }}</span>
-                        </div>
-                        <div class="text-grey {% if sound.user == request.user %}v-spacing-4{% endif %} v-spacing-top-1">
-                            {{ sound.license.get_short_summary|safe }} <a href="{{ sound.license.deed_url }}" target="_blank" class="bw-link--black">More...</a>
-                        </div>
-                        {% endcache %}
-
-                        {% if request.user.is_authenticated and sound.user != request.user %}
-                            <div class="v-spacing-top-5">
-                                <p class="text-center text-26 font-weight-bold">Your rating:</p>
-                                <div class="center text-20">
-                                    {% bw_sound_stars sound True True True %}
-                                </div>
-                            </div>
-                        {% endif %}
-
-                        <div class="v-spacing-top-5 v-padding-bottom-5 {% if sound.user == request.user %}v-spacing-top-5{% endif %}">
-                            {% if sound.moderation_state == 'OK' and sound.processing_state == 'OK' %}
-                                {% if request.user.is_authenticated %}
-                                    <a class="no-hover btn-primary display-inline-block w-100 text-center sound-download-button" href="{% url 'sound-download' sound.user.username sound.id %}{{ sound.friendly_filename }}" data-show-after-download-modal-url="{% url "after-download-modal" %}">Download sound</a>
-                                {% else %}
-                                    <a class="no-hover btn-primary display-inline-block w-100 text-center" href="{% url 'sound-download' sound.user.username sound.id %}{{ sound.friendly_filename }}">Login to download</a>
-                                {% endif %}
-                            {% else %}
-                                <div class="v-spacing-top-3 text-center">Download unavailable, sound not yet processed or moderated</div>
-                            {% endif %}
-
-                            {% if perms.sound.can_edit or sound.user == request.user %}
-                                {% if sound.processing_state == 'OK' %}
-                                    <a class="no-hover btn-secondary display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'sound-edit' sound.user.username sound.id %}">Edit sound description</a>
-                                {% else %}
-                                    <div class="v-spacing-top-3 text-grey text-center">{% include 'sounds/sound_state_processing_indicator.html' %} (cannot edit)</div>
-                                {% endif %}
-                            {% endif %}
-
-                            {% if request.user.is_staff or perms.tickets.can_moderate or sound.user == request.user %}
-                                <div class="divider-light v-spacing-top-4 padding-bottom-1"></div>
-                            {% endif %}
-
-                            {% if request.user.is_staff %}
-                                <a class="no-hover btn-inverse display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'admin:sounds_sound_change' sound.id %}">Edit in the admin</a>
-                            {% endif %}
-
-                            {% if perms.tickets.can_moderate or sound.user == request.user %}
-                                {% if sound.ticket %}
-                                    <a class="no-hover btn-inverse display-inline-block w-100 text-center v-spacing-top-3" href="{% url 'tickets-ticket' sound.ticket.key %}">Go to moderation ticket</a>
-                                {% else %}
-                                    <div class="v-spacing-top-3 text-grey text-center">No moderation ticket for this sound</div>
-                                {% endif %}
-                            {% endif %}
-
-                        </div>
-                        <div>
-                            <ol class="center">
-                                <li><a class="no-hover" href="https://www.facebook.com/sharer/sharer.php?u={% absurl 'short-sound-link' sound.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'facebook' 'text-30' %}</div></a></li>
-                                <li class="h-spacing-left-2"><a class="no-hover" href="https://twitter.com/share?url={% absurl 'short-sound-link' sound.id %}" target="_blank"><div class="cleanIcon">{% bw_icon 'twitter' 'text-30' %}</div></a></li>
-                                <li class="h-spacing-left-2"><a id="toggle-share-link" class="cursor-pointer no-hover"><div class="cleanIcon">{% bw_icon 'share2' 'bw-icon__inside_circle' %}</div></a></li>
-                                <li class="h-spacing-left-2"><a id="toggle-embed-code" class="cursor-pointer no-hover"><div class="cleanIcon">{% bw_icon 'embed-stroke' 'text-30' %}</div></a></li>
-                            </ol>
-                        </div>
-
-                        <div id="share-link" class="v-spacing-top-5">
-                             <span class="text-grey">Share url: </span><br><input class="w-100" type="text" readonly value="{% absurl 'short-sound-link' sound.id %}" />
-                        </div>
-
-                        <div id="embed-links" class="v-spacing-top-5 bw-form">
-                            <div class="v-spacing-1">
-                                <div>920 x 245</div>
-                                <img id="large-embed-image" class="cursor-pointer" src="{{ media_url }}images/widgets/embed_large_scaled_active_color.png" alt="Embed example, large size"/>
-                            </div>
-                            <div class="v-spacing-1">
-                                <div>481 x 86</div>
-                                <img id="medium-embed-image" class="cursor-pointer" src="{{ media_url }}images/widgets/embed_medium_scaled_active_color.png" alt="Embed example, medium size"/>
-                            </div>
-                            <div class="v-spacing-1">
-                                <div>375 x 30</div>
-                                <img id="small-embed-image" class="cursor-pointer" src="{{ media_url }}images/widgets/embed_small_scaled_active_color.png" alt="Embed example, small size"/>
-                            </div>
-                            <textarea
-                                    id="embed-code"
-                                    data-size-large="{{sizes.large.0}},{{sizes.large.1}}"
-                                    data-size-medium="{{sizes.medium.0}},{{sizes.medium.1}}"
-                                    data-size-small="{{sizes.small.0}},{{sizes.small.1}}"
-                                    data-iframe-url-template="{% absurl 'embed-simple-sound-iframe' sound.id 'SIZE' %}"
-                                    style="min-height: 130px;"
-                                    placeholder="The embed code will appear here"
-                                    class="w-100 v-spacing-top-2">
-                            </textarea>
-
-                        </div>
-
-                    </div>
-                </div>
-
-                <div class="col-md-8">
-                    <div class="v-spacing-top-6">
-                        <div>
-                            <h6 class="text-26 no-margins ">Comments</h6>
-                            <a name="comments"></a>
-                            {% if request.user.is_authenticated %}
-                                <form method="POST" action=".#comments" class="bw-form disable-on-submit">{% csrf_token %}
-                                    <div class="row">
-                                        <div class="col-md-9">
-                                            {{form.as_p}}
-                                        </div>
-                                        <div class="col-md-3">
-                                            <button id="sound_comment_submit" class="v-spacing-top-5 btn-inverse text-14">Post comment</button>
-                                        </div>
-                                    </div>
-                                </form>
-                            {% else %}
-                                {% if not request.user.is_authenticated and page.object_list %}
-                                    <div class="v-spacing-top-4">
-                                        Please <a href="{% url 'login' %}?next={% url 'sound' sound.user.username sound.id %}">log in</a> to comment
-                                    </div>
-                                {% endif %}
-                            {% endif %}
-                            <div id="soundCommentsSection" class="v-spacing-top-5">
-                                {% if page.object_list %}
-                                    {% for comment in page.object_list %}
-                                        <div>
-                                            <div style="display: flex; justify-content: space-between;">
-                                                {% display_user_comment comment.user comment.created %}
-                                                <div class="text-right v-spacing-top-1">
-                                                    {%  flag_user "SC" comment.user.username comment.id "" comment.user.profile.num_sounds %}
-                                                    {% if perms.comments.delete_comment or sound.user == request.user or comment.user == request.user %}
-                                                        <a class="cursor-pointer" data-toggle="confirmation-modal" data-modal-confirmation-title="Are you sure you want to delete this comment?" data-modal-confirmation-url="{% url 'comment-delete' comment.id %}?next={{request.path}}&page={{current_page}}" title="Delete comment">{% bw_icon 'trash' %} Delete</a>
-                                                    {% endif %}
-                                                </div>
-                                            </div>
-                                            <p class="v-spacing-top-1">{{ comment.comment|replace_img|safe|linebreaks|strip_unnecessary_br }}</p>
-                                            {% if not forloop.last %}
-                                                <div class="divider-light v-spacing-top-3 v-spacing-2"></div>
-                                            {% endif %}
-                                        </div>
-                                    {% endfor %}
-
-                                    <div>
-                                        {% bw_paginator paginator page current_page request "comments" %}
-                                    </div>
-
-                                {% else %}
-                                    <div class="text-grey">This sound has not been commented on yet, be the first to comment!</div>
-                                    {% if not request.user.is_authenticated %}
-                                        <div class="v-spacing-top-1">
-                                            Please <a href="{% url 'login' %}?next={% url 'sound' sound.user.username sound.id %}">log in</a> to comment
-                                        </div>
-                                    {% endif %}
-                                {% endif %}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-{% endblock %}
-
-{% block extrabody %}
-    <script src="{% static 'bw-frontend/dist/sound.js' %}"></script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/sounds/sound_deleted.html b/templates_bw/sounds/sound_deleted.html
deleted file mode 100644
index 2ad6371b3..000000000
--- a/templates_bw/sounds/sound_deleted.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}Deleted sound{% endblock %}
-{% block page-title %}Deleted sound{% endblock %}
-
-{% block page-content %}
-    <p class="text-grey">This sound has been deleted.</p>
-{% endblock %}
\ No newline at end of file
diff --git a/templates_bw/wiki/edit.html b/templates_bw/wiki/edit.html
deleted file mode 100644
index 13f31a36a..000000000
--- a/templates_bw/wiki/edit.html
+++ /dev/null
@@ -1,26 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}Editing - {{content.title}}{% endblock %}
-{% block page-title %}Editing - {{ name }}{% endblock %}
-
-{% block page-content %}
-    <div class="bw-wiki">
-        {% if content %}
-        <ul class="v-spacing-4">
-            <li><strong>version</strong>: {{content.id}} - <a href="{% url "wiki-page-history" name %}">history and comparison</a></li>
-            <li><strong>previous edit date</strong>: {{content.created}}</li>
-            {% if content.author %}
-            <li><strong>previous author</strong>: {{content.author.username}}</li>
-            {% else %}
-            <li><strong>no previous author</strong></li>
-            {% endif %}
-        </ul>
-        {% endif %}
-        <form method="post" action="." class="bw-form w-100">{% csrf_token %}
-        {{ form }}
-        <div class="text-right">
-            <button class="btn-primary v-spacing-top-1">Save</button>
-        </div>
-        </form>
-    </div>
-{% endblock %}
diff --git a/templates_bw/wiki/history.html b/templates_bw/wiki/history.html
deleted file mode 100644
index a6edcecf2..000000000
--- a/templates_bw/wiki/history.html
+++ /dev/null
@@ -1,30 +0,0 @@
-{% extends "simple_page.html" %}
-
-{% block title %}History - {{ page.name }}{% endblock %}
-{% block page-title %}History of page - {{page.name}}{% endblock %}
-
-{% block page-content %}
-    <div class="bw-wiki">
-        <form method="get" action=".">
-            <ul>
-            {% for version in versions %}
-                <li>
-                    <input type="radio" name="version1" value="{{version.id}}"{% if version1.id == version.id %} checked="checked"{% endif %}>
-                    <input type="radio" name="version2" value="{{version.id}}"{% if version2.id == version.id %} checked="checked"{% endif %}>
-                    {% if version.author %}
-                    by {{version.author}}
-                    {% endif %}
-                    <a href="{% url "wiki-page" page.name %}?version={{version.id}}">version {{version.id}}</a> ({{version.created|timesince}} ago)</li>
-            {% endfor %}
-            </ul>
-            <div class="text-left">
-                <button class="btn-primary v-spacing-top-1">Compare</button>
-            </div>
-        </form>
-        <div class="v-spacing-top-5">
-            {% if diff %}
-                {{diff|safe}}
-            {% endif %}
-        </div>
-    </div>
-{% endblock %}
diff --git a/templates_bw/wiki/page.html b/templates_bw/wiki/page.html
deleted file mode 100644
index 46f1990c2..000000000
--- a/templates_bw/wiki/page.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% extends "simple_page.html" %}
-{% load markup_freesound %}
-{% load bw_templatetags %}
-
-{% block title %}Help - {{content.title}}{% endblock %}
-{% block page-title-custom %}{% endblock %}{% comment %}No page title in wiki pages as is part of page content{% endcomment %}
-
-{% block page-content %}
-    <div class="bw-wiki">
-        {% if content.title == "Frequently Asked Questions" %}
-            {% comment %}When showing the "Frequently Asked Questions", we load the geotag picker help tool code
-            so that it is corresctly displayed when showGeotagPickerHelpTool() is run. We can't place this code in the
-            wiki page content as script tag would be stripped.{% endcomment %}
-            {% bw_maps_js_scripts %}
-        {% endif %}
-        {{ content.body|markdown_wiki }}
-        {% if perms.wiki.change_page %}
-        <div class="v-spacing-top-5 text-right">
-            <a class="btn-primary no-hover" href="{% url "wiki-page-edit" name %}">Edit this page</a>
-        </div>
-        {% endif %}
-    </div>
-{% endblock %}
diff --git a/tickets/views.py b/tickets/views.py
index 4dd754c68..90d59b7c4 100644
--- a/tickets/views.py
+++ b/tickets/views.py
@@ -32,6 +32,7 @@
 from django.http import HttpResponseRedirect, JsonResponse, Http404
 from django.shortcuts import get_object_or_404, redirect
 from django.urls import reverse
+from django.shortcuts import render 
 from general.tasks import whitelist_user as whitelist_user_task
 
 from .models import Ticket, TicketComment, UserAnnotation
@@ -41,7 +42,7 @@
     SoundStateForm, SoundModerationForm, ModerationMessageForm, UserAnnotationForm, IS_EXPLICIT_ADD_FLAG_KEY, IS_EXPLICIT_REMOVE_FLAG_KEY, \
     BWSoundModerationForm, BWModerationMessageForm
 from utils.cache import invalidate_user_template_caches, invalidate_all_moderators_header_cache
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from utils.username import redirect_if_old_username_or_404
 from utils.pagination import paginate
 from wiki.models import Content, Page
diff --git a/utils/frontend_handling.py b/utils/frontend_handling.py
index a88a782df..4411dc0bf 100644
--- a/utils/frontend_handling.py
+++ b/utils/frontend_handling.py
@@ -18,195 +18,8 @@
 #     See AUTHORS file.
 #
 
-from functools import wraps
-
-from django.conf import settings
-from django.http import HttpResponseRedirect
-from django.shortcuts import render as django_render
-from django.template import TemplateDoesNotExist
-from django.template.response import TemplateResponse
-from django.urls import reverse
-
-
-def selected_frontend(request):
-    # Get the name of the template engine from session variable or get the default tempalte engine name
-    # Template engines are named with frontend name
-    name = request.session.get(settings.FRONTEND_SESSION_PARAM_NAME, settings.FRONTEND_DEFAULT)
-    if name not in [engine['NAME'] for engine in settings.TEMPLATES]:
-        name = settings.FRONTEND_DEFAULT  # If provided engine name is not avialable, use default
-    return name
-
-
-def render(request, template_name, context=None, content_type=None, status=None, using=None):
-    """
-    This is a wrapper around Django's render function that we use to handle chosing which frontend to render.
-    A session variable is used to store which frontend should be used. This wrapper calls Django's render function
-    with the `using` parameter set to the template engine name corresponding to the specified frontend.
-    If the template can't be found, then we try again but using the default frontend.
-
-    What this ebhaviour achieves is that if a template is not found for a given frontend, then it is loaded from
-    the defualt frontend. This is similar to what could be ahieved using the `DIRS` parameter of the template
-    engines configuration but it is not exatcly the same. Using this wrapper, we make sure that templates from
-    the different frontend will never be mixed (e.g. we make sure that we don't take `sounds.html` from one
-    frontend and `base.html` from another).
-
-    This wrapper is intented to be use while we implement the new frontend. Once the whole implementation
-    process is finished and we don't need the two frontends to coexist anymore, then we can get rid of this
-    wrapper.
-
-    NOTE: as BW implementation is now complete and we're in the process of releasing it, this method has been
-    simplified to not fallback to any default frontend and simply choose the appropriate frontend folder
-    based on the session variable.
-    """
-    # Get the name of the template engine/frontend
-    name = selected_frontend(request)
-    return django_render(request, template_name, context, content_type, status, using=name)
-    
-
-def using_frontend(request, frontend_name):
-    """
-    Util functin to check which frontend is being used.
-    Returns True if `frontend_name` corresponds to the currently selecred frontend.
-    """
-    return selected_frontend(request) == frontend_name
-
-
 def using_beastwhoosh(request):
     """
     Returns True if currently used frontend is Beast Whoosh
     """
-    return using_frontend(request, settings.FRONTEND_BEASTWHOOSH)
-
-
-def using_nightingale(request):
-    """
-    Returns True if currently used frontend is Nightingale
-    """
-    return using_frontend(request, settings.FRONTEND_NIGHTINGALE)
-
-
-def defer_if_beastwhoosh(redirect_to_view):
-    """
-    Util decorator to be used in views which, when using Beast Whoosh frontend, should redirect to other views.
-    If there are pages in which the 2 front-end require the use of 2 completely different views, this decorator
-    can be used to point to the specific Beast Whoosh view. Use it as:
-
-    @defer_if_beastwhoosh(new_view_func)
-    def old_view(request):
-        ...
-    """
-    def decorator(view_func):
-        def _wrapped_view(request, *args, **kwargs):
-            if not using_beastwhoosh(request):
-                return view_func(request, *args, **kwargs)
-            else:
-                return redirect_to_view(request, *args, **kwargs)
-        return _wrapped_view
-    return decorator
-
-
-def redirect_if_beastwhoosh(redirect_url_name='front-page', kwarg_keys=None, query_string=''):
-    """
-    Util decorator to be used in view which, when using Beast Whoosh frontend, should return an HTTP redirect to
-    a new URL. A typical use case for this is two views whose functionality has been merged into a single one, or
-    a URL path which changes when using Beast Whoosh.
-
-    This decorator takes a view name as an argument to be passed to the `reverse()` function.
-    If `kwarg_keys` is used, the arguments passed to the current request are also passed to the `reverse`
-    function. `kwarg_keys` is used to select which arguments get passed and in which order (see example below).
-    Finally, a `query_string` parameter can also be passed to be appended at the end of the URL.
-
-    Usage examples:
-
-    @redirect_if_beastwhoosh('front-page')
-    def view(request, ...):
-        ...
-    > This will simply redirect to the front page (i.e. '/')
-
-    @redirect_if_beastwhoosh('front-page', query_string='param=value&param2=value2')
-    def view(request, ...):
-        ...
-    > This will redirect to the front page with the passed query string (i.e. '/?param=value&param2=value2'
-
-    @redirect_if_beastwhoosh('sound', kwarg_keys=['username', 'sound_id'], query_string='edit=1')
-    def sound_edit(request, username, sound_id):
-        ...
-    > This will redirect to the 'sound' URL passing as arguments 'username' and 'sound_id', and adding the query
-      string 'edit=1' (i.e. '/people/<username>/sounds/<sound_id>/?edit=1').
-
-    This can be useful in cases where a specific feature has been moved to a different page. For example, in Beast
-    Whoosh the list of followers is not displayed in a 'followers page' but as a modal that is shown after clicking
-    a button in the user profile page. Therefore, if someone uses the old url for the followers page, it will need to
-    be redirected to the profile page. The query string can be used in the new profile page to automatically open
-    the followers modal if needed.
-    """
-
-    def decorator(view_func):
-        def _wrapped_view(request, *args, **kwargs):
-            if not using_beastwhoosh(request):
-                return view_func(request, *args, **kwargs)
-            else:
-                if kwarg_keys is not None:
-                    new_args = [kwargs[key] for key in kwarg_keys]
-                else:
-                    new_args = []
-                url = reverse(redirect_url_name, args=new_args)
-                if query_string:
-                    url += f'?{query_string}'
-                return HttpResponseRedirect(url)
-        return _wrapped_view
-    return decorator
-
-
-def redirect_if_beastwhoosh_inline(function=None, redirect_url_name='front-page', kwarg_keys=None, query_string=''):
-    """
-    Works the same as redirect_if_beastwhoosh but can be used inline in urls.py url<>view definitions:
-
-    > redirect_if_beastwhoosh_inline(PasswordResetView.as_view(form_class=FsPasswordResetForm))
-    """
-    def decorator(view_func):
-        @wraps(view_func)
-        def _wrapped_view(request, *args, **kwargs):
-            if not using_beastwhoosh(request):
-                return view_func(request, *args, **kwargs)
-            else:
-                if kwarg_keys is not None:
-                    new_args = [kwargs[key] for key in kwarg_keys]
-                else:
-                    new_args = []
-                url = reverse(redirect_url_name, args=new_args)
-                if query_string:
-                    url += f'?{query_string}'
-                return HttpResponseRedirect(url)
-        return _wrapped_view
-    return decorator(function)
-
-
-class BwCompatibleTemplateResponse(TemplateResponse):
-
-    @property
-    def rendered_content(self):
-        """
-        This is a customized version of TemplateResponse required for compatibility with the co-existence of the two
-        front ends. Class-based views do not use the "render" shortcut to render the templates, so we can not use our
-        customized "render" shortcut (see above in this file) which selects the right frontend according to the
-        request and defaults to old frontend if template not found. We re-implement the same logic here, in the
-        BwCompatibleTemplateResponse class which must be used in Class-based views if we want them to be compatible
-        with BW frontend. As an example use of this class, see donations.views.DonationsList. Once we remove the old
-        interface, we'll be able to get rid of these helper methods.
-        """
-        name = selected_frontend(self._request)
-        self.using = name
-        try:
-            template = self.resolve_template(self.template_name)
-        except TemplateDoesNotExist:
-            if name != settings.FRONTEND_DEFAULT:
-                # If the required template does can't be found using the selected engine, try with the default engine
-                self.using = settings.FRONTEND_DEFAULT
-                template = self.resolve_template(self.template_name)
-            else:
-                # If the default engine was being used, then raise the exception normally
-                raise
-        context = self.resolve_context(self.context_data)
-        content = template.render(context, self._request)
-        return content
+    return True
diff --git a/utils/urlpatterns.py b/utils/urlpatterns.py
new file mode 100644
index 000000000..511da79f8
--- /dev/null
+++ b/utils/urlpatterns.py
@@ -0,0 +1,43 @@
+#
+# Freesound is (c) MUSIC TECHNOLOGY GROUP, UNIVERSITAT POMPEU FABRA
+#
+# Freesound is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# Freesound is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+# Authors:
+#     See AUTHORS file.
+#
+
+from functools import wraps
+from django.http import HttpResponseRedirect
+from django.urls import reverse
+
+def redirect_inline(function=None, redirect_url_name='front-page', kwarg_keys=None, query_string=''):
+    """
+    Redirects to a specific view, can be used inline when defining urlpatterns.
+
+    > redirect_inline(PasswordResetView.as_view(form_class=FsPasswordResetForm))
+    """
+    def decorator(view_func):
+        @wraps(view_func)
+        def _wrapped_view(request, *args, **kwargs):
+            if kwarg_keys is not None:
+                new_args = [kwargs[key] for key in kwarg_keys]
+            else:
+                new_args = []
+            url = reverse(redirect_url_name, args=new_args)
+            if query_string:
+                url += f'?{query_string}'
+            return HttpResponseRedirect(url)
+        return _wrapped_view
+    return decorator(function)
\ No newline at end of file
diff --git a/wiki/views.py b/wiki/views.py
index e71bbf495..ef48102e1 100644
--- a/wiki/views.py
+++ b/wiki/views.py
@@ -20,9 +20,10 @@
 
 from django.http import HttpResponseRedirect, Http404
 
+from django.shortcuts import render 
 from django.urls import reverse
 
-from utils.frontend_handling import render, using_beastwhoosh
+from utils.frontend_handling import using_beastwhoosh
 from wiki.models import Content, Page
 from wiki.forms import ContentForm, BwContentForm