From 5dbd940d5ee04ccc8c410df27a68ba5760270dbb Mon Sep 17 00:00:00 2001
From: lucordes <cordes135@gmail.com>
Date: Fri, 20 Oct 2023 20:32:35 +0200
Subject: [PATCH 1/6] add incoming outgoing transaction buttons

---
 frontend/src/components/BalanceCard.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/BalanceCard.vue b/frontend/src/components/BalanceCard.vue
index 351503b..29824ba 100644
--- a/frontend/src/components/BalanceCard.vue
+++ b/frontend/src/components/BalanceCard.vue
@@ -6,10 +6,14 @@ h1 {
 </style>
 
 <template>
-  <main class="w-full mx-auto bg-gradient-to-r from-amber-500 to-amber-400 ring-2 ring-amber-600 px-1 py-1 rounded-xl flex gap-4 items-start justify-evenly">
+  <main class="w-full mx-auto bg-gradient-to-r from-amber-500 to-amber-400 ring-0 ring-amber-600 px-1 py-5 rounded-xl flex gap-4 items-start justify-evenly">
+	<p><i class="fa fa-arrow-left" style="font-size:60px;"></i><br>
+		Outgoing</p>
+	
 		<section>
-			<p class="text-lg">Balance</p>
-			<h1>{{ balances.current.toLocaleString() }} EUR</h1>
+			<!-- <p class="text-lg">Balance</p> -->
+			<h1>IBAN XXXXXXXXXXXXX</h1>
+			<h1 style="font-size:30px;">{{ balances.current.toLocaleString() }} €</h1>
 			<!-- <span class="w-full flex justify-between items-center">
 				<small>{{ balances.trend.value.toLocaleString() }} EUR</small>
 				<span class="flex items-end">
@@ -18,6 +22,8 @@ h1 {
 				</span>
 			</span> -->
 		</section>
+		<p><i class="fa fa-arrow-right" style="font-size:60px;"></i><br>
+		Incoming</p>
 		<!-- <section class="grid place-items-center rounded-lg bg-gradient-to-r from-amber-500 to-amber-500 shadow shadow-gray-800 shadow-inner text-gray-300 px-2 py-3">
 			<section class="flex flex-col text-center">
 				<span class="text-sm">Your points</span>

From 688c6bf5ace173c99b743a3afa675bda50939ef7 Mon Sep 17 00:00:00 2001
From: Jonas Rohweder <jonas.rohw@gmail.com>
Date: Fri, 20 Oct 2023 20:41:46 +0200
Subject: [PATCH 2/6] Added header back

---
 frontend/src/components/HeaderHome.vue | 4 ++--
 frontend/src/views/Home.vue            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/HeaderHome.vue b/frontend/src/components/HeaderHome.vue
index f8862c8..0ff64c3 100644
--- a/frontend/src/components/HeaderHome.vue
+++ b/frontend/src/components/HeaderHome.vue
@@ -1,4 +1,4 @@
-<!-- <template>
+<template>
 	<HeaderBar class="z-20">
 		<template v-slot:start>
 			<div class="flex w-7/12 gap-3">
@@ -28,7 +28,7 @@
 			</div>
 		</template>
 	</HeaderBar>
-</template> -->
+</template> 
 
 <script setup>
 
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 7bfce7d..c07c61e 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -97,7 +97,7 @@
 <template>
 	<main class="pt-1">
     <HeaderHome/>
-    <section class="mt-0">
+    <section class="mt-16">
       <Services />
     </section>
 		<BalanceCard />

From b7d18cfdd2af0da69e1e9fee60de6ebaa15bdf70 Mon Sep 17 00:00:00 2001
From: yccyangchen <1193657480@qq.com>
Date: Fri, 20 Oct 2023 21:35:28 +0200
Subject: [PATCH 3/6] round stories

---
 frontend/package.json                |  1 +
 frontend/src/components/IconMenu.vue | 47 +++++++++++++++--
 frontend/src/views/Deposit.vue       | 79 ++++++++++++++++++++++++++--
 frontend/src/views/Home.vue          |  2 +
 4 files changed, 120 insertions(+), 9 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 8c802af..607cc6d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "postcss": "^8.4.5",
     "tailwindcss": "^3.0.18",
     "vue": "^3.2.25",
+    "vue-awesome-swiper": "^5.0.1",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
diff --git a/frontend/src/components/IconMenu.vue b/frontend/src/components/IconMenu.vue
index ec26e58..f3a7eb6 100644
--- a/frontend/src/components/IconMenu.vue
+++ b/frontend/src/components/IconMenu.vue
@@ -1,11 +1,50 @@
-<template>
+<!-- <template>
   <main class="w-full flex flex-col items-center gap-3 text-center">
-    <div @click="navigate" class="w-full h-20 active:scale-75 duration-300 grid place-items-center bg-secondary shadow text-success border-2 border-gray-800 rounded-lg px-3 py-1">
-      <img src="/story1.png" alt="Sample 2">
+    <div @click="navigate" class="w-full rounded-circle h-20 active:scale-75 duration-300 grid place-items-center bg-yellow shadow text-success border-2 border-gray-800 rounded-circle px-3 py-1">
+      <img src="/story1.png" class="rounded-circle" alt="story 1">
     </div>
     <small class="text-gray-300">{{ source.name }}</small>
   </main>
-</template>
+  <img src="/story1.png" class="rounded-circle" alt="..." />
+</template> -->
+<template>
+	<div :class="['round-div', customClass]" @click="navigate" >
+	  <img src="/story1.png" class="round-image" alt="story 1">
+	</div>
+  </template>
+
+<script>
+export default {
+  name: 'RoundDiv',
+  props: {
+    customClass: {
+      type: String,
+      default: ''
+    }
+  }
+};
+</script>
+
+<style>
+.round-div {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #3498db;
+}
+
+.round-image {
+  /* width: 50%;
+  height: 50%;
+  object-fit: cover; */
+
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+</style>
 
 <script setup>
 
diff --git a/frontend/src/views/Deposit.vue b/frontend/src/views/Deposit.vue
index 2096154..ab03306 100644
--- a/frontend/src/views/Deposit.vue
+++ b/frontend/src/views/Deposit.vue
@@ -1,4 +1,4 @@
-<style scoped>
+<!-- <style scoped>
 
   /* .input-wrapper {
     @apply flex flex-col h-20 text-gray-300;
@@ -7,11 +7,13 @@
     @apply bg-secondary border border-gray-700 text-gray-300 rounded-lg h-full mt-2 text-sm px-2 py-3;
   } */
   img {
-    @apply w-full rounded-lg;
+    @apply w-full h-full rounded-lg;
   }
 </style>
 <template>
-  <img src="/long_story.png" alt="long story 1">
+	<div class="fill">
+		<img src="/long_story.png" alt="long story 1">
+	</div>
   <Splide class="mt-3 z-10" :options="options">
     <SplideSlide>
       <img src="/banner-1.jpg" alt="Sample 1">
@@ -25,5 +27,72 @@
     <SplideSlide>
       <img src="/banner-2.jpg" alt="Sample 2">
     </SplideSlide>
-  </Splide>
-</template>
\ No newline at end of file
+  </Splide> -->
+<!-- </template> -->
+
+<template>
+	<div
+	  class="swipe-container"
+	  @touchstart="onTouchStart"
+	  @touchmove="onTouchMove"
+	  @touchend="onTouchEnd"
+	>
+	  <img :src="currentImage" alt="Swipe Image" class="swipe-image" />
+	</div>
+  </template>
+  
+  <script>
+  export default {
+	name: 'SwipeImage',
+	data() {
+	  return {
+		images: [
+		'/banner-1.jpg', // Replace this with your actual image path
+        '/long-story.png', // Replace this with your actual image path
+        '/banner-2.jpg', // Replace this with your actual image path
+      ],
+		currentIndex: 0,
+		startX: 0,
+		endX: 0,
+	  };
+	},
+	computed: {
+	  currentImage() {
+		return this.images[this.currentIndex];
+	  },
+	},
+	methods: {
+	  onTouchStart(event) {
+		this.startX = event.touches[0].clientX;
+	  },
+	  onTouchMove(event) {
+		this.endX = event.touches[0].clientX;
+	  },
+	  onTouchEnd() {
+		if (this.endX - this.startX > 50 && this.currentIndex > 0) {
+		  this.currentIndex--;
+		} else if (this.startX - this.endX > 50 && this.currentIndex < this.images.length - 1) {
+		  this.currentIndex++;
+		}
+		this.startX = 0;
+		this.endX = 0;
+	  },
+	},
+  };
+  </script>
+  
+  <style>
+  .swipe-container {
+	position: relative;
+	width: 100%;
+	height: 300px;
+	overflow: hidden;
+  }
+  
+  .swipe-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index c07c61e..c6a5cd0 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -97,8 +97,10 @@
 <template>
 	<main class="pt-1">
     <HeaderHome/>
+	<br>
     <section class="mt-16">
       <Services />
+	  <br>
     </section>
 		<BalanceCard />
     <section>

From 7f6effaae96bb086d25ca934f240b793b3c9a07c Mon Sep 17 00:00:00 2001
From: yccyangchen <1193657480@qq.com>
Date: Sat, 21 Oct 2023 10:29:12 +0200
Subject: [PATCH 4/6] add slide function

---
 frontend/package.json          |  2 +
 frontend/src/views/Deposit.vue | 93 ++++++++--------------------------
 2 files changed, 22 insertions(+), 73 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 607cc6d..c69d2c0 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,9 +13,11 @@
     "axios": "^1.5.1",
     "pinia": "^2.0.10",
     "postcss": "^8.4.5",
+    "swiper": "^10.3.1",
     "tailwindcss": "^3.0.18",
     "vue": "^3.2.25",
     "vue-awesome-swiper": "^5.0.1",
+    "vue-concise-slider": "^4.2.5",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
diff --git a/frontend/src/views/Deposit.vue b/frontend/src/views/Deposit.vue
index ab03306..94cfafe 100644
--- a/frontend/src/views/Deposit.vue
+++ b/frontend/src/views/Deposit.vue
@@ -1,4 +1,4 @@
-<!-- <style scoped>
+<style scoped>
 
   /* .input-wrapper {
     @apply flex flex-col h-20 text-gray-300;
@@ -11,12 +11,12 @@
   }
 </style>
 <template>
-	<div class="fill">
+	<!-- <div class="fill">
 		<img src="/long_story.png" alt="long story 1">
-	</div>
-  <Splide class="mt-3 z-10" :options="options">
+	</div> -->
+  <Splide class="mt-3 z-10" options="options">
     <SplideSlide>
-      <img src="/banner-1.jpg" alt="Sample 1">
+      <img src="/long_story.png" alt="Sample 1">
     </SplideSlide>
     <SplideSlide>
       <img src="/banner-2.jpg" alt="Sample 2">
@@ -27,72 +27,19 @@
     <SplideSlide>
       <img src="/banner-2.jpg" alt="Sample 2">
     </SplideSlide>
-  </Splide> -->
-<!-- </template> -->
+  </Splide>
+ </template>
 
-<template>
-	<div
-	  class="swipe-container"
-	  @touchstart="onTouchStart"
-	  @touchmove="onTouchMove"
-	  @touchend="onTouchEnd"
-	>
-	  <img :src="currentImage" alt="Swipe Image" class="swipe-image" />
-	</div>
-  </template>
-  
-  <script>
-  export default {
-	name: 'SwipeImage',
-	data() {
-	  return {
-		images: [
-		'/banner-1.jpg', // Replace this with your actual image path
-        '/long-story.png', // Replace this with your actual image path
-        '/banner-2.jpg', // Replace this with your actual image path
-      ],
-		currentIndex: 0,
-		startX: 0,
-		endX: 0,
-	  };
-	},
-	computed: {
-	  currentImage() {
-		return this.images[this.currentIndex];
-	  },
-	},
-	methods: {
-	  onTouchStart(event) {
-		this.startX = event.touches[0].clientX;
-	  },
-	  onTouchMove(event) {
-		this.endX = event.touches[0].clientX;
-	  },
-	  onTouchEnd() {
-		if (this.endX - this.startX > 50 && this.currentIndex > 0) {
-		  this.currentIndex--;
-		} else if (this.startX - this.endX > 50 && this.currentIndex < this.images.length - 1) {
-		  this.currentIndex++;
-		}
-		this.startX = 0;
-		this.endX = 0;
-	  },
-	},
-  };
-  </script>
-  
-  <style>
-  .swipe-container {
-	position: relative;
-	width: 100%;
-	height: 300px;
-	overflow: hidden;
-  }
-  
-  .swipe-image {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-  }
-  </style>
-  
\ No newline at end of file
+<script setup>
+
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import '@splidejs/splide/dist/css/splide.min.css';
+
+const options = {
+  arrows: false,
+  autoplay: true,
+  perpage: 1,
+  type: 'loop'
+}
+
+</script>
\ No newline at end of file

From ae737b81dc990b5fbf7c05fbfaf99c4b5d882cb9 Mon Sep 17 00:00:00 2001
From: lucordes <cordes135@gmail.com>
Date: Sat, 21 Oct 2023 13:03:07 +0200
Subject: [PATCH 5/6] Add transaction menu

---
 frontend/src/components/BalanceCard.vue |  8 +--
 frontend/src/router/index.js            |  5 ++
 frontend/src/views/Home.vue             |  1 +
 frontend/src/views/TransactionMenu.vue  | 82 +++++++++++++++++++++++++
 4 files changed, 92 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/views/TransactionMenu.vue

diff --git a/frontend/src/components/BalanceCard.vue b/frontend/src/components/BalanceCard.vue
index 29824ba..71c4b13 100644
--- a/frontend/src/components/BalanceCard.vue
+++ b/frontend/src/components/BalanceCard.vue
@@ -7,9 +7,9 @@ h1 {
 
 <template>
   <main class="w-full mx-auto bg-gradient-to-r from-amber-500 to-amber-400 ring-0 ring-amber-600 px-1 py-5 rounded-xl flex gap-4 items-start justify-evenly">
-	<p><i class="fa fa-arrow-left" style="font-size:60px;"></i><br>
-		Outgoing</p>
-	
+
+	<a href="/transaction" class="btn btn-info" role="button">	<p><i class="fa fa-arrow-left" style="font-size:60px;"></i><br>
+		Outgoing</p></a>
 		<section>
 			<!-- <p class="text-lg">Balance</p> -->
 			<h1>IBAN XXXXXXXXXXXXX</h1>
@@ -30,7 +30,7 @@ h1 {
 				<span>{{ balances.points }}</span>
 			</section>
 		</section> -->
-	</main>
+			</main>
 </template>
 
 <script setup>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 6f87558..91bb56f 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -14,6 +14,11 @@ const routes = [
 		path: '/',
 		component: () => import('@/views/Login.vue')
 	},
+	{
+		name: 'TransactionMenu',
+		path: '/transaction',
+		component: () => import('@/views/TransactionMenu.vue')
+	},
 	{
 		name: 'Deposit',
 		path: '/story1',
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index c6a5cd0..dabd019 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -128,6 +128,7 @@ import HeaderHome from '@/components/HeaderHome.vue'
 import BalanceCard from '@/components/BalanceCard.vue'
 import axios from 'axios';
 import Services from "@/components/Services.vue";
+import TransactionMenu from '../views/TransactionMenu.vue';
 
 const userInput = ref("");
 const messages = ref([]);
diff --git a/frontend/src/views/TransactionMenu.vue b/frontend/src/views/TransactionMenu.vue
new file mode 100644
index 0000000..d89417b
--- /dev/null
+++ b/frontend/src/views/TransactionMenu.vue
@@ -0,0 +1,82 @@
+<style scoped>
+
+.input-wrapper {
+    @apply w-full h-16 flex items-center mb-3 rounded-lg overflow-hidden gap-2;
+}
+
+input {
+    @apply text-gray-300 active:ring-1 focus:ring-1 ring-green-500 duration-300 rounded-lg w-full bg-secondary h-full px-3 focus:ring-2 active:ring-2 ring-secondary;
+}
+
+</style>
+
+<template>
+    <main>
+
+        <section class="mt-16 text-gray-300 text-center w-10/12 mx-auto">
+            <p style="text-align:right;"><a href="home"> <i class="fa fa-times"></i></a></p>
+            
+            <h1 class="font-semibold text-lg">Outgoing</h1>
+            <p class="text-sm">Transact funds to people</p>
+            
+        </section>
+            
+        <section class="mt-5">
+            <form @submit.prevent="transact" action="">
+                <div class="input-wrapper">
+                    <input v-model="form.recipient" type="text" placeholder="recipient">
+                </div>
+                <div class="input-wrapper">
+                    <input v-model="form.amount" type="number" placeholder="amount in €">
+                </div>
+                
+                <section>
+                    <button class="w-full bg-amber-500 font-semibold text-gray-800 py-3 rounded-lg mt-6">
+                        <LoadAction :isLoad="isLoad" :isSuccess="isSuccess" :isFail="isFail" action="TRANSACT" />
+                        
+                    </button>
+                    <small class="mt-3 block text-red-600 font-medium">{{ msgErr }}</small>
+                </section>
+            </form>
+        </section>
+
+        <section class="mt-24 text-gray-300">
+
+        </section>
+    </main>
+</template>
+
+<script setup>
+
+import { ref, reactive } from 'vue'
+
+import { useRouter } from 'vue-router'
+import LoadAction from '@/components/LoadAction.vue'
+
+
+const router = useRouter()
+
+const form = reactive({
+    recipient: '',
+    amount: ''
+})
+
+
+
+
+
+
+
+const transact = () => {
+
+}
+
+
+
+
+</script>
+
+
+
+
+

From 29d8a57314b1070a8f3551b32516263f8dafb52b Mon Sep 17 00:00:00 2001
From: yccyangchen <1193657480@qq.com>
Date: Sat, 21 Oct 2023 15:10:39 +0200
Subject: [PATCH 6/6] change color and add button in balance card

---
 frontend/src/components/BalanceCard.vue | 75 +++++++++++++++++--------
 frontend/src/components/HeaderHome.vue  |  6 +-
 frontend/src/views/Home.vue             | 11 ++--
 3 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/BalanceCard.vue b/frontend/src/components/BalanceCard.vue
index 29824ba..511ba47 100644
--- a/frontend/src/components/BalanceCard.vue
+++ b/frontend/src/components/BalanceCard.vue
@@ -1,36 +1,65 @@
 <style scoped>
 
 h1 {
-	@apply text-xl font-semibold block my-1;
+	@apply text-xl font-semibold block my-2;
+	margin-top: 5px;
+}
+
+#header1{
+	margin-top:-40px;
+}
+
+#div1{
+	position: relative;
+  width: 400px;
+  height: 200px;
+  background-color: #f2f2f2;
+  display: flex;
+	justify-content: center;
+    align-items: center;
+	box-shadow: 5px 5px 5px 0px rgba(255, 255, 255, 0.75);
+}
+
+.left-bottom-circle,
+.right-bottom-circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #FFCA28;
+  position: absolute;
+  bottom: -15px;
+}
+
+.left-bottom-circle {
+  left: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.right-bottom-circle {
+  right: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>
 
 <template>
-  <main class="w-full mx-auto bg-gradient-to-r from-amber-500 to-amber-400 ring-0 ring-amber-600 px-1 py-5 rounded-xl flex gap-4 items-start justify-evenly">
-	<p><i class="fa fa-arrow-left" style="font-size:60px;"></i><br>
-		Outgoing</p>
+  <div id="div1" class="w-full mx-auto bg-amber-400 ring-0 ring-amber-600 px-1 py-5 rounded-t-xl flex gap-4 items-start justify-evenly">
+	<div class="left-bottom-circle">
+		
+			<i class="fa fa-arrow-left" style="font-size:50px;"></i><br>
 	
+	</div>
+    <div class="right-bottom-circle">
+		<i class="fa fa-arrow-right" style="font-size:50px;"></i>	
+	</div>
 		<section>
-			<!-- <p class="text-lg">Balance</p> -->
-			<h1>IBAN XXXXXXXXXXXXX</h1>
-			<h1 style="font-size:30px;">{{ balances.current.toLocaleString() }} €</h1>
-			<!-- <span class="w-full flex justify-between items-center">
-				<small>{{ balances.trend.value.toLocaleString() }} EUR</small>
-				<span class="flex items-end">
-					<i class="block fas fa-caret-up text-amber-400 text-xl mr-1"></i>
-					<small class="mb-1 block">{{ balances.trend.percent }}{{ balances.trend.prefix }}</small>
-				</span>
-			</span> -->
+			<h1 id="header1" style="font-size:18px;">Current balance</h1>
+			<h1 id="header2" style="font-size:30px;">{{ balances.current.toLocaleString() }} €</h1>
 		</section>
-		<p><i class="fa fa-arrow-right" style="font-size:60px;"></i><br>
-		Incoming</p>
-		<!-- <section class="grid place-items-center rounded-lg bg-gradient-to-r from-amber-500 to-amber-500 shadow shadow-gray-800 shadow-inner text-gray-300 px-2 py-3">
-			<section class="flex flex-col text-center">
-				<span class="text-sm">Your points</span>
-				<span>{{ balances.points }}</span>
-			</section>
-		</section> -->
-	</main>
+	</div>
 </template>
 
 <script setup>
diff --git a/frontend/src/components/HeaderHome.vue b/frontend/src/components/HeaderHome.vue
index 0ff64c3..728fc37 100644
--- a/frontend/src/components/HeaderHome.vue
+++ b/frontend/src/components/HeaderHome.vue
@@ -5,18 +5,18 @@
 				<span>
 					<img src="/avatar.jpg" class="rounded-full" width="50" />
 				</span>
-				<div class="text-gray-300">
+				<div class="text-white">
 					<p class="font-semibold text-xl">{{ fullname }}</p>
 					<small class="font-medium text-sm">Hey, good morning</small>
 				</div>
 			</div>
 		</template>
 		<template v-slot:end>
-			<div class="text-lg text-gray-300">
+			<div class="text-lg text-white">
 				<span class="mr-5 relative active:scale-95 duration-300" @click="navigate('Notifications')">
 					<span
 						style="width:20px; height:20px" 
-						class="bg-red-500 text-gray-300 grid place-items-center absolute left-1 -top-3 text-xs rounded-full">{{ amountNotif.length}}</span>
+						class="bg-red-500 text-white grid place-items-center absolute left-1 -top-3 text-xs rounded-full">{{ amountNotif.length}}</span>
 					<i class="fa fa-bell"></i>
 				</span>
 				<i @click="showFloatingBtn = !showFloatingBtn" class="relative fa fa-ellipsis-h">
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index c6a5cd0..f5c9915 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -24,18 +24,21 @@
 }
 
 .chatbox {
-  margin-top: 5vh;
-  border: 0.5px solid #e0e0e0;
+  margin-top: 3vh;
+  border: 2px solid #e0e0e0;
   padding: 10px;
   height: 55vh;
   overflow-y: auto;
-  border-radius: 0.5vw;
+  /* border-radius: 0.5vw 0.6vw 0.8vw 1vw; */
+  border-radius: 0px 0px 15px 15px;
+  box-shadow: 5px 5px 5px 0px rgba(255, 255, 255, 0.75)
 }
 .chat-interface {
   display: flex;
   align-items: stretch;
-  margin-top: 10px;
+  margin-top: 15px;
 }
+
 .chat-input {
   flex-grow: 1;
   padding: 10px;