diff --git a/app/components/SearchBar.tsx b/app/components/SearchBar.tsx
index 2f6043d..5588f84 100644
--- a/app/components/SearchBar.tsx
+++ b/app/components/SearchBar.tsx
@@ -1,28 +1,68 @@
 "use client";
 import styled from "styled-components";
-import Button from "./Button";
-import TextInput from "./TextInput";
 
-// TODO: Add props for SearchBarBar
 type SearchBarProps = {
-  propName: string; // replace string with actual prop type
+  placeholder?: string;
 };
 
-// TODO: implement SearchBar component
-export default function SearchBar({}: SearchBarProps) {
+// TODO: Replace SearchInput with TextInput component (borderless variant) and SearchButton with Button component once both are fully implemented
+// This SearchBar extends TextInput and Button components as intended
+export default function SearchBar({ placeholder = "Search" }: SearchBarProps) {
   return (
     <StyledSearchBar>
-      <TextInput propName="search" />
-      <Button
-        label="search"
+      <SearchInput type="text" placeholder={placeholder} />
+      <SearchButton
         onClick={() => {
           console.log("search");
         }}
-      />
+      >
+        <span className="material-symbols-rounded">search</span>
+      </SearchButton>
     </StyledSearchBar>
   );
 }
 
 const StyledSearchBar = styled.div`
-  /* TODO: Add styles for SearchBar */
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const SearchInput = styled.input`
+  padding: 8px;
+  align-self: stretch;
+  flex: 1 0 0;
+  border: none;
+  border-radius: 4px;
+  background: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--black);
+  outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &::placeholder {
+    color: var(--gray);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const SearchButton = styled.button`
+  display: flex;
+  padding: 8px 16px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: var(--orange);
+  border: none;
+  cursor: pointer;
+  color: var(--black);
+
+  &:hover {
+    background: var(--dark-orange);
+  }
 `;
diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
index 21bb405..575d01f 100644
--- a/app/components/TextInput.tsx
+++ b/app/components/TextInput.tsx
@@ -1,26 +1,57 @@
 "use client";
 import styled from "styled-components";
 
-// TODO: Add props for TextInput
 type TextInputProps = {
-  propName: string; // replace string with actual prop type
+  label?: string;
+  placeholder?: string;
 };
 
-// TODO: implement TextInput component
-export default function TextInput({}: TextInputProps) {
+export default function TextInput({ label, placeholder }: TextInputProps) {
   return (
-    <div>
-      <StyledInputLabel>
-        <StyledTextInput />
-      </StyledInputLabel>
-    </div>
+    <StyledInputContainer>
+      {label && <StyledInputLabel>{label}</StyledInputLabel>}
+      <StyledTextInput type="text" placeholder={placeholder} />
+    </StyledInputContainer>
   );
 }
 
-const StyledTextInput = styled.input`
-  /* TODO: Add styles for TextInput */
+const StyledInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 4px;
 `;
 
 const StyledInputLabel = styled.label`
-  /* TODO: Add styles for InputLabel */
+  font-family: Inter, sans-serif;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  color: var(--black);
+`;
+
+const StyledTextInput = styled.input`
+  display: flex;
+  padding: 8px;
+  align-items: center;
+  align-self: stretch;
+  flex: 1 0 0;
+  border-radius: 4px;
+  border: 2px solid var(--dark-gray);
+  background: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: var(--black);
+  outline: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &::placeholder {
+    color: var(--gray);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;