diff --git a/ietf/secr/announcement/forms.py b/ietf/secr/announcement/forms.py
index 3fe58bdaaab..820ef79a093 100644
--- a/ietf/secr/announcement/forms.py
+++ b/ietf/secr/announcement/forms.py
@@ -14,30 +14,41 @@
 # Globals
 # ---------------------------------------------
 
-TO_LIST = ('IETF Announcement List <ietf-announce@ietf.org>',
-           'I-D Announcement List <i-d-announce@ietf.org>',
-           'RFP Announcement List <rfp-announce@ietf.org>',
-           'The IESG <iesg@ietf.org>',
-           'Working Group Chairs <wgchairs@ietf.org>',
-           'BOF Chairs <bofchairs@ietf.org>',
-           'Other...')
+TO_LIST = (
+    "IETF Announcement List <ietf-announce@ietf.org>",
+    "I-D Announcement List <i-d-announce@ietf.org>",
+    "RFP Announcement List <rfp-announce@ietf.org>",
+    "The IESG <iesg@ietf.org>",
+    "Working Group Chairs <wgchairs@ietf.org>",
+    "BOF Chairs <bofchairs@ietf.org>",
+    "Other...",
+)
 
 # ---------------------------------------------
 # Helper Functions
 # ---------------------------------------------
 
+
 def get_from_choices(user):
-    '''
+    """
     This function returns a choices tuple containing
     all the Announced From choices.  Including
     leadership chairs and other entities.
-    '''
+    """
     addresses = []
-    if has_role(user,'Secretariat'):
-        addresses = AnnouncementFrom.objects.values_list('address', flat=True).order_by('address').distinct()
+    if has_role(user, "Secretariat"):
+        addresses = (
+            AnnouncementFrom.objects.values_list("address", flat=True)
+            .order_by("address")
+            .distinct()
+        )
     else:
         for role in user.person.role_set.all():
-            addresses.extend(AnnouncementFrom.objects.filter(name=role.name, group=role.group).values_list('address', flat=True).order_by('address'))
+            addresses.extend(
+                AnnouncementFrom.objects.filter(name=role.name, group=role.group)
+                .values_list("address", flat=True)
+                .order_by("address")
+            )
 
     nomcom_choices = get_nomcom_choices(user)
     if nomcom_choices:
@@ -45,65 +56,91 @@ def get_from_choices(user):
 
     choices = list(zip(addresses, addresses))
     if len(choices) > 1:
-        choices.insert(0, ('', '(Choose an option)'))
+        choices.insert(0, ("", "(Choose an option)"))
     return choices
 
 
 def get_nomcom_choices(user):
-    '''
+    """
     Returns the list of nomcom email addresses for given user
