# The page doesn't have the stylings (Gatsby, styled-component) when first launched

**URL:** <https://answers.netlify.com/t/the-page-doesnt-have-the-stylings-gatsby-styled-component-when-first-launched/55646>\
**Category:** Support\
**Tags:** netlify-newbie, gatsby\
**Created:** [April 28, 2022, 3:28pm UTC](https://answers.netlify.com/t/the-page-doesnt-have-the-stylings-gatsby-styled-component-when-first-launched/55646 "2022-04-28T15:28:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rafael.soteldo](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/rafael.soteldo/32/36598_2.png) [@rafael.soteldo](https://answers.netlify.com/u/rafael.soteldo)\
**Post date:** [April 28, 2022, 3:28pm UTC](https://answers.netlify.com/t/the-page-doesnt-have-the-stylings-gatsby-styled-component-when-first-launched/55646/1 "2022-04-28T15:28:16Z")

</div>

When I first launch the page it doesn’t show the stylings, but if I go to another page and return to the first, it shows well

I am using styled components, and I’m initializing the whole thing in gatsby-browser.js and gatsby-ssr.js

```auto
---- gatsby-browser.js/gatsby-ssr.js:

import React from "react"
import Layout from "./src/components/Layout"
import { GlobalStyles, globalTheme } from "./src/globals/globalStyles"
import { ThemeProvider } from "styled-components"
import GlobalContextProvider from "./src/globals/globalContextProvider"

export const wrapRootElement = ({ element }) => {
  return (
    <ThemeProvider theme={globalTheme}>
      <GlobalStyles />
      <GlobalContextProvider>
        <Layout>{element}</Layout>
      </GlobalContextProvider>
    </ThemeProvider>
  )
}

```

The first page would be **About Us** , so the pages index.js and about.js are literally the same

In the next image, on the left is the page as it shows for the first launch, on the right, as it shows when navigating to another page and returning to the first one

 ![image](https://global.discourse-cdn.com/netlify/original/3X/0/c/0cccffa967af105dc8b3cdce150365a1c2dde2dc.jpeg)

The site name is: [https://dainty-smakager-18ee0d.netlify.app/](https://dainty-smakager-18ee0d.netlify.app/)

The GitHub address is: [https://github.com/rafaelsoteldosilva/serenity-gb-without-model](https://github.com/rafaelsoteldosilva/serenity-gb-without-model)

---

<div class="post-metadata">

**Author:** ![perry](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/perry/32/16_2.png) [@perry](https://answers.netlify.com/u/perry)\
**Post date:** [April 28, 2022, 4:02pm UTC](https://answers.netlify.com/t/the-page-doesnt-have-the-stylings-gatsby-styled-component-when-first-launched/55646/2 "2022-04-28T16:02:35Z")

</div>

hi there, does this work correctly locally? that might be the best way to approach troubleshooting this.

can you check and confirm?

---

<div class="post-metadata">

**Author:** ![rafael.soteldo](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/rafael.soteldo/32/36598_2.png) [@rafael.soteldo](https://answers.netlify.com/u/rafael.soteldo)\
**Post date:** [April 28, 2022, 4:41pm UTC](https://answers.netlify.com/t/the-page-doesnt-have-the-stylings-gatsby-styled-component-when-first-launched/55646/3 "2022-04-28T16:41:19Z")

</div>

Yes, it works perfectly locally, and it builds too

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [May 1, 2022, 11:20am UTC](https://answers.netlify.com/t/the-page-doesnt-have-the-stylings-gatsby-styled-component-when-first-launched/55646/4 "2022-05-01T11:20:59Z")

</div>

Hey @rafael.soteldo,

One of our users has faced this issue before and they narrowed it down to styled components being an issue. They have since locked the version 5.3.3 of that library and are not having any issues.