diff --git a/components/ArchivedAuctions.tsx/ArchivedAuctions.tsx b/components/ArchivedAuctions.tsx/ArchivedAuctions.tsx
index eba44317..dd480d9a 100644
--- a/components/ArchivedAuctions.tsx/ArchivedAuctions.tsx
+++ b/components/ArchivedAuctions.tsx/ArchivedAuctions.tsx
@@ -219,10 +219,10 @@ const ArchivedAuctionsList = (props: Props) => {
             <div className={styles.datepickerContainer}>
                 <label style={{ marginRight: 15 }}>From: </label>
                 <div style={{ paddingRight: 15 }}>
-                    <DatePicker selected={from} onChange={date => handleDateChange(date, 'from')} className={'form-control'} />
+                    <DatePicker selected={from} onChange={date => handleDateChange(date ?? new Date(), 'from')} className={'form-control'} />
                 </div>
                 <label style={{ marginRight: 15 }}>To: </label>
-                <DatePicker selected={to} onChange={date => handleDateChange(date, 'to')} className={'form-control'} />
+                <DatePicker selected={to} onChange={date => handleDateChange(date ?? new Date(), 'to')} className={'form-control'} />
             </div>
             <ItemFilter filters={filters} onFilterChange={filter => setSelectedFilter(filter)} />
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
diff --git a/components/FlipTracking/FlipTracking.tsx b/components/FlipTracking/FlipTracking.tsx
index 1bbe60a1..95f0f369 100644
--- a/components/FlipTracking/FlipTracking.tsx
+++ b/components/FlipTracking/FlipTracking.tsx
@@ -335,8 +335,8 @@ export function FlipTracking(props: Props) {
                         <div style={{ paddingRight: 15 }}>
                             <DatePicker
                                 onChange={e => {
-                                    setRangeStartDate(e)
-                                    loadFlipsForTimespan(e, rangeEndDate)
+                                    setRangeStartDate(e ?? new Date())
+                                    loadFlipsForTimespan(e ?? new Date(), rangeEndDate)
                                 }}
                                 className={'form-control'}
                                 minDate={new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 2)}
@@ -348,8 +348,8 @@ export function FlipTracking(props: Props) {
                         <DatePicker
                             className={'form-control'}
                             onChange={e => {
-                                setRangeEndDate(e)
-                                loadFlipsForTimespan(rangeStartDate, e)
+                                setRangeEndDate(e?? new Date())
+                                loadFlipsForTimespan(rangeStartDate, e?? new Date())
                             }}
                             minDate={new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 2)}
                             maxDate={new Date()}
diff --git a/components/Premium/BuyPremium/BuyPremium.tsx b/components/Premium/BuyPremium/BuyPremium.tsx
index 1155f37a..577e6a5e 100644
--- a/components/Premium/BuyPremium/BuyPremium.tsx
+++ b/components/Premium/BuyPremium/BuyPremium.tsx
@@ -56,42 +56,14 @@ function BuyPremium(props: Props) {
         })
     }
 
-    function onSubscriptionBuy(googleToken: string) {
-        let productId = ''
-        if (purchasePremiumType.productId === 'premium') {
-            productId = 'l_premium'
-        }
-        if (purchasePremiumType.productId === 'premium_plus') {
-            productId = 'l_prem_plus'
-        }
-
-        api.purchasePremiumSubscription(productId, googleToken).then(data => {
-            window.open(data.directLink, '_self')
-        })
-    }
-
     function onPremiumBuyCancel() {
         setShowPrepaidConfirmationDialog(false)
     }
 
-    function onSubscriptionBuyCancel() {
-        setShowSubscriptionConfirmationDialog(false)
-    }
-
     function getPurchasePrice() {
         return purchasePremiumOption.value * purchasePremiumOption.price
     }
 
-    function getSubscriptionPrice() {
-        if (purchasePremiumType.productId === 'premium') {
-            return 8.69
-        }
-        if (purchasePremiumType.productId === 'premium_plus') {
-            return 29.69
-        }
-        return -1
-    }
-
     function getDurationString(): string {
         let durationString = purchasePremiumType.durationString
         let duration = +purchasePremiumOption.value
@@ -181,20 +153,6 @@ function BuyPremium(props: Props) {
                                 </div>
                             ) : null}
                             <p style={{ marginTop: '20px' }}>This is a prepaid service. We won't automatically charge you after your premium time runs out!</p>
