diff --git a/client/src/AccountCard.svelte b/client/src/AccountCard.svelte
index 37357b2..2898436 100644
--- a/client/src/AccountCard.svelte
+++ b/client/src/AccountCard.svelte
@@ -6,6 +6,9 @@
     import DetailField from './DetailField.svelte';
     import GreenButton from './GreenButton.svelte';
     import {createEventDispatcher} from 'svelte';
+    import { fade, fly, slide } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+
 
     const dispatch = createEventDispatcher();
 
@@ -17,26 +20,42 @@
     export let isExpanded=false;
     export let transactions=[];
 
+    let copied = false;
+
     function copyIban(){
-        //todo: Code here 
-        dispatch("copiedIban",null);
+        if(!copied){
+            navigator.clipboard.writeText(iban)
+            .then(() => copied = true)
+            .then(() => setTimeout(() => {
+                copied = false;
+            }, 1000));
+        }
     }
 
     function expand(){
         //todo: Code here 
         dispatch("expanded",isExpanded);
     }
+
+    function send(){
+        //todo: CHeck here 
+        dispatch("createPopup",{
+            type: 'send_money',
+            iban,
+        });
+    }
 </script>
 
-<CardBG class="flex-shrink flex flex-col items-stretch md:self-start px-6 pt-6 pb-0 max-h-full overflow-clip min-h-0">
+ 
+<CardBG class="flex-shrink flex flex-col items-stretch md:self-start mt-16 mb-6 px-6 pt-6 pb-0 max-h-full overflow-clip min-h-0">
     <div class="flex flex-col flex-shrink">
         <div class='font-sans  mt-2 mx-2 border-b-1'>
             <h3 class="text-gray-50 inline mr-4">{type}</h3>
             <span class="text-gray-100">IBAN: {iban}</span>
-            <button on:click={copyIban} class="inline"> <Icon icon="akar-icons:copy" color="rgba(249, 250, 251, 1)"/></button>
+            <button on:click={copyIban} class="inline {copied ? "cursor-default" : ""}"> <Icon icon={copied ? "akar-icons:check" : "akar-icons:copy"} color="rgba(249, 250, 251, 1)"/></button>
         </div>
         
-        <div class="w-full max-w-sm self-start border-solid border-gray-50 border mb-2"></div>
+        <div class="w-full max-w-sm self-start border-solid border-gray-50 border mb-3"></div>
     </div>
 
     <div class="flex flex-row flex-grow max-h-full min-h-0">
@@ -51,37 +70,40 @@
             <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 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>
