diff --git a/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache b/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
index 6e3d1b9..614c6e1 100644
--- a/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
+++ b/.firebase/hosting.ZGlzdFxsbXMtYXBwLW5ldw.cache
@@ -1,5 +1,9 @@
 favicon.ico,1591660351498,2c19690e9587bae12f419b34d2edeecc76808099540a9c9f4ea6194116cfc8f7
 manifest.webmanifest,1591723813630,648e3277153af7b5ba06a2fb0a1da6b89f858f631f124008b5d5726744ab43f4
+polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e
+polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
+runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
+runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
 assets/custom-icons/add.svg,1591670038987,0beaf5cea5310deddf58f5dc94cffc2c26cecfaa5890aae565ab9705ee342506
 assets/custom-icons/atomic.svg,1591670021393,48c2717734d3d37cbf7dabaf6fb22f0e5fcd662e319e9e61417c46461e236d8d
 assets/custom-icons/balance-sheet.svg,1591670023346,bc016780bfc19a6ef0e62332aa22139bcc237a6e19f070e51ce90e76919c66aa
@@ -25,7 +29,11 @@ assets/custom-icons/money-growth.svg,1591670040955,fce9616268c9932e2531ff524accd
 assets/custom-icons/more.svg,1591677116018,8207372ec5304a64d33da1b21c92308d793d03f6cb83e0dd7c384f4db94de3f2
 assets/custom-icons/mortarboard.svg,1591670033049,226d6ad39b7ea5f7da6321237835319335d29a6571dce10378a88c42b5be4f2e
 assets/custom-icons/newspaper.svg,1591670054424,3b6d1b91044b650e42124be91b5161d988e2f900cff843f74018ce614216527c
+assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b419248932f49255049bcc820d9e50ae3f319200
 assets/custom-icons/play-button.svg,1591670044893,247291e419f46dbc2166588629cc5a21c19b0ec8a87e3ffe95a5b7c3fa4d5b52
+assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6
+assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20
+assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046
 assets/custom-icons/tab.svg,1591670015221,e521af92e8d3b8cf4f57a85f1091e3839200f65b52a3177703a02233783660f0
 assets/icons/icon-128x128.png,1591723765595,1331bbcee85eb4c732d2b2468c0118ead141aa56c741dc1a93a54d4812e79d4d
 assets/icons/icon-144x144.png,1591723765602,ab4052ca6640d9378a090b7a6825df604c939ec738dae88d89500aee8eb7087f
@@ -35,20 +43,24 @@ assets/icons/icon-384x384.png,1591723765605,e28ae36bf6b6f9c9a5eb8716806f3077d293
 assets/icons/icon-512x512.png,1591723765605,cb62ee904d0aa462c04667e945abbefe928c1c874d9a919ec237f3ebc1822dc9
 assets/icons/icon-72x72.png,1591723765606,215a8d62891dff36be3e0a554c28e627bbd34dea95aca21b718414452b581dce
 assets/icons/icon-96x96.png,1591723765606,5dbec692238f9b1305461df3fe87c910306d95db26941804b8929cd0d99bd508
