diff --git a/app/main.py b/app/main.py
index 634338a..3818ea6 100644
--- a/app/main.py
+++ b/app/main.py
@@ -81,6 +81,15 @@ def within_range(x, y, r):
     return x > y and abs(x - y) <= r 
 
 
+def get_article_title(s):
+    return s.split('\n')[0]
+
+
+def get_article_body(s):
+    lst = s.split('\n')
+    lst.pop(0) # remove the first line
+    return '\n'.join(lst) 
+
 def get_today_article(user_word_list, articleID):
 
     rq = RecordQuery(path_prefix + 'static/wordfreqapp.db')
@@ -111,12 +120,17 @@ def get_today_article(user_word_list, articleID):
                 break
             
     s = '<div class="alert alert-success" role="alert">According to your word list, your level is <span class="badge bg-success">%4.2f</span>  and we have chosen an article with a difficulty level of <span class="badge bg-success">%4.2f</span> for you.</div>' % (user_level, text_level)
-    s += '<p><b>%s</b></p>' % (d['date'])
-    s += '<p><font size=+2>%s</font></p>' % (d['text'])
-    s += '<p><i>%s</i></p>' % (d['source'])
+    s += '<p class="text-muted">Article added on: %s</p>' % (d['date'])
+    s += '<div class="p-3 mb-2 bg-light text-dark">'
+    article_title = get_article_title(d['text'])
+    article_body = get_article_body(d['text'])
+    s += '<p class="display-3">%s</p>' % (article_title)
+    s += '<p class="lead">%s</p>' % (article_body)
+    s += '<p><small class="text-muted">%s</small></p>' % (d['source'])
     s += '<p><b>%s</b></p>' % (get_question_part(d['question']))
     s = s.replace('\n', '<br/>')    
     s += '%s' % (get_answer_part(d['question']))
+    s += '</div>'
     session['articleID'] = d['article_id']
     return s
 
@@ -237,6 +251,7 @@ def mainpage():
                </head>
                <body>
         '''
+        page += '<div class="container-fluid">'
         page += '<p><b><font size="+3" color="red">English Pal - Learn English smartly!</font></b></p>'
         if session.get('logged_in'):
             page += ' <a href="%s">%s</a></p>\n' % (session['username'], session['username'])
@@ -260,6 +275,7 @@ def mainpage():
                 page += '<a href="%s">%s</a> %d\n' % (youdao_link(x[0]), x[0], x[1])
 
         page += ' <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>'
+        page += '</div>'
         page += '</body></html>'
         return page
 
@@ -341,9 +357,10 @@ def userpage(username):
         page += '<meta name="format-detection" content="telephone=no" />\n' # forbid treating numbers as cell numbers in smart phones
         page += '<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">'
         page += '<title>EnglishPal Study Room for %s</title>' % (username)
-        page += '<p><b>English Pal for <font color="red">%s</font></b> <a href="/logout">登出</a></p>' % (username)
+        page += '<div class="container-fluid">'
+        page += '<p><b>English Pal for <font color="red">%s</font></b> <a class="btn btn-secondary" href="/logout" role="button">登出</a></p>' % (username)
         page += '<p><b>阅读文章并回答问题</b></p>\n'
-        page += '<p><a class="btn btn-success" href="/%s/reset" role="button"> 下一篇 </a></p>' % (username)
+        page += '<p><a class="btn btn-success" href="/%s/reset" role="button"> 下一篇 Next Article </a></p>' % (username)
         page += '<div id="text-content">%s</div>'  % (get_today_article(user_freq_record, session['articleID']))
         page += '<p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>'
         page += '<form method="post" action="/%s">' % (username)
@@ -398,6 +415,7 @@ def userpage(username):
                 elif isinstance(d[word], int): # d[word] is a frequency. to migrate from old format.
                     page += '<a href="%s">%s</a>%d\n' % (youdao_link(word), word, freq)
         page += '<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>'
+        page += '</div>'
         return page
 
 ### Sign-up, login, logout ###
