diff --git a/src/app/add-listing/[[...stepIndex]]/layout.tsx b/src/app/add-listing/[[...stepIndex]]/layout.tsx
new file mode 100644
index 0000000..e3ef7df
--- /dev/null
+++ b/src/app/add-listing/[[...stepIndex]]/layout.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { FC } from "react";
+import ButtonPrimary from "@/shared/ButtonPrimary";
+import ButtonSecondary from "@/shared/ButtonSecondary";
+import { Route } from "@/routers/types";
+
+export interface CommonLayoutProps {
+  children: React.ReactNode;
+  params: {
+    stepIndex: string;
+  };
+}
+
+const CommonLayout: FC<CommonLayoutProps> = ({ children, params }) => {
+  const index = Number(params.stepIndex) || 1;
+  const nextHref = (
+    index < 10 ? `/add-listing/${index + 1}` : `/add-listing/${1}`
+  ) as Route;
+  const backtHref = (
+    index > 1 ? `/add-listing/${index - 1}` : `/add-listing/${1}`
+  ) as Route;
+  const nextBtnText = index > 9 ? "Publish listing" : "Continue";
+  return (
+    <div
+      className={`nc-PageAddListing1 px-4 max-w-3xl mx-auto pb-24 pt-14 sm:py-24 lg:pb-32`}
+    >
+      <div className="space-y-11">
+        <div>
+          <span className="text-4xl font-semibold">{index}</span>{" "}
+          <span className="text-lg text-neutral-500 dark:text-neutral-400">
+            / 10
+          </span>
+        </div>
+
+        {/* --------------------- */}
+        <div className="listingSection__wrap ">{children}</div>
+
+        {/* --------------------- */}
+        <div className="flex justify-end space-x-5">
+          <ButtonSecondary href={backtHref}>Go back</ButtonSecondary>
+          <ButtonPrimary href={nextHref}>
+            {nextBtnText || "Continue"}
+          </ButtonPrimary>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommonLayout;