diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap
index 83537055576..0c7fff9bba9 100644
--- a/packages/amplify-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap
+++ b/packages/amplify-ui-components/src/components/amplify-sign-in/__snapshots__/amplify-sign-in.spec.ts.snap
@@ -7,18 +7,24 @@ exports[`amplify-sign-in spec: Render logic -> should render a \`sign in\` form
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
-        <span>
-          No account?
-          <amplify-button data-test="sign-in-create-account-link" variant="anchor">
-            Create account
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-in-sign-in-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Sign In
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              No account?
+              <amplify-button data-test="sign-in-create-account-link" variant="anchor">
+                Create account
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-in-sign-in-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Sign In
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>
@@ -32,18 +38,24 @@ exports[`amplify-sign-in spec: amplify-sign-in stories stories withEmptyFederate
       <amplify-federated-buttons></amplify-federated-buttons>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
-        <span>
-          No account?
-          <amplify-button data-test="sign-in-create-account-link" variant="anchor">
-            Create account
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-in-sign-in-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Sign In
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              No account?
+              <amplify-button data-test="sign-in-create-account-link" variant="anchor">
+                Create account
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-in-sign-in-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Sign In
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>
@@ -60,18 +72,24 @@ exports[`amplify-sign-in spec: amplify-sign-in stories stories withFederated 1`]
       </amplify-strike>
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-in-form-footer" slot="amplify-form-section-footer">
-        <span>
-          No account?
-          <amplify-button data-test="sign-in-create-account-link" variant="anchor">
-            Create account
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-in-sign-in-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Sign In
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              No account?
+              <amplify-button data-test="sign-in-create-account-link" variant="anchor">
+                Create account
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-in-sign-in-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Sign In
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>
diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx b/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
index ffe626964a0..6d61c67b6cc 100644
--- a/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
+++ b/packages/amplify-ui-components/src/components/amplify-sign-in/amplify-sign-in.tsx
@@ -29,7 +29,11 @@ import {
 import { SignInAttributes } from './amplify-sign-in-interface';
 
 const logger = new Logger('SignIn');
-
+/**
+ * @slot footer - Content is place in the footer of the component
+ * @slot primary-footer-content - Content placed on the right side of the footer
+ * @slot secondary-footer-content - Content placed on the left side of the footer
+ */
 @Component({
   tag: 'amplify-sign-in',
   styleUrl: 'amplify-sign-in.scss',
@@ -265,20 +269,26 @@ export class AmplifySignIn {
 
         <amplify-auth-fields formFields={this.newFormFields} />
         <div slot="amplify-form-section-footer" class="sign-in-form-footer">
-          <span>
-            {I18n.get(Translations.NO_ACCOUNT_TEXT)}{' '}
-            <amplify-button
-              variant="anchor"
-              onClick={() => this.handleAuthStateChange(AuthState.SignUp)}
-              data-test="sign-in-create-account-link"
-            >
-              {I18n.get(Translations.CREATE_ACCOUNT_TEXT)}
-            </amplify-button>
-          </span>
-          <amplify-button type="submit" disabled={this.loading} data-test="sign-in-sign-in-button">
-            <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
-            <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
-          </amplify-button>
+          <slot name="footer">
+            <slot name="secondary-footer-content">
+              <span>
+                {I18n.get(Translations.NO_ACCOUNT_TEXT)}{' '}
+                <amplify-button
+                  variant="anchor"
+                  onClick={() => this.handleAuthStateChange(AuthState.SignUp)}
+                  data-test="sign-in-create-account-link"
+                >
+                  {I18n.get(Translations.CREATE_ACCOUNT_TEXT)}
+                </amplify-button>
+              </span>
+            </slot>
+            <slot name="primary-footer-content">
+              <amplify-button type="submit" disabled={this.loading} data-test="sign-in-sign-in-button">
+                <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
+                <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
+              </amplify-button>
+            </slot>
+          </slot>
         </div>
       </amplify-form-section>
     );
diff --git a/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md
index 8c13488d2eb..0728e03e7f2 100644
--- a/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md
+++ b/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md
@@ -16,6 +16,15 @@
 | `usernameAlias`         | `username-alias`     | Username Alias is used to setup authentication with `username`, `email` or `phone_number`                                                                                                                                                                                                                                                                                                                                                                                                                                             | `"email" \| "phone_number" \| "username"`           | `'username'`                                 |
 
 
+## Slots
+
+| Slot                         | Description                                     |
+| ---------------------------- | ----------------------------------------------- |
+| `"footer"`                   | Content is place in the footer of the component |
+| `"primary-footer-content"`   | Content placed on the right side of the footer  |
+| `"secondary-footer-content"` | Content placed on the left side of the footer   |
+
+
 ## Dependencies
 
 ### Used by
diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap
index 8ef1d22e3b7..8226832858f 100644
--- a/packages/amplify-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap
+++ b/packages/amplify-ui-components/src/components/amplify-sign-up/__snapshots__/amplify-sign-up.spec.ts.snap
@@ -6,18 +6,24 @@ exports[`amplify-sign-up spec: Render logic -> should render a \`sign up\` form
     <amplify-form-section headertext="Create a new account" testdataprefix="sign-up">
       <amplify-auth-fields></amplify-auth-fields>
       <div class="sign-up-form-footer" slot="amplify-form-section-footer">
-        <span>
-          Have an account?
-          <amplify-button data-test="sign-up-sign-in-link" variant="anchor">
-            Sign in
-          </amplify-button>
-        </span>
-        <amplify-button data-test="sign-up-create-account-button" type="submit">
-          <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
-          <span style="display: initial;">
-            Create Account
-          </span>
-        </amplify-button>
+        <slot name="footer">
+          <slot name="secondary-footer-content">
+            <span>
+              Have an account?
+              <amplify-button data-test="sign-up-sign-in-link" variant="anchor">
+                Sign in
+              </amplify-button>
+            </span>
+          </slot>
+          <slot name="primary-footer-content">
+            <amplify-button data-test="sign-up-create-account-button" type="submit">
+              <amplify-loading-spinner style="display: none;"></amplify-loading-spinner>
+              <span style="display: initial;">
+                Create Account
+              </span>
+            </amplify-button>
+          </slot>
+        </slot>
       </div>
     </amplify-form-section>
   </mock:shadow-root>
diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx b/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx
index e7c2bd7501b..054cd5945c3 100644
--- a/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx
+++ b/packages/amplify-ui-components/src/components/amplify-sign-up/amplify-sign-up.tsx
@@ -21,6 +21,11 @@ import {
 } from '../../common/helpers';
 import { Translations } from '../../common/Translations';
 
+/**
+ * @slot footer - Content is place in the footer of the component
+ * @slot primary-footer-content - Content placed on the right side of the footer
+ * @slot secondary-footer-content - Content placed on the left side of the footer
+ */
 @Component({
   tag: 'amplify-sign-up',
   styleUrl: 'amplify-sign-up.scss',
@@ -268,20 +273,26 @@ export class AmplifySignUp {
       <amplify-form-section headerText={this.headerText} handleSubmit={this.handleSubmit} testDataPrefix={'sign-up'}>
         <amplify-auth-fields formFields={this.newFormFields} />
         <div class="sign-up-form-footer" slot="amplify-form-section-footer">
-          <span>
-            {this.haveAccountText}{' '}
-            <amplify-button
-              variant="anchor"
-              onClick={() => this.handleAuthStateChange(AuthState.SignIn)}
-              data-test="sign-up-sign-in-link"
-            >
-              {this.signInText}
-            </amplify-button>
-          </span>
-          <amplify-button type="submit" data-test="sign-up-create-account-button">
-            <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
-            <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
-          </amplify-button>
+          <slot name="footer">
+            <slot name="secondary-footer-content">
+              <span>
+                {this.haveAccountText}{' '}
+                <amplify-button
+                  variant="anchor"
+                  onClick={() => this.handleAuthStateChange(AuthState.SignIn)}
+                  data-test="sign-up-sign-in-link"
+                >
+                  {this.signInText}
+                </amplify-button>
+              </span>
+            </slot>
+            <slot name="primary-footer-content">
+              <amplify-button type="submit" data-test="sign-up-create-account-button">
+                <amplify-loading-spinner style={{ display: this.loading ? 'initial' : 'none' }} />
+                <span style={{ display: this.loading ? 'none' : 'initial' }}>{this.submitButtonText}</span>
+              </amplify-button>
+            </slot>
+          </slot>
         </div>
       </amplify-form-section>
     );
diff --git a/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md b/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md
index 71e68f21ad7..f707d2a7a80 100644
--- a/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md
+++ b/packages/amplify-ui-components/src/components/amplify-sign-up/readme.md
@@ -18,6 +18,15 @@
 | `validationErrors`      | `validation-errors`  | Engages when invalid actions occur, such as missing field, etc.                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | `string`                                            | `undefined`                                         |
 
 
+## Slots
+
+| Slot                         | Description                                     |
+| ---------------------------- | ----------------------------------------------- |
+| `"footer"`                   | Content is place in the footer of the component |
+| `"primary-footer-content"`   | Content placed on the right side of the footer  |
+| `"secondary-footer-content"` | Content placed on the left side of the footer   |
+
+
 ## Dependencies
 
 ### Used by