diff --git a/src/App.tsx b/src/App.tsx
index 137c506..92d9a50 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,21 +16,21 @@ import ListProjectPage from "./features/Projects/pages/ListProjectPage/ListProje
 
 
 // Pages
-const FeedPage = Loadable(React.lazy(() => import("./features/Posts/pages/FeedPage/FeedPage")))
-const PostDetailsPage = Loadable(React.lazy(() => import("./features/Posts/pages/PostDetailsPage/PostDetailsPage")))
-const CreatePostPage = Loadable(React.lazy(() => import("./features/Posts/pages/CreatePostPage/CreatePostPage")))
+const FeedPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "feed_page" */ "./features/Posts/pages/FeedPage/FeedPage")))
+const PostDetailsPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "post_details_page" */ "./features/Posts/pages/PostDetailsPage/PostDetailsPage")))
+const CreatePostPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "create_post_page" */ "./features/Posts/pages/CreatePostPage/CreatePostPage")))
 
-const HottestPage = Loadable(React.lazy(() => import("src/features/Projects/pages/HottestPage/HottestPage")))
-const CategoryPage = Loadable(React.lazy(() => import("src/features/Projects/pages/CategoryPage/CategoryPage")))
-const ExplorePage = Loadable(React.lazy(() => import("src/features/Projects/pages/ExplorePage")))
+const HottestPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hottest_page" */ "src/features/Projects/pages/HottestPage/HottestPage")))
+const CategoryPage = Loadable(React.lazy(() => import( /* webpackChunkName: "category_page" */ "src/features/Projects/pages/CategoryPage/CategoryPage")))
+const ExplorePage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ExplorePage")))
 
-const HackathonsPage = Loadable(React.lazy(() => import("./features/Hackathons/pages/HackathonsPage/HackathonsPage")))
+const HackathonsPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "hackathons_page" */ "./features/Hackathons/pages/HackathonsPage/HackathonsPage")))
 
-const DonatePage = Loadable(React.lazy(() => import("./features/Donations/pages/DonatePage/DonatePage")))
-const LoginPage = Loadable(React.lazy(() => import("./features/Auth/pages/LoginPage/LoginPage")))
-const LogoutPage = Loadable(React.lazy(() => import("./features/Auth/pages/LogoutPage/LogoutPage")))
-const ProfilePage = Loadable(React.lazy(() => import("./features/Profiles/pages/ProfilePage/ProfilePage")))
-const EditProfilePage = Loadable(React.lazy(() => import("./features/Profiles/pages/EditProfilePage/EditProfilePage")))
+const DonatePage = Loadable(React.lazy(() => import( /* webpackChunkName: "donate_page" */ "./features/Donations/pages/DonatePage/DonatePage")))
+const LoginPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "login_page" */ "./features/Auth/pages/LoginPage/LoginPage")))
+const LogoutPage = Loadable(React.lazy(() => import(  /* webpackChunkName: "logout_page" */ "./features/Auth/pages/LogoutPage/LogoutPage")))
+const ProfilePage = Loadable(React.lazy(() => import(  /* webpackChunkName: "profile_page" */ "./features/Profiles/pages/ProfilePage/ProfilePage")))
+const EditProfilePage = Loadable(React.lazy(() => import(  /* webpackChunkName: "edit_profile_page" */ "./features/Profiles/pages/EditProfilePage/EditProfilePage")))
 
 
 
diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 2b2d625..5bbc318 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -166,6 +166,8 @@ export default function NavDesktop() {
                 {curUser !== undefined &&
                     (curUser ?
                         <Menu
+                            align="end"
+                            offsetY={4}
                             menuClassName='!p-8 !rounded-12'
                             menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
                             <MenuItem
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index 3ed8a1d..08fadad 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -93,6 +93,8 @@ export default function NavMobile() {
             {curUser ?
 
               <Menu
+                align="end"
+                offsetY={4}
                 menuClassName='!p-8 !rounded-12'
                 menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
                 <MenuItem
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index b1d9f32..e871110 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -1,3 +1,4 @@
+
 import NavMobile from "./NavMobile";
 import { MdComment, MdHomeFilled, MdLocalFireDepartment } from "react-icons/md";
 import { useCallback, useEffect, } from "react";
diff --git a/src/features/Posts/Components/Comments/index.tsx b/src/features/Posts/Components/Comments/index.tsx
index d7f4694..2c748fc 100644
--- a/src/features/Posts/Components/Comments/index.tsx
+++ b/src/features/Posts/Components/Comments/index.tsx
@@ -1 +1 @@
-export { default as CommentsSection } from './CommentsSection/CommentsSection'
\ No newline at end of file
+export { default } from './CommentsSection/CommentsSection'
\ No newline at end of file
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
index df7d528..22ef15d 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/QuestionPageContent/QuestionPageContent.tsx
@@ -5,9 +5,10 @@ import styles from '../PageContent/styles.module.scss'
 import Badge from "src/Components/Badge/Badge";
 import { BiComment } from "react-icons/bi";
 import { RiFlashlightLine } from "react-icons/ri";
-import { CommentsSection } from "src/features/Posts/Components/Comments";
 import { numberFormatter } from "src/utils/helperFunctions";
+import { lazy } from "react";
 
+const CommentsSection = lazy(() => import("src/features/Posts/Components/Comments"))
 
 interface Props {
     question: Question
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
index 06c9417..345774f 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
@@ -4,15 +4,17 @@ import { useParams } from 'react-router-dom'
 import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage'
 import { Post_Type, usePostDetailsQuery } from 'src/graphql'
 import { capitalize } from 'src/utils/helperFunctions'
-import { CommentsSection } from '../../Components/Comments'
 import ScrollToTop from 'src/utils/routing/scrollToTop'
-import TrendingCard from '../../Components/TrendingCard/TrendingCard'
+import TrendingCard from 'src/features/Posts/Components/TrendingCard/TrendingCard'
 import AuthorCard from './Components/AuthorCard/AuthorCard'
 import PageContent from './Components/PageContent/PageContent'
 import PostActions from './Components/PostActions/PostActions'
 import PostDetailsPageSkeleton from './PostDetailsPage.skeleton'
 import styles from './styles.module.scss'
+import { lazy, Suspense } from 'react'
+import { RotatingLines } from 'react-loader-spinner'
 
+const CommentsSection = lazy(() => import( /* webpackChunkName: "comments_section" */ "src/features/Posts/Components/Comments"))
 
 export default function PostDetailsPage() {
     const { type: _type, id } = useParams();
@@ -60,8 +62,11 @@ export default function PostDetailsPage() {
                     </div>
                 </aside>
                 <div id="comments">
-                    <CommentsSection id={post.id} type={type as Post_Type} />
-
+                    <Suspense fallback={
+                        <div className="flex justify-center py-32"><RotatingLines strokeColor='#ddd' width="64" /></div>
+                    }>
+                        <CommentsSection id={post.id} type={type as Post_Type} />
+                    </Suspense>
                     <div className="md:hidden mt-24"><TrendingCard /></div>
                 </div>
             </div>
diff --git a/src/index.tsx b/src/index.tsx
index eef1fbf..9e930bc 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,7 @@ import App from './App';
 
 
 if (process.env.REACT_APP_ENABLE_MOCKS) {
-  import('./mocks/browser')
+  import(/* webpackChunkName: "mocks_server" */ './mocks/browser')
     .then(({ worker }) => {
       worker.start({
         onUnhandledRequest: 'bypass'
diff --git a/src/utils/helperFunctions.tsx b/src/utils/helperFunctions.tsx
index 1703ba0..f842ac8 100644
--- a/src/utils/helperFunctions.tsx
+++ b/src/utils/helperFunctions.tsx
@@ -62,8 +62,6 @@ export function lazyModal<T extends ComponentType<any>>
 }
 
 export function trimText(text: string | undefined | null, length: number) {
-  console.log(text);
-
   if (!text) return '';
   return text.slice(0, length) + (text.length > length ? "..." : "")
 }