diff --git a/apps/design-land/src/app/accordion/accordion.component.html b/apps/design-land/src/app/accordion/accordion.component.html
index 2297d1aac3..3dab665afa 100644
--- a/apps/design-land/src/app/accordion/accordion.component.html
+++ b/apps/design-land/src/app/accordion/accordion.component.html
@@ -1,7 +1,18 @@
 <h1 daffArticleTitle>Accordion</h1>
+<p daffArticleLead>An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.</p>
 
-<h3>Types</h3>
-<p><code>daff-accordion-item</code> - An accordion that typically holds content.</p>
+<h2>Overview</h2>
+<p>Accordions are made up of <code>&lt;daff-accordion-item&gt;</code>s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.</p>
 
-<h3>Content Accordion Item</h3>
+<h2>Supported Content Types</h2>
+<p>An accordion item can include a <code>[daffAccordionItemTitle]</code>, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.</p>
+
+<p>By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.</p>
+
+<h3>Setting an item to be expanded by default</h3>
+<p>An item content can be visibile on render by setting the <code>initiallyExpanded</code> property to <code>true</code> on <code>&lt;daff-accordion-item&gt;</code>.</p>
+
+<h2>Usage</h2>
+
+<h3>Basic Accordion</h3>
 <design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
diff --git a/apps/design-land/src/app/accordion/accordion.component.scss b/apps/design-land/src/app/accordion/accordion.component.scss
deleted file mode 100644
index ddb7262b3f..0000000000
--- a/apps/design-land/src/app/accordion/accordion.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-daff-accordion {
-  max-width: 800px;
-}
-
-.design-land-accordion-example {
-	margin-bottom: 40px;
-}
-
-a {
-	font-weight: 400;
-}
diff --git a/apps/design-land/src/app/accordion/accordion.component.ts b/apps/design-land/src/app/accordion/accordion.component.ts
index e338369217..fc4245aae9 100644
--- a/apps/design-land/src/app/accordion/accordion.component.ts
+++ b/apps/design-land/src/app/accordion/accordion.component.ts
@@ -3,6 +3,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'design-land-accordion',
   templateUrl: './accordion.component.html',
-  styleUrls: ['./accordion.component.scss'],
 })
 export class DesignLandAccordionComponent {}
diff --git a/libs/design/accordion/README.md b/libs/design/accordion/README.md
index 2d2a434617..d27f81858d 100644
--- a/libs/design/accordion/README.md
+++ b/libs/design/accordion/README.md
@@ -1,21 +1,18 @@
-# Accordion Component
+# Accordion
+An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.
 
-The accordion component is a useful component when you're trying to display chunks of content in a compact fashion.
+## Overview
+Accordions are made up of `<daff-accordion-item>`s that can be expanded or collapsed to display large amounts of information. Accordions are helpful to shorten pages and reduce scrolling by hiding content that's not crucial to display at all times.
 
-The accordion consists of a global `<daff-accordion>` parent with children `<daff-accordion-item>`s.
+## Supported Content Types
+An accordion item can include a `[daffAccordionItemTitle]`, which provides a high level overview of the content. Any other content within an accordion item will be displayed as the primary content.
+
+By default, the accordion item includes a toggle icon at the end of the header to indicate if it's expanded or collapsed.
+
+### Setting an item to be expanded by default 
+An item content can be visibile on render by setting the `initiallyExpanded` property to `true` on `daff-accordion-item`.
 
 ## Usage
 
-```
-<daff-accordion>
-    <daff-accordion-item initiallyActive="true">
-        <h3 daffAccordionItemTitle>Details</h3>
-        <div daffAccordionItemContent>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-            lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-            et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-            <a>Learn More.</a>
-        </div>
-    </daff-accordion-item>
-</daff-accordion>
-```
+### Basic Accordion
+<design-land-example-viewer-container example="basic-accordion"></design-land-example-viewer-container>
\ No newline at end of file
diff --git a/libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html b/libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html
index 16ff22dec9..1e307f60e4 100644
--- a/libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html
+++ b/libs/design/accordion/examples/src/basic-accordion/basic-accordion.component.html
@@ -1,29 +1,23 @@
 <daff-accordion>
-	<daff-accordion-item initiallyActive="true">
-		<h3 daffAccordionItemTitle>Details</h3>
-		<div daffAccordionItemContent>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-				lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-				et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-				<a>Learn More.</a>
-		</div>
+	<daff-accordion-item [initiallyExpanded]="true">
+		<div daffAccordionItemTitle>This is the accordion item title</div>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.
+			<a href="/">Learn More.</a>
+		</p>
 	</daff-accordion-item>
 	<daff-accordion-item>
-		<h3 daffAccordionItemTitle>Details</h3>
-		<div daffAccordionItemContent>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-				lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-				et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-				<a>Learn More.</a>
-		</div>
+		<div daffAccordionItemTitle>This is the accordion item title</div>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.
+			<a href="/">Learn More.</a>
+		</p>
 	</daff-accordion-item>
 	<daff-accordion-item>
