diff --git a/frontend/casino/src/app/components/App/AppNav/AppNav.tsx b/frontend/casino/src/app/components/App/AppNav/AppNav.tsx
index f922d6c..f834005 100644
--- a/frontend/casino/src/app/components/App/AppNav/AppNav.tsx
+++ b/frontend/casino/src/app/components/App/AppNav/AppNav.tsx
@@ -1,7 +1,101 @@
 export const AppNav = () => {
     return (
-        <div style={{ height: 'max-content '}}>
-                Header
+        <div style={{ height: 'max-content' }} className="bg-[#30333C] h-max-content px-[75px] py-[15px] text-white flex flex-row justify-between">
+            <div className="flex flex-row items-center">
+                <img src="src/assets/icons/chip.png" alt="Icon" className="w-[53px] h-[53px] mr-[15px]" />
+                <span className="font-semibold text-3xl">
+                    <span className="bg-gradient-to-b from-white via-blue-400 to-red-400 bg-clip-text text-transparent">Z</span>aSlot
+                    <span className="text-gray-400">.bet</span>
+                </span>
+            </div>
+            <div className="flex flex-row items-center rounded-[100px] bg-[#2D313D]">
+                <div className="flex flex-row items-center rounded-[100px] border-[2px] border-[#4F5563] bg-[#3B414F] px-[14px] py-[11px] gap-[3px] cursor-pointer">
+                    {/* todo: load from .svg file in assets */}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                        <g clip-path="url(#clip0_37_606)">
+                            <path d="M7.5 5.625L9 7.125L10.5 5.625V1.5H7.5V5.625ZM7.5 12.375L9 10.875L10.5 12.375V16.5H7.5V12.375ZM12.375 10.5L10.875 9L12.375 7.5H16.5V10.5H12.375ZM5.625 7.5L7.125 9L5.625 10.5H1.5V7.5H5.625Z" stroke="#226DBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_37_606">
+                                <rect width="18" height="18" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg>
+                    <span>
+                        Gaming
+                    </span>
+                </div>
+                <div className="flex flex-row items-center px-[14px] py-[11px] gap-[3px] cursor-not-allowed">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
+                        <path d="M10.5 2.13281C8.84513 2.13281 7.22742 2.62354 5.85144 3.54294C4.47547 4.46234 3.40302 5.76911 2.76973 7.29802C2.13644 8.82692 1.97074 10.5093 2.29359 12.1324C2.61644 13.7554 3.41334 15.2463 4.58351 16.4165C5.75368 17.5867 7.24457 18.3836 8.86765 18.7064C10.4907 19.0293 12.1731 18.8636 13.702 18.2303C15.2309 17.597 16.5377 16.5245 17.4571 15.1486C18.3765 13.7726 18.8672 12.1549 18.8672 10.5C18.8646 8.28168 17.9822 6.15497 16.4136 4.58638C14.845 3.01779 12.7183 2.13542 10.5 2.13281ZM16.8714 14.2259H13.9363L13.0766 13.043L14.1668 9.86672L15.5613 9.41473L17.8533 11.1727C17.7553 12.2504 17.42 13.2931 16.8714 14.2259ZM7.06371 14.2259H4.12864C3.5806 13.2929 3.24583 12.2503 3.14836 11.1727L5.44032 9.41473L6.83485 9.86672L7.9234 13.043L7.06371 14.2259ZM4.1836 6.67898L4.7775 8.68137L3.13688 9.93973C3.22377 8.78548 3.58244 7.66815 4.1836 6.67898ZM8.82328 12.6328L7.80528 9.6682L10.5 7.81594L13.1947 9.6682L12.1767 12.6328H8.82328ZM16.2217 8.68137L16.8164 6.67898C17.4173 7.66822 17.7757 8.78555 17.8623 9.93973L16.2217 8.68137ZM16.0855 5.67738L15.2578 8.47793L13.8633 8.93156L10.9922 6.96281V5.50922L13.527 3.76687C14.5086 4.21013 15.3817 4.86211 16.0855 5.67738ZM12.3802 3.36328L10.5 4.65281L8.61985 3.36328C9.85238 3.03954 11.1476 3.03954 12.3802 3.36328ZM7.47387 3.76605L10.0078 5.50922V6.95953L7.13672 8.92828L5.74219 8.47465L4.9145 5.67738C5.61864 4.86191 6.49203 4.20967 7.47387 3.76605ZM4.81934 15.2102H6.96692L7.72079 17.343C6.59304 16.8814 5.59649 16.1488 4.81934 15.2102ZM8.89465 17.7064L7.86516 14.7976L8.72321 13.6172H12.2768L13.1348 14.7976L12.1054 17.7064C11.048 17.9416 9.95197 17.9416 8.89465 17.7064ZM13.2792 17.3389L14.0331 15.2061H16.1807C15.4035 16.1447 14.407 16.8773 13.2792 17.3389Z" fill="#959CAF" />
+                    </svg>
+                    <span>Sport</span>
+                </div>
+            </div>
+            <div className="flex flex-row items-center rounded-[100px] bg-[#2D313D] px-[15px] py-[11px] justify-between w-[300px] cursor-not-allowed">
+                <span className="text-[#959CAF] select-none">Search for games</span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M14.1667 14.1667L17.5 17.5M2.5 9.16667C2.5 10.9348 3.20238 12.6305 4.45262 13.8807C5.70286 15.131 7.39856 15.8333 9.16667 15.8333C10.9348 15.8333 12.6305 15.131 13.8807 13.8807C15.131 12.6305 15.8333 10.9348 15.8333 9.16667C15.8333 7.39856 15.131 5.70286 13.8807 4.45262C12.6305 3.20238 10.9348 2.5 9.16667 2.5C7.39856 2.5 5.70286 3.20238 4.45262 4.45262C3.20238 5.70286 2.5 7.39856 2.5 9.16667Z" stroke="#959CAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </div>
+            <div className="rounded-[100px] bg-[#2D313D] flex flex-row items-center justify-between shadow-inset">
+                <div className="flex flex-row gap-[3px] items-center px-[15px] py-[11px]">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                        <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" fill="#E5A425" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M7.3999 5.79994H9.3999H10.1999C11.0835 5.79994 11.7999 6.5163 11.7999 7.39994C11.7999 8.28358 11.0835 8.99994 10.1999 8.99994H7.3999V5.79994Z" fill="#E5A425" />
+                        <path d="M7.3998 5.80006V9.00006H10.1998C11.0834 9.00006 11.7998 8.2837 11.7998 7.40006C11.7998 6.51642 11.0834 5.80006 10.1998 5.80006H9.3998M7.3998 5.80006H5.7998H7.3998ZM7.3998 5.80006V4.20006V5.80006ZM7.3998 5.80006H9.3998H7.3998ZM9.3998 5.80006V4.20006V5.80006Z" fill="#E5A425" />
+                        <path d="M7.3998 5.80006V9.00006H10.1998C11.0834 9.00006 11.7998 8.2837 11.7998 7.40006C11.7998 6.51642 11.0834 5.80006 10.1998 5.80006H9.3998M7.3998 5.80006H5.7998M7.3998 5.80006V4.20006M7.3998 5.80006H9.3998M9.3998 5.80006V4.20006" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M7.3999 9H10.9999C11.8835 9 12.5999 9.71636 12.5999 10.6C12.5999 11.4836 11.8835 12.2 10.9999 12.2H9.3999H7.3999V9Z" fill="#E5A425" />
+                        <path d="M7.3998 12.2V9H10.9998C11.8834 9 12.5998 9.71636 12.5998 10.6C12.5998 11.4836 11.8834 12.2 10.9998 12.2H9.3998M7.3998 12.2V13.8V12.2ZM7.3998 12.2H5.7998H9.3998M7.3998 12.2H9.3998H7.3998ZM9.3998 12.2V13.8V12.2Z" fill="#E5A425" />
+                        <path d="M7.3998 12.2V9H10.9998C11.8834 9 12.5998 9.71636 12.5998 10.6C12.5998 11.4836 11.8834 12.2 10.9998 12.2H9.3998M7.3998 12.2V13.8M7.3998 12.2H5.7998H9.3998M7.3998 12.2H9.3998M9.3998 12.2V13.8" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+                    </svg>
+                    {/* placeholder for balance */}
+                    <span>0.000000</span>
+                </div>
+                <div className="flex flex-row items-center rounded-[100px] border-[2px] border-[#4F5563] bg-[#3B414F] px-[14px] py-[11px] gap-[3px] cursor-pointer">
+                    {/* todo: load from .svg file in assets */}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                        <g clip-path="url(#clip0_37_601)">
+                            <path d="M15.7308 8.95333H7.70811C7.27822 8.92021 6.85258 9.0577 6.52331 9.33606C6.19404 9.61443 5.98764 10.0113 5.94878 10.4407L5.94811 10.4467C5.98753 10.8817 6.19808 11.2833 6.53348 11.5632C6.86888 11.8431 7.30168 11.9784 7.73678 11.9393L7.73078 11.94H15.7308C15.7811 11.9447 15.8319 11.9392 15.8801 11.924C15.9284 11.9088 15.9731 11.8841 16.0116 11.8513C16.0502 11.8186 16.0818 11.7785 16.1047 11.7334C16.1275 11.6883 16.1412 11.6391 16.1448 11.5887V9.306C16.1317 9.20844 16.0837 9.11893 16.0096 9.05408C15.9356 8.98923 15.8405 8.95343 15.7421 8.95333H15.7301H15.7308ZM7.70811 11.3787C7.51956 11.3787 7.33524 11.3228 7.17847 11.218C7.02169 11.1132 6.8995 10.9644 6.82735 10.7902C6.75519 10.616 6.73631 10.4243 6.7731 10.2393C6.80988 10.0544 6.90068 9.88455 7.034 9.75123C7.16733 9.6179 7.3372 9.5271 7.52212 9.49032C7.70705 9.45353 7.89874 9.47241 8.07294 9.54457C8.24713 9.61672 8.39602 9.73892 8.50078 9.89569C8.60553 10.0525 8.66144 10.2368 8.66144 10.4253V10.428C8.66144 10.9533 8.23544 11.3787 7.71078 11.3787H7.70811ZM2.19678 0V4.26933H3.10878V2.44533C3.20078 2.468 3.30744 2.48267 3.41678 2.48667H3.41944C3.74899 2.48579 4.06479 2.35453 4.29788 2.12157C4.53096 1.88861 4.66239 1.57288 4.66344 1.24333C4.66124 1.1351 4.64647 1.02749 4.61944 0.922667L4.62144 0.932667H9.61611C9.59204 1.03369 9.5782 1.13687 9.57478 1.24067V1.24333C9.57566 1.57288 9.70691 1.88868 9.93987 2.12177C10.1728 2.35485 10.4886 2.48628 10.8181 2.48733C10.9301 2.48333 11.0374 2.46867 11.1401 2.44333L11.1294 2.44533V4.26933H12.0634V0H2.19678ZM12.4561 3.75067H13.6168C13.5298 3.49809 13.3775 3.27307 13.1752 3.09858C12.9729 2.92408 12.728 2.80633 12.4654 2.75733L12.4561 2.756V3.75067Z" fill="#959CAF" />
+                            <path d="M7.64733 8.456H15.606V6.03133C15.5719 5.67166 15.3979 5.33976 15.1214 5.10719C14.845 4.87462 14.4882 4.75998 14.128 4.788H14.1327H1.49267C1.4819 4.77625 1.46719 4.76889 1.45133 4.76733C1.3637 4.72615 1.28867 4.66228 1.23405 4.58233C1.17942 4.50238 1.14718 4.40927 1.14067 4.31266V4.31133C1.15128 4.19142 1.19828 4.07761 1.27537 3.98516C1.35245 3.8927 1.45595 3.826 1.572 3.794L1.576 3.79333V2.73666C0.704667 2.778 0 4.02133 0 5.576V14.7573C0.0343941 15.1166 0.208341 15.448 0.48446 15.6803C0.760579 15.9127 1.11683 16.0275 1.47667 16H1.472H14.112C14.4703 16.0264 14.8247 15.9118 15.0996 15.6804C15.3745 15.4491 15.5481 15.1195 15.5833 14.762L15.584 14.7567V12.332H7.66933C6.38467 12.332 5.348 11.4613 5.348 10.4047C5.348 9.32733 6.384 8.45666 7.648 8.45666L7.64733 8.456Z" fill="#959CAF" />
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_37_601">
+                                <rect width="16" height="16" fill="white" />
+                            </clipPath>
+                        </defs>
+                    </svg>
+                    <button>
+                        Wallet
+                    </button>
+                </div>
+            </div>
+            <div className="flex flex-row items-center">
+                <span>Robin F.</span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="58" height="58" viewBox="0 0 58 58" fill="none">
+                    <g filter="url(#filter0_d_37_572)">
+                        <rect x="4" y="4" width="42" height="42" rx="10" fill="#4F5563" />
+                        <path d="M39.745 31C39.4345 30.1224 38.8595 29.3626 38.0993 28.8254C37.339 28.2881 36.4309 27.9997 35.5 28H14.5C13.3065 28 12.1619 28.4741 11.318 29.318C10.4741 30.1619 10 31.3065 10 32.5V33.5725C10 39.1495 16.315 43 25 43C29.593 43 33.523 41.8645 36.2065 40H25V38.5H37.951C38.5915 37.8085 39.0955 37.054 39.4435 36.25H25V34.75H39.895C39.9647 34.3614 39.9998 33.9673 40 33.5725V32.5H25V31H39.745ZM34 16C33.9998 15.6239 33.9768 15.2483 33.931 14.875H25V13.375H33.61C33.368 12.5802 33.0166 11.823 32.566 11.125H25V9.625H31.3525C30.0926 8.36945 28.4889 7.51539 26.7439 7.17065C24.9989 6.82591 23.1909 7.00597 21.5482 7.68807C19.9055 8.37018 18.5018 9.52375 17.5142 11.0031C16.5266 12.4825 15.9996 14.2213 15.9996 16C15.9996 17.7787 16.5266 19.5175 17.5142 20.9969C18.5018 22.4762 19.9055 23.6298 21.5482 24.3119C23.1909 24.994 24.9989 25.1741 26.7439 24.8293C28.4889 24.4846 30.0926 23.6305 31.3525 22.375H25V20.875H32.566C33.013 20.185 33.367 19.429 33.6115 18.625H25V17.125H33.931C33.9768 16.7517 33.9998 16.376 34 16Z" fill="url(#paint0_linear_37_572)" />
+                    </g>
+                    <defs>
+                        <filter id="filter0_d_37_572" x="0" y="0" width="58" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+                            <feOffset dx="4" dy="4" />
+                            <feGaussianBlur stdDeviation="4" />
+                            <feComposite in2="hardAlpha" operator="out" />
+                            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_37_572" />
+                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_37_572" result="shape" />
+                        </filter>
+                        <linearGradient id="paint0_linear_37_572" x1="10" y1="25" x2="40" y2="25" gradientUnits="userSpaceOnUse">
+                            <stop stop-color="#171A21" />
+                            <stop offset="0.536458" stop-color="#171A21" />
+                            <stop offset="1" stop-color="#171A21" stop-opacity="0.05" />
+                        </linearGradient>
+                    </defs>
+                </svg>
+            </div>
         </div>
     );
 };
\ No newline at end of file
diff --git a/frontend/casino/src/assets/icons/chip.png b/frontend/casino/src/assets/icons/chip.png
new file mode 100644
index 0000000..b4221b6
Binary files /dev/null and b/frontend/casino/src/assets/icons/chip.png differ
diff --git a/frontend/casino/src/assets/icons/gaming-icon.svg b/frontend/casino/src/assets/icons/gaming-icon.svg
new file mode 100644
index 0000000..3d60972
--- /dev/null
+++ b/frontend/casino/src/assets/icons/gaming-icon.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <g clip-path="url(#clip0_37_606)">
+        <path d="M7.5 5.625L9 7.125L10.5 5.625V1.5H7.5V5.625ZM7.5 12.375L9 10.875L10.5 12.375V16.5H7.5V12.375ZM12.375 10.5L10.875 9L12.375 7.5H16.5V10.5H12.375ZM5.625 7.5L7.125 9L5.625 10.5H1.5V7.5H5.625Z" stroke="#226DBC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <defs>
+        <clipPath id="clip0_37_606">
+            <rect width="18" height="18" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file