diff --git a/packages/components/psammead-script-link/CHANGELOG.md b/packages/components/psammead-script-link/CHANGELOG.md
index 301702a014..4a2cccd9d4 100644
--- a/packages/components/psammead-script-link/CHANGELOG.md
+++ b/packages/components/psammead-script-link/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 1.0.0-alpha.12 | [PR#2750](https://github.com/bbc/psammead/pull/2750) Add ScriptLink touch area styles |
 | 1.0.0-alpha.11 | [PR#2701](https://github.com/bbc/psammead/pull/2701) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.0-alpha.10 | [PR#2697](https://github.com/bbc/psammead/pull/2697) Talos - Bump Dependencies - @bbc/psammead-styles |
 | 1.0.0-alpha.9 | [PR#2685](https://github.com/bbc/psammead/pull/2685) Use border on hover and focus |
diff --git a/packages/components/psammead-script-link/package-lock.json b/packages/components/psammead-script-link/package-lock.json
index 9054104f33..90f87e9026 100644
--- a/packages/components/psammead-script-link/package-lock.json
+++ b/packages/components/psammead-script-link/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-script-link",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-script-link/package.json b/packages/components/psammead-script-link/package.json
index 883fbaea18..9147452480 100644
--- a/packages/components/psammead-script-link/package.json
+++ b/packages/components/psammead-script-link/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-script-link",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.12",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,
diff --git a/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap b/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap
index 33845f5d81..5ccdff42be 100644
--- a/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-script-link/src/__snapshots__/index.test.jsx.snap
@@ -16,7 +16,7 @@ exports[`ScriptLink should render correctly 1`] = `
   height: 3rem;
 }
 
-.c0::after {
+.c0::before {
   content: '';
   position: absolute;
   top: 0;
@@ -26,8 +26,8 @@ exports[`ScriptLink should render correctly 1`] = `
   border: 0.0625rem solid #FFFFFF;
 }
 
-.c0:hover::after,
-.c0:focus::after {
+.c0:hover::before,
+.c0:focus::before {
   border: 0.25rem solid #FFFFFF;
 }
 
@@ -45,12 +45,6 @@ exports[`ScriptLink should render correctly 1`] = `
   }
 }
 
-@media (min-width:25rem) {
-  .c0 {
-    line-height: 3rem;
-  }
-}
-
 @media (max-width:24.9375rem) {
   .c0 {
     line-height: 2.5rem;
@@ -59,12 +53,42 @@ exports[`ScriptLink should render correctly 1`] = `
   }
 }
 
+@media (min-width:25rem) {
+  .c0 {
+    line-height: 3rem;
+  }
+
+  .c0::after {
+    content: '';
+    position: absolute;
+    top: -0.25rem;
+    left: -0.25rem;
+    right: 0;
+    bottom: 0;
+    height: 2.75rem;
+    width: 2.75rem;
+    margin: 0 0.25rem;
+  }
+}
+
 @media (min-width:37.5rem) {
   .c0 {
     height: 2.25rem;
     line-height: 2.25rem;
     padding: 0 0.625rem;
   }
+
+  .c0::after {
+    content: '';
+    position: absolute;
+    top: -0.25rem;
+    left: -0.25rem;
+    right: 0;
+    bottom: 0;
+    height: 2.75rem;
+    width: 2.75rem;
+    margin: 0 0.25rem;
+  }
 }
 
 <a
diff --git a/packages/components/psammead-script-link/src/index.jsx b/packages/components/psammead-script-link/src/index.jsx
index 8c466036b4..f894f646f6 100644
--- a/packages/components/psammead-script-link/src/index.jsx
+++ b/packages/components/psammead-script-link/src/index.jsx
@@ -11,6 +11,19 @@ import { C_WHITE } from '@bbc/psammead-styles/colours';
 import { string, shape, node } from 'prop-types';
 import { scriptPropType } from '@bbc/gel-foundations/prop-types';
 
+const touchAreaStyles = `
+&::after {
+  content: '';
+  position: absolute;
+  top: -0.25rem;
+  left: -0.25rem;
+  right: 0;
+  bottom: 0;
+  height: 2.75rem;
+  width: 2.75rem;
+  margin: 0 0.25rem;
+}`;
+
 const StyledLink = styled.a`
   ${({ script }) => script && getPica(script)}
   ${({ service }) => service && getSansRegular(service)}
@@ -21,7 +34,7 @@ const StyledLink = styled.a`
   padding: 0 1rem;
   height: 3rem;
 
-  &::after {
+  &::before {
     content: '';
     position: absolute;
     top: 0;
@@ -31,23 +44,27 @@ const StyledLink = styled.a`
     border: 0.0625rem solid ${C_WHITE};
   }
 
-  &:hover::after,
-  &:focus::after {
+  &:hover::before,
+  &:focus::before {
     border: 0.25rem solid ${C_WHITE};
   }
 
-  @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
-    line-height: 3rem;
-  }
   @media (max-width: ${GEL_GROUP_1_SCREEN_WIDTH_MAX}) {
     line-height: 2.5rem;
     height: 2.5rem;
     padding: 0 0.75rem;
   }
+  @media (min-width: ${GEL_GROUP_2_SCREEN_WIDTH_MIN}) {
+    line-height: 3rem;
+
+    ${touchAreaStyles}
+  }
   @media (min-width: ${GEL_GROUP_3_SCREEN_WIDTH_MIN}) {
     height: 2.25rem;
     line-height: 2.25rem;
     padding: 0 0.625rem;
+
+    ${touchAreaStyles}
   }
 `;