diff --git a/src/main.rs b/src/main.rs
index ea994f2..14064c1 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -4,12 +4,12 @@ use yew::prelude::*;
 use topbar::TopBar;
 
 #[function_component]
-fn app() -> Html {
+fn App() -> Html {
     html! {
         <TopBar/>
     }
 }
 
 fn main() {
-    yew::Renderer::<app>::new().render();
+    yew::Renderer::<App>::new().render();
 }
diff --git a/src/topbar.rs b/src/topbar.rs
index 4ed50ec..7ee875d 100644
--- a/src/topbar.rs
+++ b/src/topbar.rs
@@ -3,12 +3,13 @@ use yew::prelude::*;
 #[derive(Properties, PartialEq)]
 pub struct TabProps {
     pub text: AttrValue,
+    pub link: AttrValue,
 }
 
 #[function_component]
 pub fn Tab(props: &TabProps) -> Html {
     html!{
-        <li><a href="#">
+        <li><a href={props.link.clone()}>
             <svg width="136" height="54" viewBox="-0.5 -0.5 136 54" xmlns="http://www.w3.org/2000/svg">
                 <g>
                     <path d="m 123.5,11.5 5,5 c 3.33333,3.333333 5,8.333333 5,15 v 10 c 0,6.666667 -3.33333,10 -10,10 H 11.500001 c -6.6666667,0 -10,-3.333333 -10,-10 v -30 c 0,-6.6666666 3.3333333,-9.9999996 10,-9.9999996 H 103.5 c 6.66667,0 11.66667,1.666667 15,5 z"
@@ -27,15 +28,15 @@ pub fn TopBar() -> Html {
     html!{
         <nav id="topbar">
             <ul id="tabs-main" class="tabs">
-                <Tab text="Home" />
-                <Tab text="Services" />
-                <Tab text="Community" />
-                <Tab text="About" />
+                <Tab text="Home" link="/" />
+                <Tab text="Services" link="/services" />
+                <Tab text="Community" link="/community" />
+                <Tab text="About" link="/about" />
             </ul>
 
             <ul id="tabs-account" class="tabs">
-                <Tab text="Sign In" />
-                <Tab text="Sign Up" />
+                <Tab text="Sign In" link="/#signin" />
+                <Tab text="Sign Up" link="/#signup" />
             </ul>
         </nav>
     }