diff --git a/app/assets/styles/buttonGroup.css b/app/assets/styles/buttonGroup.css
index f36e007..91eb4bc 100644
--- a/app/assets/styles/buttonGroup.css
+++ b/app/assets/styles/buttonGroup.css
@@ -1,6 +1,8 @@
 .ButtonGroup {
     display: flex;
     background: var(--color-main);
+    border-radius: var(--radius-default);
+    overflow: hidden;
     box-shadow: var(--box-shadow-z2);
 
     & button {
@@ -22,5 +24,13 @@
             --color: var(--color-lightest);
             --background: var(--color-main-dark);
         }
+
+        &:first-child {
+            border-radius: var(--radius-default) 0 0 var(--radius-default);
+        }
+
+        &:last-child {
+            border-radius: 0 var(--radius-default) var(--radius-default) 0;
+        }
     }
 }
\ No newline at end of file
diff --git a/app/assets/styles/general.css b/app/assets/styles/general.css
index 5b917b1..50e8dc6 100755
--- a/app/assets/styles/general.css
+++ b/app/assets/styles/general.css
@@ -104,9 +104,19 @@ body {
 }
 
 .content {
+    padding: 1rem;
     min-height: 100dvh;
 }
 
+.filter-bar {
+    margin-bottom: 1rem;
+}
+
+.pc-wrapper {
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
 .flex-col {
     display: flex;
     flex-direction: column;
diff --git a/app/assets/styles/priceCard.css b/app/assets/styles/priceCard.css
index efaa638..b8702ea 100755
--- a/app/assets/styles/priceCard.css
+++ b/app/assets/styles/priceCard.css
@@ -1,8 +1,11 @@
 .PriceCard {
     position: relative;
+    overflow: hidden;
     width: 100%;
+    transition: 150ms;
+    opacity: 1;
     color: var(--color-darkest);
-    border-bottom: 1px solid var(--color-light);
+    background: black;
 
     .bottom {
         position: absolute;
@@ -44,6 +47,7 @@
         z-index: 2;
         gap: 1rem;
         padding: 1rem;
+        border-radius: var(--radius-default);
 
         &.animated {
             transition: var(--transition-default);
diff --git a/app/components/Pp/PriceCard.vue b/app/components/Pp/PriceCard.vue
index f1400ba..c4236e6 100755
--- a/app/components/Pp/PriceCard.vue
+++ b/app/components/Pp/PriceCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="PriceCard">
+  <article class="PriceCard card">
     <div class="bottom">
       <div class="bg-edit">
         <Icon class="icon" name="uil:pen" mode="svg" />
@@ -75,16 +75,15 @@ const intl = Intl.NumberFormat('de-DE', {
   currency: 'EUR',
 })
 
-const { lengthX, direction, isSwiping } = useSwipe(top, {
-  passive: true,
+const { lengthX, isSwiping } = useSwipe(top, {
+  passive: false,
   threshold: 30,
   onSwipe() {
-    console.log(direction.value)
-    if (['down', 'up'].includes(direction.value)) return
-    left.value = `${-clamp(lengthX.value, -100, 100)}px`
+    if (lengthX.value > 50 || lengthX.value < -50) {
+      left.value = `${-clamp(lengthX.value, -100, 100)}px`
+    }
   },
   onSwipeEnd() {
-    if (['down', 'up'].includes(direction.value)) return
     if (lengthX.value < -50) update()
     if (lengthX.value > 50) deleteCard()
     left.value = '0'
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 7572b4d..5e39a87 100755
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -17,7 +17,7 @@
         @click="sort"
       />
     </aside>
-    <div class="flex-col" role="list">
+    <div class="pc-wrapper flex-col" role="list">
       <PpPriceCard
         v-for="(card, index) in cards"
         :key="card.uuid"
@@ -70,7 +70,7 @@ const createCard = (uuid : string) : Card => ({
 })
 
 const cards = useState<Card[]>('cards', () => [
-  createCard(randomUUID()),
+  createCard(crypto.randomUUID()),
 ])
 
 const addCard = (card : Card) => {
@@ -102,7 +102,8 @@ const updateCard = () => {
 const openModal = (createNew : boolean, index : number) => {
   if (createNew) {
     currentCardIndex.value = -1
-    currentCard.value = createCard(randomUUID())
+    currentCard.value = createCard(crypto.randomUUID())
+
     modal.value?.$el.showModal()
     return
   }
diff --git a/app/utils/number.ts b/app/utils/number.ts
index 07fba9c..fb31fe2 100644
--- a/app/utils/number.ts
+++ b/app/utils/number.ts
@@ -1,5 +1,3 @@
 export const replaceComma = (value: string | number) => `${value}`.replace(',', '.')
 
-export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
-
-export const between = (value: number, min: number, max: number) => value >= min && value <= max
\ No newline at end of file
+export const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max)
\ No newline at end of file
diff --git a/app/utils/uuid.ts b/app/utils/uuid.ts
deleted file mode 100644
index 7d0849d..0000000
--- a/app/utils/uuid.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const randomUUID = (): string => {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    const v = c === 'x' ? r : (r & 0x3 | 0x8);
-    return v.toString(16);
-  })
-}