diff --git a/apps/forum/src/components/App.tsx b/apps/forum/src/components/App.tsx
index 19aec956c..36718aad2 100644
--- a/apps/forum/src/components/App.tsx
+++ b/apps/forum/src/components/App.tsx
@@ -85,7 +85,7 @@ const InnerApp = () => {
               <Route element={<Thread />} path="forum/:boardSlug/:threadUuid" />
             </Routes>
           </div>
-          <div className="flex flex-col md:w-1/5 ">
+          <div className="flex flex-col sm:w-1/5 ">
             <div className="hidden md:h-[500px] md:w-[250px] justify-self-end">
               <h1></h1>
             </div>
diff --git a/apps/forum/src/components/Board.tsx b/apps/forum/src/components/Board.tsx
index f00092082..b5eb03dc8 100644
--- a/apps/forum/src/components/Board.tsx
+++ b/apps/forum/src/components/Board.tsx
@@ -9,6 +9,7 @@ import { API } from "@aws-amplify/api";
 import Thread from "@app/types/thread";
 import { getUserAttr } from "wasedatime-ui";
 import ThreadType from "@app/types/thread";
+import InfiniteScroll from "react-infinite-scroll-component";
 
 const Board = ({ triggerRefresh, setBoard }: any) => {
   const [currentTags, setCurrentTags] = useRecoilState(currentTagsState);
@@ -18,8 +19,8 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
   const [index, setIndex] = useState(0);
   const [hasMoreItems, setHasMoreItems] = useState(true);
   const [tags, setTags] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const scrollableElementRef = useRef(null);
   const indexRef = useRef(index);
   const currentSchoolsRef = useRef(currentSchools);
   const { boardSlug } = useParams();
@@ -27,67 +28,35 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
     boards.find((board) => board.slug === boardSlug)?.slug || ""
   );
 
+  // Use Effect to set the board state in the parent component for tag filtering
   useEffect(() => {
     setBoard(boardSlug);
   }, [boardSlug]);
 
-  // useEffect #1 to initially fetch data when user first comes into forums
-  useEffect(() => {
-    const handleScroll = () => {
-      // mountedRef.current = true;
-      const element = scrollableElementRef.current;
-      const currentIdx = indexRef.current;
-      const selectedSchools = currentSchoolsRef.current;
-
-      if (element) {
-        const scrollHeight = (element as HTMLElement).scrollHeight;
-        const scrollTop = (element as HTMLElement).scrollTop;
-        const clientHeight = (element as HTMLElement).clientHeight;
-
-        // Reached the bottom of the scrollable element
-        if (
-          scrollTop > 0 &&
-          scrollHeight - scrollTop === clientHeight &&
-          hasMoreItems
-        ) {
-          getThreads(boardId, currentIdx, 10, selectedSchools, tags);
-        }
-      }
-    };
-
-    const element = scrollableElementRef.current;
-    if (element) {
-      (element as HTMLElement).addEventListener("scroll", handleScroll);
-    }
-
-    // Cleanup
-    return () => {
-      if (element) {
-        (element as HTMLElement).removeEventListener("scroll", handleScroll);
-      }
-    };
-  }, [boardId, tags]);
-
-  //useEffect #3 to fetch and filter results by school
+  // Use Effect for initial fetch
   useEffect(() => {
     var currentBoardId =
       boards.find((board) => board.slug === boardSlug)?.slug || "";
     setBoardThreads([]);
     indexRef.current = 0;
     setBoardId(currentBoardId);
-    getThreads(currentBoardId, 0, 10, currentSchools, tags);
+    getThreads(currentBoardId, 0, 10, currentSchools, currentTags);
     currentSchoolsRef.current = currentSchools;
     setHasMoreItems(true);
-  }, [boardSlug, currentSchools, triggerRefresh, tags]);
+  }, [boardSlug, currentSchools, triggerRefresh]);
 
