Overiding the default GraphQL sandbox with GraphQL Playground

Everytime when I created a graphQL server with ApolloServer and express when I navigate to http//:localhost:4000/graphql it opens me a sandbox which looks like:

What i really want to do is to open a graphql playground which looks like this

The reason i want this playground it's because it allows me to works with cookies very eaisly. I was thinking installing this exextion on my chrome browser will help. Unfortunately it did not work. Here is the instance of my ApolloSever with express in code:

 const apolloServer = new ApolloServer({
    schema: await buildSchema({
      resolvers: [HelloResolver, TodoResolver, AuthResolver],
      validate: false,
    }),
  });
  await apolloServer.start();
  apolloServer.applyMiddleware({ app });

Please if you know where what i'm missing help. t has been hours sitting here nothing works

Wow! After some hours i realized that I was looking for answers at wrong places. I started reading the docs line by line only to found out that the feature i wanted if for Apollo Server 2 and I'm using Apollo Server 3. So to solve this I had to go to my ApolloServer instance and add the following under plugins option:

...
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";
...
  const apolloServer = new ApolloServer({
    ....
    plugins: [ApolloServerPluginLandingPageGraphQLPlayground({})],
  });