diff --git a/components/MDContent.js b/components/MDContent.js
index 3caeba7..274a4ce 100644
--- a/components/MDContent.js
+++ b/components/MDContent.js
@@ -6,22 +6,29 @@ import Link from 'next/link'
 
 function BackLinks({linkList}) {
 
-    return (<ul>
-        {
-            (linkList != null && linkList.length > 0)
+    return (<div className="note-footer">
+            {(linkList != null && linkList.length > 0)
                 ?
-                linkList.map(aLink =>
-                    <li>
-                     <Link href={aLink.slug}>
-                         <a>
-                             {aLink.title}
-                         </a>
-                     </Link>
-                    </li>
-                )
-                : <h1>No Back link found</h1>
-        }
-    </ul>);
+                <>
+                    <h3 className="backlink-heading">Link to this note</h3>
+
+                    <div className="backlink-container">
+                    {linkList.map(aLink =>
+                    <div className="backlink">
+                        <Link href={aLink.slug}>
+                            <a >
+                                    <p className="backlink-title">{aLink.title}</p>
+                                    <p className="backlink-preview">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  </p>
+                            </a>
+                        </Link>
+
+                    </div>
+                    )}
+                    </div>
+                </>
+
+                : <></>}
+    </div>);
 }
 
 function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {
diff --git a/styles/style.css b/styles/style.css
index b3e9f81..0c206f4 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -16,6 +16,69 @@ a:hover {
     flex-direction: row;
     justify-content: center;
 }
+/* Foooter section BEGIN */
+.note-footer {
+    display: block;
+    background-color: rgba(238, 238, 238, 0.8);
+    border-radius: 16px;
+    margin-top: 24px;
+    padding: 16px;
+}
+
+.backlink-container {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    position: relative;
+    /*background-color: #f8bbbb;*/
+    flex-direction: row;
+    display: flex;
+}
+
+.note-footer .backlink-heading {
+    display: block;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+.backlink-container .backlink {
+    /*background-color: #f8f2f2;*/
+    margin: 8px;
+    height: 118px;
+    width: 318px;
+    text-decoration: none;
+    display: block;
+    overflow: hidden;
+    border-radius: 8px;
+    /*padding-bottom: 8px;*/
+}
+
+.backlink-container .backlink:hover {
+    background-color: rgba(180, 177, 177, 0.3);
+}
+
+.backlink-container  .backlink-title {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.backlink-container a{
+    text-decoration: none;
+    color: var(--text-muted);
+}
+
+.backlink-container  .backlink-preview {
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+}
+.backlink-container p {
+    margin: 12px 0px;
+}
+/* Foooter section END */
 
 .markdown-rendered {
     font-size: 18px;