diff --git a/packages/example/src/assets/assets.d.ts b/packages/example/src/assets/assets.d.ts
new file mode 100644
index 0000000..4ce4da1
--- /dev/null
+++ b/packages/example/src/assets/assets.d.ts
@@ -0,0 +1,14 @@
+declare module '*.svg' {
+ const url: string
+ export default url
+}
+
+declare module '*.jpg' {
+ const url: string
+ export default url
+}
+
+declare module '*.png' {
+ const url: string
+ export default url
+}
diff --git a/packages/example/src/assets/images/pollingIcon.svg b/packages/example/src/assets/images/pollingIcon.svg
new file mode 100644
index 0000000..ac67eb5
--- /dev/null
+++ b/packages/example/src/assets/images/pollingIcon.svg
@@ -0,0 +1,16 @@
+
diff --git a/packages/example/src/components/TopBar.tsx b/packages/example/src/components/TopBar.tsx
new file mode 100644
index 0000000..efc8039
--- /dev/null
+++ b/packages/example/src/components/TopBar.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import styled from 'styled-components'
+
+type TopBarProps = {
+ logo: string
+ title: string
+}
+
+export function TopBar({ logo, title }: TopBarProps) {
+ return (
+
+
+
+ {title.split(' ').map((text) => (
+ {text}
+ ))}
+
+
+
+ )
+}
+
+const TitleWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin: auto;
+ margin-left: 8px;
+ font-family: Inter;
+ font-style: italic;
+ font-weight: 600;
+ font-size: 20px;
+ line-height: 17px;
+`
+
+const Button = styled.button`
+ border-radius: 8px;
+ border: 0px;
+ margin: auto;
+ margin-right: 40px;
+ height: 44px;
+ width: 117px;
+`
+
+const Logo = styled.div`
+ height: 30px;
+ width: 32px;
+ margin-left: 40px;
+ margin-top: auto;
+ margin-bottom: auto;
+`
+
+const Wrapper = styled.div`
+ height: 96px;
+ background: #fbfcfe;
+ display: flex;
+`
diff --git a/packages/example/src/index.html b/packages/example/src/index.html
index 74087fc..f58c32f 100644
--- a/packages/example/src/index.html
+++ b/packages/example/src/index.html
@@ -5,6 +5,7 @@
+
waku voting example
diff --git a/packages/example/src/pages/Poling.tsx b/packages/example/src/pages/Poling.tsx
index 3272da3..d71b499 100644
--- a/packages/example/src/pages/Poling.tsx
+++ b/packages/example/src/pages/Poling.tsx
@@ -1,6 +1,18 @@
import React from 'react'
import { WakuPolling } from '@status-waku-voting/react-components'
-
+import styled from 'styled-components'
+import { TopBar } from '../components/TopBar'
+import pollingIcon from '../assets/images/pollingIcon.svg'
export function Polling() {
- return
+ return (
+
+
+
+
+ )
}
+
+const Wrapper = styled.div`
+ height: 100%;
+ width: 100%;
+`
diff --git a/packages/react-components/src/components/radioGroup/RadioGroup.tsx b/packages/react-components/src/components/radioGroup/RadioGroup.tsx
index 42ef742..5ccd545 100644
--- a/packages/react-components/src/components/radioGroup/RadioGroup.tsx
+++ b/packages/react-components/src/components/radioGroup/RadioGroup.tsx
@@ -1,5 +1,4 @@
import React from 'react'
-import styled from 'styled-components'
import { RadioButton } from './RadioButton'
type RadioGroupProps = {