diff --git a/src/components/Views/Feed/Feed.module.scss b/src/components/Views/Feed/Feed.module.scss
index d887266a..6da5b4ac 100644
--- a/src/components/Views/Feed/Feed.module.scss
+++ b/src/components/Views/Feed/Feed.module.scss
@@ -1,3 +1,7 @@
+.feed {
+  padding-top: 7.2rem;
+}
+
 .feedFilter {
   @include media-breakpoint-down(md) {
     margin-right: 1rem !important;
diff --git a/src/components/Views/Feed/Feed.tsx b/src/components/Views/Feed/Feed.tsx
index cbb2a7e5..b083104d 100644
--- a/src/components/Views/Feed/Feed.tsx
+++ b/src/components/Views/Feed/Feed.tsx
@@ -107,7 +107,7 @@ export const FeedView = (props: FeedProps) => {
   const currentPeriod = createMemo(() => asOption(searchParams?.period || ''))
 
   return (
-    <div class="feed">
+    <div class={clsx('wide-container', styles.feed)}>
       <div class="row">
         <div class={clsx('col-md-5 col-xl-4', styles.feedNavigation)}>
           <Sidebar />
diff --git a/src/components/Views/StaticPage.tsx b/src/components/Views/StaticPage.tsx
index d6eebfb9..6138cd40 100644
--- a/src/components/Views/StaticPage.tsx
+++ b/src/components/Views/StaticPage.tsx
@@ -18,7 +18,7 @@ export const StaticPage = (props: Props) => {
     <PageLayout title={props.title} desc={props.desc} key={props.title.toLowerCase()}>
       <article class="wide-container container--static-page" id="articleBody" ref={(el) => (bodyEl = el)}>
         <div class="row">
-          <div class="col-md-12 col-xl-14 offset-md-5 order-md-first mt-5">
+          <div class="col-md-12 col-xl-14 offset-md-5 order-md-first">
             <h1>{props.title}</h1>
             {props.children}
           </div>
diff --git a/src/components/_shared/PageLayout.tsx b/src/components/_shared/PageLayout.tsx
index 1ae5d22c..d6f54bea 100644
--- a/src/components/_shared/PageLayout.tsx
+++ b/src/components/_shared/PageLayout.tsx
@@ -78,7 +78,7 @@ export const PageLayout = (props: PageLayoutProps) => {
         })}
         classList={{ 'main-content--no-padding': !isHeaderFixed }}
       >
-        <div class={clsx([props.class, 'wide-container'])}>{props.children}</div>
+        {props.children}
       </main>
       <Show when={props.hideFooter !== true}>
         <FooterView />
diff --git a/src/components/_shared/TableOfContents/TableOfContents.tsx b/src/components/_shared/TableOfContents/TableOfContents.tsx
index 2f27b935..4320c30c 100644
--- a/src/components/_shared/TableOfContents/TableOfContents.tsx
+++ b/src/components/_shared/TableOfContents/TableOfContents.tsx
@@ -85,7 +85,7 @@ export const TableOfContents = (props: Props) => {
           [styles.TableOfContentsFixedWrapperLefted]: props.variant === 'editor'
         })}
       >
-        <div class={styles.TableOfContentsContainer}>
+        <div class={styles.TableOfContentsContainer} data-custom-scroll="on">
           <Show when={isVisible()}>
             <div class={styles.TableOfContentsContainerInner}>
               <div class={styles.TableOfContentsHeader}>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index b5d694b2..694c9be6 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -848,7 +848,7 @@ figure {
 
 .main-content {
   @include media-breakpoint-up(lg) {
-    // padding-top: 130px;
+     padding-top: 130px;
   }
 
   flex: 1 100%;
@@ -1031,25 +1031,25 @@ details {
   Not supports in Firefox and IE */
 
   /* total width */
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     background-color: #fff;
     width: 16px;
   }
 
   /* background of the scrollbar except button or resizer */
-  ::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     background-color: #fff;
   }
 
   /* scrollbar itself */
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     background-color: #babac0;
     border-radius: 16px;
     border: 4px solid #fff;
   }
 
   /* set button(top and bottom of the scrollbar) */
-  ::-webkit-scrollbar-button {
+  &::-webkit-scrollbar-button {
     display: none;
   }
 }