diff --git a/README.md b/README.md
index 10fca05..091fd61 100644
--- a/README.md
+++ b/README.md
@@ -3,3 +3,4 @@
 My personal website
 
 [![status-badge](https://ci.codeberg.org/api/badges/14212/status.svg)](https://ci.codeberg.org/repos/14212)
+
diff --git a/assets/main.css b/assets/main.css
index a9b246f..ee0171f 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -39,15 +39,50 @@
     color: coral;
 }
 
-.projects_list {
+.links_list {
     font-size: large;
     color: white;
     margin: 1%;
 }
 
-.projects_list h1 {
-    margin-top: 1%;
-    margin-bottom: 1%;
+.links{
+    margin: 1%;
+    h1 {
+        color: azure;
+    }
+    h3 {
+        margin-top: 1%;
+        color: aliceblue;
+    }
+    h5 {
+        margin-bottom: 1%;
+        color: antiquewhite;
+    }
+    div {
+        margin-top: 1%;
+        display:block;
+        @media screen {
+            width: 50%;
+        }
+
+        @media screen and (max-width:820px){
+            width: 100%;
+        }
+    }
+}
+
+.links_link {
+    text-decoration: underline;
+    font-size: x-large;
+    color: azure;
+    margin: 1%;
+}
+
+
+.projects_list {
+    font-size: large;
+    color: white;
+    margin: 1%;
 }
 
 .project_link {
diff --git a/src/home.rs b/src/home.rs
index 289e729..39ec0f2 100644
--- a/src/home.rs
+++ b/src/home.rs
@@ -18,13 +18,6 @@ pub fn Home() -> Element {
                 id: "title",
                 "System && Back End Developer"}
 
-            div {
-                id: "social_links",
-                Link {id:"codeberg",to: "https://codeberg.org/Tahinli", "Codeberg"}
-
-                Link {id:"linkedin",to: "https://linkedin.com/in/ahmetkaangumus", "LinkedIn"}
-            }
-
             div {
                 id: "main_about",
                     "
diff --git a/src/lib.rs b/src/lib.rs
index 97effb5..f1d87ae 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,12 +1,14 @@
-use dioxus::prelude::*;
-use home::Home;
-use posts::{Post, Posts};
-use projects::{Project, Projects};
-
 pub mod home;
+pub mod links;
 pub mod posts;
 pub mod projects;
 
+use dioxus::prelude::*;
+use home::Home;
+use links::Links;
+use posts::{Post, Posts};
+use projects::{Project, Projects};
+
 #[derive(Clone, Routable, Debug, PartialEq)]
 pub enum Route {
     #[route("/")]
@@ -19,6 +21,8 @@ pub enum Route {
     Posts {},
     #[route("/posts/:id")]
     Post { id: i32 },
+    #[route("/links")]
+    Links {},
 }
 
 #[component]
@@ -30,6 +34,7 @@ pub fn Header() -> Element {
                     Link {to: Route::Home{}, class:"main_nav_btn", "Home"}
                     Link {to: Route::Projects{}, class:"main_nav_btn", "Projects"}
                     Link {to: Route::Posts {}, class:"main_nav_btn", "Posts"}
+                    Link {to: Route::Links {}, class:"main_nav_btn", "Links"}
                 }
         }
         div { id: "content",
diff --git a/src/links.rs b/src/links.rs
new file mode 100644
index 0000000..285c6bb
--- /dev/null
+++ b/src/links.rs
@@ -0,0 +1,18 @@
+use dioxus::prelude::*;
+
+use crate::{Footer, Header};
+
+#[component]
+pub fn Links() -> Element {
+    rsx! {
+        Header {}
+        div {
+            class: "links_list",
+            h1 {"Links"}
+            div {class: "links_link", Link {to: "https://codeberg.org/Tahinli", class: "links_link", "Codeberg"} }
+            div {class: "links_link", Link {to: "https://github.com/Tahinli", class: "links_link", "GitHub"} }
+            div {class: "links_link", Link {to: "https://linkedin.com/in/ahmetkaangumus", class: "links_link", "LinkedIn"} }
+        }
+        Footer {}
+    }
+}