diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index cf6c336..ef46465 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -5,7 +5,7 @@ const Footer = () => {
   return (
     <footer className=" py-10 text-center text-gray-700">
       <div className="flex items-center justify-center">
-        <p className="mr-2">Made with </p>
+        <p className="mr-2">Made with</p>
         <HeartFilled className="text-red-700" />
         <p className="ml-2"> by Lucas Morais</p>
       </div>
diff --git a/src/components/Timeline/index.tsx b/src/components/Timeline/index.tsx
index 5761580..acc580f 100644
--- a/src/components/Timeline/index.tsx
+++ b/src/components/Timeline/index.tsx
@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 
 import Item from './Item';
 
+const theme = require('@/styles/themes');
+
 interface ItemNode {
   key: string;
   title: string;
@@ -110,6 +112,7 @@ export default function Timeline({ data }: Props) {
     const result: TimelineItemProps = {
       children: renderItem(n),
       position: 'right',
+      color: theme.primary,
     };
     if (n.isChild) result.color = 'gray';
     return result;
diff --git a/src/styles/themes.js b/src/styles/themes.js
new file mode 100644
index 0000000..3f4abbe
--- /dev/null
+++ b/src/styles/themes.js
@@ -0,0 +1,3 @@
+module.exports = {
+  primary: '#253db6',
+};
diff --git a/tailwind.config.js b/tailwind.config.js
index e0d89b4..f60d9ab 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+const theme = require('./src/styles/themes');
+
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {
@@ -43,7 +45,7 @@ module.exports = {
           800: '#2c5282',
           900: '#2a4365',
         },
-        primary: '#0052ff',
+        primary: theme.primary,
       },
     },
   },