-index.html,1591859976810,d1b6a2ca3180b5631b7d3d345574ee2faaf2bbb302331f8a531e9e12bc78ded4
-3rdpartylicenses.txt,1591859967077,25cfb16f34dfd006ac8df880c23735d9fd75be3aa69fcfbd2f13b9b42add2368
-ngsw.json,1591859976831,03c739de8c383926f715a64a9e210e87627ba55104fbd16a6004987413d295fd
-polyfills-es2015.690002c25ea8557bb4b0.js,1591723916472,3e7c89812bf4fd87f9db14f54068690ed64b8be5e64316c9703f9616bef0b00e
-runtime-es2015.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
-runtime-es5.1eba213af0b233498d9d.js,1591723916214,8351e28e6622d0d4825d766649b2ae0e8767c34304fff594f102bfe52b7e4e29
-safety-worker.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-styles.7003c259858c27ffbfcc.css,1591859967077,5d9cdd8c0befba4473e41fc8f531ae8236ff2178638d85d994314960504e15eb
-worker-basic.min.js,1591859976832,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
-assets/custom-icons/number-1-medal.svg,1591857318704,f52fb954e5e12c14af3671c2b419248932f49255049bcc820d9e50ae3f319200
-assets/custom-icons/plus.svg,1591852726572,a96d4d299742c206fe67437318fb570cc69359356a7f6ab9ccde30deee8e0af6
-assets/custom-icons/settings.svg,1591855957022,b8064cc999c75e79d1ca9306425e1e9fe9fe5c0b52cdd4fe184418613435ed20
-assets/custom-icons/star-medal.svg,1591857296783,70d31060ab666163c8c0397e4bacb9a0d5a32cab1437ea81f7c3b8569e24d046
-polyfills-es5.9e286f6d9247438cbb02.js,1591723919562,4f1a99830dd49db1d1cffcb8b4a23931d26817406e84ff1924e315758d4437e8
-ngsw-worker.js,1591859976831,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
-main-es2015.2f069b420a31c7186041.js,1591859975039,ff2a96ec3176a11f611fa254963df3232c6988e6ff0dcd1683ac664bb514db32
-main-es5.2f069b420a31c7186041.js,1591859974085,e5bfec9a6e904739a094b68fe0a1445f5a02d308b1c10a403344cf3d20135b4e
+index.html,1592317337347,8c2fdbfc5939841a13cb1b0ca25f914f04baf7e79f7065dce99902a38ba22dee
+3rdpartylicenses.txt,1592317324768,d27e55275dcda3ed3bc3eb999269407011cf9c9afe9ddc3967da4edd98909d57
+ngsw.json,1592317337374,0e8cc36b6d9cfd935cd57542bbe64677bc6b8c7674ba97dd7100fa697b660311
+safety-worker.js,1592317337376,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+styles.b31fc0685d3c66a06d73.css,1592317324769,0221e2a0f6ca6255770f8f3a290cc774f05f8540c0493fbddfac4dfa32eabfd9
+worker-basic.min.js,1592317337375,9c834b5821056aa4ef323fa5def3ee00de16296003e10df0507113e7b859228a
+assets/custom-icons/add-person.svg,1592315931240,5d43642454bb12f632c317bab8a89c18f5ba9143da79623a3d24797cc0f92ef6
+assets/custom-icons/attendance-1.svg,1592309320413,a3173e6410386ae73d9dbf1e9f4890cc56e563b4ebc5fb2b0dcea7451da7fdac
+assets/custom-icons/attendance.svg,1592292570940,d58cc27e0a6d67073a1af7fb26a0b2738b2b205e0c4a307f8f2d330dce90d109
+assets/custom-icons/class.svg,1592309166232,247c7db07bf3dcc9e76d80ce122becb73077679de93d389b92923c9147f38617
+assets/custom-icons/close-circle.svg,1592281807401,3365f8d2f9db966884b6012d1de562a477757fd1d20379fa65fe823829066810
+assets/custom-icons/document.svg,1592290789477,d5f9aee8b6a06ce794719fe4e074f944b9a0110fb7204e3f1ee91ad327defab6
+assets/custom-icons/duel.svg,1592309435728,dcbb4dffba44a0e57a2cce161f27ea9c5c42ea3e4c5cfbc3b3fbfaa5c2f9affb
+assets/custom-icons/forum.svg,1592309516460,a2653011964697eb2f57d08ac3573a14246995bc77cfee5282253f9837f436c2
+assets/custom-icons/hashtag.svg,1592315789488,49e2d3a41333c2c6ec84b6bb5e00c3a61ba1d4c4b02f321fa2fdd90dbb9d3a85
+assets/custom-icons/link.svg,1592290835406,2c07191acf4af240019f6da72c65e71dad9fef9deaf04d90f20145c1fb239841
+assets/custom-icons/question-mark.svg,1592281930425,a2cda20fd2f192049c662f7e3319cc36775e49a00e56549002eb494dfc8bb716
+assets/custom-icons/warning.svg,1592281874839,5ea86bd525dfa83ebe77cf93d8367426202e54f7c07aab182301c7c46ccdbad7
+ngsw-worker.js,1592317337375,40433abc9774bdb2aa53890310f0ca5017fe5b764eaa087ba509ab1ab8ea7be3
+main-es2015.bc3224f66cae59054dab.js,1592317335634,3bfdd9916a16fd4e951182d4d17f8435b02183a1a449a08a486e7d16ccbbbc9c
+main-es5.bc3224f66cae59054dab.js,1592317334007,287b96a3554b12c9e9c35449be7ed9003a32c1bb115cee6a4364d1f3da02986f
diff --git a/src/app/tabs/courses/details/details.component.html b/src/app/tabs/courses/details/details.component.html
index 47a41e4..75458b8 100644
--- a/src/app/tabs/courses/details/details.component.html
+++ b/src/app/tabs/courses/details/details.component.html
@@ -24,18 +24,18 @@
         [ngClass]="{'active': selectedSegment === 'forum' }"> Forum </button>
     </header>
 
