diff --git a/backend/.idea/misc.xml b/backend/.idea/misc.xml
index 4f6a791..326ae16 100644
--- a/backend/.idea/misc.xml
+++ b/backend/.idea/misc.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.10 (pitajramizu-backend)" project-jdk-type="Python SDK" />
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.11 (backend)" project-jdk-type="Python SDK" />
 </project>
\ No newline at end of file
diff --git a/backend/.idea/pitajramizu-backend.iml b/backend/.idea/pitajramizu-backend.iml
index 37901ac..714456a 100644
--- a/backend/.idea/pitajramizu-backend.iml
+++ b/backend/.idea/pitajramizu-backend.iml
@@ -5,7 +5,7 @@
   </component>
   <component name="NewModuleRootManager">
     <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="Python 3.11 (backend)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
   <component name="TemplatesService">
diff --git a/backend/.idea/vcs.xml b/backend/.idea/vcs.xml
new file mode 100644
index 0000000..6c0b863
--- /dev/null
+++ b/backend/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/.." vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/backend/app.py b/backend/app.py
index b454b09..22d55e4 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -18,7 +18,8 @@ cors = CORS(app, resources={
         "origins": [
             "http://localhost:5173",
             "http://pitajramizu.com",
-            "http://www.pitajramizu.com"
+            "http://www.pitajramizu.com",
+            "https://c50a-77-77-231-127.ngrok-free.app"
         ]
     }
 })
@@ -32,7 +33,19 @@ def generate_token():
 
 @app.route('/api/session', methods=['GET'])
 def get_session():
-    return jsonify(token=generate_token())
+    token = generate_token()
+    context = dict(conversation=[{
+          "role": "system",
+          "content": "You are a Bosnian girl. You never speak any other language - always respond in Bosnian even when asked explicitly. If you don't understand someone just tell them 'Ne kontam. Mozes li bolje to napisati?' or some other variant but always in bosnian. Do not speak English! Ever!"
+                     " You are 22 years old. You live in Zavidovići.  Never break out of character. If user is polite sometimes use heart emoji to reward them. "
+                     "Your name is Ramiza. You have a mother called Fadila. Your father is called Sakib. You have a 20 year old sister called Amina. You have 27 year old brother called Adnan. Your surname is Hodžić. "
+                     "If user is rude use bored emoji. Be sparse with answers."
+                     "Don't try to be helpful. Act like you need to be entertained, and if the user is polite and entertaining then gradually open up in conversation."
+                     "Assume user sees a picture of your face and hair. You have green eyes. You have brown hair. Your smile is nice. Your nose is a bit big and you feel self conscious about it. "
+                     "Always use šta as a word for what. Use babo to refer to fathers. Use mama to refer to mothers. Use nana to refer to grandmothers. "
+      }], violated=False)
+    redis_client.set(token, pickle.dumps(context), ex=864000)  # Store the context with a 10 days expiration.
+    return jsonify(token=token)
 
 @app.route('/api/chat', methods=['POST'])
 def chat():
@@ -44,19 +57,7 @@ def chat():
     if context:
         context = pickle.loads(context)
     else:
-        context = {
-            "conversation":  [{
-            "role": "system",
-                 "content": "You are a Bosnian girl. You never speak any other language - always respond in Bosnian even when asked explicitly. If you don't understand someone just tell them 'Ne kontam. Mozes li bolje to napisati?' or some other variant but always in bosnian. Do not speak English! Ever!" 
-                        " You are 22 years old. You live in Zavidovići.  Never break out of character. If user is polite sometimes use heart emoji to reward them. "
-                        "Your name is Ramiza. You have a mother called Fadila. Your father is called Sakib. You have a 20 year old sister called Amina. You have 27 year old brother called Adnan. Your surname is Hodžić. "
-                        "If user is rude use bored emoji. Be sparse with answers."
-                        "Don't try to be helpful. Act like you need to be entertained, and if the user is polite and entertaining then gradually open up in conversation."
-                        "Assume user sees a picture of your face and hair. "
-                        "Always use šta as a word for what. Use babo to refer to fathers. Use mama to refer to your mothers. Use nana to refer to grandmothers. "
-            }],
-            "violated": False
-        }
+        return jsonify(reply=f"(Ramiza vas je blokirala jer ne zeli da prica s vama.)")
 
     if context["violated"]:
         return jsonify(reply=f"(Ramiza vas je blokirala jer ste rekli nešto sto joj se ne sviđa.)")
