diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index c044e425dba..54e85a043af 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -569,6 +569,10 @@
       align-items: center;
     }
 
+    svg {
+      color: $link-primary;
+    }
+
     &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
       color: $link-inverse;
     }
@@ -580,12 +584,6 @@
         color: $link-inverse;
       }
     }
-
-    &:hover {
-      ::slotted(svg[slot='icon']) {
-        color: $link-primary-hover;
-      }
-    }
   }
 
   // static card footer
@@ -594,15 +592,13 @@
       width: auto;
       justify-content: flex-start;
 
-      &:active,
       &:hover {
-        text-decoration: none;
+        color: $link-primary-hover;
       }
 
-      &:active {
-        ::slotted([slot='icon']) {
-          color: $text-primary;
-        }
+      &:active,
+      &:hover {
+        text-decoration: none;
       }
 
       &::after {
diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/packages/styles/scss/components/feature-section/_feature-section.scss
index cf60d1eeee0..55091f9ecac 100644
--- a/packages/styles/scss/components/feature-section/_feature-section.scss
+++ b/packages/styles/scss/components/feature-section/_feature-section.scss
@@ -13,20 +13,12 @@
 @use '../../globals/utils/aspect-ratio';
 @use '../../globals/carbon-grid';
 @use '../../globals/utils/ratio-base' as *;
+@use '../../internal/callout/tokens' as *;
 
 @mixin feature-section {
   :host(#{$c4d-prefix}-feature-section) {
     display: block;
     outline: none;
-
-    &[media-alignment='left'] {
-      ::slotted(#{$c4d-prefix}-card[link]) {
-        @include breakpoint-down(lg) {
-          position: relative;
-          right: 0;
-        }
-      }
-    }
   }
 
   .#{$prefix}--feature-section {
@@ -69,6 +61,27 @@
     }
   }
 
+  :host(#{$c4d-prefix}-feature-section[color-scheme='inverse'])
+    .#{$prefix}--feature-section__container {
+    background-color: $background-inverse;
+
+    ::slotted([slot='eyebrow']),
+    ::slotted([slot='heading']),
+    ::slotted([slot='copy']) {
+      color: $text-inverse;
+    }
+  }
+
+  :host(#{$c4d-prefix}-feature-section[color-scheme='cyan'])
+    .#{$prefix}--feature-section__container {
+    background-color: $callout-background-cyan;
+  }
+
+  :host(#{$c4d-prefix}-feature-section[color-scheme='purple'])
+    .#{$prefix}--feature-section__container {
+    background-color: $callout-background-purple;
+  }
+
   .#{$prefix}--feature-section__body {
     position: relative;
     padding-top: $spacing-07;
@@ -107,6 +120,7 @@
     position: relative;
     padding-left: 0;
     padding-right: 0;
+    border: 1px solid $border-subtle-01;
 
     ::slotted(#{$c4d-prefix}-image) {
       overflow: hidden;
@@ -127,13 +141,13 @@
 
   ::slotted(#{$c4d-prefix}-card-eyebrow) {
     display: inline-block;
-    margin-bottom: $spacing-05;
+    margin-bottom: $spacing-03;
   }
 
   ::slotted([slot='footer']) {
     position: absolute;
     right: 0;
-    bottom: 0;
+    bottom: -1px;
     width: 75%;
     height: auto;
 
diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts
index 57cb86526df..69ce3e625e4 100644
--- a/packages/web-components/src/components/card/card-footer.ts
+++ b/packages/web-components/src/components/card/card-footer.ts
@@ -88,7 +88,7 @@ class C4DCardFooter extends C4DLinkWithIcon {
    * The color scheme.
    */
   @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = BASIC_COLOR_SCHEME.REGULAR;
+  colorScheme = '';
 
   /**
    * The `href` in parent `<c4d-card>`.
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 8793b2250fe..3f566abba43 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -189,10 +189,10 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
    * The color scheme.
    * A typical use case of using another color scheme of card is having a "CTA" purpose of card at the last in card group.
    *
-   * Color scheme options are: "inverse" and "light"
+   * Color scheme options are: "inverse" and "regular"
    */
   @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = BASIC_COLOR_SCHEME.REGULAR;
+  colorScheme = '';
 
   /**
    * Link `href`.
diff --git a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
index ca1835ad451..cf334974bc0 100644
--- a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
+++ b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
@@ -28,8 +28,8 @@ import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312
 import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg';
 import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
 import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
-import { MEDIA_ALIGNMENT } from '../defs';
 import { CTA_TYPE } from '../../cta/defs';
+import { COLOR_SCHEME } from '../defs';
 
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.react.mdx';
@@ -41,13 +41,15 @@ import {
   types,
 } from '../../cta/__stories__/ctaTypeConfig';
 
-const mediaAlignment = {
-  [`Left`]: MEDIA_ALIGNMENT.LEFT,
-  [`Right`]: MEDIA_ALIGNMENT.RIGHT,
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
 };
 
 export const Default = (args) => {
-  const { alt, eyebrow, heading, copy, href, ctaType, mediaAlign, defaultSrc } =
+  const { alt, colorScheme, eyebrow, heading, copy, href, ctaType, defaultSrc } =
     args?.FeatureSection ?? {};
     let videoFooterCopy;
 
@@ -59,7 +61,7 @@ export const Default = (args) => {
     }
   return (
     <C4DVideoCTAContainer>
-      <C4DFeatureSection media-alignment={mediaAlign}>
+      <C4DFeatureSection color-scheme={colorScheme}>
         <C4DImage slot="image" default-src={defaultSrc} alt={alt}>
           <C4DImageItem
             media="(min-width: 1584px)"
@@ -83,8 +85,7 @@ export const Default = (args) => {
           link
           slot="footer"
           href={href}
-          cta-type={ctaType}
-          color-scheme="inverse">
+          cta-type={ctaType}>
           <C4DCardHeading>
             Try a free virtual business framing session with IBM Garage
           </C4DCardHeading>
@@ -108,10 +109,10 @@ Default.story = {
         );
 
         return {
-          mediaAlign: select(
-            'Media Alignment',
-            mediaAlignment,
-            MEDIA_ALIGNMENT.RIGHT
+          colorScheme: select(
+            'Color scheme:',
+            colorSchemeTypes,
+            COLOR_SCHEME.REGULAR
           ),
           eyebrow: textNullable(
             'Card Eyebrow (optional)(eyebrow):',
diff --git a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
index 12f390c8390..0c1f9b4d5b1 100644
--- a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
+++ b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
@@ -18,8 +18,8 @@ import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312
 import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg';
 import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
 import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
-import { MEDIA_ALIGNMENT } from '../defs';
 import { CTA_TYPE } from '../../cta/defs';
+import { COLOR_SCHEME } from '../defs';
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -31,13 +31,15 @@ import {
   types,
 } from '../../cta/__stories__/ctaTypeConfig';
 
-const mediaAlignment = {
-  [`Left`]: MEDIA_ALIGNMENT.LEFT,
-  [`Right`]: MEDIA_ALIGNMENT.RIGHT,
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
 };
 
 export const Default = (args) => {
-  const { alt, mediaAlign, eyebrow, heading, copy, href, ctaType } =
+  const { alt, colorScheme, eyebrow, heading, copy, href, ctaType } =
     args?.['c4d-feature-section'] ?? {};
   let videoFooterCopy;
 
@@ -49,7 +51,7 @@ export const Default = (args) => {
   }
   return html`
     <c4d-video-cta-container>
-      <c4d-feature-section media-alignment="${mediaAlign}">
+      <c4d-feature-section color-scheme="${colorScheme}">
         <c4d-image
           slot="image"
           default-src="${ifDefined(imgLg1x1)}"
@@ -72,7 +74,6 @@ export const Default = (args) => {
         >
         <c4d-card
           link
-          color-scheme="inverse"
           slot="footer"
           no-poster=${ctaType === CTA_TYPE.VIDEO}
           cta-type=${ctaType}
@@ -105,10 +106,10 @@ export default {
         );
 
         return {
-          mediaAlign: select(
-            'Media Alignment',
-            mediaAlignment,
-            MEDIA_ALIGNMENT.RIGHT
+          colorScheme: select(
+            'Color scheme:',
+            colorSchemeTypes,
+            COLOR_SCHEME.REGULAR
           ),
           eyebrow: textNullable(
             'Card Eyebrow (optional)(eyebrow):',
diff --git a/packages/web-components/src/components/feature-section/defs.ts b/packages/web-components/src/components/feature-section/defs.ts
index a4016a30369..b20740765cc 100644
--- a/packages/web-components/src/components/feature-section/defs.ts
+++ b/packages/web-components/src/components/feature-section/defs.ts
@@ -8,16 +8,26 @@
  */
 
 /**
- * Type of the Media Alignment
+ * Type of color scheme
  */
-export enum MEDIA_ALIGNMENT {
+export enum COLOR_SCHEME {
   /**
-   * Right alignment
+   * Regular color scheme
    */
-  RIGHT = 'right',
+  REGULAR = 'regular',
 
   /**
-   * Left alignment
+   * Inverse color scheme
    */
-  LEFT = 'left',
+  INVERSE = 'inverse',
+
+  /**
+   * Cyan color scheme
+   */
+  CYAN = 'cyan',
+
+  /**
+   * Purple color scheme
+   */
+  PURPLE = 'purple',
 }
diff --git a/packages/web-components/src/components/feature-section/feature-section.ts b/packages/web-components/src/components/feature-section/feature-section.ts
index 0bd5470f630..b310b36e0b8 100644
--- a/packages/web-components/src/components/feature-section/feature-section.ts
+++ b/packages/web-components/src/components/feature-section/feature-section.ts
@@ -14,7 +14,7 @@ import C4DFeatureCard from '../feature-card/feature-card';
 import '../image/image';
 import styles from './feature-section.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { MEDIA_ALIGNMENT } from './defs';
+import { COLOR_SCHEME } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 const { prefix, stablePrefix: c4dPrefix } = settings;
@@ -27,62 +27,35 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
 @customElement(`${c4dPrefix}-feature-section`)
 class C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) {
   /**
-   * Media Alignment (right (default) | left)
+   * Color scheme type (regular (default) | inverse | cyan | purple )
    */
-  @property({ attribute: 'media-alignment', reflect: true })
-  mediaAlignment = MEDIA_ALIGNMENT.RIGHT;
+  @property({ attribute: 'color-scheme', reflect: true })
+  colorScheme = COLOR_SCHEME.REGULAR;
 
   render() {
     return html`
-      ${this.mediaAlignment === MEDIA_ALIGNMENT.LEFT
-        ? html`
-            <div class="${prefix}--grid ${prefix}--feature-section">
-              <div class="${prefix}--row ${prefix}--feature-section__container">
+      <div class="${prefix}--grid ${prefix}--feature-section">
+        <div class="${prefix}--row ${prefix}--feature-section__container">
+          <div
+            class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
+            <div class="${prefix}--grid">
+              <div class="${prefix}--row">
                 <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
-                  <slot name="image"></slot>
-                </div>
-                <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
-                  <div class="${prefix}--grid">
-                    <div class="${prefix}--row">
-                      <div
-                        class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
-                        <slot name="eyebrow"></slot>
-                        <slot name="heading"></slot>
-                        <slot name="copy"></slot>
-                      </div>
-                    </div>
-                  </div>
-                  <slot name="footer"></slot>
-                </div>
-              </div>
-            </div>
-          `
-        : html`
-            <div class="${prefix}--grid ${prefix}--feature-section">
-              <div class="${prefix}--row ${prefix}--feature-section__container">
-                <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
-                  <div class="${prefix}--grid">
-                    <div class="${prefix}--row">
-                      <div
-                        class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
-                        <slot name="eyebrow"></slot>
-                        <slot name="heading"></slot>
-                        <slot name="copy"></slot>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
-                  <slot name="image"></slot>
-                  <slot name="footer"></slot>
+                  class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
+                  <slot name="eyebrow"></slot>
+                  <slot name="heading"></slot>
+                  <slot name="copy"></slot>
                 </div>
               </div>
             </div>
-          `}
+          </div>
+          <div
+            class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
+            <slot name="image"></slot>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
     `;
   }