diff --git a/app/client/src/comments/AppComments/AppCommentThreads.tsx b/app/client/src/comments/AppComments/AppCommentThreads.tsx
index 0c510f1083..9f3e320eb4 100644
--- a/app/client/src/comments/AppComments/AppCommentThreads.tsx
+++ b/app/client/src/comments/AppComments/AppCommentThreads.tsx
@@ -3,12 +3,12 @@ import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 
 import {
-  getSortedAndFilteredAppCommentThreadIds,
-  applicationCommentsSelector,
   allCommentThreadsMap,
-  getAppCommentThreads,
-  shouldShowResolved as shouldShowResolvedSelector,
   appCommentsFilter as appCommentsFilterSelector,
+  applicationCommentsSelector,
+  getAppCommentThreads,
+  getSortedAndFilteredAppCommentThreadIds,
+  shouldShowResolved as shouldShowResolvedSelector,
 } from "selectors/commentsSelectors";
 import { getCurrentApplicationId } from "selectors/editorSelectors";
 
@@ -30,6 +30,33 @@ const Container = styled.div`
   overflow: auto;
 `;
 
+export const useSortedCommentThreadIds = (commentThreadIds: string[]) => {
+  const commentThreadsMap = useSelector(allCommentThreadsMap);
+  const shouldShowResolved = useSelector(shouldShowResolvedSelector);
+  const appCommentsFilter = useSelector(appCommentsFilterSelector);
+
+  const currentUser = useSelector(getCurrentUser);
+  const currentUsername = currentUser?.username;
+
+  return useMemo(
+    () =>
+      getSortedAndFilteredAppCommentThreadIds(
+        commentThreadIds,
+        commentThreadsMap,
+        shouldShowResolved,
+        appCommentsFilter,
+        currentUsername,
+      ),
+    [
+      commentThreadIds,
+      commentThreadsMap,
+      shouldShowResolved,
+      appCommentsFilter,
+      currentUsername,
+    ],
+  );
+};
+
 function AppCommentThreads() {
   const dispatch = useDispatch();
   const commentThreadIdFromUrl = useSelectCommentThreadUsingQuery();
@@ -38,30 +65,8 @@ function AppCommentThreads() {
     applicationCommentsSelector(applicationId),
   );
   const appCommentThreadIds = getAppCommentThreads(appCommentThreadsByRefMap);
-  const commentThreadsMap = useSelector(allCommentThreadsMap);
-  const shouldShowResolved = useSelector(shouldShowResolvedSelector);
-  const appCommentsFilter = useSelector(appCommentsFilterSelector);
 
-  const currentUser = useSelector(getCurrentUser);
-  const currentUsername = currentUser?.username;
-
-  const commentThreadIds = useMemo(
-    () =>
-      getSortedAndFilteredAppCommentThreadIds(
-        appCommentThreadIds,
-        commentThreadsMap,
-        shouldShowResolved,
-        appCommentsFilter,
-        currentUsername,
-      ),
-    [
-      appCommentThreadIds,
-      commentThreadsMap,
-      shouldShowResolved,
-      appCommentsFilter,
-      currentUsername,
-    ],
-  );
+  const commentThreadIds = useSortedCommentThreadIds(appCommentThreadIds);
 
   useEffect(() => {
     // if user is visiting a comment thread link which is already resolved,
diff --git a/app/client/src/comments/inlineComments/Comments.tsx b/app/client/src/comments/inlineComments/Comments.tsx
index d73552fcc0..3497afa89e 100644
--- a/app/client/src/comments/inlineComments/Comments.tsx
+++ b/app/client/src/comments/inlineComments/Comments.tsx
@@ -14,6 +14,7 @@ import {
 } from "selectors/editorSelectors";
 import { useLocation } from "react-router";
 import { AppState } from "reducers";
+import { useSortedCommentThreadIds } from "../AppComments/AppCommentThreads";
 
 // TODO refactor application comment threads by page id to optimise
 // if lists turn out to be expensive
@@ -64,10 +65,13 @@ export const useSelectCommentThreadUsingQuery = () => {
  * Children set their position themselves
  */
 function Comments({ refId }: { refId: string }) {
-  const applicationId = useSelector(getCurrentApplicationId);
-  const commentsThreadIds = useSelector(
+  const applicationId = useSelector(getCurrentApplicationId) as string;
+  const commentThreadIdsByRef = useSelector(
     refCommentThreadsSelector(refId, applicationId),
   );
+  const commentThreadIds = useSortedCommentThreadIds(
+    commentThreadIdsByRef as string[],
+  );
   const unpublishedCommentThread = useSelector(
     unpublishedCommentThreadSelector(refId),
   );
@@ -75,14 +79,17 @@ function Comments({ refId }: { refId: string }) {
 
   return (
     <>
-      {Array.isArray(commentsThreadIds) &&
-        commentsThreadIds.map((commentsThreadId: any) => (
-          <MemoisedInlinePageCommentPin
-            commentThreadId={commentsThreadId}
-            focused={commentThreadIdInUrl === commentsThreadId}
-            key={commentsThreadId}
-          />
-        ))}
+      {Array.isArray(commentThreadIds) &&
+        commentThreadIds
+          .slice()
+          .reverse()
+          .map((commentsThreadId: any) => (
+            <MemoisedInlinePageCommentPin
+              commentThreadId={commentsThreadId}
+              focused={commentThreadIdInUrl === commentsThreadId}
+              key={commentsThreadId}
+            />
+          ))}
       {/**
        * Exists in store, not yet created in db
        * Its kept separately in state to reset easily
diff --git a/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx b/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
index a1ff4a8bae..c1e8955c19 100644
--- a/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
+++ b/app/client/src/comments/inlineComments/UnpublishedCommentThread.tsx
@@ -28,7 +28,7 @@ const CommentTriggerContainer = styled.div<{
 }>`
   position: absolute;
   ${(props) => getPosition(props)}
-
+  z-index: 1;
   & svg {
     width: 30px;
     height: 30px;
diff --git a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx b/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
index 44268a9cb2..b1c13c0240 100644
--- a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
+++ b/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
@@ -55,7 +55,9 @@ const AppsmithLayouts: AppsmithLayoutConfigOption[] = [
 ];
 
 const LayoutControlWrapper = styled.div`
-  height: 40px;
+  position: absolute;
+  height: ${(props) => props.theme.spaces[15]}px;
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/app/client/src/pages/Editor/WidgetsEditor.tsx b/app/client/src/pages/Editor/WidgetsEditor.tsx
index 224c918e91..ffb1e5ec00 100644
--- a/app/client/src/pages/Editor/WidgetsEditor.tsx
+++ b/app/client/src/pages/Editor/WidgetsEditor.tsx
@@ -132,10 +132,10 @@ function WidgetsEditor() {
         onClick={handleWrapperClick}
         onDragStart={onDragStart}
       >
-        <MainContainerLayoutControl />
         <CanvasContainer className={getCanvasClassName()} key={currentPageId}>
           {node}
         </CanvasContainer>
+        <MainContainerLayoutControl />
         <Debugger />
         <CrudInfoModal />
       </EditorWrapper>
diff --git a/app/client/src/pages/common/ArtBoard.tsx b/app/client/src/pages/common/ArtBoard.tsx
index 351056630a..46a09fdb85 100644
--- a/app/client/src/pages/common/ArtBoard.tsx
+++ b/app/client/src/pages/common/ArtBoard.tsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 export default styled.div<{ width: number }>`
   width: ${(props) => props.width}px;
-  margin: 0 auto;
+  margin: ${(props) => props.theme.spaces[15]}px auto 0;
   position: relative;
   background: ${(props) => {
     return props.theme.colors.artboard;