diff --git a/src/pages/central/[id].tsx b/src/pages/central/[id].tsx
index ee953aa4..ceb24404 100644
--- a/src/pages/central/[id].tsx
+++ b/src/pages/central/[id].tsx
@@ -90,7 +90,7 @@ const CentralNetworkById = ({ orgIds }) => {
 	return (
 		<div>
 			<HeadSection title={pageTitle} />
-			<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-4/5 sm:p-10 md:text-base xl:space-y-0">
+			<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-5/6 sm:p-10 md:text-base xl:space-y-0">
 				<div className="w-5/5 h-fit w-full xl:w-2/6 ">
 					<div className="flex flex-col space-y-3 sm:space-y-0">
 						<div className="flex flex-col justify-between sm:flex-row">
@@ -121,7 +121,7 @@ const CentralNetworkById = ({ orgIds }) => {
 				</div>
 				<NetworkPrivatePublic central />
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<div className="flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
 					<div>
 						<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
@@ -155,10 +155,10 @@ const CentralNetworkById = ({ orgIds }) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{t("networkSettings")}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkIpAssignment central />
@@ -171,7 +171,7 @@ const CentralNetworkById = ({ orgIds }) => {
 					<NettworkRoutes central />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					{" "}
@@ -185,10 +185,10 @@ const CentralNetworkById = ({ orgIds }) => {
 					<NetworkMulticast central />
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{t("networkMembers")}
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{members?.length ? (
 					<div className="membersTable-wrapper">
 						<NetworkMembersTable nwid={network.id} central={true} />
@@ -260,14 +260,14 @@ const CentralNetworkById = ({ orgIds }) => {
 					</div>
 				)}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
 					<InviteMemberByMail />
 					<AddMemberById central />
 				</div>
 			</div>
-			{/* <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			{/* <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
         <div className="mb-4 md:mb-0">
           {networkById?.zombieMembers?.length > 0 ? (
             <>
@@ -292,17 +292,17 @@ const CentralNetworkById = ({ orgIds }) => {
           ) : null}
         </div>
       </div> */}
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<NetworkHelpText />
 			</div>
 
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<CentralFlowRules />
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				Network Actions
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
+			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
 				<div className="flex items-end md:justify-end">
 					<button
 						onClick={() =>
diff --git a/src/pages/network/[id].tsx b/src/pages/network/[id].tsx
index d5622471..d2878e4b 100644
--- a/src/pages/network/[id].tsx
+++ b/src/pages/network/[id].tsx
@@ -122,7 +122,7 @@ const NetworkById = ({ orgIds }: IProps) => {
 	return (
 		<div className="animate-fadeIn">
 			<HeadSection title={pageTitle} />
-			<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-4/5 sm:p-10 md:text-base xl:space-y-0">
+			<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-5/6 sm:p-10 md:text-base xl:space-y-0">
 				<div className="w-5/5 h-fit w-full xl:w-2/6 ">
 					<div className="flex flex-col space-y-3 sm:space-y-0">
 						<div className="flex flex-col justify-between sm:flex-row">
@@ -155,7 +155,7 @@ const NetworkById = ({ orgIds }: IProps) => {
 					<NetworkPrivatePublic />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<div className="hidden lg:flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
 					<div>
 						<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
@@ -189,10 +189,10 @@ const NetworkById = ({ orgIds }: IProps) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{t("networkSettings")}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkIpAssignment />
@@ -205,7 +205,7 @@ const NetworkById = ({ orgIds }: IProps) => {
 					<NettworkRoutes />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkDns />
@@ -218,10 +218,10 @@ const NetworkById = ({ orgIds }: IProps) => {
 					<NetworkMulticast />
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{t("networkMembers")}
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{members.length ? (
 					<div className="membersTable-wrapper">
 						<NetworkMembersTable nwid={network.nwid} central={false} />
@@ -293,14 +293,14 @@ const NetworkById = ({ orgIds }: IProps) => {
 					</div>
 				)}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
 					<InviteMemberByMail />
 					<AddMemberById />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<div className="mb-4 md:mb-0">
 					{networkById?.zombieMembers?.length > 0 ? (
 						<>
@@ -326,25 +326,25 @@ const NetworkById = ({ orgIds }: IProps) => {
 					) : null}
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<NetworkHelpText />
 			</div>
 
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				<NetworkFlowRules />
 			</div>
-			{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				DEBUG
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base space-y-8">
+			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base space-y-8">
 				<DebugMirror data={networkById?.network} title="Controler Networks" />
 				<DebugMirror data={networkById?.members} title="Controler Members" />
 			</div> */}
 
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
 				{t("networkActions")}
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
+			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
 				<div className="flex items-end md:justify-end">
 					<button
 						onClick={() =>
diff --git a/src/pages/organization/[orgid]/[id].tsx b/src/pages/organization/[orgid]/[id].tsx
index 28f5f6ae..530705c8 100644
--- a/src/pages/organization/[orgid]/[id].tsx
+++ b/src/pages/organization/[orgid]/[id].tsx
@@ -123,7 +123,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 	return (
 		<div className="animate-fadeIn">
 			<HeadSection title={pageTitle} />
-			<div className="mx-auto text-sm sm:w-4/5 sm:p-10 md:text-base">
+			<div className="mx-auto text-sm sm:w-11/12 sm:p-10 md:text-base">
 				<div className="grid grid-cols-1 xl:grid-cols-2 gap-10">
 					{/* Left section with network ID, name, and description */}
 					<div className="xl:col-span-1">
@@ -163,7 +163,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 				</div>
 			</div>
 
-			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				<div className="hidden lg:flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
 					<div>
 						<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
@@ -197,10 +197,10 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 					</div>
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				{t("networkSettings")}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkIpAssignment organizationId={organizationId} />
@@ -213,7 +213,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 					<NettworkRoutes organizationId={organizationId} />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="w-6/6 xl:w-3/6">
 					<NetworkDns organizationId={organizationId} />
@@ -226,10 +226,10 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 					<NetworkMulticast organizationId={organizationId} />
 				</div>
 			</div>
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				{t("networkMembers")}
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				{members.length ? (
 					<div className="membersTable-wrapper">
 						<NetworkMembersTable
@@ -305,14 +305,14 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 					</div>
 				)}
 			</div>
-			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
+			<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base xl:flex xl:space-y-0">
 				{/* Ipv4 assignment  */}
 				<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
 					<InviteMemberByMail organizationId={organizationId} />
 					<AddMemberById organizationId={organizationId} />
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				<div className="mb-4 md:mb-0">
 					{networkById?.zombieMembers?.length > 0 ? (
 						<>
@@ -341,25 +341,25 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
 					) : null}
 				</div>
 			</div>
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				<NetworkHelpText />
 			</div>
 
-			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				<NetworkFlowRules organizationId={organizationId} />
 			</div>
-			{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				DEBUG
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base space-y-8">
+			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base space-y-8">
 				<DebugMirror data={networkById?.network} title="Controler Networks" />
 				<DebugMirror data={networkById?.members} title="Controler Members" />
 			</div> */}
 
-			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
+			<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
 				Network Actions
 			</div>
-			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
+			<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:flex-row md:text-base">
 				<div className="flex items-end md:justify-end">
 					<button
 						onClick={() =>