diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
index dfee1fa07..462468c62 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
@@ -23,7 +23,7 @@
                         <div class="mt-5" v-if="!isCurrentUserSavedAsAuthor">
                             <label class="checkContainer" for="currentUserAuthor">
                                 I am the author or co-author
-                                <input type="checkbox" id="currentUserAuthor" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
+                                <input type="checkbox" id="currentUserAuthor" class="nhsuk-checkboxes__input" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
                                 <span class="checkmark nhsuk-input"></span>
                             </label>
                         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseResourceAccessTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseResourceAccessTab.vue
index e6513c0c2..8576baad6 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseResourceAccessTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseResourceAccessTab.vue
@@ -15,14 +15,14 @@
                 <div class="row">
                     <label class="checkContainer ml-3">
                         <span class="my-auto">Make this resource available to everyone within the Learning Hub community.</span>
-                        <input type="radio" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="2"/>
+                        <input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="2"/>
                         <span class="radioButton"></span>
                     </label>
                 </div>
                 <div class="row">
                     <label class="checkContainer ml-3">
                         <span class="my-auto">Make this resource available only to the NHS and Social care workforce community.</span>
-                        <input type="radio" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="3"/>
+                        <input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="3"/>
                         <span class="radioButton"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCertificateTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCertificateTab.vue
index ecac7959b..5a95808fb 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCertificateTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCertificateTab.vue
@@ -7,12 +7,12 @@
                 <div class="mb-10">
                     <label class="checkContainer mr-0">
                         <span>Yes</span>
-                        <input type="radio" name="resourceCertificateRadio" value="true" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
+                        <input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="true" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer mr-0">
                         <span>No</span>
-                        <input type="radio" name="resourceCertificateRadio" value="false" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" checked/>
+                        <input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="false" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" checked/>
                         <span class="radioButton"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
index 3cf394ff8..34383955e 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue
@@ -9,7 +9,7 @@
                     <span class="span-provider nhsuk-u-font-weight-normal">Not applicable</span>
                     <div v-for="provider in userProviders">
                         <label class="my-0 span-provider nhsuk-u-font-weight-normal">
-                            <input class="radio-button" name="resourceProviderId" type="radio" :value="provider.id" v-model="resourceProviderId" @click="setResourceProvider($event.target.value)" />
+                            <input class="radio-button" name="resourceProviderId"  type="radio" :value="provider.id" v-model="resourceProviderId" @click="setResourceProvider($event.target.value)" />
                             {{provider.name}}
                         </label>
                         <br />
@@ -19,10 +19,14 @@
                 <div class="row my-2">
                     <div class="accordion col-12" id="provided-by-info-accordion">
                         <div class="pt-0 pb-4">
+
                             <div class="heading" id="headingProvidedBy">
                                 <div class="mb-0">
-                                    <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
-                                        <div class="accordion-arrow">Why should I flag a resource as 'Developed with'</div>
+                                    <a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
+                                        <div class="accordion-arrow"></div>
+                                        <span class="pl-3">
+                                            Why should I flag a resource as 'Developed with''
+                                        </span>
                                     </a>
                                 </div>
                             </div>
@@ -107,4 +111,19 @@
         font-family: $font-stack !important;
         font-size: 19px !important;
     }
+    .radio-button {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 24px;
+        height: 24px;
+        border: 2px solid black;
+        border-radius: 50%;
+        position: relative;
+        cursor: pointer;
+        transition: box-shadow 0.3s;
+        outline: none;
+        filter: grayscale(0) !important;
+    }
+
+ 
 </style>
\ No newline at end of file
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelectorAccordion.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelectorAccordion.vue
index ba55839aa..fcd1e60a3 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelectorAccordion.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelectorAccordion.vue
@@ -1,21 +1,35 @@
 <template>
-    <details>
-        <summary class="mb-10">
-            More information on catalogues
-        </summary>
-        <div class="catalogue-selector-accordion-content">
-            <p>
-                A catalogue is a curated set of resources that has its own web page.
-            </p>
-            <p>
-                You can contribute a resource as an editor of a catalogue or in your own name.
-                To contribute a resource in your own name, select Community contributions from the drop down menu.
-            </p>
-            <p>
-                You can manage all resources that you have contributed in the My contributions area.
-            </p>
+    <div class="row my-2">
+        <div class="accordion col-12" id="cat-accordion">
+            <div class="pt-0 pb-4">
+
+                <div class="heading" id="accessibilityTypeInfo">
+                    <div class="mb-0">
+                        <a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseAccessibilityTypeInfo" aria-expanded="false" aria-controls="collapseAccessibilityTypeInfo">
+                            <div class="accordion-arrow"></div>
+                            <span class="pl-3">
+                                More information on catalogues
+                            </span>
+                        </a>
+                    </div>
+                </div>
+                <div id="collapseAccessibilityTypeInfo" class="collapse" aria-labelledby="accessibilityTypeInfo" data-parent="#cat-accordion">
+                    <div class="content col-12">
+                        <p>
+                            A catalogue is a curated set of resources that has its own web page.
+                        </p>
+                        <p>
+                            You can contribute a resource as an editor of a catalogue or in your own name.
+                            To contribute a resource in your own name, select Community contributions from the drop down menu.
+                        </p>
+                        <p>
+                            You can manage all resources that you have contributed in the My contributions area.
+                        </p>
+                    </div>
+                </div>
+            </div>
         </div>
-    </details>
+    </div>
 </template>
 
 <script lang="ts">
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue
index 7fb3d12b4..6cd64ca20 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue
@@ -13,7 +13,7 @@
         <div class="mt-3">
             <label class="checkContainer mb-0" for="sensitivecontent">
                 Yes
-                <input type="checkbox" id="sensitivecontent" v-model="resourceDetails.sensitiveContent">
+                <input type="checkbox" id="sensitivecontent" class="nhsuk-checkboxes__input" v-model="resourceDetails.sensitiveContent">
                 <span class="checkmark"></span>
             </label>
         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
index 9b2a854c7..379e9572a 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
@@ -9,14 +9,18 @@
         <div class="row my-2">
             <div class="accordion col-12" id="cat-accordion">
                 <div class="pt-0 pb-4">
-                    <div class="heading" id="headingCat">
+
+                    <div class="heading" id="accessibilityTypeInfo">
                         <div class="mb-0">
-                            <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseCat" aria-expanded="false" aria-controls="collapseCat">
-                                <div class="accordion-arrow">More information on catalogues</div>
+                            <a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseAccessibilityTypeInfo" aria-expanded="false" aria-controls="collapseAccessibilityTypeInfo">
+                                <div class="accordion-arrow"></div>
+                                <span class="pl-3">
+                                    More information on catalogues
+                                </span>
                             </a>
                         </div>
                     </div>
-                    <div id="collapseCat" class="collapse" aria-labelledby="headingCat" data-parent="#cat-accordion">
+                    <div id="collapseAccessibilityTypeInfo" class="collapse" aria-labelledby="accessibilityTypeInfo" data-parent="#cat-accordion">
                         <div class="content col-12">
                             <p>
                                 A catalogue is a curated set of resources that has its own web page.
@@ -33,7 +37,6 @@
                 </div>
             </div>
         </div>
-
         <div class="row">
             <div class="form-group col-12">
                 <select class="form-control nhsuk-input" aria-labelledby="type-label" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
index d38662e50..d759ea5e5 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
@@ -1168,7 +1168,6 @@
     })
 
 </script>
-
 <style lang="scss" scoped>
     .resource-area-body-file-upload {
         min-height: auto !important;
@@ -1181,4 +1180,5 @@
     .password-div-width{
         max-width:70% !important;
         }
+
 </style>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAccess.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAccess.vue
index 777f3e173..47eb992bd 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAccess.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAccess.vue
@@ -13,14 +13,14 @@
         <div class="row">
             <label class="checkContainer ml-3">
                 <span class="my-auto">Make this resource available to everyone within the Learning Hub community.</span>
-                <input type="radio" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="2" @click="setProperty($event.target.name, $event.target.value)" />
+                <input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="2" @click="setProperty($event.target.name, $event.target.value)" />
                 <span class="radioButton"></span>
             </label>
         </div>
         <div class="row">
             <label class="checkContainer ml-3">
                 <span class="my-auto">Make this resource available only to the NHS and Social care workforce community.</span>
-                <input type="radio" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="3" @click="setProperty($event.target.name, $event.target.value)" checked />
+                <input type="radio"  class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="3" @click="setProperty($event.target.name, $event.target.value)" checked />
                 <span class="radioButton"></span>
             </label>
         </div>
@@ -148,5 +148,5 @@
             left: 4px;
             width: 12px;
             height: 12px;
-        }    
+        }
 </style>
\ No newline at end of file
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
index 9e32d9072..180b60b61 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
@@ -25,11 +25,16 @@
                     <div class="pt-0 pb-4">
                         <div class="heading" id="headingProvidedBy">
                             <div class="mb-0">
