diff --git a/app/components/create_log_actions_component.html.erb b/app/components/create_log_actions_component.html.erb
index 2c3b75aea..bd2ba1e98 100644
--- a/app/components/create_log_actions_component.html.erb
+++ b/app/components/create_log_actions_component.html.erb
@@ -9,10 +9,38 @@
<% end %>
<% if FeatureToggle.create_test_logs_enabled? %>
- <%= govuk_link_to "New test log", create_test_log_href %>
- <%= govuk_link_to "New test log (setup only)", create_setup_test_log_href %>
- <%= govuk_link_to "24 BU test file", create_test_bulk_upload_href(2024) %>
- <%= govuk_link_to "25 BU test file", create_test_bulk_upload_href(2025) %>
+ <div class="govuk-inset-text app-testing-tools__inset">
+ <span class="govuk-tag app-testing-tools__tag">Testing tools</span>
+ <span class="govuk-body govuk-body-s">These options can only be seen and used in testing environments.</span>
+ <div>
+ <%= govuk_button_link_to create_test_log_href, class: "govuk-button" do %>
+ New test log
+ <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+ <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+ </svg>
+ <% end %>
+ <%= govuk_button_link_to create_setup_test_log_href, class: "govuk-button" do %>
+ New test log (setup only)
+ <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
+ <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path>
+ </svg>
+ <% end %>
+ <%= govuk_button_link_to create_test_bulk_upload_href(2024), class: "govuk-button govuk-button--secondary" do %>
+ 24/25 BU test file
+ <svg class="govuk-button__start-icon bi bi-download" xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="currentColor" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4">
+ <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+ <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+ </svg>
+ <% end %>
+ <%= govuk_button_link_to create_test_bulk_upload_href(2025), class: "govuk-button govuk-button--secondary" do %>
+ 25/26 BU test file
+ <svg class="govuk-button__start-icon bi bi-download" xmlns="http://www.w3.org/2000/svg" width="18" height="19" fill="currentColor" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4">
+ <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" />
+ <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" />
+ </svg>
+ <% end %>
+ </div>
+ </div>
<% end %>
<% end %>
</div>
diff --git a/app/frontend/styles/_testing-tools.scss b/app/frontend/styles/_testing-tools.scss
new file mode 100644
index 000000000..325d2fbf8
--- /dev/null
+++ b/app/frontend/styles/_testing-tools.scss
@@ -0,0 +1,20 @@
+.app-testing-tools__inset {
+ border-left-color: #f47738;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
+.app-testing-tools__link {
+ @include govuk-link-common;
+ @include govuk-link-style-no-visited-state;
+}
+
+.app-testing-tools__tag {
+ @include govuk-font(14);
+ background-color: #fcd6c3;
+ margin-top: 0;
+ margin-bottom: 10px;
+ margin-right: 15px;
+}
diff --git a/app/frontend/styles/application.scss b/app/frontend/styles/application.scss
index 370592640..33574bf9b 100644
--- a/app/frontend/styles/application.scss
+++ b/app/frontend/styles/application.scss
@@ -49,6 +49,7 @@ $govuk-breakpoints: (
@import "sub-navigation";
@import "unread-notification";
@import "red-link";
+@import "testing-tools";
@import "custom-rails-admin";
@import "node_modules/@ministryofjustice/frontend/moj/components/date-picker/date-picker";