diff --git a/front/.eslintrc.json b/front/.eslintrc.json
index a37c6a81..06bacac5 100644
--- a/front/.eslintrc.json
+++ b/front/.eslintrc.json
@@ -12,6 +12,6 @@
       { "max": 75, "skipBlankLines": true, "skipComments": true }
     ],
     "complexity": ["error", 6],
-    "prettier/prettier": ["error", { "tabWidth": 4 }]
+    "prettier/prettier": ["error", {"tabWidth": 4}]
   }
 }
diff --git a/front/src/app/EmptyLogs.tsx b/front/src/app/EmptyLogs.tsx
index b44424bb..7537f665 100644
--- a/front/src/app/EmptyLogs.tsx
+++ b/front/src/app/EmptyLogs.tsx
@@ -1,4 +1,4 @@
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { CardAtom } from "@/atomic/atoms";
 import Link from "next/link";
 
 export default function EmptyLogs() {
diff --git a/front/src/app/LogsTable.tsx b/front/src/app/LogsTable.tsx
index ee9daa4d..6d2715ad 100644
--- a/front/src/app/LogsTable.tsx
+++ b/front/src/app/LogsTable.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { CardAtom, SearchIcon, TextInput } from "@/atomic/atoms";
 import { llm_logs } from "@prisma/client";
 import { useRouter } from "next/navigation";
 
@@ -11,6 +11,7 @@ export default function LogsTable({ logs }: Props) {
 
     return (
         <CardAtom>
+            <TextInput placeholder="Search" icon={<SearchIcon />} />
             <table className="table-fixed w-full">
                 <thead>
                     <tr className="bg-gray-100">
diff --git a/front/src/app/loading.tsx b/front/src/app/loading.tsx
index 7c038da6..b5457d9f 100644
--- a/front/src/app/loading.tsx
+++ b/front/src/app/loading.tsx
@@ -1,5 +1,4 @@
-import { AnimatedPulseAtom } from "@/atomic/atoms/AnimatedPulseAtom";
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { AnimatedPulseAtom, CardAtom } from "@/atomic/atoms";
 
 export default function Loading() {
     return (
diff --git a/front/src/app/logs/[id]/page.tsx b/front/src/app/logs/[id]/page.tsx
index 4e111360..b8f4c6f2 100644
--- a/front/src/app/logs/[id]/page.tsx
+++ b/front/src/app/logs/[id]/page.tsx
@@ -1,4 +1,4 @@
-import { CardAtom } from "@/atomic/atoms/CardAtom";
+import { CardAtom } from "@/atomic/atoms";
 import { LogsData } from "@/data/LogsData";
 
 export default async function LogDetails({
diff --git a/front/src/atomic/atoms/CardAtom.tsx b/front/src/atomic/atoms/CardAtom.tsx
index 2504cf20..e8b91786 100644
--- a/front/src/atomic/atoms/CardAtom.tsx
+++ b/front/src/atomic/atoms/CardAtom.tsx
@@ -1,6 +1,6 @@
 export const CardAtom = ({ children }: { children: React.ReactNode }) => {
     return (
-        <div className="border bg-white shadow rounded-md p-4 w-full mx-auto">
+        <div className="border bg-white shadow rounded-md p-4 w-full mx-auto flex flex-col gap-4">
             {children}
         </div>
     );
diff --git a/front/src/atomic/atoms/SearchIcon.tsx b/front/src/atomic/atoms/SearchIcon.tsx
new file mode 100644
index 00000000..73379c2b
--- /dev/null
+++ b/front/src/atomic/atoms/SearchIcon.tsx
@@ -0,0 +1,14 @@
+export const SearchIcon = () => {
+    return (
+        <svg
+            className="text-gray-600 h-4 w-4 fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            id="search_icon"
+            viewBox="0 0 56.966 56.966"
+            width="512px"
+            height="512px"
+        >
+            <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z" />
+        </svg>
+    );
+};
diff --git a/front/src/atomic/atoms/TextInput.tsx b/front/src/atomic/atoms/TextInput.tsx
new file mode 100644
index 00000000..bfb7b7d8
--- /dev/null
+++ b/front/src/atomic/atoms/TextInput.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+export const TextInput = ({
+    placeholder = "",
+    icon = "",
+}: {
+    placeholder: string;
+    icon: React.ReactNode;
+}) => {
+    return (
+        <div className="relative">
+            <input
+                type="text"
+                className="w-full border-2 border-gray-300 bg-white h-10 px-4 pr-16 rounded-lg focus:border-theodo-blue focus:outline-none"
+                placeholder={placeholder}
+            />
+            <div className="absolute right-0 top-0 py-3 px-3">{icon}</div>
+        </div>
+    );
+};
diff --git a/front/src/atomic/atoms/index.ts b/front/src/atomic/atoms/index.ts
new file mode 100644
index 00000000..ff467363
--- /dev/null
+++ b/front/src/atomic/atoms/index.ts
@@ -0,0 +1,6 @@
+export * from "./CardAtom";
+export * from "./AnimatedPulseAtom";
+export * from "./OmnilogLogo";
+export * from "./TheodoLogo";
+export * from "./TextInput";
+export * from "./SearchIcon";
diff --git a/front/src/atomic/molecules/Scaffold.tsx b/front/src/atomic/molecules/Scaffold.tsx
index 88c10477..3338e721 100644
--- a/front/src/atomic/molecules/Scaffold.tsx
+++ b/front/src/atomic/molecules/Scaffold.tsx
@@ -1,5 +1,4 @@
-import { OmnilogLogo } from "../atoms/OmnilogLogo";
-import { TheodoLogo } from "../atoms/TheodoLogo";
+import { OmnilogLogo, TheodoLogo } from "../atoms";
 
 export const Scaffold = ({ children }: { children: React.ReactNode }) => {
     return (
diff --git a/front/tailwind.config.ts b/front/tailwind.config.ts
index 93950d48..b947e95d 100644
--- a/front/tailwind.config.ts
+++ b/front/tailwind.config.ts
@@ -12,6 +12,15 @@ const config: Config = {
                 "gradient-conic":
                     "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
             },
+            colors: {
+                "theodo-green": "#6CBC9C",
+                "theodo-dark-green": "#374B42",
+                "theodo-grey": "#9AB0A6",
+                "theodo-sharp-blue": "#0062AD",
+                "theodo-light-blue": "#6CB4E6",
+                "theodo-turquoise": "#009DAC",
+                "theodo-blue": "#2D7FAE",
+            }
         },
     },
     plugins: [],