-                            {(purchasePremiumType.productId === 'premium' || purchasePremiumType.productId === 'premium_plus') &&
-                            (!props.premiumSubscriptions || props.premiumSubscriptions.length === 0) ? (
-                                <p style={{ marginTop: '20px' }}>
-                                    If you want to it to automatically renew itself,{' '}
-                                    <span
-                                        onClick={() => {
-                                            setShowSubscriptionConfirmationDialog(true)
-                                        }}
-                                        style={{ color: '#007bff', cursor: 'pointer' }}
-                                    >
-                                        click here
-                                    </span>
-                                </p>
-                            ) : null}
                             <hr />
                             <Button
                                 style={{ marginTop: '10px' }}
@@ -239,16 +197,6 @@ function BuyPremium(props: Props) {
                 onConfirm={onPremiumBuy}
                 activePremiumProduct={props.activePremiumProduct}
             />
-            <BuyPremiumConfirmationDialog
-                type="subscription"
-                show={showSubscriptionConfirmationDialog}
-                purchasePremiumOption={purchasePremiumOption}
-                purchasePrice={<>{getSubscriptionPrice()} per month</>}
-                purchasePremiumType={purchasePremiumType}
-                onHide={onSubscriptionBuyCancel}
-                onConfirm={onSubscriptionBuy}
-                activePremiumProduct={props.activePremiumProduct}
-            />
         </>
     )
 }