-    '''
-    nomcoms = Role.objects.filter(name="chair",
-                                  group__acronym__startswith="nomcom",
-                                  group__state="active",
-                                  group__type="nomcom",
-                                  person=user.person)
+    """
+    nomcoms = Role.objects.filter(
+        name="chair",
+        group__acronym__startswith="nomcom",
+        group__state="active",
+        group__type="nomcom",
+        person=user.person,
+    )
     addresses = []
     for nomcom in nomcoms:
         year = nomcom.group.acronym[-4:]
-        addresses.append('NomCom Chair %s <nomcom-chair-%s@ietf.org>' % (year,year))
+        addresses.append("NomCom Chair %s <nomcom-chair-%s@ietf.org>" % (year, year))
 
     return addresses
-        
+
 
 def get_to_choices():
-    return list(zip(TO_LIST,TO_LIST))
+    return list(zip(TO_LIST, TO_LIST))
 
 
 # ---------------------------------------------
 # Forms
 # ---------------------------------------------
 
+
 class AnnounceForm(forms.ModelForm):
-    nomcom = forms.ModelChoiceField(queryset=Group.objects.filter(acronym__startswith='nomcom',type='nomcom',state='active'),required=False)
+    nomcom = forms.ModelChoiceField(
+        queryset=Group.objects.filter(
+            acronym__startswith="nomcom", type="nomcom", state="active"
+        ),
+        required=False,
+    )
     to_custom = MultiEmailField(required=False)
 
     class Meta:
         model = Message
-        fields = ('nomcom', 'to','to_custom','frm','cc','bcc','reply_to','subject','body')
+        fields = (
+            "nomcom",
+            "to",
+            "to_custom",
+            "frm",
+            "cc",
+            "bcc",
+            "reply_to",
+            "subject",
+            "body",
+        )
+        labels = {"frm": "From"}
+        help_texts = {
+            "to": "Select name OR select Other... and enter email below",
+            "cc": "Use comma separated lists for emails (Cc, Bcc, Reply To)",
+        }
 
     def __init__(self, *args, **kwargs):
-        if 'hidden' in kwargs:
-            self.hidden = kwargs.pop('hidden')
+        if "hidden" in kwargs:
+            self.hidden = kwargs.pop("hidden")
         else:
             self.hidden = False
-        user = kwargs.pop('user')
+        user = kwargs.pop("user")
         person = user.person
         super(AnnounceForm, self).__init__(*args, **kwargs)
-        self.fields['to'].widget = forms.Select(choices=get_to_choices())
-        self.fields['to'].help_text = 'Select name OR select Other... and enter email below'
-        self.fields['cc'].help_text = 'Use comma separated lists for emails (Cc, Bcc, Reply To)'
-        self.fields['frm'].widget = forms.Select(choices=get_from_choices(user))
-        self.fields['frm'].label = 'From'
-        self.fields['reply_to'].required = True
-        self.fields['nomcom'].label = 'NomCom message:'
-        nomcom_roles = person.role_set.filter(group__in=self.fields['nomcom'].queryset,name='chair')
-        secr_roles = person.role_set.filter(group__acronym='secretariat',name='secr')
+        self.fields["to"].widget = forms.Select(choices=get_to_choices())
+        self.fields["frm"].widget = forms.Select(choices=get_from_choices(user))
+        self.fields["reply_to"].required = True
+        # nomcom field is defined declaratively so label and help_text must be set here
+        self.fields["nomcom"].label = "NomCom message:"
+        self.fields["nomcom"].help_text = (
+            "If this is a NomCom announcement specifiy which NomCom group here"
+        )
+        nomcom_roles = person.role_set.filter(
+            group__in=self.fields["nomcom"].queryset, name="chair"
+        )
+        secr_roles = person.role_set.filter(group__acronym="secretariat", name="secr")
         if nomcom_roles:
-            self.initial['nomcom'] = nomcom_roles[0].group.pk
+            self.initial["nomcom"] = nomcom_roles[0].group.pk
         if not nomcom_roles and not secr_roles:
-            self.fields['nomcom'].widget = forms.HiddenInput()
-        
+            self.fields["nomcom"].widget = forms.HiddenInput()
+
         if self.hidden:
             for key in list(self.fields.keys()):
                 self.fields[key].widget = forms.HiddenInput()
@@ -113,25 +150,29 @@ def clean(self):
         data = self.cleaned_data
         if self.errors:
             return self.cleaned_data
-        if data['to'] == 'Other...' and not data['to_custom']:
+        if data["to"] == "Other..." and not data["to_custom"]:
             raise forms.ValidationError('You must enter a "To" email address')
-        for k in ['to', 'frm', 'cc',]:
+        for k in [
+            "to",
+            "frm",
+            "cc",
+        ]:
             data[k] = unescape(data[k])
 
         return data
 
     def save(self, *args, **kwargs):
-        user = kwargs.pop('user')
+        user = kwargs.pop("user")
         message = super(AnnounceForm, self).save(commit=False)
         message.by = user.person
-        if self.cleaned_data['to'] == 'Other...':
-            message.to = self.cleaned_data['to_custom']
-        if kwargs['commit']:
+        if self.cleaned_data["to"] == "Other...":
+            message.to = self.cleaned_data["to_custom"]
+        if kwargs["commit"]:
             message.save()
 
         # handle nomcom message
-        nomcom = self.cleaned_data.get('nomcom',False)
+        nomcom = self.cleaned_data.get("nomcom", False)
         if nomcom:
             message.related_groups.add(nomcom)
 
-        return message
\ No newline at end of file
+        return message
diff --git a/ietf/secr/announcement/tests.py b/ietf/secr/announcement/tests.py
index c147c301b61..f08e824397e 100644
--- a/ietf/secr/announcement/tests.py
+++ b/ietf/secr/announcement/tests.py
@@ -6,7 +6,7 @@
 
 from django.urls import reverse
 
-import debug                            # pyflakes:ignore
+import debug  # pyflakes:ignore
 
 from ietf.utils.test_utils import TestCase
 from ietf.group.factories import RoleFactory
@@ -17,97 +17,102 @@
 from ietf.message.models import AnnouncementFrom
 from ietf.utils.mail import outbox, empty_outbox
 
-SECR_USER='secretary'
-WG_USER=''
-AD_USER=''
+SECR_USER = "secretary"
+WG_USER = ""
+AD_USER = ""
+
 
 class SecrAnnouncementTestCase(TestCase):
     def setUp(self):
         super().setUp()
-        chair = RoleName.objects.get(slug='chair')
-        secr = RoleName.objects.get(slug='secr')
-        ietf = Group.objects.get(acronym='ietf')
-        iab = Group.objects.get(acronym='iab')
-        secretariat = Group.objects.get(acronym='secretariat')
-        AnnouncementFrom.objects.create(name=secr,group=secretariat,address='IETF Secretariat <ietf-secretariat@ietf.org>')
-        AnnouncementFrom.objects.create(name=chair,group=ietf,address='IETF Chair <chair@ietf.org>')
-        AnnouncementFrom.objects.create(name=chair,group=iab,address='IAB Chair <iab-chair@iab.org>')
+        chair = RoleName.objects.get(slug="chair")
+        secr = RoleName.objects.get(slug="secr")
+        ietf = Group.objects.get(acronym="ietf")
+        iab = Group.objects.get(acronym="iab")
+        secretariat = Group.objects.get(acronym="secretariat")
+        AnnouncementFrom.objects.create(
+            name=secr,
+            group=secretariat,
+            address="IETF Secretariat <ietf-secretariat@ietf.org>",
+        )
+        AnnouncementFrom.objects.create(
+            name=chair, group=ietf, address="IETF Chair <chair@ietf.org>"
+        )
+        AnnouncementFrom.objects.create(
+            name=chair, group=iab, address="IAB Chair <iab-chair@iab.org>"
+        )
 
     def test_main(self):
         "Main Test"
-        url = reverse('ietf.secr.announcement.views.main')
+        url = reverse("ietf.secr.announcement.views.main")
         self.client.login(username="secretary", password="secretary+password")
         r = self.client.get(url)
         self.assertEqual(r.status_code, 200)
-    
+
     def test_main_announce_from(self):
-        url = reverse('ietf.secr.announcement.views.main')
+        url = reverse("ietf.secr.announcement.views.main")
 
         # Secretariat
         self.client.login(username="secretary", password="secretary+password")
         r = self.client.get(url)
         self.assertEqual(r.status_code, 200)
         q = PyQuery(r.content)
-        self.assertEqual(len(q('#id_frm option')),4)
+        self.assertEqual(len(q("#id_frm option")), 4)
 
         # IAB Chair
         self.client.login(username="iab-chair", password="iab-chair+password")
         r = self.client.get(url)
         self.assertEqual(r.status_code, 200)
         q = PyQuery(r.content)
-        self.assertEqual(len(q('#id_frm option')),1)
-        self.assertTrue('<iab-chair@iab.org>' in q('#id_frm option').val())
+        self.assertEqual(len(q("#id_frm option")), 1)
+        self.assertTrue("<iab-chair@iab.org>" in q("#id_frm option").val())
 
         # IETF Chair
         self.client.login(username="ietf-chair", password="ietf-chair+password")
         r = self.client.get(url)
         self.assertEqual(r.status_code, 200)
         q = PyQuery(r.content)
-        self.assertEqual(len(q('#id_frm option')),1)
-        self.assertTrue('<chair@ietf.org>' in q('#id_frm option').val())
+        self.assertEqual(len(q("#id_frm option")), 1)
+        self.assertTrue("<chair@ietf.org>" in q("#id_frm option").val())
+
 
 class UnauthorizedAnnouncementCase(TestCase):
     def test_unauthorized(self):
         "Unauthorized Test"
-        url = reverse('ietf.secr.announcement.views.main')
-        person = RoleFactory(name_id='chair',group__acronym='mars').person
-        self.client.login(username=person.user.username, password=person.user.username+"+password")
+        url = reverse("ietf.secr.announcement.views.main")
+        person = RoleFactory(name_id="chair", group__acronym="mars").person
+        self.client.login(
+            username=person.user.username, password=person.user.username + "+password"
+        )
         r = self.client.get(url)
         self.assertEqual(r.status_code, 403)
-    
+
+
 class SubmitAnnouncementCase(TestCase):
-    def test_invalid_submit(self):
-        "Invalid Submit"
-        url = reverse('ietf.secr.announcement.views.main')
-        post_data = {'id_subject':''}
-        self.client.login(username="secretary", password="secretary+password")
-        r = self.client.post(url,post_data)
-        self.assertEqual(r.status_code, 200)
-        q = PyQuery(r.content)
-        self.assertTrue(len(q('form ul.errorlist')) > 0)
-        
     def test_valid_submit(self):
         "Valid Submit"
         nomcom_test_data()
         empty_outbox()
-        url = reverse('ietf.secr.announcement.views.main')
-        confirm_url = reverse('ietf.secr.announcement.views.confirm')
-        nomcom = Group.objects.get(type='nomcom')
-        post_data = {'nomcom': nomcom.pk,
-                     'to':'Other...',
-                     'to_custom':'rcross@amsl.com',
-                     'frm':'IETF Secretariat &lt;ietf-secretariat@ietf.org&gt;',
-                     'reply_to':'secretariat@ietf.org',
-                     'subject':'Test Subject',
-                     'body':'This is a test.'}
+        url = reverse("ietf.secr.announcement.views.main")
+        confirm_url = reverse("ietf.secr.announcement.views.confirm")
+        nomcom = Group.objects.get(type="nomcom")
+        post_data = {
+            "nomcom": nomcom.pk,
+            "to": "Other...",
+            "to_custom": "phil@example.com",
+            "frm": "IETF Secretariat &lt;ietf-secretariat@ietf.org&gt;",
+            "reply_to": "secretariat@ietf.org",
+            "subject": "Test Subject",
+            "body": "This is a test.",
+        }
         self.client.login(username="secretary", password="secretary+password")
-        response = self.client.post(url,post_data)
-        self.assertContains(response, 'Confirm Announcement')
-        response = self.client.post(confirm_url,post_data,follow=True)
+        response = self.client.post(url, post_data)
+        self.assertContains(response, "Confirm Announcement")
+        response = self.client.post(confirm_url, post_data, follow=True)
         self.assertRedirects(response, url)
-        self.assertEqual(len(outbox),1)
-        self.assertEqual(outbox[0]['subject'],'Test Subject')
-        self.assertEqual(outbox[0]['to'],'<rcross@amsl.com>')
-        message = Message.objects.filter(by__user__username='secretary').last()
-        self.assertEqual(message.subject,'Test Subject')
+        self.assertEqual(len(outbox), 1)
+        self.assertEqual(outbox[0]["subject"], "Test Subject")
+        self.assertEqual(outbox[0]["to"], "<phil@example.com>")
+        message = Message.objects.filter(by__user__username="secretary").last()
+        self.assertEqual(message.subject, "Test Subject")
         self.assertTrue(nomcom in message.related_groups.all())
diff --git a/ietf/secr/announcement/urls.py b/ietf/secr/announcement/urls.py
index 3c3c05a09c4..dc534f64aeb 100644
--- a/ietf/secr/announcement/urls.py
+++ b/ietf/secr/announcement/urls.py
@@ -1,8 +1,7 @@
-
 from ietf.secr.announcement import views
 from ietf.utils.urls import url
 
 urlpatterns = [
-    url(r'^$', views.main),
-    url(r'^confirm/$', views.confirm),
+    url(r"^$", views.main),
+    url(r"^confirm/$", views.confirm),
 ]
diff --git a/ietf/secr/announcement/views.py b/ietf/secr/announcement/views.py
index 42de089c59c..5617ae9e6fe 100644
--- a/ietf/secr/announcement/views.py
+++ b/ietf/secr/announcement/views.py
@@ -18,86 +18,93 @@
 # Helper Functions
 # -------------------------------------------------
 def check_access(user):
-    '''
+    """
     This function takes a Django User object and returns true if the user has access to
     the Announcement app.
-    '''
+    """
     if hasattr(user, "person"):
         person = user.person
         if has_role(user, "Secretariat"):
             return True
