diff --git a/src/lib/store.ts b/src/lib/store.ts
index a0a07992..0d30a831 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -49,7 +49,7 @@ export const shouldUpdatePriceChart = writable(<boolean>false);
 export const executiveClicked = writable(<boolean>false);
 export const secFilingsClicked = writable(<boolean>false);
 
-export const discordMembers = writable(<Number>308);
+export const discordMembers = writable(<Number>380);
 
 export const newAvatar = writable(<string>"");
 
diff --git a/src/routes/community/+page.svelte b/src/routes/community/+page.svelte
index 44c99255..bec21fa0 100644
--- a/src/routes/community/+page.svelte
+++ b/src/routes/community/+page.svelte
@@ -1,720 +1,841 @@
-<script lang='ts'>
-  
-  import { onMount,onDestroy } from 'svelte';
-  import { postVote, discordMembers, cachedPosts, goBackToPostId, numberOfUnreadNotification, postIdDeleted } from '$lib/store';
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import {
+    postVote,
+    discordMembers,
+    cachedPosts,
+    goBackToPostId,
+    numberOfUnreadNotification,
+    postIdDeleted,
+  } from "$lib/store";
 
-  import { afterNavigate } from '$app/navigation';
-  import { base } from '$app/paths'
-  import CreateNewPost from '$lib/components/CreateNewPost.svelte';
-  import PostSection from '$lib/components/PostSection.svelte';
-  import SkeletonLoading from '$lib/components/SkeletonLoading.svelte';
-	import InfiniteLoading from '$lib/components/InfiniteLoading.svelte';
-  import communityBanner from '$lib/images/community_banner.jpg';
+  import { afterNavigate } from "$app/navigation";
+  import { base } from "$app/paths";
+  import CreateNewPost from "$lib/components/CreateNewPost.svelte";
+  import PostSection from "$lib/components/PostSection.svelte";
+  import SkeletonLoading from "$lib/components/SkeletonLoading.svelte";
+  import InfiniteLoading from "$lib/components/InfiniteLoading.svelte";
+  import communityBanner from "$lib/images/community_banner.jpg";
   import * as Avatar from "$lib/components/shadcn/avatar/index.js";
 
   export let data;
   export let form;
 
-
   let discordURL = import.meta.env.VITE_DISCORD_URL;
-  
 
   let isLoaded = false;
 
-
   let moderators = data?.getModerators;
   let communityStats = data?.getCommunityStats;
-  let discordData = data?.getDiscordWidget
+  let discordData = data?.getDiscordWidget;
   let posts = null;
-  
 
+  let currentPage = 1;
+  let postLoading = false;
+  let seenPostId = [];
 
-let currentPage = 1;
-let postLoading = false;
-let seenPostId = [];
+  let noPostMore = false;
 
-let noPostMore = false;
+  async function infiniteHandler({ detail: { loaded, complete } }) {
+    // console.log("Page position:", window.pageYOffset);
+    seenPostId = posts?.map((obj) => obj?.id);
 
+    if (!postLoading && !noPostMore) {
+      postLoading = true;
 
+      const newPosts = await getPost();
+      if (newPosts.length === 0) {
+        noPostMore = true;
+        complete();
+      } else {
+        // Remove new posts with duplicate IDs
+        const filteredNewPosts = newPosts.filter(
+          (newPost) => !posts.find((post) => post.id === newPost.id),
+        );
+        posts = [...posts, ...filteredNewPosts];
+        currentPage++;
+        loaded();
+      }
+      postLoading = false;
+    }
+  }
 