+  // UseEffect to reset selected tags when board changes or user triggers a refresh
   useEffect(() => {
     setCurrentTags([]);
   }, [boardSlug, triggerRefresh]);
 
-  useEffect(() => {
-    if (tags.length > 0 || currentTags.length > 0) setTags(currentTags);
-  }, [currentTags]);
+  // UseEffect to set tags when global recoil state current tags changes. may need optimization.
+  // As of Sept 13th, 2023, tag search is disabled
+  // useEffect(() => {
+  //   if (tags.length > 0 || currentTags.length > 0) setTags(currentTags);
+  // }, [currentTags]);
 
+  // function to fetch threads
   const getThreads = async (
     boardId: string | "",
     index: number,
@@ -95,52 +64,60 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
     school: string[],
     tags: string[]
   ) => {
+    setIsLoading(true); // Set loading to true at the beginning of your fetch operation
     let userId = userToken;
-    if (userId.length == 0) {
-      const userAttr = await getUserAttr();
-      if (userAttr) {
-        userId = userAttr.id;
-        setUserToken(userId);
-      } else {
-        userId = "";
-        setUserToken(userId);
-      }
-    }
 
-    const apiPath = boardId
-      ? `/forum?uid=${userId}&index=${index}&num=${threadCount}&school=${school}&tags=${tags}&board_id=${boardId}`
-      : `/forum?uid=${userId}&index=${index}&num=${threadCount}&school=${school}&tags=${tags}`;
-
-    API.get("wasedatime-dev", apiPath, {
-      headers: {
-        "Content-Type": "application/json",
-      },
-      response: true,
-    })
-      .then((res) => {
-        var threads =
-          res.data.data && boardId
-            ? res.data.data.filter(
-                (thread: Thread) => thread.board_id === boardId
-              )
-            : res.data.data;
-        setBoardThreads((prevBoardThreads = []) => [
-          ...prevBoardThreads,
-          ...(Array.isArray(threads) ? threads : []),
-        ]);
-
-        const endIndex: number = res.data.message;
-
-        if (threads && (threads.length < threadCount || threads.length === 0)) {
-          setHasMoreItems(false);
+    try {
+      if (userId.length === 0) {
+        const userAttr = await getUserAttr();
+        if (userAttr) {
+          userId = userAttr.id;
+          setUserToken(userId);
+        } else {
+          userId = "";
+          setUserToken(userId);
         }
+      }
 
-        const newIndex = endIndex;
-        indexRef.current = newIndex;
-      })
-      .catch((e) => {
-        console.error(e);
+      const apiPath = boardId
+        ? // if board id exists, the db query has better efficiency
+          `/forum?uid=${userId}&index=${index}&num=${threadCount}&school=${school}&tags=${tags}&board_id=${boardId}`
+        : // else, the db will not query but scan which has bad efficiency
+          `/forum?uid=${userId}&index=${index}&num=${threadCount}&school=${school}&tags=${tags}`;
+
+      const res = await API.get("wasedatime-dev", apiPath, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        response: true,
       });
+
+      var threads =
+        res.data.data && boardId
+          ? res.data.data.filter(
+              (thread: Thread) => thread.board_id === boardId
+            )
+          : res.data.data;
+
+      setBoardThreads((prevBoardThreads = []) => [
+        ...prevBoardThreads,
+        ...(Array.isArray(threads) ? threads : []),
+      ]);
+
+      // the last index of the array is the index of the last item in the db
+      const endIndex: number = res.data.message;
+
+      if (threads && (threads.length < threadCount || threads.length === 0)) {
+        setHasMoreItems(false);
+      }
+
+      const newIndex = endIndex;
+      indexRef.current = newIndex;
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setIsLoading(false); // Set loading to false at the end of your fetch operation, regardless of its outcome
+    }
   };
 
   const handleNewThread = (newThread: ThreadType) => {
@@ -155,22 +132,41 @@ const Board = ({ triggerRefresh, setBoard }: any) => {
   };
 
   return (
-    <div className="max-w-2/5 w-5/6 mx-auto h-full">
+    // <div className="max-w-2/5 w-5/6 mx-auto h-full">
+    <div className="mx-auto rounded-xl shadow-lg px-2 h-full lg:w-5/6 max-w-[5/6] standard-style">
       <CreateThread onNewThread={handleNewThread} />
       <div
-        className="overflow-auto h-[calc(100%-44px)] mt-5"
+        className="overflow-auto h-[calc(100%-44px)] mt-4 md:mt-8 lg:mt-12"
         id="scrollableDiv"
-        ref={scrollableElementRef}
       >
-        {boardThreads.map((thread, i) => (
-          <ThreadBlock
-            key={i}
-            isPreview={true}
-            thread={thread}
-            fromRoot={boardId === ""}
-            onDelete={handleDeleteThread}
-          />
-        ))}
+        <InfiniteScroll
+          dataLength={boardThreads.length}
+          next={() => {
+            if (!isLoading && hasMoreItems) {
+              getThreads(
+                boardId,
+                indexRef.current,
+                10,
+                currentSchoolsRef.current,
+                tags
+              );
+            }
+          }}
+          hasMore={hasMoreItems}
+          scrollableTarget="scrollableDiv"
+          loader={<h4>Loading...</h4>}
+          style={{ overflowY: "hidden" }}
+        >
+          {boardThreads.map((thread, i) => (
+            <ThreadBlock
+              key={i}
+              isPreview={true}
+              thread={thread}
+              fromRoot={boardId === ""}
+              onDelete={handleDeleteThread}
+            />
+          ))}
+        </InfiniteScroll>
       </div>
     </div>
   );
diff --git a/apps/forum/src/components/BoardMenu.tsx b/apps/forum/src/components/BoardMenu.tsx
index a8095d413..afa78a660 100644
--- a/apps/forum/src/components/BoardMenu.tsx
+++ b/apps/forum/src/components/BoardMenu.tsx
@@ -6,15 +6,17 @@ const BoardMenu = () => {
   return (
     <div className="pl-2 md:pl-4 lg:pl-10">
       <h1 className="form-item-title">Topics</h1>
-      <div className="flex flex-col sm:text-lg text-sm text-light-text1 text-light-text1 dark:text-dark-text1">
+      <div className="flex flex-col sm:text-xl text-sm text-light-text1 text-light-text1 dark:text-dark-text1">
         {boards.map((board, i) => (
           <div
             key={i}
             className=" py-1 md:py-4 flex hover:text-light-main hover:text-dark-main"
           >
             {/* <span className="text-left list-inside list-disc">•</span> */}
-            <div className="text-left cursor-pointer border p-2 rounded-lg ">
-              <Link to={`forum/${board.slug}`}>{board.title}</Link>
+            <div className="text-left cursor-pointer border p-2 rounded-lg gap-2">
+              <Link to={`forum/${board.slug}`} className="text-xl lg:text-2xl">
+                {board.title}
+              </Link>
             </div>
           </div>
         ))}
diff --git a/apps/forum/src/components/Comment.tsx b/apps/forum/src/components/Comment.tsx
index 3c7b2dec6..79190800f 100644
--- a/apps/forum/src/components/Comment.tsx
+++ b/apps/forum/src/components/Comment.tsx
@@ -11,6 +11,38 @@ type Props = {
   comment: CommentType;
 };
 
+const convertUrlsToLinks = (text: string) => {
+  if (!text) return null;
+
+  const urlRegex = /https?:\/\/[^\s]+/g;
+  const parts = text.split(urlRegex);
+  const matches = text.match(urlRegex);
+
+  return (
+    <div>
+      {parts.map((part, index) => (
+        <React.Fragment key={index}>
+          {part && (
+            <span className="text-light-text1 dark:text-dark-text1 text-2xl p-2">
+              {part}
+            </span>
+          )}
+          {matches && matches[index] && (
+            <a
+              href={matches[index]}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-600 text-2xl p-2"
+            >
+              {matches[index]}
+            </a>
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
 const Comment = ({ comment }: Props) => {
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 
@@ -53,27 +85,27 @@ const Comment = ({ comment }: Props) => {
 
   return (
     <Block actions={actions}>
-      <div className="border-2 rounded-xl px-4 py-2 text-light-text2 mt-4 standard-style">
-        <div className="flex justify-between">
-          <h2 className="text-xs my-auto">{comment.created_at}</h2>
-          {comment.mod === true && (
-            <div>
-              <button onClick={confirmDeleteThread}>
-                <DeleteIcon fontSize="large" color="error" />
-              </button>
-              {deleteModalOpen && (
-                <ConfirmModal
-                  questionText="Are you sure to delete this comment?"
-                  confirmText="Yes, delete it"
-                  cancelText="No, keep it"
-                  confirmAction={deleteComment}
-                  cancelAction={() => setDeleteModalOpen(false)}
-                />
-              )}
-            </div>
-          )}
+      <div className="border-2 rounded-xl px-4 py-2 text-light-text2 mt-4 standard-style flex flex-row justify-between items-center">
+        <div>
+          <h2 className="text-2xl p-2">{convertUrlsToLinks(comment.body)}</h2>
+          <h2 className="text-xs my-auto"></h2>
         </div>
-        <p className="text-sm">{comment.body}</p>
+        {comment.mod === true && (
+          <div className="justify-end">
+            <button onClick={confirmDeleteThread}>
+              <DeleteIcon fontSize="large" color="error" />
+            </button>
+            {deleteModalOpen && (
+              <ConfirmModal
+                questionText="Are you sure to delete this comment?"
+                confirmText="Yes, delete it"
+                cancelText="No, keep it"
+                confirmAction={deleteComment}
+                cancelAction={() => setDeleteModalOpen(false)}
+              />
+            )}
+          </div>
+        )}
       </div>
     </Block>
   );
diff --git a/apps/forum/src/components/CommentForm.tsx b/apps/forum/src/components/CommentForm.tsx
index 0ab54f23f..c9ec0bf59 100644
--- a/apps/forum/src/components/CommentForm.tsx
+++ b/apps/forum/src/components/CommentForm.tsx
@@ -70,7 +70,7 @@ const CommentForm: React.FC<CommentFormProps> = ({ onNewComment }) => {
   return (
     <div className="flex justify-between">
       <input
-        className="text-sm text-light-text3 w-full focus:text-light-text1 focus:ring border-2 mt-4 mb-2 rounded-lg px-4 py-2 standard-style"
+        className="text-2xl text-light-text3 dark:text-dark-text1 w-full focus:text-light-text1 focus:ring border-2 mt-4 mb-2 rounded-lg px-4 py-2 standard-style"
         placeholder="Write your comment here (no more than 200 character)"
         value={comment}
         onChange={handleTextChange}
diff --git a/apps/forum/src/components/CreateThread.tsx b/apps/forum/src/components/CreateThread.tsx
index 169db0521..aff3f5318 100644
--- a/apps/forum/src/components/CreateThread.tsx
+++ b/apps/forum/src/components/CreateThread.tsx
@@ -146,7 +146,6 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
       );
 
       const newThread: ThreadType = response.data;
-      console.log(newThread);
       onNewThread(newThread);
 
       setTitleContent("");
@@ -172,7 +171,7 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
     return slug ? null : (
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button className="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 standard-style-hover">
+          <Menu.Button className="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-2xl font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 standard-style-hover">
             {/* Current Board */}
             {slug
               ? getTitleBySlug(slug)
@@ -202,7 +201,7 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
                         active
                           ? "bg-light-bgSide text-light-text2"
                           : "text-light-text2",
-                        "block w-full px-4 py-2 text-left text-sm standard-style-hover"
+                        "block w-full px-4 py-2 text-left text-3xl standard-style-hover"
                       )}
                       onClick={() => setSelectedBoard(board.slug)}
                     >
@@ -230,7 +229,7 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
         /> */}
         <textarea
           placeholder={`Anything interesting?`}
-          className=" h-36 pl-2 pb-28 pt-2 w-full hover:outline-0 focus:outline-0 standard-style "
+          className=" h-50 pl-2 pb-28 pt-2 w-full hover:outline-0 focus:outline-0 standard-style text-3xl overflow-y-hidden"
           value={textContent}
           onChange={handleBodyChange}
         />
@@ -304,7 +303,7 @@ const CreateThread = ({ onNewThread }: CreateThreadProps) => {
           </button>
         </div>
         <button
-          className="border-light-main border mx-4 px-4 py-1 rounded-lg text-white bg-light-lighter hover:bg-light-darker"
+          className="border-light-main border mx-4 px-4 py-1 rounded-lg text-white bg-light-lighter hover:bg-light-darker text-3xl"
           onClick={handleSubmit}
         >
           Post
diff --git a/apps/forum/src/components/FilterMenu.tsx b/apps/forum/src/components/FilterMenu.tsx
index e907d4456..ef563053c 100644
--- a/apps/forum/src/components/FilterMenu.tsx
+++ b/apps/forum/src/components/FilterMenu.tsx
@@ -16,7 +16,7 @@ const FilterMenu = () => {
           className="w-full p-2 bg-light-main text-white rounded-lg my-1"
           onClick={toggleSchoolFilter}
         >
-          Select a School
+          Select School
         </button>
         {openSchoolModal && (
           <SchoolFilterForm
diff --git a/apps/forum/src/components/Thread.tsx b/apps/forum/src/components/Thread.tsx
index 8c3934ef7..a582ef784 100644
--- a/apps/forum/src/components/Thread.tsx
+++ b/apps/forum/src/components/Thread.tsx
@@ -70,7 +70,7 @@ const Thread = () => {
   };
 
   return (
-    <div className="border-2 mt-12 mx-16 rounded-xl shadow-lg pb-6 h-fit px-4 standard-style">
+    <div className="border-2 mt-12 mx-auto rounded-xl shadow-lg py-6 h-fit px-4 standard-style max-w-2/5 w-5/6">
       {/* <CreateThread /> */}
       <ThreadBlock isPreview={false} thread={thread} />
       <CommentForm onNewComment={handleNewComment} />
diff --git a/apps/forum/src/components/ThreadBlock.tsx b/apps/forum/src/components/ThreadBlock.tsx
index 9578acfed..369c08d1c 100644
--- a/apps/forum/src/components/ThreadBlock.tsx
+++ b/apps/forum/src/components/ThreadBlock.tsx
@@ -9,16 +9,18 @@ import getSchoolIconPath from "@app/utils/get-school-icon-path";
 import { Favorite, Share, Visibility } from "@mui/icons-material";
 import TextsmsIcon from "@mui/icons-material/Textsms";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import boards from "@app/constants/boards.json";
+import ThreadType from "@app/types/thread";
 
 type Props = {
   isPreview: boolean;
-  thread: any;
+  thread: ThreadType;
   fromRoot?: boolean;
   text?: string;
   onDelete?: (threadId: string) => void;
 };
 
-const convertUrlsToLinks = ({ isPreview, text }: Props) => {
+const convertUrlsToLinks = (isPreview: boolean, text: string) => {
   if (!text) return null;
 
   const urlRegex = /https?:\/\/[^\s]+/g;
@@ -30,23 +32,27 @@ const convertUrlsToLinks = ({ isPreview, text }: Props) => {
       {parts.map((part, index) => (
         <React.Fragment key={index}>
           {part && (
-            <span className="text-light-text1 dark:text-dark-text1">
+            <span
+              className={
+                isPreview
+                  ? "text-light-text1 dark:text-dark-text1 text-3xl"
+                  : "text-light-text1 dark:text-dark-text1 text-3xl select-text cursor-text"
+              }
+            >
               {part}
             </span>
           )}
           {matches &&
             matches[index] &&
             (isPreview ? (
-              <h3 className="text-blue-600">{matches[index]}</h3>
+              <span className="text-blue-600">{matches[index]}</span>
             ) : (
-              <a
-                href={matches[index]}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-blue-600"
+              <span
+                className="text-blue-600 text-2xl cursor-pointer"
+                onClick={() => window.open(matches[index], "_blank")}
               >
                 {matches[index]}
-              </a>
+              </span>
             ))}
         </React.Fragment>
       ))}
@@ -169,134 +175,139 @@ const ThreadBlock = ({ isPreview, fromRoot, thread, onDelete }: Props) => {
     );
   };
 
+  const getTitleBySlug = (inputSlug: string) => {
+    const result = boards.find((board) => board.slug === inputSlug);
+    return result ? result.title : "Error";
+  };
+
   const navigate = useNavigate();
 
-  return (
-    <Block actions={actions}>
-      <Link
-        to={
+  const renderContent = () => {
+    return (
+      <div
+        className={
           isPreview
-            ? fromRoot
-              ? `${thread.board_id}/${thread.thread_id}`
-              : `${thread.thread_id}`
-            : ""
+            ? `border-2 mb-10 mr-4 rounded-xl shadow-lg p-6 standard-style-hover max-w-[290px] lg:max-w-[900px]`
+            : `cursor-default bg-light-card1 standard-style`
         }
       >
-        <div
-          className={
-            isPreview
-              ? `border-2 mb-10 mr-4 rounded-xl shadow-lg p-6 standard-style-hover`
-              : `cursor-default bg-light-card1 standard-style`
-          }
-        >
-          {!isPreview && (
-            <div
-              onClick={() => navigate(-1)}
-              className="text-xs mt-2 cursor-pointer text-light-text1 dark:text-dark-text1 hover:text-light-text2 dark:hover:text-dark-text2 w-fit"
-            >
-              <ArrowBackIcon fontSize="large" />
-            </div>
-          )}
-          {/* ^ This line goes to parent board on click while in thread */}
-          <div className={`px-2`}>
-            <div className="flex justify-between mt-2">
-              <h1 className="text-2xl mb-auto text-light-main dark:text-dark-main">
-                {thread.board_id}
-              </h1>
-              <div className="flex justify-center flex-col items-center">
-                {/* ToDo: create component for tag within Thread Block */}
-                {thread.group_id && (
-                  <img
-                    src={getSchoolIconPath(thread.group_id, "en")}
-                    width={40}
-                    height={40}
-                  />
-                )}
-
-                {/* ToDO: There is no author for now will add later on */}
-                {/* <h2 className="text-sm text-light-text2 my-auto">
-                  {thread.author}
-                </h2> */}
-                {/* editModalOpen && (
-                  <EditThreadForm
-                    originalTitle={thread.title}
-                    originalBody={thread.body}
-                    updateThread={updateThread}
-                    closeForm={() => setEditModalOpen(false)}
-                  />
-                ) */}
-              </div>
-            </div>
-            <h2
-              className="justify-left pt-4 text-light-text1 dark:text-dark-text1"
-              style={{ whiteSpace: "pre-line" }}
-            >
-              {convertUrlsToLinks({
-                isPreview,
-                text: thread.body,
-                thread: thread,
-              })}
-            </h2>
+        {!isPreview && (
+          <div
+            onClick={() => navigate(-1)}
+            className="mt-2 cursor-pointer text-light-text1 dark:text-dark-text1 hover:text-light-text2 dark:hover:text-dark-text2 w-fit"
+          >
+            <ArrowBackIcon fontSize="large" />
           </div>
-          {/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
-            {" "}
-            {`# ${thread.tag_id}`}
-          </div> */}
-          <hr className="mx-2 pt-2 mt-6" />
-          <div className="flex flex-row justify-evenly pt-2 items-center">
-            <div className="flex flex-row">
-              <button onClick={handleLike} className="clipboard-icon group">
-                <Favorite
-                  fontSize="small"
-                  color={userLiked ? "error" : undefined}
+        )}
+        {/* ^ This line goes to parent board on click while in thread */}
+        <div className={`px-2`}>
+          <div className="flex justify-between mt-2">
+            <h1 className="text-4xl font-bold mb-auto text-light-main dark:text-dark-main text-3xl">
+              {getTitleBySlug(thread.board_id)}
+            </h1>
+            <div className="flex justify-center flex-col items-center">
+              {/* ToDo: create component for tag within Thread Block */}
+              {thread.group_id && (
+                <img
+                  src={getSchoolIconPath(thread.group_id, "en")}
+                  width={40}
+                  height={40}
                 />
-                <span className="clipboard-tooltip group-hover:scale-100">
-                  Liked
-                </span>
-              </button>
+              )}
 
-              <h3>
-                <span>{"  "}</span>
-                <span>{totalLikes}</span>
-              </h3>
+              {/* ToDO: There is no author for now will add later on */}
+              {/* <h2 className="text-sm text-light-text2 my-auto">
+                    {thread.author}
+                  </h2> */}
+              {/* editModalOpen && (
+                    <EditThreadForm
+                      originalTitle={thread.title}
+                      originalBody={thread.body}
+                      updateThread={updateThread}
+                      closeForm={() => setEditModalOpen(false)}
+                    />
+                  ) */}
             </div>
-            <h3>
-              <TextsmsIcon fontSize="small" />
-            </h3>
-            <button className="clipboard-icon group" onClick={handleShare}>
-              <Share fontSize="small" />
-              <span className="clipboard-tooltip group-hover:scale-100">
-                Link Copied!
+          </div>
+          <h2
+            className="justify-left pt-4 text-light-text1 dark:text-dark-text1"
+            style={{ whiteSpace: "pre-line" }}
+          >
+            {convertUrlsToLinks(isPreview, thread.body)}
+          </h2>
+        </div>
+        {/* <div className="inline-block text-blue-600 rounded-lg pl-2 pt-2">
+              {" "}
+              {`# ${thread.tag_id}`}
+            </div> */}
+        <hr className="mx-2 pt-2 mt-6" />
+        <div className="flex flex-row justify-evenly pt-2 items-center">
+          <div className="flex flex-row items-center content-center">
+            <button onClick={handleLike} className="clipboard-icon group">
+              <Favorite color={userLiked ? "error" : undefined} />
+              <span className="clipboard-tooltip group-hover:scale-100 text-lg">
+                Liked
               </span>
             </button>
             <h3>
-              <Visibility fontSize="small" /> <span>{thread.views}</span>
+              <span>{"  "}</span>
+              <span>{totalLikes}</span>
             </h3>
-            {
-              // userToken?.length > 0 && thread.uid === userToken && (
-              userToken?.length > 0 && thread.mod === true && (
-                <div>
-                  {/* <button onClick={openThreadEditForm}>
-                        <EditIcon fontSize="large" color="warning" />
-                      </button> */}
-                  <button onClick={confirmDeleteThread}>
-                    <DeleteIcon fontSize="large" color="error" />
-                  </button>
-                  {deleteModalOpen && (
-                    <ConfirmModal
-                      questionText="Are you sure to delete this thread?"
-                      confirmText="Yes, delete it"
-                      cancelText="No, keep it"
-                      confirmAction={deleteThread}
-                      cancelAction={() => setDeleteModalOpen(false)}
-                    />
-                  )}
-                </div>
-              )
-            }
           </div>
+          <h3>
+            <TextsmsIcon />
+          </h3>
+          <button className="clipboard-icon group" onClick={handleShare}>
+            <Share />
+            <span className="clipboard-tooltip group-hover:scale-100">
+              Link Copied!
+            </span>
+          </button>
+          <h3 className="items-center">
+            <Visibility /> <span>{thread.views}</span>
+          </h3>
+          {
+            // userToken?.length > 0 && thread.uid === userToken && (
+            userToken?.length > 0 && thread.mod === true && (
+              <div>
+                {/* <button onClick={openThreadEditForm}>
+                          <EditIcon fontSize="large" color="warning" />
+                        </button> */}
+                <button onClick={confirmDeleteThread}>
+                  <DeleteIcon fontSize="large" color="error" />
+                </button>
+                {deleteModalOpen && (
+                  <ConfirmModal
+                    questionText="Are you sure to delete this thread?"
+                    confirmText="Yes, delete it"
+                    cancelText="No, keep it"
+                    confirmAction={deleteThread}
+                    cancelAction={() => setDeleteModalOpen(false)}
+                  />
+                )}
+              </div>
+            )
+          }
         </div>
-      </Link>
+      </div>
+    );
+  };
+
+  return (
+    <Block actions={actions}>
+      {isPreview ? (
+        <Link
+          to={
+            fromRoot
+              ? `${thread.board_id}/${thread.thread_id}`
+              : `${thread.thread_id}`
+          }
+        >
+          {renderContent()}
+        </Link>
+      ) : (
+        renderContent()
+      )}
     </Block>
   );
 };
diff --git a/apps/forum/src/components/common/SchoolFilter.tsx b/apps/forum/src/components/common/SchoolFilter.tsx
index 9f8ba41e0..31f2633aa 100644
--- a/apps/forum/src/components/common/SchoolFilter.tsx
+++ b/apps/forum/src/components/common/SchoolFilter.tsx
@@ -141,7 +141,7 @@ const SchoolFilterForm = ({
         </div>
         {tempSelectedSchool && (
           <button
-            className="bg-light-main text-white rounded-lg px-4 py-2 m-2"
+            className="bg-light-main text-white rounded-lg px-4 py-2 m-2 text-4xl"
             onClick={applySelection}
           >
             Apply
diff --git a/apps/forum/src/components/icons/SendIcon.tsx b/apps/forum/src/components/icons/SendIcon.tsx
index f0d60edee..b8ab4a3bc 100644
--- a/apps/forum/src/components/icons/SendIcon.tsx
+++ b/apps/forum/src/components/icons/SendIcon.tsx
@@ -3,6 +3,6 @@ import React, { useState } from "react";
 import { Send, SendOutlined } from "@mui/icons-material";
 // @mui/icons-material";
 
-export const SendIcon = () => <Send fontSize="medium" />;
+export const SendIcon = () => <Send fontSize="large" />;
 
 export const SendIconHovered = () => <SendOutlined fontSize="medium" />;
diff --git a/apps/forum/src/types/thread.ts b/apps/forum/src/types/thread.ts
index 0229bcd11..1918f4f2e 100644
--- a/apps/forum/src/types/thread.ts
+++ b/apps/forum/src/types/thread.ts
@@ -10,6 +10,8 @@ type ThreadType = {
   univ_id: number;
   views: number;
   mod?: boolean;
+  user_liked?: boolean;
+  total_likes?: number;
 };
 
 export default ThreadType;
diff --git a/apps/forum/src/utils/get-school-icon-path.ts b/apps/forum/src/utils/get-school-icon-path.ts
index ff6c3a33c..21cb1de81 100644
--- a/apps/forum/src/utils/get-school-icon-path.ts
+++ b/apps/forum/src/utils/get-school-icon-path.ts
@@ -5,7 +5,7 @@ import schoolIconJA from "@app/constants/school-name-icon-map-ja";
 const getSchoolIconPath = (school: string, lng: string): string => {
   const url = new URL(
     lng === Lang.JA ? schoolIconJA[school] : schoolIconEN[school],
-    import.meta.url || "https://wasedatime.com/syllabus"
+    import.meta.url || "https://wasedatime.com/forum"
   );
   return url.href;
 };