-                                <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
-                                    <div class="accordion-arrow">Why should I flag a resource as 'Developed with'</div>
+                                <a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
+                                    <div class="accordion-arrow"></div>
+                                    <span class="pl-3">
+                                        Why should I flag a resource as 'Developed with'
+                                    </span>
                                 </a>
                             </div>
                         </div>
+
+
                         <div id="collapseProvidedByInfo" class="collapse" aria-labelledby="headingProvidedBy" data-parent="#provided-by-info-accordion">
                             <div class="content col-12">
                                 <p>
@@ -68,7 +73,7 @@
                     <div class="mt-3">
                         <label class="checkContainer mb-0" for="sensitivecontent">
                             Yes
-                            <input type="checkbox" id="sensitivecontent" v-model="sensitiveContent" @click="setSensitiveContent($event.target.checked)">
+                            <input type="checkbox" id="sensitivecontent" class="nhsuk-checkboxes__input" v-model="sensitiveContent" @click="setSensitiveContent($event.target.checked)">
                             <span class="checkmark"></span>
                         </label>
                     </div>
@@ -153,7 +158,7 @@
                 <div>
                     <label class="checkContainer" for="currentUserAuthor">
                         I am the author or co-author
-                        <input type="checkbox" id="currentUserAuthor" v-model="currentUserAuthor" @change="currentUserAuthorChange">
+                        <input type="checkbox" class="nhsuk-checkboxes__input" id="currentUserAuthor" v-model="currentUserAuthor" @change="currentUserAuthorChange">
                         <span class="checkmark"></span>
                     </label>
                 </div>
@@ -223,12 +228,12 @@
                 <div class="mb-10">
                     <label class="checkContainer mr-0">
                         <span>Yes</span>
-                        <input type="radio" name="resourceCertificateRadio" value="true" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
+                        <input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="true" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer mr-0">
                         <span>No</span>
-                        <input type="radio" name="resourceCertificateRadio" value="false" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
+                        <input type="radio" name="resourceCertificateRadio"  class="nhsuk-radios__input" value="false" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
                         <span class="radioButton"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue
index 6f6295c1a..c044e8c75 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue
@@ -108,22 +108,22 @@
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Don't display</span>
-                        <input type="radio" name="esrLinkType" v-model="localGenericFileDetail.esrLinkType" value="1" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)" checked>
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localGenericFileDetail.esrLinkType" value="1" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)" checked>
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3" v-if="resourceCatalogueCount<=1">
                         <span>Display only to me</span>
-                        <input type="radio" name="esrLinkType" v-model="localGenericFileDetail.esrLinkType" value="2" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localGenericFileDetail.esrLinkType" value="2" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3" v-if="resourceCatalogueCount>1">
                         <span>Display only to me and other catalogue editors</span>
-                        <input type="radio" name="esrLinkType" v-model="localGenericFileDetail.esrLinkType" value="3" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localGenericFileDetail.esrLinkType" value="3" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3">
                         <span>Display to everyone</span>
-                        <input type="radio" name="esrLinkType" v-model="localGenericFileDetail.esrLinkType" value="4" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType"class="nhsuk-radios__input"  v-model="localGenericFileDetail.esrLinkType" value="4" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue
index 64a89e90d..1ae7ee6fd 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue
@@ -54,14 +54,14 @@
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Default (1024 x 768)</span>
-                        <input type="radio" name="htmlWindowType" v-model="localHtmlDetail.useDefaultPopupWindowSize" v-bind:value="true" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedHtmlWindowSizePanel" checked />
+                        <input type="radio" name="htmlWindowType" class="nhsuk-radios__input" v-model="localHtmlDetail.useDefaultPopupWindowSize" v-bind:value="true" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedHtmlWindowSizePanel" checked />
                         <span class="radioButton"></span>
                     </label>
                 </div>
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Advanced</span>
-                        <input type="radio" name="htmlWindowType" v-model="localHtmlDetail.useDefaultPopupWindowSize" v-bind:value="false" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedHtmlWindowSizePanel" />
+                        <input type="radio" name="htmlWindowType"  class="nhsuk-radios__input" v-model="localHtmlDetail.useDefaultPopupWindowSize" v-bind:value="false" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedHtmlWindowSizePanel" />
                         <span class="radioButton"></span>
                     </label>
                 </div>
