diff --git a/components/ConfirmModalContextProvider.tsx b/components/ConfirmModalContextProvider.tsx
index 374f387..9a5f2ab 100644
--- a/components/ConfirmModalContextProvider.tsx
+++ b/components/ConfirmModalContextProvider.tsx
@@ -36,12 +36,12 @@ export default function ConfirmModalContextProvider({children}: { children: Reac
           {config?.modalBody}
         </p>
         <div className="modal-action">
-          <label className="btn btn-outline"
+          <label className="btn btn-outline rounded-lg"
                  onClick={() => {
                    toggleOpen()
                    config?.onCancel?.()
                  }}>Cancel</label>
-          <label className="btn btn-primary"
+          <label className="btn btn-primary rounded-lg"
                  onClick={() => {
                    toggleOpen()
                    config?.onConfirm?.()
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 2f35adc..a25e4b2 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -16,56 +16,57 @@ export default function Layout({children}: PropsWithChildren) {
         <title>Shardeum Dashboard</title>
         <meta name="description" content="Dashboard to configure a Shardeum validator"/>
         <meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
         <link rel="icon" href="/favicon.ico"/>
       </Head>
 
-      <main className="py-10 px-20 ml-auto mr-auto max-w-[75rem]">
+      <main className="py-5 md:py-10 px-5 sm:px-10 lg:px-20 ml-auto mr-auto max-w-[75rem]">
         {/* Navigation bar */}
         <nav className="text-gray-400 py-2">
           {/* Logo */}
           <div className="flex">
             {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="logo.png" alt="Logo" className="w-40"/>
+            <img src="/logo.png" alt="Shardeum" className="w-40"/>
             <span className="flex-grow"></span>
           </div>
 
           {/* Navigation links */}
-          <div className="flex flex-direction-column">
+          <div className="flex flex-row items-start">
 
-            <ul className="flex-grow flex mb-3 mt-10 border-b-2 border-b-gray-500 h-10 items-stretch">
-              <li className={router.pathname == "/" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
+            <ul className="flex-grow flex flex-col sm:flex-row mb-3 mt-5 lg:mt-10 sm:border-b-2 border-b-gray-500 sm:h-10 items-stretch">
+              <li className={router.pathname == "/" ? "border-b-2 border-b-white px-2 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
                 <Link href='/'>Overview</Link></li>
               <li
-                className={router.pathname == "/performance" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
+                className={router.pathname == "/performance" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
                 <Link href='/performance'>Performance</Link>
               </li>
               <li
-                className={router.pathname == "/maintenance" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
+                className={router.pathname == "/maintenance" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
                 <Link href='/maintenance'>Maintenance</Link>
               </li>
               <li
-                className={router.pathname == "/network" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
+                className={router.pathname == "/network" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
                 <Link href='/network'>Network</Link></li>
               <li
-                className={router.pathname == "/alert-info" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
+                className={router.pathname == "/alert-info" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
                 <Link href='/alert-info'>Alert Info</Link></li>
               <li
-                className={router.pathname == "/settings" ? "border-b-2 border-b-white px-5 -mb-0.5 text-white" : "px-5"}>
+                className={router.pathname == "/settings" ? "border-b-2 border-b-white px-1 md:px-5 sm:-mb-0.5 text-white" : "px-2 md:px-5"}>
                 <Link href='/settings'>Settings</Link></li>
             </ul>
-            <button title='Logout' className="hover:text-stone-200" onClick={async () => await authService.logout(apiBase)}>
+            <button title='Logout' className="hover:text-stone-200 mt-5 lg:mt-10" onClick={async () => await authService.logout(apiBase)}>
                  <ArrowRightOnRectangleIcon className='h-5 w-5 inline ml-2' onClick={async () => await authService.logout(apiBase)}/></button>
           </div>
 
         </nav>
 
         {/* Dynamic content */}
-        <div className="p-4">
+        <div className="py-4 sm:p-4">
           <main>{children}</main>
         </div>
 
       </main>
-      <div className="w-[26rem] h-[28rem] absolute top-32 right-0 -z-10" style={{
+      <div className="w-full sm:w-[26rem] h-[28rem] absolute top-0 sm:top-32 right-0 -z-10" style={{
         'background':
           'radial-gradient(circle at right 20% bottom 40%, purple, transparent 50%),' +
           'radial-gradient(circle at right 20% top 40%, blue, transparent 50%)',
diff --git a/components/ResetPasswordForm.tsx b/components/ResetPasswordForm.tsx
index 5afb6ba..561811b 100644
--- a/components/ResetPasswordForm.tsx
+++ b/components/ResetPasswordForm.tsx
@@ -27,10 +27,10 @@ const ResetPasswordForm = () => {
     <>
       <h1 className="font-semibold mb-3 mt-4 text-lg">Change Password</h1>
       <form onSubmit={handleSubmit(onSubmit)} className="max-w-[21rem]">
-        <div className="flex justify-between mt-2">
+        <div className="flex flex-col sm:flex-row justify-between mt-2">
           <label htmlFor="currentPassword">Current Password</label>
           <input
-            className="bg-white text-black border px-1"
+            className="bg-white text-black rounded border px-1"
             id="currentPassword"
             type="password"
             {...register("currentPassword", {required: "This field is required"})}
@@ -40,10 +40,10 @@ const ResetPasswordForm = () => {
         {errors.currentPassword && <p>{errors.currentPassword.message}</p>}
       </span>
 
-        <div className="flex justify-between mt-2">
+        <div className="flex flex-col sm:flex-row justify-between mt-2">
           <label htmlFor="newPassword">New Password</label>
           <input
-            className="bg-white text-black border px-1"
+            className="bg-white text-black rounded border px-1"
             id="newPassword"
             type="password"
             {...register("newPassword", {required: "This field is required"})}
@@ -53,10 +53,10 @@ const ResetPasswordForm = () => {
         {errors.newPassword && <p>{errors.newPassword.message}</p>}
       </span>
 
-        <div className="flex justify-between mt-2">
+        <div className="flex flex-col sm:flex-row justify-between mt-2">
           <label htmlFor="confirmNewPassword">Confirm Password</label>
           <input
-            className="bg-white text-black border px-1"
+            className="bg-white text-black rounded border px-1"
             id="confirmNewPassword"
             type="password"
             {...register("confirmNewPassword", {
@@ -71,7 +71,7 @@ const ResetPasswordForm = () => {
       </span>
 
         <div className="flex justify-end mt-2">
-          <LoadingButton className="btn btn-primary"
+          <LoadingButton className="btn btn-primary rounded-lg"
                          isLoading={isLoading}
                          disabled={!isValid}
                          type="submit">
diff --git a/pages/index.tsx b/pages/index.tsx
index 7583a12..03dcfb6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -68,7 +68,7 @@ export default function Overview() {
             <div className="flex flex-col items-stretch">
                 <h1 className="font-semibold mb-3">Node Status</h1>
                 <div
-                    className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                    className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                     <div className="capitalize"><span className='font-semibold'>Status:</span>{" "} {nodeStatus.state  === "active" ? 
                         "Validating" : nullPlaceholder(nodeStatus.state)}{" "} <StatusBadge status={nodeStatus.state}/>
                     </div>
@@ -80,7 +80,7 @@ export default function Overview() {
             <div className="flex flex-col items-stretch">
                 <h1 className="font-semibold mb-3">Staked SHM</h1>
                 <div
-                    className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                    className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                     <div><span className='font-semibold'>SHM staked:</span>  {nodeStatus.lockedStake ? nodeStatus.lockedStake + ' SHM' : '-'}</div>
                     <div className="overflow-hidden text-ellipsis"><span className='font-semibold'>Stake
                         address:</span> {nullPlaceholder(nodeStatus.nominatorAddress)}</div>
@@ -91,7 +91,7 @@ export default function Overview() {
             <div className="flex flex-col items-stretch">
                 <h1 className="font-semibold mb-3">Reward SHM</h1>
                 <div
-                    className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                    className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                     <div><span className='font-semibold'>Earnings:</span> {nodeStatus.currentRewards ? nodeStatus.currentRewards?.substring(0, 6) + ' SHM' : '-'} </div>
                     <div><span className='font-semibold'>Last payout:</span> {nullPlaceholder(nodeStatus.lastPayout)}</div>
                     <div><span className='font-semibold'>Lifetime
@@ -102,7 +102,7 @@ export default function Overview() {
               <div className="flex flex-col items-stretch">
                 <h1 className="font-semibold mb-3">Version Info</h1>
                 <div
-                    className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                    className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                     <div><span className='font-semibold'>CLI/GUI Running Version:</span> {nullPlaceholder(version.runningCliVersion)} / {nullPlaceholder(version.runningGuiVersion)}</div>
                     <div><span className='font-semibold'>CLI/GUI Latest Version:</span> {nullPlaceholder(version.latestCliVersion)} / {nullPlaceholder(version.latestGuiVersion)}</div>
                     <div><span className='font-semibold'>Validator Running Version:</span> {nullPlaceholder(version.runnningValidatorVersion)}</div>
@@ -114,7 +114,7 @@ export default function Overview() {
         </div>
 
         <h1 className="font-semibold mb-3 py-10">Node Status</h1>
-        <div className="h-60">
+        <div className="h-40 sm:h-60">
             <Bar options={options} data={data}/>
         </div>
     </div>
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
index 8730493..8d37ee7 100644
--- a/pages/login/index.tsx
+++ b/pages/login/index.tsx
@@ -37,8 +37,8 @@ const Login = () => {
   return (
     <>
       {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img src="logo.png" alt="Logo" className="w-40 mb-5 mt-20"/>
-      <div className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 max-w-xl">
+      <img src="/logo.png" alt="Shardeum" className="w-40 mb-5"/>
+      <div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 max-w-xl">
         <h1 className="text-black font-semibold text-2xl">Connect to Validator Dashboard</h1>
         <p>
           Connect to your validator dashboard to see the performance of your node, check rewards and run
@@ -46,15 +46,19 @@ const Login = () => {
         </p>
         <form onSubmit={handleSubmit(onSubmit)}>
           <input {...register('password')} placeholder="Password" type="password"
-                 className="block p-4 w-full bg-stone-200 text-stone-600 my-2"></input>
+                 className="block p-4 w-full bg-stone-200 text-stone-600 my-2 rounded-lg"></input>
           {apiError && (
-            <div className="flex text-red-500 items-center mb-5">
-              <div className="ml-2 font-semibold">{apiError.message}</div>
-            </div>
+              <div className="flex text-red-500 items-center mb-5">
+                <div className="ml-2 font-semibold">{apiError.message}</div>
+              </div>
           )}
-          <button disabled={formState.isSubmitting} className="btn btn-primary" type="submit">
-            {formState.isSubmitting ? <ArrowPathIcon className='w-5 spinner'/> : 'Connect'}
-          </button>
+
+          <div className="flex items-center">
+            <div className="ml-4 text-red-500 font-semibold">Invalid password!</div>
+            <button disabled={formState.isSubmitting} className="btn btn-primary rounded-lg ml-auto" type="submit">
+              {formState.isSubmitting ? <ArrowPathIcon className='w-5 spinner'/> : 'Connect'}
+            </button>
+          </div>
         </form>
       </div>
     </>
@@ -67,11 +71,14 @@ Login.getLayout = function getLayout(page: ReactElement) {
       <title>Shardeum Dashboard</title>
       <meta name="description" content="Dashboard to configure a Shardeum validator"/>
       <meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests"/>
+      <meta name="viewport" content="width=device-width, initial-scale=1"/>
       <link rel="icon" href="/favicon.ico"/>
     </Head>
-    <div className="grid justify-center">
-      {page}
-    </div>
+    <main className="py-5 md:py-10 px-5 sm:px-10 lg:px-20 m-auto mt-10 sm:mt-20 max-w-[75rem] flex flex-col items-center">
+      <div className="flex flex-col items-start">
+        {page}
+      </div>
+    </main>
   </>
 }
 
diff --git a/pages/maintenance/index.tsx b/pages/maintenance/index.tsx
index c38edf1..5921fea 100644
--- a/pages/maintenance/index.tsx
+++ b/pages/maintenance/index.tsx
@@ -114,7 +114,7 @@ export default function Maintenance() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4 auto-rows-auto">
             <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Start / Stop Node</h1>
-              <div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+              <div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                 <div className="flex-grow" />
                 <div className="capitalize">
                   <span className="font-semibold">Status:</span>{" "}
@@ -197,7 +197,7 @@ export default function Maintenance() {
                         data-tip="Start node automatically once it has been terminated/rotated out of the network."
                       >
                         <LoadingButton
-                          className="btn btn-primary btn-outline ml-2"
+                          className="btn btn-primary btn-outline rounded-lg ml-2"
                           isLoading={updateSettingsLoading}
                           onClick={() => toggleAutoRestart()}
                         >
@@ -218,7 +218,7 @@ export default function Maintenance() {
                   )}
                   {nodeStatus.state === "stopped" && (
                     <LoadingButton
-                      className="btn btn-primary ml-2"
+                      className="btn btn-primary rounded-lg ml-2"
                       isLoading={isLoading}
                       onClick={() => startNode()}
                     >
@@ -233,7 +233,7 @@ export default function Maintenance() {
             <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Add / Remove Stake</h1>
               {showStakeForm && (
-                <div className="bg-white text-stone-500	rounded-xl p-8 text-sm relative">
+                <div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm relative">
                   <StakeForm
                     nominator={address!}
                     nominee={nodeStatus?.nomineeAddress}
@@ -242,7 +242,7 @@ export default function Maintenance() {
                     totalStaked = {stakeInfo?.stake? Number(stakeInfo.stake): 0}
                   />
                   <button
-                    className="btn btn-primary btn-outline mr-2 absolute bottom-8"
+                    className="btn btn-primary btn-outline rounded-lg mr-2 absolute bottom-8"
                     onClick={() => setShowStakeForm(false)}
                   >
                     <ArrowLeftIcon className="h-5 w-5 inline mr-2" />
@@ -251,7 +251,7 @@ export default function Maintenance() {
                 </div>
               )}
               {!showStakeForm && (
-                <div className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                <div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div className="flex-grow" />
                   <div>
                     <span className="font-semibold">SHM staked:</span>{" "}
@@ -335,7 +335,7 @@ export default function Maintenance() {
                       chain?.id === CHAIN_ID &&
                       nodeStatus?.state !== "stopped" && (
                         <button
-                          className="btn btn-primary ml-2"
+                          className="btn btn-primary rounded-lg ml-2"
                           onClick={() => setShowStakeForm(true)}
                         >
                           Add Stake
@@ -345,7 +345,7 @@ export default function Maintenance() {
 
                     {isConnected && chain?.id !== CHAIN_ID && (
                       <button
-                        className="btn btn-primary ml-2"
+                        className="btn btn-primary rounded-lg ml-2"
                         onClick={() => switchNetwork?.(CHAIN_ID)}
                       >
                         Switch Network
@@ -361,7 +361,7 @@ export default function Maintenance() {
 
             <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Benchmark Node</h1>
-              <div className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+              <div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                 <div className="flex-grow" />
                 <div className="flex justify-between h-7">
                   <div>
@@ -415,7 +415,7 @@ export default function Maintenance() {
                 <div className="flex-grow" />
                 <div className="flex justify-end">
                   <div className="tooltip" data-tip="Coming Soon!">
-                    <button className="btn btn-primary btn-disabled">
+                    <button className="btn btn-primary btn-disabled rounded-lg">
                       Benchmark
                       <ArrowRightIcon className="h-5 w-5 inline ml-2" />
                     </button>
@@ -426,7 +426,7 @@ export default function Maintenance() {
 
             <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Update Version</h1>
-              <div className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+              <div className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                 <div className="flex-grow" />
                 <div>
                   <span className="font-semibold">
diff --git a/pages/network/index.tsx b/pages/network/index.tsx
index a75da6a..da4863a 100644
--- a/pages/network/index.tsx
+++ b/pages/network/index.tsx
@@ -9,7 +9,7 @@ export default function Network() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Network Size</h1>
               <div
-                  className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div>Active validators: {nullPlaceholder(network.active)}</div>
                   <div>Standby validators: {nullPlaceholder(network.standby)}</div>
                   <div>Desired network size: {nullPlaceholder(network.desired)}</div>
@@ -19,7 +19,7 @@ export default function Network() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Network Load - Coming Soon</h1>
               <div
-                  className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div>Max TPS: {nullPlaceholder(null)}</div>
                   <div>Avg TPS: {nullPlaceholder(null)}</div>
                   <div>Total TXs processed: {nullPlaceholder(null)}</div>
@@ -29,7 +29,7 @@ export default function Network() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Network Health - Coming Soon</h1>
               <div
-                  className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div>Current A:S Ratio: {network.active/network.standby * 100}%</div>
                   <div>Target A:S Ratio: {nullPlaceholder(null)}</div>
                   <div>Network health: {nullPlaceholder(null)}%
@@ -39,7 +39,7 @@ export default function Network() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Network Reward - Coming Soon</h1>
               <div
-                  className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div>Current daily issuance: {nullPlaceholder(null)}</div>
                   <div>Average daily issuance: {nullPlaceholder(null)}</div>
                   <div>Average daily node reward: {nullPlaceholder(null)}</div>
@@ -48,7 +48,7 @@ export default function Network() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Average APR - Coming Soon</h1>
               <div
-                  className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div>Your APR: {nullPlaceholder(null)}%</div>
                   <div>Network average APR: {nullPlaceholder(null)}</div>
               </div>
diff --git a/pages/performance/index.tsx b/pages/performance/index.tsx
index 7c7e9ed..00a5c55 100644
--- a/pages/performance/index.tsx
+++ b/pages/performance/index.tsx
@@ -17,7 +17,7 @@ export default function Performance() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Version Info</h1>
               <div
-                  className="bg-white text-stone-500 rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div><span className='font-semibold'>CLI/GUI Running Version:</span> {nullPlaceholder(version.runningCliVersion)} / {nullPlaceholder(version.runningGuiVersion)}</div>
                   <div><span className='font-semibold'>CLI/GUI Latest Version:</span> {nullPlaceholder(version.latestCliVersion)} / {nullPlaceholder(version.latestGuiVersion)}</div>
                   <div><span className='font-semibold'>Validator Running Version:</span> {nullPlaceholder(version.runnningValidatorVersion)}</div>
@@ -28,7 +28,7 @@ export default function Performance() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">Performance</h1>
               <div
-                  className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div className="flex justify-between h-7">
                       <div><span className='font-semibold'>CPU usage AVG:</span> {nodeStatus.performance?.cpuPercentage.toFixed(2)}%</div>
                       <Doughnut data={mapToDoughnut(nodeStatus.performance?.cpuPercentage, {spacing: 2})}
@@ -53,7 +53,7 @@ export default function Performance() {
           <div className="flex flex-col items-stretch">
               <h1 className="font-semibold mb-3">TPS Overview</h1>
               <div
-                  className="bg-white text-stone-500	rounded-xl p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
+                  className="bg-white text-stone-500 rounded-xl p-4 sm:p-8 text-sm [&>*]:pb-2 flex flex-col flex-grow justify-center">
                   <div><span className='font-semibold'>Node
                       throughput:</span> {Number.isFinite(network?.txApplied) ? network?.txApplied + ' TPS' : '-'}</div>
                   <div><span className='font-semibold'>Transaction processed:</span> {Number.isFinite(network?.txProcessed) ? network?.txProcessed : '-'}</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index e4f0e42..73d74e3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,7 +20,6 @@ module.exports = {
 
                     '.btn': {
                         'text-transform': 'capitalize',
-                        'border-radius': '0',
                     },
                     '.btn-primary': {
                         color: 'white'