diff --git a/index.html b/index.html
index 806dfaf..1c0c529 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,15 @@
             </div>
             <div class="content-container">
                 <div class="content-wrapper">
-                    <p>Hello! I'm Erik Fehér, a passionate software developer with a knack for creating innovative solutions. With a background in computer science and years of experience in the tech industry, I specialize in building web applications that are both user-friendly and efficient. When I'm not coding, you can find me exploring the latest tech trends or contributing to open-source projects. Let's connect and create something amazing together!</p>
-
+                    <div class="header">
+                        <div class="brand">Erik Feher</div>
+                        <img class="close" src="./public/next.svg"/>
+                    </div>
+                    <div class="card-content">
+                        <div id="card-content-container">
+                            <img id="card-content-image" src="./public/profile.jpg"/>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/public/close.svg b/public/close.svg
new file mode 100644
index 0000000..a77d295
--- /dev/null
+++ b/public/close.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M8.00191 9.41621C7.61138 9.02569 7.61138 8.39252 8.00191 8.002C8.39243 7.61147 9.0256 7.61147 9.41612 8.002L12.0057 10.5916L14.5896 8.00771C14.9801 7.61719 15.6133 7.61719 16.0038 8.00771C16.3943 8.39824 16.3943 9.0314 16.0038 9.42193L13.4199 12.0058L16.0039 14.5897C16.3944 14.9803 16.3944 15.6134 16.0039 16.004C15.6133 16.3945 14.9802 16.3945 14.5896 16.004L12.0057 13.42L9.42192 16.0038C9.03139 16.3943 8.39823 16.3943 8.00771 16.0038C7.61718 15.6133 7.61718 14.9801 8.00771 14.5896L10.5915 12.0058L8.00191 9.41621Z" fill="#ffffff"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z" fill="#ffffff"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/public/next.svg b/public/next.svg
new file mode 100644
index 0000000..8c5be8f
--- /dev/null
+++ b/public/next.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 471.2 471.2" xml:space="preserve" stroke="#ffffff">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M396.7,0H74.5C33.4,0,0,33.4,0,74.5v322.2c0,41.1,33.4,74.5,74.5,74.5h322.2c41.1,0,74.5-33.4,74.5-74.5V74.5 C471.2,33.5,437.7,0,396.7,0z M444.2,396.7c0,26.2-21.3,47.5-47.5,47.5H74.5c-26.2,0-47.5-21.3-47.5-47.5V74.5 C27,48.3,48.3,27,74.5,27h322.2c26.2,0,47.5,21.3,47.5,47.5V396.7z"/> <path d="M283.6,155.6c-5.3-5.3-13.8-5.3-19.1,0c-5.3,5.3-5.3,13.8,0,19.1l47.5,47.5H126.6c-7.5,0-13.5,6-13.5,13.5 s6,13.5,13.5,13.5H312l-47.4,47.4c-5.3,5.3-5.3,13.8,0,19.1c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4l70.5-70.5c5.3-5.3,5.3-13.8,0-19.1 L283.6,155.6z"/> </g> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/public/profile.jpg b/public/profile.jpg
new file mode 100644
index 0000000..b0b130f
Binary files /dev/null and b/public/profile.jpg differ
diff --git a/styles.css b/styles.css
index d545002..b2d58b5 100644
--- a/styles.css
+++ b/styles.css
@@ -5,10 +5,18 @@
     --background-color: #1b1b1b;
     --text-color: #fff;
     --label-height: 60px;
+    --header-height: 50px;
+    --base-border-radius: 7px;
+    --base-box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
+    --base-blur: blur(3px);
+    --base-content-background-color: #ffffff20;
+    --content-wrap-padding: 16px;
+    --header-margin-bottom: 20px;
 
     font-family: "BBH Sans Bogle", sans-serif;
     font-weight: 400;
     font-style: normal;
+    color: #fff;
 }
 
 html, body {
@@ -32,6 +40,10 @@ html, body {
     filter: grayscale(100%) brightness(80%);
     transform: translateY(0);
     transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    
 }
 
 .card {
@@ -41,6 +53,7 @@ html, body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    width: 100%;
 }
 
 .card-wrapper {
@@ -50,6 +63,7 @@ html, body {
     justify-content: center;
     align-items: center;
     width: 100%;
+    height: 100%;
     cursor: pointer;
     transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
@@ -100,21 +114,83 @@ html, body {
     display: block;
     position: relative;
     max-width: 100%;
+    width: 100%;
     height: calc(100dvh - (2 * var(--card-gap)));
     top: calc(-1 * (100dvh - (2 * var(--card-gap))) - var(--label-height));
+    overflow: auto;
 }
 
 .content-wrapper {
-    display: block;
+    display: flex;
     opacity: 0;
-    transition: opacity 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-    margin: 10px;
-    padding: 0;
+    transition: opacity 0s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    height: calc(100% - 16px);
+    margin: var(--content-wrap-padding) var(--content-wrap-padding) 0px var(--content-wrap-padding);
 }
 
 .visible {
     display: block !important;
     opacity: 1 !important;
     transition-delay: 0.5s !important;
-    transition: 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-}
\ No newline at end of file
+    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 48px;
+    margin-bottom: var(--header-margin-bottom);
+    height: var(--header-height);
+}
+
+.brand {
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    padding: 10px;
+    background-color: var(--base-content-background-color);
+    box-shadow: var(--base-box-shadow);
+    color: #ffffff;
+    backdrop-filter: var(--base-blur);
+    border-radius: var(--base-border-radius);
+    
+}
+
+.close {
+    cursor: pointer;
+    width: 48px;
+    background-color: var(--base-content-background-color);
+    backdrop-filter: var(--base-blur);
+    box-shadow: var(--base-box-shadow);
+    border-radius: var(--base-border-radius);
+    transition: 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+.close:hover {
+    transform: scale(1.1);
+}
+
+.card-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: calc(100% - var(--header-height) - var(--header-margin-bottom) - var(--content-wrap-padding));
+}
+
+#card-content-container {
+    display: flex;
+}
+
+#card-content-image {
+    border-radius: var(--base-border-radius);
+    background-color: var(--base-content-background-color);
+    backdrop-filter: var(--base-blur);
+    box-shadow: var(--base-box-shadow);
+    padding: 10px;
+    width: 300px;
+    height: 300px;
+    
+}