diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx
index 5bbc318..88c3ce6 100644
--- a/src/Components/Navbar/NavDesktop.tsx
+++ b/src/Components/Navbar/NavDesktop.tsx
@@ -39,113 +39,114 @@ export default function NavDesktop() {
 
     return (
         <nav className="bg-white py-16 flex items-center w-full min-w-full">
-            <div className="content-container flex items-center">
-                <Link to="/">
-                    <h2 className="text-h5 font-bold mr-40 lg:mr-64">
-                        <img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
-                    </h2>
-                </Link>
-                <ul className="flex gap-32 xl:gap-64">
-                    <li className="relative">
-                        <Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
-                            Projects
-                        </Link>
-                    </li>
-                    <li>
-                        <Menu
-                            offsetY={28}
-                            menuButton={
-                                <MenuButton
-                                    className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
-                                </MenuButton>
-                            }
-                            menuClassName='!rounded-12 !p-8 !border-gray-200'
-                            menuStyle={{ border: '1px solid' }}
-                        >
-                            <MenuItem
-                                href="/blog"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/blog");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
+            <div className="content-container">
+                <div className="flex items-center">
+                    <Link to="/">
+                        <h2 className="text-h5 font-bold mr-40 lg:mr-64">
+                            <img className='h-40' src={ASSETS.Logo} alt="Bolt fun logo" />
+                        </h2>
+                    </Link>
+                    <ul className="flex gap-32 xl:gap-64">
+                        <li className="relative">
+                            <Link to={'/projects'} className='text-body4 font-bold hover:text-primary-600'>
+                                Projects
+                            </Link>
+                        </li>
+                        <li>
+                            <Menu
+                                offsetY={28}
+                                menuButton={
+                                    <MenuButton
+                                        className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" />
+                                    </MenuButton>
+                                }
+                                menuClassName='!rounded-12 !p-8 !border-gray-200'
+                                menuStyle={{ border: '1px solid' }}
                             >
-                                <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                                    {/* <FiFeather className={`text-body1 inline-block text-primary-600 `} /> */}
-                                    <span className="text-body2">✍🏼</span>
-                                </div>
-                                <div>
-                                    <p className="text-body4 text-black font-medium">
-                                        Stories
-                                    </p>
-                                    <p className="text-body5 text-gray-600 mt-4">
-                                        Tales from the maker community
-                                    </p>
-                                </div>
-                            </MenuItem>
-                            <MenuItem
+                                <MenuItem
+                                    href="/blog"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/blog");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 '
+                                >
+                                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                                        {/* <FiFeather className={`text-body1 inline-block text-primary-600 `} /> */}
+                                        <span className="text-body2">✍🏼</span>
+                                    </div>
+                                    <div>
+                                        <p className="text-body4 text-black font-medium">
+                                            Stories
+                                        </p>
+                                        <p className="text-body5 text-gray-600 mt-4">
+                                            Tales from the maker community
+                                        </p>
+                                    </div>
+                                </MenuItem>
+                                <MenuItem
 
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12 opacity-40'
+                                >
+                                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                                        <span className="text-body2">💬</span>
+                                    </div>
+                                    <div>
+                                        <p className="text-body4 text-black font-medium">
+                                            Discussions
+                                        </p>
+                                        <p className="text-body5 text-gray-600 mt-4">
+                                            Coming soon
+                                        </p>
+                                    </div>
+                                </MenuItem>
+                                <MenuItem
+                                    href="/hackathons"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/hackathons");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
+                                        <span className="text-body2">🏆</span>
+                                    </div>
+                                    <div>
+                                        <p className="text-body4 text-black font-medium">
+                                            Hackathons
+                                        </p>
+                                        <p className="text-body5 text-gray-600 mt-4">
+                                            Take part in hackathons & tournaments
+                                        </p>
+                                    </div>
+                                </MenuItem>
+                            </Menu>
+                        </li>
+                        <li className="relative">
+                            <a
+                                href={'https://bolt.fun/guide/'}
+                                target="_blank"
+                                rel="noreferrer"
+                                className='text-body4 font-bold hover:text-primary-600'
                             >
-                                <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                                    <span className="text-body2">💬</span>
-                                </div>
-                                <div>
-                                    <p className="text-body4 text-black font-medium">
-                                        Discussions
-                                    </p>
-                                    <p className="text-body5 text-gray-600 mt-4">
-                                        Coming soon
-                                    </p>
-                                </div>
-                            </MenuItem>
-                            <MenuItem
-                                href="/hackathons"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/hackathons");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                <div className="bg-white border border-gray-100 w-48 h-48 rounded-full flex justify-center items-center">
-                                    <span className="text-body2">🏆</span>
-                                </div>
-                                <div>
-                                    <p className="text-body4 text-black font-medium">
-                                        Hackathons
-                                    </p>
-                                    <p className="text-body5 text-gray-600 mt-4">
-                                        Take part in hackathons & tournaments
-                                    </p>
-                                </div>
-                            </MenuItem>
-                        </Menu>
-                    </li>
-                    <li className="relative">
-                        <a
-                            href={'https://bolt.fun/guide/'}
-                            target="_blank"
-                            rel="noreferrer"
-                            className='text-body4 font-bold hover:text-primary-600'
-                        >
-                            Guide
-                        </a>
-                    </li>
-                    <li className="relative">
-                        <Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
-                            Donate
-                        </Link>
-                    </li>
-                </ul>
+                                Guide
+                            </a>
+                        </li>
+                        <li className="relative">
+                            <Link to={'/donate'} className='text-body4 font-bold hover:text-primary-600'>
+                                Donate
+                            </Link>
+                        </li>
+                    </ul>
 
-                <div className="flex-1"></div>
+                    <div className="flex-1"></div>
 
-                <motion.div
-                    animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
-                    className="flex"
-                >
+                    <motion.div
+                        animate={searchOpen ? { opacity: 0 } : { opacity: 1 }}
+                        className="flex"
+                    >
 
-                    {/* <Button
+                        {/* <Button
                 color="primary"
                 size="md"
                 className="lg:px-40"
@@ -154,87 +155,88 @@ export default function NavDesktop() {
             >
                 Submit App️
             </Button> */}
-                    {/* {isWalletConnected ?
+                        {/* {isWalletConnected ?
                             <Button className="ml-16 py-12 px-16 lg:px-20">Connected <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /></Button>
                             : <Button className="ml-16 py-12 px-16 lg:px-20" onClick={onConnectWallet}><AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </Button>
                         } */}
 
-                    {currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
-                        <BsSearch className='scale-125 text-gray-400' />
-                    </IconButton>}
-                </motion.div>
-                {curUser !== undefined &&
-                    (curUser ?
-                        <Menu
-                            align="end"
-                            offsetY={4}
-                            menuClassName='!p-8 !rounded-12'
-                            menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
-                            <MenuItem
-                                href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                👾 Profile
-                            </MenuItem>
-                            <MenuItem
-                                href="/edit-profile"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/edit-profile");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                ⚙️ Settings
-                            </MenuItem>
-                            <MenuItem
-                                href="/logout"
-                                onClick={(e) => {
-                                    e.syntheticEvent.preventDefault();
-                                    navigate("/logout");
-                                }}
-                                className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                            >
-                                👋 Logout
-                            </MenuItem>
-                        </Menu>
-
-                        :
-                        <Button size="sm" color="white" href="/login">
-                            Connect ⚡
-                        </Button>
-                    )
-                }
-                <div className="relative h-36">
-                    <motion.div
-                        initial={{
-                            opacity: 0,
-                            y: '0'
-                        }}
-                        animate={searchOpen ? {
-                            opacity: 1,
-                            y: '0',
-                            transition: { type: "spring", stiffness: 70 }
-
-                        } : {
-                            opacity: 0,
-                            y: '-120px',
-                            transition: {
-                                ease: "easeIn"
-                            }
-                        }}
-                        className='absolute top-0 right-0 flex items-center h-full'
-                    >
-                        <Search
-                            width={326}
-                            isOpen={searchOpen}
-                            onClose={() => setSearchOpen(false)}
-                            onResultClick={() => setSearchOpen(false)}
-                        />
+                        {currentSection === 'apps' && <IconButton className='mr-16 self-center' onClick={openSearch}>
+                            <BsSearch className='scale-125 text-gray-400' />
+                        </IconButton>}
                     </motion.div>
+                    {curUser !== undefined &&
+                        (curUser ?
+                            <Menu
+                                align="end"
+                                offsetY={4}
+                                menuClassName='!p-8 !rounded-12'
+                                menuButton={<MenuButton ><Avatar src={curUser.avatar} width={40} /> </MenuButton>}>
+                                <MenuItem
+                                    href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    👾 Profile
+                                </MenuItem>
+                                <MenuItem
+                                    href="/edit-profile"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/edit-profile");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    ⚙️ Settings
+                                </MenuItem>
+                                <MenuItem
+                                    href="/logout"
+                                    onClick={(e) => {
+                                        e.syntheticEvent.preventDefault();
+                                        navigate("/logout");
+                                    }}
+                                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                                >
+                                    👋 Logout
+                                </MenuItem>
+                            </Menu>
+
+                            :
+                            <Button size="sm" color="white" href="/login">
+                                Connect ⚡
+                            </Button>
+                        )
+                    }
+                    <div className="relative h-36">
+                        <motion.div
+                            initial={{
+                                opacity: 0,
+                                y: '0'
+                            }}
+                            animate={searchOpen ? {
+                                opacity: 1,
+                                y: '0',
+                                transition: { type: "spring", stiffness: 70 }
+
+                            } : {
+                                opacity: 0,
+                                y: '-120px',
+                                transition: {
+                                    ease: "easeIn"
+                                }
+                            }}
+                            className='absolute top-0 right-0 flex items-center h-full'
+                        >
+                            <Search
+                                width={326}
+                                isOpen={searchOpen}
+                                onClose={() => setSearchOpen(false)}
+                                onResultClick={() => setSearchOpen(false)}
+                            />
+                        </motion.div>
+                    </div>
                 </div>
             </div>
         </nav>
diff --git a/src/Components/Navbar/NavMobile.tsx b/src/Components/Navbar/NavMobile.tsx
index 08fadad..15a214a 100644
--- a/src/Components/Navbar/NavMobile.tsx
+++ b/src/Components/Navbar/NavMobile.tsx
@@ -73,68 +73,70 @@ export default function NavMobile() {
   return (
     <div className={`${styles.navMobile}`}>
       <nav className={`bg-white h-[67px] w-full py-16`}>
-        <div className="content-container flex justify-between items-center">
+        <div className="content-container">
+          <div className="flex justify-between items-center">
 
-          <div className="flex-1 flex content-start">
-            <IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
-              {!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
-                : (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
-            </IconButton>
+            <div className="flex-1 flex content-start">
+              <IconButton className='auto text-2xl w-[50px] h-[50px] hover:bg-gray-200 self-center' onClick={() => toggleDrawerOpen()}>
+                {!drawerOpen ? (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
+                  : (<motion.div key={drawerOpen ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
+              </IconButton>
+
+            </div>
+
+            <div className="flex-[2] flex justify-center">
+              <Link to="/">
+                <img className='max-h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
+              </Link>
+            </div>
+
+            <div className="flex-1 flex justify-end">
+              {curUser ?
+
+                <Menu
+                  align="end"
+                  offsetY={4}
+                  menuClassName='!p-8 !rounded-12'
+                  menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
+                  <MenuItem
+                    href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
+                    onClick={(e) => {
+                      e.syntheticEvent.preventDefault();
+                      navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
+                    }}
+                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                  >
+                    👾 Profile
+                  </MenuItem>
+                  <MenuItem
+                    href="/edit-profile"
+                    onClick={(e) => {
+                      e.syntheticEvent.preventDefault();
+                      navigate("/edit-profile");
+                    }}
+                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                  >
+                    ⚙️ Settings
+                  </MenuItem>
+                  <MenuItem
+                    href="/logout"
+                    onClick={(e) => {
+                      e.syntheticEvent.preventDefault();
+                      navigate("/logout");
+                    }}
+                    className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                  >
+                    👋 Logout
+                  </MenuItem>
+                </Menu>
+                :
+                <Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
+                  Connect ⚡
+                </Button>
+
+              }</div>
 
           </div>
-
-          <div className="flex-[2] flex justify-center">
-            <Link to="/">
-              <img className='max-h-32' src={ASSETS.Logo} alt="Bolt fun logo" />
-            </Link>
-          </div>
-
-          <div className="flex-1 flex justify-end">
-            {curUser ?
-
-              <Menu
-                align="end"
-                offsetY={4}
-                menuClassName='!p-8 !rounded-12'
-                menuButton={<MenuButton ><Avatar src={curUser.avatar} width={32} /> </MenuButton>}>
-                <MenuItem
-                  href={createRoute({ type: 'profile', id: curUser.id, username: curUser.name })}
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate(createRoute({ type: 'profile', id: curUser.id, username: curUser.name }));
-                  }}
-                  className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                >
-                  👾 Profile
-                </MenuItem>
-                <MenuItem
-                  href="/edit-profile"
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate("/edit-profile");
-                  }}
-                  className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                >
-                  ⚙️ Settings
-                </MenuItem>
-                <MenuItem
-                  href="/logout"
-                  onClick={(e) => {
-                    e.syntheticEvent.preventDefault();
-                    navigate("/logout");
-                  }}
-                  className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                >
-                  👋 Logout
-                </MenuItem>
-              </Menu>
-              :
-              <Button size="sm" color="none" className="!text-body5 whitespace-nowrap" href="/login">
-                Connect ⚡
-              </Button>
-
-            }</div>
-
         </div>
       </nav>
 
diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
index 83b99f0..a96e64f 100644
--- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
+++ b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
@@ -28,36 +28,38 @@ export default function HackathonsPage() {
                 <meta property="og:title" content={'Hackathons'} />
             </Helmet>
             <div
-                className={`page-container  pt-16 w-full ${styles.grid}`}
+                className={`page-container`}
             >
-                <aside className='no-scrollbar'>
-                    <div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
-                        <h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
-                        <SortByFilter
-                            filterChanged={setSortByFilter}
-                        />
-                        {/* <TopicsFilter
+                <div className={`pt-16 w-full ${styles.grid}`}>
+                    <aside className='no-scrollbar'>
+                        <div className="flex flex-col gap-24 md:overflow-y-scroll sticky-side-element">
+                            <h1 id='title' className="text-body1 lg:text-h2 font-bolder">Hackathons 🏆</h1>
+                            <SortByFilter
+                                filterChanged={setSortByFilter}
+                            />
+                            {/* <TopicsFilter
                         filterChanged={setTopicsFilter}
                     /> */}
-                        <Button
-                            href='https://airtable.com/shrgXKynON8YWeyyE'
-                            newTab
-                            color='primary'
-                            fullWidth
-                        >
-                            List Your Hackathon
-                        </Button>
-                        <div className="hidden md:block">
-                            <Fulgur />
+                            <Button
+                                href='https://airtable.com/shrgXKynON8YWeyyE'
+                                newTab
+                                color='primary'
+                                fullWidth
+                            >
+                                List Your Hackathon
+                            </Button>
+                            <div className="hidden md:block">
+                                <Fulgur />
+                            </div>
                         </div>
-                    </div>
-                </aside>
-                <main className="self-start">
-                    <HackathonsList
-                        currentFilter={sortByFilter}
-                        isLoading={hackathonsQuery.loading}
-                        items={hackathonsQuery.data?.getAllHackathons} />
-                </main>
+                    </aside>
+                    <main className="self-start">
+                        <HackathonsList
+                            currentFilter={sortByFilter}
+                            isLoading={hackathonsQuery.loading}
+                            items={hackathonsQuery.data?.getAllHackathons} />
+                    </main>
+                </div>
             </div></>
     )
 }
diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx
index a4257cb..8a4ada7 100644
--- a/src/features/Posts/pages/FeedPage/FeedPage.tsx
+++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx
@@ -43,78 +43,80 @@ export default function FeedPage() {
                 <meta property="og:title" content={`Bolt.Fun Stories`} />
             </Helmet>
             <div
-                className={`page-container pt-16 w-full ${styles.grid}`}
+                className={`page-container`}
             >
-                <div id="title">
-                    {tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
-                        <span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
-                        <FiArrowRight />
-                        <span> {tagFilter.title}</span>
-                    </p>}
-                    <h1 className="text-h2 font-bolder">{
-                        tagFilter ?
-                            <>{tagFilter.icon} {capitalize(tagFilter.title)}</>
-                            :
-                            "Stories ✍🏼"
-                    }</h1>
-                </div>
-                <div id="sort-by">
-                    <SortBy
-                        filterChanged={setSortByFilter}
-                    />
-                </div>
-                <div id="content">
-                    <PostsList
-                        isLoading={feedQuery.loading}
-                        items={feedQuery.data?.getFeed}
-                        isFetching={isFetchingMore}
-                        onReachedBottom={fetchMore}
-                    />
-                </div>
-                <aside id='categories' className='no-scrollbar'>
-                    <div className="pb-16 md:overflow-y-scroll sticky-side-element">
-                        <Button
-                            href='/blog/create-post'
-                            color='primary'
-                            fullWidth
-                        >
-                            Write a story
-                        </Button>
-                        <div className="my-24"></div>
-                        <div className="my-24"></div>
-                        <PopularTagsFilter
-                            value={tagFilter}
-                            onChange={setTagFilter as any}
-                        />
-
+                <div className={`w-full ${styles.grid}`}>
+                    <div id="title">
+                        {tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
+                            <span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
+                            <FiArrowRight />
+                            <span> {tagFilter.title}</span>
+                        </p>}
+                        <h1 className="text-h2 font-bolder">{
+                            tagFilter ?
+                                <>{tagFilter.icon} {capitalize(tagFilter.title)}</>
+                                :
+                                "Stories ✍🏼"
+                        }</h1>
                     </div>
-                </aside>
-                <aside id='side' className='no-scrollbar'>
-                    <div className="pb-16 flex flex-col gap-24 overflow-y-auto sticky-side-element" >
-                        <TrendingCard />
-                        <div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
-                            style={{
-                                backgroundImage: "url(/assets/images/stw2.jfif)"
-                            }}
-                        >
-                            <div className="absolute bg-black inset-0 opacity-10"></div>
-                            <div className="relative flex flex-col gap-24">
-                                <div className="flex flex-col gap-8">
-                                    <p className="text-body1 font-bolder">Shock the Web 2 ⚡️</p>
-                                    <p className="text-body3 font-medium">16th - 18th June, 2022</p>
+                    <div id="sort-by">
+                        <SortBy
+                            filterChanged={setSortByFilter}
+                        />
+                    </div>
+                    <div id="content">
+                        <PostsList
+                            isLoading={feedQuery.loading}
+                            items={feedQuery.data?.getFeed}
+                            isFetching={isFetchingMore}
+                            onReachedBottom={fetchMore}
+                        />
+                    </div>
+                    <aside id='categories' className='no-scrollbar'>
+                        <div className="pb-16 md:overflow-y-scroll sticky-side-element">
+                            <Button
+                                href='/blog/create-post'
+                                color='primary'
+                                fullWidth
+                            >
+                                Write a story
+                            </Button>
+                            <div className="my-24"></div>
+                            <div className="my-24"></div>
+                            <PopularTagsFilter
+                                value={tagFilter}
+                                onChange={setTagFilter as any}
+                            />
+
+                        </div>
+                    </aside>
+                    <aside id='side' className='no-scrollbar'>
+                        <div className="pb-16 flex flex-col gap-24 overflow-y-auto sticky-side-element" >
+                            <TrendingCard />
+                            <div className='min-h-[300px] text-white flex flex-col justify-end p-24 rounded-12 relative overflow-hidden'
+                                style={{
+                                    backgroundImage: "url(/assets/images/stw2.jfif)"
+                                }}
+                            >
+                                <div className="absolute bg-black inset-0 opacity-10"></div>
+                                <div className="relative flex flex-col gap-24">
+                                    <div className="flex flex-col gap-8">
+                                        <p className="text-body1 font-bolder">Shock the Web 2 ⚡️</p>
+                                        <p className="text-body3 font-medium">16th - 18th June, 2022</p>
+                                    </div>
+                                    <Button
+                                        color='white'
+                                        fullWidth
+                                        href='https://discord.gg/HFqtxavb7x'
+                                        newTab
+                                    >
+                                        <FaDiscord className='scale-125 mr-8' /> <span className="align-middle">Join in Discord</span>
+                                    </Button>
                                 </div>
-                                <Button
-                                    color='white'
-                                    fullWidth
-                                    href='https://discord.gg/HFqtxavb7x'
-                                    newTab
-                                >
-                                    <FaDiscord className='scale-125 mr-8' /> <span className="align-middle">Join in Discord</span>
-                                </Button>
                             </div>
                         </div>
-                    </div>
-                </aside>
+                    </aside>
+                </div>
             </div>
         </>
     )
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
index 345774f..42b7f54 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
@@ -45,29 +45,31 @@ export default function PostDetailsPage() {
             </Helmet>
             <ScrollToTop />
             <div
-                className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
+                className={`page-container`}
             >
-                <aside id='actions' className='no-scrollbar'>
-                    <div className="sticky-side-element">
-                        <PostActions post={post} />
-                    </div>
-                </aside>
+                <div className={`grid w-full gap-32 ${styles.grid}`}>
+                    <aside id='actions' className='no-scrollbar'>
+                        <div className="sticky-side-element">
+                            <PostActions post={post} />
+                        </div>
+                    </aside>
 
 
-                <PageContent post={post} />
-                <aside id='author' className='no-scrollbar min-w-0'>
-                    <div className="flex flex-col gap-24 overflow-y-auto sticky-side-element">
-                        <AuthorCard author={post.author} />
-                        <div className="hidden md:block"><TrendingCard /></div>
+                    <PageContent post={post} />
+                    <aside id='author' className='no-scrollbar min-w-0'>
+                        <div className="flex flex-col gap-24 overflow-y-auto sticky-side-element">
+                            <AuthorCard author={post.author} />
+                            <div className="hidden md:block"><TrendingCard /></div>
+                        </div>
+                    </aside>
+                    <div id="comments">
+                        <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>
-                </aside>
-                <div id="comments">
-                    <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/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
index 204250b..2d87707 100644
--- a/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
@@ -45,55 +45,57 @@ export default function EditProfilePage() {
                 <title>Settings</title>
                 <meta property="og:title" content='Settings' />
             </Helmet>
-            <div className="page-container grid grid-cols-1 md:grid-cols-4 gap-24">
-                <aside>
-                    {isMediumScreen ?
-                        <Card className="sticky-side-element">
-                            <p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
-                            <ul className=' flex flex-col gap-8'>
-                                {links.map((link, idx) =>
-                                    <li key={idx}>
-                                        <NavLink
-                                            to={link.path}
-                                            className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
+            <div className="page-container">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-24">
+                    <aside>
+                        {isMediumScreen ?
+                            <Card className="sticky-side-element">
+                                <p className="text-body2 font-bolder text-black mb-16">Edit maker profile</p>
+                                <ul className=' flex flex-col gap-8'>
+                                    {links.map((link, idx) =>
+                                        <li key={idx}>
+                                            <NavLink
+                                                to={link.path}
+                                                className={({ isActive }) => `flex items-start rounded-8 cursor-pointer font-bold p-12
                                  active:scale-95 transition-transform
                                 ${isActive ? 'bg-gray-100' : 'hover:bg-gray-50'}
                                 `}
+                                            >
+                                                {link.text}
+                                            </NavLink>
+                                        </li>)}
+                                </ul>
+                            </Card>
+                            :
+                            <div className="border-b-2 border-gray-200">
+                                <Slider>
+                                    {links.map((link, idx) =>
+                                        <NavLink
+                                            to={link.path}
+                                            key={idx}
+                                            className={`flex items-start cursor-pointer font-bold py-12
+                                                active:scale-95 transition-transform`}
+                                            style={({ isActive }) => ({
+                                                boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
+                                            })}
                                         >
                                             {link.text}
                                         </NavLink>
-                                    </li>)}
-                            </ul>
-                        </Card>
-                        :
-                        <div className="border-b-2 border-gray-200">
-                            <Slider>
-                                {links.map((link, idx) =>
-                                    <NavLink
-                                        to={link.path}
-                                        key={idx}
-                                        className={`flex items-start cursor-pointer font-bold py-12
-                                                active:scale-95 transition-transform`}
-                                        style={({ isActive }) => ({
-                                            boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
-                                        })}
-                                    >
-                                        {link.text}
-                                    </NavLink>
-                                )}
-                            </Slider>
-                        </div>
-                    }
-                </aside>
-                <main className="md:col-span-3">
-                    <Routes>
-                        <Route index element={<Navigate to='basic-info' />} />
-                        <Route path='basic-info' element={<BasicProfileInfoTab />} />
-                        <Route path='roles-skills' element={<RolesSkillsTab />} />
-                        <Route path='preferences' element={<PreferencesTab />
-                        } />
-                    </Routes>
-                </main>
+                                    )}
+                                </Slider>
+                            </div>
+                        }
+                    </aside>
+                    <main className="md:col-span-3">
+                        <Routes>
+                            <Route index element={<Navigate to='basic-info' />} />
+                            <Route path='basic-info' element={<BasicProfileInfoTab />} />
+                            <Route path='roles-skills' element={<RolesSkillsTab />} />
+                            <Route path='preferences' element={<PreferencesTab />
+                            } />
+                        </Routes>
+                    </main>
+                </div>
             </div>
         </>
     )
diff --git a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
index 92142be..e358d88 100644
--- a/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
+++ b/src/features/Profiles/pages/ProfilePage/ProfilePage.tsx
@@ -48,9 +48,10 @@ export default function ProfilePage() {
                 }
                 <meta property="og:image" content={profileQuery.data.profile.avatar} />
             </Helmet>
-            <div className={`page-container ${styles.grid}`}
+            <div className={`page-container`}
             >
-                {isMediumScreen ?
+                <div className={`${styles.grid}`}
+                >{isMediumScreen ?
                     <>
                         <aside>
 
@@ -76,7 +77,7 @@ export default function ProfilePage() {
                             <StoriesCard stories={profileQuery.data.profile.stories} isOwner={isOwner} />
                         </main>
                     </>
-                }
+                    }</div>
             </div>
         </>
     )
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index 27053cd..88f3fb7 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -11,10 +11,8 @@ export default function ExplorePage() {
                 <title>{`Explore Lightning Products`}</title>
                 <meta property="og:title" content={`Explore Lightning Products`} />
             </Helmet>
-            <div className="page-container pt-16">
-
+            <div className="page-container">
                 <Header />
-
                 <div className="my-32">
                     <Categories />
                 </div>
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 96fdc2e..b94d9f1 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -26,21 +26,27 @@ body {
   @include gt-md {
     --padding: 32px;
   }
-  width: calc(min(100% - 2 * var(--padding), 1440px));
-  margin: 0 auto;
+
+  display: grid;
+  grid-template-columns: minmax(var(--padding), 1fr) minmax(auto, 1440px) minmax(
+      var(--padding),
+      1fr
+    );
+
+  > * {
+    grid-column: 2/3;
+    min-width: 0;
+  }
+
+  > .full-width {
+    grid-column: 1/-1;
+  }
 }
 
 .page-container {
   padding: 32px 0;
 }
 
-// @media screen and (min-width: 780px) {
-//   .page-container {
-//     width: calc(min(100% - 64px, 1440px));
-//     margin: 0 auto;
-//   }
-// }
-
 svg {
   display: inline-block;
 }