diff --git a/src/renderer/assets/localization/en.json b/src/renderer/assets/localization/en.json
index 31e196e..b7bfc78 100644
--- a/src/renderer/assets/localization/en.json
+++ b/src/renderer/assets/localization/en.json
@@ -41,6 +41,11 @@
   "GameList_local_games": "LOCAL GAMES",
   "GameListEntry_create": "CREATE GAME",
   "GamePreview_open": "OPEN",
+  "GamePreview_publish": "publish",
   "GamePreview_delete": "delete",
-  "GamePreview_select": "select a workspace"
+  "GamePreview_select": "select a workspace",
+  "GamePreview_game_name": "game name",
+  "GamePreview_game_name_placeholder": "name placeholder",
+  "GamePreview_game_description": "game description",
+  "GamePreview_game_description_placeholder": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
 }
diff --git a/src/renderer/components/Generic/FButton.vue b/src/renderer/components/Generic/FButton.vue
index 88fa26c..b8c51a6 100644
--- a/src/renderer/components/Generic/FButton.vue
+++ b/src/renderer/components/Generic/FButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="fbutton" :style="{width: this.width + 'vh', height: this.height + 'vh'}"
+  <div id="fbutton" :style="{width: getWidth, height: this.height + 'vh'}"
   :class="`${ this.type }` + ' ' + `${ this.disabled ? 'disabled' : 'enabled' }`">
     <div id="background"></div>
     <div id="button" :style="{fontSize: this.height/2 + 'vh'}" @click="handleClick">
@@ -32,6 +32,14 @@
     data: () => ({
       colours: ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'],
     }),
+    computed: {
+      getWidth() {
+        if (this.width === 'auto') {
+          return '100%';
+        }
+        return `${this.width}vh`;
+      },
+    },
     methods: {
       handleClick(e) {
         this.$emit('click', e);
@@ -44,7 +52,7 @@
   $primary-background-width: 23.5vh
 
   #fbutton
-    margin: 10px
+    // margin: 10px
 
     & > div
       position: absolute
@@ -52,6 +60,54 @@
       left: 50%
       transform: translate(-50%, -50%)
 
+    &.delete
+      box-shadow: 0px 5px 0px #222
+      background: #333
+      transition: transform 0.15s, box-shadow 0.15s
+      transform: rotateX(0deg) translateY(0)
+      -webkit-font-smoothing: antialiased
+
+      &:hover
+        box-shadow: 0px 5px 0px #222
+        transform: rotateX(0deg) translateY(0)
+
+      &:hover:active
+        box-shadow: 0 1px 0 #222
+        background: #333
+        transition: transform 0.05s, box-shadow 0.05s
+        transform: rotateX(15deg) translateY(4px)
+
+      > #background
+        visibility: collapse
+
+      &.disabled
+        box-shadow: 0px 5px 0px #222
+        opacity: 0.5
+
+    &.publish
+      box-shadow: 0px 5px 0px #1f2142
+      background: #3f4487
+      transition: transform 0.15s, box-shadow 0.15s
+      transform: rotateX(0deg) translateY(0)
+      -webkit-font-smoothing: antialiased
+
+      &:hover
+        box-shadow: 0px 5px 0px #1f2142
+        transform: rotateX(0deg) translateY(0)
+
+      &:hover:active
+        box-shadow: 0 1px 0 #1f2142
+        background: #3f4487
+        transition: transform 0.05s, box-shadow 0.05s
+        transform: rotateX(15deg) translateY(4px)
+
+      > #background
+        visibility: collapse
+
+      &.disabled
+        box-shadow: 0px 5px 0px #283329
+        opacity: 0.5
+
     &.play
       box-shadow: 0px 5px 0px #335E38
       background: #48834B
diff --git a/src/renderer/components/Workshop/GamePreview.vue b/src/renderer/components/Workshop/GamePreview.vue
index fb5b290..ad69be4 100644
--- a/src/renderer/components/Workshop/GamePreview.vue
+++ b/src/renderer/components/Workshop/GamePreview.vue
@@ -1,44 +1,66 @@
 <template>
   <div class="game-preview" v-if="gameName !== ''">
-    <div class="game-title">
-      {{ gameName }}
-    </div>
-    <div class="key-value-pair game-row-working-directory">
-      <div>WORKING DIRECTORY:</div>
-      <div>{{ gamePath }}</div>
-    </div>
-
-    <div class="key-value-pair game-row-change-date">
-      <div>CHANGE DATE:</div>
-      <div>{{ gameName && new Date() }}</div>
+    <div class="left">
+      <div class="nameAndDescription">
+        <h2>{{ $localize('game_name') }}</h2>
+        <div class="divider"></div>
+        <textarea maxlength="32" rows="1"
+        :placeholder="$localize('game_name_placeholder')" class="name">
+        </textarea>
+        <h2>{{ $localize('game_description') }}</h2>
+        <div class="divider"></div>
+        <textarea rows="8" :placeholder="$localize('game_description_placeholder')"
+        class="description">
+        </textarea>
+      </div>
     </div>
-
-    <div class="key-value-pair game-row-creation-date">
-      <div>CREATION DATE:</div>
-      <div>{{ gameName && new Date() }}</div>
+    <div class="right">
+      <div class="previewImage">
+        <img src="~@/assets/testgame2.jpg">
+      </div>
+      <div class="key-value-pair game-row-working-directory">
+        <div>DIRECTORY:</div>
+        <div>{{ gamePath }}</div>
+      </div>
+      <div class="key-value-pair game-row-change-date">
+        <div>CHANGE DATE:</div>
+        <div>{{ gameName && new Date() }}</div>
+      </div>
+      <div class="key-value-pair game-row-creation-date">
+        <div>CREATION DATE:</div>
+        <div>{{ gameName && new Date() }}</div>
+      </div>
+      <fbutton
+        class="button open-game-workspace"
+        height="8"
+        width="auto"
+        type="play"
+        :disabled="!gamePath"
+        @click="openWorkspace"
+      >
+        {{ $localize('open') }}
+      </fbutton>
+      <fbutton
+        class="button publish-game"
+        height="8"
+        width="auto"
+        type="publish"
+        :disabled="!gamePath"
+        @click="openWorkspace"
+      >
+        {{ $localize('publish') }}
+      </fbutton>
+      <fbutton
+        class="button delete-game"
+        height="8"
+        width="auto"
+        type="delete"
+        :disabled="!gamePath"
+        @click="openWorkspace"
+      >
+        {{ $localize('delete') }}
+      </fbutton>
     </div>
-
-    <fbutton
-      class="open-game-workspace"
-      height="8"
-      width="40"
-      type="play"
-      :disabled="!gamePath"
-      @click="openWorkspace"
-    >
-      {{ $localize('open') }}
-    </fbutton>
-
-    <fbutton
-      class="delete-game"
-      height="8"
-      width="40"
-      type="uninstall"
-      :disabled="!gamePath"
-      @click="openWorkspace"
-    >
-      {{ $localize('delete') }}
-    </fbutton>
   </div>
   <div class="placeholder" v-else-if="gameName === ''">
     <a class="logoContainer">
@@ -84,17 +106,76 @@
 <style lang="sass" scoped>
   @import "~@/assets/styles/global.sass"
 
+  h2
+    font-size: 4.5vh
+    margin: 0
+
   .placeholder
     display: flex
-    background-color: rgba(0, 0, 0, 0.4)
+    background-color: rgba(0, 0, 0, 0.6)
     align-items: center
     justify-content: center
     flex-direction: column
 
   .game-preview
     display: flex
-    background-color: rgba(0, 0, 0, 0.4)
-    flex-direction: column
+    background-color: rgba(0, 0, 0, 0.6)
+    flex-direction: row
+
+    .left
+      flex: 1 1 0
+      display: flex
+      flex-direction: column
+      margin: 2vh
+
+      .nameAndDescription
+        flex: 1 1 auto
+
+        textarea
+          resize: none
+          width: 100%
+          background: none
+          outline: none
+          font-family: zekton
+          text-transform: uppercase
+          font-size: 3.5vh
+          border: none
+          padding: 1px
+          margin-bottom: 1vh
+          color: white
+          overflow: hidden
+
+          &.description
+            font-size: 2.5vh
+            text-transform: none
+
+          &::placeholder
+            color: #6B90B5
+
+          &:focus
+            background-color: rgba(0, 0, 0, 0.4)
+            border: solid 1px rgba(0, 0, 0, 0.4)
+            border-radius: 1vh
+            outline: none
+            padding: 0
+
+            &::placeholder
+              // opacity: 0.0
+    .right
+      flex: 1 1 0
+      display: flex
+      flex-direction: column
+      padding: 0.75vw
+      max-width: 22.5vw
+      background-color: rgba(0, 0, 0, 0.6)
+
+      .previewImage
+        flex: 0 1 auto
+        margin-bottom: -0.25vh
+
+        img
+          width: 100%
+          box-shadow: 0 0 0 1px #3c3c3c
 
   .game-title
     align-self: center
@@ -102,29 +183,31 @@
     font-weight: 900
     height: 3.5vw
 
-  .open-game-workspace
+  .button
     align-self: flex-end
-    // Temporary !important use. Should be removed as well as id on reusable component
-    margin-top: auto !important
     margin-bottom: 2vh !important
 
+  .open-game-workspace
+    margin-top: auto !important
+
   .key-value-pair
     width: 100%
     display: flex
     justify-content: space-between
+    background-color: rgba(0, 0, 0, 0.6)
+    box-shadow: 0 0 0 1px #161616
 
     // Both
     > *
-      font-size: 2vw
+      font-size: 1vw
 
     // Key
     > *:first-child
-      margin-left: 12px
+      margin-left: 0.5vw
 
     // Value
     > *:last-child
-      margin-right: 12px
+      margin-right: 0.5vw
       color: #dfdfdf
-      // A fallback used to make element stick to right side if it goes multiline
       margin-left: auto
 </style>