diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
deleted file mode 100644
index a9ac791..0000000
--- a/src/components/Banner.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-import styled from 'styled-components';
-import colors from '../styles/colors';
-import spacings from '../styles/spacings';
-
-interface BannerProps {
-	color: keyof typeof colors.gradients;
-}
-
-export default function Banner({
-	color = 'orange',
-	children,
-	...rest
-}: PropsWithChildren<BannerProps>) {
-	return (
-		<StyledBannerWrapper {...rest} color={color}>
-			<StyledBannerInner className="darker-40">{children}</StyledBannerInner>
-		</StyledBannerWrapper>
-	);
-}
-
-const StyledBannerWrapper = styled.div<{ color: BannerProps['color'] }>`
-	width: 100%;
-	border-radius: 5px;
-	padding: 2px;
-	background: ${({ color }) => colors.gradients[color]};
-`;
-
-const StyledBannerInner = styled.div`
-	border-radius: inherit;
-	padding: ${spacings.margin.medium};
-`;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index db48166..29dd970 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -3,35 +3,53 @@ import styled from 'styled-components';
 import colors from '../styles/colors';
 
 interface CardProps {
-  withGradientWrapper?: boolean;
+	withBorderGradient?: boolean;
+	withBackgroundGradientColor?: keyof typeof colors;
 }
 
 export default function Card({
-  withGradientWrapper,
-  children,
+	withBorderGradient,
+	withBackgroundGradientColor,
+	children,
 }: PropsWithChildren<CardProps>) {
-  if (withGradientWrapper) {
-    return (
-      <StyledGradientWrapper>
-        <StyledCard>{children}</StyledCard>
-      </StyledGradientWrapper>
-    );
-  }
-  return <StyledCard>{children}</StyledCard>;
+	if (withBorderGradient) {
+		return (
+			<StyledGradientWrapper>
+				<StyledCard>{children}</StyledCard>
+			</StyledGradientWrapper>
+		);
+	}
+	if (withBackgroundGradientColor) {
+		return (
+			<StyledBackgroundGradientWrapper color={withBackgroundGradientColor}>
+				<StyledCard className="darker-40">{children}</StyledCard>
+			</StyledBackgroundGradientWrapper>
+		);
+	}
+	return <StyledCard>{children}</StyledCard>;
 }
 
 const StyledGradientWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  border-radius: 5px;
-  background: ${colors.gradients.rainbow};
-  padding: 2px;
-  border-radius: 4px;
+	width: 100%;
+	height: 100%;
+	border-radius: 5px;
+	background: ${colors.gradients.rainbow};
+	padding: 2px;
+	border-radius: 4px;
+`;
+
+const StyledBackgroundGradientWrapper = styled.div<{ color: keyof typeof colors }>`
+	width: 100%;
+	height: 100%;
+	border-radius: 5px;
+	background: ${({ color }) => colors[color]};
+	padding: 2px;
+	border-radius: 4px;
 `;
 
 const StyledCard = styled.div`
-  width: 100%;
-  height: 100%;
-  background-color: ${colors.backgroundColor};
-  border-radius: 4px;
+	width: 100%;
+	height: 100%;
+	background-color: ${colors.backgroundColor};
+	border-radius: 4px;
 `;
diff --git a/src/components/index.ts b/src/components/index.ts
index 4afd422..677659a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -8,4 +8,3 @@ export { default as Selector } from './Selector';
 export { default as Dropdown } from './Dropdown';
 export { default as Card } from './Card';
 export { default as Carousel } from './Carousel';
-export { default as Banner } from './Banner';
diff --git a/src/stories/Banner.stories.tsx b/src/stories/Banner.stories.tsx
deleted file mode 100644
index 166b87a..0000000
--- a/src/stories/Banner.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Banner from '../components/Banner';
-import { withDesign } from 'storybook-addon-designs';
-
-export default {
-	title: 'Banner',
-	component: Banner,
-	decorators: [withDesign],
-} as ComponentMeta<typeof Banner>;
-
-export const Template: ComponentStory<typeof Banner> = (args) => (
-	<Banner {...args}>
-		<h1 style={{ color: 'white' }}>test</h1>
-	</Banner>
-);
-
-Template.args = {
-	color: 'orange',
-};
-
-Template.parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/zeCepPb3Bo6Fd92FdcolUT/v1.0?node-id=308%3A23842',
-	},
-};