diff --git a/Cargo.toml b/Cargo.toml
index 6a9d242..7b88d1f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -21,6 +21,8 @@ cfg-if = "1.0"
 leptos_icons = { version = "0.1.0", features = [
     "FiExternalLink",
     "FaGithubBrands",
+    "FaLinkedinBrands",
+    "FaEnvelopeSolid",
 ]}
 
 # dependecies for client (enable when csr or hydrate set)
diff --git a/src/app/components/mod.rs b/src/app/components/mod.rs
index 26b01fd..e03464d 100644
--- a/src/app/components/mod.rs
+++ b/src/app/components/mod.rs
@@ -5,4 +5,7 @@ mod link;
 pub use link::Link;
 
 mod social_link;
-pub use social_link::{SocialLinkContainer, SocialLink};
\ No newline at end of file
+pub use social_link::{SocialLinkContainer, SocialLink};
+
+mod top_component;
+pub use top_component::TopComponent;
\ No newline at end of file
diff --git a/src/app/components/social_link.rs b/src/app/components/social_link.rs
index 3dc46c6..93a3ffe 100644
--- a/src/app/components/social_link.rs
+++ b/src/app/components/social_link.rs
@@ -19,7 +19,7 @@ pub fn SocialLink(
     icon: Icon,
 ) -> impl IntoView {
     view! {
-        <a class="mx-auto scale-150 mb-1" href=url target="_blank">
+        <a href=url target="_blank">
             <Icon icon=icon class="mx-auto scale-150 mb-1" />
             <span class="text-sm">{ children() }</span>
         </a>
diff --git a/src/app/components/top_component.rs b/src/app/components/top_component.rs
new file mode 100644
index 0000000..dbd2cb4
--- /dev/null
+++ b/src/app/components/top_component.rs
@@ -0,0 +1,34 @@
+use leptos::*;
+use leptos_icons::FaIcon::{FaGithubBrands, FaLinkedinBrands, FaEnvelopeSolid};
+use leptos_icons::*;
+
+use super::*;
+
+#[component]
+pub fn TopComponent() -> impl IntoView {
+    view! {
+        <div class="min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative">
+            <div class="flex-1 p-10 justify-center items-center">
+                <img src="https://devemyhg.lycee-darchicourt.net/wp-content/uploads/2018/01/No-picture.png" alt="Ma photo" class="mx-auto rounded-lg" />
+            </div>
+            <div class="flex-1 p-10 flex flex-col gap-3">
+                <h1 class="font-bold text-3xl">Florian RICHER</h1>
+                <h4 class="font-semibold text-xl">"Développeur d´application Web et Mobile"</h4>
+                <p class="font-normal text-base">
+                    r#"
+                    Découvrez mon parcours en développement, où ma passion précoce pour la programmation a débuté avec la
+                    création d'applications 3D utilisant OpenGL et s'est étendue à la maîtrise de diverses technologies,
+                    notamment le développement Web avec React, Ruby on Rails, Symfony, Tailwindcss et Bootstrap, la réalisation
+                    d'applications mobiles avec Flutter et le développement système en Rust, toujours animé par mon désir
+                    inépuisable d'apprendre et ma curiosité sans bornes.
+                    "#
+                </p>
+                <SocialLinkContainer>
+                    <SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</SocialLink>
+                    <SocialLink icon=Icon::from(FaLinkedinBrands) url="https://www.linkedin.com/in/florian-richer-80960b129/".to_string()>Linkedin</SocialLink>
+                    <SocialLink icon=Icon::from(FaEnvelopeSolid) url="mailto:florian.richer@protonmail.com".to_string()>Mail</SocialLink>
+                </SocialLinkContainer>
+            </div>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/app/mod.rs b/src/app/mod.rs
index 713ff72..fd07a58 100644
--- a/src/app/mod.rs
+++ b/src/app/mod.rs
@@ -3,8 +3,6 @@ mod components;
 use leptos::*;
 use leptos_meta::*;
 use leptos_router::*;
-use leptos_icons::FaIcon::FaGithubBrands;
-use leptos_icons::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -23,30 +21,9 @@ pub fn App() -> impl IntoView {
 
 #[component]
 fn Home() -> impl IntoView {
-    let (count, set_count) = create_signal(0);
-
     view! {
-        <main class="my-0 mx-auto max-w-3xl text-center">
-            <h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
-            <p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
-            <components::Tag>Salut</components::Tag>
-            <components::Link>Salut</components::Link>
-            <components::SocialLinkContainer>
-                <components::SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</components::SocialLink>
-                <components::SocialLink icon=Icon::from(FaGithubBrands) url="https://github.com/mrdev023".to_string()>Github</components::SocialLink>
-            </components::SocialLinkContainer>
-            <button
-                class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
-                on:click=move |_| set_count.update(|count| *count += 1)
-            >
-                "Something's here | "
-                {move || if count() == 0 {
-                    "Click me!".to_string()
-                } else {
-                    count().to_string()
-                }}
-                " | Some more text"
-            </button>
+        <main class="m-0 p-0 bg-surface dark:bg-dark_surface text-on_surface dark:text-dark_on_surface">
+            <components::TopComponent/>
         </main>
     }
 }
\ No newline at end of file
diff --git a/src_old/components/TopComponent.scss b/src_old/components/TopComponent.scss
deleted file mode 100644
index 4221be2..0000000
--- a/src_old/components/TopComponent.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-#top {
-    @apply min-h-screen w-full flex flex-col md:flex-row items-center gap-5 relative;
-
-    & > div {
-        @apply flex-1 p-10;
-    }
-
-    & > .top__image {
-        @apply flex justify-center items-center;
-        
-        & > img {
-            @apply mx-auto rounded-lg;
-        }
-    }
-
-    & > .top__presentation {
-        @apply flex flex-col gap-3;
-
-        & > h1 {
-            @apply font-bold text-3xl;
-        }
-
-        & > h4 {
-            @apply font-semibold text-xl;
-        }
-
-        & > p {
-            @apply font-normal text-base;
-        }
-    }
-
-}
\ No newline at end of file
diff --git a/src_old/components/TopComponent.tsx b/src_old/components/TopComponent.tsx
deleted file mode 100644
index ba47898..0000000
--- a/src_old/components/TopComponent.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import SocialLink from './social_link/SocialLink'
-import SocialLinks from './social_link/SocialLinks'
-import './TopComponent.scss'
-import { FaEnvelope, FaGithub, FaLinkedin } from 'react-icons/fa'
-
-function TopComponent() {
-    return (
-        <div id="top">
-            <div className='top__image'>
-                <img src="https://devemyhg.lycee-darchicourt.net/wp-content/uploads/2018/01/No-picture.png" alt="Ma photo" />
-            </div>
-            <div className='top__presentation'>
-                <h1>Florian RICHER</h1>
-                <h4>Développeur d´application Web et Mobile</h4>
-                <p>
-                    Découvrez mon parcours en développement, où ma passion précoce pour la programmation a débuté avec la
-                    création d'applications 3D utilisant OpenGL et s'est étendue à la maîtrise de diverses technologies,
-                    notamment le développement Web avec React, Ruby on Rails, Symfony, Tailwindcss et Bootstrap, la réalisation
-                    d'applications mobiles avec Flutter et le développement système en Rust, toujours animé par mon désir
-                    inépuisable d'apprendre et ma curiosité sans bornes.
-                </p>
-                <SocialLinks>
-                <SocialLink
-                        icon={<FaGithub />}
-                        name="Github"
-                        url="https://github.com/mrdev023"
-                    />
-                    <SocialLink
-                        icon={<FaLinkedin />}
-                        name="Linkedin"
-                        url="https://www.linkedin.com/in/florian-richer-80960b129/"
-                    />
-                    <SocialLink
-                        icon={<FaEnvelope />}
-                        name="Mail"
-                        url="mailto:florian.richer@protonmail.com"
-                    />
-                </SocialLinks>
-            </div>
-        </div>
-    )
-}
-export default TopComponent
\ No newline at end of file