diff --git a/src/containers/App/App.css b/src/containers/App/App.css
index 4538f2068b1fa489d2182c4aee9f6e8b501ad305..1b6a6e9779d625efc46c0d71aa99ee620eb0d164 100644
--- a/src/containers/App/App.css
+++ b/src/containers/App/App.css
@@ -8,6 +8,10 @@ body {
   margin-left: auto;
 }
 
+.bg-gray {
+  background-color: #A9A9A9;
+}
+
 .bg-dark {
   background-color: #343a40 !important;
 }
@@ -679,4 +683,11 @@ footer a:hover {
   height: 30%;
   width: auto;
   
+}
+
+.center-div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
 }
\ No newline at end of file
diff --git a/src/contents/notebook.tsx b/src/contents/notebook.tsx
index 34c1f0548d8d59ba74315d3a84041e0039960ee6..a225b52782759bfcdbd663de2b68dbd245356177 100644
--- a/src/contents/notebook.tsx
+++ b/src/contents/notebook.tsx
@@ -64,15 +64,21 @@ export function Notebook() {
           
               
               <Element name="section1" className="element" id='section1'>
-                <div className='row'>
-                  <div className='col-4'><img src='https://placehold.co/600x400' className='responsive-img' /></div>
-                  <div className='col-6 rounded-border'>
-                    <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-                </div>
+                <div className='row center-div'>
+                  <div className='col-4 '><img src='https://placehold.co/600x400' className='responsive-img' /></div>
+                    <div className='col-6 '>
+                      <div className='rounded-border '>
+                        <h3 className="center-text">我是大帅B</h3>
+                        <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                        <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                      </div>
+                    </div>
                 </div>
                 </Element>
+
+                <div className="bd-callout bd-callout-info bg-gray">
+                  <h1>没有什么能够阻挡我们！！</h1>
+                </div>
                  {/* <h2>Section 1</h2>
                  <p>Content for section 1.</p>
                  <img 
@@ -86,15 +92,16 @@ export function Notebook() {
           
               
               <Element name="section2" className="element" id='section2'>
-              <div className='row'>
-              <div className='col-6 rounded-border'>
-                    <h4 className="center-text">我是大帅B</h4>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-              <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
-                </div>
-                  <div className='col-4'><img src='https://placehold.co/600x400' className='responsive-img' /></div>
-                  
-                </div>
+                  <div className='row center-div'>
+                      <div className='col-6 '>
+                        <div className='rounded-border '>
+                          <h3 className="center-text">我是大帅B</h3>
+                          <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                          <p className="indent">las ijffs aiskfd fskj iiwls asd.aass ffas awssd awus iisal fask.aisisad ksjdfkaf iwjasifjakdshf wijdfalksjf wiksjkfjksalhf, gsahfjhgejkfh  uhaejkfh sjdihgfuqiw jh sjiafhjsaj fh asd.</p>
+                        </div>
+                      </div>
+                      <div className='col-4'><img src='https://placehold.co/600x400' className='responsive-img' /></div>
+                  </div>
               </Element>