diff --git a/src/static/css/feature.css b/src/static/css/feature.css
index 7110915..53b6a2a 100644
--- a/src/static/css/feature.css
+++ b/src/static/css/feature.css
@@ -27,7 +27,7 @@ ul { list-style-position: inside; }
 .grid {
     display: grid;
     grid-template-columns: auto 533px 267px auto;
-    grid-template-rows: 25px 90px repeat(4, auto) auto;
+    grid-template-rows: 25px 90px repeat(3, auto);
     grid-column-gap: 0px;
     grid-row-gap: 0px;
 }
@@ -140,28 +140,38 @@ ul { list-style-position: inside; }
 /* Body */
 
 .body-row {
-    grid-area: 3 / 1 / 7 / 5;
+    grid-area: 3 / 1 / 5 / 5;
     background-color: #b56c4d;
 }
 
 .diary-entry {
-    grid-area: 3 / 2 / 6 / 3;
+    grid-area: 3 / 2 / 4 / 3;
     background-color: #aa2055;
     padding: 5px;
 }
 
+.sidebar (
+    grid-area: 3 / 3 / 5 / 4;
+    background-color: #b56c4d;
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: repeat(4, auto);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px; 
+)
+
 .about-box {
-    grid-area: 3 / 3 / 4 / 4;
+    grid-area: 1 / 1 / 2 / 2;
     background-color: #993759;
 }
 
 .twitter-box {
-    grid-area: 4 / 3 / 5 / 4;
+    grid-area: 2 / 1 / 3 / 2;
     background-color: #faa275;
 }
 
 .latest {
-    grid-area: 5 / 3 / 6 / 4;
+    grid-area: 3 / 1 / 4 / 2;
     background-color: #ff8c61;
 }
 
