diff --git a/pages/toolbox/[slug].js b/pages/toolbox/[slug].js
index 3f6e1899..bdc2461c 100644
--- a/pages/toolbox/[slug].js
+++ b/pages/toolbox/[slug].js
@@ -124,7 +124,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
                   </div>
                 </div>
 
-                <div className="flex mt-6 md:mt-0 md:flex-col md:justify-center">
+                <div className="flex flex-none mt-6 md:mt-0 md:flex-col md:justify-center">
                   <div className="flex justify-end">
                     <a
                       target={"_blank"}
@@ -185,7 +185,7 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
                  {gallery?.length ? <Carousel gallery={gallery}/>:''}
               </div>
               <div className="max-w-[1100px] mx-auto w-full">
-                <div className="max-w-[900px] mx-auto">
+                <div className="max-w-[900px] blog-content toolbox-content mx-auto">
                   <h2 class="text-2xl font-medium mb-8">Overview</h2>
                     <div
                         style={{ color: "#222", fontSize: "18px", lineHeight: '33px' }}
@@ -211,9 +211,10 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
                       : "https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png"
                   }
                 />:''}
+                  </div>
                  {post?.attributes?.author && (
                   <>
-                  <h1 tabIndex={0} className="mt-10 text-sm mb-3 font-semibold">{post?.attributes?.creator?'Contributors':'Posted by'}</h1> 
+                  <h1 tabIndex={0} className="mt-16 text-sm mb-3 font-semibold">{post?.attributes?.creator?'Contributors':'Posted by'}</h1> 
                             <div className=" mb-3 flex">
                               <AuthorCard
                                 title={post?.attributes?.creator?"Curator":null}
@@ -230,7 +231,6 @@ const ToolContent = ({ post, gallery, relatedPosts, popularTags }) => {
                             </div>
                   </>
                           )}
-                  </div>
                 </div>
           </div>
           <SectionDivider py="py-3" transparentLine={true}/>
diff --git a/styles/posts-page.scss b/styles/posts-page.scss
index a7d3e9fd..52669726 100644
--- a/styles/posts-page.scss
+++ b/styles/posts-page.scss
@@ -25,6 +25,103 @@ p:empty + p:empty {
 p:empty + p:not(:empty) {
     display: block;
 }
+
+/**********************
+***********************/
+// content max width
+.blog-content{
+    *:not(.tippy-content *, .tippy-box, [data-tippy-root]), ul, ol{
+        max-width: 44rem;
+    }
+   figure>img.w-full, figure.size-large>img{
+        width:44rem;
+    }
+    blockquote.wp-block-quote, figure.wp-block-image.size-large.full-size, figure.wp-block-image.size-full{
+    max-width:44rem;
+        p{
+            max-width: 44rem;
+            font-size:1.8rem;
+            line-height:2.5rem;
+        }
+    }
+    blockquote {
+        max-width: 46.4rem!important;
+    }
+    .wp-block-image {
+        img.full-size{
+         max-width:56rem;
+        }
+    }
+   .fig-img{
+        max-width: 100%!important;
+    }
+    figcaption{
+        max-width: 40rem!important;
+    }
+    blockquote.wp-block-quote.main-menu{
+        max-width: 40rem;
+    }
+    blockquote.wp-block-quote{
+        max-width: 42.5rem!important;
+    }
+    .wp-block-pullquote{
+        max-width: 36rem;
+    }
+}
+/**********************
+***********************/
+/**
+toolbox width
+**/
+.blog-content.toolbox-content{
+    iframe{
+        width:100%!important;
+        margin-top: 1rem;
+        margin-bottom: 2rem;
+        min-height: 440px;
+    }
+    *:not(.tippy-content *, .tippy-box, [data-tippy-root]), ul, ol{
+        max-width: 54rem;
+    }
+   figure>img.w-full, figure.size-large>img{
+        width:54rem;
+    }
+    blockquote.wp-block-quote, figure.wp-block-image.size-large.full-size, figure.wp-block-image.size-full{
+    max-width:54rem;
+        p{
+            max-width: 54rem;
+            font-size:1.8rem;
+            line-height:2.5rem;
+        }
+    }
+    blockquote {
+        max-width: 56.4rem!important;
+    }
+    .wp-block-image {
+        img.full-size{
+         max-width:66rem;
+        }
+    }
+   .fig-img{
+        max-width: 100%!important;
+    }
+    figcaption{
+        max-width: 50rem!important;
+    }
+    blockquote.wp-block-quote.main-menu{
+        max-width: 50rem;
+    }
+    blockquote.wp-block-quote{
+        max-width: 52.5rem!important;
+    }
+    .wp-block-pullquote{
+        max-width: 46rem;
+    }
+}
+/**********************
+***********************/
+/**********************
+***********************/
 .blog-content{
    
     *{
@@ -115,7 +212,6 @@ figure, pre{
         strong{
             font-weight: normal;
         }
-        max-width: 46.4rem!important;
     }
     // blockquote:before {
     //     color: #1d3d7d;
@@ -133,11 +229,7 @@ figure, pre{
         margin: 2.5rem auto;
         border-radius: 0.375rem;
     }
-   *:not(.tippy-content *, .tippy-box, [data-tippy-root]), ul, ol{
-    max-width: 44rem;
-    // margin-right: auto;
-    // margin-left: auto;
-   }
+  
    ul{
     list-style-type: disc;
     list-style-position: inside;
@@ -158,11 +250,7 @@ figure, pre{
            list-style-position: inherit;
         }
     }
-   .wp-block-image {
-       img.full-size{
-        max-width:56rem;
-       }
-   }
+   
    li{
     // margin-left:2rem;
     margin-top:1.25rem;
@@ -170,9 +258,6 @@ figure, pre{
    li>p, ol>p{
        display:inline;
    }
-   .fig-img{
-       max-width: 100%!important;
-   }
    figure>img{
        margin-bottom:0px!important;
    }
@@ -194,14 +279,8 @@ figure, pre{
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     border-radius: 4px;
    }
-   figure>img.w-full, figure.size-large>img{
-       width:44rem;
-   }
    blockquote.wp-block-quote, figure.wp-block-image.size-large.full-size, figure.wp-block-image.size-full{
-       max-width:44rem;
        p{
-           max-width: 44rem;
-        //    font-style:normal;
            font-size:1.8rem;
            line-height:2.5rem;
        }
@@ -216,7 +295,6 @@ figure, pre{
   color: #242424b6;
   margin-top: -0.5rem;
   text-align: center;
-  max-width: 40rem!important;
   }
   .p-3{
     padding:0.75rem;
@@ -238,7 +316,6 @@ figure, pre{
        max-width: 100%;
    }
    blockquote.wp-block-quote.main-menu{
-    max-width: 40rem;
     margin: 0em 0px;
     margin-left:auto;
     margin-right: auto;
@@ -256,7 +333,6 @@ figure, pre{
     strong{
         font-weight: 300!important;
     }
-    max-width: 42.5rem!important;
     // margin: 2.5em auto;
     font-size:1.5rem;
     a{
@@ -348,7 +424,6 @@ figure, pre{
       background: none; 
      border-left:none; 
         padding: 0px;
-        max-width: 36rem;
   }
   blockquote:before{
       display: none;