diff --git a/webpage/channel.ts b/webpage/channel.ts
index 259f9b3..d4bee1a 100644
--- a/webpage/channel.ts
+++ b/webpage/channel.ts
@@ -11,6 +11,7 @@ import { Role } from "./role.js";
 import {InfiniteScroller} from "./infiniteScroller.js";
 import { SnowFlake } from "./snowflake.js";
 import { channeljson, messagejson, readyjson } from "./jsontypes.js";
+import { MarkDown } from "./markdown.js";
 
 declare global {
     interface NotificationOptions {
@@ -656,7 +657,13 @@ class Channel{
         this.localuser.channelfocus=this;
         const prom=this.infinite.delete();
         history.pushState(null, "","/channels/"+this.guild_id+"/"+this.snowflake);
+
         (document.getElementById("channelname") as HTMLSpanElement).textContent="#"+this.name;
+        if (this.topic) {
+            document.getElementById("channelTopic").innerHTML=new MarkDown(this.topic, this).makeHTML().innerHTML;
+            document.getElementById("channelTopic").removeAttribute("hidden");
+        } else document.getElementById("channelTopic").setAttribute("hidden","");
+
         const loading=document.getElementById("loadingdiv") as HTMLDivElement;
         Channel.regenLoadingMessages();
         loading.classList.add("loading");
diff --git a/webpage/direct.ts b/webpage/direct.ts
index 07ac3ca..94f5846 100644
--- a/webpage/direct.ts
+++ b/webpage/direct.ts
@@ -142,6 +142,7 @@ class Group extends Channel{
         this.buildmessages();
         history.pushState(null, null,"/channels/"+this.guild_id+"/"+this.snowflake);
         document.getElementById("channelname").textContent="@"+this.name;
+        document.getElementById("channelTopic").setAttribute("hidden","");
         document.getElementById("typebox").contentEditable=""+true;
     }
     messageCreate(messagep){
diff --git a/webpage/index.html b/webpage/index.html
index 33cf0ba..989a773 100644
--- a/webpage/index.html
+++ b/webpage/index.html
@@ -51,7 +51,9 @@
         </div>
         <div class="flexttb messageflex">
             <div class="servertd channelnamediv">
-                <span id="mobileback" hidden></span><span id="channelname">Channel</span>
+                <span id="mobileback" hidden></span>
+                <span id="channelname">Channel name</span>
+                <span id="channelTopic" hidden>Channel topic</span>
             </div>
             <div id="channelw">
                 <div id="loadingdiv">
diff --git a/webpage/style.css b/webpage/style.css
index eddd9c4..668794c 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -385,7 +385,7 @@ div {
 	max-height: 1.5in;
 	overflow-y: auto;
 	flex-grow:1;
-	
+
 }
 #realbox{
 	padding: .05in;
@@ -1799,7 +1799,7 @@ form div{
 	background: var(--textarea-bg);
 	span{
 		text-wrap:nowrap;
-		
+
 	}
 ;
 	display: flex;
@@ -1820,7 +1820,7 @@ form div{
 	border:solid .03in var(--black);
 }
 .copybutton{
-	
+
 	width:.25in;
 }
 .copycontainer{
@@ -1926,6 +1926,11 @@ form div{
 	border-radius:.1in;
 	height:17px;
 }
+
+#channelTopic {
+	margin-left: 10px;
+}
+
 .badge{
 	display:flex;
 	color:white;