diff --git a/client/src/App.svelte b/client/src/App.svelte
index 9d5f56d..b4c2c47 100644
--- a/client/src/App.svelte
+++ b/client/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
 import BottomBorder from "./BottomBorder.svelte";
+import CheckNotifications from "./CheckNotifications.svelte";
 import CreateAccount from "./CreateAccount.svelte";
 
 import Login from "./Login.svelte";
@@ -68,9 +69,9 @@ import TopBorder from "./TopBorder.svelte";
 
 <main class="flex flex-col items-stretch bg-banner bg-cover bg-center bg-fixed h-screen font-sans">
 	{#if isCreatingAccount}
-		<CreateAccount> </CreateAccount>
+		<CreateAccount on:createPopup={onCreatePopup}> </CreateAccount>
 	{:else if  isCheckingNotifications}
-		 <!-- else if content here -->
+		 <CheckNotifications on:createPopup={onCreatePopup} notifications={notifications}></CheckNotifications>
 	{:else if  isSendingMoney}
 		 <!-- else if content here -->
 	{/if}
diff --git a/client/src/CheckNotifications.svelte b/client/src/CheckNotifications.svelte
new file mode 100644
index 0000000..8f84405
--- /dev/null
+++ b/client/src/CheckNotifications.svelte
@@ -0,0 +1,88 @@
+<script>
+
+    import CardBG from "./CardBG.svelte";
+    import {createEventDispatcher} from 'svelte';
+    import Icon from "@iconify/svelte";
+    import { fade, fly, slide } from 'svelte/transition';
+	import { flip } from 'svelte/animate';
+import DetailField from "./DetailField.svelte";
+
+    
+    const dispatch = createEventDispatcher();
+
+    export let notifications = [{time: "15:38 27/11/2021", text: "A notification's text."}];
+
+    function cancelCheckNotifications(){
+        dispatch("createPopup",{type:"check_notifications_cancelled"});
+    }
+
+</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'>Inbox</h1>
+                <button class="ml-auto mr-6" on:click={cancelCheckNotifications}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </button>  
+            </div>
+            <div class="w-full max-w-md self-start border-solid border mb-3"></div> 
+
+            <div class="flex flex-col flex-grow pl-8 pr-10 relative scroller overflow-auto overflow-x-hidden max-h-medium">
+                {#each notifications as notification,i (i)}
+                    <div in:slide={{delay:100*i}} out:slide={{delay:50*(notifications.length-i)}}>
+                
+                        <DetailField class="my-3 py-1 flex-shrink min-w-transaction max-w-4xl">   
+                            <div class='font-sans text-gray-50 text-2xl mt-2 mx-4 border-b-1'>
+                                {notification.text}
+                            </div>
+
+                            <div class="flex flex-row">
+                                <div class='inline font-sans ml-auto mr-4 text-xl text-gray-100 mt-2 mx-6 border-b-1'>
+                                    <span> at {notification.time} </span>
+                                </div>
+                            </div>
+                            
+                        </DetailField> 
+                    </div>
+                {/each}
+            </div>
+            
+            <div class="m-2"></div>
+            
+        </CardBG>
+    </div>
+    
+</div>
+
+<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);
+}
+
+.max-h-medium {
+    max-height: 50%;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/CreateAccount.svelte b/client/src/CreateAccount.svelte
index 3e3dadc..3882661 100644
--- a/client/src/CreateAccount.svelte
+++ b/client/src/CreateAccount.svelte
@@ -17,6 +17,7 @@ import Icon from "@iconify/svelte";
     function create(){
         if(type == "" || type == null) {
             alert("Account Name field can not be empty!");
+            console.debug(`account name: ${type}`)
         }else if(!currencies.includes(currency)){
             alert("Currency is not supported!");
         }else if (!termsAccepted){
@@ -46,18 +47,18 @@ import Icon from "@iconify/svelte";
         <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>  
+                <button class="ml-auto mr-6" on:click={cancelCreate}> <Icon icon="akar-icons:cross" color="rgba(249, 250, 251, 1)" width="32" height="32" /> </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>
+                <InputField placeholder="New Account" isPassword={false} bind: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>
+                <InputField placeholder="RON" isPassword={false} bind:value={currency}></InputField>
             </div>
 
             <div class="mx-1 flex-shrink  max-w-2xl">
diff --git a/client/src/Login.svelte b/client/src/Login.svelte
index cbd87d5..1c3d965 100644
--- a/client/src/Login.svelte
+++ b/client/src/Login.svelte
@@ -23,11 +23,11 @@
         <CardBG class="flex flex-col items-stretch">
             <h1 class='font-welcome text-7xl text-gray-50 m-6 border-b-2'>Welcome,</h1>
             <div class="m-3 flex-shrink">
-                <InputField placeholder="Username" isPassword={false} value={username}></InputField>
+                <InputField placeholder="Username" isPassword={false} bind:value={username}></InputField>
             </div>
             
             <div class="m-3 flex-shrink">
-                <InputField placeholder="Code" isPassword={true} value={code}></InputField>
+                <InputField placeholder="Code" isPassword={true} bind:value={code}></InputField>
             </div>
 
             <div class="m-3 flex-shrink"> 
diff --git a/client/src/MainPage.svelte b/client/src/MainPage.svelte
index 56465c7..fb2cda3 100644
--- a/client/src/MainPage.svelte
+++ b/client/src/MainPage.svelte
@@ -20,6 +20,10 @@
         {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."},
+        {time: "15:38 27/11/2021", text: "A notification's text."},
+        {time: "15:38 27/11/2021", text: "A notification's text."},
+        {time: "15:38 27/11/2021", text: "A notification's text."},
+        {time: "15:38 27/11/2021", text: "A notification's text."},
     ];
 
     let accounts = [
diff --git a/client/src/SendMoney.svelte b/client/src/SendMoney.svelte
new file mode 100644
index 0000000..3882661
--- /dev/null
+++ b/client/src/SendMoney.svelte
@@ -0,0 +1,80 @@
+<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!");
+            console.debug(`account name: ${type}`)
+        }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="32" height="32" /> </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} bind: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} bind: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