Mermaid-Chart · Almoizs-1310 · Mar 5, 2026 · Mar 5, 2026 · Mar 11, 2026 · Mar 11, 2026
diff --git a/src/client/assets/icons/account_tree.tsx b/src/client/assets/icons/account_tree.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const AccountTreeIcon: React.FC<IconProps> = ({ size = 18, color = '#2B2542' }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask id="mask0_479_32942" style={{maskType:'alpha'}} maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+        <rect width="18" height="18" fill="#D9D9D9"/>
+      </mask>
+      <g mask="url(#mask0_479_32942)">
+        <path d="M11.25 15.75V13.5H8.25V6H6.75V8.25H1.5V2.25H6.75V4.5H11.25V2.25H16.5V8.25H11.25V6H9.75V12H11.25V9.75H16.5V15.75H11.25ZM12.75 6.75H15V3.75H12.75V6.75ZM12.75 14.25H15V11.25H12.75V14.25ZM3 6.75H5.25V3.75H3V6.75Z" fill={color}/>
+      </g>
+    </svg>
+  );
+};
+
+export default AccountTreeIcon;
diff --git a/src/client/assets/icons/cached.tsx b/src/client/assets/icons/cached.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const CachedIcon: React.FC<IconProps> = ({ size = 18, color = '#2B2542' }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask id="mask0_479_32952" style={{maskType:'alpha'}} maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+        <rect width="18" height="18" fill="#D9D9D9"/>
+      </mask>
+      <g mask="url(#mask0_479_32952)">
+        <path d="M9.0375 15C7.3625 15 5.9375 14.4187 4.7625 13.2563C3.5875 12.0938 3 10.675 3 9V8.86875L1.8 10.0688L0.75 9.01875L3.75 6.01875L6.75 9.01875L5.7 10.0688L4.5 8.86875V9C4.5 10.25 4.94063 11.3125 5.82188 12.1875C6.70313 13.0625 7.775 13.5 9.0375 13.5C9.3625 13.5 9.68125 13.4625 9.99375 13.3875C10.3062 13.3125 10.6125 13.2 10.9125 13.05L12.0375 14.175C11.5625 14.45 11.075 14.6562 10.575 14.7938C10.075 14.9313 9.5625 15 9.0375 15ZM14.25 11.9813L11.25 8.98125L12.3 7.93125L13.5 9.13125V9C13.5 7.75 13.0594 6.6875 12.1781 5.8125C11.2969 4.9375 10.225 4.5 8.9625 4.5C8.6375 4.5 8.31875 4.5375 8.00625 4.6125C7.69375 4.6875 7.3875 4.8 7.0875 4.95L5.9625 3.825C6.4375 3.55 6.925 3.34375 7.425 3.20625C7.925 3.06875 8.4375 3 8.9625 3C10.6375 3 12.0625 3.58125 13.2375 4.74375C14.4125 5.90625 15 7.325 15 9V9.13125L16.2 7.93125L17.25 8.98125L14.25 11.9813Z" fill={color}/>
+      </g>
+    </svg>
+  );
+};
+
+export default CachedIcon;
diff --git a/src/client/assets/icons/folder_open.tsx b/src/client/assets/icons/folder_open.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+}
+
+const FolderOpenIcon: React.FC<IconProps> = ({ size = 18, color = '#2B2542' }) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask id="mask0_479_32947" style={{maskType:'alpha'}} maskUnits="userSpaceOnUse" x="0" y="0" width="18" height="18">
+        <rect width="18" height="18" fill="#D9D9D9"/>
+      </mask>
+      <g mask="url(#mask0_479_32947)">
+        <path d="M3 15C2.5875 15 2.23438 14.8531 1.94063 14.5594C1.64688 14.2656 1.5 13.9125 1.5 13.5V4.5C1.5 4.0875 1.64688 3.73438 1.94063 3.44063C2.23438 3.14688 2.5875 3 3 3H7.5L9 4.5H15C15.4125 4.5 15.7656 4.64688 16.0594 4.94063C16.3531 5.23438 16.5 5.5875 16.5 6H8.38125L6.88125 4.5H3V13.5L4.8 7.5H17.625L15.6938 13.9312C15.5938 14.2562 15.4094 14.5156 15.1406 14.7094C14.8719 14.9031 14.575 15 14.25 15H3ZM4.575 13.5H14.25L15.6 9H5.925L4.575 13.5Z" fill={color}/>
+      </g>
+    </svg>
+  );
+};
+
+export default FolderOpenIcon;
diff --git a/src/client/assets/icons/index.ts b/src/client/assets/icons/index.ts
@@ -0,0 +1,4 @@
+export { default as AccountTreeIcon } from './account_tree';
+export { default as FolderOpenIcon } from './folder_open';
+export { default as CachedIcon } from './cached';
+export { default as LogoutIcon } from './logout';
diff --git a/src/client/assets/icons/logout.tsx b/src/client/assets/icons/logout.tsx
@@ -0,0 +1,12 @@
+export default function LogoutIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <mask id="mask0_489_50091" style={{maskType:'alpha'}} maskUnits="userSpaceOnUse" x="4" y="4" width="24" height="24">
+        <rect x="4" y="4" width="24" height="24" fill="#D9D9D9"/>
+      </mask>
+      <g mask="url(#mask0_489_50091)">
+        <path d="M9 25C8.45 25 7.97917 24.8042 7.5875 24.4125C7.19583 24.0208 7 23.55 7 23V9C7 8.45 7.19583 7.97917 7.5875 7.5875C7.97917 7.19583 8.45 7 9 7H15C15.2833 7 15.5208 7.09583 15.7125 7.2875C15.9042 7.47917 16 7.71667 16 8C16 8.28333 15.9042 8.52083 15.7125 8.7125C15.5208 8.90417 15.2833 9 15 9H9V23H15C15.2833 23 15.5208 23.0958 15.7125 23.2875C15.9042 23.4792 16 23.7167 16 24C16 24.2833 15.9042 24.5208 15.7125 24.7125C15.5208 24.9042 15.2833 25 15 25H9ZM21.175 17H14C13.7167 17 13.4792 16.9042 13.2875 16.7125C13.0958 16.5208 13 16.2833 13 16C13 15.7167 13.0958 15.4792 13.2875 15.2875C13.4792 15.0958 13.7167 15 14 15H21.175L19.3 13.125C19.1167 12.9417 19.025 12.7167 19.025 12.45C19.025 12.1833 19.1167 11.95 19.3 11.75C19.4833 11.55 19.7167 11.4458 20 11.4375C20.2833 11.4292 20.525 11.525 20.725 11.725L24.3 15.3C24.5 15.5 24.6 15.7333 24.6 16C24.6 16.2667 24.5 16.5 24.3 16.7L20.725 20.275C20.525 20.475 20.2875 20.5708 20.0125 20.5625C19.7375 20.5542 19.5 20.45 19.3 20.25C19.1167 20.05 19.0292 19.8125 19.0375 19.5375C19.0458 19.2625 19.1417 19.0333 19.325 18.85L21.175 17Z" fill="currentColor"/>
+      </g>
+    </svg>
+  );
+}
diff --git a/src/client/components/button.module.css b/src/client/components/button.module.css
@@ -1,14 +1,44 @@
+.buttonPrimary {
+  font-family: 'Recursive', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0%;
+  width: 100%;
+  height: 36px;
+  padding: 6px 16px;
+  outline: none;
+  border-radius: 8px;
+  border: none;
+  background-color: #BEDDE3;
+  cursor: pointer;
+  color: #1E1A2E;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  vertical-align: middle;
+}
+
+.buttonPrimary:hover {
+  background-color: #A5D0D7;
+  color: #1E1A2E;
+  transition: all 0.2s;
+}
+
 .button {
-  font-family: 'Commissioner', sans-serif;
-  font-size: 14px;
-  line-height: 1.25rem;
+  font-family: 'Recursive', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0%;
   padding: 0.5rem;
   outline: none;
   border-radius: 0.375rem;
   border: none;
   background-color: #E80962;
   cursor: pointer;
-   color: white;
+  color: white;
+  vertical-align: middle;
 }
 
 .button:hover {
@@ -31,8 +61,41 @@
   border-color: rgb(207, 207, 211);
 }
 
