diff --git a/package-lock.json b/package-lock.json
index b57109268..a5cd7bc75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -41,6 +41,7 @@
       "peerDependencies": {
         "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
         "@openedx/paragon": ">= 21.11.3 < 23.0.0",
+        "classnames": "^2.5.1",
         "prop-types": "^15.5.10",
         "react": "^16.9.0 || ^17.0.0",
         "react-dom": "^16.9.0 || ^17.0.0"
@@ -8451,9 +8452,9 @@
       "license": "MIT"
     },
     "node_modules/classnames": {
-      "version": "2.3.2",
-      "dev": true,
-      "license": "MIT"
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
     },
     "node_modules/clean-css": {
       "version": "5.3.2",
diff --git a/package.json b/package.json
index d28297ff6..e4b4dacfb 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
     "@openedx/paragon": ">= 21.11.3 < 23.0.0",
+    "classnames": "^2.5.1",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0"
diff --git a/src/components/studio-footer/StudioFooter.jsx b/src/components/studio-footer/StudioFooter.jsx
index 81add577d..d5a11c170 100644
--- a/src/components/studio-footer/StudioFooter.jsx
+++ b/src/components/studio-footer/StudioFooter.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import _ from 'lodash';
-import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
@@ -12,6 +12,8 @@ import {
   TransitionReplace,
 } from '@openedx/paragon';
 import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+
 import messages from './messages';
 
 ensureConfig([
@@ -26,12 +28,14 @@ ensureConfig([
 ], 'Studio Footer component');
 
 const StudioFooter = ({
-  // injected
-  intl,
+  containerProps,
 }) => {
+  const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const { config } = useContext(AppContext);
 
+  const { containerClassName, ...restContainerProps } = containerProps || {};
+
   return (
     <>
       <div className="m-0 mt-6 row align-items-center justify-content-center">
@@ -49,7 +53,11 @@ const StudioFooter = ({
         </Button>
         <div className="col border-top ml-2" />
       </div>
-      <Container size="xl" className="px-4">
+      <Container
+        size="xl"
+        className={classNames('px-4', containerClassName)}
+        {...restContainerProps}
+      >
         <TransitionReplace>
           {isOpen ? (
             <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
@@ -139,8 +147,10 @@ const StudioFooter = ({
 };
 
 StudioFooter.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
+  containerProps: Container.propTypes,
+};
+
+StudioFooter.defaultProps = {
 };
 
-export default injectIntl(StudioFooter);
+export default StudioFooter;