title: Unable to drag drop components on AEM new page
body: <p>I am following AEM tutorial <a href="https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-develop/project-archetype/component-basics.html?lang=en#component-authoring" rel="nofollow noreferrer">wknd tutorial</a>. I have created the project using archetype and installed it on local AEM instance. Unlike the tutorial when i create a new page i do not get the option to drag and drop components and neither am i able to find any components in side rail.
  <a href="https://i.stack.imgur.com/gp1V0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gp1V0.png" alt="enter image description here" /></a></p>
  <p>I went to the template to edit it in design mode and enable components but could not find design mode to edit it to enable components.
  <a href="https://i.stack.imgur.com/daBWZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/daBWZ.png" alt="enter image description here" /></a></p>
  <p>I am not sure what to do to follow along with the tutorial. Any help is much appreciated.</p>
  <p><a href="https://i.stack.imgur.com/qbKyi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qbKyi.png" alt="system console" /></a></p>