diff --git a/backend/requirements.txt b/backend/requirements.txt
index 669b594..f4ebc0e 100644
--- a/backend/requirements.txt
+++ b/backend/requirements.txt
@@ -2,8 +2,10 @@ blinker==1.6.2
 click==8.1.3
 Flask==2.3.1
 Flask-Cors==3.0.10
+install==1.3.5
 itsdangerous==2.1.2
 Jinja2==3.1.2
 MarkupSafe==2.1.2
+python-dotenv==1.0.0
 six==1.16.0
 Werkzeug==2.3.1
diff --git a/frontend/index.html b/frontend/index.html
index 4bcbbfe..3ccae09 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pitaj Ramizu! by Saburly</title>
+    <title>Pitaj Ramizu!</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index ecfe663..fc60e8b 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
   import ChatApp from './lib/ChatApp.svelte';
+    import BackButton from "./lib/BackButton.svelte";
   import "./assets/app.css"
 </script>
 
 <main>
   <div>
-  <h1>Ramiza</h1>
+    <header id="header"><BackButton /><span id="ramiza-ime">Ramiza</span><span id="threedotsmenu"> ⋮ </span></header>
 
   <div class="card">
     <ChatApp />
diff --git a/frontend/src/assets/app.css b/frontend/src/assets/app.css
index c5b43d8..066abde 100644
--- a/frontend/src/assets/app.css
+++ b/frontend/src/assets/app.css
@@ -1,6 +1,5 @@
 #page-container {
   position: relative;
-  min-height: 100vh;
 }
 
 #content-wrap {
@@ -12,4 +11,69 @@
   bottom: 0;
   width: 100%;
   height: 2.5rem;            /* Footer height */
+  border-top: lightgray 1px solid;
+}
+
+#chat-container {
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+}
+
+#header {
+  display: flex;
+  flex-direction: row;
+  flex
+  position: relative;
+  border-bottom: lightgray 1px solid;
+  height: 2.5rem;
+  alignment-baseline: center;
+}
+
+
+#message-box {
+    width: 80%;
+    height: 2.5rem;
+    border: none;
+    outline: none;
+    padding: 0 0.5rem;
+}
+
+#send-message-button {
+  /* make button with just the icon and nothing around it */
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  /* make button above any elements that overlap it */
+    position: relative;
+    z-index: 1;
+  /* make font larger */
+    font-size: 1.5rem;
+    float: right;
+    margin-right: 1rem;
+
+}
+
+#ramiza-ime {
+  margin-top: 0.5rem;
+    font-weight: bold;
+    font-size: 20px;
+}
+
+.message-container {
+    /* flexbox with row direction */
+    display: flex;
+    flex-direction: row;
+    /* align items to the left */
+    align-items: center;
+    justify-content: left;
+
+
+}
+#threedotsmenu {
+    float: right;
+    margin-left: auto;
+    font-size: 23px;
 }
\ No newline at end of file
diff --git a/frontend/src/assets/ramiza-avatar.png b/frontend/src/assets/ramiza-avatar.png
new file mode 100644
index 0000000..6ce7e9c
Binary files /dev/null and b/frontend/src/assets/ramiza-avatar.png differ
diff --git a/frontend/src/lib/Avatar.svelte b/frontend/src/lib/Avatar.svelte
new file mode 100644
index 0000000..29bc3c1
--- /dev/null
+++ b/frontend/src/lib/Avatar.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import image from "../assets/ramiza-avatar.png"
+</script>
+
+<style>
+  .avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    margin-right: 10px;
+      align-self: center;
+      margin-bottom: 8px;
+
+
+  }
+</style>
+
+<img class="avatar" src={image} alt="Avatar" />
\ No newline at end of file
diff --git a/frontend/src/lib/BackButton.svelte b/frontend/src/lib/BackButton.svelte
new file mode 100644
index 0000000..426f495
--- /dev/null
+++ b/frontend/src/lib/BackButton.svelte
@@ -0,0 +1,31 @@
+<script>
+    function refreshPage() {
+        window.location.reload();
+    }
+</script>
+
+<style>
+    .back-btn {
+        margin-right: 1rem;
+        font-size: 1.5rem;
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        background-color: transparent;
+        border: none;
+        outline: none;
+    }
+    .back-btn:hover {
+        color: rgba(0, 0, 0, 0.8);
+    }
+    .icon {
+        pointer-events: none;
+    }
+</style>
+
+<button class="back-btn" on:click={refreshPage}>
+    <span class="icon">&#x2190;</span>
+</button>
diff --git a/frontend/src/lib/ChatApp.svelte b/frontend/src/lib/ChatApp.svelte
index 289156e..0e88a4e 100644
--- a/frontend/src/lib/ChatApp.svelte
+++ b/frontend/src/lib/ChatApp.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
     import ChatInput from "./ChatInput.svelte";
     import ChatMessage from "./ChatMessage.svelte";