@@ -171,12 +181,12 @@ ul { list-style-position: inside; }
 }
 
 .disclosure {
-    grid-area: 6 / 3 / 7 / 4;
+    grid-area: 4 / 1 / 5 / 2;
     background-color: #ce6a85;
 }
 
 .recommend {
-    grid-area: 6 / 2 / 7 / 3;
+    grid-area: 4 / 2 / 5 / 3;
     background-color: #F5D7E3;
     display: grid;
     grid-template-columns: auto repeat(3, 100px) auto;
@@ -192,7 +202,7 @@ ul { list-style-position: inside; }
 .snip3 { grid-area: 2 / 4 / 3 / 5; } 
 
 .footer-row {
-    grid-area: 7 / 1 / 8 / 5; 
+    grid-area: 5 / 1 / 6 / 5; 
     background-color: #A8577E;
 }
 
diff --git a/src/views/diary-boxes.tpl b/src/views/diary-boxes.tpl
index 86af06e..1349894 100644
--- a/src/views/diary-boxes.tpl
+++ b/src/views/diary-boxes.tpl
@@ -1,35 +1,37 @@
 <!--right column-->
-    <div class="about-box">
-        <h1>about</h1>
-        blessfrey is a game.<br>
-    </div>
-
-    <div class="twitter-box">
-        <h1>follow</h1>
-        <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
-<br>
-<a href="/contact"  rel="nofollow">contact me</a><br>
-    </div>
-
-    <div class="latest">
-        <h1>latest</h1>
-        <div class="latest-text">
-            <ul>
-            % for l in latest:
-                <li>&#9;<a href={{l[0]}}  rel="nofollow">{{!l[1]}}</a></li>
-            % end
-        </ul>
-        <br>
+    <div class="sidebar">
+        <div class="about-box">
+            <h1>about</h1>
+             blessfrey is a game.<br>
+        </div>
+    
+        <div class="twitter-box">
+            <h1>follow</h1>
+            <a href="https://twitter.com/lilchimchooree">@lilchimchooree</a><br>
+            <br>
+            <a href="/contact"  rel="nofollow">contact me</a><br>
         </div>
-    </div>
 
-    <div class="disclosure">
-        <h1>disclosure</h1>
-        blessfrey.me is not using sponsored posts or affiliate links right now. 
-        <br>
-        blessfrey.me does not collect personal information + has no cookies.<br>
-        <br>
-        If this changes, sponsored content will be <a href="https://www.ftc.gov/tips-advice/business-center/guidance/ftcs-endorsement-guides-what-people-are-asking"  rel="nofollow">properly</a> <a href="https://www.ftc.gov/sites/default/files/attachments/press-releases/ftc-publishes-final-guides-governing-endorsements-testimonials/091005revisedendorsementguides.pdf"  rel="nofollow">disclosed</a>, cookies and analytics will comply with the GDPR and CCPA, etc.<br>
-        <br>
-        Thank you for following the development of blessfrey.<br>    
+        <div class="latest">
+            <h1>latest</h1>
+            <div class="latest-text">
+                <ul>
+                % for l in latest:
+                    <li>&#9;<a href={{l[0]}}  rel="nofollow">{{!l[1]}}</a></li>
+                % end
+            </ul>
+            <br>
+            </div>
+        </div>
+    
+        <div class="disclosure">
+            <h1>disclosure</h1>
+            blessfrey.me is not using sponsored posts or affiliate links right now. 
+            <br>
+            blessfrey.me does not collect personal information + has no cookies.<br>
+            <br>
+            If this changes, sponsored content will be <a href="https://www.ftc.gov/tips-advice/business-center/guidance/ftcs-endorsement-guides-what-people-are-asking"  rel="nofollow">properly</a> <a href="https://www.ftc.gov/sites/default/files/attachments/press-releases/ftc-publishes-final-guides-governing-endorsements-testimonials/091005revisedendorsementguides.pdf"  rel="nofollow">disclosed</a>, cookies and analytics will comply with the GDPR and CCPA, etc.<br>
+            <br>
+            Thank you for following the development of blessfrey.<br>    
+        </div>
     </div>
diff --git a/src/views/diary.tpl b/src/views/diary.tpl
index 3961053..502651c 100644
--- a/src/views/diary.tpl
+++ b/src/views/diary.tpl
@@ -15,14 +15,14 @@
         end 
 %>
         % # << is always active link pointing to 0
-        <a href=/diary/0 rel="nofollow"><<</a>
+        <a href=/diary/0 rel="nofollow">&lt;&lt;</a>
 
         % # < points to 0 if page 0 or below
         % if page <= 0:
-            <a href=/diary/0 rel="nofollow"><</a>
+            <a href=/diary/0 rel="nofollow">&lt;</a>
         % # < points to previous page otherwise
         % else:
-            <a href=/diary/{{page - 1}} rel="nofollow"><</a>
+            <a href=/diary/{{page - 1}} rel="nofollow">&lt;</a>
         % end
 
         % # fill out number cluster to the left when page is high
@@ -52,14 +52,14 @@
 
         % # > points to max if page is at or above maximum
         % if page >= max_pages:
-            <a href=/diary/{{max_pages}} rel="nofollow">></a>
+            <a href=/diary/{{max_pages}} rel="nofollow">&gt;</a>
         % # > point to next page otherwise
         % else:
-            <a href=/diary/{{page + 1}} rel="nofollow">></a>
+            <a href=/diary/{{page + 1}} rel="nofollow">&gt;</a>
         % end
 
         % # >> is always active link to maximum page
-        <a href=/diary/{{max_pages}} rel="nofollow">>></a>
+        <a href=/diary/{{max_pages}} rel="nofollow">&gt;&gt;</a>
     </center>
     </div>
 
@@ -76,9 +76,9 @@
                 </div>
                 <div class="snippet-info">
                     <b>{{!s[2]}} 
-                    • <a class="social-link social-twitter" href="http://twitter.com/share?text={{s[4]}}&url=https://blessfrey.me{{s[3]}}&via=lilchimchooree" target="_blank">tweet</a> 
+                    • <a class="social-link social-twitter" href="http://twitter.com/share?text={{!s[4]}}&url=https://blessfrey.me{{!s[3]}}&via=lilchimchooree" target="_blank">tweet</a> 
                     • <a class="social-link social-fb" href='http://www.facebook.com/share.php?u={{s[3]}}'>facebook</a> 
-                    • <a class="social-link social-email" href="mailto:?body=Hey, check out this post: {{s[1]}}., {{s[3]}}">email</a></b>
+                    • <a class="social-link social-email" href="mailto:?body=Hey,+check+out+this+post:+{{!s[1]}}., {{s[3]}}">email</a></b>
 
 	
                 </div>