diff --git a/static/css/ads.css b/static/css/ads.css
new file mode 100644
index 0000000..0e3236f
--- /dev/null
+++ b/static/css/ads.css
@@ -0,0 +1,27 @@
+.mobileShow { 
+   display: none; 
+   margin-left: auto;
+   margin-right: auto;
+}
+
+/* Smartphone Portrait and Landscape */
+@media only screen
+  and (min-device-width : 320px)
+  and (max-device-width : 480px){ 
+    .mobileShow {
+      display: inline;
+   }
+}
+
+.mobileHide { 
+   display: inline; 
+   margin-left: auto;
+   margin-right: auto;
+}
+
+/* Smartphone Portrait and Landscape */
+@media only screen
+  and (min-device-width : 320px)
+  and (max-device-width : 480px){
+   .mobileHide { display: none;}
+}
\ No newline at end of file
diff --git a/templates/blog/render_text.html b/templates/blog/render_text.html
index afb3a5c..920caa1 100644
--- a/templates/blog/render_text.html
+++ b/templates/blog/render_text.html
@@ -6,12 +6,40 @@ <h1 class="post-title">{{title}}</h1>
 
    <div id="markdown-preview" class="container-body" ></div>
 
+   
+   <div class="mobileShow">
+      <script type="text/javascript">
+         atOptions = {
+            'key' : 'c34b890830441c5779af24050c237fdb',
+            'format' : 'iframe',
+            'height' : 250,
+            'width' : 300,
+            'params' : {}
+         };
+      </script>
+      <script type="text/javascript" src="//www.topcreativeformat.com/c34b890830441c5779af24050c237fdb/invoke.js"></script>
+   </div>
+
+   <div class="mobileHide">
+      <script type="text/javascript">
+         atOptions = {
+            'key' : 'e8da11898f0876eb2f24d27e7c94739b',
+            'format' : 'iframe',
+            'height' : 90,
+            'width' : 728,
+            'params' : {}
+         };
+      </script>
+      <script type="text/javascript" src="//www.topcreativeformat.com/e8da11898f0876eb2f24d27e7c94739b/invoke.js"></script>
+   </div> 
+   
+   
    <script type="text/javascript">
       document.addEventListener('DOMContentLoaded', function() {
          const text = ({{body | tojson | safe}});
-
+         
          const htmlPreview = document.getElementById('markdown-preview');
          htmlPreview.innerHTML = marked.parse(text);
       });
-  </script>
+   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/layout.html b/templates/layout.html
index 8b617b3..6af89b5 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -30,7 +30,9 @@
         <link rel="stylesheet" href="{{ url_for('static',    filename='css/reset.css') }}">
         <link rel="stylesheet" href="{{ url_for('static',    filename='css/style.css') }}">
         <link rel="stylesheet" href="{{ url_for('static',    filename='css/markdown.css') }}">
+        <link rel="stylesheet" href="{{ url_for('static',    filename='css/ads.css') }}">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
+        
         <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     </head>
     <body>
@@ -42,7 +44,7 @@
         </main>
         {%  include 'components/footer.html' %}
     </body>
-    <script type="text/javascript" src="{{ url_for('static',    filename='js/btCloseAlert.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static',    filename='js/btCloseAlert.js') }}"></>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
     <script>hljs.highlightAll();</script>
 </html>
\ No newline at end of file