-    <section class="test-prompt">
-        <section class="prompt">
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
-            </p>
-            <button> Take the test now! </button>
-        </section>
-    </section>
-
     <div class="segments-holder">
 
         <ul class="chapter-list" *ngIf="selectedSegment === 'home'">
+            <section class="test-prompt">
+                <section class="prompt">
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem ab vel reiciendis. Repudiandae nobis pariatur laboriosam, natus quidem quos architecto provident similique officiis vero at cum excepturi eius, eligendi aperiam.
+                    </p>
+                    <button> Take the test now! </button>
+                </section>
+            </section>
+
             <li class="chapter completed" [ngClass]="{'active' : selectedChapter === 1}">
                 <div class="container" (click)="selectedChapter === 1? selectedChapter = null : selectedChapter = 1">
                     <svg-icon [applyClass]="true" class="icon checkmark" src="assets/custom-icons/checkmark.svg"></svg-icon>
@@ -185,19 +185,86 @@
         </ul>
 
 
-        <!-- <section class="forum-details">
+        <section class="forum-details" *ngIf="selectedSegment === 'forum'">
             <section class="add-post">
                 <textarea placeholder="Start a discussion"></textarea>
                 <div class="input-holder">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/hashtag.svg"></svg-icon>
-                    <input type="text" placeholder="Tags">
+                    <input type="text" placeholder="Hashtag">
                 </div>
                 <div class="input-holder">
                     <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/add-person.svg"></svg-icon>
-                    <input type="text" placeholder="Tags">
+                    <input type="text" placeholder="Tag person">
+                </div>
+                <div class="input-holder">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/link.svg"></svg-icon>
+                    <input type="text" placeholder="URL">
+                </div>
+                <div class="input-holder">
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/document.svg"></svg-icon>
+                    <input type="file">
                 </div>
+                <button class="add-post-button"> Add Post </button>
+            </section>
+
+            <ul class="forum-post-list">
+                <li>
+                    <button class="book-mark-button">
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/bookmark.svg"></svg-icon>
+                    </button>
+                    <h5>
+                        Can anyone explain dark matter radiation theory in a most simplest
+                        way possible?
+                    </h5>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente earum at alias aliquam voluptates, cupiditate nobis. Beatae iure mollitia sunt similique omnis blanditiis rerum impedit. Soluta unde amet officia molestiae!
+                    </p>
+                    <div class="author">
+                        <img src="https://pbs.twimg.com/profile_images/3478244961/01ebfc40ecc194a2abc81e82ab877af4.jpeg">
+                        <label> Dwayne the Rock </label>
+                        <span class="time-stamp"> August 15, 2020 </span>
+                    </div>
+                    <div class="action-buttons">
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/like.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+                        <button>
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/share.svg"></svg-icon>
+                            <span> 56 </span>
+                        </button>
+
+                        <button class="more-button" (click)="showMorePostOptions = true">
+                            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
+                        </button>
+                    </div>
+                </li>
+            </ul>
+
+            <section class="more-options-slideup" [ngClass]="{'active' : showMorePostOptions }">
+                <header>
+                    <h4> More Options </h4>
+                    <button class="close-button" (click)="showMorePostOptions = false">
+                        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                    </button>
+                </header>
+                <ul>
+                    <li>
+                        Downvote Answer
+                    </li>
+                    <li>
+                        Downvote Question
+                    </li>
+                    <li>
+                        Report
+                    </li>
+                </ul>
             </section>