-.flexContainer {
+.buttonLogout {
+  font-family: 'Recursive', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: 0%;
+  width: 100%;
+  height: 52px;
+  padding: 14px;
+  outline: none;
+  border-radius: 6px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: #444746;
   display: flex;
   align-items: center;
+  justify-content: flex-start;
   gap: 8px;
+  opacity: 1;
+  vertical-align: middle;
+  transition: all 0.2s ease;
 }
+
+.buttonLogout:hover {
+  background-color: rgba(68, 71, 70, 0.1);
+  color: #1E1A2E;
+  transition: all 0.2s ease;
+}
+
+.buttonLogout:active {
+  background-color: rgba(68, 71, 70, 0.2);
+  color: #1E1A2E;
+  transform: translateY(1px);
+  transition: all 0.1s ease;
+}
+
+
diff --git a/src/client/components/button.tsx b/src/client/components/button.tsx
@@ -8,6 +8,8 @@ interface ButtonProps {
   disabled?: boolean;
   style?: React.CSSProperties;
   loading?: boolean;
+  variant?: 'primary' | 'secondary' | 'logout';
+  icon?: React.ReactNode;
 }
 
 const Button: FunctionComponent<ButtonProps> = ({
@@ -16,18 +18,26 @@ const Button: FunctionComponent<ButtonProps> = ({
   disabled,
   style,
   loading = false,
+  variant = 'secondary',
+  icon,
   ...rest
 }) => {
+  const getButtonClassName = () => {
+    if (variant === 'primary') return styles.buttonPrimary;
+    if (variant === 'logout') return styles.buttonLogout;
+    return styles.button;
+  };
+
   return (
     <button
-      className={`${styles.button} ${loading ? styles.buttonLoading : ''} `}
+      className={`${getButtonClassName()} ${loading ? styles.buttonLoading : ''} `}
       style={style}
       onClick={onClick}
       disabled={disabled}
       {...rest}
     >
-      <Box display="flex" alignItems="center" gap="8px">
-        {loading && <CircularProgress size={14} color="inherit" />}
+      <Box display="flex" alignItems="center" gap="10px">
+        {loading ? <CircularProgress size={14} color="inherit" /> : icon}
         {children}
       </Box>
     </button>