hi guys let's build our this header in our gap so go to our code and in here what I'm gonna do we're gonna just create a new folder in the source folder and give it name a component because we're gonna create a component right we're not gonna create a piece so in here in components we're gonna create the header so I'm just gonna with a new folder called header in the header we're gonna create a new fly the header yes now in here what we're gonna do we're gonna use import react from react and in here I'm just going to create this as a functional component and use it and now in here I'm going to return so what we need we need first of all we need this nav bar tack and in here we need this SVG file right so we're gonna export import this react component import react component as logo from door does last or just less assets less and stuck around and struck RAM dot SVG and also I'm going to import I'm going to import this home SVG right so I'm just going to create real component as home from Tardos last orders less assets less home dot SVG and also going to import react component as explore from jaundice luster dust less assets slash Explorer dot SVG now this all has been done now I'm going to create a new deep deep and this Steve I'm going to create a new div again and in here I'm going to use this logo and I have created this logo and now in here what we need as Dave inside a div we need this to link as you can say so in here the react router Tom provides you can see that it provides its own link so we can use nav link for this one also there is one call link so I'm going to just use it I'm going to use this enabling part it it you can see this that you can use in a blink most of the time because it's enhanced way of seeing the link you can say now here in here Neve link to it will go to this less because with which part you are seeing that's what it's called now in here what we need we going to give this home part right whenever we click on it it will going to be redirect to this last part now again one more thing we require we require nailing to to this Explorer we haven't created right like but we are going to create and in here what we need we need this Explorer and also what we need we need the button so I'm just going to create a button and called it logout for now it's not going to do anything right now so we have build it all the things but what we need we need to create a CSS for this part so that it will look good now I'm just going to create a new CSS in the header folder called header dot CSS so in here what I'm gonna do we're gonna just import this CSS file so in here we need a header dot CSS sorry import dot slash hello dot CSS now in here first of all I'm going to give just telling Fornell part what I'm gonna do we're gonna just give the height to be 50 pixel and border is to be 1 pixel solid and give to a stack TF yeah this is good now in here I'm just going to create a new class name in here and just going to give the name what should be named Eve header you can say and just going to copy it so that we can use it in here and in here what I'm gonna do I'm just going to get rid of 80% 80% and margin to be 0 Auto so that it will be at the center okay now in here what we need we have to give the height for this logo part also right so I'm just going to give class name to be do you flow you can see or you can set the rest with you because we're gonna write it I use it many use it in many parts so I'm just gonna use it in here and also I'm going to use it in here and also in here so in here the SVG to be you can say height to be you can cut the pixel and will to be 20 pixel and you can say padding to be 5 pixel and in here what we're gonna do we're gonna just keep 0 and 20 pixel and also in deal header what we need we're gonna use this display flags and also the flags dioxin to be raw and justify content to be space between and also the a line items to be Center so it will be aligned Center now what we need we need for this part and in here I'm just going to give a sterling in here only just so you can see that we can give any here also so a display to be flex flex Direction to be raw and in here I'm just going to give button a last name so that it will I can give any staring for this point so button header you can see in here and I'm just going to copy it for now and you was it here what we need we need ok just see it what it looks like for now so then we can see what we can do next go to our code and and again redirecting to the login page there's generators calm my it's not working oh we have an imported right so we have to import also so export default header and we are when where we are gonna use it we're gonna use it in the home page so where is the home page yeah this is the home page now in here we don't need this thing we need this part and we're gonna return and use this tea and div and in the div what we need we need the header part and now if we just use it and go to our code it's taking some time oh wow it's look good man yeah it's look good but what we need we need to align this part right so what I'm gonna do in our header dot CSS I'm just gonna give this part to be okay one thing is there so what we need in here that first of all we need hide hundred percent so that it will tag along with this nail part and also one more thing we need here so it will be a line Center we need this a line items to be Center and now if we just save it in our code you can see whenever we test it and if it is looking to it yeah it looks good it's good yeah now in the next blog we're gonna see what we you can more we can do more about it so that's all for this blog thanks