diff --git a/web/templates/custom_styles.html b/web/templates/custom_styles.html
new file mode 100644
index 0000000..2f748ec
--- /dev/null
+++ b/web/templates/custom_styles.html
@@ -0,0 +1,14 @@
+{{define "custom_styles"}}
+<style>
+    :root {
+        --bg-color: {{.Config.CustomColors.BgColor}};
+        --card-bg: {{.Config.CustomColors.CardBg}};
+        --border-color: {{.Config.CustomColors.BorderColor}};
+        --accent-color: {{.Config.CustomColors.AccentColor}};
+        --text-primary: {{.Config.CustomColors.TextPrimary}};
+        --text-secondary: {{.Config.CustomColors.TextSecondary}};
+        --text-muted: {{.Config.CustomColors.TextMuted}};
+        --btn-text: {{.Config.CustomColors.ButtonText}};
+    }
+</style>
+{{end}}
diff --git a/web/templates/file_list.html b/web/templates/file_list.html
new file mode 100644
index 0000000..eb84fcb
--- /dev/null
+++ b/web/templates/file_list.html
@@ -0,0 +1,24 @@
+{{define "file_list"}}
+<div class="file-browser">
+    {{range .Files}}
+    <div class="file-row">
+        <div class="file-icon">{{if .IsDir}}📂{{else}}📄{{end}}</div>
+        <div class="file-name">
+            {{if .IsDir}}
+                <a href="/repo?name={{$.Repository.Name}}&path={{if $.CurrentPath}}{{$.CurrentPath}}/{{end}}{{.Name}}">{{.Name}}</a>
+            {{else}}
+                <a href="/repo?name={{$.Repository.Name}}&path={{if $.CurrentPath}}{{$.CurrentPath}}/{{end}}{{.Name}}&type=blob">{{.Name}}</a>
+            {{end}}
+        </div>
+        <div class="file-meta">{{if .IsDir}}-{{else}}{{.Size | humanize}}{{end}}</div>
+        <div class="file-meta">--</div>
+    </div>
+    {{else}}
+    <div style="padding: 1rem; text-align: center; color: var(--text-muted);">Empty directory.</div>
+    {{end}}
+</div>
+
+{{if .Readme}}
+    {{template "readme_viewer" (dict "Title" "README.md" "Content" .Readme "ID" "repo-readme")}}
+{{end}}
+{{end}}
diff --git a/web/templates/index.html b/web/templates/index.html
new file mode 100644
index 0000000..94d6bd0
--- /dev/null
+++ b/web/templates/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{.Config.Username}}</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    {{template "custom_styles" .}}
+    <style>
+        .readme-content {
+            padding: 2rem;
+            background: var(--bg-color);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            margin-bottom: 2rem;
+            overflow-wrap: break-word;
+        }
+
+        .readme-content img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .readme-content pre {
+            background: #1e1e1e;
+            padding: 1rem;
+            border-radius: 6px;
+            overflow-x: auto;
+        }
+    </style>
+    <link rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+
+<body>
+
+    <div class="container" style="margin-top: 2rem;">
+
+        {{template "sidebar" .}}
+
+        <main class="main-content">
+
+            {{template "navbar" .}}
+
+            <div class="content-wrapper">
+                {{if eq .ActiveTab "overview"}}
+
+                {{if .SpecialReadme}}
+                {{template "readme_viewer" (dict "Title" (printf "%s / README.md" .Config.GithubUser) "Content"
+                .SpecialReadme "ID" "special")}}
+                {{end}}
+
+                {{template "contribution_graph" .}}
+
+                <div class="section-title">
+                    <span>Popular Repositories</span>
+                    <a href="#" onclick="document.getElementById('pins-modal').style.display='flex'; return false;"
+                        style="font-size: 0.8rem; font-weight: 400; color: var(--accent-color);">Customize your pins</a>
+                </div>
+
+                {{template "repo_grid" .}}
+                {{else if eq .ActiveTab "repositories"}}
+                <div class="search-bar-container">
+                    <input type="text" class="form-control" placeholder="Find a repository..."
+                        style="flex: 1; padding: 0.25rem 0.75rem; font-size: 0.9rem; height: auto;">
+                    <a href="/new" class="btn-primary"
+                        style="background: var(--accent-color); width: auto; text-align: center; padding: 0.25rem 1rem; font-size: 0.9rem; display: flex; align-items: center;">New</a>
+                </div>
+
+                {{template "repo_list" .}}
+                {{end}}
+            </div>
+
+        </main>
+    </div>
+
+    <footer class="footer">
+        Powered by
+        <span class="footer-icon"></span>
+        <a href="https://github.com/ArthurAugis/PortaGit" target="_blank"
+            style="color: inherit; text-decoration: none; font-weight: 600;">PortaGit</a>
+    </footer>
+
+    <div id="pins-modal"
+        style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); justify-content: center; align-items: center; z-index: 1000;">
+        <div
+            style="background: var(--card-bg); padding: 2rem; border-radius: 8px; border: 1px solid var(--border-color); width: 500px; max-width: 90%; max-height: 80vh; display: flex; flex-direction: column;">
+            <h3 style="margin-top: 0; color: var(--text-primary); margin-bottom: 1rem;">Customize Pins</h3>
+            <p style="color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem;">Select up to 6
+                repositories to pin to your profile.</p>
+
+            <form action="/api/pins" method="POST"
+                style="display: flex; flex-direction: column; overflow: hidden; flex: 1;">
+                <input type="text" id="pinSearchInput" class="form-control" placeholder="Search repositories..."
+                    style="margin-bottom: 1rem;">
+                <div id="repoPinList"
+                    style="overflow-y: auto; flex: 1; border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 1.5rem; min-height: 200px;">
+                    {{ $pinned := .Config.PinnedRepos }}
+                    {{range .Config.Repositories}}
+                    {{ $repo := . }}
+                    <label
+                        style="display: flex; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); cursor: pointer;"
+                        class="repo-pin-item">
+                        <input type="checkbox" name="pinned_repos" value="{{.Name}}" {{if $pinned}}{{range $p
+                            :=$pinned}}{{if eq $p $repo.Name}}checked{{end}}{{end}}{{end}} style="margin-right: 1rem;">
+                        <span style="font-weight: 500;">{{.Name}}</span>
+                        {{if .Language}}
+                        <span
+                            style="margin-left: auto; font-size: 0.8rem; color: var(--text-muted);">{{.Language}}</span>
+                        {{end}}
+                    </label>
+                    {{end}}
+                </div>
+                <script>
+                    document.getElementById('pinSearchInput').addEventListener('input', function (e) {
+                        const term = e.target.value.toLowerCase();
+                        const items = document.querySelectorAll('.repo-pin-item');
+                        items.forEach(item => {
+                            const name = item.querySelector('span').textContent.toLowerCase(); // Filter based on the repository name found in the first span element.
+                            if (name.includes(term)) {
+                                item.style.display = 'flex';
+                            } else {
+                                item.style.display = 'none';
+                            }
+                        });
+                    });
+                </script>
+
+                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
+                    <button type="button" onclick="document.getElementById('pins-modal').style.display='none'"
+                        class="btn-primary"
+                        style="background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); width: auto;">Cancel</button>
+                    <button type="submit" class="btn-primary" style="width: auto;">Save Pins</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+</body>
+
+</html>
\ No newline at end of file