-                                <span class="text-4xl">{currency}</span>
-                            </div>
-                            <div class='font-sans text-2xl text-gray-100 mt-2 mx-6 border-b-1'>
-                                <p class="inline">at {transaction.time} </p>
-
-                                {#if transaction.status == "PROCESSED"}
-                                    <span>
-                                        <Icon class="inline mb-1" icon="akar-icons:circle-check" color="#6DE25ACC"/>
-                                    </span>
-                                {:else if  transaction.status == "PENDING"}
-                                    <span>
-                                        <Icon class="inline mb-1" icon="akar-icons:arrow-cycle" color="#F6AF43"/>
-                                    </span>
-                                {:else if  transaction.status == "CANCELLED"}
-                                    <span>
-                                        <Icon class="inline mb-1" icon="akar-icons:circle-x" color="#F7630C"/>
-                                    </span>
-                                {:else}
-                                    <span>
-                                        <Icon class="inline mb-1" icon="akar-icons:triangle-alert" color="#F7630C"/>
-                                    </span>
-                                {/if}
-                                {transaction.status}
-                                
-                            </div>
-                        </DetailField> 
+                    {#each transactions as transaction,i (i)}
+                        <div in:slide={{delay:100*i}} out:slide={{delay:50*(transactions.length-i)}}>
+                    
+                            <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>
+                                    <span class="text-4xl">{currency}</span>
+                                </div>
+                                <div class='font-sans text-2xl text-gray-100 mt-2 mx-6 border-b-1'>
+                                    <p class="inline">at {transaction.time} </p>
+
+                                    {#if transaction.status == "PROCESSED"}
+                                        <span>
+                                            <Icon class="inline mb-1" icon="akar-icons:circle-check" color="#6DE25ACC"/>
+                                        </span>
+                                    {:else if  transaction.status == "PENDING"}
+                                        <span>
+                                            <Icon class="inline mb-1" icon="akar-icons:arrow-cycle" color="#F6AF43"/>
+                                        </span>
+                                    {:else if  transaction.status == "CANCELLED"}
+                                        <span>
+                                            <Icon class="inline mb-1" icon="akar-icons:circle-x" color="#F7630C"/>
+                                        </span>
+                                    {:else}
+                                        <span>
+                                            <Icon class="inline mb-1" icon="akar-icons:triangle-alert" color="#F7630C"/>
+                                        </span>
+                                    {/if}
+                                    {transaction.status}
+                                    
+                                </div>
+                            </DetailField> 
+                        </div>
                     {/each}
                     
                 {:else if transactions.length > 0}
@@ -132,7 +154,7 @@
 
         <div class="flex flex-col flex-shrink">
 
-            <GreenButton class="mx-8">
+            <GreenButton on:click={send} class="mx-8">
                 <Icon class="inline" icon="akar-icons:arrow-right" color="rgba(249, 250, 251, 1)"/>
                 send money
             </GreenButton>
@@ -153,6 +175,7 @@
     
 </CardBG>
 
+
 <style>
     /* width */
 ::-webkit-scrollbar {
diff --git a/client/src/App.svelte b/client/src/App.svelte
index 127d9fc..9d5f56d 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
 import BottomBorder from "./BottomBorder.svelte";
+import CreateAccount from "./CreateAccount.svelte";
 
 import Login from "./Login.svelte";
 import MainPage from "./MainPage.svelte";
@@ -9,13 +10,74 @@ import TopBorder from "./TopBorder.svelte";
 	function toggleLoggedIn() {
 		loggedin = !loggedin;
 	}
+
+	let isCreatingAccount = false;
+	let isCheckingNotifications = false;
+	let isSendingMoney = false;
+	let sendingAccount = "";
+	let notifications = [];
+
+	function onCreatePopup(event) {
+		const eventType = event.detail.type;
+		switch (eventType) {
+			case "new_account":
+				isCreatingAccount = true;
+			break;
+
+			case "create_acc_success":
+				isCreatingAccount = false;
+			break;
+
+			case "create_acc_cancelled":
+				isCreatingAccount = false;
+			break;
+
+			case "create_acc_failed":
+				isCreatingAccount = false;
+				alert(`Account creation failed! Reason: ${event.detail.reason}`);
+			break;
+
+			case "send_money":
+				sendingAccount = event.detail.iban;
+				isSendingMoney = true;
+			break;
+
+			case "send_money_cancelled":
+				isSendingMoney = false;
+			break;
+
+			case "send_money_failed":
+				isSendingMoney = false;
+				alert(`Sending money failed! Reason: ${event.detail.reason}`);
+			break;
+
+			case "check_notifications":
+				notifications = event.detail.notifications;
+				isCheckingNotifications = true;
+			break;
+
+			case "check_notifications_cancelled":
+				isCheckingNotifications = false;
+			break;
+
+			default:
+				alert(`Unhandled createPopup event: ${eventType}`);
+		}
+	}
 </script>
 
 <main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
+	{#if isCreatingAccount}
+		<CreateAccount> </CreateAccount>
+	{:else if  isCheckingNotifications}
+		 <!-- else if content here -->
+	{:else if  isSendingMoney}
+		 <!-- else if content here -->
+	{/if}
 	<TopBorder class="flex-shrink"></TopBorder>
 	<div class="flex-grow max-h-full overflow-hidden">
 		{#if loggedin}
-			<MainPage on:logOut={toggleLoggedIn}></MainPage>
+			<MainPage on:logOut={toggleLoggedIn} on:createPopup={onCreatePopup}></MainPage>
 		{:else}
 			<Login on:loginSuccess={toggleLoggedIn}></Login>
 		{/if}
diff --git a/client/src/CreateAccount.svelte b/client/src/CreateAccount.svelte
new file mode 100644
index 0000000..3e3dadc
--- /dev/null
+++ b/client/src/CreateAccount.svelte
@@ -0,0 +1,79 @@
+<script>
+    import OrangeButton from "./OrangeButton.svelte";
+
+    import CardBG from "./CardBG.svelte";
+    import InputField from "./InputField.svelte";
+    import {createEventDispatcher} from 'svelte';
+import Icon from "@iconify/svelte";
+
+    
+    const dispatch = createEventDispatcher();
+
+    let type = "";
+    let currencies = ["RON", "EUR"];
+    let currency = currencies[0];
+    let termsAccepted = false;
+
+    function create(){
+        if(type == "" || type == null) {
+            alert("Account Name field can not be empty!");
+        }else if(!currencies.includes(currency)){
+            alert("Currency is not supported!");
+        }else if (!termsAccepted){
+            alert("Terms of Service not accepted!");
+        }else{
+            //TODO Create account with provided details on the server
+            dispatch("createPopup",{type:"create_acc_success"});
+        }
+    }
+
+    function cancelCreate(){
+        dispatch("createPopup",{type:"create_acc_cancelled"});
+    }
+
+    function failCreate(){
+        dispatch("createPopup",{type:"create_acc_failed", reason:"Invalid arguments. [type: "+type+", currency: "+currency});
+    }
+
+    function termsOfService() {
+        termsAccepted = !termsAccepted;
+    }
+
+</script>
+
+<div class="h-full self-center">
+    <div class="h-full flex flex-col justify-center items-center md:items-start">
+        <CardBG class="flex flex-col items-stretch">
+            <div class="flex flex-row">
+                <h1 class='font-sans text-4xl text-gray-50 mt-6 mx-6 mb-1'>Open a new account</h1>
+                <button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="16" height="16" /> </button>  
+            </div>
+            <div class="w-full max-w-md self-start border-solid border-gray-50 border mb-3"></div> 
+     
+            <div class="mx-1 flex-shrink">
+                <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Account name:</h2>
+                <InputField placeholder="New Account" isPassword={false} value={type}></InputField>
+            </div>
+            
+            <div class="mx-1 flex-shrink">
+                <h2 class='font-sans text-2xl text-gray-50 mb-2 '>Currency:</h2>
+                <InputField placeholder="RON" isPassword={false} value={currency}></InputField>
+            </div>
+
+            <div class="mx-1 flex-shrink  max-w-2xl">
+                <h2 class=" font-sans text-2xl text-gray-50 mb-2 ">Terms of Service:</h2>
+                <button class="mb-1" on:click={termsOfService}> <Icon icon={termsAccepted ? "akar-icons:check-box" : "akar-icons:box"} color="rgba(249, 250, 251, 1)" width="18" height="18" /> </button>
+                <h3 class="inline m-0 mb-0 text-gray-300"> I have read and accepted the <a class="font-sans text-gray-50" href="https://c.tenor.com/TVRtbC8jKY0AAAAC/positive-fox-you-can-do-it.gif" target="_blank">terms and conditions</a> for creating a new account at FOXBANK. </h3>
+            </div>
+            
+            
+            <div class="m-10"></div>
+
+            <div class="mx-1 flex-shrink"> 
+                <OrangeButton on:click={create}>Confirm</OrangeButton>
+            </div>
+            
+        </CardBG>
+    </div>
+    
+</div>
\ No newline at end of file
diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte
index 0d3931f..56465c7 100644
--- a/client/src/MainPage.svelte
+++ b/client/src/MainPage.svelte
@@ -1,20 +1,29 @@
 <script>
     import Icon from '@iconify/svelte';
-    
     import CardBG from "./CardBG.svelte";
     import {createEventDispatcher} from 'svelte';
-import AccountCard from './AccountCard.svelte';
+    import AccountCard from './AccountCard.svelte';
+    import GreenButton from './GreenButton.svelte';
+    import { fade, fly, slide } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
     
     const dispatch = createEventDispatcher();
 
     let username = "Firstname Lastname";
     let code = "";
     let totalbalance = "2455,22";
-    let accountnr = "2";
     let maincurrency = "RON";
+    let expandedAccount = null;
+    let showAllAccounts = true;
+    let notifications = [
+        {time: "15:38 27/11/2021", text: "A notification's text."},
+        {time: "15:38 27/11/2021", text: "A notification's text but longer aaaaaaaaaaaa asddagagfabsdhubaiufbau bdauhsbabsdbayub badysabdyba ybbdbasbd bbdabsdb aybdbaysbdya bybdabs bdabsdbadbua."},
+        {time: "15:38 27/11/2021", text: "A notification's text but way longer absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd absdb aybdbaysbdya bybdabs bdabsd."},
+        {time: "15:38 27/11/2021", text: "A notification's text."},
+    ];
 
     let accounts = [
-        {type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921", isExpanded: false, 
+        {type:"RON Account", currency:"RON", balance:"420,42", iban:"RONFOX62188921", 
             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"},
@@ -25,45 +34,57 @@ import AccountCard from './AccountCard.svelte';
                 {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, 
+        {type:"EUR Account", currency:"EUR", balance:"620,42", iban:"EURFOX62188921", 
             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#1", status:"PROCESSED", amount:"-45,09", time:"15:38 27/11/2021", type:"send"},
                 {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);
+        if (confirm("Log out?")) {
+            dispatch("logOut",null);
+        } 
     }
 
-    function showNotifications(){
-        //todo: CHeck here 
-        dispatch("showNotifications",null);
-    }
-
-   
 
     function expanded(index) {
         if (!expandedAccount && expandedAccount !== 0) {
             expandedAccount = index;
+            showAllAccounts = false;
         }
         else {
+            setShowAllAccounts();
             expandedAccount = null;
         }
     }
 
+    function setShowAllAccounts() {
+
+        setTimeout(() => {
+            showAllAccounts = true;
+        }, (accounts[expandedAccount].transactions.length * 50) +400 );
+    }
+
+    function createAccount(){
+        //todo: CHeck here 
+        dispatch("createPopup",{type: "new_account"});
+    }
+
+    function checkNotifications(){
+        //todo: CHeck here 
+        dispatch("createPopup",{
+            type: "check_notifications",
+            notifications: notifications
+        });
+    }
+
 </script>
 
 <main class="h-full flex flex-col items-stretch md:flex-row">
@@ -71,43 +92,53 @@ import AccountCard from './AccountCard.svelte';
         {#if expandedAccount || expandedAccount === 0}
             <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 type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
-            {/each}
+            {#if showAllAccounts}
+                {#each accounts as account,i}
+                    <div in:slide={{delay:500*i, duration:250*(i==0 ? 1 : i) }}>
+                        <AccountCard type={account.type} currency={account.currency} balance={account.balance} iban={account.iban} transactions={account.transactions} isExpanded={false} on:expanded={() => expanded(i)}></AccountCard>
+                    </div> 
+                {/each}
+            {/if}
         {/if}
+
+        <div class="self-center m-0">
+            {#if showAllAccounts}
+                <div in:slide={{delay:500*accounts.length, duration:250*accounts.length}}>
+                    <GreenButton on:click={createAccount}><Icon icon="akar-icons:plus" color="rgba(249, 250, 251, 1)" width="26" height="26" /></GreenButton>
+                </div>
+            {/if}
+        </div>
+        
     </div>
 
     <div class="flex-shrink md:flex-shrink-0 md:flex-grow"></div>
 
-    <CardBG class="flex-shrink flex flex-col items-stretch md:self-start p-6">
-        <div class="flex flex-row"> 
-            <h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
-            <button on:click={showNotifications} style=" filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));"> <Icon icon="akar-icons:envelope" color="#FB6666" width="36" height="36" /></button>
-        </div>
-        
-        <div class="m-3 flex-shrink">
-            <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
-            <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
-        </div>
-        
-        <div class="m-3 flex-shrink">
-            <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
-            <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accountnr} accounts</p>
-        </div>
+    <div in:fade={{duration:250}}>
+        <CardBG class="flex-shrink flex flex-col items-stretch md:self-start p-6">
+            <div class="flex flex-row"> 
+                <h1 class='font-sans text-5xl text-gray-50 m-6 border-b-2'>{username}</h1>
+                <button on:click={checkNotifications} style=" filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));"> <Icon icon="akar-icons:envelope" color="#FB6666" width="36" height="36" /></button>
+            </div>
+            
+            <div class="m-3 flex-shrink">
+                <h2 class='font-sans text-4xl text-gray-50'>Total balance: <span style="color: #264D59">{totalbalance}</span>{maincurrency}</h2>
+                <p class='font-sans text-1xl text-gray-50 m-2'>➜ from {accounts.length} accounts</p>
+            </div>
 
-        <div class="m-16"></div>
+            <div class="m-32"></div>
 
-        <div class="flex flex-row">
-                <button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="gray" width="34" height="34"/></button>
-                <div class="flex-grow"></div>
-                <div class="flex-grow"></div>
-                <div class="flex-grow"></div>
-                <div class="flex-grow"></div>
-                <a href='https://google.com' target="_blank" class='text-3xl text-gray-400 m-6 flex-auto text-center'>Help!</a>
-                <a href='mailto:foxbank.fx@gmail.com' target="_blank" class='text-3xl text-gray-400 m-6 flex-auto text-center'>Feedback</a>
-        </div>
-        
-    </CardBG>
+            <div class="flex flex-row">
+                    <button on:click={dispatchLogout}> <Icon icon="ri:logout-box-line" color="#264D59" width="34" height="34"/></button>
+                    <div class="flex-grow"></div>
+                    <div class="flex-grow"></div>
+                    <div class="flex-grow"></div>
+                    <div class="flex-grow"></div>
+                    <a href='https://google.com' target="_blank" class='text-3xl text-gray-300 m-6 flex-auto text-center'>Help!</a>
+                    <a href='mailto:foxbank.fx@gmail.com' target="_blank" class='text-3xl text-gray-300 m-6 flex-auto text-center'>Feedback</a>
+            </div>
+            
+        </CardBG>
+    </div>
     
 </main>