diff --git a/src/common/api/hive.ts b/src/common/api/hive.ts
index 0f3e617e91d..71eea8e755e 100644
--- a/src/common/api/hive.ts
+++ b/src/common/api/hive.ts
@@ -1,10 +1,10 @@
-import { Client, RCAPI, utils } from "@hiveio/dhive";
+import { Client, RCAPI } from "@hiveio/dhive";
 
 import { RCAccount } from "@hiveio/dhive/lib/chain/rc";
 
 import { TrendingTag } from "../store/trending-tags/types";
 import { DynamicProps } from "../store/dynamic-props/types";
-import { FullAccount, AccountProfile, AccountFollowStats } from "../store/accounts/types";
+import { AccountFollowStats, AccountProfile, FullAccount } from "../store/accounts/types";
 import { Entry } from "../store/entries/types";
 
 import parseAsset from "../helper/parse-asset";
@@ -14,6 +14,7 @@ import isCommunity from "../helper/is-community";
 import SERVERS from "../constants/servers.json";
 import { dataLimit } from "./bridge";
 import moment, { Moment } from "moment";
+import { useHiveClientQuery } from "../core/hive";
 
 export const client = new Client(SERVERS, {
   timeout: 3000,
@@ -147,6 +148,7 @@ export interface Reputations {
   account: string;
   reputation: number;
 }
+
 interface ApiError {
   error: string;
   data: any;
@@ -663,3 +665,17 @@ export const getRcOperationStats = (): Promise<any> => client.call("rc_api", "ge
 
 export const getContentReplies = (author: string, permlink: string): Promise<Entry[] | null> =>
   client.call("condenser_api", "get_content_replies", { author, permlink });
+
+export const getPostQuery = (username?: string, permlink?: string) =>
+  useHiveClientQuery<Entry>("condenser_api", "get_content", [username, permlink], {
+    enabled: !!username && !!permlink
+  });
+
+export const getProposalsQuery = () =>
+  useHiveClientQuery<{ proposals: Proposal[] }>("database_api", "list_proposals", {
+    start: [-1],
+    limit: 500,
+    order: "by_total_votes",
+    order_direction: "descending",
+    status: "all"
+  });
diff --git a/src/common/app.tsx b/src/common/app.tsx
index 308da7ba8e7..450cc4586d6 100644
--- a/src/common/app.tsx
+++ b/src/common/app.tsx
@@ -25,9 +25,11 @@ import loadable from "@loadable/component";
 import Announcement from "./components/announcement";
 import FloatingFAQ from "./components/floating-faq";
 import { useMappedStore } from "./store/use-mapped-store";
-import { EntriesCacheManager } from "./core";
+import { CoreProvider, EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
+import { BottomStatusBar } from "./components/bottom-status-bar";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -92,91 +94,104 @@ const App = (props: any) => {
   }, []);
 
   return (
-    <EntriesCacheManager>
-      {/*Excluded from production*/}
-      {/*<ReactQueryDevtools initialIsOpen={false} />*/}
-      <Tracker />
-      <UserActivityRecorder />
-      <Switch>
-        <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.USER_FEED} component={EntryIndexContainer} />
-        <Route exact={true} strict={true} path={routes.PURCHASE} component={PurchasePage} />
-        <Route exact={true} strict={true} path={routes.USER} component={ProfilePage} />
-        <Route exact={true} strict={true} path={routes.USER_SECTION} component={ProfilePage} />
-        <Route exact={true} strict={true} path={routes.ENTRY} component={EntryPage} />
-        <Route exact={true} strict={true} path={routes.COMMUNITIES} component={CommunitiesPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.COMMUNITIES_CREATE}
-          component={CommunityCreatePage}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.COMMUNITIES_CREATE_HS}
-          component={CommunityCreateHSPage}
-        />
-        <Route exact={true} strict={true} path={routes.COMMUNITY} component={CommunityPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.FILTER_TAG}
-          component={EntryIndexContainer}
-        />
-        <Route exact={true} strict={true} path={routes.DISCOVER} component={DiscoverPage} />
-        <Route exact={true} path={routes.SEARCH} component={SearchPageContainer} />
-        <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
-        <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
-        <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
-        <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
-        <Route exact={true} strict={true} path={routes.ONBOARD} component={OnboardPage} />
-        <Route exact={true} strict={true} path={routes.EDIT_DRAFT} component={SubmitPage} />
-        <Route exact={true} strict={true} path={routes.WITNESSES} component={WitnessesPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.PROPOSALS}
-          component={ProposalsIndexContainer}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.PROPOSAL_DETAIL}
-          component={ProposalDetailContainer}
-        />
-        <Route
-          exact={true}
-          strict={true}
-          path={`/me${routes.PROPOSAL_DETAIL}`}
-          component={ProposalDetailContainer}
-        />
-        <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
-        <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
-        <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />
-        <Route exact={true} strict={true} path={routes.PRIVACY} component={PrivacyPage} />
-        <Route exact={true} strict={true} path={routes.WHITE_PAPER} component={WhitePaperPage} />
-        <Route exact={true} strict={true} path={routes.TOS} component={TosPage} />
-        <Route exact={true} strict={true} path={routes.FAQ} component={FaqPage} />
-        <Route exact={true} strict={true} path={routes.CONTRIBUTORS} component={ContributorsPage} />
-        <Route
-          exact={true}
-          strict={true}
-          path={routes.DECKS}
-          component={global.usePrivate ? DecksPage : NotFound}
-        />
-        <Route component={NotFound} />
-      </Switch>
-
-      <Announcement activeUser={props.activeUser} />
-      <FloatingFAQ />
-      <div id="popper-container" />
-      <div id="modal-overlay-container" />
-      <div id="modal-dialog-container" />
-    </EntriesCacheManager>
+    <CoreProvider>
+      <EntriesCacheManager>
+        {/*Excluded from production*/}
+        <ReactQueryDevtools initialIsOpen={false} />
+        <Tracker />
+        <UserActivityRecorder />
+        <Switch>
+          <Route exact={true} path={routes.HOME} component={EntryIndexContainer} />
+          <Route exact={true} strict={true} path={routes.FILTER} component={EntryIndexContainer} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.USER_FEED}
+            component={EntryIndexContainer}
+          />
+          <Route exact={true} strict={true} path={routes.PURCHASE} component={PurchasePage} />
+          <Route exact={true} strict={true} path={routes.USER} component={ProfilePage} />
+          <Route exact={true} strict={true} path={routes.USER_SECTION} component={ProfilePage} />
+          <Route exact={true} strict={true} path={routes.ENTRY} component={EntryPage} />
+          <Route exact={true} strict={true} path={routes.COMMUNITIES} component={CommunitiesPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.COMMUNITIES_CREATE}
+            component={CommunityCreatePage}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.COMMUNITIES_CREATE_HS}
+            component={CommunityCreateHSPage}
+          />
+          <Route exact={true} strict={true} path={routes.COMMUNITY} component={CommunityPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.FILTER_TAG}
+            component={EntryIndexContainer}
+          />
+          <Route exact={true} strict={true} path={routes.DISCOVER} component={DiscoverPage} />
+          <Route exact={true} path={routes.SEARCH} component={SearchPageContainer} />
+          <Route exact={true} path={routes.SEARCH_MORE} component={SearchMorePageContainer} />
+          <Route exact={true} strict={true} path={routes.AUTH} component={AuthPage} />
+          <Route exact={true} strict={true} path={routes.SUBMIT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.MARKET} component={MarketPage} />
+          <Route exact={true} strict={true} path={routes.EDIT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.SIGN_UP} component={SignUpPage} />
+          <Route exact={true} strict={true} path={routes.ONBOARD} component={OnboardPage} />
+          <Route exact={true} strict={true} path={routes.EDIT_DRAFT} component={SubmitPage} />
+          <Route exact={true} strict={true} path={routes.WITNESSES} component={WitnessesPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.PROPOSALS}
+            component={ProposalsIndexContainer}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.PROPOSAL_DETAIL}
+            component={ProposalDetailContainer}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={`/me${routes.PROPOSAL_DETAIL}`}
+            component={ProposalDetailContainer}
+          />
+          <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
+          <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
+          <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />
+          <Route exact={true} strict={true} path={routes.PRIVACY} component={PrivacyPage} />
+          <Route exact={true} strict={true} path={routes.WHITE_PAPER} component={WhitePaperPage} />
+          <Route exact={true} strict={true} path={routes.TOS} component={TosPage} />
+          <Route exact={true} strict={true} path={routes.FAQ} component={FaqPage} />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.CONTRIBUTORS}
+            component={ContributorsPage}
+          />
+          <Route
+            exact={true}
+            strict={true}
+            path={routes.DECKS}
+            component={global.usePrivate ? DecksPage : NotFound}
+          />
+          <Route component={NotFound} />
+        </Switch>
+
+        <Announcement activeUser={props.activeUser} />
+        <FloatingFAQ />
+        <BottomStatusBar />
+        <div id="popper-container" />
+        <div id="modal-overlay-container" />
+        <div id="modal-dialog-container" />
+      </EntriesCacheManager>
+    </CoreProvider>
   );
 };
 