-async function infiniteHandler({ detail: { loaded, complete } }) 
-{
+  async function getPost() {
+    let postData;
 
-  // console.log("Page position:", window.pageYOffset);
-  seenPostId = posts?.map(obj => obj?.id);
-
-  if (!postLoading && !noPostMore) {
-    postLoading = true;
-
-    const newPosts = await getPost();
-    if (newPosts.length === 0) {
-      noPostMore = true;
-      complete();
+    if (Object?.keys($cachedPosts)?.length === 0) {
+      postData = {
+        //userId: data?.user.id,
+        startPage: currentPage,
+        seenPostId: seenPostId.length === 0 ? [] : seenPostId,
+        sortingPosts: sortingPosts,
+      };
     } else {
-      // Remove new posts with duplicate IDs
-      const filteredNewPosts = newPosts.filter((newPost) => !posts.find((post) => post.id === newPost.id));
-      posts = [...posts, ...filteredNewPosts];
-      currentPage++;
-      loaded();
-    }
-    postLoading = false;
-  }
-
-}
-
-
-
-
-async function getPost() {
- 
-  let postData;
-
-  if (Object?.keys($cachedPosts)?.length === 0)
-  {
-    postData = {
-      //userId: data?.user.id,
-      startPage: currentPage,
-      seenPostId: seenPostId.length === 0 ? [] : seenPostId,
-      sortingPosts: sortingPosts,
-    };
-  }
-  else
-  {
-    postData = {
-      //userId: data?.user.id,
-      startPage: $cachedPosts?.currentPage,
-      seenPostId: $cachedPosts?.seenPostId.length === 0 ? [] :  $cachedPosts?.seenPostId,
-      sortingPosts: sortingPosts,
-    };
-  }
-
-  // Make the POST request to the endpoint
-  const response = await fetch('/api/get-post', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify(postData),
-  });
-
-
-  const output = await response.json();
-
-  return output?.items
-}
-
-
-
-let LoginPopup;
-let BottomNavigation;
-
-onMount(async () => {
-  if (Object?.keys($cachedPosts)?.length === 0) {
-    // Only make API requests if cached posts are not available
-    [posts] = await Promise.all([
-      getPost(),
-      //getTickerMentioning(),
-    ]);
-  }
-
-  else {
-    // Use cached data if available
-    posts = $cachedPosts?.posts;
-  }
-
-  if(!data?.user)
-    {
-      LoginPopup = (await import('$lib/components/LoginPopup.svelte')).default;
+      postData = {
+        //userId: data?.user.id,
+        startPage: $cachedPosts?.currentPage,
+        seenPostId:
+          $cachedPosts?.seenPostId.length === 0 ? [] : $cachedPosts?.seenPostId,
+        sortingPosts: sortingPosts,
+      };
     }
 
-    BottomNavigation = (await import('$lib/components/BottomNavigation.svelte')).default;
+    // Make the POST request to the endpoint
+    const response = await fetch("/api/get-post", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(postData),
+    });
+
+    const output = await response.json();
+
+    return output?.items;
+  }
+
+  let LoginPopup;
+  let BottomNavigation;
+
+  onMount(async () => {
+    if (Object?.keys($cachedPosts)?.length === 0) {
+      // Only make API requests if cached posts are not available
+      [posts] = await Promise.all([
+        getPost(),
+        //getTickerMentioning(),
+      ]);
+    } else {
+      // Use cached data if available
+      posts = $cachedPosts?.posts;
+    }
+
+    if (!data?.user) {
+      LoginPopup = (await import("$lib/components/LoginPopup.svelte")).default;
+    }
+
+    BottomNavigation = (await import("$lib/components/BottomNavigation.svelte"))
+      .default;
 
     isLoaded = true;
-
-});
-
-
-onDestroy(async () => {
-    $postIdDeleted ='';
-    $postVote = {};
-    $goBackToPostId = '';
   });
 
+  onDestroy(async () => {
+    $postIdDeleted = "";
+    $postVote = {};
+    $goBackToPostId = "";
+  });
 
+  let sortingPosts =
+    $cachedPosts?.sortingPosts?.length > 0 ? $cachedPosts?.sortingPosts : "hot";
 
+  async function handleCategoryOfPosts(state) {
+    isLoaded = false;
+    posts = [];
+    currentPage = 1;
+    postLoading = false;
+    seenPostId = [];
+    noPostMore = false;
 
-let sortingPosts = $cachedPosts?.sortingPosts?.length > 0 ? $cachedPosts?.sortingPosts : 'hot';
+    sortingPosts = state;
+    $cachedPosts = {};
+    posts = await getPost();
+    isLoaded = true;
+  }
 
-async function handleCategoryOfPosts(state) {
-  isLoaded = false;
-  posts = [];
-  currentPage = 1;
-  postLoading = false;
-  seenPostId = [];
-  noPostMore = false;
+  let goBackToPosition = false;
 
-  sortingPosts = state;
-  $cachedPosts = {};
-  posts = await getPost();
-  isLoaded = true;
-}
+  let previousPage: string = base;
 
+  afterNavigate(({ from }) => {
+    previousPage = from?.url.pathname || previousPage;
 
-
-let goBackToPosition = false;
-
-
-
-let previousPage : string = base ;
-
-afterNavigate(({from}) => {
-   previousPage = from?.url.pathname || previousPage
-
-   if (previousPage.startsWith('/community/post'))
-    {
-        goBackToPosition = true;
+    if (previousPage.startsWith("/community/post")) {
+      goBackToPosition = true;
     }
-    
+  });
 
-}) 
+  // Function to update the vote
+  function updateVote(posts, postVote) {
+    const { id, upvote, downvote, upvoteClicked, downvoteClicked } = postVote;
 
-// Function to update the vote
-function updateVote(posts, postVote) {
-  const { id, upvote, downvote, upvoteClicked, downvoteClicked } = postVote;
-  
-  // Find the post by ID
-  const post = posts?.find(post => post?.id === id);
+    // Find the post by ID
+    const post = posts?.find((post) => post?.id === id);
 
-  if (post) {
+    if (post) {
       post.upvote = upvote;
       post.downvote = downvote;
-    // Check if expand['alreadyVoted(post)'] exists
-  if (post?.expand['alreadyVoted(post)'] && post?.expand['alreadyVoted(post)']?.length > 0) {
-    // Find the vote entry for the current user, if it exists
-    const userVote = post?.expand['alreadyVoted(post)']?.find(vote => vote.user === data?.user?.id);
+      // Check if expand['alreadyVoted(post)'] exists
+      if (
+        post?.expand["alreadyVoted(post)"] &&
+        post?.expand["alreadyVoted(post)"]?.length > 0
+      ) {
+        // Find the vote entry for the current user, if it exists
+        const userVote = post?.expand["alreadyVoted(post)"]?.find(
+          (vote) => vote.user === data?.user?.id,
+        );
 
-    if (userVote) {
-      // Update the existing vote for the user
-      userVote.type = upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral';
+        if (userVote) {
+          // Update the existing vote for the user
+          userVote.type = upvoteClicked
+            ? "upvote"
+            : downvoteClicked
+              ? "downvote"
+              : "neutral";
+        } else {
+          // If no vote entry for the user, add a new one
+          post.expand["alreadyVoted(post)"]?.push({
+            type: upvoteClicked
+              ? "upvote"
+              : downvoteClicked
+                ? "downvote"
+                : "neutral",
+            user: data?.user?.id,
+          });
+        }
+      } else {
+        // Create the structure if it does not exist
+        post.expand["alreadyVoted(post)"] = [
+          {
+            type: upvoteClicked
+              ? "upvote"
+              : downvoteClicked
+                ? "downvote"
+                : "neutral",
+            user: data?.user?.id,
+          },
+        ];
+      }
     } else {
-      // If no vote entry for the user, add a new one
-      post.expand['alreadyVoted(post)']?.push({
-        type: upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral',
-        user: data?.user?.id
-      });
+      console.log("Post not found.");
     }
-  } else {
-    // Create the structure if it does not exist
-    post.expand['alreadyVoted(post)'] = [{
-      type: upvoteClicked ? 'upvote' : downvoteClicked ? 'downvote' : 'neutral',
-      user: data?.user?.id
-    }];
+    return posts;
   }
 
-  } else {
-    console.log("Post not found.");
-  }
-  return posts
-}
-
-$: {
-  if($postIdDeleted.length !== 0)
-  {
-    posts = posts?.filter(item => item?.id !== $postIdDeleted);
-
+  $: {
+    if ($postIdDeleted.length !== 0) {
+      posts = posts?.filter((item) => item?.id !== $postIdDeleted);
+    }
   }
 
-}
-
-
-
-$: {
-  if($postVote && Object?.keys($postVote).length !== 0 && data?.user?.id)
-  {
-    //Update in realtime the already downloaded posts list when user votes
-    posts = updateVote(posts, $postVote)
-    //console.log(posts?.at(0))
-    $postVote = {};
-
+  $: {
+    if ($postVote && Object?.keys($postVote).length !== 0 && data?.user?.id) {
+      //Update in realtime the already downloaded posts list when user votes
+      posts = updateVote(posts, $postVote);
+      //console.log(posts?.at(0))
+      $postVote = {};
+    }
   }
 
-}
-
-
-
-$: {
-  if(posts)
-  {
-    $cachedPosts = {"sortingPosts": sortingPosts,'currentPage': currentPage, 'seenPostId': seenPostId, 'posts': posts};
+  $: {
+    if (posts) {
+      $cachedPosts = {
+        sortingPosts: sortingPosts,
+        currentPage: currentPage,
+        seenPostId: seenPostId,
+        posts: posts,
+      };
+    }
   }
-}
-
 
   // Reactive statement to check and scroll to the target post
-$: if ($goBackToPostId?.length !== 0 && $cachedPosts?.posts?.length !== 0&& typeof window !== 'undefined') {
-    const postExists = $cachedPosts?.posts?.find(post => post?.id === $goBackToPostId);
+  $: if (
+    $goBackToPostId?.length !== 0 &&
+    $cachedPosts?.posts?.length !== 0 &&
+    typeof window !== "undefined"
+  ) {
+    const postExists = $cachedPosts?.posts?.find(
+      (post) => post?.id === $goBackToPostId,
+    );
     isLoaded = false;
     if (postExists) {
       scrollToPost($goBackToPostId);
-      $goBackToPostId = '';
+      $goBackToPostId = "";
     }
     isLoaded = true;
   }
 
-function scrollToPost(postId) {
-  // Add a small delay to ensure DOM is updated
-  setTimeout(() => {
-    const targetDiv = document.getElementById(`post-${postId}`);
-    if (targetDiv) {
-       targetDiv.scrollIntoView(true);
-    }
-  }, 0);
-}
-
-
-
+  function scrollToPost(postId) {
+    // Add a small delay to ensure DOM is updated
+    setTimeout(() => {
+      const targetDiv = document.getElementById(`post-${postId}`);
+      if (targetDiv) {
+        targetDiv.scrollIntoView(true);
+      }
+    }, 0);
+  }
 </script>
 
-
-
 <svelte:head>
-  <title> {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ''} A community for discussion, insights, news and memes about financial markets. · stocknear</title>
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} A
+    community for discussion, insights, news and memes about financial markets. ·
+    stocknear</title
+  >
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width" />
 
-  <meta name="description" content="A community for discussion, insights, news and memes about financial markets.">
+  <meta
+    name="description"
+    content="A community for discussion, insights, news and memes about financial markets."
+  />
   <!-- Other meta tags -->
-  <meta property="og:title" content="A community for discussion, insights, news and memes about financial markets. · stocknear"/>
-  <meta property="og:description" content="A community for discussion, insights, news and memes about financial markets.">
-  <meta property="og:type" content="website"/>
+  <meta
+    property="og:title"
+    content="A community for discussion, insights, news and memes about financial markets. · stocknear"
+  />
+  <meta
+    property="og:description"
+    content="A community for discussion, insights, news and memes about financial markets."
+  />
+  <meta property="og:type" content="website" />
   <!-- Add more Open Graph meta tags as needed -->
 
   <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image"/>
-  <meta name="twitter:title" content="A community for discussion, insights, news and memes about financial markets. · stocknear"/>
-  <meta name="twitter:description" content="A community for discussion, insights, news and memes about financial markets.">
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content="A community for discussion, insights, news and memes about financial markets. · stocknear"
+  />
+  <meta
+    name="twitter:description"
+    content="A community for discussion, insights, news and memes about financial markets."
+  />
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
-    
 
 <body class="bg-[#09090B] sm:mt-5 max-w-3xl sm:max-w-screen-2xl">
+  <!-- Page wrapper -->
+  <div
+    class="max-w-screen-xl flex flex-col min-h-screen overflow-hidden pl-0 lg:pl-20 m-auto w-full supports-[overflow:clip]:overflow-clip pb-40"
+  >
+    <main class="m-auto w-full">
+      <!--Start Header-->
+      <div
+        class="w-full sm:rounded-lg m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat"
+        style="background-image: url('{communityBanner}');"
+      />
+      <!--End Header-->
 
+      <!-- Page content -->
+      <section>
+        <div class="w-full">
+          <div class="sm:flex sm:justify-start w-full">
+            <!-- Main content -->
+            <div class="sm:pt-6 pb-12 w-full">
+              <div class="lg:pr-5">
+                <!--<CreateNewPost />-->
+                <div class={isLoaded ? "hidden" : ""}>
+                  {#each Array(5) as _}
+                    <SkeletonLoading />
+                  {/each}
+                </div>
+                {#if posts !== null}
+                  <div class="">
+                    <CreateNewPost data={data?.user} />
+                  </div>
 
-    <!-- Page wrapper -->
-    <div class="max-w-screen-xl flex flex-col min-h-screen overflow-hidden pl-0 lg:pl-20 m-auto w-full supports-[overflow:clip]:overflow-clip pb-40">
+                  <!--Start choose Hot or New Posts-->
+                  <!-- List container -->
+                  <div class="flex flex-col mt-4">
+                    <!-- Item -->
+                    <div
+                      class="border-t border-b sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#141417] rounded-[4px] sm:rounded-[8px]"
+                    >
+                      <div class="flex h-14 justify-start items-center">
+                        <div class="flex flex-row ml-3">
+                          <label
+                            on:click={() => handleCategoryOfPosts("hot")}
+                            class="flex flex-row w-fit pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#323232] {sortingPosts ===
+                            'hot'
+                              ? 'bg-[#323232] text-white'
+                              : 'text-gray-300'} rounded-full cursor-pointer"
+                          >
+                            <svg
+                              class="w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill={sortingPosts === "hot"
+                                  ? "red"
+                                  : "#737487"}
+                                d="M17.66 11.2c-.23-.3-.51-.56-.77-.82c-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32c-2.59 2.08-3.61 5.75-2.39 8.9c.04.1.08.2.08.33c0 .22-.15.42-.35.5c-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5c.14.6.41 1.2.71 1.73c1.08 1.73 2.95 2.97 4.96 3.22c2.14.27 4.43-.12 6.07-1.6c1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6c-1.12.4-2.24-.16-2.9-.82c1.19-.28 1.9-1.16 2.11-2.05c.17-.8-.15-1.46-.28-2.23c-.12-.74-.1-1.37.17-2.06c.19.38.39.76.63 1.06c.77 1 1.98 1.44 2.24 2.8c.04.14.06.28.06.43c.03.82-.33 1.72-.93 2.27Z"
+                              /></svg
+                            >
+                            <p class="ml-1 font-bold text-sm sm:text-[1rem]">
+                              Hot
+                            </p>
+                          </label>
 
+                          <label
+                            on:click={() => handleCategoryOfPosts("new")}
+                            class="flex flex-row w-fit ml-3 pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#323232] {sortingPosts ===
+                            'new'
+                              ? 'bg-[#323232] text-white'
+                              : 'text-gray-300'} rounded-full cursor-pointer"
+                          >
+                            <svg
+                              class="w-5 h-5 sm:w-6 sm:h-6 inline-block"
+                              viewBox="0 0 24 24"
+                              fill="none"
+                              xmlns="http://www.w3.org/2000/svg"
+                              ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+                                id="SVGRepo_tracerCarrier"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              ></g><g id="SVGRepo_iconCarrier">
+                                <path
+                                  d="M15.3895 5.21125L16.7995 8.03125C16.9895 8.42125 17.4995 8.79125 17.9295 8.87125L20.4795 9.29125C22.1095 9.56125 22.4895 10.7413 21.3195 11.9213L19.3295 13.9113C18.9995 14.2413 18.8095 14.8913 18.9195 15.3613L19.4895 17.8213C19.9395 19.7613 18.8995 20.5213 17.1895 19.5013L14.7995 18.0813C14.3695 17.8213 13.6495 17.8213 13.2195 18.0813L10.8295 19.5013C9.11945 20.5113 8.07945 19.7613 8.52945 17.8213L9.09945 15.3613C9.18945 14.8813 8.99945 14.2313 8.66945 13.9013L6.67945 11.9113C5.50945 10.7413 5.88945 9.56125 7.51945 9.28125L10.0695 8.86125C10.4995 8.79125 11.0095 8.41125 11.1995 8.02125L12.6095 5.20125C13.3795 3.68125 14.6195 3.68125 15.3895 5.21125Z"
+                                  fill={sortingPosts === "new"
+                                    ? "#D6B329"
+                                    : "#737487"}
+                                ></path>
+                                <path
+                                  d="M8 5.75H2C1.59 5.75 1.25 5.41 1.25 5C1.25 4.59 1.59 4.25 2 4.25H8C8.41 4.25 8.75 4.59 8.75 5C8.75 5.41 8.41 5.75 8 5.75Z"
+                                  fill={sortingPosts === "new"
+                                    ? "#D6B329"
+                                    : "#737487"}
+                                ></path>
+                                <path
+                                  d="M5 19.75H2C1.59 19.75 1.25 19.41 1.25 19C1.25 18.59 1.59 18.25 2 18.25H5C5.41 18.25 5.75 18.59 5.75 19C5.75 19.41 5.41 19.75 5 19.75Z"
+                                  fill={sortingPosts === "new"
+                                    ? "#D6B329"
+                                    : "#737487"}
+                                ></path>
+                                <path
+                                  d="M3 12.75H2C1.59 12.75 1.25 12.41 1.25 12C1.25 11.59 1.59 11.25 2 11.25H3C3.41 11.25 3.75 11.59 3.75 12C3.75 12.41 3.41 12.75 3 12.75Z"
+                                  fill={sortingPosts === "new"
+                                    ? "#D6B329"
+                                    : "#737487"}
+                                ></path>
+                              </g></svg
+                            >
+                            <p class="ml-1 font-bold text-sm sm:text-[1rem]">
+                              New
+                            </p>
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <!--End choose Hot or New Posts-->
 
+                  {#if isLoaded}
+                    {#each posts as post}
+                      <div class="flex items-start w-full">
+                        <div id="post-{post.id}" class="w-full m-auto">
+                          <PostSection {data} posts={post} {moderators} />
+                        </div>
+                      </div>
+                    {/each}
 
-        <main class="m-auto w-full">
+                    <InfiniteLoading on:infinite={infiniteHandler} />
+                  {/if}
 
-          <!--Start Header-->
-          <div class="w-full sm:rounded-lg m-auto h-44 sm:h-60 shadow-sm shadow-black bg-center bg-cover bg-no-repeat" style="background-image: url('{communityBanner}');" />
-          <!--End Header-->
+                  {#if postLoading && !noPostMore && data?.user}
+                    <SkeletonLoading />
+                  {:else if noPostMore}
+                    <div
+                      class=" mt-10 flex flex-col justify-center items-center text-lg sm:text-xl font-bold text-gray-400 mb-20 m-auto"
+                    >
+                      We reached the bottom brother
+                      <p class="mt-2 text-md text-gray-400 font-medium">
+                        Share your insight with others
+                      </p>
 
+                      <div
+                        class="tooltip tooltip-bottom mt-2 break-all"
+                        data-tip="Create a Post"
+                      >
+                        {#if !data?.user}
+                          <label
+                            for="userLogin"
+                            class="flex rounded-full w-fit h-fit cursor-pointer"
+                          >
+                            <svg
+                              class="m-auto mt-1 w-10 h-10"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="#78818E"
+                                d="M11 13v3q0 .425.288.713T12 17q.425 0 .713-.288T13 16v-3h3q.425 0 .713-.288T17 12q0-.425-.288-.713T16 11h-3V8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8v3H8q-.425 0-.713.288T7 12q0 .425.288.713T8 13h3Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"
+                              /></svg
+                            >
+                          </label>
+                        {:else}
+                          <a
+                            href="/community/create-post/"
+                            class="flex rounded-full w-fit h-fit"
+                          >
+                            <svg
+                              class="m-auto mt-1 w-10 h-10"
+                              xmlns="http://www.w3.org/2000/svg"
+                              viewBox="0 0 24 24"
+                              ><path
+                                fill="#78818E"
+                                d="M11 13v3q0 .425.288.713T12 17q.425 0 .713-.288T13 16v-3h3q.425 0 .713-.288T17 12q0-.425-.288-.713T16 11h-3V8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8v3H8q-.425 0-.713.288T7 12q0 .425.288.713T8 13h3Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"
+                              /></svg
+                            >
+                          </a>
+                        {/if}
+                      </div>
+                    </div>
+                  {/if}
+                {/if}
+              </div>
+            </div>
 
+            <!-- Sidebar -->
+            <aside
+              class="hidden lg:inline-block h-sh lg:w-1/2 pt-[1.5rem] pr-0 lg:pr-2 xl:pr-0"
+            >
+              {#if isLoaded}
+                <!-- Sidebar content -->
+                <div class="lg:pl-2 z-20 h-full">
+                  <!-- Sidebar content -->
 
-  
+                  <!--Start About Community -->
+                  <div class="space-y-3 mb-5">
+                    <div
+                      class="rounded-t-lg bg-[#141417] border border-gray-800 h-auto sm:w-96"
+                    >
+                      <!--Start Header-->
+                      <div class="bg-[#141417] w-full p-3 rounded-t-lg">
+                        <span class="text-white text-xl ml-1 font-semibold">
+                          About Community
+                        </span>
+                      </div>
+                      <!--End Header-->
+                      <!--Start Content-->
+                      <div class="w-full p-4 -mt-2 text-white">
+                        A community for discussion, insights, news and memes
+                        about financial markets.
+                      </div>
+                      <!--End Content-->
 
-            <!-- Page content -->
-            <section>
-                <div class="w-full">
-                    <div class="sm:flex sm:justify-start w-full">
-
-                        <!-- Main content -->
-                        <div class="sm:pt-6 pb-12 w-full">
-                            <div class="lg:pr-5">
-                                <!--<CreateNewPost />-->
-                                <div class="{isLoaded ? 'hidden' : ''}">
-                                  {#each Array(5) as _}
-                                    <SkeletonLoading />
-                                  {/each}
-                                </div>
-                                {#if posts !== null}
-                              
-                                <div class="">
-                                  <CreateNewPost data={data?.user} />
-                                </div>
-
-                                 <!--Start choose Hot or New Posts-->
-                                  <!-- List container -->                  
-                                  <div class="flex flex-col mt-4">
-                                    <!-- Item -->
-                                    <div class="border-t border-b sm:border border-gray-700 sm:hover:border-gray-600 rounded-none sm:rounded-md bg-[#141417] rounded-[4px] sm:rounded-[8px]">
-                                      <div class="flex h-14 justify-start items-center">                                           
-                                        <div class="flex flex-row ml-3">
-                                          <label on:click={() => handleCategoryOfPosts('hot')} class="flex flex-row w-fit pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#323232] {sortingPosts === 'hot' ? 'bg-[#323232] text-white' : 'text-gray-300'} rounded-full cursor-pointer">
-                                            <svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="{sortingPosts === 'hot' ? 'red' : '#737487'}" d="M17.66 11.2c-.23-.3-.51-.56-.77-.82c-.67-.6-1.43-1.03-2.07-1.66C13.33 7.26 13 4.85 13.95 3c-.95.23-1.78.75-2.49 1.32c-2.59 2.08-3.61 5.75-2.39 8.9c.04.1.08.2.08.33c0 .22-.15.42-.35.5c-.23.1-.47.04-.66-.12a.58.58 0 0 1-.14-.17c-1.13-1.43-1.31-3.48-.55-5.12C5.78 10 4.87 12.3 5 14.47c.06.5.12 1 .29 1.5c.14.6.41 1.2.71 1.73c1.08 1.73 2.95 2.97 4.96 3.22c2.14.27 4.43-.12 6.07-1.6c1.83-1.66 2.47-4.32 1.53-6.6l-.13-.26c-.21-.46-.77-1.26-.77-1.26m-3.16 6.3c-.28.24-.74.5-1.1.6c-1.12.4-2.24-.16-2.9-.82c1.19-.28 1.9-1.16 2.11-2.05c.17-.8-.15-1.46-.28-2.23c-.12-.74-.1-1.37.17-2.06c.19.38.39.76.63 1.06c.77 1 1.98 1.44 2.24 2.8c.04.14.06.28.06.43c.03.82-.33 1.72-.93 2.27Z"/></svg>
-                                            <p class="ml-1 font-bold text-sm sm:text-[1rem]">Hot</p>
-                                          </label>
-        
-                                          <label on:click={() => handleCategoryOfPosts('new')} class="flex flex-row w-fit ml-3 pl-3 pr-4 pt-1 pb-1 tab mr-2 font-medium transition duration-150 ease-out hover:ease-in rounded-full hover:bg-[#323232] {sortingPosts === 'new' ? 'bg-[#323232] text-white' : 'text-gray-300'} rounded-full cursor-pointer">
-                                            <svg class="w-5 h-5 sm:w-6 sm:h-6 inline-block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M15.3895 5.21125L16.7995 8.03125C16.9895 8.42125 17.4995 8.79125 17.9295 8.87125L20.4795 9.29125C22.1095 9.56125 22.4895 10.7413 21.3195 11.9213L19.3295 13.9113C18.9995 14.2413 18.8095 14.8913 18.9195 15.3613L19.4895 17.8213C19.9395 19.7613 18.8995 20.5213 17.1895 19.5013L14.7995 18.0813C14.3695 17.8213 13.6495 17.8213 13.2195 18.0813L10.8295 19.5013C9.11945 20.5113 8.07945 19.7613 8.52945 17.8213L9.09945 15.3613C9.18945 14.8813 8.99945 14.2313 8.66945 13.9013L6.67945 11.9113C5.50945 10.7413 5.88945 9.56125 7.51945 9.28125L10.0695 8.86125C10.4995 8.79125 11.0095 8.41125 11.1995 8.02125L12.6095 5.20125C13.3795 3.68125 14.6195 3.68125 15.3895 5.21125Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> <path d="M8 5.75H2C1.59 5.75 1.25 5.41 1.25 5C1.25 4.59 1.59 4.25 2 4.25H8C8.41 4.25 8.75 4.59 8.75 5C8.75 5.41 8.41 5.75 8 5.75Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> <path d="M5 19.75H2C1.59 19.75 1.25 19.41 1.25 19C1.25 18.59 1.59 18.25 2 18.25H5C5.41 18.25 5.75 18.59 5.75 19C5.75 19.41 5.41 19.75 5 19.75Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> <path d="M3 12.75H2C1.59 12.75 1.25 12.41 1.25 12C1.25 11.59 1.59 11.25 2 11.25H3C3.41 11.25 3.75 11.59 3.75 12C3.75 12.41 3.41 12.75 3 12.75Z" fill={sortingPosts === 'new' ? '#D6B329' : '#737487'}></path> </g></svg>
-                                            <p class="ml-1 font-bold text-sm sm:text-[1rem]">New</p>
-                                          </label>
-      
-                                        </div>
-                                      </div>
-                                    </div>
-                                    
-                                </div>
-                              <!--End choose Hot or New Posts-->
-
-                               {#if isLoaded}
-                        
-                                {#each posts as post}
-                                
-                                <div class="flex items-start w-full">
-                                    <div id="post-{post.id}" class="w-full m-auto">
-                                      <PostSection 
-                                        data={data}
-                                        posts= {post}
-                                        moderators={moderators}
-                                      />
-                                    </div>
-                                  </div>
-
-                                 {/each}
-                                 
-
-                                 <InfiniteLoading on:infinite={infiniteHandler} />
-                                {/if}
-
-                        
-                                {#if postLoading && !noPostMore && data?.user}
-                                  <SkeletonLoading />
-                                  {:else if noPostMore}
-                                  <div class=" mt-10 flex flex-col justify-center items-center text-lg sm:text-xl font-bold text-gray-400 mb-20 m-auto">
-                                    We reached the bottom brother
-                                    <p class="mt-2 text-md text-gray-400 font-medium">Share your insight with others</p>
-  
-                                    <div class="tooltip tooltip-bottom mt-2 break-all" data-tip="Create a Post">
-                                      {#if !data?.user}
-                                      <label for="userLogin" class="flex rounded-full w-fit h-fit cursor-pointer">
-                                        <svg class="m-auto mt-1 w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#78818E" d="M11 13v3q0 .425.288.713T12 17q.425 0 .713-.288T13 16v-3h3q.425 0 .713-.288T17 12q0-.425-.288-.713T16 11h-3V8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8v3H8q-.425 0-.713.288T7 12q0 .425.288.713T8 13h3Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
-                                      </label>
-                                      {:else}
-                                      <a href="/community/create-post/" class="flex rounded-full w-fit h-fit">
-                                        <svg class="m-auto mt-1 w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#78818E" d="M11 13v3q0 .425.288.713T12 17q.425 0 .713-.288T13 16v-3h3q.425 0 .713-.288T17 12q0-.425-.288-.713T16 11h-3V8q0-.425-.288-.713T12 7q-.425 0-.713.288T11 8v3H8q-.425 0-.713.288T7 12q0 .425.288.713T8 13h3Zm1 9q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Z"/></svg>
-                                      </a>
-                                      {/if}
-                                    </div>
-  
-                                    </div>
-                                {/if}
-                              
-                                {/if}
-                            </div>
+                      <div
+                        class="mt-4 mb-4 border-t border-slate-700 w-11/12 m-auto"
+                      />
+                      <!--Start Content-->
+                      <div
+                        class="w-full pl-5 pt-2 pb-2 flex flex-row items-center"
+                      >
+                        <div class="flex flex-col">
+                          <span class="text-white font-bold text-lg">
+                            {communityStats?.totalUsers}
+                          </span>
+                          <span
+                            class="text-white text-opacity-[0.7] text-[1rem"
+                          >
+                            Members
+                          </span>
+                        </div>
+                        <div class="flex flex-col ml-12">
+                          <span class="text-white font-bold text-lg">
+                            {communityStats?.totalPosts}
+                          </span>
+                          <span
+                            class="text-white text-opacity-[0.7] text-[1rem"
+                          >
+                            Posts
+                          </span>
                         </div>
 
-                        <!-- Sidebar -->
-                        <aside class="hidden lg:inline-block h-sh lg:w-1/2 pt-[1.5rem] pr-0 lg:pr-2 xl:pr-0">
+                        <div class="flex flex-col ml-12">
+                          <span class="text-white font-bold text-lg">
+                            {communityStats?.totalComments}
+                          </span>
+                          <span
+                            class="text-white text-opacity-[0.7] text-[1rem"
+                          >
+                            Comments
+                          </span>
+                        </div>
+                      </div>
+                      <!--End Content-->
 
-                          {#if isLoaded}
-                          
-                           <!-- Sidebar content -->
-                            <div class="lg:pl-2 z-20 h-full">
-                        
-                                <!-- Sidebar content -->
+                      <div
+                        class="mt-4 border-t border-slate-700 w-11/12 m-auto"
+                      />
 
+                      <div class="flex justify-center items-center mb-8 pt-5">
+                        <a
+                          href="/community/create-post"
+                          class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100"
+                        >
+                          Create Post
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                  <!--End About Community -->
 
-                                 <!--Start About Community -->
-                                 <div class="space-y-3 mb-5">  
-                                  <div class="rounded-t-lg bg-[#141417] border border-gray-800 h-auto sm:w-96">
-                                    <!--Start Header-->
-                                    <div class="bg-[#141417] w-full p-3 rounded-t-lg">
-                                      <span class="text-white text-xl ml-1 font-semibold">
-                                        About Community
-                                      </span>
-                                    </div>
-                                  <!--End Header-->
-                                    <!--Start Content-->
-                                    <div class="w-full p-4 -mt-2 text-white">
-                                      A community for discussion, insights, news and memes about financial markets. 
-                                    </div>
-                                    <!--End Content-->
+                  <!--Start Discord -->
+                  {#if discordData?.length !== 0}
+                    <div class="space-y-3 mb-5">
+                      <div
+                        class="bg-[#141417] border border-gray-800 h-auto sm:w-96 rounded-lg"
+                      >
+                        <!--Start Image-->
+                        <div class="flex flex-row items-center w-full p-3">
+                          <svg
+                            class="w-12 mt-3 ml-2 inline-block"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                            ><path
+                              fill="white"
+                              d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"
+                            /></svg
+                          >
+                          <div
+                            class="flex justify-center items-center text-2xl font-medium ml-3 mt-3"
+                          >
+                            <span
+                              class="self-center text-2xl text-white font-bold whitespace-nowrap"
+                            >
+                              Official Discord
+                            </span>
+                          </div>
+                        </div>
+                        <!--End Image-->
+                        <!--Start Content-->
+                        <div class="w-full p-4 text-white">
+                          Join our official Discord community to connect with me
+                          and fellow members. Let's chat, share ideas, and grow
+                          together!
+                        </div>
+                        <!--End Content-->
 
-                                    <div class="mt-4 mb-4 border-t border-slate-700 w-11/12 m-auto" />
-                                    <!--Start Content-->
-                                    <div class="w-full pl-5 pt-2 pb-2 flex flex-row items-center">
-                                      <div class="flex flex-col">
-                                        <span class="text-white font-bold text-lg">
-                                          {communityStats?.totalUsers}
-                                        </span>
-                                        <span class="text-white text-opacity-[0.7] text-[1rem">
-                                          Members
-                                        </span>
-                                      </div>
-                                      <div class="flex flex-col ml-12">
-                                        <span class="text-white font-bold text-lg">
-                                          {communityStats?.totalPosts}
-                                        </span>
-                                        <span class="text-white text-opacity-[0.7] text-[1rem">
-                                          Posts
-                                        </span>
-                                      </div>
-
-                                      <div class="flex flex-col ml-12">
-                                        <span class="text-white font-bold text-lg">
-                                          {communityStats?.totalComments}
-                                        </span>
-                                        <span class="text-white text-opacity-[0.7] text-[1rem">
-                                          Comments
-                                        </span>
-                                      </div>
-
-                                    </div>
-                                    <!--End Content-->
-
-                                    <div class="mt-4 border-t border-slate-700 w-11/12 m-auto" />
-
-                                    <div class="flex justify-center items-center mb-8 pt-5">
-                                      <a href="/community/create-post" class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100">
-                                        Create Post
-                                      </a>
-                                    </div>
-
-
-                                  </div>
-                                </div>
-                              <!--End About Community -->
-
-
-                              <!--Start Discord -->
-                              {#if discordData?.length !== 0}
-                                <div class="space-y-3 mb-5">  
-                                  <div class="bg-[#141417] border border-gray-800 h-auto sm:w-96 rounded-lg">
-
-                                  <!--Start Image-->
-                                  <div class="flex flex-row items-center w-full p-3">
-                                    <svg class="w-12 mt-3 ml-2 inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/></svg>
-                                    <div class="flex justify-center items-center text-2xl font-medium ml-3 mt-3">
-                                      <span class="self-center text-2xl text-white font-bold whitespace-nowrap">
-                                        Official Discord
-                                      </span>
-                                    </div>
-                                  </div>
-                                  <!--End Image-->
-                                    <!--Start Content-->
-                                    <div class="w-full p-4 text-white">
-                                      Daily discussions on our open source project.
-                                    </div>
-                                    <!--End Content-->
-
-                                    <div class="mt-4 mb-4 border-t border-slate-700 w-11/12 m-auto" />
-                                    <!--Start Content-->
-                                    <div class="w-full pl-5 pt-2 pb-2 flex flex-row items-center">
-                                      <div class="flex flex-col">
-                                        <span class="text-white font-bold text-lg">
-                                          {$discordMembers}
-                                        </span>
-                                        <span class="text-white text-opacity-[0.7] text-[1rem">
-                                          Members
-                                        </span>
-                                      </div>
-                                      <div class="flex flex-col ml-12">
-                                        <div class="flex flex-row items-center text-white font-bold text-lg">
-                                          <div class="mr-1 inline-block w-3.5 h-3.5 sm:w-4 sm:h-4 bg-[#75D377] border border-2 border-slate-800 rounded-full" />
-                                          {discordData?.members?.length}
-                                        </div>
-                                        <span class="text-white text-opacity-[0.7] text-[1rem">
-                                          Online
-                                        </span>
-                                      </div>
-
-                                        <div class="ml-12 avatar-group -space-x-6 rtl:space-x-reverse">
-                                          {#each discordData?.members?.slice(0,5) as item, index}
-                                            {#if index < 4}
-                                            <Avatar.Root>
-                                            <Avatar.Image src={item['avatar_url']}  />
-                                            <Avatar.Fallback>CN</Avatar.Fallback>
-                                          </Avatar.Root>
-                                          {/if}
-                                            {#if index >=4}
-                                            <Avatar.Root class="bg-neutral relative">
-                                            <div class="w-8 h-8 flex-shrink-0 text-sm text-center text-white flex items-center justify-center">
-                                              <span class="absolute transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2">+{discordData?.members?.length - 4}</span>
-                                            </div>
-                                          </Avatar.Root>
-                                            {/if}
-                                          {/each}
-                                        </div>
-                                      </div>
-
-                                    <!--End Content-->
-
-                                    <div class="mt-4 border-t border-slate-700 w-11/12 m-auto" />
-
-                                    <div class="flex justify-center items-center mb-8 pt-5">
-                                      <a href={discordURL} rel="noopener noreferrer" target="_blank" class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100">
-                                        Join Us
-                                      </a>
-                                    </div>
-
-
-                                  </div>
+                        <div
+                          class="mt-4 mb-4 border-t border-slate-700 w-11/12 m-auto"
+                        />
+                        <!--Start Content-->
+                        <div
+                          class="w-full pl-5 pt-2 pb-2 flex flex-row items-center"
+                        >
+                          <div class="flex flex-col">
+                            <span class="text-white font-bold text-lg">
+                              {$discordMembers}
+                            </span>
+                            <span
+                              class="text-white text-opacity-[0.7] text-[1rem"
+                            >
+                              Members
+                            </span>
+                          </div>
+                          <div class="flex flex-col ml-12">
+                            <div
+                              class="flex flex-row items-center text-white font-bold text-lg"
+                            >
+                              <div
+                                class="mr-1 inline-block w-3.5 h-3.5 sm:w-4 sm:h-4 bg-[#75D377] border border-2 border-slate-800 rounded-full"
+                              />
+                              {discordData?.members?.length}
                             </div>
-                                {/if}
+                            <span
+                              class="text-white text-opacity-[0.7] text-[1rem"
+                            >
+                              Online
+                            </span>
+                          </div>
 
-                              <!--End Discord -->
-
-
-                               <!--Community Rules-->
-                               <div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">  
-                                <div class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg">
-                                  <!--Start Header-->
-                                  <div class="bg-[#141417] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg">
-                                    <span class="text-white text-xl ml-1 font-semibold">
-                                      Community Rules
-                                    </span>
+                          <div
+                            class="ml-12 avatar-group -space-x-6 rtl:space-x-reverse"
+                          >
+                            {#each discordData?.members?.slice(0, 5) as item, index}
+                              {#if index < 4}
+                                <Avatar.Root>
+                                  <Avatar.Image src={item["avatar_url"]} />
+                                  <Avatar.Fallback>CN</Avatar.Fallback>
+                                </Avatar.Root>
+                              {/if}
+                              {#if index >= 4}
+                                <Avatar.Root class="bg-neutral relative">
+                                  <div
+                                    class="w-8 h-8 flex-shrink-0 text-sm text-center text-white flex items-center justify-center"
+                                  >
+                                    <span
+                                      class="absolute transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2"
+                                      >+{discordData?.members?.length - 4}</span
+                                    >
                                   </div>
-                                <!--End Header-->
+                                </Avatar.Root>
+                              {/if}
+                            {/each}
+                          </div>
+                        </div>
 
-                                  <!--Start Content-->
-                                  <div class="w-full pl-7 text-gray-300">
-                                    <ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
-                                      <li class="text-[1rem] mb-3">
-                                        Avoid Purely Policital Discussion
-                                      </li>
-                                      <li class="text-[1rem] mb-3">
-                                        No violence or gory contents
-                                      </li>
-                                      <li class="text-[1rem] mb-3">
-                                        No Advertisement, Self-Promotion, Fundraising, or Begging
-                                      </li>
-                                      <li class="text-[1rem]">
-                                        No illegal activities
-                                      </li>
-                                    </ol>
-                                    
-                                  </div>
-                                  <!--End Content-->
+                        <!--End Content-->
 
-                                  </div>
+                        <div
+                          class="mt-4 border-t border-slate-700 w-11/12 m-auto"
+                        />
 
-                                  <div class="flex flex-col items-start ml-4 mt-4">
-                                    <div class="flex flex-row gap-x-3">
-                                      <a href="/about" class="text-sm text-gray-400 hover:text-gray-300 hover:underline">
-                                        About
-                                      </a>
-                                      <a href="/terms-of-use" class="text-sm text-gray-400 hover:text-gray-300 hover:underline">
-                                        Terms
-                                      </a>
-                                      <a href="/privacy-policy" class="text-sm text-gray-400 hover:text-gray-300 hover:underline">
-                                        Privacy
-                                      </a>
-                                      <a href="/contact" class="text-sm text-gray-400 hover:text-gray-300 hover:underline">
-                                        Contact
-                                      </a>
-                                      <a href="/imprint" class="text-sm text-gray-400 hover:text-gray-300 hover:underline">
-                                        Imprint
-                                      </a>
-                              
-                                    </div>
-      
-                                    <span class="text-sm text-gray-400  mt-1.5">
-                                      © 2024 stocknear
-                                    </span>
-      
-                                  </div>
+                        <div class="flex justify-center items-center mb-8 pt-5">
+                          <a
+                            href={discordURL}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            class="rounded-lg cursor-pointer w-11/12 py-2 h-full mt-2 text-md text-center font-semibold text-white m-auto hover:bg-purple-700 bg-purple-600 mb-6 duration-100"
+                          >
+                            Join Us
+                          </a>
+                        </div>
+                      </div>
+                    </div>
+                  {/if}
 
+                  <!--End Discord -->
 
-                                </div>
-                              <!--End Community Rules-->
-                            
-                            
-                            </div>
-                            {/if}
-
-                        </aside>
+                  <!--Community Rules-->
+                  <div class="space-y-3 mt-5 fixed sticky" style="top: 5rem;">
+                    <div
+                      class="bg-[#141417] border border-gray-800 sm:w-96 rounded-lg"
+                    >
+                      <!--Start Header-->
+                      <div
+                        class="bg-[#141417] border-b border-slate-700 w-full pl-6 pr-6 pt-6 pb-4 rounded-t-lg"
+                      >
+                        <span class="text-white text-xl ml-1 font-semibold">
+                          Community Rules
+                        </span>
+                      </div>
+                      <!--End Header-->
 
+                      <!--Start Content-->
+                      <div class="w-full pl-7 text-gray-300">
+                        <ol class="list-decimal pl-4 pr-4 pb-5 pt-4">
+                          <li class="text-[1rem] mb-3">
+                            Avoid Purely Policital Discussion
+                          </li>
+                          <li class="text-[1rem] mb-3">
+                            No violence or gory contents
+                          </li>
+                          <li class="text-[1rem] mb-3">
+                            No Advertisement, Self-Promotion, Fundraising, or
+                            Begging
+                          </li>
+                          <li class="text-[1rem]">No illegal activities</li>
+                        </ol>
+                      </div>
+                      <!--End Content-->
                     </div>
 
+                    <div class="flex flex-col items-start ml-4 mt-4">
+                      <div class="flex flex-row gap-x-3">
+                        <a
+                          href="/about"
+                          class="text-sm text-gray-400 hover:text-gray-300 hover:underline"
+                        >
+                          About
+                        </a>
+                        <a
+                          href="/terms-of-use"
+                          class="text-sm text-gray-400 hover:text-gray-300 hover:underline"
+                        >
+                          Terms
+                        </a>
+                        <a
+                          href="/privacy-policy"
+                          class="text-sm text-gray-400 hover:text-gray-300 hover:underline"
+                        >
+                          Privacy
+                        </a>
+                        <a
+                          href="/contact"
+                          class="text-sm text-gray-400 hover:text-gray-300 hover:underline"
+                        >
+                          Contact
+                        </a>
+                        <a
+                          href="/imprint"
+                          class="text-sm text-gray-400 hover:text-gray-300 hover:underline"
+                        >
+                          Imprint
+                        </a>
+                      </div>
+
+                      <span class="text-sm text-gray-400 mt-1.5">
+                        © 2024 stocknear
+                      </span>
+                    </div>
+                  </div>
+                  <!--End Community Rules-->
                 </div>
-            </section>
+              {/if}
+            </aside>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
 
-        </main>
-       
-    </div>
-
-
-
-
-<!--
+  <!--
 {#if BottomNavigation}
     <BottomNavigation data={data} />
 {/if}
 -->
 
-<!--Start Login Modal-->
-{#if LoginPopup}
-   <LoginPopup form={form}/>    
-{/if}
-<!--End Login Modal-->
-
-
-
-
-
+  <!--Start Login Modal-->
+  {#if LoginPopup}
+    <LoginPopup {form} />
+  {/if}
+  <!--End Login Modal-->
 </body>
 
-
-
 <style>
-  
+  .pageTransitionOut {
+    view-transition-name: pageTransitionOut;
+  }
 
-.pageTransitionOut {
-  view-transition-name: pageTransitionOut;
-}
-
-@keyframes fade-in {
+  @keyframes fade-in {
     from {
-        opacity: 1;
+      opacity: 1;
     }
   }
-  
+
   @keyframes fade-out {
     to {
-        opacity: 1;
+      opacity: 1;
     }
   }
-  
+
   @keyframes slide-from-right {
     from {
-        transform: translateX(500px);
+      transform: translateX(500px);
     }
   }
-  
+
   @keyframes slide-to-left {
     to {
-        transform: translateX(-200px);
+      transform: translateX(-200px);
     }
   }
-  
+
   :root::view-transition-old(root) {
-    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 230ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+    animation:
+      180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+      230ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
   }
-  
+
   :root::view-transition-new(root) {
-    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 180ms both fade-in, 230ms cubic-bezier(0.4, 0, 0.2, 1) both
-            slide-from-right;
+    animation:
+      210ms cubic-bezier(0, 0, 0.2, 1) 180ms both fade-in,
+      230ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
   }
 
   @media (prefers-reduced-motion: no-preference) {
-	:root::view-transition-old(root) {
-		animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 300ms cubic-bezier(0.4, 0, 0.2, 1) both
-				slide-to-left;
-	}
+    :root::view-transition-old(root) {
+      animation:
+        180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
+        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
+    }
 
-	:root::view-transition-new(root) {
-		animation: 210ms cubic-bezier(0, 0, 0.2, 1) 180ms both fade-in, 300ms cubic-bezier(
-					0.4,
-					0,
-					0.2,
-					1
-				) both slide-from-right;
-	}
-}
-  
+    :root::view-transition-new(root) {
+      animation:
+        210ms cubic-bezier(0, 0, 0.2, 1) 180ms both fade-in,
+        300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
+    }
+  }
 
   .vote-counter {
     transition: transform 0.3s ease-out;
@@ -724,26 +845,34 @@ function scrollToPost(postId) {
     transform: translateY(-20px);
   }
 
-
   .grid-background {
-    background: linear-gradient(to bottom, #404040, #14284B);
+    background: linear-gradient(to bottom, #404040, #14284b);
     width: 24rem;
     position: relative;
-}
+  }
 
-.grid-background::before {
-  content: "";
-  position: absolute;
-  border-radius: 10%;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: 
-    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 40px),
-    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0.15) 1px, transparent 1px, transparent 40px);
-  background-size: 20px 100% 100% 20px; /* Adjust the grid spacing as needed */
-}
-
-
-</style>
\ No newline at end of file
+  .grid-background::before {
+    content: "";
+    position: absolute;
+    border-radius: 10%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: repeating-linear-gradient(
+        to bottom,
+        rgba(255, 255, 255, 0.15) 0,
+        rgba(255, 255, 255, 0.15) 1px,
+        transparent 1px,
+        transparent 40px
+      ),
+      repeating-linear-gradient(
+        to right,
+        rgba(255, 255, 255, 0.15) 0,
+        rgba(255, 255, 255, 0.15) 1px,
+        transparent 1px,
+        transparent 40px
+      );
+    background-size: 20px 100% 100% 20px; /* Adjust the grid spacing as needed */
+  }
+</style>
diff --git a/src/routes/donation/+page.svelte b/src/routes/donation/+page.svelte
index 48816b0f..edba5750 100644
--- a/src/routes/donation/+page.svelte
+++ b/src/routes/donation/+page.svelte
@@ -149,7 +149,7 @@ let cloudFrontUrl = import.meta.env.VITE_IMAGE_URL;
                 Become a sponsor to stocknear
             </h2>
             <p class="text-white mb-5 text-[1rem]">
-               If you believe in our mission and want to support us beyond your Pro Subscription, consider buying me a coffee through Ko-fi. Every contribution, no matter the size, makes a significant impact on our ability to serve you and the retail investor community. 
+               If you believe in our mission and want to support us beyond your Pro Subscription, please support us via GitHub Sponsors. Every contribution, no matter the size, makes a significant impact on our ability to serve you and the retail investor community. 
                 <br>
                 <br>
                 <a href="https://github.com/sponsors/stocknear" rel="noopener noreferrer" target="_blank" class="text-blue-400 sm:hover:text-white">Sponsor us here</a>