diff --git a/components/common/newsletter.tsx b/components/common/newsletter.tsx
index 313752c6..7b9a0e80 100644
--- a/components/common/newsletter.tsx
+++ b/components/common/newsletter.tsx
@@ -3,8 +3,8 @@ import * as React from 'react';
 export const Newsletter: React.FC = () => {
   return (
     <section id="newsletter" className="container mx-auto my-12 max-w-5xl px-4 md:my-24 lg:my-48">
-      <div className="rounded-lg border border-grey-800 bg-[url('/images/newsletter/mailart@2x.jpg')] bg-cover bg-center bg-no-repeat py-3 px-3 md:bg-contain md:bg-right md:py-12 md:px-16">
-        <div className="rounded bg-grey-900 p-4 md:rounded-none md:bg-transparent md:py-2 md:px-0">
+      <div className="rounded-lg border border-grey-800 bg-[url('/images/newsletter/mailart@2x.jpg')] bg-cover bg-center bg-no-repeat px-3 py-3 md:bg-contain md:bg-right md:px-16 md:py-12">
+        <div className="rounded bg-grey-900 p-4 md:rounded-none md:bg-transparent md:px-0 md:py-2">
           <h3 className="my-4 text-3xl font-medium md:text-4xl lg:text-6xl">Stay tuned</h3>
           <p className="max-w-lg md:text-lg">
             Subscribe to our newsletter and never miss updates, announcements and opportunities.{' '}
@@ -46,7 +46,7 @@ const NewsletterForm: React.FC = () => {
         </div>
         <input
           type="submit"
-          className="curso mt-4 rounded-lg bg-grey-700 py-4 px-4 text-white hover:bg-grey-800 md:mt-0 md:rounded-l-none md:px-8"
+          className="curso mt-4 rounded-lg bg-grey-700 px-4 py-4 text-white hover:bg-grey-800 md:mt-0 md:rounded-l-none md:px-8"
           value="Sign up"
         />
       </fieldset>
diff --git a/components/layout/footer/layout-footer.tsx b/components/layout/footer/layout-footer.tsx
index c479218c..9d981da1 100644
--- a/components/layout/footer/layout-footer.tsx
+++ b/components/layout/footer/layout-footer.tsx
@@ -7,7 +7,7 @@ import { footerLinks } from './footer-nav-items';
 
 export const Footer = () => {
   return (
-    <footer className="relative z-10 py-6 text-white sm:mt-12 md:mt-24 md:py-12 lg:mt-48 lg:py-24 lg:pt-12 lg:pb-24">
+    <footer className="relative z-10 py-6 text-white sm:mt-12 md:mt-24 md:py-12 lg:mt-48 lg:py-24 lg:pb-24 lg:pt-12">
       <div className="container mx-auto max-w-7xl">
         <div className="flex flex-col justify-between p-4 md:flex-row md:flex-wrap">
           {footerLinks.map((group, index) => (
diff --git a/components/layout/header/header-nav.tsx b/components/layout/header/header-nav.tsx
index 4cb2558e..30fafcb6 100644
--- a/components/layout/header/header-nav.tsx
+++ b/components/layout/header/header-nav.tsx
@@ -29,7 +29,7 @@ const NavOverlay = ({ isOpen, onNavigation }: NavOverlayProps) => {
       leave="transition-opacity duration-150"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
-      className="fixed left-0 top-0 right-0 bottom-0 z-10 bg-black"
+      className="fixed bottom-0 left-0 right-0 top-0 z-10 bg-black"
     >
       <div className="flex flex-col justify-start px-4 pt-24 md:pt-36">
         {Object.entries(NAV_ITEMS).map((entry) => (
diff --git a/components/layout/header/header.tsx b/components/layout/header/header.tsx
index b8f0452f..6009de45 100644
--- a/components/layout/header/header.tsx
+++ b/components/layout/header/header.tsx
@@ -12,7 +12,7 @@ export const Header = ({ overlayHeader = false }: HeaderProps) => {
   const [isMobileNavOpen, setIsMobileNavOpen] = React.useState(false);
 
   return (
-    <header className={overlayHeader ? 'absolute top-0 left-0 right-0' : 'relative'}>
+    <header className={overlayHeader ? 'absolute left-0 right-0 top-0' : 'relative'}>
       <div className="container mx-auto my-4 max-w-7xl md:py-8 lg:py-12">
         <div className="flex flex-row items-center justify-between px-4">
           <Link href="/">
diff --git a/components/pages/binance/binance-edgeware-intro.tsx b/components/pages/binance/binance-edgeware-intro.tsx
index 29c6edd7..ed090b2b 100644
--- a/components/pages/binance/binance-edgeware-intro.tsx
+++ b/components/pages/binance/binance-edgeware-intro.tsx
@@ -4,9 +4,9 @@ export const BinanceEdgewareIntro = () => {
   return (
     <section
       id="edgeware"
-      className="container my-24 mx-auto max-w-3xl rounded-md border border-grey-700"
+      className="container mx-auto my-24 max-w-3xl rounded-md border border-grey-700"
     >
-      <div className="bg-[url('/images/backgrounds/edg-logomark-bg.svg')] bg-[center_top_25%] bg-no-repeat py-8 px-16 text-center">
+      <div className="bg-[url('/images/backgrounds/edg-logomark-bg.svg')] bg-[center_top_25%] bg-no-repeat px-16 py-8 text-center">
         <p className="my-12 text-2xl">
           Edgeware is a scalable, sovereign and cooperatively owned smart contract platform with a
           large public treasury, strong governing community, and a focus on DAO deployments.
@@ -23,7 +23,7 @@ export const BinanceEdgewareIntro = () => {
         <div className="my-12">
           <a
             href={socialMediaUrls.discordUrl}
-            className="inline-block rounded-lg bg-grey-500 py-4 px-12 text-xl font-medium text-white hover:bg-grey-600 hover:text-white"
+            className="inline-block rounded-lg bg-grey-500 px-12 py-4 text-xl font-medium text-white hover:bg-grey-600 hover:text-white"
           >
             Join our community on Discord
           </a>
diff --git a/components/pages/binance/binance-governance.tsx b/components/pages/binance/binance-governance.tsx
index 7f9a91ab..38481958 100644
--- a/components/pages/binance/binance-governance.tsx
+++ b/components/pages/binance/binance-governance.tsx
@@ -15,7 +15,7 @@ export const BinanceGovernance: React.FC = () => {
         <div className="my-4">
           <a
             href="https://www.edgeware.app/#/delegation"
-            className="inline-block rounded-lg bg-primary-500 py-4 px-12 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
+            className="inline-block rounded-lg bg-primary-500 px-12 py-4 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -44,7 +44,7 @@ export const BinanceGovernance: React.FC = () => {
         <div className="my-4">
           <a
             href="https://www.edgeware.app/#/delegation"
-            className="inline-block rounded-lg bg-primary-500 py-4 px-12 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
+            className="inline-block rounded-lg bg-primary-500 px-12 py-4 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
             target="_blank"
             rel="noopener noreferrer"
           >
diff --git a/components/pages/binance/binance-kabocha.tsx b/components/pages/binance/binance-kabocha.tsx
index 583f6f63..f4ef2fe6 100644
--- a/components/pages/binance/binance-kabocha.tsx
+++ b/components/pages/binance/binance-kabocha.tsx
@@ -1,6 +1,6 @@
 export const BinanceKabocha: React.FC = () => {
   return (
-    <section className="container my-32 mx-auto flex max-w-4xl" id="kabocha-network">
+    <section className="container mx-auto my-32 flex max-w-4xl" id="kabocha-network">
       <div className="text-center">
         <div className="flex flex-col items-center justify-center">
           <img
@@ -26,7 +26,7 @@ export const BinanceKabocha: React.FC = () => {
         <div className="my-4">
           <a
             href="https://www.kabocha.network/"
-            className="inline-block rounded-lg bg-primary-500 py-4 px-12 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
+            className="inline-block rounded-lg bg-primary-500 px-12 py-4 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
           >
             Learn more about Kabocha
           </a>
diff --git a/components/pages/binance/binance-stake.tsx b/components/pages/binance/binance-stake.tsx
index da01d49f..b93d9529 100644
--- a/components/pages/binance/binance-stake.tsx
+++ b/components/pages/binance/binance-stake.tsx
@@ -3,11 +3,11 @@ import { StakingRewardsWidget } from './binance-stake-widget';
 
 export const BinanceStake = () => {
   return (
-    <section className="container my-32 mx-auto max-w-4xl" id="stake">
+    <section className="container mx-auto my-32 max-w-4xl" id="stake">
       <div className="text-center">
         <div className="text-center">
           <h2 className="text-6xl font-medium">Stake and Earn</h2>
-          <p className="my-8 mx-auto max-w-2xl text-lg">
+          <p className="mx-auto my-8 max-w-2xl text-lg">
             Grow your holdings by staking your EDG.
             <br />
             Calculate your earnings with the Staking Rewards Widget Calculator
diff --git a/components/pages/build/build-builders.tsx b/components/pages/build/build-builders.tsx
index 6b0d15b6..59e61076 100644
--- a/components/pages/build/build-builders.tsx
+++ b/components/pages/build/build-builders.tsx
@@ -1,8 +1,8 @@
 export const BuildBuilders = () => {
   return (
-    <section className="container mx-auto max-w-6xl py-6 px-4 md:py-12 lg:py-24" id="builders">
+    <section className="container mx-auto max-w-6xl px-4 py-6 md:py-12 lg:py-24" id="builders">
       {/* Intro text*/}
-      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-16">
+      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-x-16 md:space-y-0">
         <div className="w-full md:w-1/2">
           <img
             src="/images/build/code-s-slash-large.png"
diff --git a/components/pages/build/build-get-started.tsx b/components/pages/build/build-get-started.tsx
index 2e7bfda0..00e510b7 100644
--- a/components/pages/build/build-get-started.tsx
+++ b/components/pages/build/build-get-started.tsx
@@ -20,7 +20,7 @@ import { LinksList } from '../get-started/links-list';
 
 export const BuildGetStarted = () => {
   return (
-    <section className="container mx-auto max-w-7xl py-8 px-4 md:py-16 lg:py-24" id="get-started">
+    <section className="container mx-auto max-w-7xl px-4 py-8 md:py-16 lg:py-24" id="get-started">
       {/* Intro text*/}
       <div className="flex flex-col items-stretch md:flex-row md:space-x-24">
         <div className="my-8 w-full md:my-0 md:w-1/2">
@@ -132,7 +132,7 @@ const NetworksInfo = () => {
             <Tab
               key={network}
               className={({ selected }) =>
-                `py-4 px-2 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
+                `px-2 py-4 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
               }
             >
               {network}
@@ -148,7 +148,7 @@ const NetworksInfo = () => {
                     <Tab
                       key={chain}
                       className={({ selected }) =>
-                        `py-4 px-2 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
+                        `px-2 py-4 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
                       }
                     >
                       {chain}
diff --git a/components/pages/build/build-hero.tsx b/components/pages/build/build-hero.tsx
index d2aa194a..935c3642 100644
--- a/components/pages/build/build-hero.tsx
+++ b/components/pages/build/build-hero.tsx
@@ -1,7 +1,7 @@
 export const BuildHero = () => {
   return (
     <section
-      className="container mx-auto max-w-7xl py-6 px-4 md:py-12 lg:py-24"
+      className="container mx-auto max-w-7xl px-4 py-6 md:py-12 lg:py-24"
       id="build-on-cutting-edge"
     >
       {/* Intro text*/}
diff --git a/components/pages/build/build-quotes.tsx b/components/pages/build/build-quotes.tsx
index 9880a97c..6d0193ad 100644
--- a/components/pages/build/build-quotes.tsx
+++ b/components/pages/build/build-quotes.tsx
@@ -12,7 +12,7 @@ export const BuildQuotes = () => {
   };
 
   return (
-    <section className="container mx-auto my-24 max-w-3xl py-24 px-4" id="quotes">
+    <section className="container mx-auto my-24 max-w-3xl px-4 py-24" id="quotes">
       <Slider {...settings}>
         <BuildQuoteEntry author="Depth Hoar" imageUrl="/images/build/quotes/depth.jpg">
           Working for Edgeware lets me choose my work while being part of a DAO of like-minded
diff --git a/components/pages/build/build-resources.tsx b/components/pages/build/build-resources.tsx
index e9ac6482..878fe601 100644
--- a/components/pages/build/build-resources.tsx
+++ b/components/pages/build/build-resources.tsx
@@ -5,7 +5,7 @@ import Apps2LineIcon from 'remixicon/icons/System/apps-2-line.svg';
 export const BuildResources = () => {
   return (
     <section id="resources" className="container mx-auto my-6 max-w-4xl md:my-12 lg:my-24">
-      <div className="flex flex-col items-center space-y-4 px-4 md:flex-row md:space-y-0 md:space-x-24">
+      <div className="flex flex-col items-center space-y-4 px-4 md:flex-row md:space-x-24 md:space-y-0">
         <div className="f-full flex flex-col items-center text-center md:w-1/2">
           <div className="py-4">
             <div className="mx-auto h-fit w-fit rounded-full bg-white p-6">
diff --git a/components/pages/build/build-tech-features.tsx b/components/pages/build/build-tech-features.tsx
index fba22806..b2a85764 100644
--- a/components/pages/build/build-tech-features.tsx
+++ b/components/pages/build/build-tech-features.tsx
@@ -3,11 +3,11 @@ import AsteriskIcon from 'remixicon/icons/Editor/asterisk.svg';
 export const BuildTechFeatures = () => {
   return (
     <section
-      className="md-my-12 container mx-auto my-6 max-w-5xl py-24 px-4 lg:my-24"
+      className="md-my-12 container mx-auto my-6 max-w-5xl px-4 py-24 lg:my-24"
       id="technical-features"
     >
       {/* Intro text*/}
-      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-16">
+      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-x-16 md:space-y-0">
         <div className="w-full md:w-1/2">
           <h2 className="my-4 text-3xl font-medium md:text-4xl lg:text-5xl">Technical Features</h2>
           <p className="text-md my-4 leading-loose">
diff --git a/components/pages/contribute/contribute-edgizen.tsx b/components/pages/contribute/contribute-edgizen.tsx
index 5e83d8da..687c0e39 100644
--- a/components/pages/contribute/contribute-edgizen.tsx
+++ b/components/pages/contribute/contribute-edgizen.tsx
@@ -5,8 +5,8 @@ import OpenArmLineIcon from 'remixicon/icons/User & Faces/open-arm-line.svg';
 
 export const ContributeEDGizen = () => {
   return (
-    <div className="container mx-auto max-w-5xl py-24 px-4">
-      <div className="flex flex-col items-end space-y-8 md:flex-row md:space-y-0 md:space-x-32">
+    <div className="container mx-auto max-w-5xl px-4 py-24">
+      <div className="flex flex-col items-end space-y-8 md:flex-row md:space-x-32 md:space-y-0">
         <div className="w-full md:w-1/2">
           <OpenArmLineIcon className="h-12 w-12 fill-white text-white" />
           <h2 className="my-4 text-3xl font-medium md:text-4xl">Become an EDGizen</h2>
@@ -26,7 +26,7 @@ export const ContributeEDGizen = () => {
         <div className="w-full bg-[url(/images/contribute/edgizen-bg.jpg)] bg-cover md:w-1/2">
           <div className="rounded-xl border border-green-600 p-4 py-8 md:p-8">
             <span>Requirements:</span>
-            <ol className="mt-4 ml-5 list-decimal space-y-2 text-green-600">
+            <ol className="ml-5 mt-4 list-decimal space-y-2 text-green-600">
               <li>Have EDG</li>
               <li>Stake, Delegate or Vote</li>
               <li>Claim your custom on-chain ID</li>
diff --git a/components/pages/contribute/contribute-hero.tsx b/components/pages/contribute/contribute-hero.tsx
index 1be4e690..1bef4ab2 100644
--- a/components/pages/contribute/contribute-hero.tsx
+++ b/components/pages/contribute/contribute-hero.tsx
@@ -1,6 +1,6 @@
 export const ContributeHero = () => {
   return (
-    <div className="container mx-auto max-w-4xl py-24 px-4">
+    <div className="container mx-auto max-w-4xl px-4 py-24">
       {/* Intro text & CTAs */}
       <div className="text-center">
         <h1 className="my-4 text-3xl font-medium md:text-4xl lg:text-5xl">
diff --git a/components/pages/contribute/contribute-proposal.tsx b/components/pages/contribute/contribute-proposal.tsx
index db879194..b32cc2e1 100644
--- a/components/pages/contribute/contribute-proposal.tsx
+++ b/components/pages/contribute/contribute-proposal.tsx
@@ -5,7 +5,7 @@ import CompassDiscoverLineIcon from 'remixicon/icons/Map/compass-discover-line.s
 export const ContributeProposal = () => {
   return (
     <div className="container mx-auto max-w-6xl px-4">
-      <div className="flex flex-col items-center rounded-md bg-white py-8 px-4 text-center md:py-16">
+      <div className="flex flex-col items-center rounded-md bg-white px-4 py-8 text-center md:py-16">
         <CompassDiscoverLineIcon className="h-12 w-12 fill-black text-black" />
         <h2 className="my-4 text-3xl font-medium text-black md:text-4xl">Design a Proposal</h2>
         <p className="max-w-prose text-grey-400">
diff --git a/components/pages/ecosystem/ecosystem-hero.tsx b/components/pages/ecosystem/ecosystem-hero.tsx
index d84bd383..6c46274e 100644
--- a/components/pages/ecosystem/ecosystem-hero.tsx
+++ b/components/pages/ecosystem/ecosystem-hero.tsx
@@ -4,7 +4,7 @@ export const EcosystemHero: React.FC = () => {
       <div className="container mx-auto flex min-h-[75vh] max-w-6xl">
         <div className="my-auto w-full text-center">
           <h1 className="my-4 text-6xl font-medium">Home to next generation networks</h1>
-          <p className="my-8 mx-auto max-w-prose text-lg">
+          <p className="mx-auto my-8 max-w-prose text-lg">
             Edgeware partners with leading cryptocurrency teams, projects and collectives to create
             the future of Web3.
           </p>
diff --git a/components/pages/ecosystem/ecosystem-list-card.tsx b/components/pages/ecosystem/ecosystem-list-card.tsx
index 2fbc6e80..8d3fb18c 100644
--- a/components/pages/ecosystem/ecosystem-list-card.tsx
+++ b/components/pages/ecosystem/ecosystem-list-card.tsx
@@ -43,7 +43,7 @@ export const PartnerCard = ({
       )}
 
       {protocol && (
-        <span className="absolute right-0 bottom-0 flex flex-row rounded-tl-md bg-primary-500 p-1 px-2 text-xs text-grey-800">
+        <span className="absolute bottom-0 right-0 flex flex-row rounded-tl-md bg-primary-500 p-1 px-2 text-xs text-grey-800">
           {protocol}
         </span>
       )}
diff --git a/components/pages/ecosystem/ecosystem-list.tsx b/components/pages/ecosystem/ecosystem-list.tsx
index e680f4d4..f1bc7ad8 100644
--- a/components/pages/ecosystem/ecosystem-list.tsx
+++ b/components/pages/ecosystem/ecosystem-list.tsx
@@ -34,10 +34,10 @@ type EcosystemPartnersListNavProps = {
 
 const EcosystemPartnersListNav = ({ items }: EcosystemPartnersListNavProps) => {
   return (
-    <nav className="my-8 mx-auto flex max-w-4xl flex-row flex-wrap items-center justify-center">
+    <nav className="mx-auto my-8 flex max-w-4xl flex-row flex-wrap items-center justify-center">
       {items.map((cat) => (
         <a
-          className="my-2 mx-4 rounded-md bg-grey-800 px-8 py-2 hover:bg-grey-500 hover:text-white"
+          className="mx-4 my-2 rounded-md bg-grey-800 px-8 py-2 hover:bg-grey-500 hover:text-white"
           href={`#category-${slugify(cat, { lower: true })}`}
           key={cat}
         >
diff --git a/components/pages/ecosystem/widget/ecosystem-widget.tsx b/components/pages/ecosystem/widget/ecosystem-widget.tsx
index 4b3609c2..24b6744b 100644
--- a/components/pages/ecosystem/widget/ecosystem-widget.tsx
+++ b/components/pages/ecosystem/widget/ecosystem-widget.tsx
@@ -10,7 +10,7 @@ export const EcosystemWidget = () => {
           You can convert your EdgeWASM tokens to EdgeEVM tokens and vice versa.
         </p>
       </div>
-      <div className="mx-auto mt-16 mb-8 max-w-4xl rounded-lg border border-grey-800 p-8">
+      <div className="mx-auto mb-8 mt-16 max-w-4xl rounded-lg border border-grey-800 p-8">
         <Web3ContextProvider>
           <WidgetForm />
         </Web3ContextProvider>
diff --git a/components/pages/ecosystem/widget/web3-context.tsx b/components/pages/ecosystem/widget/web3-context.tsx
index 539c4ce1..0ee7f65c 100644
--- a/components/pages/ecosystem/widget/web3-context.tsx
+++ b/components/pages/ecosystem/widget/web3-context.tsx
@@ -175,7 +175,9 @@ export const Web3ContextProvider = ({ children }) => {
 
         const accounts = await Promise.all(
           allAccounts.map(async (a) => {
-            const accountInfo = (await api.query.system.account(a.address)) as AccountInfo;
+            const accountInfo = (await api.query.system.account(
+              a.address
+            )) as unknown as AccountInfo;
             const amount = accountInfo.data.free;
 
             return {
diff --git a/components/pages/ecosystem/widget/widget-form.tsx b/components/pages/ecosystem/widget/widget-form.tsx
index 13108555..71d819f4 100644
--- a/components/pages/ecosystem/widget/widget-form.tsx
+++ b/components/pages/ecosystem/widget/widget-form.tsx
@@ -96,7 +96,7 @@ export const WidgetForm = () => {
             {state.errors.global || 'Something went wrong. Please try again.'}
           </p>
           <button
-            className="text-blue-500 mt-2 ml-2 rounded bg-grey-400 p-2 px-4 text-sm"
+            className="text-blue-500 ml-2 mt-2 rounded bg-grey-400 p-2 px-4 text-sm"
             onClick={handleReset}
           >
             Start again
@@ -118,7 +118,7 @@ export const WidgetForm = () => {
 
       {state.formState === 'in-progress' && (
         <p className="animate-pulse pt-4 text-center">
-          <IconFunds className="mr-2 -mt-1 inline-block h-5 w-5 animate-spin fill-white" />
+          <IconFunds className="-mt-1 mr-2 inline-block h-5 w-5 animate-spin fill-white" />
           <span className=" ">Processing request... Please wait!</span>
         </p>
       )}
diff --git a/components/pages/home/homepage-economics.tsx b/components/pages/home/homepage-economics.tsx
index c8dbc980..2aabbbcc 100644
--- a/components/pages/home/homepage-economics.tsx
+++ b/components/pages/home/homepage-economics.tsx
@@ -57,7 +57,7 @@ export const HomepageEconomics = () => {
             })}
           </div>
 
-          <ul className="my-4 flex flex-col justify-between space-y-2 md:my-8 md:flex-row md:space-y-0 md:space-x-2">
+          <ul className="my-4 flex flex-col justify-between space-y-2 md:my-8 md:flex-row md:space-x-2 md:space-y-0">
             {Object.entries(LOCKDROP_STATS).map(([name, stat]) => {
               return (
                 <li
diff --git a/components/pages/home/homepage-edgeware-intro.tsx b/components/pages/home/homepage-edgeware-intro.tsx
index e0f2a5a9..e0734b52 100644
--- a/components/pages/home/homepage-edgeware-intro.tsx
+++ b/components/pages/home/homepage-edgeware-intro.tsx
@@ -1,6 +1,6 @@
 export const HomepageEdgewareIntro = () => {
   return (
-    <section id="way-of-edgeware" className={`container my-24 mx-auto max-w-3xl`}>
+    <section id="way-of-edgeware" className={`container mx-auto my-24 max-w-3xl`}>
       <div className="bg-[url('/images/backgrounds/edg-logomark-bg.svg')] bg-contain bg-center bg-no-repeat p-6 text-center md:p-12 lg:p-24">
         <h2 className="text-3xl font-medium md:text-4xl lg:text-5xl">The Way of Edgeware</h2>
         <p className="my-4 leading-relaxed md:text-lg">
diff --git a/components/pages/home/homepage-hero.tsx b/components/pages/home/homepage-hero.tsx
index 1656918b..7f013b7e 100644
--- a/components/pages/home/homepage-hero.tsx
+++ b/components/pages/home/homepage-hero.tsx
@@ -7,7 +7,7 @@ export const HomepageHero = () => {
   return (
     <section className="bg-[url('/images/home/hero/hero-bg@2x.png')] bg-cover bg-center pt-24">
       <div className="container mx-auto flex min-h-[75vh] max-w-7xl">
-        <div className="my-auto py-4 px-4 md:py-8 lg:py-24">
+        <div className="my-auto px-4 py-4 md:py-8 lg:py-24">
           {/* Intro text & CTAs */}
           <div className="max-w-screen-md">
             <h1 className="my-8 text-3xl font-medium md:text-4xl lg:text-6xl">
@@ -21,7 +21,7 @@ export const HomepageHero = () => {
 
             <div
               id="actions"
-              className="my-8 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-8"
+              className="my-8 flex flex-col space-y-4 sm:flex-row sm:space-x-8 sm:space-y-0"
             >
               <Button href={socialMediaUrls.discordUrl} sizing="large" colorStyle="primary">
                 Join Discord
@@ -40,7 +40,7 @@ export const HomepageHero = () => {
 
           {/* Highlights */}
           <div className="my-8">
-            <ul className="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-10">
+            <ul className="flex flex-col space-y-4 md:flex-row md:space-x-10 md:space-y-0">
               <li className="flex flex-row align-middle">
                 <CheckboxCircleFill className="mr-2 h-6 w-6 fill-green-500" />
                 Oldest Substrate Solochain
diff --git a/components/pages/home/homepage-platform.tsx b/components/pages/home/homepage-platform.tsx
index fde58753..64acae0c 100644
--- a/components/pages/home/homepage-platform.tsx
+++ b/components/pages/home/homepage-platform.tsx
@@ -14,7 +14,7 @@ export const HomepagePlatform = () => {
           <h2 className="text-3xl font-medium md:text-4xl lg:text-5xl">
             Substrate Development Platform
           </h2>
-          <p className="my-8 mx-auto max-w-2xl text-lg">
+          <p className="mx-auto my-8 max-w-2xl text-lg">
             Edgeware uses the same powerful framework as Kusama and Polkadot, but features three
             ways to build your dapp or project, including familiar EVM, cutting-edge WASM and
             modular, runtime-level Pallets.
@@ -23,7 +23,7 @@ export const HomepagePlatform = () => {
 
         {/* 3 column benefits */}
         <div className="container mx-auto my-8 max-w-6xl px-4 md:my-16 lg:my-24">
-          <div className="flex flex-col space-y-8 md:flex-row md:space-y-0 md:space-x-8 lg:space-x-10">
+          <div className="flex flex-col space-y-8 md:flex-row md:space-x-8 md:space-y-0 lg:space-x-10">
             {/* EdgeEVM */}
             <div className="flex w-full rounded-lg border border-grey-800 bg-[url('/images/home/platform/pink-block-bg.jpg')] bg-cover bg-center bg-no-repeat p-3 text-center md:w-1/3">
               <div className="flex h-full flex-col justify-between rounded-lg bg-grey-700 p-3">
@@ -92,7 +92,7 @@ export const HomepagePlatform = () => {
 
         {/* Docs links */}
         <div className="container mx-auto my-16 max-w-4xl px-4">
-          <ul className="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-4">
+          <ul className="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
             <li className="w-full md:w-1/2">
               <a
                 href="https://docs.edgeware.wiki/"
diff --git a/components/pages/home/homepage-tokens.tsx b/components/pages/home/homepage-tokens.tsx
index a049aaa0..912e0626 100644
--- a/components/pages/home/homepage-tokens.tsx
+++ b/components/pages/home/homepage-tokens.tsx
@@ -28,7 +28,7 @@ export const HomepageTokens = () => {
 
         {/* exchanges */}
         <div className="container mx-auto max-w-6xl">
-          <ul className="m-8 flex flex-col justify-between space-y-4 md:flex-row md:space-y-0 md:space-x-4">
+          <ul className="m-8 flex flex-col justify-between space-y-4 md:flex-row md:space-x-4 md:space-y-0">
             {Object.entries(EXCHANGES).map(([name, url]) => (
               <li key={name} className="flex flex-col items-center">
                 <a href={url} target="_blank" rel="noopener noreferrer" className="block">
@@ -61,7 +61,7 @@ export const HomepageTokenWallets = ({ className }: HomepageTokenWalletsProps) =
     <div className={className ? className : 'container mx-auto my-24 max-w-6xl px-4'}>
       <div className="mx-auto max-w-4xl rounded-lg border border-green-500 bg-grey-900/70 p-8 text-center">
         <h3 className="text-2xl">Wallets to store your EDG</h3>
-        <ul className="my-8 flex flex-col items-center justify-between space-y-4 md:mx-8 md:flex-row md:space-y-0 md:space-x-4 lg:mx-16">
+        <ul className="my-8 flex flex-col items-center justify-between space-y-4 md:mx-8 md:flex-row md:space-x-4 md:space-y-0 lg:mx-16">
           {Object.entries(WALLETS).map(([name, url]) => (
             <li key={name} className="flex flex-col items-center">
               <a href={url} target="_blank" rel="noopener noreferrer" className="block">
diff --git a/components/pages/press/press-brand-assets.tsx b/components/pages/press/press-brand-assets.tsx
index 4509a068..6c2e1ac7 100644
--- a/components/pages/press/press-brand-assets.tsx
+++ b/components/pages/press/press-brand-assets.tsx
@@ -5,7 +5,7 @@ export const PressBrandAssets = () => {
   return (
     <section id="brand-assets" className="container mx-auto max-w-6xl py-16 text-center">
       <h2 className="text-4xl font-medium">Brand Assets</h2>
-      <p className="my-4 mx-auto max-w-2xl text-lg">
+      <p className="mx-auto my-4 max-w-2xl text-lg">
         The Edgeware logo displayed in the official colors and usage patterns.
         <br />
         Do not place the logo on top of other objects and leave a reasonable amount of margin around
diff --git a/components/pages/society/society-intro.tsx b/components/pages/society/society-intro.tsx
index c67aa02c..c4cd5b08 100644
--- a/components/pages/society/society-intro.tsx
+++ b/components/pages/society/society-intro.tsx
@@ -2,7 +2,7 @@ export const SocietyIntro = () => {
   return (
     <section id="edgeware-society" className="my-24 px-4 text-center">
       <h1 className="my-8 text-6xl">Edgeware Society</h1>
-      <p className="my-4 mx-auto max-w-prose text-lg leading-relaxed">
+      <p className="mx-auto my-4 max-w-prose text-lg leading-relaxed">
         At Edgeware society is organized in collectives, a group of entities that share or are
         motivated by at least one common issue or interest, or work together to achieve a common
         objective.
diff --git a/components/pages/society/society-list.tsx b/components/pages/society/society-list.tsx
index 7f743f2e..c86d1bb5 100644
--- a/components/pages/society/society-list.tsx
+++ b/components/pages/society/society-list.tsx
@@ -75,7 +75,7 @@ const COLLECTIVES = [
 
 export const SocietyCollectivesList = () => {
   return (
-    <section id="collectives-list" className="my-24 mx-auto max-w-6xl px-4">
+    <section id="collectives-list" className="mx-auto my-24 max-w-6xl px-4">
       <div className="grid grid-cols-1 md:grid-cols-2 md:gap-8 lg:grid-cols-3 lg:gap-16">
         {COLLECTIVES.map((item, index) => (
           <div className="" key={index}>
diff --git a/components/pages/society/society-start.tsx b/components/pages/society/society-start.tsx
index 892c15cf..dab2ff5b 100644
--- a/components/pages/society/society-start.tsx
+++ b/components/pages/society/society-start.tsx
@@ -19,18 +19,18 @@ export const SocietyStart = () => {
       <div className="flex flex-col items-center px-4 text-center">
         <IconLogo />
         <h2 className="my-4 text-6xl">Start your own collective</h2>
-        <p className="my-4 mx-auto max-w-prose text-lg leading-relaxed">
+        <p className="mx-auto my-4 max-w-prose text-lg leading-relaxed">
           In Edgeware, working groups function as mission-based development organizations that are
           composed of members who share interests, needs, and passions.
         </p>
-        <p className="my-4 mx-auto max-w-prose text-lg leading-relaxed">
+        <p className="mx-auto my-4 max-w-prose text-lg leading-relaxed">
           Where an Ambassador team is largely formed to promote a network in a variety of ways,
           Working Groups are intended to solve issues specific to a community while also expanding
           the awareness and utility of the network.
         </p>
       </div>
 
-      <div className="my-8 mx-auto grid max-w-6xl gap-2 text-center sm:grid-cols-2 md:grid-cols-3">
+      <div className="mx-auto my-8 grid max-w-6xl gap-2 text-center sm:grid-cols-2 md:grid-cols-3">
         <div className="flex min-h-[13rem] flex-col items-center rounded-lg border-2 border-white border-opacity-0 p-4 transition-all hover:rounded-lg hover:border-white hover:border-opacity-10 hover:bg-grey-800 hover:bg-opacity-20">
           <OpenArmLineIcon className="my-4 h-8 w-8 fill-white" />
           <p>
diff --git a/pages/csp.tsx b/pages/csp.tsx
index 6947ffb3..8055e7de 100644
--- a/pages/csp.tsx
+++ b/pages/csp.tsx
@@ -40,13 +40,13 @@ export default function SocietyPage() {
     <>
       <section id="edgeware-csp" className="mt-24 px-4 text-center">
         <h1 className="my-8 text-6xl">Contributors' Support Program</h1>
-        <p className="my-4 mx-auto max-w-prose text-lg leading-relaxed">
+        <p className="mx-auto my-4 max-w-prose text-lg leading-relaxed">
           Contributors' Support Program allows anyone to support the currently non-treasury funded
           contributors to continue their contributions to the Edgeware community through the monthly
           limited editions of NFTs. This program aims to provide basic minimal monthly incentives
           for Edgeware contributors who are consistent with their contributions.
         </p>
-        <p className="my-4 mx-auto max-w-prose leading-relaxed">
+        <p className="mx-auto my-4 max-w-prose leading-relaxed">
           Select the month below to mint the corresponding CSP NFT(s):
         </p>
       </section>
@@ -80,7 +80,7 @@ export default function SocietyPage() {
             height="600px"
           />
         </div>
-        <div className="my-4 mx-auto flex max-w-4xl flex-col gap-4 rounded-lg border-2 border-grey-700 border-opacity-50 bg-grey-800 bg-opacity-30 p-5">
+        <div className="mx-auto my-4 flex max-w-4xl flex-col gap-4 rounded-lg border-2 border-grey-700 border-opacity-50 bg-grey-800 bg-opacity-30 p-5">
           <h3 className="text-xl font-bold">Minted the NFT(s)?</h3>
           <p className="leading-relaxed">
             Claim your discord role and perks now:{' '}