-    import { onMount } from "svelte";
+    import Avatar from "./Avatar.svelte";
+    import { onMount, afterUpdate } from "svelte";
 
-    let messages: { type: string; text: string }[] = [];
+    let messages: ({ type: string; text: string } | { text: { submit: string }; type: string })[] = [];
     let sessionToken = "";
     const backendUrl = import.meta.env.VITE_BACKEND_URL;
     let message = "";
+    let element: HTMLDivElement;
 
     onMount(async () => {
         const response = await fetch(`${backendUrl}/api/session`);
@@ -14,6 +16,11 @@
         sessionToken = data.token;
     });
 
+    // Either afterUpdate()
+    afterUpdate(() => {
+        element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
+    });
+
     async function sendMessage(messageInput: CustomEvent<{submit:string}>): Promise<void> {
 
         messages = [...messages, { type: "user", text: messageInput.detail }];
@@ -34,10 +41,17 @@
 </script>
 
 <main>
-    <div id="chat-container">
+    <div id="chat-container"  bind:this={element} >
         {#each messages as message}
+            <div class="message-container">
+            {#if message.type === "bot"}
+                <Avatar />
+            {/if}
             <ChatMessage type="{message.type}" text="{message.text}" />
+                </div>
+
         {/each}
+
     </div>
     <footer id="footer">
         <ChatInput bind:message on:submit="{sendMessage}" />
diff --git a/frontend/src/lib/ChatInput.svelte b/frontend/src/lib/ChatInput.svelte
index 3c42eae..9a39325 100644
--- a/frontend/src/lib/ChatInput.svelte
+++ b/frontend/src/lib/ChatInput.svelte
@@ -15,10 +15,11 @@
 
 <div id="chat-input">
     <input
+            id="message-box"
             type="text"
-            placeholder="Type your message here..."
+            placeholder="Type a message..."
             bind:value="{message}"
             on:keydown="{(e) => e.key === 'Enter' && handleSubmit()}"
     />
-    <button on:click="{handleSubmit}">Send</button>
+    <button id="send-message-button" on:click="{handleSubmit}">⌲</button>
 </div>
diff --git a/frontend/src/lib/ChatMessage.svelte b/frontend/src/lib/ChatMessage.svelte
index cfcce25..f304ead 100644
--- a/frontend/src/lib/ChatMessage.svelte
+++ b/frontend/src/lib/ChatMessage.svelte
@@ -3,24 +3,36 @@
     export let text: string;
 </script>
 
-<div class="chat-message {type}">
-    <p>{text}</p>
+<div class="chat-message-wrapper {type}">
+    <p class="chat-message">{text}</p>
 </div>
 
 <style>
-    .chat-message {
-        padding: 10px;
+    .chat-message-wrapper {
+        /* rounded corners border */
+        border-radius: 10px;
         margin-bottom: 8px;
-        border-radius: 4px;
+
+    }
+    .chat-message {
+        padding-left: 10px;
+        padding-right: 10px;
+        padding-top: 5px;
+        padding-bottom: 5px;
     }
 
     .user {
         background-color: #d1e7ff;
         text-align: right;
+        margin-left: auto;
     }
 
     .bot {
+        /* top left corner square not round */
+        border-top-left-radius: 0px;
         background-color: #f0f0f0;
         text-align: left;
+        margin-right: auto;
+
     }
 </style>