diff --git a/src/components/DislikeCollab.svelte b/src/components/DislikeCollab.svelte
new file mode 100644
index 0000000..13d6b1f
--- /dev/null
+++ b/src/components/DislikeCollab.svelte
@@ -0,0 +1,50 @@
+<script>
+    import IconCollab from '../components/IconCollab.svelte'
+	let dislikes = 0
+
+    function handleClick() {
+        dislikes += 1;
+    }
+</script>
+
+<style>
+    .dislike-button {
+        height: 40px;
+        width: 100px;
+        border-radius: 20px;
+        border: none;
+        cursor: pointer;
+        padding: 5px 15px;
+        background: rgb(255, 252, 238, 0.1);
+        margin: 20px 0 20px 16px;
+    }
+
+    .dislike-button:last-child {
+        margin: 20px 0 0 5px;
+    }
+
+    .dislike-button > .items {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .dislike-button > .items > .text {
+        color: #FFF;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+        font-family: Comfortaa;
+    }
+</style>
+
+<button 
+    on:click={handleClick} 
+    class="dislike-button"> 
+    <div class="items">
+        <IconCollab
+        name="dislike_button"
+        alt="Dislike Button" />
+        <p class="text">{dislikes}</p>
+    </div>
+</button>
\ No newline at end of file
diff --git a/src/components/LikeCollab.svelte b/src/components/LikeCollab.svelte
new file mode 100644
index 0000000..446ada9
--- /dev/null
+++ b/src/components/LikeCollab.svelte
@@ -0,0 +1,46 @@
+<script>
+    import IconCollab from '../components/IconCollab.svelte'
+	let likes = 0
+
+    function handleClick() {
+        likes += 1;
+    }
+</script>
+
+<style>
+    .like-button {
+        height: 40px;
+        width: 100px;
+        border-radius: 20px;
+        border: none;
+        cursor: pointer;
+        padding: 5px 15px;
+        background: rgb(255, 252, 238, 0.1);
+        margin: 20px 0 20px 16px;
+    }
+
+    .like-button > .items {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .like-button > .items > .text {
+        color: #FFF;
+        font-size: 16px;
+        line-height: 24px;
+        letter-spacing: 0.5px;
+        font-family: Comfortaa;
+    }
+</style>
+
+<button 
+    on:click={handleClick}
+    class="like-button"> 
+    <div class="items">
+        <IconCollab
+        name="like_button"
+        alt="Like Button" />
+        <p class="text">{likes}</p>
+    </div>
+</button>
\ No newline at end of file
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index 330b435..de7536b 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -1,5 +1,7 @@
 <script>
   import HeaderCollab from '../containers/HeaderCollab.svelte'
+  import LikeCollab from '../components/LikeCollab.svelte'
+  import DislikeCollab from '../components/DislikeCollab.svelte'
 
   export let segment
 </script>
@@ -12,4 +14,6 @@
 
 <main>
   <slot />
+  <LikeCollab />
+  <DislikeCollab />
 </main>
diff --git a/static/img/dark/icon/dislike_button.svg b/static/img/dark/icon/dislike_button.svg
new file mode 100755
index 0000000..e550309
--- /dev/null
+++ b/static/img/dark/icon/dislike_button.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.15999 14.455L12.3075 10.3C12.585 10.0225 12.7425 9.64 12.7425 9.2425V1.75C12.7425 0.925 12.0675 0.25 11.2425 0.25H4.49999C3.89999 0.25 3.35999 0.61 3.12749 1.1575L0.682486 6.865C0.0449857 8.35 1.13249 10 2.74499 10H6.98249L6.26999 13.435C6.19499 13.81 6.30749 14.1925 6.57749 14.4625C7.01999 14.8975 7.72499 14.8975 8.15999 14.455ZM15.75 0.25C14.925 0.25 14.25 0.925 14.25 1.75V7.75C14.25 8.575 14.925 9.25 15.75 9.25C16.575 9.25 17.25 8.575 17.25 7.75V1.75C17.25 0.925 16.575 0.25 15.75 0.25Z" fill="#C37472"/>
+</svg>
diff --git a/static/img/dark/icon/like_button.svg b/static/img/dark/icon/like_button.svg
new file mode 100755
index 0000000..9330d19
--- /dev/null
+++ b/static/img/dark/icon/like_button.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.84 0.545007L5.685 4.70001C5.4075 4.97751 5.25 5.36001 5.25 5.75751V13.25C5.25 14.075 5.925 14.75 6.75 14.75H13.5C14.1 14.75 14.64 14.39 14.88 13.8425L17.325 8.13501C17.955 6.65001 16.8675 5.00001 15.255 5.00001H11.0175L11.73 1.56501C11.805 1.19001 11.6925 0.807507 11.4225 0.537507C10.98 0.102507 10.275 0.102507 9.84 0.545007ZM2.25 14.75C3.075 14.75 3.75 14.075 3.75 13.25V7.25001C3.75 6.42501 3.075 5.75001 2.25 5.75001C1.425 5.75001 0.75 6.42501 0.75 7.25001V13.25C0.75 14.075 1.425 14.75 2.25 14.75Z" fill="#C2F9BB"/>
+</svg>