diff --git a/client/src/AccountCard.svelte b/client/src/AccountCard.svelte
index 0cbb161..37357b2 100644
--- a/client/src/AccountCard.svelte
+++ b/client/src/AccountCard.svelte
@@ -15,27 +15,7 @@
     export let balance="5425";
     export let iban="RONFOX62188921";
     export let isExpanded=false;
-    export let transactions=[
-        {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
-        {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
-        {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
-        {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
-        {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
-        {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
-        {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
-        {title:"Transaction Name#4", status:"DECLINED", amount:"+469,09", time:"15:38 27/11/2021", type:"received"},
-    ];
+    export let transactions=[];
 
     function copyIban(){
         //todo: Code here 
@@ -63,16 +43,16 @@
         <div class="flex flex-col">
 
             <div>
-                <DetailField class="py-2 mt-4 flex-shrink">
-                    <h2 class='font-sans ml-4 text-4xl text-gray-50'>Balance: <span style="color: #264D59">{balance}</span>{currency}</h2>
+                <DetailField class="p-1  flex-shrink">
+                    <h2 class='font-sans mt-3 mb-2 pl-2 text-4xl text-gray-50'>Balance: <span style="color: #264D59">{balance}</span>{currency}</h2>
                 </DetailField>
             </div>
 
-            <div class="flex flex-col flex-grow max-h-full relative {isExpanded ? "overflow-auto" : ""}">
+            <div class="flex flex-col flex-grow pr-2 max-h-full relative scroller {isExpanded ? "overflow-auto overflow-x-hidden" : ""}">
 
                 {#if isExpanded }
                     {#each transactions as transaction}
-                        <DetailField class="my-3 py-1 flex-shrink">   
+                        <DetailField class="my-3 py-1 flex-shrink min-w-transaction">   
                             <div class='font-sans text-gray-50 mt-2 mx-4 border-b-1'>
                                 <h3 class="inline mr-3">{transaction.title}: </h3>
                                 <span class="text-4xl {transaction.type == "send" ?  "text-red-c" : "text-lime-c"}">{transaction.amount}</span>
@@ -171,4 +151,33 @@
         {/if}
     </div>
     
-</CardBG>
\ No newline at end of file
+</CardBG>
+
+<style>
+    /* width */
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 2px rgba(141, 140, 140, 0.281); 
+  border-radius: 10px;
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgba(238, 236, 236, 0.897); 
+  border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(182, 182, 182, 0.918); 
+}
+
+.scroller {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(238, 236, 236, 0.897) rgba(141, 140, 140, 0.281);
+}
+</style>
\ No newline at end of file
diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte
index 1a62353..0d3931f 100644
--- a/client/src/MainPage.svelte
+++ b/client/src/MainPage.svelte
@@ -13,6 +13,36 @@ import AccountCard from './AccountCard.svelte';
     let accountnr = "2";
     let maincurrency = "RON";
 
+    let accounts = [
+        {type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921", isExpanded: false, 
+            transactions: [
+                {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
+                {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
+                {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
+                {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
+                {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
+                {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
+            ]
+        }, 
+        {type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921", isExpanded: false, 
+            transactions: [
+                {title:"Transaction Name#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
+                {title:"Transaction Name#2", status:"PENDING", amount:"+25,00", time:"15:38 27/11/2021", type:"received"},
+                {title:"Transaction Name#3", status:"CANCELLED", amount:"-469,09", time:"15:38 27/11/2021", type:"send"},
+            ]
+        },
+    ];
+    let expandedAccount = null;
+
     function dispatchLogout(){
         //todo: CHeck here 
         dispatch("logOut",null);
@@ -23,8 +53,7 @@ import AccountCard from './AccountCard.svelte';
         dispatch("showNotifications",null);
     }
 
-    let accounts = [{}, {}];
-    let expandedAccount = null;
+   
 
     function expanded(index) {
         if (!expandedAccount && expandedAccount !== 0) {
@@ -40,10 +69,10 @@ import AccountCard from './AccountCard.svelte';
 <main class="h-full flex flex-col items-stretch md:flex-row">
     <div class="flex flex-col items-stretch max-h-full">
         {#if expandedAccount || expandedAccount === 0}
-            <AccountCard balance="{expandedAccount}" isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
+            <AccountCard type={accounts[expandedAccount].type} currency={accounts[expandedAccount].currency} balance={accounts[expandedAccount].balance} iban={accounts[expandedAccount].iban} transactions={accounts[expandedAccount].transactions} isExpanded={true} on:expanded={() => expanded(null)}></AccountCard>
         {:else}
             {#each accounts as account,i}
-                <AccountCard balance="{i}" isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
+                <AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
             {/each}
         {/if}
     </div>