-		<h3 daffAccordionItemTitle>Details</h3>
-		<div daffAccordionItemContent>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo 
-				lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, 
-				et maximus quam efficitur sed. Maecenas iaculis nisl neque, maximus sagittis libero sagittis eget.
-				<a>Learn More.</a>
-		</div>
+		<div daffAccordionItemTitle>This is the accordion item title</div>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo lacus ut sapien consectetur, et ultricies leo rutrum. Integer iaculis ultrices nunc, et maximus quam efficitur sed.
+			<a href="/">Learn More.</a>
+		</p>
 	</daff-accordion-item>
 </daff-accordion>
diff --git a/libs/design/accordion/src/accordion-theme.scss b/libs/design/accordion/src/accordion-theme.scss
index 118f252c4b..1a4d8fe0d3 100644
--- a/libs/design/accordion/src/accordion-theme.scss
+++ b/libs/design/accordion/src/accordion-theme.scss
@@ -7,6 +7,16 @@
 	$base: core.daff-map-deep-get($theme, 'core.base');
 
 	.daff-accordion-item {
-		border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		border-top: 1px solid theming.daff-illuminate($base, $neutral, 2);
+
+		&:last-child {
+			border-bottom: 1px solid theming.daff-illuminate($base, $neutral, 2);
+		}
+		
+		&__header {
+			&:after {
+				border-color: currentColor;
+			}
+		}
 	}
 }
diff --git a/libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts b/libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts
index 82a955f444..c6d1b132fe 100644
--- a/libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts
+++ b/libs/design/accordion/src/accordion/accordion-item-content/accordion-item-content.directive.ts
@@ -3,6 +3,9 @@ import {
   HostBinding,
 } from '@angular/core';
 
+/**
+ * @deprecated in v1.0.0
+ */
 @Directive({
   selector: '[daffAccordionItemContent]',
 })
diff --git a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html
index edb5c28376..33c1b9438e 100644
--- a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html
+++ b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.html
@@ -1,12 +1,11 @@
-<div class="daff-accordion-item__header" (click)="toggleActive()">
+<button type="button" class="daff-accordion-item__header"
+  (click)="toggleActive()"
+  [attr.aria-expanded]="_open === true"
+  [attr.aria-controls]="id">
   <ng-content select="[daffAccordionItemTitle]"></ng-content>
-  <span [hidden]="_open" daffSuffix>
-    <fa-icon [icon]="faChevronDown"></fa-icon>
-  </span>
-  <span [hidden]="!_open" daffSuffix>
-    <fa-icon [icon]="faChevronUp"></fa-icon>
-  </span>
-</div>
-<div [@openAccordion]="_animationState">
-  <ng-content></ng-content>
+</button>
+<div [@openAccordion]="_animationState" [id]="id">
+  <div class="daff-accordion-item__content">
+    <ng-content></ng-content>
+  </div>
 </div>
\ No newline at end of file
diff --git a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss
index 7508b92bea..4c4b7e4c36 100644
--- a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss
+++ b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.scss
@@ -1,40 +1,65 @@
-@use '../../../../scss/typography' as t;
 @use '../../../../scss/interactions';
 @use '../../../../scss/layout';
 
 .daff-accordion-item {
+	$root: &;
 	display: block;
-	padding: 15px 0;
-	width: 100%;
-
-	@include layout.breakpoint(tablet) {
-		padding: 30px 0;
-	}
 
 	&__header {
 		@include interactions.clickable;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		width: 100%;
+		gap: 8px;
+		background: none;
+		border: none;
+		inline-size: 100%;
+		margin: 0;
+		padding: 16px;
+		position: relative;
 
-		.daff-suffix {
-			margin: 0 10px;
+		&::after {
+      content: '';
+      position: absolute;
+      top: 48%;
+      right: 2px;
+      display: inline-block;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      width: 8px;
+      height: 8px;
+      transform: translateY(-50%) rotate(45deg);
+      transition: transform 150ms;
+    }
+	}
+
+	&.open {
+		#{$root}__header {
+			&:after {
+				top: 56%;
+				transform: translateY(-50%) rotate(225deg);
+			}
 		}
 	}
 
 	&__title {
-		@include t.embolden;
-		@include t.uppercase;
 		font-size: 1rem;
+		font-weight: 500;
+		inline-size: 100%;
 		margin: 0;
+		padding: 0 32px 0 0;
+		text-align: start;
 	}
 
 	&__content {
-		padding-top: 15px;
+		padding: 0 16px 16px;
+
+		> p {
+			margin: 0 0 16px;
 
-		@include layout.breakpoint(tablet) {
-			padding-top: 30px;
+			&:last-child {
+				margin: 0;
+			}
 		}
 	}
 }
diff --git a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts
index 4debc01c09..6cc103923e 100644
--- a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts
+++ b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.spec.ts
@@ -15,13 +15,13 @@ import { DaffAccordionItemComponent } from './accordion-item.component';
 
 
 @Component({ template: `
-<daff-accordion-item [initiallyActive]="initiallyActiveValue">
+<daff-accordion-item [initiallyExpanded]="initiallyExpandedValue">
   <h3 daffAccordionItemTitle>Size and Fit</h3>
   <div daffAccordionItemContent>no content</div>
 </daff-accordion-item>
 ` })
 class WrapperComponent {
-  initiallyActiveValue: boolean;
+  initiallyExpandedValue: boolean;
 }
 
 describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
@@ -66,26 +66,26 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
     expect(daffAccordionItem._animationState).toEqual('void');
   });
 