@@ -119,22 +119,22 @@
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Don't display</span>
-                        <input type="radio" name="esrLinkType" v-model="localHtmlDetail.esrLinkType" value="1" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)" checked>
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localHtmlDetail.esrLinkType" value="1" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)" checked>
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3" v-if="resourceCatalogueCount<=1">
                         <span>Display only to me</span>
-                        <input type="radio" name="esrLinkType" v-model="localHtmlDetail.esrLinkType" value="2" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localHtmlDetail.esrLinkType" value="2" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3" v-if="resourceCatalogueCount>1">
                         <span>Display only to me and other catalogue editors</span>
-                        <input type="radio" name="esrLinkType" v-model="localHtmlDetail.esrLinkType" value="3" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localHtmlDetail.esrLinkType" value="3" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3">
                         <span>Display to everyone</span>
-                        <input type="radio" name="esrLinkType" v-model="localHtmlDetail.esrLinkType" value="4" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localHtmlDetail.esrLinkType" value="4" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScorm.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScorm.vue
index 5b1a8a95b..74d132ade 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScorm.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScorm.vue
@@ -42,14 +42,14 @@
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Default (1024 x 768)</span>
-                        <input type="radio" name="scormWindowType" v-model="localScormDetail.useDefaultPopupWindowSize" v-bind:value="true" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedScormWindowSizePanel" checked />
+                        <input type="radio" name="scormWindowType" class="nhsuk-radios__input" v-model="localScormDetail.useDefaultPopupWindowSize" v-bind:value="true" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedScormWindowSizePanel" checked />
                         <span class="radioButton"></span>
                     </label>
                 </div>
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Advanced</span>
-                        <input type="radio" name="scormWindowType" v-model="localScormDetail.useDefaultPopupWindowSize" v-bind:value="false" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedScormWindowSizePanel" />
+                        <input type="radio" name="scormWindowType" class="nhsuk-radios__input" v-model="localScormDetail.useDefaultPopupWindowSize" v-bind:value="false" @click="selectPopupWindowSize($event.target.value)" data-toggle="collapse" data-target="#advancedScormWindowSizePanel" />
                         <span class="radioButton"></span>
                     </label>
                 </div>
@@ -106,22 +106,22 @@
                 <div class="row">
                     <label class="checkContainer mr-0" style="margin-left:10px;">
                         <span>Don't display</span>
-                        <input type="radio" name="esrLinkType" v-model="localScormDetail.esrLinkType" value="1" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)" checked>
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localScormDetail.esrLinkType" value="1" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)" checked>
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3" v-if="resourceCatalogueCount<=1">
                         <span>Display only to me</span>
-                        <input type="radio" name="esrLinkType" v-model="localScormDetail.esrLinkType" value="2" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localScormDetail.esrLinkType" value="2" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3" v-if="resourceCatalogueCount>1">
                         <span>Display only to me and other catalogue editors</span>
-                        <input type="radio" name="esrLinkType" v-model="localScormDetail.esrLinkType" value="3" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localScormDetail.esrLinkType" value="3" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                     <label class="checkContainer ml-3">
                         <span>Display to everyone</span>
-                        <input type="radio" name="esrLinkType" v-model="localScormDetail.esrLinkType" value="4" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
+                        <input type="radio" name="esrLinkType" class="nhsuk-radios__input" v-model="localScormDetail.esrLinkType" value="4" data-toggle="modal" data-target="#esrLinkModal" @click="showWarningModal($event.target.name, $event.target.value)">
                         <span class="radioButton"></span>
                     </label>
                 </div>
@@ -137,7 +137,7 @@
                 <div class="mt-3">
                     <label class="checkContainer mb-0">
                         <p class="pl-3 mb-0">Yes, make this resource available to download.</p>
-                        <input type="checkbox" name="canDownload" v-model="localScormDetail.canDownload" @click="resourceDownloadable($event.target.name, $event.target.checked)" />
+                        <input type="checkbox" name="canDownload"  class= "nhsuk-checkboxes__input" v-model="localScormDetail.canDownload" @click="resourceDownloadable($event.target.name, $event.target.checked)" />
                         <span class="checkmark"></span>
                     </label>
                 </div>
@@ -153,7 +153,7 @@
                 <div class="mt-3">
                     <label class="checkContainer mb-0">
                         <p class="pl-3 mb-0">Yes, clear the suspend data.</p>
-                        <input type="checkbox" name="clearSuspendData" v-model="localScormDetail.clearSuspendData" @click="resourceClearSuspendData($event.target.name, $event.target.checked)" />
+                        <input type="checkbox" name="clearSuspendData" class= "nhsuk-checkboxes__input" v-model="localScormDetail.clearSuspendData" @click="resourceClearSuspendData($event.target.name, $event.target.checked)" />
                         <span class="checkmark"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScormLicence.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScormLicence.vue
