diff --git a/css/stylesheet.css b/css/csfloat_styles.css
similarity index 96%
rename from css/stylesheet.css
rename to css/csfloat_styles.css
index 5d166ef..eabd8de 100644
--- a/css/stylesheet.css
+++ b/css/csfloat_styles.css
@@ -47,6 +47,7 @@
 .betterfloat-buffprice:hover .betterfloat-buff-tooltip {
 	visibility: visible;
 	opacity: 1;
+	transition: visibility 0s, opacity 0.5s linear;
 }
 
 .betterfloat-buffprice {
diff --git a/css/popup.css b/css/popup.css
index 3f643ff..e14c187 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -228,4 +228,5 @@ input[type='checkbox'] {
     color: rgba(255, 255, 255, 0.7);
     margin: 5px 20px 5px 0px;
     font-weight: 400;
+    overflow-wrap: break-word;
 }
\ No newline at end of file
diff --git a/css/skinport_styles.css b/css/skinport_styles.css
new file mode 100644
index 0000000..16c0f59
--- /dev/null
+++ b/css/skinport_styles.css
@@ -0,0 +1,32 @@
+.betterfloat-buff-tooltip {
+	/* Positioning the tooltip text */
+	position: absolute;
+	z-index: 1;
+    transform: translate(-16%, 40%);
+	visibility: hidden;
+	width: 200px;
+    background-color: #192733;
+	color: #fff;
+	text-align: center;
+    padding: 8px 10px 8px 10px;
+	border-radius: 6px;
+    font-size: 14px;
+
+	/* Fade in tooltip */
+	opacity: 0;
+	transition: opacity 0.3s;
+}
+
+.betterfloat-buffprice {
+    font-size: 12px;
+}
+
+.betterfloat-buffprice:hover .betterfloat-buff-tooltip {
+	visibility: visible;
+	opacity: 1;
+}
+
+.betterfloat-sale-tag {
+    font-size: 12px!important;
+    margin: 1px;
+}
\ No newline at end of file
diff --git a/html/changelog.html b/html/changelog.html
index 84a7469..5e074b0 100644
--- a/html/changelog.html
+++ b/html/changelog.html
@@ -1,3 +1,16 @@
+<div class="Group">
+    <div class="VersionHeader">1.4.0</div>
+    <div class="VersionBox">
+        <p class="VersionSubHeader">
+            What's new?
+        </p> 
+        <ul class="VersionText">
+            <li><b>FEATURE:</b> First BETA support for skinport.com. Only selected features work for now. Please refer to the corresponding extension settings tab.</li>
+            <li><b>PRICING:</b> As Steaminventoryhelper changed their CORS policy, requests now have to be proxied through a server. The deployed source code of the server can be found here: https://gist.github.com/GODrums/5b2d24c17c136a1b37acd14b1089933c</li>
+            <li><b>PRICING:</b> Skinport displays item prices in your local currency. To provide actual accurate exchange rates, the exchangerate.host API is in use. If you want to use Skinport's questionable rates instead, feel free to select it in the options popup. Skinport will always charge in your (local) account currency.</li>
+        </ul>
+    </div>
+</div>
 <div class="Group">
     <div class="VersionHeader">1.3.2</div>
     <div class="VersionBox">
diff --git a/html/settings.html b/html/csfloat.html
similarity index 100%
rename from html/settings.html
rename to html/csfloat.html
diff --git a/html/index.html b/html/index.html
index c02f7fb..7d308bc 100644
--- a/html/index.html
+++ b/html/index.html
@@ -24,9 +24,13 @@
         <div class="MainContent"></div>
         <footer>
             <div class="tabbar">
-                <button class="tabItem active" data-page="settings.html">
+                <button class="tabItem active" data-page="csfloat.html">
                     <img class="tab-icon" src="../public/gear-solid.svg" />
-                    <p>Settings</p>
+                    <p>CSFloat</p>
+                </button>
+                <button class="tabItem" data-page="skinport.html">
+                    <img class="tab-icon" src="../public/gear-solid.svg" />
+                    <p>Skinport</p>
                 </button>
                 <button class="tabItem" data-page="changelog.html">
                     <img class="tab-icon" src="../public/file-lines-solid.svg" />
diff --git a/html/skinport.html b/html/skinport.html
new file mode 100644
index 0000000..899c124
--- /dev/null
+++ b/html/skinport.html
@@ -0,0 +1,52 @@
+<div class="Group">
+    <div class="GroupHeader">FEATURES</div>
+    <div class="GroupElement">
+        <p class="ElementText">Buff Price Calculations</p>
+        <input type="checkbox" id="SkinportBuffPrice" name="spBuffPrice" value="spBuffPrice" checked />
+    </div>
+    <div class="GroupElement">
+        <p class="ElementText">Auto-Checkboxes</p>
+        <input type="checkbox" id="SkinportCheckboxes" name="spCheckBoxes" value="spCheckBoxes" checked />
+    </div>
+</div>
+<div class="Group">
+    <div class="GroupHeader">PRICES</div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Buff Price Reference</p>
+            <select class="ElementDropdownMenu" id="SkinportPriceReference" name="spPriceReference">
+                <option value="0">Bid</option>
+                <option value="1" selected>Ask</option>
+            </select>
+        </div>
+        <p class="ElementDescription">
+            Sets the reference price for difference calculations on item prices.<br />Bid refers to the highest buy order price.<br />Ask refers to the lowest listing price. (Default)
+        </p>
+    </div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Currency Conversion</p>
+            <select class="ElementDropdownMenu" id="SkinportCurrencyConversion" name="skinportRates">
+                <option value="real">Real</option>
+                <option value="skinport" selected>Skinport</option>
+            </select>
+        </div>
+        <p class="ElementDescription">
+            Sets the reference rates for the currency conversion (USD -> X). Skinport will nevertheless always charge you in your local currency.. <br />Real refers to the buff-like currency conversion rates. (Default) <br />Skinport refers to the rates used by Skinport, which can vary from Buff rates.
+        </p>
+    </div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Show Steam Price</p>
+            <input type="checkbox" id="SkinportSteamPrice" name="spSteamPrice" value="spSteamPrice" />
+        </div>
+        <p class="ElementDescription">Show the Steam price of an item in addition to the Buff price.</p>
+    </div>
+    <div class="GroupElementExtended">
+        <div class="GroupRow">
+            <p class="ElementText">Show Buff Price Difference</p>
+            <input type="checkbox" id="SkinportInputBuffDifference" name="spBuffDifference" value="spBuffDifference" checked/>
+        </div>
+        <p class="ElementDescription">This settings allows to switch between displaying the difference to the Buff price in absolute units and the original difference to the Steam price in percentage.</p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 58c0459..3caed1a 100644
--- a/manifest.json
+++ b/manifest.json
@@ -13,7 +13,7 @@
 		{
 			"matches": ["*://*.csfloat.com/*", "*://*.csgofloat.com/*"],
 			"js": ["js/csfloat/content_script.js"],
-			"css": ["css/stylesheet.css"],
+			"css": ["css/csfloat_styles.css"],
 			"run_at": "document_end"
 		},
 		{
@@ -24,6 +24,7 @@
 		{
 			"matches": ["*://*.skinport.com/*"],
 			"js": ["js/skinport/content_script.js"],
+			"css": ["css/skinport_styles.css"],
 			"run_at": "document_end"
 		}
 	],
diff --git a/src/@typings/FloatTypes.d.ts b/src/@typings/FloatTypes.d.ts
index 952ab5e..03d760f 100644
--- a/src/@typings/FloatTypes.d.ts
+++ b/src/@typings/FloatTypes.d.ts
@@ -26,6 +26,12 @@ export type ExtensionSettings = {
     listingAge: 0 | 1 | 2;
     showBuffDifference: boolean;
     showTopButton: boolean;
+    spBuffPrice: boolean;
+    spCheckBoxes: boolean;
+    spPriceReference: 0 | 1;
+    spSteamPrice: boolean;
+    spBuffDifference: boolean;
+    skinportRates: "skinport" | "real";
 };
 
 export type CSGOTraderMapping = {
@@ -86,6 +92,29 @@ export module Skinport {
         success: boolean;
     }
 
+    export type UserData = {
+        country: string;
+        csrf: string;
+        currency: string; // e.g. "EUR"
+        followings: number[];
+        limits: {
+            kycTier1PayoutMax: number;
+            kycTier2PayoutMax: number;
+            maxOrderValue: number;
+            minOrderValue: number;
+            minPayoutValue: number;
+            minSaleValue: number;
+            saleFeeReduced: number;
+        };
+        locale: string;
+        message: string | null;
+        paymentMethods: string[];
+        rate: 1;
+        rates: { [target: string]: number }; //currency -> target
+        requestId: string;
+        success: boolean;
+    }
+
     // https://skinport.com/api/home
     export type HomeData = {
         message: string | null;
diff --git a/src/background.ts b/src/background.ts
index 47f0d2d..42bcecb 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -20,6 +20,11 @@ chrome.runtime.onInstalled.addListener(function (details) {
             showBuffDifference: true,
             listingAge: 0,
             showTopButton: true,
+            skinportRates: 'real',
+            spBuffPrice: true,
+            spCheckBoxes: true,
+            spPriceReference: 1,
+            spBuffDifference: true,
         });
     } else if (details.reason == 'update') {
         var thisVersion = chrome.runtime.getManifest().version;
diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts
index 1d7a50b..25c0e9c 100644
--- a/src/csfloat/content_script.ts
+++ b/src/csfloat/content_script.ts
@@ -9,12 +9,11 @@ import {
     getItemPrice,
     getPriceMapping,
     getWholeHistory,
-    handleSpecialStickerNames,
     loadBuffMapping,
     loadMapping,
 } from '../mappinghandler';
 import { initSettings } from '../util/extensionsettings';
-import { parseHTMLString } from '../util/helperfunctions';
+import { handleSpecialStickerNames, parseHTMLString } from '../util/helperfunctions';
 
 type PriceResult = {
     price_difference: number;
@@ -253,11 +252,11 @@ async function addItemHistory(container: Element, item: FloatItem) {
 
     const highestContainer = document.createElement('span');
     highestContainer.classList.add('betterfloat-history-highest');
-    highestContainer.textContent = 'High: $' + itemHistory.highest.avg_price;
+    highestContainer.textContent = 'High: $' + itemHistory.highest.avg_price.toFixed(2);
 
     const lowestContainer = document.createElement('span');
     lowestContainer.classList.add('betterfloat-history-lowest');
-    lowestContainer.textContent = 'Low: $' + itemHistory.lowest.avg_price;
+    lowestContainer.textContent = 'Low: $' + itemHistory.lowest.avg_price.toFixed(2);
 
     const divider = document.createElement('span');
     divider.textContent = ' | ';
@@ -557,7 +556,7 @@ function createTopButton() {
     topButton.classList.add('betterfloat-top-button');
     topButton.setAttribute(
         'style',
-        'position: fixed; right: 2rem; bottom: 2rem; z-index: 999; width: 40px; height: 40px; border-radius: 50%; background-color: #004594; border: none; outline: none; cursor: pointer; display: none'
+        'position: fixed; right: 2rem; bottom: 2rem; z-index: 999; width: 40px; height: 40px; border-radius: 50%; background-color: #004594; border: none; outline: none; cursor: pointer; display: none; transition: visibility 0s, opacity 0.5s linear;'
     );
     let topButtonIcon = document.createElement('img');
     topButtonIcon.setAttribute('src', runtimePublicURL + '/chevron-up-solid.svg');
diff --git a/src/eventhandler.ts b/src/eventhandler.ts
index 06e4bf4..8ebdd52 100644
--- a/src/eventhandler.ts
+++ b/src/eventhandler.ts
@@ -1,5 +1,5 @@
 import { EventData, HistoryData, ListingData, SellerData, Skinport } from './@typings/FloatTypes';
-import { cacheHistory, cacheItems } from './mappinghandler';
+import { cacheHistory, cacheItems, cacheSkinportCurrencyRates } from './mappinghandler';
 
 type StallData = {
     listings: ListingData[];
@@ -23,6 +23,10 @@ function processSkinportEvent(eventData: EventData<unknown>) {
     console.debug('[BetterFloat] Received data from url: ' + eventData.url + ', data:', eventData.data);
     if (eventData.url.includes('api/browse/730')) {
         // Skinport.MarketData
+    } else if (eventData.url.includes('api/data/')) {
+        // Data from first page load
+        let data = eventData.data as Skinport.UserData;
+        cacheSkinportCurrencyRates(data.rates, data.currency);
     }
 }
 
diff --git a/src/mappinghandler.ts b/src/mappinghandler.ts
index ddb67b2..2f49cfe 100644
--- a/src/mappinghandler.ts
+++ b/src/mappinghandler.ts
@@ -1,4 +1,5 @@
-import { CSGOTraderMapping, HistoryData, ListingData } from './@typings/FloatTypes';
+import { CSGOTraderMapping, HistoryData, ListingData, Skinport } from './@typings/FloatTypes';
+import { handleSpecialStickerNames } from './util/helperfunctions';
 
 // maps buff_name to buff_id
 let buffMapping: { [name: string]: number } = {};
@@ -9,7 +10,14 @@ let priceMapping: CSGOTraderMapping = {};
 let cachedItems: ListingData[] = [];
 // history for one item
 let cachedHistory: HistoryData[] = [];
+// cached steaminventoryhelper responses
 let cachedInventoryHelperResponses: { [buff_name: string]: SteaminventoryhelperResponse | null } = {};
+// cached currency rates by Skinport: USD -> X
+let skinportRatesFromUSD: { [currency: string]: number } = {};
+// cached currency rates by exchangerate.host: USD -> X
+let realRatesFromUSD: { [currency: string]: number } = {};
+let userCurrency = '';
+
 
 export async function cacheHistory(data: HistoryData[]) {
     if (cachedHistory.length > 0) {
@@ -34,6 +42,21 @@ export async function cacheItems(data: ListingData[]) {
     cachedItems = data;
 }
 
+export async function cacheSkinportCurrencyRates(data: { [currency: string]: number }, user: string) {
+    if (Object.keys(skinportRatesFromUSD).length > 0) {
+        console.debug('[BetterFloat] Currency rates already cached, overwriting old ones: ', skinportRatesFromUSD);
+    }
+    skinportRatesFromUSD = data;
+    userCurrency = user;
+}
+
+export async function cacheRealCurrencyRates(data: { [currency: string]: number }) {
+    if (Object.keys(realRatesFromUSD).length > 0) {
+        console.debug('[BetterFloat] Real currency rates already cached, overwriting old ones: ', realRatesFromUSD);
+    }
+    realRatesFromUSD = data;
+}
+
 export async function getWholeHistory() {
     let history = cachedHistory;
     cachedHistory = [];
@@ -83,17 +106,30 @@ export async function getItemPrice(buff_name: string): Promise<{ starting_at: nu
     };
 }
 
-export function handleSpecialStickerNames(name: string): string {
-    if (name.includes('Ninjas in Pyjamas | Katowice 2015')) {
-        return 'Sticker | Ninjas in Pyjamas  | Katowice 2015';
-    } else if (name.includes('Vox Eminor | Katowice 2015')) {
-        return 'Sticker | Vox Eminor  | Katowice 2015';
-    } else if (name.includes('PENTA Sports | Katowice 2015')) {
-        return 'Sticker | PENTA Sports  | Katowice 2015';
-    } else if (name.indexOf('niko') > -1) {
-        return name.substring(0, name.lastIndexOf('|')) + ' ' + name.substring(name.lastIndexOf('|'), name.length);
+export async function getUserCurrencyRate(rates: "skinport" | "real" = "real") {
+    if (Object.keys(skinportRatesFromUSD).length == 0) {
+        await fetchUserData();
     }
-    return name;
+    if (rates == "real" && Object.keys(realRatesFromUSD).length == 0) {
+        await fetchCurrencyRates();
+    }
+    return rates == "real" ? realRatesFromUSD[userCurrency] : skinportRatesFromUSD[userCurrency];
+}
+
+// this endpoint sometimes gets called by Skinport itself and provides the user data
+async function fetchUserData() {
+    await fetch('https://skinport.com/api/data/').then((response) => response.json()).then((data: Skinport.UserData) => {
+        console.debug('[BetterFloat] Received user data from Skinport manually: ', data)
+        cacheSkinportCurrencyRates(data.rates, data.currency);
+    });
+}
+
+// fetches currency rates from exchangerate.host, which is a free API which currently allows CORS
+async function fetchCurrencyRates() {
+    await fetch('https://api.exchangerate.host/latest?base=USD').then((response) => response.json()).then((data) => {
+        console.debug('[BetterFloat] Received currency rates from exchangerate.host: ', data);
+        cacheRealCurrencyRates(data.rates);
+    });
 }
 
 type SIHRelay = {
diff --git a/src/popup.ts b/src/popup.ts
index cc50f8c..d7c4726 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -7,7 +7,7 @@ $(function () {
     // init loading of content
     $('.MainContent').load('settings.html', function () {
         //Loading complete
-        loadSettings();
+        loadSettings('settings.html');
         addListeners();
     });
 
@@ -17,9 +17,7 @@ $(function () {
         let url = e.currentTarget.getAttribute('data-page') ?? 'settings.html';
         $('.MainContent').load(url, function () {
             //Loading complete
-            if (url == 'settings.html') {
-                loadSettings();
-            }
+            loadSettings(url);
             addListeners();
         });
 
@@ -82,7 +80,7 @@ chrome.permissions
         }
     });
 
-function loadSettings() {
+function loadForSettings() {
     let featureBuffPrice = <HTMLInputElement>document.getElementById('InputBuffPrice');
     let featureAutorefresh = <HTMLInputElement>document.getElementById('InputAutorefresh');
     let priceReference = <HTMLSelectElement>document.getElementById('DropDownPriceReference');
@@ -92,7 +90,6 @@ function loadSettings() {
     let listingAge = <HTMLSelectElement>document.getElementById('DropDownListingAge');
     let buffDifference = <HTMLInputElement>document.getElementById('InputBuffDifference');
     let topButton = <HTMLInputElement>document.getElementById('InputTopButton');
-
     chrome.storage.local.get((data) => {
         console.debug('[BetterFloat] Loaded settings: ', data);
         if (data.buffprice) {
@@ -134,3 +131,51 @@ function loadSettings() {
         }
     });
 }
+
+function loadForSkinport() {
+    let buffPriceElement = <HTMLInputElement>document.getElementById('SkinportBuffPrice');
+    let checkBoxesElement = <HTMLInputElement>document.getElementById('SkinportCheckboxes');
+    let skinportRatesElement = <HTMLSelectElement>document.getElementById('SkinportCurrencyConversion');
+    let priceReferenceElement = <HTMLSelectElement>document.getElementById('SkinportPriceReference');
+    let skinportSteamPrice = <HTMLInputElement>document.getElementById('SkinportSteamPrice');
+    let skinportInputBuffDifference = <HTMLInputElement>document.getElementById('SkinportInputBuffDifference');
+    
+
+    chrome.storage.local.get((data) => {
+        console.debug('[BetterFloat] Loaded settings: ', data);
+        if (data.spBuffPrice) {
+            buffPriceElement.checked = true;
+        } else {
+            buffPriceElement.checked = false;
+        }
+        if (data.spCheckBoxes) {
+            checkBoxesElement.checked = true;
+        } else {
+            checkBoxesElement.checked = false;
+        }
+        if (data.skinportRates) {
+            skinportRatesElement.value = data.skinportRates;
+        }
+        if (data.spPriceReference) {
+            priceReferenceElement.value = data.spPriceReference;
+        }
+        if (data.spSteamPrice) {
+            skinportSteamPrice.checked = true;
+        } else {
+            skinportSteamPrice.checked = false;
+        }
+        if (data.spBuffDifference) {
+            skinportInputBuffDifference.checked = true;
+        } else {
+            skinportInputBuffDifference.checked = false;
+        }
+    });
+}
+
+function loadSettings(url: string) {
+    if (url == 'settings.html') {
+        loadForSettings();
+    } else if (url == 'skinport.html') {
+        loadForSkinport();
+    }
+}
\ No newline at end of file
diff --git a/src/skinport/content_script.ts b/src/skinport/content_script.ts
index b8380f0..c7755fb 100644
--- a/src/skinport/content_script.ts
+++ b/src/skinport/content_script.ts
@@ -1,8 +1,8 @@
 import { ExtensionSettings, ItemStyle, Skinport } from '../@typings/FloatTypes';
-import { getBuffMapping, getInventoryHelperPrice, getPriceMapping, handleSpecialStickerNames, loadBuffMapping, loadMapping } from '../mappinghandler';
+import { getBuffMapping, getInventoryHelperPrice, getPriceMapping, getUserCurrencyRate, loadBuffMapping, loadMapping } from '../mappinghandler';
 import { activateHandler } from '../eventhandler';
 import { initSettings } from '../util/extensionsettings';
-import { parseHTMLString } from '../util/helperfunctions';
+import { handleSpecialStickerNames } from '../util/helperfunctions';
 
 async function init() {
     //get current url
@@ -16,6 +16,7 @@ async function init() {
     activateHandler();
 
     extensionSettings = await initSettings();
+
     await loadMapping();
     await loadBuffMapping();
 
@@ -42,7 +43,7 @@ async function init() {
 
 async function applyMutation() {
     let observer = new MutationObserver(async (mutations) => {
-        if (extensionSettings.buffprice) {
+        if (extensionSettings.spBuffPrice) {
             for (let mutation of mutations) {
                 for (let i = 0; i < mutation.addedNodes.length; i++) {
                     let addedNode = mutation.addedNodes[i];
@@ -70,6 +71,7 @@ async function applyMutation() {
 
 async function adjustItem(container: Element) {
     const item = getFloatItem(container);
+    if (!item) return;
     await addBuffPrice(item, container);
     // if (extensionSettings.stickerPrices) {
     //     await addStickerInfo(item, container, cachedItem, priceResult);
@@ -79,8 +81,11 @@ async function adjustItem(container: Element) {
     // }
 }
 
-function getFloatItem(container: Element): Skinport.Listing {
+function getFloatItem(container: Element): Skinport.Listing | null {
     let name = container.querySelector('.ItemPreview-itemName')?.textContent ?? '';
+    if (name == '') {
+        return null;
+    }
     let price = Number(container.querySelector('.ItemPreview-price .Tooltip-link')?.innerHTML.substring(1).replace(',', '')) ?? 0;
     let type = container.querySelector('.ItemPreview-itemTitle')?.textContent ?? '';
     let text = container.querySelector('.ItemPreview-itemText')?.innerHTML ?? '';
@@ -144,7 +149,7 @@ async function addBuffPrice(item: Skinport.Listing, container: Element): Promise
     let helperPrice: number | null = null;
 
     if (!priceMapping[buff_name] || !priceMapping[buff_name]['buff163'] || !priceMapping[buff_name]['buff163']['starting_at'] || !priceMapping[buff_name]['buff163']['highest_order']) {
-        console.debug(`[BetterFloat] No price mapping found for ${buff_name}`);
+        console.debug(`[BetterFloat] No price mapping found for ${buff_name}: `, container);
         helperPrice = await getInventoryHelperPrice(buff_name);
     }
 
@@ -171,7 +176,17 @@ async function addBuffPrice(item: Skinport.Listing, container: Element): Promise
         priceOrder = 0;
     }
 
-    //TODO: from here
+    //convert prices to user's currency
+    let currencyRate = await getUserCurrencyRate(extensionSettings.skinportRates);
+    if (extensionSettings.skinportRates == 'skinport') {
+        // origin price of rate is non-USD, so we need to divide
+        priceListing = priceListing / currencyRate;
+        priceOrder = priceOrder / currencyRate;
+    } else {
+        // origin price of rate is USD, so we need to multiply
+        priceListing = priceListing * currencyRate;
+        priceOrder = priceOrder * currencyRate;
+    }
 
     const presentationDiv = container.querySelector('.ItemPreview-mainAction');
     if (presentationDiv) {
@@ -190,10 +205,15 @@ async function addBuffPrice(item: Skinport.Listing, container: Element): Promise
         }
     }
 
+    let tooltipLink = <HTMLElement>container.querySelector('.ItemPreview-priceValue')?.firstChild;
+    const currencySymbol = tooltipLink.textContent?.charAt(0);
     let priceDiv = container.querySelector('.ItemPreview-oldPrice');
     if (priceDiv && !container.querySelector('.betterfloat-buffprice')) {
-        priceDiv.className += 'betterfloat-buffprice';
+        priceDiv.className += ' betterfloat-buffprice';
         let buffContainer = document.createElement('div');
+        buffContainer.style.display = 'flex';
+        buffContainer.style.marginTop = '5px';
+        buffContainer.style.justifyContent = 'center';
         let buffImage = document.createElement('img');
         buffImage.setAttribute('src', runtimePublicURL + '/buff_favicon.png');
         buffImage.setAttribute('style', 'height: 20px; margin-right: 5px');
@@ -206,7 +226,7 @@ async function addBuffPrice(item: Skinport.Listing, container: Element): Promise
         buffPrice.appendChild(tooltipSpan);
         let buffPriceBid = document.createElement('span');
         buffPriceBid.setAttribute('style', 'color: orange;');
-        buffPriceBid.textContent = `Bid $${priceOrder}`;
+        buffPriceBid.textContent = `Bid ${currencySymbol}${priceOrder.toFixed(2)}`;
         buffPrice.appendChild(buffPriceBid);
         let buffPriceDivider = document.createElement('span');
         buffPriceDivider.setAttribute('style', 'color: gray;margin: 0 3px 0 3px;');
@@ -214,10 +234,10 @@ async function addBuffPrice(item: Skinport.Listing, container: Element): Promise
         buffPrice.appendChild(buffPriceDivider);
         let buffPriceAsk = document.createElement('span');
         buffPriceAsk.setAttribute('style', 'color: greenyellow;');
-        buffPriceAsk.textContent = `Ask $${priceListing}`;
+        buffPriceAsk.textContent = `Ask ${currencySymbol}${priceListing.toFixed(2)}`;
         buffPrice.appendChild(buffPriceAsk);
         buffContainer.appendChild(buffPrice);
-        if (extensionSettings.showSteamPrice) {
+        if (extensionSettings.spSteamPrice) {
             let divider = document.createElement('div');
             priceDiv.after(buffContainer);
             priceDiv.after(divider);
@@ -226,46 +246,46 @@ async function addBuffPrice(item: Skinport.Listing, container: Element): Promise
         }
     }
 
-    if (extensionSettings.showBuffDifference) {
-        const difference = item.price - (extensionSettings.priceReference == 0 ? priceOrder : priceListing);
-        const priceContainer = <HTMLElement>container.querySelector('.ItemPreview-discount');
-        let saleTag = priceContainer.firstChild;
-        if (saleTag) {
-            priceContainer.removeChild(saleTag);
+    if (extensionSettings.spBuffDifference) {
+        const difference = item.price - (extensionSettings.spPriceReference == 0 ? priceOrder : priceListing);
+        let discountContainer = <HTMLElement>container.querySelector('.ItemPreview-discount');
+        if (!discountContainer || !discountContainer.firstChild) {
+            discountContainer = document.createElement('div');
+            discountContainer.className = 'GradientLabel ItemPreview-discount';
+            const newSaleTag = document.createElement('span');
+            discountContainer.appendChild(newSaleTag);
+            container.querySelector('.ItemPreview-priceValue')?.appendChild(discountContainer);
+        }
+        let saleTag = <HTMLElement>discountContainer.firstChild;
+        if (item.price !== 0 && saleTag && tooltipLink && !discountContainer.querySelector('.betterfloat-sale-tag')) {
+            saleTag.className = 'sale-tag betterfloat-sale-tag';
+            discountContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? 'black' : difference < 0 ? 'green' : '#ce0000'})`;
+            saleTag.textContent = difference == 0 ? `-${currencySymbol}0` : (difference > 0 ? '+' : '-') + currencySymbol + Math.abs(difference).toFixed(2);
         }
-        if (item.price !== 0) {
-            const buffPriceHTML = `<span class="sale-tag betterfloat-sale-tag" style="background-color: ${difference == 0 ? 'slategrey;' : difference < 0 ? 'green;' : '#ce0000;'}"> ${
-                difference == 0 ? '-$0' : (difference > 0 ? '+$' : '-$') + Math.abs(difference).toFixed(2)
-            } </span>`;
-            parseHTMLString(buffPriceHTML, priceContainer);
+    } else {
+        if (container.querySelector('.sale-tag')) {
+            (<HTMLElement>container.querySelector('.sale-tag')).className += 'betterfloat-sale-tag';
         }
     }
 }
 
 function createBuffName(item: Skinport.Listing): string {
-    // let full_name = `${item.name}`;
-    // if (item.type.includes('Sticker')) {
-    //     full_name = `Sticker | ` + full_name;
-    // } else if (!item.type.includes('Container')) {
-    //     if (item.type.includes('StatTrak') || item.type.includes('Souvenir')) {
-    //         full_name = full_name.includes('★') ? `★ StatTrak™ ${full_name.split('★ ')[1]}` : `${item.quality} ${full_name}`;
-    //     }
-    //     if (item.style != 'Vanilla') {
-    //         full_name += ` (${item.condition})`;
-    //     }
-    // }
-    // return full_name
-    //     .replace(/ +(?= )/g, '')
-    //     .replace(/\//g, '-')
-    //     .trim();
-    let full_name = `${(item.text.includes('Knife') || item.text.includes('Gloves')) && !item.text.includes('StatTrak') ? '★ ' : ''}${item.type}${
-        item.name.includes('Vanilla') ? '' : ' | ' + item.name.split(' (')[0].trim()
-    }${item.name.includes('Vanilla') ? '' : ' (' + item.wear + ')'}`;
-    if (item.name.includes('Dragon King')) full_name = `M4A4 | 龍王 (Dragon King)${' (' + item.wear + ')'}`;
-    else if (item.text.includes('Container') || item.text.includes('Collectible') || item.text.includes('Graffiti')) full_name = item.name;
-    else if (item.text.includes('Sticker')) full_name = `Sticker | ${item.name}`;
-    else if (item.text.includes('Patch')) full_name = `Patch | ${item.name}`;
-    else if (item.text.includes('Agent')) full_name = `${name} | ${item.type}`;
+    let full_name = `${item.name}`;
+    if (item.type.includes('Sticker') || item.type.includes('Patch') || item.type.includes('Music Kit')) {
+        full_name = item.type + ' | ' + full_name;
+    } else if (item.text.includes('Container') || item.text.includes('Collectible') || item.type.includes('Gift') || item.type.includes('Key') || item.type.includes('Pass')) {
+        full_name = item.name;
+    } else if (item.text.includes('Graffiti')) {
+        full_name = 'Sealed Graffiti | ' + item.name;
+    } else if (item.text.includes('Agent')) {
+        full_name = `${item.name} | ${item.type}`;
+    } else if (item.name.includes('Dragon King')) {
+        full_name = `M4A4 | 龍王 (Dragon King)${' (' + item.wear_name + ')'}`;
+    } else {
+        full_name = `${(item.text.includes('Knife') || item.text.includes('Gloves')) && !item.text.includes('StatTrak') ? '★ ' : ''}${item.type}${
+            item.name.includes('Vanilla') ? '' : ' | ' + item.name.split(' (')[0].trim()
+        }${item.name.includes('Vanilla') ? '' : ' (' + item.wear_name + ')'}`;
+    }
     return full_name.replace(/ +(?= )/g, '').replace(/\//g, '-');
 }
 
diff --git a/src/util/extensionsettings.ts b/src/util/extensionsettings.ts
index 897f86c..360752a 100644
--- a/src/util/extensionsettings.ts
+++ b/src/util/extensionsettings.ts
@@ -30,6 +30,24 @@ export async function initSettings(): Promise<ExtensionSettings> {
         if (data.showTopButton) {
             extensionSettings.showTopButton = Boolean(data.showTopButton);
         }
+        if (data.spBuffPrice) {
+            extensionSettings.spBuffPrice = Boolean(data.spBuffPrice);
+        }
+        if (data.spCheckBoxes) {
+            extensionSettings.spCheckBoxes = Boolean(data.spCheckBoxes);
+        }
+        if (data.skinportRates) {
+            extensionSettings.skinportRates = data.skinportRates as ExtensionSettings['skinportRates'];
+        }
+        if (data.spPriceReference) {
+            extensionSettings.spPriceReference = data.spPriceReference as ExtensionSettings['spPriceReference'];
+        }
+        if (data.spSteamPrice) {
+            extensionSettings.spSteamPrice = Boolean(data.spSteamPrice);
+        }
+        if (data.spBuffDifference) {
+            extensionSettings.spBuffDifference = Boolean(data.spBuffDifference);
+        }
     });
 
     // wait for settings to be loaded, takes about 1.5 seconds
diff --git a/src/util/helperfunctions.ts b/src/util/helperfunctions.ts
index d3c0431..1628277 100644
--- a/src/util/helperfunctions.ts
+++ b/src/util/helperfunctions.ts
@@ -6,4 +6,19 @@ export function parseHTMLString(htmlString: string, container: HTMLElement) {
     for (const tag of tags.children) {
         container.appendChild(tag);
     }
+}
+
+export function handleSpecialStickerNames(name: string): string {
+    if (name.includes('Ninjas in Pyjamas | Katowice 2015')) {
+        return 'Sticker | Ninjas in Pyjamas  | Katowice 2015';
+    } else if (name.includes('Vox Eminor | Katowice 2015')) {
+        return 'Sticker | Vox Eminor  | Katowice 2015';
+    } else if (name.includes('PENTA Sports | Katowice 2015')) {
+        return 'Sticker | PENTA Sports  | Katowice 2015';
+    } else if (name.includes('Ground Rebel | Elite Crew')) {
+        return 'Ground Rebel  | Elite Crew';
+    } else if (name.indexOf('niko') > -1) {
+        return name.substring(0, name.lastIndexOf('|')) + ' ' + name.substring(name.lastIndexOf('|'), name.length);
+    }
+    return name;
 }
\ No newline at end of file