diff --git a/src/common/components/bottom-status-bar/index.tsx b/src/common/components/bottom-status-bar/index.tsx
new file mode 100644
index 00000000000..533dcd7fa69
--- /dev/null
+++ b/src/common/components/bottom-status-bar/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { LatencyStatusBar } from "./latency-status-bar";
+
+export function BottomStatusBar() {
+  return (
+    <div className="fixed flex justify-start bottom-0 left-0 right-0 duration-300 overflow-hidden border-r w-[2rem] border-[--border-color] hover:w-full whitespace-nowrap">
+      <LatencyStatusBar />
+    </div>
+  );
+}
diff --git a/src/common/components/bottom-status-bar/latency-status-bar.tsx b/src/common/components/bottom-status-bar/latency-status-bar.tsx
new file mode 100644
index 00000000000..42817bea6fd
--- /dev/null
+++ b/src/common/components/bottom-status-bar/latency-status-bar.tsx
@@ -0,0 +1,43 @@
+import React, { useContext, useMemo } from "react";
+import { CoreContext } from "../../core";
+import { classNameObject } from "../../helper/class-name-object";
+
+export function LatencyStatusBar() {
+  const { lastLatency, server } = useContext(CoreContext);
+
+  const status = useMemo(() => {
+    if (lastLatency < 150) {
+      return "Stable connection";
+    } else if (lastLatency !== Infinity) {
+      return "Poor connection";
+    } else {
+      return "No connection";
+    }
+  }, [lastLatency]);
+
+  return (
+    <div
+      className={classNameObject({
+        "bg-white flex leading-0 items-center gap-2 border-t text-xs font-[500] py-0.5 px-2 border-[--border-color]":
+          true,
+        "text-green-dark": status === "Stable connection",
+        "text-orange": status === "Poor connection",
+        "text-red": status === "No connection"
+      })}
+    >
+      <svg width={16} height={12} viewBox="0 0 24 16" fill="currentColor">
+        <rect width={2} height={4} x={0} y={12} />
+        <rect width={2} height={8} x={6} y={10} />
+        {lastLatency < 150 && <rect width={2} height={12} x={12} y={4} />}
+        {lastLatency < 150 && <rect width={2} height={16} x={18} />}
+      </svg>
+
+      <div className="flex items-center">
+        <span>
+          {lastLatency}ms – {status}
+        </span>
+        <div className="text-gray-600 dark:text-gray-400 pl-1">– {server}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/common/core/core-provider.tsx b/src/common/core/core-provider.tsx
new file mode 100644
index 00000000000..b077f78db0d
--- /dev/null
+++ b/src/common/core/core-provider.tsx
@@ -0,0 +1,48 @@
+import React, { createContext, PropsWithChildren, useState } from "react";
+import { Client } from "@hiveio/dhive";
+import { useFindNearHiveServer } from "./hive";
+import SERVERS from "../constants/servers.json";
+
+export const CoreContext = createContext<{
+  hiveClient: Client | undefined;
+  lastLatency: number;
+  server: string;
+  setLastLatency: (v: number) => void;
+  setFindNearHiveServer: (v: boolean) => void;
+}>({
+  lastLatency: 0,
+  server: "",
+  hiveClient: undefined,
+  setLastLatency: () => {},
+  setFindNearHiveServer: () => {}
+});
+
+export function CoreProvider(props: PropsWithChildren<unknown>) {
+  const [hiveClient, setHiveClient] = useState<Client | undefined>(undefined);
+  const [lastLatency, setLastLatency] = useState(0);
+  const [server, setServer] = useState("");
+  const [findNearHiveServer, setFindNearHiveServer] = useState(true);
+
+  useFindNearHiveServer(findNearHiveServer, (server, latency) => {
+    if (server) {
+      setServer(server);
+    }
+    setLastLatency(latency);
+    setHiveClient(
+      new Client(server ?? SERVERS, {
+        timeout: 3000,
+        failoverThreshold: 3,
+        consoleOnFailover: true
+      })
+    );
+    setFindNearHiveServer(false);
+  });
+
+  return (
+    <CoreContext.Provider
+      value={{ hiveClient, lastLatency, setFindNearHiveServer, setLastLatency, server }}
+    >
+      {props.children}
+    </CoreContext.Provider>
+  );
+}
diff --git a/src/common/core/hive/errors/index.ts b/src/common/core/hive/errors/index.ts
new file mode 100644
index 00000000000..f8a7114ec45
--- /dev/null
+++ b/src/common/core/hive/errors/index.ts
@@ -0,0 +1 @@
+export * from "./no-hive-client-error";
diff --git a/src/common/core/hive/errors/no-hive-client-error.ts b/src/common/core/hive/errors/no-hive-client-error.ts
new file mode 100644
index 00000000000..a41308795f9
--- /dev/null
+++ b/src/common/core/hive/errors/no-hive-client-error.ts
@@ -0,0 +1 @@
+export class NoHiveClientError extends Error {}
diff --git a/src/common/core/hive/find-near-hive-server.ts b/src/common/core/hive/find-near-hive-server.ts
new file mode 100644
index 00000000000..6d8fe66e4f0
--- /dev/null
+++ b/src/common/core/hive/find-near-hive-server.ts
@@ -0,0 +1,32 @@
+import SERVERS from "../../constants/servers.json";
+import { useGetRequestLatency } from "./get-request-latency";
+import useDebounce from "react-use/lib/useDebounce";
+
+export function useFindNearHiveServer(
+  isFind: boolean,
+  onFind?: (server: string | undefined, latency: number) => void
+) {
+  const { mutateAsync: getRequestLatency } = useGetRequestLatency();
+
+  useDebounce(
+    async () => {
+      if (!isFind) {
+        return;
+      }
+
+      let minLatencyServer: [string | undefined, number] = [undefined, Infinity];
+      for (const server of SERVERS) {
+        try {
+          const { latency } = await getRequestLatency(server);
+          if (latency < minLatencyServer[1]) {
+            minLatencyServer = [server, latency];
+          }
+        } catch (e) {}
+      }
+
+      onFind?.(minLatencyServer[0], minLatencyServer[1]);
+    },
+    100,
+    [isFind]
+  );
+}
diff --git a/src/common/core/hive/get-request-latency.ts b/src/common/core/hive/get-request-latency.ts
new file mode 100644
index 00000000000..d90bf958710
--- /dev/null
+++ b/src/common/core/hive/get-request-latency.ts
@@ -0,0 +1,16 @@
+import { useMutation } from "@tanstack/react-query";
+import axios from "axios";
+
+export function useGetRequestLatency() {
+  return useMutation(["hive", "ping-nearest-server"], async (url: string) => {
+    const startDate = new Date();
+    await axios.get(url);
+
+    const endDate = new Date();
+    return {
+      startDate,
+      endDate,
+      latency: endDate.getTime() - startDate.getTime() // in ms
+    };
+  });
+}
diff --git a/src/common/core/hive/hive-client-mutation.ts b/src/common/core/hive/hive-client-mutation.ts
new file mode 100644
index 00000000000..14a8d54388c
--- /dev/null
+++ b/src/common/core/hive/hive-client-mutation.ts
@@ -0,0 +1,47 @@
+import { MutationOptions, useMutation } from "@tanstack/react-query";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { useContext } from "react";
+import { CoreContext } from "../core-provider";
+import { NoHiveClientError } from "./errors";
+import { HiveResponseWithLatency } from "./types";
+import axios from "axios";
+
+export function useHiveClientMutation<DATA>(
+  api: string,
+  method: string,
+  options: MutationOptions<HiveResponseWithLatency<DATA>>
+) {
+  const { activeUser } = useMappedStore();
+  const { hiveClient, setLastLatency } = useContext(CoreContext);
+
+  return useMutation<HiveResponseWithLatency<DATA>>(
+    ["hive", activeUser?.username, api, method],
+    async (params?: any) => {
+      if (!hiveClient) {
+        throw new NoHiveClientError();
+      }
+
+      const startDate = new Date();
+      const response = await hiveClient.call(api, method, params);
+      const endDate = new Date();
+
+      return {
+        response,
+        latency: endDate.getTime() - startDate.getTime() // in ms
+      };
+    },
+    {
+      ...options,
+      onSuccess: (data, variables, context) => {
+        setLastLatency(data.latency);
+        options?.onSuccess?.(data, variables, context);
+      },
+      onError: (error, variables, context) => {
+        if (axios.isAxiosError(error) && error.code === "ECONNABORTED") {
+          setLastLatency(Infinity);
+        }
+        options?.onError?.(error, variables, context);
+      }
+    }
+  );
+}
diff --git a/src/common/core/hive/hive-client-query.ts b/src/common/core/hive/hive-client-query.ts
new file mode 100644
index 00000000000..92f39fffccc
--- /dev/null
+++ b/src/common/core/hive/hive-client-query.ts
@@ -0,0 +1,64 @@
+import { useContext, useEffect } from "react";
+import { CoreContext } from "../core-provider";
+import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { useMappedStore } from "../../store/use-mapped-store";
+import { Client } from "@hiveio/dhive";
+import { NoHiveClientError } from "./errors";
+import { HiveResponseWithLatency } from "./types";
+import axios from "axios";
+
+export function useHiveClientQuery<DATA>(
+  api: string,
+  method: string,
+  initialParams: Parameters<typeof Client.call>[2],
+  options?: UseQueryOptions<HiveResponseWithLatency<DATA>>
+) {
+  const { activeUser } = useMappedStore();
+  const { hiveClient, setLastLatency, setFindNearHiveServer } = useContext(CoreContext);
+
+  const query = useQuery<HiveResponseWithLatency<DATA>>(
+    ["hive", activeUser?.username, api, method, initialParams],
+    async () => {
+      if (!hiveClient) {
+        throw new NoHiveClientError();
+      }
+
+      const startDate = new Date();
+      const response = await hiveClient.call(api, method, initialParams);
+      const endDate = new Date();
+
+      return {
+        response,
+        latency: endDate.getTime() - startDate.getTime() // in ms
+      };
+    },
+    {
+      ...options,
+      retry: (failureCount, error) => {
+        if (failureCount <= 3) {
+          return true;
+        }
+
+        // Find new nearest server if request failed a lot of time
+        if (axios.isAxiosError(error) && error.code === "ECONNABORTED") {
+          setFindNearHiveServer(true);
+        }
+
+        return false;
+      },
+      enabled: !!hiveClient && (options?.enabled ?? true)
+    }
+  );
+
+  useEffect(() => {
+    if (query.status === "success") {
+      setLastLatency(query.data.latency);
+    } else if (query.status === "error" && axios.isAxiosError(query.error)) {
+      if (query.error.code === "ECONNABORTED") {
+        setLastLatency(Infinity);
+      }
+    }
+  }, [query.status, query.data, query.error]);
+
+  return query;
+}
diff --git a/src/common/core/hive/index.ts b/src/common/core/hive/index.ts
new file mode 100644
index 00000000000..64acd38855c
--- /dev/null
+++ b/src/common/core/hive/index.ts
@@ -0,0 +1,4 @@
+export * from "./hive-client-query";
+export * from "./get-request-latency";
+export * from "./hive-client-mutation";
+export * from "./find-near-hive-server";
diff --git a/src/common/core/hive/types/hive-response-with-latency.ts b/src/common/core/hive/types/hive-response-with-latency.ts
new file mode 100644
index 00000000000..51059510404
--- /dev/null
+++ b/src/common/core/hive/types/hive-response-with-latency.ts
@@ -0,0 +1,4 @@
+export interface HiveResponseWithLatency<T> {
+  response: T;
+  latency: number;
+}
diff --git a/src/common/core/hive/types/index.ts b/src/common/core/hive/types/index.ts
new file mode 100644
index 00000000000..43f6b92d813
--- /dev/null
+++ b/src/common/core/hive/types/index.ts
@@ -0,0 +1 @@
+export * from "./hive-response-with-latency";
diff --git a/src/common/core/index.ts b/src/common/core/index.ts
index 89e45276b5c..dd3815683da 100644
--- a/src/common/core/index.ts
+++ b/src/common/core/index.ts
@@ -1,2 +1,3 @@
 export * from "./react-query";
 export * from "./caches";
+export * from "./core-provider";
diff --git a/src/common/pages/proposals.tsx b/src/common/pages/proposals.tsx
index 81b31569401..70ad5c31b02 100644
--- a/src/common/pages/proposals.tsx
+++ b/src/common/pages/proposals.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React, { Fragment, useMemo } from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import { match } from "react-router";
@@ -8,7 +8,6 @@ import _ from "lodash";
 import defaults from "../constants/defaults.json";
 
 import { catchPostImage, renderPostBody, setProxyBase } from "@ecency/render-helper";
-import { Entry } from "../store/entries/types";
 
 import BaseComponent from "../components/base";
 import Meta from "../components/meta";
@@ -24,7 +23,7 @@ import SearchBox from "../components/search-box";
 import { _t } from "../i18n";
 import { Tsx } from "../i18n/helper";
 
-import { getAccount, getPost, getProposals, Proposal } from "../api/hive";
+import { getAccount, getPostQuery, getProposals, getProposalsQuery, Proposal } from "../api/hive";
 
 import { pageMapDispatchToProps, pageMapStateToProps, PageProps } from "./common";
 
@@ -332,111 +331,81 @@ interface DetailProps extends PageProps {
   match: match<MatchParams>;
 }
 
-interface DetailState {
-  loading: boolean;
-  proposal: Proposal | null;
-  entry: Entry | null;
-}
-
-class ProposalDetailPage extends BaseComponent<DetailProps, DetailState> {
-  state: DetailState = {
-    loading: true,
-    proposal: null,
-    entry: null
-  };
-
-  componentDidMount() {
-    this.load();
+export function ProposalDetailPage(props: DetailProps) {
+  const { data: proposalsResponse, isLoading: isProposalsLoading } = getProposalsQuery();
+
+  const proposal = useMemo(
+    () => proposalsResponse?.response.proposals.find((x) => x.id === +props.match.params.id),
+    [proposalsResponse, props.match.params]
+  );
+  const { data: getPostResponse, isLoading: isGetPostLoading } = getPostQuery(
+    proposal?.creator,
+    proposal?.permlink
+  );
+  const entry = useMemo(() => getPostResponse?.response, [getPostResponse]);
+  const isLoading = useMemo(
+    () => isProposalsLoading && isGetPostLoading,
+    [isProposalsLoading, isGetPostLoading]
+  );
+
+  if (isLoading) {
+    return (
+      <>
+        <NavBar history={props.history} />
+        <LinearProgress />
+      </>
+    );
   }
 
-  load = () => {
-    const { match } = this.props;
-    const proposalId = Number(match.params.id);
-
-    this.stateSet({ loading: true });
-    getProposals()
-      .then((proposals) => {
-        const proposal = proposals.find((x) => x.id === proposalId);
-        if (proposal) {
-          this.stateSet({ proposal });
-          return getPost(proposal.creator, proposal.permlink);
-        }
+  if (!proposal || !entry) {
+    return NotFound({ ...props });
+  }
 
-        return null;
-      })
-      .then((entry) => {
-        if (entry) {
-          this.stateSet({ entry });
-        }
-      })
-      .finally(() => {
-        this.stateSet({ loading: false });
-      });
+  const renderedBody = { __html: renderPostBody(entry.body, false, props.global.canUseWebp) };
+
+  //  Meta config
+  const metaProps = {
+    title: `${_t("proposals.page-title")} | ${proposal.subject}`,
+    description: `${proposal.subject} by @${proposal.creator}`,
+    url: `/proposals/${proposal.id}`,
+    canonical: `/proposals/${proposal.id}`,
+    published: parseDate(entry.created).toISOString(),
+    modified: parseDate(entry.updated).toISOString(),
+    image: catchPostImage(entry.body, 600, 500, props.global.canUseWebp ? "webp" : "match")
   };
 
-  render() {
-    const { global } = this.props;
-    const { loading, proposal, entry } = this.state;
-
-    if (loading) {
-      return (
-        <>
-          <NavBar history={this.props.history} />
-          <LinearProgress />
-        </>
-      );
-    }
-
-    if (!proposal || !entry) {
-      return NotFound({ ...this.props });
-    }
-
-    const renderedBody = { __html: renderPostBody(entry.body, false, global.canUseWebp) };
-
-    //  Meta config
-    const metaProps = {
-      title: `${_t("proposals.page-title")} | ${proposal.subject}`,
-      description: `${proposal.subject} by @${proposal.creator}`,
-      url: `/proposals/${proposal.id}`,
-      canonical: `/proposals/${proposal.id}`,
-      published: parseDate(entry.created).toISOString(),
-      modified: parseDate(entry.updated).toISOString(),
-      image: catchPostImage(entry.body, 600, 500, global.canUseWebp ? "webp" : "match")
-    };
-
-    return (
-      <>
-        <Meta {...metaProps} />
-        <ScrollToTop />
-        <Theme global={this.props.global} />
-        <Feedback activeUser={this.props.activeUser} />
-        <NavBar history={this.props.history} />
-        <div className="app-content proposals-page proposals-detail-page">
-          <div className="page-header mt-5">
-            <h1 className="header-title">{_t("proposals.page-title")}</h1>
-            <p className="see-all">
-              <Link to="/proposals">{_t("proposals.see-all")}</Link>
-            </p>
-          </div>
-          <div className="proposal-list">
-            <Link to="/proposals" className="btn-dismiss">
-              {closeSvg}
-            </Link>
-            {ProposalListItem({
-              ...this.props,
-              proposal
-            })}
-          </div>
-          <div className="the-entry">
-            <div
-              className="entry-body markdown-view user-selectable"
-              dangerouslySetInnerHTML={renderedBody}
-            />
-          </div>
+  return (
+    <>
+      <Meta {...metaProps} />
+      <ScrollToTop />
+      <Theme global={props.global} />
+      <Feedback activeUser={props.activeUser} />
+      <NavBar history={props.history} />
+      <div className="app-content proposals-page proposals-detail-page">
+        <div className="page-header mt-5">
+          <h1 className="header-title">{_t("proposals.page-title")}</h1>
+          <p className="see-all">
+            <Link to="/proposals">{_t("proposals.see-all")}</Link>
+          </p>
         </div>
-      </>
-    );
-  }
+        <div className="proposal-list">
+          <Link to="/proposals" className="btn-dismiss">
+            {closeSvg}
+          </Link>
+          {ProposalListItem({
+            ...props,
+            proposal
+          })}
+        </div>
+        <div className="the-entry">
+          <div
+            className="entry-body markdown-view user-selectable"
+            dangerouslySetInnerHTML={renderedBody}
+          />
+        </div>
+      </div>
+    </>
+  );
 }
 
 export const ProposalDetailContainer = connect(
diff --git a/tailwind.config.js b/tailwind.config.js
index 92cd0a49e1a..953b64dd6dd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -247,6 +247,7 @@ module.exports = {
         dark: "#081c36"
       },
       green: "#69bb85",
+      "green-dark": "#2f7948",
       "green-030": "#bcf3cf",
       "green-040": "#e3fceb",
       warning: {