diff --git a/src/front/Components/DesignSystem/Footer/classes.module.scss b/src/front/Components/DesignSystem/Footer/classes.module.scss
index 0df500d9..f9a12433 100644
--- a/src/front/Components/DesignSystem/Footer/classes.module.scss
+++ b/src/front/Components/DesignSystem/Footer/classes.module.scss
@@ -8,12 +8,18 @@
 	font-size: 12px;
 	font-weight: var(--font-text-weight-regular, 400);
 	letter-spacing: 0.06px;
+
 	.sub-root {
 		display: flex;
 		align-items: center;
 		gap: var(--Radius-lg, 16px);
 		white-space: nowrap;
-		justify-content: center;
+		padding: 0 360px;
+		//make it sticky
+
+		@media (max-width: 1023px) {
+			padding: 0 12px;
+		}
 	}
 
 	@media (max-width: 660px) or (min-width: 768px) {
diff --git a/src/front/Components/DesignSystem/Footer/index.tsx b/src/front/Components/DesignSystem/Footer/index.tsx
index bd56d8f9..8867ec7f 100644
--- a/src/front/Components/DesignSystem/Footer/index.tsx
+++ b/src/front/Components/DesignSystem/Footer/index.tsx
@@ -4,11 +4,13 @@ import Mobile from "./mobile";
 import Desktop from "./desktop";
 import Tablet from "./tablet";
 
-type IProps = {};
+type IProps = {
+	className?: string;
+};
 
-export default function Footer(props: IProps) {
+export default function Footer({ className }: IProps) {
 	return (
-		<footer className={classes["root"]}>
+		<footer className={[classes["root"], className].join(" ")}>
 			<Mobile className={classes["mobile"]} />
 			<Tablet className={classes["tablet"]} />
 			<Desktop className={classes["desktop"]} />