diff --git a/components/Premium/BuySubscription/BuySubscription.module.css b/components/Premium/BuySubscription/BuySubscription.module.css
new file mode 100644
index 00000000..ad3e4c25
--- /dev/null
+++ b/components/Premium/BuySubscription/BuySubscription.module.css
@@ -0,0 +1,8 @@
+.purchaseButtonContainer{
+    display: flex;
+    justify-content: center;
+}
+
+.purchaseButton{
+    width: 80%;
+}
\ No newline at end of file
diff --git a/components/Premium/BuySubscription/BuySubscription.tsx b/components/Premium/BuySubscription/BuySubscription.tsx
new file mode 100644
index 00000000..b24ffe63
--- /dev/null
+++ b/components/Premium/BuySubscription/BuySubscription.tsx
@@ -0,0 +1,126 @@
+import { useState } from 'react'
+import BuyPremiumConfirmationDialog from '../BuyPremiumConfirmationDialog/BuyPremiumConfirmationDialog'
+import { PREMIUM_TYPES } from '../../../utils/PremiumTypeUtils'
+import api from '../../../api/ApiHelper'
+import { Button, Card, Col, Row } from 'react-bootstrap'
+import styles from './BuySubscription.module.css'
+import NumberElement from '../../Number/Number'
+
+interface Props {
+    activePremiumProduct: PremiumProduct
+}
+
+function BuySubscription(props: Props) {
+    const [selectedPremiumType, setSelectedPremiumType] = useState<PremiumType>()
+
+    function getSubscriptionPrice() {
+        if (!selectedPremiumType) {
+            return -1
+        }
+        if (selectedPremiumType.productId === 'premium') {
+            return 8.69
+        }
+        if (selectedPremiumType.productId === 'premium_plus') {
+            return 29.69
+        }
+        return -1
+    }
+
+    function onSubscriptionBuyCancel() {
+        setSelectedPremiumType(undefined)
+    }
+
+    function onSubscriptionBuy(googleToken: string) {
+        if (!selectedPremiumType) {
+            return
+        }
+        let productId = ''
+        if (selectedPremiumType.productId === 'premium') {
+            productId = 'l_premium'
+        }
+        if (selectedPremiumType.productId === 'premium_plus') {
+            productId = 'l_prem_plus'
+        }
+
+        api.purchasePremiumSubscription(productId, googleToken).then(data => {
+            window.open(data.directLink, '_self')
+        })
+    }
+
+    return (
+        <>
+            <Row>
+                <Col>
+                    <Card>
+                        <Card.Header>
+                            <Card.Title><b>Premium+</b></Card.Title>
+                        </Card.Header>
+                        <Card.Body>
+                            <ul>
+                                <li>top flip receive time</li>
+                                <li>all tools for analysis</li>
+                                <li>full auction archive</li>
+                            </ul>
+                            <p>Use <code>NICEDISCOUNT</code> for 31% discount for 1 month<br />
+                                Use <code>BLACKFRIDAY</code> for 10% discount for 12 months<br />
+                            </p>
+                            <div className={styles.purchaseButtonContainer}>
+                                <Button
+                                    variant="success"
+                                    className={styles.purchaseButton}
+                                    onClick={() => {
+                                        setSelectedPremiumType(PREMIUM_TYPES.find(type => type.productId === 'premium_plus'))
+                                    }}
+                                >
+                                    <NumberElement number={29.69} /> Euro (+VAT) / 4 weeks
+                                </Button>
+                            </div>
+                        </Card.Body>
+                    </Card>
+                </Col>
+                <Col>
+                    <Card>
+                        <Card.Header>
+                            <Card.Title>Premium</Card.Title>
+                        </Card.Header>
+                        <Card.Body>
+                            <ul>
+                                <li>up to 1s slower than prem+</li>
+                                <li>a lot of tools</li>
+                                <li>extended history & filter access</li>
+                            </ul>
+                            <p>Use <code>NICEDISCOUNT</code> for 31% discount for 1 month<br />
+                                Use <code>BLACKFRIDAY</code> for 10% discount for 12 months<br />
+                            </p>
+                            <div className={styles.purchaseButtonContainer}>
+                                <Button
+                                    variant="success"
+                                    className={styles.purchaseButton}
+                                    onClick={() => {
+                                        setSelectedPremiumType(PREMIUM_TYPES.find(type => type.productId === 'premium'))
+                                    }}
+                                >
+                                    <NumberElement number={8.69} /> Euro (+VAT) / 4 weeks
+                                </Button>
+                            </div>
+                        </Card.Body>
+                    </Card>
+                </Col>
+            </Row>
+            {selectedPremiumType && (
+                <BuyPremiumConfirmationDialog
+                    type="subscription"
+                    show={selectedPremiumType !== undefined}
+                    purchasePremiumOption={PREMIUM_TYPES.find(type => type.productId === 'premium')?.options[0]!}
+                    purchasePrice={<>{getSubscriptionPrice()} per month</>}
+                    purchasePremiumType={selectedPremiumType!}
+                    onHide={onSubscriptionBuyCancel}
+                    onConfirm={onSubscriptionBuy}
+                    activePremiumProduct={props.activePremiumProduct}
+                />
+            )}
+        </>
+    )
+}
+
+export default BuySubscription
diff --git a/components/Premium/Premium.tsx b/components/Premium/Premium.tsx
index 95532510..b2940ab4 100644
--- a/components/Premium/Premium.tsx
+++ b/components/Premium/Premium.tsx
@@ -14,6 +14,7 @@ import { CANCELLATION_RIGHT_CONFIRMED } from '../../utils/SettingsUtils'
 import { getHighestPriorityPremiumProduct } from '../../utils/PremiumTypeUtils'
 import PremiumStatus from './PremiumStatus/PremiumStatus'
 import { toast } from 'react-toastify'
+import BuySubscription from './BuySubscription/BuySubscription'
 
 function Premium() {
     let [isLoggedIn, setIsLoggedIn] = useState(false)
@@ -110,6 +111,15 @@ function Premium() {
             </div>
             {isLoggedIn ? (
                 <div style={{ marginBottom: '20px' }}>
+                    <hr />
+                    <h2>Subscriptions</h2>
+                    <BuySubscription activePremiumProduct={activePremiumProduct!} />
+                </div>
+            ) : null}
+            {isLoggedIn ? (
+                <div style={{ marginBottom: '20px' }}>
+                    <hr />
+                    <h2>Prepaid</h2>
                     <BuyPremium
                         activePremiumProduct={activePremiumProduct!}
                         premiumSubscriptions={premiumSubscriptions}