diff --git a/src/assets/styles/components/_accordion.scss b/src/assets/styles/components/_accordion.scss
index 4374ce46..3ca8a7e5 100644
--- a/src/assets/styles/components/_accordion.scss
+++ b/src/assets/styles/components/_accordion.scss
@@ -44,20 +44,28 @@
 .accordion__control {
 	@extend %interactive;
 
-	--border-width: #{rem(2)};
+	--border-width: #{rem(1)};
 	--color: var(--blue-500);
 	--background-color: transparent;
 	--hover-color: var(--blue-400);
 	--hover-background-color: var(--background-color);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
-	--focus-background-color: var(--blue-500);
+	--outline-color: var(--parent-background-color);
+	--active-color: var(--off-white);
+	--active-background-color: var(--blue-500);
+	--active-border-color: var(--blue-500);
+	--focus-background-color: var(--parent-background-color);
+	--focus-color: var(--blue-500);
+
 	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--outline-color),
-		0 0 0 calc(2 * var(--border-width)) var(--focus-background-color);
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
+
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
 
 	border: 0;
-	border-top: solid var(--border-width) var(--color);
+	border-top: solid calc(2 * var(--border-width)) var(--color);
 	display: block;
 	font-family: $font-family-sans;
 	font-size: rem(20);
@@ -78,9 +86,12 @@
 	--background-color: transparent;
 	--outline-color: var(--dark-mint-500);
 	--hover-color: var(--off-white);
