diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx
index 3b04a0da..256098e5 100644
--- a/src/components/Banner/Banner.stories.tsx
+++ b/src/components/Banner/Banner.stories.tsx
@@ -1,14 +1,7 @@
+import { ev as NotificationTypes } from '@dassana-io/web-utils'
 import React from 'react'
 import { Banner, BannerProps } from '.'
 import { Meta, Story } from '@storybook/react'
-import { createUseStyles } from 'react-jss'
-import { ev as NotificationTypes } from '@dassana-io/web-utils'
-
-const useStyles = createUseStyles({
-	test: {
-		backgroundColor: 'red'
-	}
-})
 
 export default {
 	argTypes: {
@@ -21,45 +14,43 @@ export default {
 
 const Template: Story<BannerProps> = args => <Banner {...args} />
 
-export const Test = Template.bind({})
-Test.args = {
-	children: 'this is a long ass message',
-	title: 'hello',
-	type: NotificationTypes.info
-}
-
 export const Error = Template.bind({})
 Error.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	children:
+		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
+	title: 'Error',
 	type: NotificationTypes.error
 }
 
 export const Info = Template.bind({})
 Info.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	children:
+		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
+	title: 'Info',
 	type: NotificationTypes.info
 }
 
 export const Success = Template.bind({})
 Success.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	children:
+		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
+	title: 'Success',
 	type: NotificationTypes.success
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
-	children: 'This is an alert for information',
-	title: 'Information',
+	children:
+		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
+	title: 'Warning',
 	type: NotificationTypes.warning
 }
 
 export const NoIcon = Template.bind({})
 NoIcon.args = {
-	children: 'This is an alert for information',
+	children:
+		'Once we receive an alert we scan it against policy risk rules. The rules are evaluated in order from top to bottom. The first rule that matches determines the risk of the alert. Updating a rule will not impact the past alerts. However you can use past alerts as a reference to edit rules such that future alerts get your desired risk classification.',
 	showIcon: false,
-	title: 'Information',
+	title: 'No Icon',
 	type: NotificationTypes.success
 }
diff --git a/src/components/Banner/index.tsx b/src/components/Banner/index.tsx
index bbbe314f..30580ea2 100644
--- a/src/components/Banner/index.tsx
+++ b/src/components/Banner/index.tsx
@@ -1,5 +1,6 @@
 import cn from 'classnames'
 import { createUseStyles } from 'react-jss'
+import { faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { mappedTypesToIcons } from 'components/NotificationV2/utils'
 import { ev as NotificationTypes } from '@dassana-io/web-utils'
@@ -43,7 +44,9 @@ export const Banner: FC<BannerProps> = ({
 					)}
 					<p>{title}</p>
 				</div>
-				<div onClick={() => toggleRender()}>close</div>
+				<div onClick={() => toggleRender()}>
+					<FontAwesomeIcon icon={faTimes} />
+				</div>
 			</div>
 			<div>{children}</div>
 		</div>
diff --git a/src/components/assets/styles/styleguide.ts b/src/components/assets/styles/styleguide.ts
index 78511f26..3421068a 100644
--- a/src/components/assets/styles/styleguide.ts
+++ b/src/components/assets/styles/styleguide.ts
@@ -38,6 +38,14 @@ export const styleguide = {
 		display: 'flex',
 		justifyContent: 'flex-end'
 	},
+	flexJustifyStart: {
+		display: 'flex',
+		justifyContent: 'flex-start'
+	},
+	flexSpaceAround: {
+		display: 'flex',
+		justifyContent: 'space-around'
+	},
 	flexSpaceBetween: {
 		display: 'flex',
 		justifyContent: 'space-between'