diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1bb17e12..b1a62c42 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -178,3 +178,35 @@ To add a new banner, follow these steps:
 3. If you are the designer creating the banner, the content needs to be delivered as an SVG with a transparent background (see examples for [desktop](https://github.com/DeXter-on-Radix/website/blob/main/public/promo-banners/validator-node-staking/desktop-600x80.svg) or [mobile](https://github.com/DeXter-on-Radix/website/blob/main/public/promo-banners/validator-node-staking/mobile-600x200.svg)). Furthermore, ensure there is only a single call to action (CTA). Avoid having multiple competing actions like "STAKE NOW" and "learn more". Decide which one is more important and design the banner accordingly :D
 4. Upload both files to `/public/promo-banners/`.
 5. Fill out `imageUrl`, `imageUrlMobile` and optionally `redirecturl` inside [`src/app/layout.tsx`](https://github.com/DeXter-on-Radix/website/blob/main/src/app/layout.tsx#L15-L20).
+
+## Hydration Error Handling
+
+Problem: Since the radix connect button supports caching logged in users, components that depend on the users logg in status will have different initial renders based on whether the user is logged in or not. This is a disallowed react/nextJS pattern and throws a hydration error.
+
+### General Rule: if the component's initial render depends on the users login status, use the following fix
+
+```tsx
+// Import custom hydration error hook
+import { useHydrationErrorFix } from "hooks";
+
+function SubmitButton() {
+  // SubmitButton's initial render depends on connection status! Hydratino Fix is required!
+  const { isConnected } = useAppSelector((state) => state.radix);
+
+  // Hydration fix goes at the top
+  const isClient = useHydrationErrorFix();
+
+  // Additional code like useEffect or other hooks go here!
+  // ...
+
+  // Ensures initial rendering is always empty and fixes hydration error.
+  // Add this line always before the return!
+  if (!isClient) return <></>;
+
+  return (
+    <button>
+      <p>{isConnectd ? "submit" : "please connect wallet to submit"}</p>
+    </button>
+  );
+}
+```
diff --git a/src/app/components/OrderInput.tsx b/src/app/components/OrderInput.tsx
index f927ce60..cfa90766 100644
--- a/src/app/components/OrderInput.tsx
+++ b/src/app/components/OrderInput.tsx
@@ -8,7 +8,12 @@ import {
   truncateWithPrecision,
 } from "../utils";
 
-import { useAppDispatch, useAppSelector, useTranslations } from "hooks";
+import {
+  useAppDispatch,
+  useAppSelector,
+  useTranslations,
+  useHydrationErrorFix,
+} from "hooks";
 import { fetchBalances } from "state/pairSelectorSlice";
 import {
   OrderSide,
@@ -367,6 +372,7 @@ function PostOnlyCheckbox() {
 }
 
 function SubmitButton() {
+  const isClient = useHydrationErrorFix(); // to fix HydrationError
   const t = useTranslations();
   const dispatch = useAppDispatch();
   const { side, type, token1, quote, quoteDescription, quoteError } =
@@ -384,15 +390,8 @@ function SubmitButton() {
         .replaceAll("<$SIDE>", t(side))
         .replaceAll("<$TOKEN_SYMBOL>", token1.symbol);
 
-  // Fix hydration error:
-  // https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
-  const [isClient, setIsClient] = useState(false);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  if (!isClient) {
-    return <></>;
-  }
+  // Fix HydrationError
+  if (!isClient) return <></>;
 
   return (
     <button
diff --git a/src/app/hooks.ts b/src/app/hooks.ts
index 1a69ea05..6f8f90a6 100644
--- a/src/app/hooks.ts
+++ b/src/app/hooks.ts
@@ -1,6 +1,7 @@
 import { useDispatch, useSelector } from "react-redux";
 import type { TypedUseSelectorHook } from "react-redux";
 import type { RootState, AppDispatch } from "./state/store";
+import { useEffect, useState } from "react";
 
 // https://redux-toolkit.js.org/tutorials/typescript#define-typed-hooks
 export const useAppDispatch: () => AppDispatch = useDispatch;
@@ -18,3 +19,14 @@ export const useTranslations = () => {
   };
   return t;
 };
+
+// Hook to fix hydration errors by delaying rendering until client-side mount
+export const useHydrationErrorFix = () => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+};
diff --git a/src/app/rewards/page.tsx b/src/app/rewards/page.tsx
index d9cac101..4d9bec8f 100644
--- a/src/app/rewards/page.tsx
+++ b/src/app/rewards/page.tsx
@@ -1,7 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector, useTranslations } from "hooks";
+import {
+  useAppDispatch,
+  useAppSelector,
+  useTranslations,
+  useHydrationErrorFix,
+} from "hooks";
 import {
   fetchAddresses,
   fetchReciepts,
@@ -91,6 +96,7 @@ function HeaderComponent() {
 }
 
 function RewardsCard() {
+  const isClient = useHydrationErrorFix(); // to fix HydrationError
   const dispatch = useAppDispatch();
   const { isConnected, walletData } = useAppSelector((state) => state.radix);
   const account = walletData.accounts[0]?.address;
@@ -124,6 +130,10 @@ function RewardsCard() {
       loadRewards();
     }
   }, [dispatch, isConnected, account, pairsList]);
+
+  // Fix HydrationError
+  if (!isClient) return <></>;
+
   return (
     <div className="max-w-[400px] sm:max-w-[600px] px-4 py-4 sm:px-12 sm:py-8 m-auto mt-2 sm:mt-14 mb-28 bg-[#191B1D] rounded-xl max-[450px]:mx-5">
       <div className="flex flex-col">
@@ -200,6 +210,7 @@ function RewardsOverview() {
 }
 
 function ClaimButton() {
+  const isClient = useHydrationErrorFix(); // to fix HydrationError
   const t = useTranslations();
   const dispatch = useAppDispatch();
   const { isConnected } = useAppSelector((state) => state.radix);
@@ -207,6 +218,9 @@ function ClaimButton() {
   const userHasRewards = getUserHasRewards(rewardData);
   const disabled = !isConnected || !userHasRewards;
 
+  // Fix HydrationError
+  if (!isClient) return <></>;
+
   return (
     <button
       className={`w-full max-w-[220px] m-auto font-bold text-sm tracking-[.1px] min-h-[44px] p-3 my-6 uppercase rounded ${
@@ -243,6 +257,7 @@ function ClaimButton() {
 
 function RewardsDetails() {
   const [isOpen, setIsOpen] = useState(true);
+  const isClient = useHydrationErrorFix(); // to fix HydrationError
   const { isConnected } = useAppSelector((state) => state.radix);
   const { rewardData, tokensList } = useAppSelector(
     (state) => state.rewardSlice
@@ -255,7 +270,7 @@ function RewardsDetails() {
     }
   }, [isConnected]);
 
-  if (!isConnected || !userHasRewards) {
+  if (!isConnected || !userHasRewards || !isClient) {
     return <></>;
   }