-        </section> -->
+        </section>
     </div>
 
 </div>
diff --git a/src/app/tabs/courses/details/details.component.scss b/src/app/tabs/courses/details/details.component.scss
index ee16314..4ad5f7b 100644
--- a/src/app/tabs/courses/details/details.component.scss
+++ b/src/app/tabs/courses/details/details.component.scss
@@ -327,3 +327,249 @@
         }
     }
 }
+
+.forum-details {
+    .add-post {
+        width: 90%;
+        margin: 10px auto;
+        textarea {
+            border: 0px;
+            height: 70px;
+            display: block;
+            width: 100%;
+            font-size: 16px;
+            color: var(--light-grey);
+            padding: 10px;
+            background-color: transparent;
+            border-bottom: 2px solid var(--dark-grey);
+            resize: none;
+            margin-bottom: 20px;
+        }
+    }
+
+    .input-holder {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+        background-color: var(--ash-black);
+        border-radius: 5px;
+        padding: 10px;
+        height: 50px;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+        }
+
+        input {
+            font-size: 14px;
+            border: 0px;
+            background-color: transparent;
+            padding: 0 10px;
+            color: var(--light-grey);
+            display: block;
+            flex-grow: 1;
+
+            &[type="file"] {
+                height: auto;
+            }
+        }
+    }
+
+    .add-post-button {
+        margin-top: 20px;
+        display: block;
+        width: 100px;
+        margin-left: auto;
+        height: 40px;
+        font-size: 14px;
+        background-color: var(--teal-green);
+        color: white;
+        border: 0px;
+        border-radius: 7px;
+    }
+
+    .more-options-slideup {
+        position: fixed;
+        width: 100%;
+        background-color: var(--ash-black);
+        left: 0;
+        bottom: 0;
+        z-index: 1;
+        transform: translateY(100vh);
+        transition: box-shadow 0.5s, transform 0.5s;
+
+        &.active {
+            box-shadow: 0 0 100vw 100vh rgba(black, 0.8);
+            transform: translateY(0);
+        }
+
+        header {
+            background-color: var(--ash-black);
+            filter: brightness(85%);
+            display: flex;
+            align-items: center;
+            height: 45px;
+            padding: 0 5%;
+            position: relative;
+        }
+
+        .close-button {
+            border: 0px;
+            background-color: transparent;
+            margin-left: auto;
+
+            .icon {
+                width: 13px;
+                height: 13px;
+                fill: var(--light-grey);
+            }
+        }
+
+        h4 {
+            color: var(--light-grey);
+            font-size: 14px;
+            font-weight: 400;
+        }
+
+        ul {
+            position: relative;
+            list-style: none;
+            padding: 0 5%;
+
+            li {
+                text-align: center;
+                color: white;
+                margin: 20px auto;
+                font-size: 14px;
+            }
+        }
+    }
+}
+
+
+.forum-post-list {
+    list-style: none;
+    width: 100%;
+    margin: 20px auto 0;
+    overflow: hidden;
+
+    li {
+        background-color: var(--ash-black);
+        padding: 20px 5%;
+        border-bottom: 1px solid var(--dark-grey);
+        position: relative;
+    }
+
+    .book-mark-button {
+        position: absolute;
+        right: 10px;
+        top: 0;
+        border: 0px;
+        background-color: transparent;
+
+        .icon {
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin: 0px auto 15px;
+    }
+
+    p {
+        font-size: 14px;
+        color: var(--light-grey);
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        max-height: 50px;
+        margin: 15px auto;
+        line-height: 1.7;
+    }
+
+    .author {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin: 15px auto;
+
+        img {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            margin-right: 7px;
+        }
+
+        label {
+            font-size: 12px;
+            color: white;
+        }
+
+        .time-stamp {
+            margin-left: 20px;
+            color: var(--light-grey);
+            font-size: 12px;
+
+            &::before {
+                content: '';
+                width: 5px;
+                height: 5px;
+                background-color: var(--light-grey);
+                border-radius: 50%;
+                display: inline-block;
+                margin-right: 7px;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .action-buttons {
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        button {
+            background-color: transparent;
+            color: var(--light-grey);
+            border: 0px;
+            padding: 0 10px;
+
+            .icon {
+                width: 15px;
+                height: 15px;
+                margin-right: 5px;
+                fill: var(--light-grey);
+            }
+
+            span {
+                vertical-align: top;
+                font-size: 12px;
+            }
+
+            &.more-button {
+                margin-left: auto;
+                border: 1px solid var(--light-grey);
+                border-radius: 5px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .icon {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+
+}
diff --git a/src/app/tabs/courses/details/details.component.ts b/src/app/tabs/courses/details/details.component.ts
index f2c1b98..19d67f9 100644
--- a/src/app/tabs/courses/details/details.component.ts
+++ b/src/app/tabs/courses/details/details.component.ts
@@ -9,10 +9,11 @@ import { Location } from '@angular/common';
 	styleUrls: ['./details.component.scss']
 })
 export class DetailsComponent implements OnInit {
-    selectedSegment: string = 'home';
+    selectedSegment: string = 'forum';
     heading: string;
     routeSubscription: Subscription;
     selectedChapter: number = 1;
+    showMorePostOptions: boolean = false;
 
 	constructor(
         private route: ActivatedRoute,
diff --git a/src/assets/custom-icons/bookmark.svg b/src/assets/custom-icons/bookmark.svg
new file mode 100644
index 0000000..f3b79a7
--- /dev/null
+++ b/src/assets/custom-icons/bookmark.svg
@@ -0,0 +1 @@
+<svg height="404pt" viewBox="-58 0 404 404.54135" width="404pt" xmlns="http://www.w3.org/2000/svg"><path d="m277.527344 0h-267.257813c-5.523437 0-10 4.476562-10 10v374.527344c-.011719 7.503906 4.183594 14.378906 10.855469 17.804687 6.675781 3.429688 14.707031 2.832031 20.796875-1.550781l111.976563-80.265625 111.976562 80.269531c6.097656 4.367188 14.121094 4.960938 20.792969 1.535156 6.667969-3.425781 10.863281-10.292968 10.863281-17.792968v-374.527344c0-5.523438-4.480469-10-10.003906-10zm0 0"/></svg>
diff --git a/src/assets/custom-icons/comment.svg b/src/assets/custom-icons/comment.svg
new file mode 100644
index 0000000..5142b05
--- /dev/null
+++ b/src/assets/custom-icons/comment.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 511.096 511.096" height="512" viewBox="0 0 511.096 511.096" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Speech_Bubble_48_"><g><path d="m74.414 480.548h-36.214l25.607-25.607c13.807-13.807 22.429-31.765 24.747-51.246-59.127-38.802-88.554-95.014-88.554-153.944 0-108.719 99.923-219.203 256.414-219.203 165.785 0 254.682 101.666 254.682 209.678 0 108.724-89.836 210.322-254.682 210.322-28.877 0-59.01-3.855-85.913-10.928-25.467 26.121-59.973 40.928-96.087 40.928z"/></g></g></svg>
diff --git a/src/assets/custom-icons/like.svg b/src/assets/custom-icons/like.svg
new file mode 100644
index 0000000..21197be
--- /dev/null
+++ b/src/assets/custom-icons/like.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M53.333,224C23.936,224,0,247.936,0,277.333V448c0,29.397,23.936,53.333,53.333,53.333h64
+			c12.011,0,23.061-4.053,32-10.795V224H53.333z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M512,304c0-12.821-5.077-24.768-13.888-33.579c9.963-10.901,15.04-25.515,13.653-40.725
+			c-2.496-27.115-26.923-48.363-55.637-48.363H324.352c6.528-19.819,16.981-56.149,16.981-85.333c0-46.272-39.317-85.333-64-85.333
+			c-22.165,0-37.995,12.48-38.677,12.992c-2.517,2.027-3.989,5.099-3.989,8.341v72.341l-61.44,133.099l-2.56,1.301v228.651
+			C188.032,475.584,210.005,480,224,480h195.819c23.232,0,43.563-15.659,48.341-37.269c2.453-11.115,1.024-22.315-3.861-32.043
+			c15.765-7.936,26.368-24.171,26.368-42.688c0-7.552-1.728-14.784-5.013-21.333C501.419,338.731,512,322.496,512,304z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/assets/custom-icons/share.svg b/src/assets/custom-icons/share.svg
new file mode 100644
index 0000000..e1f0659
--- /dev/null
+++ b/src/assets/custom-icons/share.svg
@@ -0,0 +1 @@
+<svg height="512pt" viewBox="-21 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m453.332031 85.332031c0 38.292969-31.039062 69.335938-69.332031 69.335938s-69.332031-31.042969-69.332031-69.335938c0-38.289062 31.039062-69.332031 69.332031-69.332031s69.332031 31.042969 69.332031 69.332031zm0 0"/><path d="m384 170.667969c-47.0625 0-85.332031-38.273438-85.332031-85.335938 0-47.058593 38.269531-85.332031 85.332031-85.332031s85.332031 38.273438 85.332031 85.332031c0 47.0625-38.269531 85.335938-85.332031 85.335938zm0-138.667969c-29.417969 0-53.332031 23.9375-53.332031 53.332031 0 29.398438 23.914062 53.335938 53.332031 53.335938s53.332031-23.9375 53.332031-53.335938c0-29.394531-23.914062-53.332031-53.332031-53.332031zm0 0"/><path d="m453.332031 426.667969c0 38.289062-31.039062 69.332031-69.332031 69.332031s-69.332031-31.042969-69.332031-69.332031c0-38.292969 31.039062-69.335938 69.332031-69.335938s69.332031 31.042969 69.332031 69.335938zm0 0"/><path d="m384 512c-47.0625 0-85.332031-38.273438-85.332031-85.332031 0-47.0625 38.269531-85.335938 85.332031-85.335938s85.332031 38.273438 85.332031 85.335938c0 47.058593-38.269531 85.332031-85.332031 85.332031zm0-138.667969c-29.417969 0-53.332031 23.9375-53.332031 53.335938 0 29.394531 23.914062 53.332031 53.332031 53.332031s53.332031-23.9375 53.332031-53.332031c0-29.398438-23.914062-53.335938-53.332031-53.335938zm0 0"/><path d="m154.667969 256c0 38.292969-31.042969 69.332031-69.335938 69.332031-38.289062 0-69.332031-31.039062-69.332031-69.332031s31.042969-69.332031 69.332031-69.332031c38.292969 0 69.335938 31.039062 69.335938 69.332031zm0 0"/><path d="m85.332031 341.332031c-47.058593 0-85.332031-38.269531-85.332031-85.332031s38.273438-85.332031 85.332031-85.332031c47.0625 0 85.335938 38.269531 85.335938 85.332031s-38.273438 85.332031-85.335938 85.332031zm0-138.664062c-29.417969 0-53.332031 23.933593-53.332031 53.332031s23.914062 53.332031 53.332031 53.332031c29.421875 0 53.335938-23.933593 53.335938-53.332031s-23.914063-53.332031-53.335938-53.332031zm0 0"/><path d="m135.703125 245.761719c-7.425781 0-14.636719-3.863281-18.5625-10.773438-5.824219-10.21875-2.238281-23.253906 7.980469-29.101562l197.949218-112.851563c10.21875-5.867187 23.253907-2.28125 29.101563 7.976563 5.824219 10.21875 2.238281 23.253906-7.980469 29.101562l-197.953125 112.851563c-3.328125 1.898437-6.953125 2.796875-10.535156 2.796875zm0 0"/><path d="m333.632812 421.761719c-3.585937 0-7.210937-.898438-10.539062-2.796875l-197.953125-112.851563c-10.21875-5.824219-13.800781-18.859375-7.976563-29.101562 5.800782-10.238281 18.855469-13.84375 29.097657-7.976563l197.953125 112.851563c10.21875 5.824219 13.800781 18.859375 7.976562 29.101562-3.945312 6.910157-11.15625 10.773438-18.558594 10.773438zm0 0"/></svg>