My account styles done

public/css/index.css

@@ -150,7 +150,7 @@ header .account-preview .full-name.show {
 }
 
 .word {
-  font-family: "Rambla", sans-serif;
+  font-family: "Helveltica", sans-serif;
   font-weight: 400;
   font-size: 50pt;
   display: flex;
@@ -895,4 +895,66 @@ header.demo h1 span.demoSpan:hover, header.demo h1 span.demoSpan:focus, header.d
   transform: rotate(4deg);
 }
 
+.info-account {
+  font-family: "Helveltica", sans-serif;
+  font-weight: 400;
+}
+.info-account .loading {
+  position: initial;
+  height: max-content;
+  height: 50vh;
+}
+.info-account .person {
+  width: 50vw;
+  margin-left: 15vw;
+  border-bottom: 1px solid #cabf9e;
+}
+.info-account .person h3 {
+  font-weight: 300;
+}
+.info-account .functions {
+  width: 50vw;
+  margin-left: 15vw;
+  margin-top: 2vh;
+  display: flex;
+}
+.info-account .functions .close-session {
+  width: 20vw;
+  height: 10vh;
+  background: #b9b9b9;
+  transition: ease-in-out 0.4s;
+  border: 0;
+  border-radius: 10px;
+}
+.info-account .functions .close-session:hover {
+  background: #ffa5a5;
+  transition: ease-in-out 0.4s;
+}
+.info-account .functions .reffer-code-container {
+  margin-left: 5vh;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+.info-account .functions .reffer-code-container p {
+  width: 100%;
+  flex-grow: 1;
+}
+.info-account .functions .reffer-code-container button {
+  width: 3vw;
+  height: 3vw;
+  background-color: white;
+  border: 0;
+  border: 1px solid #535353;
+  border-radius: 100%;
+}
+.info-account .functions .reffer-code-container button:hover {
+  background-color: white;
+  border: 3px solid #535353;
+  background-color: rgba(0, 0, 0, 0.035);
+}
+.info-account .functions .reffer-code-container button:active {
+  border: 4px solid #535353;
+}
+
 /*# sourceMappingURL=index.css.map */

public/sass/index.scss

@@ -16,7 +16,7 @@ html, body {
 
 @mixin bodyFont() {
 
-    font-family: 'Rambla', sans-serif;
+    font-family: 'Helveltica', sans-serif;
     font-weight: 400;
 }
 
@@ -30,4 +30,5 @@ html, body {
 @import 'message';
 @import './control-panel/control-panel';
 @import './control-panelDemo/demo-message';
-@import './control-panelDemo/admin-header-demo.scss'
+@import './control-panelDemo/admin-header-demo.scss';
+@import './info-account/info-account';

public/sass/info-account/_info-account.scss

@@ -0,0 +1,102 @@
+.info-account {
+
+    @include bodyFont();
+
+    .loading {
+
+        position: initial;
+
+        height: max-content;
+
+        height: 50vh;
+    }
+
+    .person {
+
+        width: 50vw;
+
+        margin-left: 15vw;
+
+        border-bottom: 1px solid rgb(202, 191, 158);
+
+        h3 {
+
+            font-weight: 300;
+        }
+    }
+
+    .functions {
+
+        width: 50vw;
+
+        margin-left: 15vw;
+        margin-top: 2vh;
+
+        display: flex;
+
+        .close-session {
+
+            width: 20vw;
+            height: 10vh;
+
+            background: rgb(185, 185, 185);
+
+            transition: ease-in-out 0.4s;
+
+            border: 0;
+
+            //border: 1px solid rgb(92, 92, 92);
+            border-radius: 10px;
+
+            &:hover {
+                background: rgb(255, 165, 165);
+
+                transition: ease-in-out 0.4s;
+            }
+        }
+
+        .reffer-code-container {
+
+            margin-left: 5vh;
+
+            flex-grow: 1;
+
+            display: flex;
+            align-items: center;
+
+            p {
+                
+                width: 100%;
+                flex-grow: 1;
+
+            }
+
+            button {
+
+                $background-color: rgb(255, 255, 255);
+
+                width: 3vw;
+                height: 3vw;
+
+                background-color: $background-color;
+
+                border: 0;
+                border: 1px solid rgb(83, 83, 83);
+                
+                border-radius: 100%;
+                
+                &:hover {
+
+                    background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
+                    border: 3px solid rgb(83, 83, 83);
+                    background-color: rgba(0, 0, 0, 0.035);
+                }
+
+                &:active {
+
+                    border: 4px solid rgb(83, 83, 83);
+                }
+            }
+        }
+    }
+}

src/components/Admin/Account/AccountInfo/AccountInfo.jsx

@@ -6,6 +6,7 @@ import capitalize from '../../Control Panel/Scripts/Capilazate'
 import bringDataFromFirebase from './Firebase Querys/bringDataFromFirebase'
 import HeaderAccount from './HeaderAccount/HeaderAccount'
 import hideRefferCode from './Scripts/hideRefferCode'
+import Loading from '../../../Loading/Loading'
 
 const AccountInfo = () => {
 
@@ -64,33 +65,44 @@ const AccountInfo = () => {
         <>
             <HeaderAccount name={'Fran'} />
 
+            
+            <div className="info-account">
+
             {
                 loading ? 
-                    <h1>aaa</h1>
+                    <Loading />
                 :
-            <div className="info-account">
-                <h2>{name}</h2>
-                <h3>{capitalize(position)}</h3>
+                    <>
+                        <div className="person">
+                            <h2>{name}</h2>
+                            <h3>{capitalize(position)}</h3>
+                            <h3>Email: {email}</h3>
+                        </div>
+                        
+                        <div className="functions">
 
-                <button
-                    onClick={() => closeSession()}
-                >
-                    Close Session
-                </button>
+                            <button
+                                onClick={() => closeSession()}
+                                className="close-session"
+                            >
+                                Close Session
+                            </button>
 
-                <h3>{email}</h3>
 
-                <div className="reffer-code-container">
+                            <div className="reffer-code-container">
 
-                    <h3>{refferCodeHide ? hideRefferCode(refferCode) : refferCode}</h3>
-                    <button
-                        onClick={() => setRefferCodeHide(!refferCodeHide)}
-                    >
-                        👁️
-                    </button>
-                </div>
-            </div>
+                                <p>Reffer Code: {refferCodeHide ? hideRefferCode(refferCode) : refferCode}</p>
+
+                                <button
+                                    onClick={() => setRefferCodeHide(!refferCodeHide)}
+                                >
+                                    👁️
+                                </button>
+                            </div>
+                        </div>
+                    </>
             }
+            </div>
 
         </>