index 3a94bb80b..2b4ddb79e 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScormLicence.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentScormLicence.vue
@@ -5,12 +5,12 @@
         <div class="row mt-4">
             <label class="checkContainer" style="margin-right:20px; margin-left:10px;">
                 Unavailable
-                <input type="radio" name="canDownload" v-model="localScormDetail.canDownload" v-bind:value="false" @click="setProperty($event.target.name, $event.target.value)" checked>
+                <input type="radio" name="canDownload" class="nhsuk-radios__input" v-model="localScormDetail.canDownload" v-bind:value="false" @click="setProperty($event.target.name, $event.target.value)" checked>
                 <span class="radioButton"></span>
             </label>
             <label class="checkContainer">
                 Available
-                <input type="radio" name="canDownload" v-model="localScormDetail.canDownload" v-bind:value="true" @click="setProperty($event.target.name, $event.target.value)">
+                <input type="radio" name="canDownload" class="nhsuk-radios__input" v-model="localScormDetail.canDownload" v-bind:value="true" @click="setProperty($event.target.name, $event.target.value)">
                 <span class="radioButton"></span>
             </label>
         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/mycontributions/mycontributions.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/mycontributions/mycontributions.vue
index a73753e16..8198e3705 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/mycontributions/mycontributions.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/mycontributions/mycontributions.vue
@@ -85,12 +85,12 @@
             <div class="lh-container-xl radio-options mt-5" v-if="selectedCatalogue && selectedCatalogue.nodeId>1">
                 <label class="checkContainer mb-0 mr-5">
                     View my contributions ({{userTotal}})
-                    <input type="radio" name="restrictToCurrentUser" v-model="restrictToCurrentUser" :value="true" @change="setRestrictToCurrentUser()" />
+                    <input type="radio" name="restrictToCurrentUser" class="nhsuk-radios__input" v-model="restrictToCurrentUser" :value="true" @change="setRestrictToCurrentUser()" />
                     <span class="radioButton"></span>
                 </label>
                 <label class="checkContainer mb-0">
                     View all resources in this catalogue ({{catalogueTotal}})
-                    <input type="radio" name="restrictToCurrentUser" v-model="restrictToCurrentUser" :value="false" @change="setRestrictToCurrentUser()" />
+                    <input type="radio" name="restrictToCurrentUser" class="nhsuk-radios__input" v-model="restrictToCurrentUser" :value="false" @change="setRestrictToCurrentUser()" />
                     <span class="radioButton"></span>
                 </label>
             </div>
diff --git a/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss b/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
index ec574a288..13086fde1 100644
--- a/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
+++ b/LearningHub.Nhs.WebUI/Styles/nhsuk/common.scss
@@ -228,3 +228,67 @@ form label.nhsuk-u-visually-hidden {
     margin-top: auto !important;
     margin-bottom: auto !important;
 }
+.btn:focus, .btn.focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem $nhsuk-yellow !important;
+    background-color: $govuk-focus-highlight-yellow;
+}
+/*Add a background color to the radio button when focused */
+.nhsuk-radios__input:focus + .radioButton {
+    box-shadow: 0 0 0 3px $nhsuk-yellow;
+}
+/*Add a background color to the radio button when focused */
+.nhsuk-checkboxes__input:focus + .checkmark {
+    box-shadow: 0 0 0 4px $nhsuk-yellow;
+}
+
+.accessible-link:focus {
+    outline: none;
+    text-decoration: none;
+    color: $nhsuk-black;
+    box-shadow: 0 0 0 4px $nhsuk-yellow;
+}
+
+/*Add a background color to the radio button when focused */
+.radio-button:focus {
+    box-shadow: 0 0 0 4px $nhsuk-yellow !important;
+    outline: 0;
+    //box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
+}
+
+.radio-button {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    border: 2px solid black;
+    border-radius: 50%;
+    position: relative;
+    cursor: pointer;
+    transition: box-shadow 0.3s;
+    outline: none;
+}
+
+/* Yellow glow on focus */
+.radio-button:focus {
+    box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
+}
+
+/* Inner black dot when selected */
+.radio-button:checked::before {
+    content: "";
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 12px;
+    height: 12px;
+    background-color: black;
+    border-radius: 50%;
+}
+
+label {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px; /* space between radio and text */
+    margin: 7px;
+}
\ No newline at end of file