diff --git a/backend/src/controllers/blog.controller.ts b/backend/src/controllers/blog.controller.ts
index 5fbde7f..41387bb 100644
--- a/backend/src/controllers/blog.controller.ts
+++ b/backend/src/controllers/blog.controller.ts
@@ -18,6 +18,8 @@ import {
   ERROR,
   Like,
   LikedUser,
+  NumOfCommentsReq,
+  NumOfCommentsRes,
   RemoveLikeReq,
   RemoveLikeRes,
   SpaceBlogsReq,
@@ -43,6 +45,7 @@ export interface blogController {
   unLikeBlog: HandlerWithParams<{ blogId: string }, RemoveLikeReq, RemoveLikeRes>;
   getBlogLikes: HandlerWithParams<{ blogId: string }, BlogLikesReq, BlogLikesRes>;
   getBlogLikesList: HandlerWithParams<{ blogId: string }, BlogLikesListReq, BlogLikesListRes>;
+  getNumOfComments: HandlerWithParams<{ blogId: string }, NumOfCommentsReq, NumOfCommentsRes>;
 }
 
 export class BlogController implements blogController {
@@ -51,6 +54,16 @@ export class BlogController implements blogController {
   constructor(db: DataStoreDao) {
     this.db = db;
   }
+
+  getNumOfComments: HandlerWithParams<{ blogId: string }, NumOfCommentsReq, NumOfCommentsRes> =
+    async (req, res) => {
+      const blogId = req.params.blogId;
+      if (!blogId) return res.status(400).send({ error: ERROR.PARAMS_MISSING });
+
+      const numOfComments = await this.db.getNumOfComments(blogId);
+      return res.status(200).send({ numOfComments });
+    };
+
   likeBlog: HandlerWithParams<{ blogId: string }, CreateLikeReq, CreateLikeRes> = async (
     req,
     res
diff --git a/backend/src/controllers/user.controller.ts b/backend/src/controllers/user.controller.ts
index 4f3c8d3..609e31e 100644
--- a/backend/src/controllers/user.controller.ts
+++ b/backend/src/controllers/user.controller.ts
@@ -1,6 +1,7 @@
 import {
   AllUnReadMsgsReq,
   AllUnReadMsgsRes,
+  DefaultSpaceId,
   ERROR,
   FollowUserReq,
   FollowUserRes,
@@ -188,7 +189,7 @@ export class UserController implements userController {
     };
 
     await this.db.createUser(user);
-    await this.db.addMember({ spaceId: this.db.defaultSpcId, memberId: user.id, isAdmin: false });
+    await this.db.addMember({ spaceId: DefaultSpaceId, memberId: user.id, isAdmin: false });
 
     return res.send({ jwt: createToken(user.id), username: user.username, id: user.id });
   };
diff --git a/backend/src/dataStore/dao/Blog.dao.ts b/backend/src/dataStore/dao/Blog.dao.ts
index 7e68bc5..3b3179e 100644
--- a/backend/src/dataStore/dao/Blog.dao.ts
+++ b/backend/src/dataStore/dao/Blog.dao.ts
@@ -7,6 +7,7 @@ export interface BlogDao {
   deleteBlog(blogId: string): Promise<void>;
 
   getComments(blogId: string): Promise<CommentWithUser[]>;
+  getNumOfComments(blogId: string): Promise<number>;
   deleteComments(blogId: string): Promise<void>;
   blogLikes(blogId: string, userId: string): Promise<{ likes: number; isLiked: boolean }>;
   blogLikesList(blogId: string): Promise<LikedUser[]>;
diff --git a/backend/src/dataStore/dao/Space.dao.ts b/backend/src/dataStore/dao/Space.dao.ts
index 5ac5e90..9ce35b8 100644
--- a/backend/src/dataStore/dao/Space.dao.ts
+++ b/backend/src/dataStore/dao/Space.dao.ts
@@ -1,7 +1,6 @@
 import { Blog, ChatMessage, LastReadMsg, Space, SpaceMember } from '@nest/shared';
 
 export interface SpaceDao {
-  defaultSpcId: string;
   createSpace(space: Space): Promise<void>;
   updateSpace(space: Space): Promise<Space | undefined>;
   getSpace(spaceId: string): Promise<Space | undefined>;
diff --git a/backend/src/dataStore/sql/SqlDataStore.class.ts b/backend/src/dataStore/sql/SqlDataStore.class.ts
index 61d7004..45bd894 100644
--- a/backend/src/dataStore/sql/SqlDataStore.class.ts
+++ b/backend/src/dataStore/sql/SqlDataStore.class.ts
@@ -20,33 +20,37 @@ import { DataStoreDao } from '..';
 
 export class SqlDataStore implements DataStoreDao {
   private pool!: Pool;
-  public defaultSpcId = '1';
+  private prodProps: mysql.PoolOptions = {
+    host: process.env.MY_SQL_DB_HOST,
+    user: process.env.MY_SQL_DB_USER,
+    database: process.env.MY_SQL_DB_DATABASE,
+    password: process.env.MY_SQL_DB_PASSWORD,
+    socketPath: process.env.MY_SQL_DB_SOCKET_PATH,
+  };
+  private devProps: mysql.PoolOptions = {
+    host: process.env.MY_SQL_DB_HOST,
+    user: process.env.MY_SQL_DB_USER,
+    database: process.env.MY_SQL_DB_DATABASE,
+    password: process.env.MY_SQL_DB_PASSWORD,
+  };
 
   async runDB() {
-    const prodProps: mysql.PoolOptions = {
-      host: process.env.MY_SQL_DB_HOST,
-      user: process.env.MY_SQL_DB_USER,
-      database: process.env.MY_SQL_DB_DATABASE,
-      password: process.env.MY_SQL_DB_PASSWORD,
-      socketPath: process.env.MY_SQL_DB_SOCKET_PATH,
-    };
-
-    const devProps: mysql.PoolOptions = {
-      host: process.env.MY_SQL_DB_HOST,
-      user: process.env.MY_SQL_DB_USER,
-      database: process.env.MY_SQL_DB_DATABASE,
-      password: process.env.MY_SQL_DB_PASSWORD,
-    };
-
     this.pool = mysql
       .createPool({
-        ...(process.env.NODE_ENV === 'prod' ? prodProps : devProps),
+        ...(process.env.NODE_ENV === 'prod' ? this.prodProps : this.devProps),
       })
       .promise();
-
     return this;
   }
 
+  async getNumOfComments(blogId: string): Promise<number> {
+    const query = `
+    SELECT COUNT(*) AS comments FROM comments WHERE blogId=?
+    `;
+    const [rows] = await this.pool.query<RowDataPacket[]>(query, blogId);
+    return rows[0]['comments'] as Promise<number>;
+  }
+
   async getLastMsgId(spaceId: string): Promise<string> {
     const query = `
     SELECT id FROM chat WHERE spaceId=? ORDER BY timestamp DESC LIMIT 1
@@ -411,13 +415,13 @@ export class SqlDataStore implements DataStoreDao {
   async getUserCard(userId: string, cardOwnerId: string): Promise<UserCard | undefined> {
     const [rows] = await this.pool.query<RowDataPacket[]>(
       `
-          SELECT users.id, users.username, users.email, users.timestamp,  
-          (SELECT COUNT(*) FROM follows WHERE follows.followingId = users.id) AS followersNum,
-          (SELECT COUNT(*) FROM follows WHERE follows.followerId = users.id) AS followingNum,
-          (SELECT COUNT(*) FROM follows WHERE follows.followerId = ? AND follows.followingId = users.id) AS isFollowing
-          FROM users
-          WHERE users.id = ?
-          `,
+      SELECT users.id, users.username, users.email, users.timestamp,  
+      (SELECT COUNT(*) FROM follows WHERE follows.followingId = users.id) AS followersNum,
+      (SELECT COUNT(*) FROM follows WHERE follows.followerId = users.id) AS followingNum,
+      (SELECT COUNT(*) FROM follows WHERE follows.followerId = ? AND follows.followingId = users.id) AS isFollowing
+      FROM users
+      WHERE users.id = ?
+      `,
       [userId, cardOwnerId]
     );
 
diff --git a/backend/src/server.ts b/backend/src/server.ts
index 5415f40..5d6411f 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -63,6 +63,7 @@ import { errorHandler } from './middleware/errorHandler';
   app.get(ENDPOINT.GET_BLOG_LIKES_LIST, requireAuth, asyncHandler(blog.getBlogLikesList));
   app.post(ENDPOINT.LIKE_BLOG, requireAuth, checkEmptyInput, asyncHandler(blog.likeBlog));
   app.delete(ENDPOINT.UNLIKE_BLOG, requireAuth, asyncHandler(blog.unLikeBlog));
+  app.get(ENDPOINT.NUM_OF_COMMENTS, requireAuth, asyncHandler(blog.getNumOfComments));
   // app.get(ENDPOINT.TEST_INFINITE_SCROLL, requireAuth, asyncHandler(blog.testInfiniteScrollBlogs));
 
   // *Comment
diff --git a/frontend/src/components/BlogIcon.tsx b/frontend/src/components/BlogIcon.tsx
index 3feddea..24a5065 100644
--- a/frontend/src/components/BlogIcon.tsx
+++ b/frontend/src/components/BlogIcon.tsx
@@ -1,20 +1,24 @@
-import { Blog } from '@nest/shared';
-import { formatDistanceToNow } from 'date-fns';
+import { Blog, DefaultSpaceId } from '@nest/shared';
+import { LiaCommentSolid } from 'react-icons/lia';
+import { RiGroup2Fill } from 'react-icons/ri';
 import { Link } from 'react-router-dom';
 
-import { isArabic } from '../utils/assists';
+import { useCommCounts } from '../hooks/useBlog';
+import { formatTimeShort, isArabic } from '../utils/assists';
 import { LikeBlogButton } from './LikeBlogButton';
 import { MyMarkdown } from './MyMarkdown';
 
 export const BlogIcon: React.FC<{ post: Blog }> = ({ post }) => {
+  const { numOfComments } = useCommCounts(post.id!);
+
   return (
     <div className="blog-preview" key={post.id}>
       <div className="blog-content">
-        <Link to={`/b/${post.id}`} className="blog-link">
-          <div className="blog-header">
-            <h2>{post.title}</h2>
-          </div>
-        </Link>
+        <div className="blog-header">
+          <Link to={`/b/${post.id}`} className="blog-link">
+            <h2 className={isArabic(post.title) ? 'arabic' : ''}>{post.title}</h2>
+          </Link>
+        </div>
 
         <div className="blog-meta">
           <Link to={`/u/${post.userId}`} className="author-link">
@@ -23,28 +27,23 @@ export const BlogIcon: React.FC<{ post: Blog }> = ({ post }) => {
 
           <LikeBlogButton post={post} />
 
-          {post.spaceId !== '1' && (
-            <Link to={`/space/${post?.spaceId}`} className="space-link">
-              Spaced
+          <span className="comms-count">
+            {numOfComments.data?.numOfComments} <LiaCommentSolid size={20} />
+          </span>
+
+          {post.spaceId !== DefaultSpaceId && (
+            <Link to={`/space/${post?.spaceId}`} className="space-link" title="Spaced">
+              <RiGroup2Fill size={20} />
             </Link>
           )}
+
           <time className="created-at" dateTime={String(post.timestamp)}>
-            {formatDistanceToNow(new Date(post.timestamp as number))}
+            {formatTimeShort(new Date(post.timestamp!))}
           </time>
         </div>
 
         <div className="blog-excerpt">
-          <div
-            style={{
-              direction: isArabic(post.content) ? 'rtl' : 'ltr',
-              textAlign: isArabic(post.content) ? 'right' : 'left',
-              unicodeBidi: isArabic(post.content) ? 'embed' : 'normal',
-              whiteSpace: 'pre-wrap',
-            }}
-          >
-            <MyMarkdown markdown={post.content} />
-          </div>
-          {/* <p className={isArabic(post.content) ? 'arabic' : ''}>{post.content} </p> */}
+          <MyMarkdown markdown={post.content} />
         </div>
       </div>
     </div>
diff --git a/frontend/src/components/MyMarkdown.tsx b/frontend/src/components/MyMarkdown.tsx
index f14d4b0..398faf3 100644
--- a/frontend/src/components/MyMarkdown.tsx
+++ b/frontend/src/components/MyMarkdown.tsx
@@ -3,28 +3,32 @@ import ReactMarkdown from 'react-markdown';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vs } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
+import { isArabic } from '../utils/assists';
+
 export const MyMarkdown: FC<{ markdown: string }> = ({ markdown }) => {
   return (
-    <ReactMarkdown
-      children={markdown}
-      components={{
-        code({ node, inline, className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || '');
-          return !inline && match ? (
-            <SyntaxHighlighter
-              {...props}
-              children={String(children).replace(/\n$/, '')}
-              style={vs}
-              language={match[1]}
-              PreTag="div"
-            />
-          ) : (
-            <code {...props} className={className}>
-              {children}
-            </code>
-          );
-        },
-      }}
-    />
+    <div className={isArabic(markdown) ? 'arabic' : ''}>
+      <ReactMarkdown
+        children={markdown}
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline && match ? (
+              <SyntaxHighlighter
+                {...props}
+                children={String(children).replace(/\n$/, '')}
+                style={vs}
+                language={match[1]}
+                PreTag="div"
+              />
+            ) : (
+              <code {...props} className={className}>
+                {children}
+              </code>
+            );
+          },
+        }}
+      />
+    </div>
   );
 };
diff --git a/frontend/src/components/NotificationMenu.tsx b/frontend/src/components/NotificationMenu.tsx
index 9b4d454..c8759be 100644
--- a/frontend/src/components/NotificationMenu.tsx
+++ b/frontend/src/components/NotificationMenu.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { TbMessageCirclePlus } from 'react-icons/tb';
 import { Link } from 'react-router-dom';
 
diff --git a/frontend/src/components/ShortForm.tsx b/frontend/src/components/ShortForm.tsx
index c878aa7..3c2fa56 100644
--- a/frontend/src/components/ShortForm.tsx
+++ b/frontend/src/components/ShortForm.tsx
@@ -5,11 +5,12 @@ import { useParams } from 'react-router-dom';
 
 import { useCreateShort } from '../hooks/useBlog';
 import { isArabic } from '../utils/assists';
+import { MyMarkdown } from './MyMarkdown';
 
 export const ShortForm = () => {
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
-  // const remaining = ShortLength - content.length;
+  const [preview, setPreview] = useState(false);
   const id = useParams().id || DefaultSpaceId;
   const { createShortMutation } = useCreateShort(id, title, content);
 
@@ -29,6 +30,15 @@ export const ShortForm = () => {
     <>
       {createShortMutation.isError && <p className="error">{createShortMutation.error.message}</p>}
       <form className="create-blog-form" onSubmit={handleSubmit}>
+        <div className="button-container">
+          <button type="submit" disabled={createShortMutation.isLoading}>
+            Create
+          </button>
+          <button type="button" onClick={() => setPreview(!preview)}>
+            Preview
+          </button>
+        </div>
+
         <input
           placeholder="Title"
           type="text"
@@ -37,20 +47,19 @@ export const ShortForm = () => {
           value={title}
           onChange={e => setTitle(e.target.value)}
         />
-        <textarea
-          placeholder="Content"
-          name="content"
-          id="content"
-          value={content}
-          onChange={e => setContent(e.target.value)}
-          // maxLength={ShortLength}
-          style={{ direction: isArabic(content) ? 'rtl' : 'ltr' }}
-        />
-        {/* <i className="remaining-char">{remaining} remaining characters</i> */}
+        {preview ? (
+          <MyMarkdown markdown={content} />
+        ) : (
+          <textarea
+            placeholder="Content"
+            name="content"
+            id="content"
+            value={content}
+            onChange={e => setContent(e.target.value)}
+            style={{ direction: isArabic(content) ? 'rtl' : 'ltr' }}
+          />
+        )}
 
-        <button type="submit" disabled={createShortMutation.isLoading}>
-          Create
-        </button>
         {createShortMutation.isLoading && <p>Creating...</p>}
         {createShortMutation.isSuccess && <p className="success">Created successfully!</p>}
       </form>
diff --git a/frontend/src/components/SideBar.tsx b/frontend/src/components/SideBar.tsx
index f9ca845..47faa9d 100644
--- a/frontend/src/components/SideBar.tsx
+++ b/frontend/src/components/SideBar.tsx
@@ -1,5 +1,9 @@
 import { DefaultSpaceId, Space, SpaceMember } from '@nest/shared';
 import { useState } from 'react';
+import { FaPencilAlt } from 'react-icons/fa';
+import { IoIosPeople } from 'react-icons/io';
+import { RiGroup2Fill } from 'react-icons/ri';
+import { TfiWrite } from 'react-icons/tfi';
 import { useNavigate } from 'react-router-dom';
 
 import { useAuthContext } from '../context/AuthContext';
@@ -39,21 +43,21 @@ export const Sidebar: React.FC<{
         </button>
       </div>
       <button
-        title='Create "short"'
+        title='Create "Short"'
         hidden={!!space && !isMember}
         onClick={() => dispatch({ type: 'showCreateBlog' })}
         className={state.showCreateBlog ? 'active' : ''}
       >
-        Create Short
+        Short <FaPencilAlt size={20} color="#33872e" />
       </button>
       {state.showCreateBlog && <ShortForm />}
 
       <button
-        title='Create "blog"'
+        title='Create "Blog"'
         hidden={(!!space && !isMember) || (space && !list)}
         onClick={() => nav(`/new/b/${space?.name || 'Default'}/${space?.id || DefaultSpaceId}`)}
       >
-        Create Blog
+        Blog <TfiWrite size={20} color="#33872e" />
       </button>
 
       <button
@@ -62,7 +66,7 @@ export const Sidebar: React.FC<{
         onClick={() => dispatch({ type: 'showCreateSpace' })}
         className={state.showCreateSpace ? 'active' : ''}
       >
-        Create Space
+        Space <RiGroup2Fill size={20} color="#33872e" />
       </button>
       {state.showCreateSpace && <CreateSpace />}
 
@@ -72,7 +76,7 @@ export const Sidebar: React.FC<{
         onClick={() => dispatch({ type: 'showMembers' })}
         className={state.showMembers ? 'active' : ''}
       >
-        Show members
+        members <IoIosPeople size={20} color="#33872e" />
       </button>
       {state.showMembers && list && <SpaceMembers space={space!} users={members!} />}
 
diff --git a/frontend/src/hooks/useBlog.ts b/frontend/src/hooks/useBlog.ts
index 7c0cbe6..0ccf830 100644
--- a/frontend/src/hooks/useBlog.ts
+++ b/frontend/src/hooks/useBlog.ts
@@ -1,9 +1,10 @@
-import { Blog, CreateBlogRes, DefaultSpaceId, DeleteBlogRes } from '@nest/shared';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Blog, CreateBlogRes, DefaultSpaceId, DeleteBlogRes, NumOfCommentsRes } from '@nest/shared';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
+import { useAuthContext } from '../context/AuthContext';
 import { ApiError } from '../fetch/auth';
-import { createBlogApi, createShortApi, deleteBlogApi } from '../utils/api';
+import { createBlogApi, createShortApi, deleteBlogApi, numOfCommsApi } from '../utils/api';
 
 const getSpcKey = (spaceId: string) =>
   spaceId === DefaultSpaceId ? ['feeds'] : ['blogs', spaceId];
@@ -56,3 +57,15 @@ export const useDeleteBlog = (id: string, blog: Blog) => {
 
   return { deleteBlogMutate };
 };
+
+export const useCommCounts = (id: string) => {
+  const currUser = useAuthContext().currUser;
+
+  const numOfComments = useQuery<NumOfCommentsRes, ApiError>(['commsNum', id], numOfCommsApi(id), {
+    enabled: !!currUser?.jwt && !!id,
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+  });
+
+  return { numOfComments };
+};
diff --git a/frontend/src/hooks/useProfileData.ts b/frontend/src/hooks/useProfileData.ts
index 258bcc4..3f652ee 100644
--- a/frontend/src/hooks/useProfileData.ts
+++ b/frontend/src/hooks/useProfileData.ts
@@ -61,7 +61,7 @@ export const useGetAllMissedMsgs = () => {
 
   const query = useQuery<AllUnReadMsgsRes, ApiError>(key, getAllUnReadMsgsApi(), {
     enabled: !!currUser?.jwt,
-    refetchOnWindowFocus: 'always',
+    refetchInterval: 10000,
   });
 
   return { missedMsgs: query.data?.numberOfMsgs };
diff --git a/frontend/src/hooks/useSpace.ts b/frontend/src/hooks/useSpace.ts
index 9ee83a8..48b435b 100644
--- a/frontend/src/hooks/useSpace.ts
+++ b/frontend/src/hooks/useSpace.ts
@@ -23,6 +23,8 @@ import {
 } from '../utils/api';
 import { useScroll } from './useScroll';
 
+// todo: Make isMemberApi
+// todo: Don't make unnecessary fetches, Clean up
 export const useSpace = (id: string) => {
   const currUser = useAuthContext().currUser;
   const queryClient = useQueryClient();
@@ -38,14 +40,15 @@ export const useSpace = (id: string) => {
   });
 
   const blogsQuery = useInfiniteQuery<SpaceBlogsRes, ApiError>(blogsKey, blogsApi(id), {
-    enabled: !!currUser && !!id && id !== DefaultSpaceId,
+    enabled: !!currUser && !!id && id !== DefaultSpaceId && spaceQuery.isSuccess,
     refetchOnWindowFocus: false,
     getNextPageParam: lastPage => lastPage.page + 1,
     onSuccess: data => data.pages[data.pages.length - 1].blogs.length < pageSize && setIsEnd(true),
   });
 
   const membersQuery = useQuery<MembersRes, ApiError>(membersKey, membersApi(id), {
-    enabled: !!currUser && !!spaceQuery.data?.space.id && id !== DefaultSpaceId,
+    enabled:
+      !!currUser && !!spaceQuery.data?.space.id && id !== DefaultSpaceId && spaceQuery.isSuccess,
     refetchOnWindowFocus: false,
   });
 
diff --git a/frontend/src/pages/BlogDetails.tsx b/frontend/src/pages/BlogDetails.tsx
index e2f277a..33e3cec 100644
--- a/frontend/src/pages/BlogDetails.tsx
+++ b/frontend/src/pages/BlogDetails.tsx
@@ -1,4 +1,4 @@
-import formatDistantToNow from 'date-fns/formatDistanceToNow';
+import { LiaCommentSolid } from 'react-icons/lia';
 import { Link, useParams } from 'react-router-dom';
 
 import { BlogDetailsAction } from '../components/BlogDetailsAction';
@@ -9,7 +9,7 @@ import { useAuthContext } from '../context/AuthContext';
 import { useBlogPage } from '../hooks/useBlogPage';
 import '../styles/blogDetails.css';
 import { STATE } from '../utils/StatesMsgs';
-import { isArabic } from '../utils/assists';
+import { formatTimeShort, isArabic } from '../utils/assists';
 
 export const BlogDetails = () => {
   const { id } = useParams();
@@ -42,15 +42,14 @@ export const BlogDetails = () => {
               </div>
 
               <div className="blog-meta">
-                <p className="created-at">
-                  {formatDistantToNow(new Date(blog?.timestamp as number), {
-                    addSuffix: true,
-                  })}
-                </p>
+                <p className="created-at">{formatTimeShort(new Date(blog.timestamp!))}</p>
 
                 <LikeBlogButton post={blog} />
 
-                <p className="comments-counts"> {comments?.length} comments</p>
+                <p className="comments-counts">
+                  {' '}
+                  {comments?.length} <LiaCommentSolid size={20} />
+                </p>
               </div>
             </article>
 
diff --git a/frontend/src/pages/Space.tsx b/frontend/src/pages/Space.tsx
index 2613c84..e8cdb43 100644
--- a/frontend/src/pages/Space.tsx
+++ b/frontend/src/pages/Space.tsx
@@ -1,4 +1,4 @@
-import { Blog, DefaultSpaceId, Short } from '@nest/shared';
+import { DefaultSpaceId } from '@nest/shared';
 import { useParams } from 'react-router-dom';
 
 import { BlogList } from '../components/BlogList';
@@ -6,16 +6,12 @@ import { Sidebar } from '../components/SideBar';
 import { useGetSpcMissedMsgs, useSpace } from '../hooks/useSpace';
 import { Home } from './Home';
 
-// todo: add infinite scroll
 export const Space = () => {
   const { id } = useParams();
   const { numOfUnReadMsgs } = useGetSpcMissedMsgs(id!);
   const { spaceQuery, blogsQuery, membersQuery, joinSpaceMutate, isMember, isEnd } = useSpace(id!);
 
   const blogs = blogsQuery.data?.pages.flatMap(page => page.blogs) || [];
-  const posts: (Blog | Short)[] = [...blogs].sort(
-    (a, b) => (b.timestamp as number) - (a.timestamp as number)
-  );
 
   if (spaceQuery.isError) return <p className="error">{spaceQuery.error?.message}</p>;
   if (spaceQuery.isLoading) return <div>Loading...</div>;
@@ -46,9 +42,9 @@ export const Space = () => {
           {/** //todo: move the description to the sidebar */}
           {/* <span className="space-description">{spaceQuery.data?.space?.description}</span> */}
 
-          {posts?.length ? (
+          {blogs?.length ? (
             <>
-              <BlogList posts={posts} />
+              <BlogList posts={blogs} />
               <button hidden={isEnd} disabled={isEnd} onClick={() => blogsQuery.fetchNextPage()}>
                 Load More
               </button>
diff --git a/frontend/src/styles/blogList.css b/frontend/src/styles/blogList.css
index 1569262..be5de73 100644
--- a/frontend/src/styles/blogList.css
+++ b/frontend/src/styles/blogList.css
@@ -36,9 +36,9 @@
 
 .blog-header {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: column;
+    align-items: flex-end;
+    justify-content: space-evenly;
+    flex-direction: row;
 }
 
 time {
@@ -154,6 +154,18 @@ time {
     font-family: 'Roboto', sans-serif;
 }
 
+.comms-count {
+    background-color: transparent;
+    border: none;
+    color: #666;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-bottom: 5px;
+    margin-right: 15px;
+    padding: 0;
+}
+
 @media screen and (max-width: 600px) {
     .blog-preview {
         margin-left: 4px;
diff --git a/frontend/src/styles/like-button.css b/frontend/src/styles/like-button.css
index 95c56ad..28b84c9 100644
--- a/frontend/src/styles/like-button.css
+++ b/frontend/src/styles/like-button.css
@@ -4,7 +4,8 @@
   font-family: "Quicksand";
   background-color: transparent;
   border: none;
-
+  margin: 0%;
+  padding: 8px;
   width: auto;
   text-align: center;
   text-decoration: none;
diff --git a/frontend/src/utils/api.ts b/frontend/src/utils/api.ts
index da05b14..41ab39e 100644
--- a/frontend/src/utils/api.ts
+++ b/frontend/src/utils/api.ts
@@ -44,6 +44,8 @@ import {
   LoginRes,
   MembersReq,
   MembersRes,
+  NumOfCommentsReq,
+  NumOfCommentsRes,
   RemoveLikeReq,
   RemoveLikeRes,
   SignUpReq,
@@ -267,3 +269,13 @@ export const getAllUnReadMsgsApi = () => () =>
     undefined,
     currUser?.jwt
   );
+
+export const numOfCommsApi = (blogId: string) => () => {
+  return fetchFn<NumOfCommentsReq, NumOfCommentsRes>(
+    ENDPOINT.NUM_OF_COMMENTS,
+    'GET',
+    undefined,
+    currUser?.jwt,
+    [blogId]
+  );
+};
diff --git a/frontend/src/utils/assists.tsx b/frontend/src/utils/assists.tsx
index a69586b..13babec 100644
--- a/frontend/src/utils/assists.tsx
+++ b/frontend/src/utils/assists.tsx
@@ -1,3 +1,4 @@
+import { formatDistanceToNowStrict } from 'date-fns';
 import { NOTIFICATION_TYPE, NotificationTitleMessage, Store } from 'react-notifications-component';
 
 export function isArabic(str: string): boolean {
@@ -5,6 +6,17 @@ export function isArabic(str: string): boolean {
   return arabicRegex.test(str);
 }
 
+export function formatTimeShort(date: number | Date): string {
+  let time = formatDistanceToNowStrict(date);
+  time = time.replace('second', 'sec');
+  time = time.replace('minute', 'm');
+  time = time.replace('hour', 'h');
+  time = time.replace('day', 'd');
+  time = time.replace('month', 'mo');
+  time = time.replace('year', 'y');
+  return time;
+}
+
 export const ShortLength = 500;
 
 export function addNotification({
diff --git a/shared/src/api/blog.api.types.ts b/shared/src/api/blog.api.types.ts
index 23eef37..9608fd0 100644
--- a/shared/src/api/blog.api.types.ts
+++ b/shared/src/api/blog.api.types.ts
@@ -44,3 +44,8 @@ export interface RemoveLikeReq {}
 export interface RemoveLikeRes {
   message: StatusMessage;
 }
+
+export interface NumOfCommentsReq {}
+export interface NumOfCommentsRes {
+  numOfComments: number;
+}
diff --git a/shared/src/endPoints.ts b/shared/src/endPoints.ts
index 1bfbb6d..7e931b8 100644
--- a/shared/src/endPoints.ts
+++ b/shared/src/endPoints.ts
@@ -24,6 +24,7 @@ export enum ENDPOINT {
   GET_BLOG_LIKES_LIST = '/api/v0/blog/:blogId/likes/list',
   LIKE_BLOG = '/api/v0/blog/:blogId/like',
   UNLIKE_BLOG = '/api/v0/blog/:blogId/unlike',
+  NUM_OF_COMMENTS = '/api/v0/blog/:blogId/num-of-comments',
 
   //* Short
   CREATE_SHORT = '/api/v0/space/:spaceId/short',