-  it('should be able to accept an initiallyActive input', () => {
-    wrapper.initiallyActiveValue = false;
+  it('should be able to accept an initiallyExpanded input', () => {
+    wrapper.initiallyExpandedValue = false;
 
     fixture.detectChanges();
 
-    expect(daffAccordionItem.initiallyActive).toEqual(false);
+    expect(daffAccordionItem.initiallyExpanded).toEqual(false);
 
-    wrapper.initiallyActiveValue = true;
+    wrapper.initiallyExpandedValue = true;
 
     fixture.detectChanges();
 
-    expect(daffAccordionItem.initiallyActive).toEqual(true);
+    expect(daffAccordionItem.initiallyExpanded).toEqual(true);
   });
 
   describe('ngOnInit', () => {
 
-    describe('when initiallyActive is true', () => {
+    describe('when initiallyExpanded is true', () => {
 
       beforeEach(() => {
-        wrapper.initiallyActiveValue = true;
+        wrapper.initiallyExpandedValue = true;
         fixture.detectChanges();
       });
 
@@ -95,10 +95,10 @@ describe('@daffodil/design/accordion | DaffAccordionItemComponent', () => {
       });
     });
 
-    describe('when initiallyActive is not set', () => {
+    describe('when initiallyExpanded is not set', () => {
 
       beforeEach(() => {
-        wrapper.initiallyActiveValue = undefined;
+        wrapper.initiallyExpandedValue = undefined;
         fixture.detectChanges();
       });
 
diff --git a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts
index 9d2d964ae6..33d8f47f83 100644
--- a/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts
+++ b/libs/design/accordion/src/accordion/accordion-item/accordion-item.component.ts
@@ -14,6 +14,8 @@ import {
 import { daffAccordionAnimations } from '../animation/accordion-animation';
 import { getAnimationState } from '../animation/accordion-animation-state';
 
+let daffAccordionItemId = 0;
+
 @Component({
   selector: 'daff-accordion-item',
   templateUrl: './accordion-item.component.html',
@@ -39,7 +41,20 @@ export class DaffAccordionItemComponent implements OnInit {
    */
   @HostBinding('class.daff-accordion-item') class = true;
 
+  @HostBinding('class.open') get openClass() {
+    return this._open;
+  }
+
+  _daffAccordionItemId = 'daff-accordion-item' + '-' + ++daffAccordionItemId;
+
+  @Input() id: string = this._daffAccordionItemId;
+
+  /** @deprecated in v1.0.0 in favor of `initiallyExpanded` */
   @Input() initiallyActive: boolean;
+
+  /** Whether or not the item is initiallyExpanded by default. */
+  @Input() initiallyExpanded = false;
+
   /**
    * @docs-private
    */
@@ -54,6 +69,7 @@ export class DaffAccordionItemComponent implements OnInit {
    */
   ngOnInit() {
     this._open = this.initiallyActive ? this.initiallyActive : this._open;
+    this._open = this.initiallyExpanded ? this.initiallyExpanded : this._open;
     this._animationState = getAnimationState(this._open);
   }
 
diff --git a/libs/design/accordion/src/accordion/accordion/accordion.component.html b/libs/design/accordion/src/accordion/accordion/accordion.component.html
deleted file mode 100644
index 95a0b70bdc..0000000000
--- a/libs/design/accordion/src/accordion/accordion/accordion.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<ng-content></ng-content>
\ No newline at end of file
diff --git a/libs/design/accordion/src/accordion/accordion/accordion.component.scss b/libs/design/accordion/src/accordion/accordion/accordion.component.scss
deleted file mode 100644
index 2486878d86..0000000000
--- a/libs/design/accordion/src/accordion/accordion/accordion.component.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-:host {
-	display: block;
-	width: 100%;
-}
diff --git a/libs/design/accordion/src/accordion/accordion/accordion.component.ts b/libs/design/accordion/src/accordion/accordion/accordion.component.ts
index 2772e008e2..42567158b9 100644
--- a/libs/design/accordion/src/accordion/accordion/accordion.component.ts
+++ b/libs/design/accordion/src/accordion/accordion/accordion.component.ts
@@ -18,8 +18,12 @@ const _daffAccordionBase = daffArticleEncapsulatedMixin((DaffAccordionBase));
 
 @Component({
   selector: 'daff-accordion',
-  templateUrl: './accordion.component.html',
-  styleUrls: ['./accordion.component.scss'],
+  template: '<ng-content></ng-content>',
+  styles: [`
+    :host {
+      display: block;
+    }
+  `],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })