diff --git a/.gitignore b/.gitignore
index 3b735ec..9410543 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,13 @@
 *.dll
 *.so
 *.dylib
+/build/windows
+/build/bin
+
+/frontend/dist
+/frontend/node_modules/*
+frontend/node_modules/*
+node_modules
 
 # Test binary, built with `go test -c`
 *.test
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f5ef0f1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,98 @@
+
+<p  align="center">
+
+<img  src="https://user-images.githubusercontent.com/21200584/224684261-cfd9d151-91f5-4c31-8cfa-93cac25295e5.png"  alt="MTGABABYYY">
+
+<br>
+
+<b>It's going to be great, so great, in fact it will be the best</b>
+
+</p>
+
+
+## Features
+
+### Steam-Like Subscription Based Downloading and Installing
+MTGO Launcher offers a subscription-based model similar to Steam, allowing users to access and download mods seamlessly. This feature streamlines the process of acquiring and installing mods, making it more convenient and user-friendly.
+
+
+### Multiple Mod Profiles with Separate User-Profiles
+MTGO Launcher introduces the concept of multiple mod profiles, allowing users to create and manage different sets of mods for their games. Each mod profile can have its own separate user-profiles, enabling users to customize their experience for different gameplay styles or preferences.
+
+### Auto Updates for Mods
+Stay up-to-date effortlessly with the auto update feature of MTGO Launcher. When a new version of a mod is released, the launcher will automatically download and install the latest version, ensuring that you always have the most current enhancements and fixes.
+
+### Seamless Management of Mods for MTGA and SPT-AKI
+MTGO Launcher simplifies the management of mods by providing the ability to handle mods from both Make Tarkov Great Again and SPT-AKI separately. This dual compatibility allows users to organize and customize their mods for each emu independently. Additionally, the launcher enables users to switch between these two games effortlessly, eliminating the hassle of navigating through multiple interfaces.
+
+### Cross Emulation
+MTGO Launcher serves as a unified platform for both SPT-AKI and MTGA, enabling users to conveniently select, download, install, and cross-launch mods for either game. This centralized approach simplifies the modding experience by offering a single launcher for multiple emulators, making it more efficient and user-friendly.
+
+
+## Usage
+
+
+
+AKI Version: 3.6.1
+
+MTGA Version: Latest
+
+GO Version: 1.21.0 windows/amd64
+
+Right now this is a prototype, a proof of concept. A backend server has not been made yet. As such, no functionality is ready.
+
+## Known issues
+
+
+
+None at the moment.
+
+
+
+## Who are we, and why are we doing this?
+
+
+
+MTGA is a organization founded by a few Altered Escape developers.
+
+
+
+We felt that there shouldn't just be one option for emulation and began development on MTGA.
+
+We are developing this emulator to offer an accessible experience, that is up-to-date and easy to modify to provide the best out-of-the-box experience for casuals and enthusiasts.
+
+
+
+## Community
+
+
+
+Our Discord is undergoing construction and is only available to those we invite.
+
+
+
+[For the time being, any serious inquiries should be forwarded to Discussions](https://github.com/Make-Tarkov-Great-Again/MTGA-Backend/discussions)
+
+
+
+## Contribution
+
+
+
+- Is there a part of the launcher you want to tackle?
+
+- Some code you would like to refactor?
+
+- Got an idea you would like to share/implement?
+
+
+
+Feel free to create a fork, open a pull request and request a review: **We are open to any contribution!**
+
+
+
+**To keep your fork up-to-date**, [we recommend using Pull](https://github.com/wei/pull)!
+
+
+
+<p  align="center"><img  src = "https://user-images.githubusercontent.com/21200584/183050357-6c92f1cd-68ca-4f74-b41d-1706915c67cf.gif"></p>
\ No newline at end of file
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
index 538b73a..11e5009 100644
--- a/frontend/dist/index.html
+++ b/frontend/dist/index.html
@@ -7,8 +7,8 @@
     <meta name="transparent" content="true">
     <title>myproject</title>
     
-  <script type="module" crossorigin src="/assets/index.b4694891.js"></script>
-  <link rel="stylesheet" href="/assets/index.9f872096.css">
+  <script type="module" crossorigin src="/assets/index.6b93267e.js"></script>
+  <link rel="stylesheet" href="/assets/index.0541cfc3.css">
 </head>
 
 <body>
diff --git a/frontend/index.html b/frontend/index.html
index 8f9cd19..765baf6 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+    <script src="https://unpkg.com/vee-validate"></script>
     <meta charset="UTF-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <meta name="transparent" content="true">
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index f03dc79..c903d13 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,14 +1,4 @@
 <template>
-  <div>
-
-    <head>
-      <meta charset="UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Mod Manager</title>
-
-    </head>
-
-    <body>
       <component :is="selectedComponent" v-if="selected" />
 
 
@@ -29,8 +19,6 @@
       </div>
       <div class="loading-background" v-if="isLoading"></div>
       <div class="loading-box" v-if="isLoading"></div>
-    </body>
-  </div>
 </template>
 
 <script>
@@ -71,9 +59,8 @@ export default {
   }
 };
 </script>
-<style>
-  @import './style.css';
-</style>
+<link rel="stylesheet" href="@/assets/styles/style.css">
+
 
 
 
diff --git a/frontend/src/components/AkiWorkshopComponent.vue b/frontend/src/components/AkiWorkshopComponent.vue
index 2c6c043..8954aa5 100644
--- a/frontend/src/components/AkiWorkshopComponent.vue
+++ b/frontend/src/components/AkiWorkshopComponent.vue
@@ -1,18 +1,22 @@
 <template>
+  <header>
+  </header>
+
   <div class="container">
     <div class="workshop_header">
-      <div class="browseAppDetails loadable"></div>
+      <div class="browseAppDetails loadable">
+      </div>
       <div class="workshop_browse_menu_area">
         <div class="workshop_browse_tab active">
           <a href="#">Home</a>
         </div>
-        <div class="workshop_browse_tab drop">
+        <div class="workshop_browse_tab drop ">
           <a>Installed mods</a>
         </div>
-        <div class="workshop_browse_tab">
+        <div class="workshop_browse_tab ">
           <a href="#">Upload mod</a>
         </div>
-        <div class="workshop_browse_tab">
+        <div class="workshop_browse_tab ">
           <a href="#">Upload policy</a>
         </div>
         <div class="workshop_browse_tab dropdown">
@@ -25,16 +29,19 @@
       </div>
     </div>
     <div class="main-container">
+
       <div class="mod-discovery">
-        <div class="left-container">
+
+        <div class="left-container"> <!--Why does everything in here move around so much when zooming in or out?-->
           <div class="sorting-bar">
             <input type="text" class="search-bar" placeholder="Search AKI...">
+
           </div>
           <select class="mod-type-select">
             <option value="">All Types</option>
             <option value="client">Client Mod</option>
             <option value="server">Server Mod</option>
-            <option value="tool">Tool</option>
+            <option value="server">Tool</option>
           </select>
           <div class="mod-tags-container" style="margin-bottom: 30px">
             <p>Sort by tags</p>
@@ -64,39 +71,46 @@
             </div>
           </div>
         </div>
-      </div>
-      <div class="slideshow-container">
-        <h1>Mod highlight</h1>
-        <div v-for="(slide, index) in slideshowItems" :key="index" class="slideshow-item" :data-modID="slide.modID"
-          :style="{ display: index === currentSlideIndex ? 'block' : 'none' }">
-          <img class="loadable" :src="slide.imageUrl" :alt="slide.title">
-          <div class="slideshow-item-details">
-            <div class="slideshow-item-title">{{ slide.title }}</div>
-            <div class="slideshow-item-creator">By {{ slide.author }}</div>
-          </div>
-        </div>
-        <button id="prevBtn" @click="prevSlide">❮</button>
-        <button id="nextBtn" @click="nextSlide">❯</button>
-      </div>
-      <div class="mod-results">
-        <br>
-        Latest mods
-        <div class="mod-entry-row" v-for="(mod, index) in mods" :key="index" :data-modID="mod.id"
-          @click="modPage(mod.id)">
-          <img class="preview_image loadable" :src="mod.imageUrl" :alt="mod.title">
-          <div class="mod_entry_title ellipsis">{{ mod.title }}</div>
-          <div class="user_actions">
-          </div>
-          <div class="grab-button" style="cursor: pointer;" @click="handleGrabButtonClick($event, mod.id)">+</div>
-          <div class="mod_author">By {{ mod.author }}</div>
-          <div class="mod_tags ellipsis tag version">{{ mod.version }}</div>
-          <div class="mod_tags ellipsis tag" v-for="tag in mod.tags" :key="tag">{{ tag }}</div>
-        </div>
+
+        <div class="slideshow-container">
+    <h1 style="position: relative; top:1px;">Mod highlight</h1>
+
+    <div v-for="(item, index) in slideshowItems" :key="index" class="slideshow-item" :data-modID="item.modID"
+           :style="{ display: index === currentSlideIndex ? 'block' : 'none' }">
+         <img class="loadable" :src="item.imageUrl" :alt="item.title">
+      <div class="slideshow-item-details">
+        <div class="slideshow-item-title">{{ item.title }}</div>
+        <div class="slideshow-item-creator">By {{ item.author }}</div>
       </div>
     </div>
-    <div class="loading-box" style="display: none;"></div>
+
+    <button id="prevBtn" @click="prevSlide">❮</button>
+      <button id="nextBtn" @click="nextSlide">❯</button>
+  </div>
+
+  <div class="mod-results">
+    <br>
+    Latest mods
+    <div v-for="mod in mods"
+         class="mod_entry_row"
+         :key="mod.id"
+         :data-modID="mod.id"
+         @click="modPage(mod.id)"
+         style="cursor:pointer;">
+      <img class="preview_image loadable" :src="mod.imageUrl" :alt="mod.title">
+      <div class="mod_entry_title ellipsis">{{ mod.title }}</div>
+      <div class="user_actions"></div>
+      <div class="grab-button" style="cursor: pointer;" @click.stop="handleGrabButtonClick(mod.id)">+</div>
+      <div class="mod_author">By {{ mod.author }}</div>
+      <div class="mod_tags ellipsis tag version">{{ mod.version }}</div>
+      <div class="mod_tags ellipsis tag" v-for="tag in mod.tags">{{ tag }}</div>
+    </div>
   </div>
-</template>
+    </div>
+    </div>
+    </div>
+    <div class="loading-box" style="display: none;"></div>
+  </template>
 
 <script>
 export default {
@@ -108,16 +122,35 @@ export default {
           title: 'Escape from Hell',
           imageUrl: 'https://i.imgur.com/oyrIBpI.png',
           author: 'EFHDev',
-          tags: ['3.5.0', 'Server', 'Client', 'Overhaul']
+          tags: [ 'Server', 'Client', 'Overhaul'],
+          version: '3.5.0'
         },
         {
           id: 2,
           title: 'MP-43 12GA SAWED-OFF DOUBLE-BARREL SHOTGUN',
           imageUrl: 'https://hub.sp-tarkov.com/files/images/file/6e/1395.png',
           author: 'Mighty_Condor',
-          tags: ['3.5.0', 'Server', 'Weapons']
+          tags: ['Server', 'Weapons'],
+          version: '3.5.0'
+        }
+      ],
+      slideshowItems: [
+        {
+          modID: 1,
+          imageUrl: 'https://i.imgur.com/oyrIBpI.png',
+          title: 'Escape from Hell',
+          author: 'Kestrel'
+        },
+        {
+          modID: 2,
+          imageUrl: 'https://hub.sp-tarkov.com/files/images/file/6e/1395.png',
+          title: 'MP-43 12GA SAWED-OFF DOUBLE-BARREL SHOTGUN',
+          author: 'Mighty_Condor'
         }
-      ]
+        // Add more slideshow items here as needed
+      ],
+
+      currentSlideIndex: 0
     };
   },
   methods: {
@@ -137,5 +170,3 @@ export default {
   }
 };
 </script>
-
-<link rel="stylesheet" href="@/assets/styles/style.css">
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 9ab2211..0da1980 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -64,15 +64,15 @@
   height: 32px;
   border-radius: 50%;
   background-color: #262f83;
-  color: #fff;
+  color: white;
   font-size: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
-  right: 64px
+  left: 90%;
+  transform: translate(-50%, -50%);
 }
 
 .grab-button:hover {
@@ -188,6 +188,8 @@ body {
 }
 
 .mod-discovery {
+  /* flex-direction: column-reverse; */
+  /* flex-direction: column-reverse; */
   height: fit-content;
   flex-grow: 1;
   background-color: var(--GithubA-dark);
@@ -197,8 +199,9 @@ body {
   overflow: hidden;
   position: absolute;
   left: 24.9vw;
-  top: 24rem;
-  justify-content: center
+  top: 10rem;
+  justify-content: center;
+  /* align-items: stretch; */
 }
 
 .workshop_header {
@@ -229,78 +232,83 @@ body {
   margin-bottom: 20px
 }
 
-.mod-type-select,
-.search-bar {
-  padding: 5px;
-  border: 1px solid #2f81f7;
-  border-radius: 5px;
-  background-color: #fff;
-  color: #000;
-  margin: 0 10px
+.search-bar,
+.mod-type-select {
+    padding: 5px;
+    border: 1px solid #2F81F7;
+    border-radius: 5px;
+    background-color: #FFFFFF;
+    color: #000000;
+    margin: 0 10px;
 }
 
 .mod-results {
   margin-top: 20px;
   position: relative;
   height: fit-content;
-  width: fit-content
+  width: fit-content;
 }
 
 .mod-tags {
   display: inline;
   align-items: center;
   margin-top: 20px;
-  height: fit-content
+height: fit-content;
 }
 
+
 .pill {
   display: inline-block;
   padding: 5px 15px;
   border-radius: 20px;
-  background-color: #6e6969;
-  color: #fff;
+  background-color: #6E6969;
+  color: white;
   text-decoration: none;
   margin-right: 10px;
   margin-bottom: 5px;
   position: relative;
-  transition: color .7s ease;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, .2)
+  transition: color 0.7s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adjust values as needed */
 }
 
 .pill::before {
   content: "";
   position: absolute;
   left: 5px;
-  font-weight: 700
+  font-weight: bold;
 }
 
+/* Add this for hover effect */
 .pill:hover {
-  border: #fff 1px solid
+  border: white 1px solid;
+
 }
 
 .pill.version {
   display: inline-block;
   padding: 5px 15px;
   border-radius: 20px;
-  background-color: var(--Github-#ffa500);
-  color: #fff;
+  background-color: var(--Github-orange);
+  color: white;
   text-decoration: none;
   margin-right: 10px;
   margin-bottom: 5px;
   position: relative;
-  transition: color .7s ease
+  transition: color 0.7s ease;
 }
 
 .pill.version::before {
   content: "";
   position: absolute;
   left: 5px;
-  font-weight: 700
+  font-weight: bold;
 }
 
+/* Add this for hover effect */
 .pill.version:hover {
-  border: #fff 1px solid
-}
+      border: white 1px solid;
+
+  }
 html {
   height: 100%
 }
@@ -334,6 +342,23 @@ html {
   overflow: visible
 }
 
+.mod_entry_row {
+  /* padding: 3px; */
+  margin-bottom: 5px;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
+  border: 1px solid rgba(0,0,0,0);
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
+  background-attachment: scroll;
+  background-origin: initial;
+  background-clip: initial;
+  background-color: rgba(0, 0, 0, 0);
+  display: flow-root;
+  width: 740px;
+  height: fit-content;
+  overflow: hidden;
+  position: relative;
+}
+
 :-webkit-scrollbar-thumb {
   background: #434953;
   width: 10px;