diff --git a/src/App.css b/src/App.css
index b9d355d..bd1db90 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,10 +1,18 @@
 #root {
-  max-width: 1280px;
+  width: 100vw;
+  height: 100vh;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
 }
 
+.mainContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 100px;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;
diff --git a/src/App.tsx b/src/App.tsx
index 3d7ded3..2ac3b8a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,34 +1,30 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+
 import './App.css'
+import { TopBar } from './Components/TopBar/TopBar'
+import { GWJBar } from './Components/IWJBar/GWJBar'
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState<number>(0)
+  const [message, setMessage] = useState<string>("")
 
   return (
-    <>
+    <div className='mainContainer'>
+        <TopBar></TopBar>
       <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <GWJBar></GWJBar>  
+        </div>
+        <div className="card">
+          <button onClick={() => setMessage("Pressed button")}>
+            Escanear
+          </button>
+          <p>
+            {message}
+          </p>
+        </div>
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    </div>
   )
 }
 
diff --git a/src/Components/AssetConfig/AssetImg.tsx b/src/Components/AssetConfig/AssetImg.tsx
new file mode 100644
index 0000000..1b28455
--- /dev/null
+++ b/src/Components/AssetConfig/AssetImg.tsx
@@ -0,0 +1,40 @@
+ import coin from './../../assets/Coin.png';
+ import gdg from './../../assets/gdg.jpg';
+ import firebase from './../../assets/firebase.png';
+ import angular from './../../assets/angular.png';
+ import tensorflow from './../../assets/tensorflow.png';
+
+export type ImageKeyType = keyof typeof images;
+export const images = {
+  coin,              
+  gdg,        
+  firebase,
+  angular,     
+  tensorflow,
+};
+export interface TripIconProps {
+  name: ImageKeyType;
+  isUrl?: boolean;
+  size?: number;
+  isWhite?: boolean;
+  onPress?: () => void;
+}
+
+function AssetImg({
+  name,
+  size = 24,
+  isWhite,
+  ...props
+}: TripIconProps) {
+  return (
+    <img
+      {...props}
+      //resizeMode={resizeMode}
+      src={images[name]}
+      style={{width: size, height: size, filter: isWhite ? 'grayscale(100%)' : ''}}
+      //style={[{width: size, height: size, tintColor: color}, style]}
+    />
+  );
+}
+
+export default AssetImg;
\ No newline at end of file
diff --git a/src/Components/IWJBar/GWJ.css b/src/Components/IWJBar/GWJ.css
new file mode 100644
index 0000000..5f10c5a
--- /dev/null
+++ b/src/Components/IWJBar/GWJ.css
@@ -0,0 +1,15 @@
+.gwjBar {
+    height: 80%;
+    width: fit-content;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    border-radius: 50px;
+    margin-right: 10px;
+    background-color: rgba(83, 150, 221, 1);
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    
+}
\ No newline at end of file
diff --git a/src/Components/IWJBar/GWJBar.tsx b/src/Components/IWJBar/GWJBar.tsx
new file mode 100644
index 0000000..dbcab22
--- /dev/null
+++ b/src/Components/IWJBar/GWJBar.tsx
@@ -0,0 +1,12 @@
+import './GWJ.css'
+import GLetter from './../../assets/Gletter.svg'
+import WLetter from './../../assets/Wletter.svg'
+import JLetter from './../../assets/Jletter.svg'
+
+export const GWJBar = () => {
+    return <div className="gwjBar"> 
+        <img src={WLetter}/>
+        <img src={GLetter}/>
+        <img src={JLetter}/>
+    </div>
+}
\ No newline at end of file
diff --git a/src/Components/IconsBar/IconsBar.css b/src/Components/IconsBar/IconsBar.css
new file mode 100644
index 0000000..d10aabd
--- /dev/null
+++ b/src/Components/IconsBar/IconsBar.css
@@ -0,0 +1,10 @@
+.iconsBar {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 80%;
+    width: 250px;
+    border-radius: 50px;
+    margin-right: 10px;
+    background-color: rgba(83, 150, 221, 1)
+}
\ No newline at end of file
diff --git a/src/Components/IconsBar/IconsBar.tsx b/src/Components/IconsBar/IconsBar.tsx
new file mode 100644
index 0000000..dbeb2ea
--- /dev/null
+++ b/src/Components/IconsBar/IconsBar.tsx
@@ -0,0 +1,10 @@
+import AssetImg from '../AssetConfig/AssetImg'
+import './IconsBar.css'
+
+export const IconsBar = () => {
+    return <div className="iconsBar"> 
+        <AssetImg isWhite= { true } name = "tensorflow" size = {40}/>
+        <AssetImg isWhite= { true } name = "angular" size = {40}/>
+        <AssetImg isWhite= { true } name = "firebase" size = {40}/>
+    </div>
+}
\ No newline at end of file
diff --git a/src/Components/PointsBar/PointsBar.css b/src/Components/PointsBar/PointsBar.css
new file mode 100644
index 0000000..ec53e7a
--- /dev/null
+++ b/src/Components/PointsBar/PointsBar.css
@@ -0,0 +1,13 @@
+.pointsBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    height: 80%;
+    width: 210px;
+    border-radius: 50px;
+    background-color: rgba(83, 150, 221, 1);
+
+    margin-left: 10px;
+    padding-right: 20px;
+}
\ No newline at end of file
diff --git a/src/Components/PointsBar/PointsBar.tsx b/src/Components/PointsBar/PointsBar.tsx
new file mode 100644
index 0000000..db6caff
--- /dev/null
+++ b/src/Components/PointsBar/PointsBar.tsx
@@ -0,0 +1,9 @@
+import AssetImg from '../AssetConfig/AssetImg'
+import './PointsBar.css'
+
+export const PointsBar = () => {
+    return <div className="pointsBar"> 
+        <AssetImg isWhite= { false } name = "coin" size = {40}/>
+        <a style={{ fontSize: '25px', color: 'white' }}> 0 </a>
+    </div>
+}
\ No newline at end of file
diff --git a/src/Components/TopBar/TopBar.css b/src/Components/TopBar/TopBar.css
new file mode 100644
index 0000000..fe90c86
--- /dev/null
+++ b/src/Components/TopBar/TopBar.css
@@ -0,0 +1,24 @@
+
+.topBar {
+    width: 100%;
+    height: 75px;
+    border-radius: 37.5px;
+    background-color: white;
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+}
+
+section {
+  --main-bg-color: brown;
+}
+
+
+.circle {
+    position: relative;
+    top: -60px;
+    background-color: white;
+    width: 120px;
+    height: 120px;
+    border-radius: 100%;
+}
\ No newline at end of file
diff --git a/src/Components/TopBar/TopBar.tsx b/src/Components/TopBar/TopBar.tsx
new file mode 100644
index 0000000..7dcb9b4
--- /dev/null
+++ b/src/Components/TopBar/TopBar.tsx
@@ -0,0 +1,20 @@
+import AssetImg from '../AssetConfig/AssetImg'
+import { IconsBar } from '../IconsBar/IconsBar'
+import { PointsBar } from '../PointsBar/PointsBar'
+
+import './TopBar.css'
+
+export const TopBar = () => {
+    return <div style={{ alignContent: 'center', width: '100%' }}>
+        <div className="topBar">
+            <PointsBar></PointsBar>
+            <IconsBar></IconsBar>
+        </div>
+
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+            <div className='circle' style={{ alignContent: 'center' }}>
+                <AssetImg size={85} name='gdg'></AssetImg>
+            </div>
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/src/assets/Coin.png b/src/assets/Coin.png
new file mode 100644
index 0000000..25c588c
Binary files /dev/null and b/src/assets/Coin.png differ
diff --git a/src/assets/Gletter.svg b/src/assets/Gletter.svg
new file mode 100644
index 0000000..b39ea74
--- /dev/null
+++ b/src/assets/Gletter.svg
@@ -0,0 +1,5 @@
+<svg width="34" height="49" viewBox="0 0 34 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 3C31.7614 3 34 5.23858 34 8V35H24V22.8252C25.1645 22.413 26 21.3057 26 20C26 18.6941 25.1647 17.5859 24 17.1738V8C24 5.23858 26.2386 3 29 3Z" fill="#FEFFFB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34 35C34 35 34.1875 40.5 28 45C21.8125 49.5 10.5 48 6.00001 45.5C1.50001 43 2.00001 41.5 2.00001 41.5C2.00001 41.5 1.00001 37 3.50001 35.5C6.00001 34 8.50001 35.5 8.50001 35.5C8.50001 35.5 10 37.5 16.5 38C23 38.5 23 35 24 35C25 35 34 35 34 35Z" fill="#FEFFFB"/>
+<path d="M16 3C24.8366 3 32 10.6112 32 20C32 29.3888 24.8366 37 16 37C7.16344 37 0 29.3888 0 20C0 10.6112 7.16344 3 16 3ZM17 11C15.3431 11 14 12.3431 14 14V17H11C9.34315 17 8 18.3431 8 20C8 21.6569 9.34315 23 11 23H14V26C14 27.6569 15.3431 29 17 29C18.6569 29 20 27.6569 20 26V23H23C24.6569 23 26 21.6569 26 20C26 18.3431 24.6569 17 23 17H20V14C20 12.3431 18.6569 11 17 11Z" fill="white"/>
+</svg>
diff --git a/src/assets/Jletter.svg b/src/assets/Jletter.svg
new file mode 100644
index 0000000..619278a
--- /dev/null
+++ b/src/assets/Jletter.svg
@@ -0,0 +1,12 @@
+<svg width="16" height="59" viewBox="0 0 16 59" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14_33)">
+<path d="M6 19C6 16.2386 8.23858 14 11 14C13.7614 14 16 16.2386 16 19V50.6129C16 55.245 12.245 59 7.6129 59C6.72212 59 6 58.2779 6 57.3871V19Z" fill="white"/>
+<path d="M0 54C0 51.2386 2.23858 49 5 49H8V59H5C2.23858 59 0 56.7614 0 54Z" fill="white"/>
+<circle cx="10.5" cy="5.5" r="5.5" fill="#E95CA1"/>
+</g>
+<defs>
+<clipPath id="clip0_14_33">
+<rect width="16" height="59" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/WLetter.svg b/src/assets/WLetter.svg
new file mode 100644
index 0000000..40c554f
--- /dev/null
+++ b/src/assets/WLetter.svg
@@ -0,0 +1,8 @@
+<svg width="48" height="41" viewBox="0 0 48 41" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.8434 8.24887C18.0498 5.80643 19.3865 3.18311 21.8289 2.38952C24.2713 1.59592 26.8946 2.93257 27.6882 5.375L36.6539 32.9686C37.4475 35.411 36.1109 38.0344 33.6685 38.828C31.226 39.6215 28.6027 38.2849 27.8091 35.8425L18.8434 8.24887Z" fill="#FEFFFB"/>
+<path d="M36.8106 5.4627C37.6042 3.02027 40.2276 1.68362 42.67 2.47721C45.1124 3.27081 46.4491 5.89412 45.6555 8.33655L36.6898 35.9302C35.8962 38.3726 33.2729 39.7092 30.8304 38.9156C28.388 38.1221 27.0513 35.4987 27.8449 33.0563L36.8106 5.4627Z" fill="#FEFFFB"/>
+<path d="M7.04693 27.3357C6.25333 24.8932 7.58998 22.2699 10.0324 21.4763C12.4748 20.6827 15.0982 22.0194 15.8918 24.4618L18.6712 33.016C19.4648 35.4584 18.1281 38.0818 15.6857 38.8754C13.2433 39.669 10.6199 38.3323 9.82636 35.8899L7.04693 27.3357Z" fill="#FEFFFB"/>
+<circle cx="5.5" cy="7.5" r="5.5" fill="#E95CA1"/>
+<path d="M5.84693 23.6335C5.05334 21.1911 6.38998 18.5678 8.83241 17.7742C11.2748 16.9806 13.8982 18.3172 14.6918 20.7597L15.6881 23.8261C16.4817 26.2686 15.1451 28.8919 12.7026 29.6855C10.2602 30.4791 7.63688 29.1424 6.84328 26.7L5.84693 23.6335Z" fill="#E95CA1"/>
+<path d="M18.8106 5.4627C19.6042 3.02027 22.2276 1.68362 24.67 2.47721C27.1124 3.27081 28.4491 5.89412 27.6555 8.33655L18.6898 35.9302C17.8962 38.3726 15.2728 39.7092 12.8304 38.9156C10.388 38.1221 9.05134 35.4987 9.84494 33.0563L18.8106 5.4627Z" fill="#FEFFFB"/>
+</svg>
diff --git a/src/assets/angular.png b/src/assets/angular.png
new file mode 100644
index 0000000..dfd6fe2
Binary files /dev/null and b/src/assets/angular.png differ
diff --git a/src/assets/firebase.png b/src/assets/firebase.png
new file mode 100644
index 0000000..fee374d
Binary files /dev/null and b/src/assets/firebase.png differ
diff --git a/src/assets/gdg.jpg b/src/assets/gdg.jpg
new file mode 100644
index 0000000..3bf25aa
Binary files /dev/null and b/src/assets/gdg.jpg differ
diff --git a/src/assets/tensorflow.png b/src/assets/tensorflow.png
new file mode 100644
index 0000000..13061a6
Binary files /dev/null and b/src/assets/tensorflow.png differ
diff --git a/src/index.css b/src/index.css
index 08a3ac9..736cd46 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: rgba(72, 76, 201, 1);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -42,7 +42,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: rgba(83, 150, 221, 1);
   cursor: pointer;
   transition: border-color 0.25s;
 }