diff --git a/src/components/layout/DefaultLayout/index.tsx b/src/components/layout/DefaultLayout/index.tsx
index 432446de4..d8d448835 100644
--- a/src/components/layout/DefaultLayout/index.tsx
+++ b/src/components/layout/DefaultLayout/index.tsx
@@ -60,8 +60,8 @@ const StyledNotificationBar = styled.div<{ variant?: string }>`
 
 const DefaultLayout: React.FC<{
   white?: boolean
-  noHeader?: boolean
-  noFooter?: boolean
+  noHeader?: boolean | null
+  noFooter?: boolean | null
   noCart?: boolean
   noGeneralLogin?: boolean
   noNotificationBar?: boolean
@@ -108,7 +108,10 @@ const DefaultLayout: React.FC<{
         />
       )}
 
-      <StyledLayoutWrapper variant={white ? 'white' : undefined} header={noHeader ? 'noHeader' : ''}>
+      <StyledLayoutWrapper
+        variant={white ? 'white' : undefined}
+        header={noHeader ? 'noHeader' : '' /* for remove blank on the top */}
+      >
         <StyledLayoutHeader className={`d-flex align-items-center justify-content-between ${noHeader ? 'hidden' : ''}`}>
           <div className="d-flex align-items-center">
             <LogoBlock className="mr-4">
diff --git a/src/pages/LoadingPage.tsx b/src/pages/LoadingPage.tsx
index 7c7e67f9c..a4c7b2163 100644
--- a/src/pages/LoadingPage.tsx
+++ b/src/pages/LoadingPage.tsx
@@ -1,6 +1,7 @@
 import { Spinner } from '@chakra-ui/react'
 import React from 'react'
 import styled from 'styled-components'
+import { BooleanParam, useQueryParams } from 'use-query-params'
 import DefaultLayout from '../components/layout/DefaultLayout'
 
 const StyledDiv = styled.div`
@@ -11,8 +12,12 @@ const StyledDiv = styled.div`
 `
 
 const LoadingPage: React.VFC = () => {
+  const [{ noHeader }] = useQueryParams({
+    noHeader: BooleanParam,
+  })
+
   return (
-    <DefaultLayout noFooter>
+    <DefaultLayout noFooter noHeader={noHeader}>
       <StyledDiv className="loading">
         <Spinner size="lg" />
       </StyledDiv>
diff --git a/src/pages/MeetingPage/MeetingPage.tsx b/src/pages/MeetingPage/MeetingPage.tsx
index c09b6a995..432aaa7ff 100644
--- a/src/pages/MeetingPage/MeetingPage.tsx
+++ b/src/pages/MeetingPage/MeetingPage.tsx
@@ -6,7 +6,9 @@ import Cookies from 'js-cookie'
 import { useApp } from 'lodestar-app-element/src/contexts/AppContext'
 import { useState } from 'react'
 import { useParams } from 'react-router-dom'
+import { BooleanParam } from 'serialize-query-params'
 import styled from 'styled-components'
+import { useQueryParams } from 'use-query-params'
 import DefaultLayout from '../../components/layout/DefaultLayout'
 import hasura from '../../hasura'
 import LoadingPage from '../LoadingPage'
@@ -31,8 +33,13 @@ const GetMemberByUsername = gql`
 `
 
 const MeetingPage = () => {
-  const { id: appId, settings } = useApp()
+  const { id: appId, settings, loading: loadingAppData } = useApp()
   const { username: managerUsername } = useParams<{ username: string }>()
+  const [{ noHeader, noFooter }] = useQueryParams({
+    noHeader: BooleanParam,
+    noFooter: BooleanParam,
+  })
+
   const [isSubmitting, setIsSubmitting] = useState(false)
 
   const categoryCheckboxes = JSON.parse(settings['custom.meeting_page']).categoryCheckboxes as CategoryCheckboxes // array of checkboxes
@@ -50,7 +57,7 @@ const MeetingPage = () => {
 
   const managerId = managerUsername ? memberData?.member_public[0]?.id || undefined : undefined
 
-  if (loading) {
+  if (loading && loadingAppData) {
     return <LoadingPage />
   }
 
@@ -123,7 +130,7 @@ const MeetingPage = () => {
   }
 
   return (
-    <DefaultLayout centeredBox>
+    <DefaultLayout centeredBox noFooter={noFooter} noHeader={noHeader}>
       <StyledForm onSubmit={handleSubmit}>
         <Heading as="h3" size="lg" className="mb-4 text-center">
           {managerUsername} 預約連結