-	--active-color: var(--blue-200);
-	--focus-color: var(--dark-mint-500);
-	--focus-background-color: var(--blue-200);
+	--active-color: var(--parent-background-color);
+	--active-background-color: var(--blue-200);
+	--active-border-color: var(--blue-200);
+	--focus-background-color: var(--parent-background-color);
+	--focus-border-color: var(--blue-200);
+	--focus-color: var(--off-white);
 }
 
 .accordion__control svg {
@@ -95,7 +106,7 @@
 }
 
 .accordion__control:hover {
-	border-top: solid var(--border-width) var(--blue-300);
+	border-top: solid calc(2 * var(--border-width)) var(--blue-300);
 
 	svg {
 		color: var(--blue-300);
@@ -103,7 +114,12 @@
 }
 
 .accordion__control:active {
-	border-top-color: var(--active-color);
+	border-top-color: var(--active-background-color);
+	margin-left: rem(-16);
+	margin-right: rem(-16);
+	padding-left: rem(16);
+	padding-right: rem(16);
+	width: calc(100% + #{rem(32)});
 
 	svg {
 		color: inherit;
@@ -127,17 +143,12 @@
 }
 
 .accordion__control:focus:hover {
-	border-top-color: transparent;
+	border-top-color: var(--parent-background-color);
 }
 
 .accordion__control:focus:active,
 .accordion__control:focus:hover:active {
-	border-top-color: var(--active-color);
-	margin-left: 0;
-	margin-right: 0;
-	padding-left: 0;
-	padding-right: 0;
-	width: 100%;
+	border-top-color: var(--active-background-color);
 }
 
 .accordion__control[aria-expanded="true"] {
@@ -148,9 +159,10 @@
 	--background-color: var(--expanded-background-color);
 	--active-background-color: var(--expanded-background-color);
 	--color: var(--expanded-color);
+	--focus-color: var(--off-white);
 
 	border-top-color: transparent;
-	box-shadow: 0 0 0 calc(2 * var(--border-width)) var(--expanded-background-color);
+	box-shadow: 0 0 0 calc(4 * var(--border-width)) var(--expanded-background-color);
 	margin-left: rem(-16);
 	margin-right: rem(-16);
 	padding-left: rem(16);
@@ -175,7 +187,13 @@
 	}
 }
 
+.accordion__control[aria-expanded="true"]:active,
+.accordion__control[aria-expanded="true"]:focus {
+	border-top-color: var(--background-color);
+}
+
 .accordion__control[aria-expanded="true"]:focus {
+	--outline-color: var(--active-color);
 	box-shadow: var(--focus-box-shadow);
 }
 
diff --git a/src/assets/styles/components/_call-to-action.scss b/src/assets/styles/components/_call-to-action.scss
index c4151c3d..0675b06f 100644
--- a/src/assets/styles/components/_call-to-action.scss
+++ b/src/assets/styles/components/_call-to-action.scss
@@ -1,9 +1,6 @@
 .cta {
 	@extend %interactive;
-
-	--visited-color: var(--off-white);
-	--visited-background-color: var(--blue-600);
-
+	
 	border-radius: rem(3);
 	display: block;
 	font-family: $font-family-sans;
@@ -24,11 +21,6 @@
 		margin-left: 0.25em;
 	}
 
-	&:visited {
-		background-color: var(--visited-background);
-		color: var(--visited-color);
-	}
-
 	&:hover,
 	&:active,
 	&:focus {
@@ -43,9 +35,19 @@
 	--color: var(--blue-500);
 	--outline-color: var(--blue-500);
 	--background-color: var(--off-white);
+	--hover-color: var(--color);
 	--hover-background-color: var(--blue-50);
-	--active-color: var(--blue-400);
-	--active-background-color: var(--background-color);
+	--active-color: var(--off-white);
+	--active-background-color: var(--parent-background-color);
+	--active-border-color: var(--off-white);
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--active-border-color) inset,
+		0 0 0 calc(1 * var(--border-width)) var(--active-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--active-border-color);
 	--focus-background-color: var(--background-color);
 	--focus-color: var(--blue-500);
+	--focus-border-color: var(--background-color);
+	--focus-box-shadow:
+		0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
+		0 0 0 calc(3 * var(--border-width)) var(--focus-border-color);
 }
diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index 04cb67ba..bf732194 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -33,6 +33,10 @@
 }
 
 .filters {
+	label {
+		font-weight: $font-weight-normal;
+	}
+
 	@include breakpoint-down(md) {
 		display: none;
 
@@ -82,10 +86,13 @@
 			--border-width: #{rem(1)};
 			--color: var(--off-white);
 			--hover-color: var(--off-white);
-			--active-color: var(--white);
-			--focus-background-color: var(--blue-600);
-			--focus-box-shadow: none;
-			--focus-color: var(--color);
+			--hover-underline-color: var(--blue-300);
+			--active-color: var(--parent-background-color);
+			--active-background-color: var(--blue-200);
+			--active-border-color: var(--blue-200);
+			--focus-background-color: var(--parent-background-color);
+			--focus-border-color: var(--blue-200);
+			--focus-color: var(--off-white);
 
 			border-top-color: var(--dark-mint-500);
 			height: rem(69);
@@ -95,19 +102,51 @@
 			padding-right: $gutter;
 			width: calc(100% + 2 * #{$gutter});
 
+			--focus-box-shadow:
+				0 0 0 calc(3 * var(--border-width)) var(--focus-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--focus-border-color) inset;
+
+			--active-box-shadow:
+				0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset,
+				0 0 0 calc(5 * var(--border-width)) var(--active-border-color) inset,
+				0 0 0 calc(7 * var(--border-width)) var(--parent-background-color) inset;
+
 			svg {
 				margin-right: rem(7);
 			}
 
+			&:active,
+			&:focus {
+				border-top-color: var(--parent-background-color);
+			}
+
 			&:hover {
-				border-top-color: var(--dark-mint-500);
+				border-top-color: var(--hover-underline-color);
 
 				svg {
 					color: inherit;
 				}
+
+				&:active,
+				&:focus {
+					border-top-color: var(--parent-background-color);
+				}
 			}
 		}
 
+		.accordion__control[aria-expanded="true"]:active {
+			box-shadow: var(--active-box-shadow);
+		}
+
+		.accordion__control[aria-expanded="true"]:active:focus {
+			border-top-color: var(--parent-background-color);
+			margin-left: (-1 * $gutter);
+			margin-right: 0;
+			padding-left: $gutter;
+			padding-right: $gutter;
+			width: calc(100% + 2 * #{$gutter});
+		}
+
 		.accordion__control[aria-expanded="true"] + .accordion__content {
 			background: var(--blue-600);
 			color: var(--white);
@@ -250,6 +289,7 @@
 }
 
 @include breakpoint-down(md) {
+	.filters,
 	.filters .form {
 		--text-border-color-default: var(--grey-500);
 		--text-border-color-disabled: var(--grey-500);
diff --git a/src/assets/styles/components/_link-list.scss b/src/assets/styles/components/_link-list.scss
index 06e36aa6..491d5f4f 100644
--- a/src/assets/styles/components/_link-list.scss
+++ b/src/assets/styles/components/_link-list.scss
@@ -57,25 +57,25 @@
 		border-bottom: solid rem(3) var(--hover-underline-color);
 	}
 
-	a:active,
-	a:active:hover,
-	a:active:focus {
-		background-color: var(--active-background-color);
+	a:focus {
+		background-color: var(--focus-background-color);
 		border-bottom: 0;
-		color: var(--active-color);
 		margin-left: rem(-16);
 		margin-right: rem(-16);
 		padding-left: rem(16);
 		padding-right: rem(16);
-		text-decoration: none;
 	}
 
-	a:focus {
-		background-color: var(--focus-background-color);
+	a:active,
+	a:active:hover,
+	a:active:focus {
+		background-color: var(--active-background-color);
 		border-bottom: 0;
+		color: var(--active-color);
 		margin-left: rem(-16);
 		margin-right: rem(-16);
 		padding-left: rem(16);
 		padding-right: rem(16);
+		text-decoration: none;
 	}
 }
diff --git a/src/assets/styles/components/_tag.scss b/src/assets/styles/components/_tag.scss
index d0aa4c30..8e4a091c 100644
--- a/src/assets/styles/components/_tag.scss
+++ b/src/assets/styles/components/_tag.scss
@@ -23,14 +23,18 @@
 	--outline-color: var(--white);
 	--hover-background-color: var(--grey-200);
 	--hover-color: var(--blue-500);
-	--active-background-color: var(--blue-50);
-	--active-color: var(--blue-500);
+	--active-background-color: var(--blue-700);
+	--active-border-color: var(--blue-700);
+	--active-box-shadow:
+		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
+		0 0 0 calc(4 * var(--border-width)) var(--active-border-color);
+	--active-color: var(--white);
 	--focus-background-color: var(--grey-200);
 	--focus-border-color: var(--blue-500);
 	--focus-box-shadow:
-		0 0 0 var(--border-width) var(--blue-500) inset,
+		0 0 0 calc(2 * var(--border-width)) var(--focus-border-color) inset,
 		0 0 0 calc(2 * var(--border-width)) var(--outline-color),
-		0 0 0 calc(4 * var(--border-width)) var(--blue-500);
+		0 0 0 calc(4 * var(--border-width)) var(--focus-border-color);
 	--focus-color: var(--blue-500);
 
 	border-radius: rem(15);
diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
index dd4c7046..dcf56072 100644
--- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
+++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
@@ -1,7 +1,7 @@
 <ul class="input-group checkbox{{ ' ' + className if className }}">
 	{% for checkbox in checkboxes %}
 	<li>
-		{% render '@' + component, checkbox, true %}
+		{% render '@' + component, checkbox %}
 	</li>
 	{% endfor %}
 </ul>
diff --git a/src/components/20-molecules/71-filter-list/filter-list.config.js b/src/components/20-molecules/71-filter-list/filter-list.config.js
index 0f2490f2..f9894df9 100644
--- a/src/components/20-molecules/71-filter-list/filter-list.config.js
+++ b/src/components/20-molecules/71-filter-list/filter-list.config.js
@@ -1,6 +1,10 @@
 const slugify = require( 'slugify' );
 
 const terms = [
+	{label:'Bangladesh'},
+	{label:'Brazil'},
+	{label:'Canada'},
+	{label:'France'},
 	{
 		label: 'Cooperative essentials',
 		children: [
@@ -69,13 +73,15 @@ const terms = [
 
 terms.forEach( term => {
 	const name = slugify( term.label, { lower: true } );
-	term.children = term.children.map( child => {
-		return {
-			value: slugify( child, { lower: true } ),
-			label: child,
-			name
-		};
-	} );
+	if (term.children) {
+		term.children = term.children.map( child => {
+			return {
+				value: slugify( child, { lower: true } ),
+				label: child,
+				name
+			};
+		} );
+	}
 } );
 
 module.exports = {
diff --git a/src/components/20-molecules/71-filter-list/filter-list.njk b/src/components/20-molecules/71-filter-list/filter-list.njk
index cb861e97..d368bcf7 100644
--- a/src/components/20-molecules/71-filter-list/filter-list.njk
+++ b/src/components/20-molecules/71-filter-list/filter-list.njk
@@ -20,7 +20,7 @@
 							<span class="supplementary-label" hidden> (and {{ count }} subtopics)</span>
 							{% render '@checkboxes', {checkboxes: term.children, className: 'input-group__descendant'}, true %}
 						{% else %}
-							<input type="checkbox" name="{{ label | slugify }}[]" id="{{ label | slugify }}-{{ term.label | slugify }}" value="{{ term.label | slugify }}"><label for="{{ label | slugify }}-{{ term.label | slugify }}">{{ term.label }}</label>
+							{% render '@checkbox', {label: term.label, value: term.label | slugify, name: term.label | slugify, standAlone: false}, true %}
 						{% endif %}
 					</li>
 					{% endfor %}
diff --git a/src/components/30-layouts/40-archive/archive.config.js b/src/components/30-layouts/40-archive/archive.config.js
index 1ed2b0dc..6ad28228 100644
--- a/src/components/30-layouts/40-archive/archive.config.js
+++ b/src/components/30-layouts/40-archive/archive.config.js
@@ -126,23 +126,23 @@ module.exports = {
 					{
 						label: 'Build a co-op',
 						children: [
-							'Write bylaws',
-							'Build a business model',
-							'Establish a governance structure',
-							'Incorporate a co-op',
-							'Build a marketing plan',
-							'Pick a co-op type',
-							'Make decisions collaboratively'
+							{label: 'Write bylaws'},
+							{label: 'Build a business model'},
+							{label: 'Establish a governance structure'},
+							{label: 'Incorporate a co-op'},
+							{label: 'Build a marketing plan'},
+							{label: 'Pick a co-op type'},
+							{label: 'Make decisions collaboratively'}
 						]
 					},
 					{
 						label: 'Build a platform or protocol',
 						children: [
-							'Understand the design process',
-							'Design for privacy',
-							'Design for inclusion',
-							'Build accessible digital tools',
-							'Build open source software'
+							{label: 'Understand the design process'},
+							{label: 'Design for privacy'},
+							{label: 'Design for inclusion'},
+							{label: 'Build accessible digital tools'},
+							{label: 'Build open source software'}
 						]
 					},
 					{
@@ -159,65 +159,65 @@ module.exports = {
 					{
 						label: 'Cooperative essentials',
 						children: [
-							'Governance',
-							'Ownership',
-							'Cooperative best practices',
-							'Diversity and inclusion',
-							'Bylaws',
+							{label: 'Governance'},
+							{label: 'Ownership'},
+							{label: 'Cooperative best practices'},
+							{label: 'Diversity and inclusion'},
+							{label: 'Bylaws'},
 						]
 					},
 					{
 						label: 'Business operations',
 						children: [
-							'Human resources',
-							'Marketing',
-							'Social media',
-							'Incorporation',
-							'Business model',
-							'Income, benefits, and compensation'
+							{label: 'Human resources'},
+							{label: 'Marketing'},
+							{label: 'Social media'},
+							{label: 'Incorporation'},
+							{label: 'Business model'},
+							{label: 'Income, benefits, and compensation'}
 						]
 					},
 					{
 						label: 'Technology & Platforms',
 						children: [
-							'Software development',
-							'Platforms',
-							'Design',
-							'Free software',
-							'Data',
-							'Algorithms',
-							'Automation',
-							'Blockchain',
-							'Search engines'
+							{label:'Software development'},
+							{label:'Platforms'},
+							{label:'Design'},
+							{label:'Free software'},
+							{label:'Data'},
+							{label:'Algorithms'},
+							{label:'Automation'},
+							{label:'Blockchain'},
+							{label:'Search engines'}
 						]
 					},
 					{
 						label: 'Law & Policy',
 						children: [
-							'Anti-trust',
-							'Labor law',
-							'Policy',
-							'Co-op law'
+							{label: 'Anti-trust'},
+							{label: 'Labor law'},
+							{label: 'Policy'},
+							{label: 'Co-op law'}
 						]
 					},
 					{
 						label: 'Fair labour',
 						children: [
-							'Unions',
-							'Workplace safety',
-							'Social security',
+							{label: 'Unions'},
+							{label: 'Workplace safety'},
+							{label: 'Social security'},
 						]
 					},
 					{
 						label: 'Platform co-op theory',
 						children: [
-							'Platform cooperativism',
-							'Platform capitalism',
-							'Gig economy',
-							'Sharing economy',
-							'Solidarity economy',
-							'Information economy',
-							'Peer-to-peer'
+							{label: 'Platform cooperativism'},
+							{label: 'Platform capitalism'},
+							{label: 'Gig economy'},
+							{label: 'Sharing economy'},
+							{label: 'Solidarity economy'},
+							{label: 'Information economy'},
+							{label: 'Peer-to-peer'}
 						]
 					},
 				]
@@ -326,11 +326,11 @@ module.exports = {
 					{
 						label:'Technology',
 						children: [
-							'Electronics and computer manufacturing',
-							'Software and hardware enginereeing',
-							'Web service providers',
-							'Data processing',
-							'Misc technology'
+							{label: 'Electronics and computer manufacturing'},
+							{label: 'Software and hardware enginereeing'},
+							{label: 'Web service providers'},
+							{label: 'Data processing'},
+							{label: 'Misc technology'}
 						]
 					},
 					{
diff --git a/src/components/30-layouts/40-archive/archive.njk b/src/components/30-layouts/40-archive/archive.njk
index dc7178bd..d2ab239c 100644
--- a/src/components/30-layouts/40-archive/archive.njk
+++ b/src/components/30-layouts/40-archive/archive.njk
@@ -6,7 +6,7 @@
 </div>
 <div class="filter-wrapper">
 	{% render '@button--borderless', {standAlone: true, id: 'show-filters'}, true %}
-	<form class="filters" action="/">
+	<form class="form filters" action="/">
 		{% render '@button--borderless', {standAlone: true, id: 'hide-filters', label: 'Close', iconPosition: 'end', icon: 'close'}, true %}
 		<h2 class="h1 screen-reader-text" tabindex="-1">Filters</h2>
 		<div class="accordion accordion--filter-list">