-        
+
         for role in person.role_set.all():
-            if AnnouncementFrom.objects.filter(name=role.name,group=role.group):
+            if AnnouncementFrom.objects.filter(name=role.name, group=role.group):
                 return True
 
-        if Role.objects.filter(name="chair",
-                               group__acronym__startswith="nomcom",
-                               group__state="active",
-                               group__type="nomcom",
-                               person=person):
+        if Role.objects.filter(
+            name="chair",
+            group__acronym__startswith="nomcom",
+            group__state="active",
+            group__type="nomcom",
+            person=person,
+        ):
             return True
 
     return False
 
+
 # --------------------------------------------------
 # STANDARD VIEW FUNCTIONS
 # --------------------------------------------------
 # this seems to cause some kind of circular problem
 # @check_for_cancel(reverse('home'))
 @login_required
-@check_for_cancel('../')
+@check_for_cancel("../")
 def main(request):
-    '''
+    """
     Main view for Announcement tool.  Authrozied users can fill out email details: header, body, etc
     and send.
-    '''
+    """
     if not check_access(request.user):
-        permission_denied(request, 'Restricted to: Secretariat, IAD, or chair of IETF, IAB, RSOC, RSE, IAOC, ISOC, NomCom.')
+        permission_denied(
+            request,
+            "Restricted to: Secretariat, IAD, or chair of IETF, IAB, RSOC, RSE, IAOC, ISOC, NomCom.",
+        )
 
-    form = AnnounceForm(request.POST or None,user=request.user)
+    form = AnnounceForm(request.POST or None, user=request.user)
 
     if form.is_valid():
         # recast as hidden form for next page of process
         form = AnnounceForm(request.POST, user=request.user, hidden=True)
-        if form.data['to'] == 'Other...':
-            to = form.data['to_custom']
+        if form.data["to"] == "Other...":
+            to = form.data["to_custom"]
         else:
-            to = form.data['to']
+            to = form.data["to"]
 
-        return render(request, 'announcement/confirm.html', {
-            'message': form.data,
-            'to': to,
-            'form': form},
+        return render(
+            request,
+            "announcement/confirm.html",
+            {"message": form.data, "to": to, "form": form},
         )
 
-    return render(request, 'announcement/main.html', { 'form': form} )
+    return render(request, "announcement/index.html", {"form": form})
+
 
 @login_required
-@check_for_cancel('../')
+@check_for_cancel("../")
 def confirm(request):
 
     if not check_access(request.user):
-        permission_denied(request, 'Restricted to: Secretariat, IAD, or chair of IETF, IAB, RSOC, RSE, IAOC, ISOC, NomCom.')
+        permission_denied(
+            request,
+            "Restricted to: Secretariat, IAD, or chair of IETF, IAB, RSOC, RSE, IAOC, ISOC, NomCom.",
+        )
 
-    if request.method == 'POST':
+    if request.method == "POST":
         form = AnnounceForm(request.POST, user=request.user)
-        if request.method == 'POST':
-            message = form.save(user=request.user,commit=True)
-            extra = {'Reply-To': message.get('reply_to') }
-            send_mail_text(None,
-                           message.to,
-                           message.frm,
-                           message.subject,
-                           message.body,
-                           cc=message.cc,
-                           bcc=message.bcc,
-                           extra=extra,
-                       )
-
-            messages.success(request, 'The announcement was sent.')
-            return redirect('ietf.secr.announcement.views.main')
-
-
-
-
+        if request.method == "POST":
+            message = form.save(user=request.user, commit=True)
+            extra = {"Reply-To": message.get("reply_to")}
+            send_mail_text(
+                None,
+                message.to,
+                message.frm,
+                message.subject,
+                message.body,
+                cc=message.cc,
+                bcc=message.bcc,
+                extra=extra,
+            )
+
+            messages.success(request, "The announcement was sent.")
+            return redirect("ietf.secr.announcement.views.main")
diff --git a/ietf/secr/templates/announcement/confirm.html b/ietf/secr/templates/announcement/confirm.html
index ddf2a6de6ed..0e1f72c54b2 100644
--- a/ietf/secr/templates/announcement/confirm.html
+++ b/ietf/secr/templates/announcement/confirm.html
@@ -1,22 +1,17 @@
-{% extends "base_site.html" %}
+{# Copyright The IETF Trust 2024, All Rights Reserved #}
+{% extends "base.html" %}
 {% load static %}
-
+{% load ietf_filters %}
+{% load django_bootstrap5 %}
 {% block title %}Announcement{% endblock %}
-
-{% block extrahead %}{{ block.super }}
-    <script src="{% static 'secr/js/utils.js' %}"></script>
-{% endblock %}
-
-{% block breadcrumbs %}{{ block.super }}
-    &raquo; Announcement
-{% endblock %}
-
 {% block content %}
+    <h1>Announcement</h1>
+
 
     <div class="module">
         <h2>Confirm Announcement</h2>
 
-        <form action="{% url "ietf.secr.announcement.views.confirm" %}" method="post">{% csrf_token %}
+        <form action="{% url 'ietf.secr.announcement.views.confirm' %}" method="post">{% csrf_token %}
 
             <pre id="announce-confirm">
 To: {{ to }}
@@ -29,15 +24,13 @@ <h2>Confirm Announcement</h2>
 {{ message.body }}
             </pre>
 
-            {{ form }}
-            <div class="button-group">
-                <ul id="announcement-button-list">
-                    <li><button type="submit" name="submit" value="Send">Send</button></li>
-                    <li><button type="button" onclick="history.go(-1);return false">Back</button></li>
-                    <li><button type="submit" name="submit" value="Cancel">Cancel</button></li>
-                </ul>
-            </div> <!-- button-group -->
+            {% bootstrap_form form %}
 
+            <div class="d-flex justify-content-around">
+                <button class="btn btn-primary" type="submit" name="submit" value="Send">Send</button>
+                <button class="btn btn-secondary" type="button" onclick="history.go(-1);return false">Back</button>
+                <button class="btn btn-danger" type="submit" name="submit" value="Cancel">Cancel</button>
+            </div>
         </form>
     </div> <!-- module -->
 
diff --git a/ietf/secr/templates/announcement/index.html b/ietf/secr/templates/announcement/index.html
new file mode 100644
index 00000000000..ad7226e3bc1
--- /dev/null
+++ b/ietf/secr/templates/announcement/index.html
@@ -0,0 +1,31 @@
+{# Copyright The IETF Trust 2024, All Rights Reserved #}
+{% extends "base.html" %}
+{% load static %}
+{% load ietf_filters %}
+{% load django_bootstrap5 %}
+{% block title %}Announcement{% endblock %}
+{% block content %}
+    <h1 class="announcement">Announcement</h1>
+    {% if form.non_field_errors %}<div class="my-3 alert alert-danger">{{ form.non_field_errors }}</div>{% endif %}
+
+    <form id="announcement-form" method="post">
+        {% csrf_token %}
+        {% bootstrap_field form.nomcom layout='horizontal' %}
+        {% bootstrap_field form.to layout='horizontal' %}
+        {% bootstrap_field form.to_custom layout='horizontal' %}
+        {% bootstrap_field form.frm layout='horizontal' %}
+        {% bootstrap_field form.cc layout='horizontal' %}
+        {% bootstrap_field form.bcc layout='horizontal' %}
+        {% bootstrap_field form.reply_to layout='horizontal' %}
+        {% bootstrap_field form.subject layout='horizontal' %}
+        {% bootstrap_field form.body layout='horizontal' %}
+
+        <button type="submit" class="btn btn-primary">Continue</button>
+        <a class="btn btn-secondary float-end"
+               href="{% url 'ietf.secr' %}">Cancel</a>
+    </form>
+
+{% endblock %}
+{% block js %}
+    <script src="{% static 'ietf/js/announcement.js' %}"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/ietf/secr/templates/announcement/main.html b/ietf/secr/templates/announcement/main.html
deleted file mode 100644
index c88b4a2406c..00000000000
--- a/ietf/secr/templates/announcement/main.html
+++ /dev/null
@@ -1,36 +0,0 @@
-{% extends "base_site.html" %}
-
-{% block title %}Announcement{% endblock %}
-
-{% block breadcrumbs %}{{ block.super }}
-    &raquo; Announcement
-{% endblock %}
-
-{% block content %}
-
-    <div class="module">
-        <h2>Announcement</h2>
-
-        <form method="post">{% csrf_token %}
-            <table class="new-style full-width amstable" id="announce-table">
-                <tbody>
-                {% if form.non_field_errors %}{{ form.non_field_errors }}{% endif %}
-                {% for field in form.visible_fields %}
-                    <tr>
-                        <th scope="row">{{ field.label_tag }}{% if field.field.required %}<span class="required"> *</span>{% endif %}</th>
-                        <td>{{ field.errors }}{{ field }}{% if field.help_text %}<br>{{ field.help_text }}{% endif %}</td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-            <div class="button-group">
-                <ul id="announcement-button-list">
-                    <li><button type="submit" name="submit" value="Continue">Continue</button></li>
-                    <li><button type="button" onclick="window.location='../'" value="Cancel">Cancel</button></li>
-                </ul>
-            </div> <!-- button-group -->
-
-        </form>
-    </div> <!-- module -->
-
-{% endblock %}
diff --git a/ietf/secr/templates/index.html b/ietf/secr/templates/index.html
new file mode 100644
index 00000000000..05fa3db41f0
--- /dev/null
+++ b/ietf/secr/templates/index.html
@@ -0,0 +1,33 @@
+{# Copyright The IETF Trust 2007, All Rights Reserved #}
+{% extends "base.html" %}
+{% load static %}
+{% load ietf_filters %}
+{% block title %}Secretariat Dashboard{% endblock %}
+{% block content %}
+    <h1>Secretariat Dashboard</h1>
+    <div class="">
+        {% if user|has_role:"Secretariat" %}
+            <h2>IESG</h2>
+            <ul>
+                <li><a href="{% url 'ietf.secr.announcement.views.main' %}"><b>Announcement</b></a></li>
+                <li><a href="{% url 'ietf.secr.telechat.views.main' %}"><b>Telechat</b></a></li>
+            </ul>
+
+            <h2>IDs and WGs Process</h2>
+            <ul>
+                <li> <a href="{% url 'ietf.secr.rolodex.views.search' %}"><b>Rolodex</b></a></li>
+            </ul>
+
+            <h2>Meetings and Proceedings</h2>
+            <ul>
+                <li> <a href="{% url 'ietf.secr.sreq.views.main' %} "><b>Session Requests</b></a></li>
+                <li> <a href="{% url 'ietf.secr.meetings.views.main' %}"><b>Meeting Manager</b></a></li>
+            </ul>
+        {% else %}
+            <ul>
+                <li> <a href="{% url 'ietf.secr.sreq.views.main' %}"><b>Session Requests</b></a></li>
+                <li> <a href="{% url 'ietf.secr.announcement.views.main' %}"><b>Announcements</b></a></li>
+            </ul>
+        {% endif %}
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/ietf/secr/templates/main.html b/ietf/secr/templates/main.html
deleted file mode 100644
index 42d6e8f6a13..00000000000
--- a/ietf/secr/templates/main.html
+++ /dev/null
@@ -1,69 +0,0 @@
-{% extends "base_site.html" %}
-{% load ietf_filters %}
-
-{% block content %}
-    <div id="content-main">
-
-        {% if user|has_role:"Secretariat" %}
-
-            <table class="menu">
-                <tbody>
-                <tr>
-                    <td>
-                        <h2>IESG</h2>
-                        <ul>
-                        <li> <a href="{% url 'ietf.secr.announcement.views.main' %}"><b>Announcement</b></a></li>
-                        <li> <a href="{% url 'ietf.secr.telechat.views.main' %}"><b>Telechat</b></a></li>
-                        </ul>
-                    </td>
-                    <td>
-                        <h2>IDs and WGs Process</h2>
-                        <ul>
-                        <li> <a href="{% url 'ietf.secr.rolodex.views.search' %}"><b>Rolodex</b></a></li>
-                        </ul>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <h2>Meetings and Proceedings</h2>
-                        <ul>
-                        <li> <a href="{% url "ietf.secr.sreq.views.main" %}"><b>Session Requests</b></a></li>
-                        <li> <a href="{% url "ietf.secr.meetings.views.main" %}"><b>Meeting Manager</b></a></li>
-                        </ul>
-                    </td>
-                    <td></td>
-                </tr>
-                </tbody>
-            </table>
-
-        {% else %}
-
-            <table class="menu">
-                <tbody>
-                <tr>
-                    <td>
-                        <h2>Section 1</h2>
-                        <ul>
-                        <li> <a href="{% url "ietf.secr.sreq.views.main" %}"><b>Session Requests</b></a></li>
-                        <li> <a href="{% url 'ietf.secr.announcement.views.main' %}"><b>Announcements</b></a></li>
-                        </ul>
-                    </td>
-                    <td>
-                        <h2>Section 2</h2>
-                    </td>
-                </tr>
-                <tr>
-                    <td>
-                        <h2>Section 3</h2>
-                    </td>
-                    <td>
-                        <h2>Section 4</h2>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-
-        {% endif %}
-
-    </div>
-{% endblock %}
\ No newline at end of file
diff --git a/ietf/secr/urls.py b/ietf/secr/urls.py
index 0ce14a449aa..4a3e5b0363f 100644
--- a/ietf/secr/urls.py
+++ b/ietf/secr/urls.py
@@ -2,7 +2,7 @@
 from django.views.generic import TemplateView
 
 urlpatterns = [
-    re_path(r'^$', TemplateView.as_view(template_name='main.html')),
+    re_path(r'^$', TemplateView.as_view(template_name='index.html'), name='ietf.secr'),
     re_path(r'^announcement/', include('ietf.secr.announcement.urls')),
     re_path(r'^meetings/', include('ietf.secr.meetings.urls')),
     re_path(r'^rolodex/', include('ietf.secr.rolodex.urls')),
diff --git a/ietf/static/js/announcement.js b/ietf/static/js/announcement.js
new file mode 100644
index 00000000000..95465120fa8
--- /dev/null
+++ b/ietf/static/js/announcement.js
@@ -0,0 +1,57 @@
+const announcementApp = (function() {
+    'use strict';
+    return {
+        // functions for Announcement
+        checkToField: function() {
+            document.documentElement.scrollTop = 0; // For most browsers
+            const toField = document.getElementById('id_to');
+            const toCustomInput = document.getElementById('id_to_custom');
+            const toCustomDiv = toCustomInput.closest('div.row');
+            
+            if (toField.value === 'Other...') {
+                toCustomDiv.style.display = 'flex'; // Show the custom field
+            } else {
+                toCustomDiv.style.display = 'none'; // Hide the custom field
+                toCustomInput.value = ''; // Optionally clear the input value if hidden
+            }
+        }
+    };
+})();
+
+// Extra care is required to ensure the back button 
+// works properly for the optional to_custom field.
+// Take the case when a user selects "Other..." for
+// "To" field. The "To custom" field appears and they
+// enter a new address there.
+// In Chrome, when the form is submitted and then the user
+// uses the back button (or browser back), the page loads
+// from bfcache then the javascript DOMContentLoaded event
+// handler is run, hiding the empty to_custom field, THEN the
+// browser autofills the form fields. Because to_submit
+// is now hidden it does not get a value. This is a very
+// bad experience for the user because the to_custom field
+// was unexpectedly cleared and hidden. If they notice this
+// they would need to know to first select another "To"
+// option, then select "Other..." again just to get the
+// to_custom field visible so they can re-enter the custom
+// address.
+// The solution is to use setTimeout to run checkToField
+// after a short delay, giving the browser time to autofill
+// the form fields before it checks to see if the to_custom
+// field is empty and hides it.
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Run the visibility check after allowing cache to populate values
+    setTimeout(announcementApp.checkToField, 300);
+
+    const toField = document.getElementById('id_to');
+    toField.addEventListener('change', announcementApp.checkToField);
+});
+
+// Handle back/forward navigation with pageshow
+window.addEventListener('pageshow', function(event) {
+    if (event.persisted) {
+        // Then apply visibility logic after cache restoration
+        setTimeout(announcementApp.checkToField, 300);
+    }
+});
\ No newline at end of file
diff --git a/package.json b/package.json
index 6d1591ca151..e3e89288e77 100644
--- a/package.json
+++ b/package.json
@@ -114,6 +114,7 @@
         "ietf/static/js/add_session_recordings.js",
         "ietf/static/js/agenda_filter.js",
         "ietf/static/js/agenda_materials.js",
+        "ietf/static/js/announcement.js",
         "ietf/static/js/complete-review.js",
         "ietf/static/js/create_timeslot.js",
         "ietf/static/js/create_timeslot.js",
diff --git a/playwright/.gitignore b/playwright/.gitignore
index 75e854d8dcf..f38d036a792 100644
--- a/playwright/.gitignore
+++ b/playwright/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+auth.json
\ No newline at end of file
diff --git a/playwright/tests-legacy/secr/announcement.spec.js b/playwright/tests-legacy/secr/announcement.spec.js
new file mode 100644
index 00000000000..4dbbc25a813
--- /dev/null
+++ b/playwright/tests-legacy/secr/announcement.spec.js
@@ -0,0 +1,77 @@
+const { test, expect } = require('@playwright/test')
+const viewports = require('../../helpers/viewports')
+const { setTimeout } = require('timers/promises')
+
+// ====================================================================
+// ANNOUNCEMENT | DESKTOP viewport
+// ====================================================================
+
+test.describe('desktop', () => {
+  
+  test.beforeAll(async ({ browser }) => {
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    await page.goto('/accounts/login/');
+
+    await page.fill('input#id_username', 'glen');
+    await page.fill('input#id_password', 'password');
+
+    await page.click('button[type="submit"]');
+    await page.waitForURL('/accounts/profile/');
+
+    await context.storageState({ path: 'auth.json' });
+
+    await context.close();
+  });
+
+  test.beforeEach(async ({ browser }) => {
+    // Reuse the authentication state in each test
+    const context = await browser.newContext({ storageState: 'auth.json' });
+    const page = await context.newPage();
+    await page.setViewportSize({
+      width: viewports.desktop[0],
+      height: viewports.desktop[1]
+    })
+    await page.goto(`/secr/announcement/`); 
+    await page.locator('h1:text("Announcement")').waitFor({ state: 'visible' })
+    await setTimeout(500)
+    // Attach the page to the test context
+    test.info().page = page;
+  })
+
+  test('show to custom', async () => {
+    const page = test.info().page;
+
+    // to_custom should initially be hidden
+    const element = page.locator('#id_to_custom');
+    await expect(element).toBeHidden();
+    await page.selectOption('select#id_to', 'Other...');
+    await expect(element).toBeVisible();
+  })
+
+  test('back button', async () => {
+    const page = test.info().page;
+
+    const element = page.locator('#id_to_custom');
+    await page.selectOption('select#id_to', 'Other...');
+    await expect(element).toBeVisible();
+    await page.fill('input#id_to_custom', 'custom@example.com');
+    await page.selectOption('select#id_frm', 'IETF Chair <chair@ietf.org>');
+    await page.fill('input#id_reply_to', 'greg@example.com');
+    await page.fill('input#id_subject', 'About Stuff');
+    await page.fill('textarea#id_body', 'This is the stuff');
+
+    await page.click('text="Continue"');
+    const h2Locator = page.locator('h2:text("Confirm Announcement")');
+    await h2Locator.waitFor({ state: 'visible' });
+
+    // click back button and check to_custom
+    await page.click('text="Back"');
+    const subjectLocator = page.locator('input#id_subject');
+    await subjectLocator.waitFor({ state: 'visible' });
+    await expect(element).toBeVisible();
+    await expect(element).toHaveValue('custom@example.com');
+  })
+
+})
\ No newline at end of file