diff --git a/src/renderer/components/watch-video-info/watch-video-info.css b/src/renderer/components/watch-video-info/watch-video-info.css
deleted file mode 100644
index 31666603..00000000
--- a/src/renderer/components/watch-video-info/watch-video-info.css
+++ /dev/null
@@ -1,132 +0,0 @@
-.relative {
-  position: relative;
-}
-
-.watchVideoInfo {
-  min-height: 130px;
-}
-
-.videoTitle {
-  font-size: 22px;
-  max-width: 45%;
-}
-
-.channelInformation {
-  position: absolute;
-  bottom: 10px;
-  width: 350px;
-}
-
-.channelThumbnail {
-  cursor: pointer;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.channelName {
-  position: absolute;
-  top: 0px;
-  left: 55px;
-  font-weight: bold;
-  font-size: 15px;
-  cursor: pointer;
-}
-
-.subscribeButton {
-  height: 20px;
-  position: absolute;
-  top: 20px;
-  left: 50px;
-  line-height: 1px;
-  font-size: 0.8rem;
-}
-
-.viewCount {
-  position: absolute;
-  right: 15px;
-  bottom: 30px;
-}
-
-.likeBarContainer {
-  position: absolute;
-  right: 15px;
-  bottom: 35px;
-  width: 300px;
-  height: 5px;
-}
-
-.likeBar {
-  background-color: var(--accent-color);
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 1;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.dislikeBar {
-  background-color: #9E9E9E;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  border-radius: 200px 200px 200px 200px;
-  -webkit-border-radius: 200px 200px 200px 200px;
-}
-
-.likeCountContainer {
-  position: absolute;
-  right: 15px;
-  bottom: 0px;
-  font-size: 12px;
-  color: var(--tertiary-text-color);
-}
-
-.videoOptions {
-  position: absolute;
-  right: 15px;
-  top: 20px;
-  width: 550px;
-}
-
-.theatreModeButton {
-  height: 30px;
-  line-height: 10px;
-  position: relative;
-  bottom: 5px;
-}
-
-.formatTypeDropdown {
-  width: 150px;
-}
-
-.shareDropdown {
-  width: 175px;
-}
-
-@media only screen and (max-width: 1500px) {
-  .videoOptions {
-    width: 350px;
-  }
-
-  .watchVideoInfo {
-    min-height: 150px;
-  }
-}
-
-@media only screen and (max-width: 1350px) {
-  .theatreModeButton {
-    display: none;
-  }
-
-  .watchVideoInfo {
-    min-height: 130px;
-  }
-
-  .videoOptions {
-    width: 350px;
-  }
-}
diff --git a/src/renderer/components/watch-video-info/watch-video-info.sass b/src/renderer/components/watch-video-info/watch-video-info.sass
new file mode 100644
index 00000000..694a0d79
--- /dev/null
+++ b/src/renderer/components/watch-video-info/watch-video-info.sass
@@ -0,0 +1,74 @@
+.watchVideoInfo
+  display: grid
+  grid-template-columns: 2fr 1fr
+  padding: 16px
+
+  @media screen and (max-width: 680px)
+    grid-template-columns: auto
+
+.videoTitle
+  font-size: 20px
+  margin: 0 0 20px
+
+.channelInformation
+  .profileRow
+    display: flex
+
+  .channelThumbnail
+    border-radius: 50%
+    margin-right: 8px
+
+  .channelName
+    margin-left: 6px
+    margin-bottom: 4px
+
+  .subscribeButton
+    padding: 6px
+    font-size: 14px
+
+.viewCount
+  margin: 4px 0px 0px
+  text-align: right
+
+  @media screen and (max-width: 680px)
+    margin-top: 16px
+    text-align: left
+
+.likeSection
+  margin-top: 16px
+  font-size: 14px
+  display: grid
+  grid-template-columns: auto auto
+  justify-content: space-between
+  margin-left: auto
+  max-width: 250px
+
+  @media screen and (max-width: 680px)
+    margin-left: 0
+
+  .likeBar
+    height: 8px
+    border-radius: 4px
+    background: red
+    grid-column: 1 / 3
+    margin-bottom: 4px
+
+.optionsContainer
+  margin-top: 16px
+  display: flex
+  justify-content: flex-end
+
+  @media screen and (max-width: 680px)
+    justify-content: flex-start
+
+  .option
+    width: 36px
+    height: 36px
+    border-radius: 50%
+    background-color: rgba(255, 255, 255, 0.15)
+    display: flex
+    align-items: center
+    justify-content: center
+
+    &:not(:last-child)
+      margin-right: 4px
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index 43ad7c08..c6d34866 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/src/renderer/components/watch-video-info/watch-video-info.vue
@@ -1,75 +1,89 @@
 <template>
-  <ft-card class="relative watchVideoInfo">
-    <p
-      class="videoTitle"
-    >
-      {{ title }}
-    </p>
-    <div
-      class="channelInformation"
-    >
-      <img
-        :src="channelThumbnail"
-        class="channelThumbnail"
-        @click="goToChannel"
+  <ft-card class="watchVideoInfo">
+    <div>
+      <p
+        class="videoTitle"
       >
-      <span
-        class="channelName"
-        @click="goToChannel"
-      >
-        {{ channelName }}
-      </span>
-      <ft-button
-        :label="subscribedText"
-        class="subscribeButton"
-        background-color="var(--primary-color)"
-        @click="handleSubscription"
-      />
-    </div>
-    <ft-flex-box class="videoOptions">
-      <ft-button
-        label="Toggle Theatre Mode"
-        class="theatreModeButton"
-        @click="$emit('theatreMode')"
-      />
-      <ft-list-dropdown
-        :title="formatTypeLabel"
-        :label-names="formatTypeNames"
-        :label-values="formatTypeValues"
-        class="formatTypeDropdown"
-        @click="handleFormatChange"
-      />
-      <ft-list-dropdown
-        :title="shareLabel"
-        :label-names="shareNames"
-        :label-values="shareValues"
-        class="shareDropdown"
-        @click="handleShare"
-      />
-    </ft-flex-box>
-    <p class="viewCount">
-      {{ parsedViewCount }}
-    </p>
-    <div class="likeBarContainer">
+        {{ title }}
+      </p>
       <div
-        class="likeBar"
-        :style="{ width: likePercentageRatio + '%' }"
-      />
-      <div class="dislikeBar" />
+        class="channelInformation"
+      >
+        <div
+          class="profileRow"
+        >
+          <div>
+            <img
+              :src="channelThumbnail"
+              class="channelThumbnail"
+              @click="goToChannel"
+            >
+          </div>
+          <div>
+            <div
+              class="channelName"
+              @click="goToChannel"
+            >
+              {{ channelName }}
+            </div>
+            <ft-button
+              :label="subscribedText"
+              class="subscribeButton"
+              background-color="var(--primary-color)"
+              @click="handleSubscription"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <p class="viewCount">
+        {{ parsedViewCount }}
+      </p>
+      <div
+        class="likeSection"
+      >
+        <div
+          class="likeBar"
+          :style="{ background: `linear-gradient(to right, var(--accent-color) ${likePercentageRatio}%, #9E9E9E ${likePercentageRatio}%` }"
+        ></div>
+        <div class="likeCount">👍 {{ likeCount }}</div>
+        <div class="dislikeCount">{{ dislikeCount }} 👎</div>
+      </div>
+      <!--
+        <ft-flex-box class="videoOptions">
+          <ft-button
+            label="Toggle Theatre Mode"
+            class="theatreModeButton"
+            @click="$emit('theatreMode')"
+          />
+          <ft-list-dropdown
+            :title="formatTypeLabel"
+            :label-names="formatTypeNames"
+            :label-values="formatTypeValues"
+            class="formatTypeDropdown"
+            @click="handleFormatChange"
+          />
+          <ft-list-dropdown
+            :title="shareLabel"
+            :label-names="shareNames"
+            :label-values="shareValues"
+            class="shareDropdown"
+            @click="handleShare"
+          />
+        </ft-flex-box>
+      -->
+      <div class="optionsContainer">
+        <div v-for="i in [`download`, `star`, `bookmark`, `share`]" :key="i" class="option">
+          <font-awesome-icon
+            class="refreshIcon"
+            :icon="i"
+          />
+        </div>
+      </div>
     </div>
-    <p class="likeCountContainer">
-      <font-awesome-icon
-        icon="thumbs-up"
-      />
-      {{ likeCount }}
-      &nbsp;
-      <font-awesome-icon
-        icon="thumbs-down"
-      />
-      {{ dislikeCount }}
-    </p>
   </ft-card>
 </template>
 
 <script src="./watch-video-info.js" />
-<style scoped src="./watch-video-info.css" />
+<style scoped src="./watch-video-info.sass" lang="sass" />